// dtwin-sections.jsx — DTwin landing.
// Aligned to GMR v2 + sibling product sites. DTwin = the RESEARCH LENS of GMR
// and the HOME of the twin population. Verb = the twins ANSWER. Ask a synthetic,
// representative population anything and get research-grade answers by segment,
// in minutes. Honest by design: simulation calibrated against real data, with
// confidence shown — never a guess passed off as fact.

const ECO_ORDER = ['brynx', 'dtwin', 'marketear', 'crewrev', 'influrep', 'geoky', 'klenux'];

// ---- Logo: DTWIN wordmark ----
function DtLogo({ size = 'm' }) {
  const heights = { s: 18, m: 22, l: 28, xl: 40 };
  return (
    <a href="#top" className="bx-mark" aria-label="DTwin — home">
      <img src={LOGO_FILES.dtwin} alt="DTwin" style={{ height: heights[size], width: 'auto', display: 'block' }}/>
    </a>
  );
}

// ============================================================
// 0 · HEADER
// ============================================================
function DtHeader() {
  return (
    <header className="linear-header">
      <div className="container">
        <DtLogo />
        <nav>
          <a href="#how">How it works</a>
          <a href="#unlocks">What it unlocks</a>
          <a href="#pricing">Pricing</a>
          <a href="https://suite.dtwin.now" className="btn-x brand">Try it free <span className="arrow">→</span></a>
        </nav>
      </div>
    </header>
  );
}

// ============================================================
// 1 · HERO
// ============================================================
function DtHero() {
  return (
    <section id="top" style={{ position: 'relative', paddingTop: 80, paddingBottom: 96, overflow: 'hidden' }}>
      <div className="ambient"/>
      <div className="container layer" style={{ paddingTop: 56 }}>
        <div className="hero-grid">
          <div className="col gap-6">
            <span className="pill-x brand reveal" style={{ alignSelf: 'flex-start' }}>
              <span className="dot"/> The research lens of GMR
            </span>

            <h1 className="t-display reveal">
              Ask your market anything.<br/>
              <span className="muted">Get the answer in minutes, not months.</span>
            </h1>

            <p className="t-lead reveal" style={{ maxWidth: 580 }}>
              A population of digital twins — representative of your audience — you can survey, interview and test on. Research-grade answers, instantly.
            </p>

            <div className="col gap-3 reveal" style={{ marginTop: 8 }}>
              <div className="row gap-3" style={{ flexWrap: 'wrap' }}>
                <a href="https://suite.dtwin.now" className="btn-x brand">Try it free <span className="arrow">→</span></a>
                <a href="#contact" className="btn-x">Talk to us</a>
              </div>
              <span className="cta-microcopy">
                No credit card<span className="sep">·</span>No panel<span className="sep">·</span>Answers by segment
              </span>
            </div>
          </div>

          <div className="reveal">
            <StudyPreview />
          </div>
        </div>
      </div>
    </section>
  );
}

// Hero visual — a DTwin study preview: twin voices + demographic bars.
function StudyPreview() {
  return (
    <div className="report-preview" aria-hidden="true">
      <div className="report-chrome">
        <span className="filename">
          <span className="ext">STUDY</span>
          ev-charging-fr-de-uk.json
        </span>
        <span className="status">Answered · by segment</span>
      </div>

      <h4 className="report-title">EV charging · attitudes · FR / DE / UK</h4>
      <div className="report-sub">320 twins · 3 markets · survey + interview</div>

      <div className="report-section-h">Twin voices</div>
      <div className="report-find">
        <span className="idx">DE</span>
        <span>"Range anxiety stopped mattering once I had a charger at work. The street-grid is still a problem on weekends." <span className="cite">[twin_0142 · F · 38 · conf 0.86]</span></span>
      </div>
      <div className="report-find">
        <span className="idx">FR</span>
        <span>"I switched back to a hybrid. The infrastructure outside Paris is too unreliable for my commute." <span className="cite">[twin_0207 · M · 44 · conf 0.81]</span></span>
      </div>
      <div className="report-find">
        <span className="idx">UK</span>
        <span>"Cost-per-mile only beats petrol if I charge at home. Public charging is a tax." <span className="cite">[twin_0089 · F · 29 · conf 0.79]</span></span>
      </div>

      <div className="report-section-h">Top 4 barriers · share</div>
      <div className="report-bars"><span className="lbl">Public charging</span><span className="track"><span className="fill" style={{ width: '86%' }}/></span><span className="val">64%</span></div>
      <div className="report-bars"><span className="lbl">Upfront cost</span><span className="track"><span className="fill" style={{ width: '68%' }}/></span><span className="val">51%</span></div>
      <div className="report-bars"><span className="lbl">Range anxiety</span><span className="track"><span className="fill" style={{ width: '46%' }}/></span><span className="val">34%</span></div>
      <div className="report-bars"><span className="lbl">Resale value</span><span className="track"><span className="fill" style={{ width: '32%' }}/></span><span className="val">22%</span></div>

      <div className="report-foot">
        <span className="pages">survey + interview · by segment</span>
        <span>dtwin · zero PII</span>
      </div>
    </div>
  );
}

