// klenux-sections.jsx — Klenux landing (BOZZA pre-launch).
// Aligned to GMR v2 + all sibling product sites. Copy is BOZZA — iterate w/ Test PO.

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

// ---- Logo: Klenux wordmark (typeset — no brand-kit SVG exists yet).
// Pattern matches geoky: first letter in accent, rest in #E4E4E8.
function KxLogo({ size = 'm' }) {
  const heights = { s: 18, m: 22, l: 28, xl: 40 };
  const h = heights[size];
  return (
    <a href="#top" className="bx-mark" aria-label="Klenux — home"
       style={{
         fontFamily: '"DM Sans", ui-sans-serif, system-ui, sans-serif',
         fontSize: h,
         fontWeight: 500,
         lineHeight: 1,
         letterSpacing: '-0.025em',
         display: 'inline-flex',
         alignItems: 'baseline',
         textDecoration: 'none',
       }}>
      <span style={{ color: '#06B6D4' }}>K</span><span style={{ color: '#E4E4E8' }}>LENUX</span>
    </a>
  );
}

// ============================================================
// 0 · HEADER
// ============================================================
function KxHeader() {
  return (
    <header className="linear-header">
      <div className="container">
        <KxLogo />
        <nav>
          <a href="#how">How it works</a>
          <a href="#learn">The panel</a>
          <a href="#pricing">Pricing</a>
          <a href="https://app.klenux.com/login" className="btn-x brand">Start free <span className="arrow">→</span></a>
        </nav>
      </div>
    </header>
  );
}

