<template>
  <div class="page">
    <header class="topbar">
      <div class="brand">
        <span class="brand-mark">TQ</span>
        <span class="brand-name">TrakQR</span>
      </div>
      <nav class="nav">
        <a href="#features">Features</a>
        <a href="#analytics">Analytics</a>
        <a href="#designer">Designer</a>
      </nav>
      <div class="auth-buttons">
        <router-link to="/login" class="ghost">Sign in</router-link>
        <router-link to="/register" class="cta">Get Started</router-link>
      </div>
    </header>

    <main>
      <section class="hero">
        <div class="hero-copy">
          <p class="eyebrow">QR-first link intelligence</p>
          <h1>Design bold QR codes. Track every scan.</h1>
          <p class="subhead">
            Build branded short links, craft beautiful QR designs, and turn scans into
            actionable analytics for your projects.
          </p>
          <div class="hero-actions">
            <router-link to="/register" class="cta">Start free</router-link>
            <button class="ghost">View demo</button>
          </div>
          <div class="hero-metrics">
            <div>
              <p class="metric">10k+</p>
              <p class="label">Events per month on free tier</p>
            </div>
            <div>
              <p class="metric">3</p>
              <p class="label">Designer presets included</p>
            </div>
          </div>
        </div>
        <div class="hero-panel">
          <div class="panel-header">
            <div>
              <p class="panel-title">Live QR Preview</p>
              <p class="panel-sub">Updated from your short link</p>
            </div>
            <span class="status">Active</span>
          </div>
          <div class="qr-preview">
            <div class="qr-grid"></div>
          </div>
          <div class="panel-footer">
            <div>
              <p class="label">https://tq.link/menu</p>
              <p class="hint">Scan-ready, export PNG or SVG</p>
            </div>
            <button class="ghost small">Export</button>
          </div>
        </div>
      </section>

      <section id="features" class="feature-grid">
        <article class="feature">
          <h3>Branded short links</h3>
          <p>Custom slugs, expiring links, and password protection built in.</p>
        </article>
        <article class="feature">
          <h3>Designer-grade QR</h3>
          <p>Control shapes, colors, quiet zones, and add logos with precision.</p>
        </article>
        <article class="feature">
          <h3>Trustworthy analytics</h3>
          <p>See scans, clicks, referrers, and device mix across every project.</p>
        </article>
      </section>

      <section id="analytics" class="split">
        <div>
          <h2>Analytics that guide your next campaign.</h2>
          <p>
            Track events by link and by QR design. Spot spikes in real time and
            attribute every scan with confidence.
          </p>
          <ul class="list">
            <li>Live timelines with 24h, 7d, 30d filters</li>
            <li>Device and geo snapshots for quick decisions</li>
            <li>Workspace and project rollups</li>
          </ul>
        </div>
        <div class="chart-card">
          <div class="chart-header">
            <p class="panel-title">Events last 7 days</p>
            <p class="panel-sub">Scans + clicks</p>
          </div>
          <div class="chart">
            <span style="height: 30%"></span>
            <span style="height: 45%"></span>
            <span style="height: 65%"></span>
            <span style="height: 50%"></span>
            <span style="height: 80%"></span>
            <span style="height: 60%"></span>
            <span style="height: 70%"></span>
          </div>
        </div>
      </section>

      <section id="designer" class="callout">
        <div>
          <h2>Launch your first QR in minutes.</h2>
          <p>Start with presets or build your own design system.</p>
        </div>
        <router-link to="/register" class="cta">Create a project</router-link>
      </section>
    </main>
  </div>
</template>

<style scoped>
.auth-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}
</style>
