// sections.jsx — page sections

const D = window.SPOT_DATA;

// Top bar
function TopBar() {
  return (
    <header className="topbar">
      <div className="brand">
        <div className="brand-mark">S</div>
        <span>Spot&nbsp;Fitness</span>
      </div>
      <div className="topbar-meta">
        <span className="live">Live data</span>
        <span>Sales brief</span>
        <span>May 2025 — Apr 2026</span>
      </div>
    </header>
  );
}

// Hero
function Hero() {
  return (
    <section className="hero">
      <div className="shell">
        <div className="eyebrow"><span className="dot"></span>The Spot Audience · Sales Brief · v3.2</div>
        <div style={{ height: 32 }} />
        <div className="hero-grid">
          <div>
            <h1 className="h-display">
              Real local intent.<br />
              <em>Measurable</em> foot traffic.
            </h1>
            <p className="h-sub" style={{ marginTop: 48 }}>
              Twelve months of search and analytics data on how people find the venues listed on Spot Fitness —
              and why operators of parks, gyms, courts, and waterfronts should put their location in front of this audience.
            </p>
            <div className="hero-tags">
              <span className="tag lime">Local-intent search</span>
              <span className="tag">Mobile-first</span>
              <span className="tag clay">AI-engine ready</span>
              <span className="tag">615 venue pages</span>
              <span className="tag">3,296 queries / mo</span>
            </div>
          </div>

          <div className="hero-stats">
            <div className="hero-stat">
              <div className="v"><CountUp to={D.window30.impressions} /></div>
              <div className="l">Search impressions / 30 days</div>
              <div className="d">↑ trending upward week over week</div>
            </div>
            <div className="hero-stat">
              <div className="v"><CountUp to={D.annual.uniqueVisitors} format={n => (Math.round(n / 100) / 10).toFixed(1) + "k"} /></div>
              <div className="l">Unique visitors / 12 mo</div>
              <div className="d">{D.annual.pageviews.toLocaleString()} pageviews</div>
            </div>
            <div className="hero-stat">
              <div className="v"><CountUp to={D.window30.uniqueQueries} /></div>
              <div className="l">Distinct queries / 30 days</div>
              <div className="d">long-tail discovery, not brand search</div>
            </div>
            <div className="hero-stat">
              <div className="v"><CountUp to={D.window30.uniquePages} /></div>
              <div className="l">Venue pages drawing impressions</div>
              <div className="d">across {D.window30.uniqueCountries} countries</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Snapshot — 12mo chart + KPIs
function Snapshot() {
  return (
    <section>
      <div className="shell">
        <div className="section-head">
          <div className="meta">
            Section 01 / 05
            <span className="num">01</span>
          </div>
          <div>
            <h2 className="h-section">A <em>year</em> of steady reach.</h2>
            <p className="h-sub" style={{ marginTop: 12 }}>
              Spot Fitness has delivered a sustained audience for 12 months running.
              Peaks in fall correspond with outdoor-season search, but baseline reach holds in every month.
            </p>
          </div>
        </div>

        <div className="snapshot">
          <div className="chart-card">
            <div className="ttl">
              <h3>Unique visitors · monthly</h3>
              <span className="pill">May 2025 → Apr 2026</span>
            </div>
            <MonthlyVisitorsChart data={D.annual.monthly} />
            <div className="legend">
              <span className="imp" style={{ "--c": "oklch(0.30 0.06 150)" }}>Visitors</span>
              <span style={{ color: "var(--mid)" }}>Peak: Nov '25 · 685</span>
              <span style={{ color: "var(--mid)" }}>Trough: Feb '26 · 400</span>
            </div>
          </div>

          <div className="stat-stack">
            <div className="stat-card">
              <div>
                <div className="v">{D.annual.uniqueVisitors.toLocaleString()}</div>
                <div className="l">Unique visitors</div>
              </div>
              <div className="delta down">↓12%</div>
            </div>
            <div className="stat-card">
              <div>
                <div className="v">{D.annual.pageviews.toLocaleString()}</div>
                <div className="l">Total pageviews</div>
              </div>
              <div className="delta down">↓28%</div>
            </div>
            <div className="stat-card">
              <div>
                <div className="v">{D.annual.viewsPerVisit}</div>
                <div className="l">Views / visit</div>
              </div>
              <div className="delta flat">YoY</div>
            </div>
            <div className="stat-card">
              <div>
                <div className="v">{D.feb.impressions.toLocaleString()}</div>
                <div className="l">GSC impressions · Feb '26</div>
                <div className="sub" style={{ marginTop: 6 }}>147 clicks · 28 first-impression pages</div>
              </div>
              <div className="delta up">+strong</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Demand — 30-day impressions + intent breakdown
function Demand() {
  const totalIntent = D.window30.intentCategories.reduce((s, c) => s + c.imp, 0);
  return (
    <section className="dark">
      <div className="shell">
        <div className="section-head">
          <div className="meta">
            Section 02 / 05
            <span className="num">02</span>
          </div>
          <div>
            <h2 className="h-section" style={{ color: "var(--forest-ink)" }}>The <em>demand</em> beneath the clicks.</h2>
            <p className="h-sub" style={{ marginTop: 12 }}>
              In the last 30 days alone Spot served <b style={{ color: "var(--lime)" }}>{D.window30.impressions.toLocaleString()}</b> search impressions across
              <b style={{ color: "var(--forest-ink)" }}> {D.window30.uniqueQueries.toLocaleString()}</b> unique queries. That's a 30-day demand iceberg —
              and almost all of it is venue-specific.
            </p>
          </div>
        </div>

        <div className="chart-card" style={{ background: "oklch(0.20 0.012 80)", borderColor: "oklch(0.32 0.012 80)" }}>
          <div className="ttl">
            <h3 style={{ color: "var(--forest-ink)" }}>Daily search impressions</h3>
            <span className="pill" style={{ color: "oklch(0.7 0.02 90)" }}>Apr 6 → May 5, 2026 · GSC</span>
          </div>
          <DailyImpressionsChart data={D.window30.daily} tone="dark" />
          <div className="legend" style={{ color: "oklch(0.7 0.02 90)" }}>
            <span style={{ "--c": "var(--lime)" }}>Impressions / day</span>
            <span>Window avg: ~1,238 / day</span>
            <span>Peak: Apr 30 · 1,899</span>
            <span style={{ color: "var(--lime)" }}>+50% week-over-week trend</span>
          </div>
        </div>

        <div style={{ height: 56 }} />

        <div className="divider-mono">Search intent by category</div>
        <div className="intent-cats">
          {D.window30.intentCategories.map((c, i) => (
            <div key={i} className="intent-cat" style={{ borderTopColor: "oklch(0.32 0.012 80)" }}>
              <div className="row">
                <div className="name" style={{ color: "var(--forest-ink)" }}>{c.name}</div>
                <div className="pct" style={{ color: "oklch(0.78 0.012 80)" }}>{((c.imp / totalIntent) * 100).toFixed(1)}% of impressions</div>
              </div>
              <div className="bar" style={{ background: "oklch(0.22 0.012 80)" }}>
                <i style={{ width: `${(c.imp / totalIntent) * 100}%` }} />
              </div>
              <div className="meta" style={{ color: "oklch(0.68 0.012 80)" }}>
                <span>{c.imp.toLocaleString()} impressions · {c.q.toLocaleString()} queries</span>
                <span>{c.clk} clicks</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Queries — local intent showcase
function Queries() {
  return (
    <section>
      <div className="shell">
        <div className="section-head">
          <div className="meta">
            Section 03 / 05
            <span className="num">03</span>
          </div>
          <div>
            <h2 className="h-section">People are searching for <em>specific places.</em></h2>
            <p className="h-sub" style={{ marginTop: 12 }}>
              Almost none of Spot's search demand is generic. Visitors arrive looking for a named park, a named gym,
              a specific basketball court, photos of a specific waterfront. That's pre-qualified, ready-to-visit intent —
              the highest-value traffic a venue can attract.
            </p>
          </div>
        </div>

        <div className="queries-grid">
          <div>
            <div className="divider-mono">Top queries · last 30 days · ranked by impressions</div>
            <div className="queries-list">
              {D.window30.topQueriesByImpressions.slice(0, 10).map((q, i) => (
                <div key={i} className="query-row">
                  <div className="idx">{String(i + 1).padStart(2, "0")}</div>
                  <div className="q">"{q.q}"</div>
                  <div className="imp">{q.imp.toLocaleString()} imp</div>
                  <div className={`clk ${q.clk === 0 ? "zero" : ""}`}>{q.clk} clk</div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div style={{ padding: "32px 28px", background: "var(--ink)", color: "var(--bg)", marginBottom: 24 }}>
              <div className="eyebrow" style={{ color: "oklch(0.7 0.02 90)" }}>The pitch in one number</div>
              <div className="bignum" style={{ fontSize: 96, color: "var(--lime)", marginTop: 8, lineHeight: 0.9 }}>5,459</div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: "oklch(0.75 0.012 80)", marginTop: 8, letterSpacing: "0.04em" }}>
                impressions for <b style={{ color: "var(--bg)" }}>one single venue search</b> in 30 days
              </div>
              <div style={{ fontSize: 14, color: "oklch(0.82 0.012 80)", marginTop: 14, lineHeight: 1.4 }}>
                A single park — "town n country nature preserve" — surfaced on the Spot listing 5,459 times in a month.
                Most venues we onboard already have demand. Spot just owns the answer page.
              </div>
            </div>

            <div className="divider-mono">Top clicks · last 30 days</div>
            <div className="queries-list">
              {D.window30.topQueriesByClicks.slice(0, 8).map((q, i) => (
                <div key={i} className="query-row" style={{ gridTemplateColumns: "26px 1fr auto" }}>
                  <div className="idx">{String(i + 1).padStart(2, "0")}</div>
                  <div className="q" style={{ fontSize: 20 }}>"{q.q}"</div>
                  <div className="clk">{q.clk} clk · {q.imp} imp</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Audience — sources + geo + device
function Audience() {
  const maxV = Math.max(...D.sources.map(s => s.v));
  const total = D.feb.devices.desktop + D.feb.devices.mobile + D.feb.devices.tablet;
  return (
    <section>
      <div className="shell">
        <div className="section-head">
          <div className="meta">
            Section 04 / 05
            <span className="num">04</span>
          </div>
          <div>
            <h2 className="h-section">Found on <em>every</em> surface.</h2>
            <p className="h-sub" style={{ marginTop: 12 }}>
              Spot Fitness ranks across nine distinct discovery channels — including emerging AI engines.
              Your venue benefits from a multi-channel funnel without lifting a finger.
            </p>
          </div>
        </div>

        <div className="sources-grid">
          {D.sources.map((s, i) => (
            <div key={i} className={`source-cell ${s.v > 1000 ? "highlight" : ""}`}>
              <div className="badge">{s.kind}</div>
              <div className="nm">{s.name}</div>
              <div className="v">{s.v >= 1000 ? (s.v / 1000).toFixed(1) + "k" : s.v} visitors · 12 mo</div>
              <div className="bar"><i style={{ width: `${(s.v / maxV) * 100}%` }} /></div>
              {s.ai && <div className="ai-tag">AI engine</div>}
            </div>
          ))}
        </div>

        <div style={{ height: 80 }} />

        <div className="snapshot">
          <div>
            <div className="divider-mono">Device split · GSC Feb 2026</div>
            <div className="device-row">
              <div className="device major">
                <div className="l">Mobile</div>
                <div className="v">{D.feb.devices.mobile}</div>
                <div className="meta">{Math.round(D.feb.devices.mobile / total * 100)}% of clicks · ready-to-visit traffic</div>
                <div className="vis"><i style={{ width: `${(D.feb.devices.mobile / total) * 100}%` }} /></div>
              </div>
              <div className="device">
                <div className="l">Desktop</div>
                <div className="v">{D.feb.devices.desktop}</div>
                <div className="meta">{Math.round(D.feb.devices.desktop / total * 100)}% · research / browse</div>
                <div className="vis"><i style={{ width: `${(D.feb.devices.desktop / total) * 100}%` }} /></div>
              </div>
              <div className="device">
                <div className="l">Tablet</div>
                <div className="v">{D.feb.devices.tablet}</div>
                <div className="meta">{Math.round(D.feb.devices.tablet / total * 100)}%</div>
                <div className="vis"><i style={{ width: `${(D.feb.devices.tablet / total) * 100}%` }} /></div>
              </div>
            </div>
            <p style={{ fontSize: 14, color: "var(--ink-2)", maxWidth: 60 + "ch", marginTop: 24 }}>
              Mobile-dominant audiences correlate with on-the-go decisions: directions, photos, and same-day visits.
              Spot pages render in under two seconds on cellular, optimized for the exact moment someone is about to go.
            </p>
          </div>

          <div className="geo-card">
            <div className="ttl" style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14, gap: 16, flexWrap: "wrap" }}>
              <h3 style={{ margin: 0, fontFamily: "var(--sans)", fontWeight: 600, fontSize: 16, whiteSpace: "nowrap" }}>Top countries</h3>
              <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--mid)", textTransform: "uppercase", letterSpacing: "0.08em", whiteSpace: "nowrap" }}>By clicks · Feb '26</span>
            </div>
            {D.feb.topCountries.map((c, i) => (
              <div key={i} className="geo-bar">
                <div className="nm">
                  <span className="flag" style={{ background: i === 0 ? "var(--lime)" : "var(--rule-strong)", color: i === 0 ? "oklch(0.22 0.04 140)" : "var(--ink-2)" }}>{c.code}</span>
                  {c.c}
                </div>
                <div className="v">{c.v}</div>
              </div>
            ))}
            <div style={{ marginTop: 18, paddingTop: 18, borderTop: "1px solid var(--rule)", fontFamily: "var(--mono)", fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5 }}>
              30-day surfacing reaches <b style={{ color: "var(--ink)" }}>{D.window30.uniqueCountries} countries</b>,
              but <b style={{ color: "var(--ink)" }}>97%</b> of clicks land from the US — the right audience for local operators.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Inventory — top performing pages
function Inventory() {
  const max = Math.max(...D.window30.topPagesByImpressions.map(p => p.imp));
  return (
    <section className="dark">
      <div className="shell">
        <div className="section-head">
          <div className="meta">
            Section 05 / 05
            <span className="num">05</span>
          </div>
          <div>
            <h2 className="h-section" style={{ color: "var(--forest-ink)" }}>Pages already <em>winning</em> for venues.</h2>
            <p className="h-sub" style={{ marginTop: 12, color: "oklch(0.78 0.012 80)" }}>
              These are the venue listings on Spot drawing the most search surfacing in the last 30 days.
              When we onboard your locations, this is the kind of page we build for them.
            </p>
          </div>
        </div>

        <div className="pages-table">
          <div className="head" style={{ color: "oklch(0.7 0.02 90)", borderBottom: "1px solid oklch(0.32 0.012 80)" }}>
            <div>#</div>
            <div>Page · venue</div>
            <div className="h-q">Unique queries</div>
            <div>Impressions</div>
            <div>Clicks</div>
          </div>
          {D.window30.topPagesByImpressions.map((p, i) => (
            <div key={i} className="page-row" style={{ borderBottom: "1px solid oklch(0.28 0.012 80)" }}>
              <div className="idx">{String(i + 1).padStart(2, "0")}</div>
              <div className="slug">
                <div style={{ color: "var(--forest-ink)", fontFamily: "var(--sans)", fontSize: 15, marginBottom: 2 }}>
                  {p.label}
                </div>
                <div style={{ color: "oklch(0.62 0.012 80)" }}>{p.p}</div>
              </div>
              <div className="qcount">{p.q} queries</div>
              <div className="imp" style={{ color: "var(--forest-ink)" }}>
                {p.imp.toLocaleString()}
                <div style={{ marginTop: 6, height: 3, background: "oklch(0.28 0.012 80)" }}>
                  <i style={{ display: "block", height: "100%", width: `${(p.imp / max) * 100}%`, background: "var(--lime)" }} />
                </div>
              </div>
              <div className={`clk ${p.clk === 0 ? "zero" : ""}`} style={{ color: p.clk === 0 ? "oklch(0.6 0.012 80)" : "var(--lime)" }}>
                {p.clk}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Pullout / quote / vision
function Pullout() {
  return (
    <section className="pullout">
      <div className="shell">
        <div className="eyebrow">The takeaway</div>
        <h2 className="h-display" style={{ marginTop: 20, maxWidth: "20ch" }}>
          When the search bar is the <em>front door,</em> Spot is the welcome mat.
        </h2>
        <div className="pullout-meta">
          <div className="item">
            <div className="v">37,140</div>
            <div className="l">Impressions / 30 days</div>
          </div>
          <div className="item">
            <div className="v">3,296</div>
            <div className="l">Unique search queries</div>
          </div>
          <div className="item">
            <div className="v">615</div>
            <div className="l">Venue pages indexed</div>
          </div>
          <div className="item">
            <div className="v">9</div>
            <div className="l">Discovery channels</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// CTA
function CTA() {
  return (
    <section className="cta" style={{ borderBottom: "none" }}>
      <div className="shell">
        <div className="eyebrow"><span className="dot"></span>For sales · Get a venue onboard</div>
        <div style={{ height: 24 }} />
        <h2 className="h-display">
          Put your venue<br /><em>in the answer.</em>
        </h2>
        <p className="h-sub" style={{ margin: "24px auto 0", textAlign: "center" }}>
          Spot operators get a dedicated, mobile-optimized page, indexed in every channel
          we already rank in — Google, ChatGPT, Bing, Yandex, and the seven others above.
        </p>
        <div className="cta-actions">
          <a href="#" className="btn">Book a 15-min walkthrough →</a>
          <a href="#" className="btn ghost">Download this report (PDF)</a>
        </div>
        <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--mid)", marginTop: 22, letterSpacing: "0.06em", textTransform: "uppercase" }}>
          Sales@spotfitness.app · spotfitness.app
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="shell">
        <div className="row">
          <span>© Spot Fitness 2026</span>
          <span>Sources · Google Search Console · Plausible Analytics · GSC export Apr 6 – May 5 2026</span>
          <span>Report generated · May 12 2026</span>
        </div>
      </div>
    </footer>
  );
}

// Root
function App() {
  return (
    <React.Fragment>
      <TopBar />
      <Hero />
      <Snapshot />
      <Demand />
      <Queries />
      <Audience />
      <Inventory />
      <Pullout />
      <CTA />
      <Footer />
    </React.Fragment>
  );
}

window.App = App;
ReactDOM.createRoot(document.getElementById("root")).render(<App />);