// ============================================================
// 1 · HERO
// ============================================================
function KxHero() {
  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"/> AI-native UX testing
            </span>

            <h1 className="t-display reveal">
              UX testing in an afternoon.<br/>
              <span className="muted">No recruiting. No incentives. No three-week wait.</span>
            </h1>

            <p className="t-lead reveal" style={{ maxWidth: 600 }}>
              Recruiting real testers is slow, expensive and hard to schedule. Klenux runs your test on audience-realistic digital twins — you describe the test in plain language and get a living report. You get the findings, not a recruiting project.
            </p>

            <div className="col gap-3 reveal" style={{ marginTop: 8 }}>
              <div className="row gap-3" style={{ flexWrap: 'wrap' }}>
                <a href="https://app.klenux.com/login" className="btn-x brand">Start free <span className="arrow">→</span></a>
                <a href="#sample" className="btn-x">See a sample report</a>
              </div>
              <span className="cta-microcopy">
                No credit card<span className="sep">·</span>No panel to recruit<span className="sep">·</span>First test in minutes
              </span>
            </div>
          </div>

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

// Hero visual — a stylized Klenux test report.
function StudyPreview() {
  return (
    <div className="report-preview" aria-hidden="true">
      <div className="report-chrome">
        <span className="filename">
          <span className="ext">TEST</span>
          checkout-v3 · panel-24.klenux
        </span>
        <span className="status">Completed · 3h 41m</span>
      </div>

      <h4 className="report-title">Checkout v3 · usability study</h4>
      <div className="report-sub">240 twins · 6 tasks · v2 vs v3</div>

      <div className="report-section-h">Task success · v3 vs v2</div>
      <div className="report-bars"><span className="lbl">Add to cart</span><span className="track"><span className="fill" style={{ width: '92%' }}/></span><span className="val">+4pp</span></div>
      <div className="report-bars"><span className="lbl">Apply promo</span><span className="track"><span className="fill" style={{ width: '64%' }}/></span><span className="val">−11pp</span></div>
      <div className="report-bars"><span className="lbl">Pick shipping</span><span className="track"><span className="fill" style={{ width: '78%' }}/></span><span className="val">+2pp</span></div>
      <div className="report-bars"><span className="lbl">Place order</span><span className="track"><span className="fill" style={{ width: '88%' }}/></span><span className="val">+6pp</span></div>

      <div className="report-section-h">Findings</div>
      <div className="report-find">
        <span className="idx">01</span>
        <span>Promo input mistaken for newsletter signup — 38% of twins paused or skipped. <span className="cite">[friction · high]</span></span>
      </div>
      <div className="report-find">
        <span className="idx">02</span>
        <span>"Pickup" option is now discovered earlier — drives faster path-to-order. <span className="cite">[win]</span></span>
      </div>
      <div className="report-find">
        <span className="idx">03</span>
        <span>Mobile address-step still requires scroll to find "continue" — narrow viewports. <span className="cite">[fix · easy]</span></span>
      </div>

      <div className="report-foot">
        <span className="pages">v3 vs v2 · agency-tenant</span>
        <span>klenux · living report</span>
      </div>
    </div>
  );
}

// ============================================================
// 2 · CONTRARIAN
// ============================================================
function KxContrarian() {
  return (
    <section className="brynx-strip reveal">
      <div className="container">
        <p className="text">
          Stop recruiting testers. Stop scheduling sessions.<br/>
          <span className="em">Describe the test — get the findings.</span>
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 3 · PROBLEM
// ============================================================
function KxProblem() {
  const items = [
    { n: '01', strike: 'Recruiting weeks',          body: 'Recruiting eats the timeline. Weeks to find, screen and schedule the right participants.' },
    { n: '02', strike: 'Incentives per session',    body: 'Incentives eat the budget. Pay per session, and you can only afford a handful.' },
    { n: '03', strike: 'Five-user "studies"',       body: "A handful isn't a signal. Five users tell you something — but not enough, not fast, not repeatable." },
  ];
  return (
    <section className="linear-section" id="problem">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="01">The problem</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          User testing is right in theory,<br/>
          <span className="muted">broken in practice.</span>
        </h2>

        <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.strike}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 4 · DELIVERS (RaaS)
// ============================================================
function KxDelivers() {
  const props = [
    { g: '◇', name: 'Findings, not raw clicks.',         desc: 'What worked, what confused, what to fix.' },
    { g: '◐', name: 'Audience-realistic panel.',         desc: 'Twins that match your real users, not generic bots.' },
    { g: '∞', name: 'Repeatable on demand.',             desc: 'Re-run after every design change — same panel, same afternoon.' },
  ];
  return (
    <section className="linear-section" id="delivers">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="02">What Klenux delivers</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          A usability study, run on twins,<br/>
          <span className="muted">back in an afternoon.</span>
        </h2>
        <p className="t-lead reveal" style={{ maxWidth: 820 }}>
          Describe what you want to test. Klenux assembles a panel of audience-realistic digital twins, runs the test, and returns a living report you can interrogate.
        </p>

        <div className="delivers-grid reveal-stagger" style={{ marginTop: 16 }}>
          {props.map(p => (
            <div key={p.name} className="deliver-card">
              <span className="glyph">{p.g}</span>
              <h3 className="name">{p.name}</h3>
              <p className="desc">{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 5 · HOW IT WORKS — signature (the 4 product screens)
// ============================================================
function KxHow() {
  const steps = [
    { num: '01', label: '01 · Set up the test in chat',
      title: 'Describe what to test.',
      desc: "Describe what you're testing and what you want to learn. No test-plan templates." },
    { num: '02', label: '02 · Pick your twin panel',
      title: 'Audience-realistic panel.',
      desc: 'Klenux proposes a panel of audience-realistic twins on the GMR Twin platform. Approve, swap, refine.' },
    { num: '03', label: '03 · Run it live',
      title: 'Watch it execute.',
      desc: 'Watch the test execute across the panel in real time.' },
    { num: '04', label: '04 · Living report',
      title: 'Interrogate, not archive.',
      desc: 'A report you can question, filter and re-run — not a static PDF.' },
  ];
  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="03">How it works</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Four steps.<br/>
          <span className="muted">Describe to report.</span>
        </h2>

        <div className="how-grid four reveal-stagger" style={{ marginTop: 16 }}>
          {steps.map(s => (
            <div key={s.num} className="how-step">
              <span className="step-num">{s.label}</span>
              <h3 className="step-name">{s.title}</h3>
              <p className="step-desc">{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 6 · WHAT YOU LEARN (4 cards — 2x2)
// ============================================================
function KxLearn() {
  const items = [
    { name: 'Task success',         role: 'Can they actually complete the flow.',                glyph: '✓', tag: 'success' },
    { name: 'Friction points',      role: 'Where they hesitate, backtrack, give up.',            glyph: '⚠', tag: 'friction' },
    { name: 'Comprehension',        role: 'Whether your copy and IA make sense to them.',        glyph: '◇', tag: 'comprehension' },
    { name: 'Comparative',          role: 'How a new design scores against the old one.',        glyph: '⇄', tag: 'comparative' },
  ];
  return (
    <section className="linear-section" id="learn">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="04">What you learn</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          The questions usability research<br/>
          <span className="muted">is supposed to answer.</span>
        </h2>

        <div className="crew-grid usecase-grid reveal-stagger" style={{ marginTop: 16 }}>
          {items.map(c => (
            <div key={c.name} className="crew-card">
              <div className="crew-head">
                <span className="crew-glyph">{c.glyph}</span>
                <div className="col" style={{ gap: 2 }}>
                  <h3 className="crew-name">{c.name}</h3>
                </div>
              </div>
              <p className="crew-role">{c.role}</p>
              <span className="crew-tag">{c.tag}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 7 · STATS
// ============================================================
function KxStats() {
  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">4</span></span>
            <span className="k">Steps · brief to report</span>
          </div>
          <div className="bx-stat">
            <span className="v">100+</span>
            <span className="k">Attributes per twin panel member</span>
          </div>
          <div className="bx-stat">
            <span className="v">½ day</span>
            <span className="k">Not three weeks</span>
          </div>
          <div className="bx-stat">
            <span className="v">0</span>
            <span className="k">Testers to recruit</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 8 · REPLACES
// ============================================================
function KxReplaces() {
  return (
    <section className="replaces-strip reveal" id="replaces">
      <div className="container">
        <h2 className="replaces-big">
          Replaces <span className="accent">·</span><br/>
          <span className="em">the user-testing panel.</span>
        </h2>
        <p className="replaces-foot">
          Recruiting agencies, incentive budgets, scheduling weeks, five-user studies — folded into one product that ships the findings.
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 9 · PRICING
// ============================================================
function KxPricing() {
  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="05">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 tests.</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>Full panel access</li>
              <li>Card payment, monthly or annual (2 months free)</li>
              <li>Top-up anytime — $1 = 1,000 tokens</li>
            </ul>
            <a href="https://app.klenux.com/login" 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 testing.</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 tests</li>
              <li>Card payment, monthly or annual</li>
              <li>Top-up anytime — $1 = 1,000 tokens</li>
            </ul>
            <a href="https://app.klenux.com/login" 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 agencies.</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>Multi-client for agencies</li>
            </ul>
            <a href="#contact" className="btn-x cta">Talk to sales</a>
          </div>

        </div>

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

// ============================================================
// 10 · FINAL CTA
// ============================================================
function KxFinalCTA() {
  return (
    <section className="final-cta" id="start">
      <div className="container layer">
        <h2 className="heading reveal">
          Your next design could be tested<br/>
          <span className="muted">before you go home.</span>
        </h2>
        <div className="ctas reveal">
          <a href="https://app.klenux.com/login" className="btn-x brand">Start free <span className="arrow">→</span></a>
          <a href="#contact" className="btn-x">Talk to us</a>
        </div>
        <div className="micro reveal">No credit card · No panel to recruit · First test in minutes</div>
      </div>
    </section>
  );
}

// ============================================================
// 11 · FOOTER (7-product ecosystem bar)
// ============================================================
function KxFooter() {
  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 === 'klenux';
                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 }}>
              <KxLogo size="m"/>
              <span style={{ color: 'var(--text-4)', fontSize: 13, lineHeight: 1.5, marginTop: 8 }}>
                AI-native UX testing. Run usability studies on audience-realistic digital twins — no recruiting, no incentives, back in an afternoon.
              </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="#learn">What you learn</a>
                <a href="#sample">Sample report</a>
              </div>
              <div className="col" style={{ minWidth: 120 }}>
                <span className="group-label">Pricing</span>
                <a href="#pricing">Plans</a>
                <a href="https://app.klenux.com/login">Start free</a>
                <a href="#contact">Enterprise</a>
              </div>
              <div className="col" style={{ minWidth: 120 }}>
                <span className="group-label">Account</span>
                <a href="https://app.klenux.com/login">Login</a>
                <a href="https://app.klenux.com/login">Sign up</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">© Klenux · part of GMR Inc · {new Date().getFullYear()}</span>
            <span className="mono">klenux.com</span>
          </div>
        </div>
      </footer>
    </>
  );
}

Object.assign(window, {
  KxLogo,
  KxHeader, KxHero, StudyPreview, KxContrarian, KxProblem,
  KxDelivers, KxHow, KxLearn, KxStats, KxReplaces,
  KxPricing, KxFinalCTA, KxFooter,
  ECO_ORDER,
});