/* Light landing — CVI positioning, no Sovereign / Mercedes */
function LandingPage() {
  return (
    <div className="min-h-screen flex flex-col bg-paper">
      <PublicNav/>
      <main className="flex-1">
        <Hero/>
        <Streams/>
        <HowItWorks/>
        <Quote/>
        <CTA/>
      </main>
      <Footer/>
    </div>
  );
}

function HeroDotNet() {
  // Decorative dot-grid watermark on the right side of the hero. Pure design
  // element — no semantic meaning, no labels, no animation. A horizontal mask
  // dissolves the dots into nothing toward the right edge ("nach rechts raus").
  // A whisper of cyan radial glow underneath ties it to the brand without
  // adding weight. Theme-aware via --c-ink token so it adapts in dark mode.
  return (
    <div aria-hidden
      className="absolute pointer-events-none hidden md:block"
      style={{
        top: 0, right: 0, bottom: 0,
        width: '58%',
        zIndex: 0,
      }}>
      {/* Whisper of cyan glow — anchored upper-right, ~5% opacity */}
      <div className="absolute inset-0" style={{
        background: 'radial-gradient(ellipse 55% 65% at 65% 45%, rgba(34, 211, 238, 0.05), transparent 70%)',
      }}/>
      {/* Dot grid with horizontal fade — emerges past the text, dissolves rightward */}
      <div className="absolute inset-0" style={{
        backgroundImage: 'radial-gradient(rgb(var(--c-ink) / 0.16) 1.2px, transparent 1.2px)',
        backgroundSize: '22px 22px',
        WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 32%, black 58%, transparent 100%)',
        maskImage: 'linear-gradient(to right, transparent 0%, black 32%, black 58%, transparent 100%)',
      }}/>
    </div>
  );
}

