/* v2/nav-hero-v2.jsx — Nav + Hero for Apple×Stripe variant */

const NavV2 = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, {passive:true});
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={"nav " + (scrolled ? "scrolled" : "")}>
      <div className="nav-inner">
        <a href="#top" className="nav-brand">
          <span className="ae-wordmark nav-logo-svg" role="img" aria-label="AnswerExposure"/>
        </a>
        <div className="nav-links nav-links-center">
          <a href="#how">How it works</a>
          <a href="#platforms">Platforms</a>
          <a href="#showcase">Product</a>
          <a href="#compare">Compare</a>
          <a href="#pricing">Pricing</a>
        </div>
        <div className="nav-cta">
          <a href="https://account.answerexposure.com/dashboard/" className="sign-in">Sign in</a>
          <a
            href="#check-visibility"
            className="btn btn-accent btn-sm"
            onClick={() => window.dispatchEvent(new CustomEvent('highlight-check-visibility'))}
          >
            Check visibility
          </a>
        </div>
      </div>
    </nav>
  );
};

const HeroV2Legacy = () => {
  return (
    <section className="hero" id="top">
      <div className="wrap">
        <div className="hero-pill">
          <span className="badge">NEW</span>
          <span>Live citation tracking across 6 AI engines</span>
          <ArrowRight size={13}/>
        </div>

        <h1 className="display-xl">
          Your brand,<br/>
          <span className="grad-text">cited by AI.</span>
        </h1>

        <p className="hero-lede">
          AnswerExposure publishes brand mentions across Reddit, Substack, X and
          authoritative press — the exact sources ChatGPT, Claude, Perplexity
          and Google AI read to build their answers.
        </p>

        <div className="hero-ctas">
          <a href="#pricing" className="btn btn-accent btn-lg btn-glow">
            Start free audit
            <ArrowRight size={14} className="arrow"/>
          </a>
          <a href="#how" className="btn btn-ghost btn-lg">
            See how it works
          </a>
        </div>

        <div className="hero-check">
          <span className="c"><span className="dot"/> Free audit, no signup</span>
          <span className="c"><span className="dot"/> First citations in 30 days</span>
          <span className="c"><span className="dot"/> Cancel anytime</span>
        </div>

        <ProductMockup/>
      </div>
    </section>
  );
};

