/* ============================================================
   ONE page, told as a story from top to bottom.

     home        the claim
     what        what we do — input, processing, output
     how         how and why it works — one picture, the bridge
     work        how we work with you — four commitments
     cases       one industry worked through, two named as not yet
     questions   five challenges, answered short
     team        who is behind it
     close       what it takes, and the invitation

   Every "get in touch" goes straight to the contact form — no
   waypoint page. The deep pages (/evidence, /verify, /limits) still
   exist for anyone who wants the long version.
   ============================================================ */

/* The story, top to bottom (Mo, 14.09.): what we do → how it works →
   how we work with you. Every section is one headline, one short text,
   one picture. The hero stays left-aligned; the sections below are
   centred. */

function Hero2() {
  return (
    <section id="home" className="relative overflow-hidden">
      <DevHeroDotNet/>

      <div className="relative mx-auto max-w-[1440px] px-8 lg:px-16" style={{ zIndex: 1 }}>
        <div className="pt-28 sm:pt-40 lg:pt-48 pb-28 sm:pb-36 lg:pb-44 max-w-[1080px]">
          <h1 className="display text-ink" style={{ fontSize: 'clamp(46px, 6.8vw, 86px)' }}>
            We know why customers <em className="grad-word">leave</em>.<br/>
            Together we find what makes them <em className="grad-word">stay</em>.
          </h1>

          <div aria-hidden className="mt-14 sm:mt-16"
            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">
            Causal AI for business steering · millions of customer voices, several industries
          </p>

          <div className="mt-14 flex flex-wrap items-center gap-6">
            <a href={window.GD.CONTACT}
              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">
              Get in touch <Icon.Arrow className="w-4 h-4"/>
            </a>
            <button type="button" onClick={() => scrollToId('what')}
              className="mono text-[11px] text-mute hover:text-ink transition-colors inline-flex items-center gap-1.5">
              WHAT WE DO <Icon.Arrow className="w-3 h-3"/>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Headline block for every section below — centred, short. */
function Head2({ eyebrow, children, sub, big, left }) {
  return (
    <div className={left ? '' : 'mx-auto max-w-[860px] text-center'}>
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      <h2 className={`mt-4 font-semibold tracking-[-0.022em] leading-[1.1] ${
        left ? 'max-w-[18ch] sm:max-w-[22ch]' : ''}`}
        style={{ fontSize: big ? 'clamp(32px, 4.2vw, 52px)' : 'clamp(26px, 3vw, 36px)' }}>
        {children}
      </h2>
      {sub && (
        <p className={`mt-6 text-[18px] sm:text-[19px] text-mute leading-relaxed ${
          left ? 'max-w-[62ch]' : 'mx-auto max-w-[62ch]'}`}>{sub}</p>
      )}
    </div>
  );
}

/* What we do — input, processing, output. The whole offer in one
   picture, for a reader who stops right here. */
function WhatSection() {
  return (
    <Section id="what" tone="off">
      <Head2 eyebrow="WHAT WE DO" big left
        sub="Feedback and your own data go in. What comes out is cause and effect — and how much a steering measure is really worth.">
        Causal AI for{' '}
        <span className="grad-word">business steering.</span>
      </Head2>

      <div className="mt-16">
        <Figure label="WHAT GOES IN, WHAT COMES OUT">
          <SolutionFlow/>
        </Figure>
      </div>
    </Section>
  );
}

/* How it works, and why it works — one picture (Mo, 15.09.).
   Medicine measures every step between a drug and a death rate; your
   internal data alone cannot bridge that distance; so we structure and
   quantify the voice of the customer and build the steps in between.
   Accuracy guards: a blood pressure drug is approved on blood pressure
   (FDA surrogate endpoint); never aspirin (it does not work through
   blood pressure). */
function HowSection() {
  return (
    <Section id="how" tone="off">
      <Head2 eyebrow="HOW IT WORKS" big left
        sub="Medicine has the same problem, and solved it: nobody judges a drug by counting deaths, so every step in between is measured on its own. Your internal data sharpens that picture, but on its own it explains too little. So we structure and quantify the voice of the customer — and move the question to where explainability is high.">
        The distance from a measure to a result is usually too big.{' '}
        <span className="grad-word">We bridge it.</span>
      </Head2>

      <div className="mt-7">
        <Source>FDA, Table of Surrogate Endpoints — Hypertension: blood pressure, traditional approval (fda.gov) · NHLBI, Framingham Heart Study: high blood pressure as a risk factor for heart disease (nhlbi.nih.gov) · Customer route: video evidence before approval, demonstrated on its first link in the US (Case Studies → Automotive)</Source>
      </div>

      <div className="mt-16">
        <Figure label="THE LONG WAY, CUT INTO STEPS YOU CAN MEASURE">
          <CausalBridge/>
        </Figure>
      </div>
    </Section>
  );
}

/* How we work with you — four commitments as one quiet row, not a grid
   of numbered cards. Who decides, where the data runs, who works with
   it, and how we label a finding. */
function WorkSection() {
  const { PRINCIPLES } = window.GD;
  return (
    <section id="work" className="border-t border-line bg-off">
      <div className="mx-auto max-w-[1440px] px-8 lg:px-16 py-14 sm:py-16">
        <div className="mono text-[10px] text-mute">HOW WE WORK WITH YOU</div>
        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
          {PRINCIPLES.map(([t, b], i) => (
            <div key={t} className={`py-4 sm:pr-6 ${i > 0 ? 'lg:pl-6 lg:border-l border-line' : ''}`}>
              <div className="text-[17px] font-semibold tracking-tight">{t}</div>
              <div className="mt-1 text-[13.5px] text-mute leading-relaxed">{b}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Case studies — one industry worked through, two named as not yet.
   Greying them out is the honest form: it says where we have been and
   where we have not. */
function CasesSection() {
  const { CASES } = window.GD;
  return (
    <Section id="cases">
      <Head2 eyebrow="CASE STUDIES" left
        sub="It works in any industry with many comparable locations. One is worked through end to end.">
        Where we have done it.
      </Head2>

      <div className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-4">
        {CASES.map(c => {
          const soon = c.state === 'soon';
          const body = (
            <React.Fragment>
              <div className="flex items-center justify-between gap-3">
                <h3 className="text-[20px] font-semibold tracking-tight">{c.t}</h3>
                {soon ? <Chip tone="grey">COMING SOON</Chip> : <Chip tone="cyan">WORKED THROUGH</Chip>}
              </div>
              <p className="mt-4 text-[13px] text-mute leading-relaxed flex-1">{c.b}</p>
              {!soon && (
                <span className="mt-5 inline-flex items-center gap-2 text-[13.5px] text-ink">
                  Open the deep dive <Icon.Arrow className="w-4 h-4"/>
                </span>
              )}
            </React.Fragment>
          );
          return soon ? (
            <div key={c.key} className="rounded-2xl border border-line p-6 flex flex-col"
              style={{ opacity: 0.5 }}>
              {body}
            </div>
          ) : (
            <a key={c.key} href={c.href}
              className="rounded-2xl border p-6 flex flex-col transition-shadow hover:shadow-lg"
              style={{ borderColor: 'rgba(34,211,238,0.6)', background: 'rgba(34,211,238,0.05)' }}>
              {body}
            </a>
          );
        })}
      </div>
    </Section>
  );
}

/* The questions — this is where the page does its arguing. */
function QuestionsSection() {
  return (
    <Section id="questions" tone="off">
      <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,400px)_minmax(0,1fr)] gap-10 lg:gap-16 items-start">
        <Head2 eyebrow="QUESTIONS" left
          sub="From boards, from data teams, from IT. Answered the way we would answer them in the room.">
          The questions we get asked.
        </Head2>
        <QAList/>
      </div>
    </Section>
  );
}

/* Team — taken over from the current about page, wording and all: one
   founder, and a CTO role stated as open rather than implied as filled.
   We say nothing about anyone who has not agreed to be named. */
function TeamSection() {
  const facts = [
    { k: 'COMPLIANCE', v: 'GDPR / EU data residency' },
    { k: 'FOUNDED', v: '2025' },
  ];
  return (
    <Section id="team">
      <Head2 eyebrow="TEAM" left>Who is behind it.</Head2>

      <div className="mt-10 grid grid-cols-1 md:grid-cols-5 gap-4 max-w-[980px]">
        <div className="md:col-span-3 rounded-2xl border border-line bg-paper p-7 flex flex-col">
          <img src="src/assets/founder-moritz-gentner-v4.jpg"
            alt="Moritz Gentner, Founder and Managing Director of GenData"
            className="h-28 w-28 rounded-2xl object-cover border border-line"
            style={{ objectPosition: '50% 22%' }}/>
          <div className="mt-6">
            <div className="text-[18px] font-semibold tracking-[-0.012em]">Moritz Gentner</div>
            <div className="mt-1 mono text-[10px] text-mute">FOUNDER &amp; MANAGING DIRECTOR</div>
            <p className="mt-4 text-[13.5px] text-mute leading-relaxed">
              Eight years at a global premium OEM. Management consulting, aftersales —
              working directly with top management. Now building GenData: turning customer
              feedback into causal evidence.
            </p>
          </div>
          <div className="mt-auto pt-6">
            <a href="https://www.linkedin.com/in/moritz-g-60b356ab/"
              target="_blank" rel="noopener noreferrer"
              className="inline-flex items-center gap-2 rounded-full border border-line hover:border-ink/40 px-4 py-2 text-[13px] text-ink transition-colors">
              <Icon.LinkedIn className="w-4 h-4"/> LinkedIn <Icon.ArrowUR className="w-3 h-3 text-mute"/>
            </a>
          </div>
        </div>

        <div className="md:col-span-2 rounded-2xl border border-line bg-paper p-7 flex flex-col">
          <div className="grid place-items-center h-28 w-28 rounded-2xl text-paper text-[24px] font-semibold tracking-tight"
            style={{ background: 'linear-gradient(135deg, #1E3A8A, #22D3EE)' }}>
            -
          </div>
          <div className="mt-6">
            <div className="text-[18px] font-semibold tracking-[-0.012em]">CTO</div>
            <div className="mt-1 mono text-[10px] text-mute">TO BE ANNOUNCED</div>
          </div>
        </div>
      </div>

      <div className="mt-10 pt-8 border-t border-line flex flex-wrap items-center gap-x-10 gap-y-5">
        <span className="logo-pad">
          <img src="src/assets/bafa-invest-logo.png" alt="BAFA INVEST eligible"
            style={{ height: 44, width: 'auto', display: 'block' }}/>
        </span>
        <span className="logo-pad">
          <img src="src/assets/tum-venture-labs-logo.png" alt="TUM Venture Labs"
            style={{ height: 44, width: 'auto', display: 'block' }}/>
        </span>
        <img className="badge-mfs" src="src/assets/microsoft-for-startups-badge.png"
          alt="Proud to collaborate with Microsoft for Startups" width={400} height={171}/>
        {facts.map(f => (
          <div key={f.k}>
            <div className="mono text-[10px] text-mute">{f.k}</div>
            <div className="mt-1 text-[13.5px]">{f.v}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

/* The close: what it takes, and the invitation. */
function CTA2() {
  const { CLOSING, CONTACT } = window.GD;
  return (
    <Section id="cta" tone="off">
      <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_auto] gap-10 items-end">
        <div className="max-w-[760px]">
        <h2 className="text-[30px] sm:text-[40px] font-semibold tracking-[-0.022em] leading-[1.08]">
          It takes three things.<br/>
          <span className="grad-word">We bring the technology.</span>
        </h2>
        <p className="mt-7 text-[16px] leading-relaxed">
          <span className="font-medium">Data</span> — millions of customer voices, and what your
          systems already record. <span className="font-medium">People</span> — your experts, who
          know what was decided and when. <span className="font-medium">Technology</span> — our
          software, and what we have already learned about causes in your industry.
          No two of them are enough.
        </p>
        <p className="mt-5 text-[16px] text-mute leading-relaxed">{CLOSING.belief}</p>
        </div>
        <div>
          <a href={CONTACT}
            className="rounded-full bg-ink text-paper hover:bg-ink/90 px-7 py-3.5 text-[15px] font-medium inline-flex items-center gap-2 transition-colors">
            Get in touch <Icon.Arrow className="w-4 h-4"/>
          </a>
        </div>
      </div>
    </Section>
  );
}

/* Still used by the deep evidence page. */
function ProvenCard({ c }) {
  return (
    <div className="rounded-2xl border border-line bg-paper p-6 sm:p-7 flex flex-col">
      <div className="mono text-[9.5px] text-mute">{c.kicker}</div>
      <h3 className="mt-3 text-[19px] font-semibold tracking-tight leading-snug">{c.title}</h3>
      <div className="mt-5 flex items-baseline gap-3 flex-wrap">
        <span className="text-[38px] font-semibold tracking-[-0.03em]" style={{ color: '#16A34A' }}>{c.effect}</span>
        <span className="text-[13px] text-mute">{c.effectLabel}</span>
      </div>
      <div className="mt-3 flex flex-wrap items-center gap-2">
        <Chip tone="green">DEMONSTRATED</Chip>
        <span className="mono text-[9.5px] text-mute">{c.n}</span>
      </div>
      <p className="mt-4 text-[13px] text-mute leading-relaxed">{c.base} · compared against {c.control}.</p>
      <p className="mt-3 text-[13px] leading-relaxed" style={{ color: '#B45309' }}>{c.limit}</p>
    </div>
  );
}

function NullCard({ c }) {
  return (
    <div className="rounded-2xl border border-line bg-paper p-6 sm:p-7">
      <div className="flex items-center justify-between gap-3">
        <Chip tone="grey">NO EFFECT DETECTABLE</Chip>
        <span className="mono text-[9.5px] text-mute">{c.n}</span>
      </div>
      <h3 className="mt-4 text-[17px] font-semibold tracking-tight leading-snug">{c.title}</h3>
      <p className="mt-3 text-[13px] text-mute leading-relaxed">{c.finding}</p>
    </div>
  );
}

function Landing2() {
  return (
    <Page>
      <Hero2/>
      <WhatSection/>
      <HowSection/>
      <WorkSection/>
      <CasesSection/>
      <QuestionsSection/>
      <TeamSection/>
      <CTA2/>
    </Page>
  );
}

window.Landing2 = Landing2;
window.ProvenCard = ProvenCard;
window.NullCard = NullCard;