function Hero() {
  return (
    <section className="relative overflow-hidden" data-variant="D">
      <HeroDotNet/>
      <div className="relative mx-auto max-w-[1280px] px-8 lg:px-16" style={{ zIndex: 1 }}>
        <div className="pt-28 sm:pt-40 lg:pt-48 pb-32 sm:pb-44 lg:pb-56 max-w-[1080px]">
          <h1
            className="text-ink"
            style={{
              fontFamily: '"Instrument Serif", "GT Sectra", "Tiempos Headline", Georgia, serif',
              fontSize: 'clamp(56px, 8.4vw, 104px)',
              fontWeight: 400,
              lineHeight: 0.98,
              letterSpacing: '-0.024em',
              textWrap: 'balance',
            }}>
            Quantify what{' '}
            <em className="grad-word" style={{ fontStyle: 'italic', fontWeight: 400 }}>drives</em>
            {' '}customer behavior — and the levers to{' '}
            <em className="grad-word" style={{ fontStyle: 'italic', fontWeight: 400 }}>change</em>
            {' '}it.
          </h1>

          <div
            aria-hidden
            className="mt-16 sm:mt-20"
            style={{
              width: '34%',
              maxWidth: 360,
              height: 1,
              background: 'rgb(var(--c-ink) / 0.18)',
            }}
          />

          <p className="mt-8 mono text-[11.5px] text-mute tracking-wide uppercase">
            Causal Verbatim Intelligence — at population scale.
          </p>

          <div className="mt-14 flex flex-wrap items-center gap-6">
            <a
              href="#/lab"
              className="inline-flex items-center gap-2 rounded-full bg-ink text-paper hover:bg-ink/90 px-6 py-3 text-[14px] font-medium transition-colors">
              See it in Action <Icon.Arrow className="w-4 h-4"/>
            </a>
            <a
              href="#/demo"
              className="mono text-[11px] text-mute hover:text-ink transition-colors inline-flex items-center gap-1.5">
              REQUEST DEMO ACCESS <Icon.ArrowUR className="w-3 h-3"/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Streams() {
  return (
    <section className="border-t border-line bg-off">
      <div className="mx-auto max-w-[1200px] px-8 lg:px-16 py-24 grid grid-cols-1 md:grid-cols-2 gap-6">
        <a href="#/lab" className="group relative rounded-2xl bg-paper border border-line p-8 transition-colors hover:border-ink/30 ticks">
          <span className="t tl"></span><span className="t tr"></span><span className="t bl"></span><span className="t br"></span>
          <div className="flex items-center gap-3">
            <span className="mono text-[10px] text-mute">LAB</span>
            <span className="mono text-[10px] text-cyan inline-flex items-center gap-1.5"><span className="h-1.5 w-1.5 rounded-full bg-cyan pulse"></span>LIVE</span>
          </div>
          <h3 className="mt-6 text-[28px] font-semibold tracking-[-0.02em]">Industry-Ready Causal Analysis</h3>
          <p className="mt-3 text-[14.5px] text-mute leading-relaxed max-w-md">
            Production-grade causal AI based on millions of public customer reviews. <span className="text-ink">Premium Automotive Aftersales</span> live today — Hospitality, E-Commerce, Banking, Healthcare and HR follow.
          </p>
          <div className="mt-8 inline-flex items-center gap-2 text-[13px] text-ink">
            See it in Action <Icon.Arrow className="w-4 h-4 transition-transform group-hover:translate-x-0.5"/>
          </div>
        </a>
        <div className="relative rounded-2xl bg-paper border border-line p-8" style={{ opacity: 0.55 }}>
          <div className="flex items-center gap-3">
            <span className="mono text-[10px] text-mute">PRODUCT</span>
            <span className="mono text-[10px] text-mute inline-flex items-center gap-1.5 border border-line rounded-full px-2 py-0.5">COMING SOON</span>
          </div>
          <h3 className="mt-6 text-[28px] font-semibold tracking-[-0.02em] text-ink">Sovereign Causal Engine</h3>
          <p className="mt-3 text-[14.5px] text-mute leading-relaxed max-w-md">
            The causal engine, productized for sovereign deployment. Plug-and-play behind your firewall — your keys, your audit log, any feedback corpus, any vertical.
          </p>
          <div className="mt-8 inline-flex items-center gap-2 text-[13px] text-mute">
            <Icon.Lock className="w-4 h-4"/> Enterprise interest? Get in touch.
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n:'01', t:'Ingest text', b:'Reviews, transcripts, complaints, narratives. CSV, JSONL, or stream.' },
    { n:'02', t:'Construct DAG', b:'NLP extracts variables. A causal DAG is built and validated against domain priors.' },
    { n:'03', t:'Quantify cause', b:'β coefficients with bootstrapped 95% confidence intervals — not correlations, interventions.' },
  ];
  return (
    <section className="border-t border-line">
      <div className="mx-auto max-w-[1200px] px-8 lg:px-16 py-24">
        <div className="max-w-2xl">
          <div className="mono text-[10px] text-mute">METHOD</div>
          <h2 className="mt-3 text-[34px] sm:text-[42px] font-semibold tracking-[-0.022em] leading-[1.05]">From raw text to provable cause.</h2>
        </div>
        <div className="mt-14 grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-2">
          {steps.map((s,i) => (
            <div key={s.n} className="md:px-6 first:md:pl-0">
              <div className="mono text-[10px] text-cyan">{s.n}</div>
              <h3 className="mt-3 text-[19px] font-semibold tracking-tight">{s.t}</h3>
              <p className="mt-3 text-[13.5px] text-mute leading-relaxed">{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Quote() {
  return (
    <section className="border-t border-line bg-off">
      <div className="mx-auto max-w-[1000px] px-8 lg:px-16 py-24 text-center">
        <p className="text-[26px] sm:text-[34px] font-medium leading-[1.25] tracking-[-0.012em]">
          From customer feedback to <span className="grad-word">causal levers</span> — quantified, with confidence intervals, at population scale.
        </p>
        <div className="mt-8 mono text-[10px] text-mute">RESEARCH NOTE · GENDATA LABS · 2026</div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="border-t border-line">
      <div className="mx-auto max-w-[1100px] px-8 lg:px-16 py-24 text-center">
        <h2 className="text-[36px] sm:text-[48px] font-semibold tracking-[-0.022em] leading-[1.05]">
          Move the levers that<br/>
          <span className="grad-word">actually move outcomes.</span>
        </h2>
        <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3">
          <a href="#/demo" className="rounded-full bg-ink text-paper hover:bg-ink/90 px-6 py-3 text-[14px] font-medium inline-flex items-center gap-2 transition-colors">
            Request Demo Access <Icon.Arrow className="w-4 h-4"/>
          </a>
          <a href="#/lab" className="rounded-full border border-line hover:border-ink/40 px-6 py-3 text-[14px] text-ink transition-colors">See it in Action</a>
        </div>
      </div>
    </section>
  );
}

window.LandingPage = LandingPage;
window.LandingStreams = Streams;
window.LandingHowItWorks = HowItWorks;
window.LandingQuote = Quote;
window.LandingCTA = CTA;