/* Hero product mockup — miniature dashboard */
const ProductMockup = () => {
  return (
    <div className="hero-product">
      <div className="showcase-header">
        <div className="showcase-dots"><span/><span/><span/></div>
        <div className="showcase-title">app.answerexposure.com / dashboard</div>
      </div>
      <div className="showcase-body">
        <aside className="showcase-side">
          <div className="side-label">Workspace</div>
          <div className="side-item"><span className="sb-dot"/> Overview</div>
          <div className="side-item active"><span className="sb-dot"/> Visibility</div>
          <div className="side-item"><span className="sb-dot"/> Citations</div>
          <div className="side-item"><span className="sb-dot"/> Keywords</div>
          <div className="side-item"><span className="sb-dot"/> Competitors</div>

          <div className="side-label">Platforms</div>
          <div className="side-item"><ChatGPT size={14} pad={0} bg="transparent" rounded={3}/> ChatGPT</div>
          <div className="side-item"><Claude size={14} pad={0} bg="transparent" rounded={3}/> Claude</div>
          <div className="side-item"><Perplexity size={14} pad={0} bg="transparent" rounded={3}/> Perplexity</div>
          <div className="side-item"><Gemini size={14} pad={0} bg="transparent" rounded={3}/> Gemini</div>
        </aside>

        <div className="showcase-main">
          <div className="showcase-kpis">
            <div className="sk">
              <div className="kpi-label">Citations</div>
              <div className="kpi-big">1,284</div>
              <div className="kpi-delta">↑ 312 this mo</div>
            </div>
            <div className="sk featured">
              <div className="kpi-label">Share of voice</div>
              <div className="kpi-big">38%</div>
              <div className="kpi-delta">↑ 22 pts · 90d</div>
            </div>
            <div className="sk">
              <div className="kpi-label">Queries covered</div>
              <div className="kpi-big">412</div>
              <div className="kpi-delta">↑ 87</div>
            </div>
            <div className="sk">
              <div className="kpi-label">Engines</div>
              <div className="kpi-big">6/6</div>
              <div className="kpi-delta">All tracked</div>
            </div>
          </div>

          <div className="chart-frame">
            <div className="chart-head">
              <div className="chart-title">Share of voice · last 90 days</div>
              <div className="chart-legend">
                <span><span className="sw" style={{background:'var(--violet)'}}/> You</span>
                <span><span className="sw" style={{background:'var(--hair-2)'}}/> Avg. competitor</span>
              </div>
            </div>
            <svg viewBox="0 0 600 160" preserveAspectRatio="none" style={{width:'100%', height:130, display:'block'}}>
              <defs>
                <linearGradient id="gradArea" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#635BFF" stopOpacity="0.25"/>
                  <stop offset="100%" stopColor="#635BFF" stopOpacity="0"/>
                </linearGradient>
              </defs>
              {/* grid */}
              {[0,1,2,3].map(i => (
                <line key={i} x1="0" x2="600" y1={i*40+10} y2={i*40+10} stroke="#E6EBF1" strokeDasharray="2 4"/>
              ))}
              {/* competitor flat */}
              <path d="M0,110 C60,112 120,108 180,110 C240,112 300,106 360,108 C420,108 480,110 540,106 L600,108"
                    stroke="#CDD5DF" strokeWidth="2" fill="none"/>
              {/* you — rising */}
              <path d="M0,130 C60,126 120,118 180,108 C240,96 300,80 360,62 C420,48 480,34 540,22 L600,14"
                    stroke="#635BFF" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
              <path d="M0,130 C60,126 120,118 180,108 C240,96 300,80 360,62 C420,48 480,34 540,22 L600,14 L600,160 L0,160 Z"
                    fill="url(#gradArea)"/>
              {/* dot at end */}
              <circle cx="600" cy="14" r="5" fill="#635BFF"/>
              <circle cx="600" cy="14" r="10" fill="#635BFF" opacity="0.2"/>
            </svg>
          </div>

          <div className="mentions-table">
            <div className="mt-row head">
              <div>Source</div>
              <div>Published</div>
              <div>Status</div>
              <div>Cites</div>
            </div>
            <div className="mt-row">
              <div className="mt-source">
                <div className="mt-ico"><Reddit size={14} bg="transparent" pad={0} rounded={3}/></div>
                <div>
                  <div className="mt-name">r/SaaS · u/marketing_pro</div>
                  <div className="mt-title">"What's the best AEO service for B2B in 2026?"</div>
                </div>
              </div>
              <div className="mono" style={{color:'var(--muted)', fontSize:12}}>Apr 12</div>
              <div><span className="mt-pill live">● Live</span></div>
              <div className="mono" style={{color:'var(--violet)', fontWeight:600, fontSize:12}}>12</div>
            </div>
            <div className="mt-row">
              <div className="mt-source">
                <div className="mt-ico"><DigitalJournal size={14} bg="transparent" pad={0} rounded={3}/></div>
                <div>
                  <div className="mt-name">Digital Journal · Press</div>
                  <div className="mt-title">"AnswerExposure leads the AEO category as AI Overviews reshape search"</div>
                </div>
              </div>
              <div className="mono" style={{color:'var(--muted)', fontSize:12}}>Apr 10</div>
              <div><span className="mt-pill cited">● Cited 8×</span></div>
              <div className="mono" style={{color:'var(--violet)', fontWeight:600, fontSize:12}}>8</div>
            </div>
            <div className="mt-row">
              <div className="mt-source">
                <div className="mt-ico"><Substack size={14} bg="transparent" pad={0} rounded={3}/></div>
                <div>
                  <div className="mt-name">The Growth Letter · Substack</div>
                  <div className="mt-title">"Inside the shift from SEO to AEO for mid-market SaaS"</div>
                </div>
              </div>
              <div className="mono" style={{color:'var(--muted)', fontSize:12}}>Apr 08</div>
              <div><span className="mt-pill live">● Live</span></div>
              <div className="mono" style={{color:'var(--violet)', fontWeight:600, fontSize:12}}>5</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { NavV2, HeroV2Legacy, ProductMockup });