// klenux-sections.jsx — Klenux landing.
// Aligned to GMR v2 + sibling product sites. Klenux = the NAVIGATION LENS of GMR:
// a population of digital twins NAVIGATES your site by segment and shows where
// real users hesitate, get stuck and drop off. Synthetic UX testing on your own
// properties. Runs on the shared GMR twin population.

const ECO_ORDER = ['brynx', 'dtwin', 'marketear', 'crewrev', '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">What it unlocks</a>
          <a href="#pricing">Pricing</a>
          <a href="https://app.klenux.com/login" className="btn-x brand">Try it 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"/> The navigation lens of GMR
            </span>

            <h1 className="t-display reveal">
              See where your site<br/>
              loses people.<br/>
              <span className="muted">By segment, before you ship.</span>
            </h1>

            <p className="t-lead reveal" style={{ maxWidth: 600 }}>
              A population of digital twins navigates your pages the way your real audience would — and shows you exactly where they hesitate, get stuck, and drop off.
            </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">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 to recruit<span className="sep">·</span>Friction by segment
              </span>
            </div>
          </div>

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

// Hero visual — a stylized Klenux navigation report.
function StudyPreview() {
  return (
    <div className="report-preview" aria-hidden="true">
      <div className="report-chrome">
        <span className="filename">
          <span className="ext">RUN</span>
          checkout-v3 · panel-240.klenux
        </span>
        <span className="status">Live · by segment</span>
      </div>

      <h4 className="report-title">Checkout v3 · navigation study</h4>
      <div className="report-sub">240 twins · 6 steps · by segment</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">Where they drop off</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">[mobile · 25–34]</span></span>
      </div>
      <div className="report-find">
        <span className="idx">02</span>
        <span>"Pickup" option discovered earlier — drives a faster path-to-order. <span className="cite">[win]</span></span>
      </div>
      <div className="report-find">
        <span className="idx">03</span>
        <span>Address step requires scroll to find "continue" on narrow viewports. <span className="cite">[mobile · 45+]</span></span>
      </div>

      <div className="report-foot">
        <span className="pages">v3 vs v2 · by segment</span>
        <span>klenux · the navigation lens</span>
      </div>
    </div>
  );
}

// ============================================================
// 2 · THE SHIFT — one-liner strip
// ============================================================
function KxContrarian() {
  return (
    <section className="brynx-strip reveal">
      <div className="container">
        <p className="text">
          You're testing with five people.<br/>
          <span className="em">Your audience is thousands — and not all the same.</span>
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 3 · THE SHIFT — testing on five people, after the fact
// ============================================================
function KxProblem() {
  const items = [
    { n: '01', tag: 'Five people',   body: 'A handful of recruited testers — one narrow profile, not your whole audience.' },
    { n: '02', tag: 'After the fact', body: 'Weeks of waiting, then you ship — and find the friction once conversions are already lost.' },
    { n: '03', tag: 'Not the same',  body: "An average hides the truth. Each segment gets stuck somewhere different." },
  ];
  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 }}>
          Testing on five people,<br/>
          <span className="muted">after the fact.</span>
        </h2>
        <p className="t-lead reveal" style={{ maxWidth: 820 }}>
          Usability testing today: a handful of recruited testers, weeks of waiting, one narrow profile. So you ship — and discover the friction from real users once the conversions are already gone.
        </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 — the twins navigate (+ twin population)
// ============================================================
function KxDelivers() {
  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 }}>
          The twins navigate,<br/>
          <span className="muted">like your audience does.</span>
        </h2>
        <p className="t-lead reveal" style={{ maxWidth: 820 }}>
          Klenux sends a population of digital twins through your site. Each one browses the way that person would — where they click, where they hesitate, where they give up. Not one generic session: a whole audience, by segment, in minutes.
        </p>

        <div className="pop-card reveal">
          <div className="pop-badge">
            <span className="pop-dot"/>
            <span className="pop-name">Twin population<small>Shared across GMR</small></span>
          </div>
          <p className="pop-body">
            Each twin carries a <strong>DNA</strong> — demographics, goals, habits — so it navigates like a real person, not a scripted bot. <strong>One population, sharper with every use</strong> across the suite.
          </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">A whole audience, not five.</h3>
            <p className="desc">Thousands of twins walk your pages at once — the breadth a five-user study can never reach.</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">Twin DNA</span>
            </div>
            <h3 className="title">Each browses as itself.</h3>
            <p className="desc">Every twin carries its own profile, so behavior splits the way your real segments do.</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 className="engine">
            <div className="head">
              <span className="num">03</span>
              <span className="codename">By segment</span>
            </div>
            <h3 className="title">Friction, broken out.</h3>
            <p className="desc">See where each segment hesitates and drops — not just the blended average.</p>
            <div className="viz">
              <div className="viz-engine-strategy">
                <div className="step"><span className="n">01</span><span>Mobile · 25–34 — promo field mistaken for signup</span><span className="pri high">P0</span></div>
                <div className="step"><span className="n">02</span><span>Mobile · 45+ — address form abandons on scroll</span><span className="pri high">P0</span></div>
                <div className="step"><span className="n">03</span><span>Desktop · returning — shipping step scroll trap</span><span className="pri">P1</span></div>
                <div className="step"><span className="n">04</span><span>Tablet · new — primary CTA below the fold</span><span className="pri">P1</span></div>
              </div>
            </div>
          </div>

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

// ============================================================
// 5 · WHAT IT UNLOCKS
// ============================================================
function KxLearn() {
  const items = [
    { n: '01', name: 'Friction by segment',    body: 'Where each audience gets stuck — not just the average user.' },
    { n: '02', name: 'Drop-off points',        body: 'The exact steps where people abandon, and why.' },
    { n: '03', name: 'Dead ends & confusion',  body: "Paths that don't lead where the user expects." },
    { n: '04', name: 'Test before launch',     body: 'Find the problems before real traffic does — no recruiting.' },
    { n: '05', name: 'Compare flows',          body: 'Put two versions in front of the population and see which one holds.' },
  ];
  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="03">What it unlocks</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Five reads of the journey.<br/>
          <span className="muted">Before a real user hits it.</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 KxHow() {
  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 }}>
          Point it at your pages.<br/>
          <span className="muted">Read the friction back.</span>
        </h2>

        <div className="how-grid reveal-stagger" style={{ marginTop: 16 }}>
          <div className="how-step">
            <span className="step-num">01 · Point</span>
            <h3 className="step-name">Give it the flow.</h3>
            <p className="step-desc">Point Klenux at the pages or prototype you want tested. No test-plan templates, no recruiting.</p>
          </div>
          <div className="how-step" style={{ paddingLeft: 32 }}>
            <span className="step-num">02 · Navigate</span>
            <h3 className="step-name">The population walks it.</h3>
            <p className="step-desc">A whole audience of twins navigates your site at once — each one behaving as its own segment.</p>
          </div>
          <div className="how-step" style={{ paddingLeft: 32 }}>
            <span className="step-num">03 · Read</span>
            <h3 className="step-name">Friction, by segment.</h3>
            <p className="step-desc">See exactly where they hesitate, get stuck and drop off — before a real user ever does.</p>
          </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">0</span></span>
            <span className="k">Testers to recruit</span>
          </div>
          <div className="bx-stat">
            <span className="v">1000s</span>
            <span className="k">Twins per run, not five</span>
          </div>
          <div className="bx-stat">
            <span className="v">Minutes</span>
            <span className="k">Not three weeks</span>
          </div>
          <div className="bx-stat">
            <span className="v">Pre-launch</span>
            <span className="k">Friction before traffic</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 8 · PART OF THE SUITE
// ============================================================
function KxReplaces() {
  return (
    <section className="replaces-strip reveal" id="suite">
      <div className="container">
        <h2 className="replaces-big">
          One twin population. <span className="accent">·</span><br/>
          <span className="em">Sharper with every use.</span>
        </h2>
        <p className="replaces-foot">
          Klenux runs on the same twin population as the rest of GMR. The audience that listens in Marketear, answers in DTwin and queries the engines in Geoky is the one walking your site here — one population, sharper with every use.
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 9 · PROOF
// ============================================================
function KxProof() {
  return (
    <section className="proof-band reveal" id="proof">
      <div className="container col gap-3">
        <span className="mono-label" data-num="05">Proof</span>
        <p className="proof-quote">
          A <span className="accent">validated population</span> that behaves like real people — generative agent simulations, not a scripted bot.
        </p>
        <a href="#sample" className="proof-foot">Scientific foundation · Park et al. 2024 · sample navigation report <span className="arrow">→</span></a>
      </div>
    </section>
  );
}

// ============================================================
// 10 · 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="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 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 — no credit card, full panel access. First test in minutes. Top up anytime · $1 = 1,000 tokens.
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 11 · FINAL CTA
// ============================================================
function KxFinalCTA() {
  return (
    <section className="final-cta" id="start">
      <div className="container layer">
        <h2 className="heading reveal">
          Find the friction<br/>
          <span className="muted">before your users do.</span>
        </h2>
        <div className="ctas reveal">
          <a href="https://app.klenux.com/login" 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 to recruit · Friction by segment</div>
      </div>
    </section>
  );
}

// ============================================================
// 12 · 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 }}>
                The navigation lens of GMR. A population of digital twins navigates your site by segment and shows where real users hesitate, get stuck and drop off — before you ship.
              </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 it unlocks</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">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://app.klenux.com/login">Login</a>
                <a href="https://app.klenux.com/login">Sign up</a>
                <a href="https://klenux.betteruptime.com" 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">© 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, KxLearn, KxHow, KxStats, KxReplaces,
  KxProof, KxPricing, KxFinalCTA, KxFooter,
  ECO_ORDER,
});