// Sections.jsx — all middle sections of the KPI6 site (2-7).
// Sections 2,4,6 sit on paper; sections 3,5,7 alternate ink/accent moments
// to establish a vertical rhythm.

/* ---------- 2. THE SHIFT ----------------------------------- */
function ShiftSection() {
  const points = [
    { k: 'From weeks to hours.',     v: 'Synthetic audiences and agentic pipelines collapse the timeline.', Diag: DiagWeeksToHours },
    { k: 'From data to answers.',    v: 'The work is interpretation, not dashboards.',                        Diag: DiagDataToAnswer },
    { k: 'From sampling to scale.',  v: 'Digital twins remove the limits of who you can reach.',              Diag: DiagSamplingToScale },
  ];
  return (
    <section className="kpi-section kpi-shift" data-screen-label="02 The Shift">
      <div className="kpi-container">
        <div className="kpi-section-head">
          <div className="kpi-section-head-meta">
            <span className="kpi-numbered">— 02 · The shift</span>
          </div>
          <div className="kpi-section-head-text">
            <h2 className="kpi-display-m kpi-reveal">
              Research didn't get a new tool.<br/>
              It got a <em>new frontier.</em>
            </h2>
            <p className="kpi-lead kpi-reveal" style={{ maxWidth: '52ch', marginTop: 28 }}>
              Generative AI and digital twins didn't speed up the old research
              playbook — they replaced it. Panels, fieldwork weeks, static
              reports: the methods that defined consumer research are giving way
              to synthetic audiences, agentic listening and answers in hours.
              The advantage goes to whoever reaches the frontier first.
            </p>
          </div>
        </div>

        <ul className="kpi-shift-points">
          {points.map((p, i) => {
            const Diag = p.Diag;
            return (
              <li key={p.k} className="kpi-shift-point kpi-reveal" style={{ transitionDelay: `${i * 80}ms` }}>
                <div className="kpi-shift-point-head">
                  <span className="kpi-mono kpi-shift-point-num">0{i + 1}</span>
                  <Diag />
                </div>
                <div className="kpi-h3 kpi-shift-point-title">{p.k}</div>
                <p className="kpi-p kpi-shift-point-body">{p.v}</p>
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

/* ---------- 3. WHAT WE DO ----------------------------------- */
function WhatWeDoSection() {
  const modes = [
    {
      n: '01',
      title: 'Research, done by us',
      body: 'High-specialization consumer research, run on frontier AI. Social and web listening, market research, audience and brand intelligence — delivered as the finished answer, not a tool you operate. The hard research, done by a team that\u2019s always worked at the edge.',
      anchor: '#research',
      link: 'See the research →',
    },
    {
      n: '02',
      title: 'The products, in your hands',
      body: 'We\u2019re the exclusive partner for the GMR suite of AI-native research and marketing products. We bring them to you and make your team fluent — so the frontier becomes part of how you work.',
      anchor: '#products',
      link: 'Explore the suite →',
    },
    {
      n: '03',
      title: 'Training & advisory',
      body: 'We make generative AI stick in your marketing: how it fits your team, where it creates advantage, how you\u2019ll measure it. Capability you keep, not a project that ends.',
      anchor: '#training',
      link: 'How training works →',
    },
  ];
  return (
    <section className="kpi-section kpi-section-ink on-ink" id="what-we-do" data-screen-label="03 What We Do">
      <div className="kpi-container">
        <div className="kpi-section-head">
          <div className="kpi-section-head-meta">
            <span className="kpi-numbered">— 03 · What we do</span>
          </div>
          <div className="kpi-section-head-text">
            <h2 className="kpi-display-m kpi-reveal">
              Three ways we put the<br/>frontier to work for you.
            </h2>
            <p className="kpi-lead kpi-reveal" style={{ maxWidth: '52ch', marginTop: 28 }}>
              Done for you, in your hands, or built into your team — KPI6 is the
              single partner across all of it.
            </p>
          </div>
        </div>

        <div className="kpi-modes-grid">
          {modes.map((m, i) => (
            <article key={m.n} className="kpi-card kpi-mode-card kpi-reveal" style={{ transitionDelay: `${i * 100}ms` }}>
              <div className="kpi-mode-card-top">
                <span className="kpi-mode-num">{m.n}</span>
              </div>
              <h3 className="kpi-h2 kpi-mode-card-title">{m.title}</h3>
              <p className="kpi-p kpi-mode-card-body">{m.body}</p>
              <a href={m.anchor} className="kpi-arrow-link kpi-mode-card-link">{m.link}</a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- 4. RESEARCH ------------------------------------- */
function ResearchSection() {
  const items = [
    {
      tag: 'Listening',
      title: 'Social & web listening',
      body: 'Agentic pipelines that read the conversation and return the meaning.',
      Diag: DiagListening,
    },
    {
      tag: 'Digital twins',
      title: 'Market research with digital twins',
      body: 'Synthetic audiences for surveys, focus groups and interviews — no panel, no wait.',
      Diag: DiagTwins,
    },
    {
      tag: 'Audience',
      title: 'Audience & segmentation',
      body: 'Who your market really is, in attributes that drive strategy.',
      Diag: DiagAudience,
    },
    {
      tag: 'Brand',
      title: 'Brand & competitor intelligence',
      body: 'How you show up, against whom, over time.',
      Diag: DiagBrand,
    },
  ];
  return (
    <section className="kpi-section kpi-research" id="research" data-screen-label="04 Research">
      <div className="kpi-container">
        <div className="kpi-section-head kpi-section-head-stacked">
          <span className="kpi-numbered kpi-reveal">— 04 · Research</span>
          <h2 className="kpi-display-l kpi-research-title kpi-reveal">
            The research that used to take a panel <br/>
            and six weeks.
          </h2>
          <p className="kpi-lead kpi-reveal" style={{ maxWidth: '64ch', marginTop: 24 }}>
            We run the studies that need real depth — on frontier technology
            that gets you there faster, at a scale traditional methods can't reach.
          </p>
        </div>

        <div className="kpi-research-grid">
          {items.map((it, i) => {
            const Diag = it.Diag;
            return (
              <div key={it.title} className="kpi-research-item kpi-reveal" style={{ transitionDelay: `${i * 80}ms` }}>
                <div className="kpi-research-item-head">
                  <div className="kpi-research-tag">{it.tag}</div>
                  <Diag />
                </div>
                <h3 className="kpi-h3 kpi-research-item-title">{it.title}</h3>
                <p className="kpi-p kpi-research-item-body">{it.body}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------- 5. PRODUCTS (exclusive GMR) --------------------- */
function ProductsSection() {
  const products = [
    { mono: 'BX', name: 'Brynx',     replaces: 'Replaces the research agency.',  body: 'Market intelligence in 2 hours.',         accent: '#3B82F6' },
    { mono: 'DT', name: 'DTwin',     replaces: 'Replaces the research panel.',   body: 'Synthetic audiences without panels.',     accent: '#6B6B80' },
    { mono: 'ME', name: 'Marketear', replaces: 'Replaces the listening analyst.',body: 'Social listening that answers, not charts.', accent: '#8B5CF6' },
    { mono: 'CR', name: 'CrewRev',   replaces: 'Replaces the GTM team.',         body: 'A full revenue team in one conversation.',accent: '#34D399' },
    { mono: 'IR', name: 'InfluRep',  replaces: 'Replaces manual vetting.',       body: 'Creator intelligence before you sign.',   accent: '#F59E0B' },
    { mono: 'GK', name: 'Geoky',     replaces: 'Replaces flying blind in AI search.', body: 'What AI says about your brand.',     accent: '#EC4899' },
    { mono: 'KX', name: 'Klenux',    replaces: 'Replaces week-long UX studies.', body: 'UX testing in an afternoon.',             accent: '#14B8A6' },
  ];
  return (
    <section className="kpi-section kpi-section-ink on-ink" id="products" data-screen-label="05 Products">
      <div className="kpi-container">
        <div className="kpi-section-head">
          <div className="kpi-section-head-meta">
            <span className="kpi-numbered">— 05 · Products</span>
          </div>
          <div className="kpi-section-head-text">
            <h2 className="kpi-display-m kpi-reveal">
              The AI-native suite redefining<br/>
              marketing research. <em>Exclusive through KPI6.</em>
            </h2>
            <p className="kpi-lead kpi-reveal" style={{ maxWidth: '54ch', marginTop: 28 }}>
              A portfolio of products built to deliver the finished result — not
              another dashboard. We bring them to you and train your team to be
              fluent in them.
            </p>
          </div>
        </div>

        <div className="kpi-products-grid">
          {products.map((p, i) => (
            <article key={p.mono} className="kpi-product-card kpi-reveal" style={{ transitionDelay: `${i * 70}ms` }}>
              <div className="kpi-product-mono" style={{ '--mono-accent': p.accent }}>
                <span>{p.mono}</span>
              </div>
              <div className="kpi-product-body">
                <div className="kpi-h3 kpi-product-name">{p.name}</div>
                <div className="kpi-product-headline">{p.body}</div>
                <div className="kpi-product-replaces">{p.replaces}</div>
              </div>
            </article>
          ))}

          {/* 8th tile — the "next frontier" placeholder. Mirrors the */}
          {/* convention on genmr.co where a future-concept slot keeps the */}
          {/* 4×2 grid rhythm and signals the suite is still expanding. */}
          <a
            href="https://genmr.co"
            target="_blank"
            rel="noopener"
            className="kpi-product-card kpi-product-card-next kpi-reveal"
            style={{ transitionDelay: `${products.length * 70}ms` }}
          >
            <div className="kpi-product-mono kpi-product-mono-next" aria-hidden="true">
              <span>+</span>
            </div>
            <div className="kpi-product-body">
              <div className="kpi-h3 kpi-product-name">Next frontier</div>
              <div className="kpi-product-headline">The suite keeps moving.</div>
              <div className="kpi-product-replaces">In the works at genmr.co →</div>
            </div>
          </a>
        </div>

        <div className="kpi-products-footer kpi-reveal">
          <a href="https://genmr.co" target="_blank" rel="noopener" className="kpi-arrow-link">
            Explore the full suite at genmr.co
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- 6. TRAINING ------------------------------------- */
function TrainingSection() {
  const points = [
    { k: 'Role-based, not generic.', v: 'Each function trained for its use.' },
    { k: 'On your cases, not toy examples.', v: 'We train on your briefs.' },
    { k: 'Measured in the work.', v: 'Fluency you can see, not a certificate.' },
  ];
  return (
    <section className="kpi-section kpi-training" id="training" data-screen-label="06 Training">
      <div className="kpi-container">
        <div className="kpi-training-grid">
          <div className="kpi-training-left">
            <span className="kpi-numbered kpi-reveal">— 06 · Training</span>
            <h2 className="kpi-display-m kpi-training-title kpi-reveal">
              Access isn't adoption.<br/>
              <em>We make your team fluent.</em>
            </h2>
            <p className="kpi-lead kpi-reveal" style={{ maxWidth: '46ch', marginTop: 28 }}>
              Frontier products only deliver if your people can drive them.
              Our training turns the suite from installed to in-production —
              hands-on, role-based, built around your real work.
            </p>
          </div>
          <ul className="kpi-training-list">
            {points.map((p, i) => (
              <li key={p.k} className="kpi-training-item kpi-reveal" style={{ transitionDelay: `${i * 80}ms` }}>
                <div className="kpi-training-item-head">
                  <span className="kpi-mono">0{i + 1}</span>
                  <span className="kpi-h3">{p.k}</span>
                </div>
                <p className="kpi-p" style={{ color: 'var(--kpi-fg-3)' }}>{p.v}</p>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

/* ---------- 7. WHY KPI6 ------------------------------------- */
function WhySection() {
  const points = [
    { k: 'Research-native.',  v: 'We come from research and marketing, not generic IT consulting.' },
    { k: 'Product + practice.', v: 'We bring the products and the know-how to run them.' },
    { k: 'Frontier by default.', v: 'When the technology moves, so do we.' },
  ];
  return (
    <section className="kpi-section kpi-why" data-screen-label="07 Why KPI6">
      <div className="kpi-container">
        <div className="kpi-section-head-stacked">
          <span className="kpi-numbered kpi-reveal">— 07 · Why KPI6</span>
          <h2 className="kpi-display-l kpi-why-title kpi-reveal">
            We didn't pivot to the frontier.<br/>
            <em>We've always been there.</em>
          </h2>
          <p className="kpi-lead kpi-reveal" style={{ maxWidth: '68ch', marginTop: 28 }}>
            KPI6 built its reputation turning data into marketing decisions, with
            the most advanced technology available at every step. Generative AI
            is the latest frontier — and we've moved onto it fully, as the
            exclusive partner for the products defining the category.
          </p>
        </div>

        <div className="kpi-why-grid">
          {points.map((p, i) => (
            <div key={p.k} className="kpi-why-item kpi-reveal" style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="kpi-why-rule"></div>
              <div className="kpi-h3 kpi-why-item-title">{p.k}</div>
              <p className="kpi-p kpi-why-item-body">{p.v}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  ShiftSection,
  WhatWeDoSection,
  ResearchSection,
  ProductsSection,
  TrainingSection,
  WhySection,
});