// ============================================================
// 2 · THE SHIFT — one-liner strip
// ============================================================
function DtContrarian() {
  return (
    <section className="brynx-strip reveal">
      <div className="container">
        <p className="text">
          By the time real research lands,<br/>
          <span className="em">the question has already moved.</span>
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 3 · THE SHIFT — research is too slow
// ============================================================
function DtProblem() {
  const items = [
    { n: '01', tag: 'Weeks, not minutes', body: 'Real fieldwork takes weeks, costs thousands, and ages the moment it lands.' },
    { n: '02', tag: 'The question moved',  body: 'By the time the answer arrives, the decision you needed it for is already made.' },
    { n: '03', tag: 'Gut feel',            body: "So you decide on instinct — because real research couldn't keep up." },
  ];
  return (
    <section className="linear-section" id="shift">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="01">The shift</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Research is too slow<br/>
          <span className="muted">for the questions you have.</span>
        </h2>
        <p className="t-lead reveal" style={{ maxWidth: 820 }}>
          Real fieldwork takes weeks, costs thousands, and ages the moment it's done. By the time the answer arrives, the question has moved — so you end up deciding on gut feel.
        </p>

        <div className="problem-list reveal-stagger" style={{ marginTop: 16 }}>
          {items.map(it => (
            <div key={it.n} className="problem-row">
              <div className="num">{it.n} ·</div>
              <div>
                <div className="body">{it.body}</div>
                <div className="strike-meta">{it.tag}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 4 · THE MECHANISM — a population that answers (DTwin is its home)
// ============================================================
function DtDelivers() {
  return (
    <section className="linear-section" id="mechanism">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="02">The mechanism</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          A population<br/>
          <span className="muted">that answers.</span>
        </h2>
        <p className="t-lead reveal" style={{ maxWidth: 820 }}>
          DTwin gives you a population of digital twins, each with a real DNA, statistically representative of your audience. Ask them anything — a survey, a concept, a message, a positioning — and they answer the way your market would, by segment, in minutes.
        </p>

        <p className="match-note reveal">
          <strong>Honest by design:</strong> it's simulation, calibrated against real data, with confidence shown. A fast, validated read — never a guess passed off as fact.
        </p>

        <div className="pop-card reveal">
          <div className="pop-badge">
            <span className="pop-dot"/>
            <span className="pop-name">Twin population<small>The home of the population</small></span>
          </div>
          <p className="pop-body">
            This is the population the whole GMR suite runs on. Each twin carries a <strong>DNA</strong> — demographics, psychographics, behavior. <strong>Sharper with every use</strong>, across every lens.
          </p>
        </div>

        <div className="engines-grid reveal-stagger" style={{ marginTop: 16 }}>

          <div className="engine">
            <div className="head">
              <span className="num">01</span>
              <span className="codename">Population</span>
            </div>
            <h3 className="title">Representative, not invented.</h3>
            <p className="desc">A synthetic population statistically matched to your audience — not a handful of made-up personas.</p>
            <div className="viz">
              <div className="viz-engine-research">
                {Array.from({ length: 24 }).map((_, i) => {
                  const v = (i * 11 + 3) % 9;
                  const cls = v > 7 ? 'b3' : v > 5 ? 'b2' : v > 2 ? 'b1' : '';
                  return <div key={i} className={`cell ${cls}`}/>;
                })}
              </div>
            </div>
          </div>

          <div className="engine">
            <div className="head">
              <span className="num">02</span>
              <span className="codename">Ask anything</span>
            </div>
            <h3 className="title">Every research method.</h3>
            <p className="desc">Survey, interview, concept test, what-if — one population, any method, by segment.</p>
            <div className="viz">
              <div className="viz-engine-strategy">
                <div className="step"><span className="n">Q</span><span>Instant survey — read by segment</span><span className="pri high">SURVEY</span></div>
                <div className="step"><span className="n">Q</span><span>Concept &amp; message testing</span><span className="pri high">TEST</span></div>
                <div className="step"><span className="n">Q</span><span>What-if &amp; counterfactual scenarios</span><span className="pri">WHAT-IF</span></div>
                <div className="step"><span className="n">Q</span><span>1-on-1 persona interviews</span><span className="pri">INTERVIEW</span></div>
              </div>
            </div>
          </div>

          <div className="engine">
            <div className="head">
              <span className="num">03</span>
              <span className="codename">By segment</span>
            </div>
            <h3 className="title">Answers, broken out.</h3>
            <p className="desc">Every cut — demographic, psychographic, behavioral — answered in minutes, with confidence shown.</p>
            <div className="viz">
              <div className="viz-engine-pulse">
                {[0.4, 0.6, 0.5, 0.8, 0.55, 0.7, 0.45, 0.9, 0.5, 0.65, 0.8, 0.55, 0.7, 0.5, 0.85, 0.6, 0.4, 0.75, 0.55, 0.9].map((h, i) => (
                  <div key={i} className="bar" style={{ animationDelay: `${i * 0.08}s`, transform: `scaleY(${h})` }}/>
                ))}
              </div>
            </div>
          </div>

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

// ============================================================
// 5 · WHAT IT UNLOCKS
// ============================================================
function DtCapabilities() {
  const items = [
    { n: '01', name: 'Instant surveys',          body: 'Put a question to the population and read the answer by segment.' },
    { n: '02', name: 'Concept & message testing', body: 'Try it before you spend, not after.' },
    { n: '03', name: 'What-if',                   body: 'Explore scenarios and counterfactuals you could never field for real.' },
    { n: '04', name: 'Deep segments',             body: 'Demographic, psychographic, behavioral — interrogate any cut.' },
    { n: '05', name: 'Validate before you commit', body: 'Pressure-test a decision in minutes.' },
  ];
  return (
    <section className="linear-section" id="unlocks">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="03">What it unlocks</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Five ways to ask.<br/>
          <span className="muted">One population to answer.</span>
        </h2>

        <div className="whatyouget-list reveal-stagger" style={{ marginTop: 16 }}>
          {items.map(it => (
            <div key={it.n} className="wyg-row">
              <span className="num">{it.n}</span>
              <h3 className="wyg-name">{it.name}</h3>
              <p className="wyg-body">{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 6 · HOW IT WORKS
// ============================================================
function DtHow() {
  return (
    <section className="linear-section" id="how">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="04">How it works</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Ask in.<br/>
          <span className="muted">Answer out.</span>
        </h2>

        <div className="how-grid reveal-stagger" style={{ marginTop: 16 }}>
          <div className="how-step">
            <span className="step-num">01 · Ask</span>
            <h3 className="step-name">Describe the audience.</h3>
            <p className="step-desc">Describe who you want to understand and the question — in plain language.</p>
          </div>
          <div className="how-step" style={{ paddingLeft: 32 }}>
            <span className="step-num">02 · The twins answer</span>
            <h3 className="step-name">The population responds.</h3>
            <p className="step-desc">A representative population answers the way your market would — every method, every segment.</p>
          </div>
          <div className="how-step" style={{ paddingLeft: 32 }}>
            <span className="step-num">03 · Decide</span>
            <h3 className="step-name">A read, with confidence.</h3>
            <p className="step-desc">A validated read by segment, in minutes — interrogate any twin, with confidence shown.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 7 · STATS
// ============================================================
function DtStats() {
  return (
    <section className="linear-section" style={{ paddingTop: 24 }}>
      <div className="container reveal">
        <div className="bx-stats">
          <div className="bx-stat">
            <span className="v"><span className="accent">0</span></span>
            <span className="k">PII collected</span>
          </div>
          <div className="bx-stat">
            <span className="v">100+</span>
            <span className="k">Attributes per twin</span>
          </div>
          <div className="bx-stat">
            <span className="v">60+</span>
            <span className="k">Countries</span>
          </div>
          <div className="bx-stat">
            <span className="v">Minutes</span>
            <span className="k">Not months</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 8 · THE SCIENCE
// ============================================================
function DtProof() {
  return (
    <section className="proof-band reveal" id="science">
      <div className="container col gap-3">
        <span className="mono-label" data-num="05">The science</span>
        <p className="proof-quote">
          Built on generative agent simulations — <span className="accent">twins calibrated against real responses</span>, not invented personas.
        </p>
        <a href="#sample" className="proof-foot">Park et al. 2024 · the methodology that makes a synthetic population behave like the real one <span className="arrow">→</span></a>
      </div>
    </section>
  );
}

// ============================================================
// 9 · PART OF THE SUITE
// ============================================================
function DtReplaces() {
  return (
    <section className="replaces-strip reveal" id="suite">
      <div className="container">
        <h2 className="replaces-big">
          One population. <span className="accent">·</span><br/>
          <span className="em">The whole suite runs on it.</span>
        </h2>
        <p className="replaces-foot">
          This is the population the whole suite runs on. The twins that answer here are the same ones matched to posts in Marketear, querying the engines in Geoky, and navigating sites in Klenux — one population, sharper with every use.
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 10 · PRICING
// ============================================================
function DtPricing() {
  return (
    <section className="linear-section" id="pricing">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="06">Pricing</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Start free.<br/>
          <span className="muted">Scale when it pays off.</span>
        </h2>

        <div className="pricing-grid reveal-stagger" style={{ marginTop: 16 }}>

          <div className="price-card">
            <span className="tier">Start</span>
            <h3 className="name">For first studies.</h3>
            <div className="price-row">
              <span className="price">$149</span>
              <span className="period">/ mo</span>
            </div>
            <ul>
              <li>149,000 tokens per month</li>
              <li>All research methods</li>
              <li>Card payment, monthly or annual (2 months free)</li>
              <li>Top-up anytime — $1 = 1,000 tokens</li>
            </ul>
            <a href="https://suite.dtwin.now" className="btn-x cta">Choose Start</a>
          </div>

          <div className="price-card featured">
            <span className="ribbon">Most popular</span>
            <span className="tier">Pro</span>
            <h3 className="name">For ongoing research.</h3>
            <div className="price-row">
              <span className="price">$299</span>
              <span className="period">/ mo</span>
            </div>
            <ul>
              <li>350,000 tokens per month (+17% bonus)</li>
              <li>Priority studies</li>
              <li>Card payment, monthly or annual</li>
              <li>Top-up anytime — $1 = 1,000 tokens</li>
            </ul>
            <a href="https://suite.dtwin.now" className="btn-x brand cta">Choose Pro <span className="arrow">→</span></a>
          </div>

          <div className="price-card">
            <span className="tier">Enterprise</span>
            <h3 className="name">For the whole stack.</h3>
            <div className="price-row">
              <span className="price">Contact us</span>
            </div>
            <ul>
              <li>All GMR products, one wallet</li>
              <li>Volume token economics</li>
              <li>Invoice billing &amp; SSO</li>
              <li>Named research support</li>
            </ul>
            <a href="#contact" className="btn-x cta">Talk to sales</a>
          </div>

        </div>

        <p className="pricing-micro">
          Start free — no credit card, no panel. First study in minutes. Top up anytime · $1 = 1,000 tokens.
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 11 · FINAL CTA
// ============================================================
function DtFinalCTA() {
  return (
    <section className="final-cta" id="start">
      <div className="container layer">
        <h2 className="heading reveal">
          Ask your market.<br/>
          <span className="muted">Get the answer today.</span>
        </h2>
        <div className="ctas reveal">
          <a href="https://suite.dtwin.now" className="btn-x brand">Try it free <span className="arrow">→</span></a>
          <a href="#contact" className="btn-x">Book a call</a>
        </div>
        <div className="micro reveal">No credit card · No panel · Answers by segment</div>
      </div>
    </section>
  );
}

// ============================================================
// 12 · FOOTER
// ============================================================
function DtFooter() {
  return (
    <>
      <div className="eco-bar" id="contact">
        <div className="container">
          <div className="inner">
            <span className="label">Part of the GMR stack</span>
            <div className="pellets">
              {ECO_ORDER.map(id => {
                const b = SITE_BRANDS[id];
                const isActive = id === 'dtwin';
                return (
                  <a key={id} href={b.url} className={`pellet ${isActive ? 'active' : ''}`}
                     target={isActive ? undefined : '_blank'}
                     rel={isActive ? undefined : 'noopener'}
                     aria-label={b.long}>
                    <span className="eco-mono">
                      <img src={MONO_FILES[id]} alt={b.mono}/>
                    </span>
                    <span className="eco-name">{b.long}</span>
                  </a>
                );
              })}
            </div>
          </div>
        </div>
      </div>

      <footer className="linear-footer">
        <div className="container">
          <div className="row between" style={{ alignItems: 'flex-start', marginBottom: 40, flexWrap: 'wrap', gap: 40 }}>
            <div className="col gap-3" style={{ maxWidth: 360 }}>
              <DtLogo size="m"/>
              <span style={{ color: 'var(--text-4)', fontSize: 13, lineHeight: 1.5, marginTop: 8 }}>
                The research lens of GMR — and the home of the twin population. Ask a representative synthetic audience anything and get research-grade answers by segment, in minutes. Zero PII.
              </span>
              <span style={{ color: 'var(--text-5)', fontSize: 12, marginTop: 4 }}>
                Part of GMR — AI-native products that deliver results, not tools.
              </span>
            </div>

            <div className="row gap-7" style={{ flexWrap: 'wrap' }}>
              <div className="col" style={{ minWidth: 130 }}>
                <span className="group-label">Product</span>
                <a href="#how">How it works</a>
                <a href="#unlocks">What it unlocks</a>
                <a href="#science">The science</a>
              </div>
              <div className="col" style={{ minWidth: 120 }}>
                <span className="group-label">Pricing</span>
                <a href="#pricing">Plans</a>
                <a href="https://suite.dtwin.now">Try it free</a>
                <a href="#contact">Enterprise</a>
              </div>
              <div className="col" style={{ minWidth: 120 }}>
                <span className="group-label">Account</span>
                <a href="https://suite.dtwin.now">Login</a>
                <a href="https://suite.dtwin.now">Sign up</a>
                <a href="https://status.dtwin.now" target="_blank" rel="noopener noreferrer">Status</a>
              </div>
              <div className="col" style={{ minWidth: 110 }}>
                <span className="group-label">Legal</span>
                <a href="https://www.iubenda.com/privacy-policy/74776910" className="iubenda-black iubenda-noiframe iubenda-embed" title="Privacy Policy">Privacy Policy</a>
                <a href="https://www.iubenda.com/privacy-policy/74776910/cookie-policy" className="iubenda-black iubenda-noiframe iubenda-embed" title="Cookie Policy">Cookie Policy</a>
                <a href="https://www.iubenda.com/terms-and-conditions/74776910" className="iubenda-black iubenda-noiframe iubenda-embed" title="Terms and Conditions">Terms and Conditions</a>
              </div>
            </div>
          </div>

          <hr style={{ height: 1, background: 'var(--line)', border: 0 }}/>

          <div className="row between" style={{ padding: '20px 0 0', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
            <span className="mono">© DTwin · part of GMR Inc · {new Date().getFullYear()}</span>
            <span className="mono">dtwin.now</span>
          </div>
        </div>
      </footer>
    </>
  );
}

Object.assign(window, {
  DtLogo,
  DtHeader, DtHero, StudyPreview, DtContrarian, DtProblem,
  DtDelivers, DtCapabilities, DtHow, DtStats, DtProof, DtReplaces,
  DtPricing, DtFinalCTA, DtFooter,
  ECO_ORDER,
});