// brynx-sections.jsx — Brynx landing.
// Aligned to GMR v2 design system. Copy is APPROVED — do not rewrite.

// Ecosystem bar order — 5 products, no GeoKe.
const ECO_ORDER = ['brynx', 'dtwin', 'marketear', 'crewrev', 'influrep', 'geoky', 'klenux'];

// ---- Logo: BRYNX wordmark (official asset from GMR brand kit) ----
function BxLogo({ variant = 'word', size = 'm' }) {
  // variant: 'word' = full BRYNX wordmark · 'mono' = BX monogram
  const src = variant === 'mono' ? LOGO_FILES.brynx.replace('BRYNX.svg', 'BX.svg') : LOGO_FILES.brynx;
  const heights = { s: 18, m: 22, l: 28, xl: 40 };
  return (
    <a href="#top" className="bx-mark" aria-label="Brynx — home">
      <img src={src} alt="Brynx" style={{ height: heights[size], width: 'auto', display: 'block' }}/>
    </a>
  );
}

// ============================================================
// 0 · HEADER
// ============================================================
function BrynxHeader() {
  return (
    <header className="linear-header">
      <div className="container">
        <BxLogo />
        <nav>
          <a href="#how">How it works</a>
          <a href="#engines">Engines</a>
          <a href="#pricing">Pricing</a>
          <a href="#start" className="btn-x brand">Start free <span className="arrow">→</span></a>
        </nav>
      </div>
    </header>
  );
}

// ============================================================
// 1 · HERO
// ============================================================
function BrynxHero() {
  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"/> Generative market research
            </span>

            <h1 className="t-display reveal">
              Market intelligence<br/>
              in 2 hours.<br/>
              <span className="muted">Not weeks of process.</span>
            </h1>

            <p className="t-lead reveal" style={{ maxWidth: 560 }}>
              A research agency runs you six weeks and a five-figure invoice. Brynx returns the same board-ready intelligence in an afternoon — source-cited, ready to act on. You get the report, not a tool to run it.
            </p>

            <div className="col gap-3 reveal" style={{ marginTop: 8 }}>
              <div className="row gap-3" style={{ flexWrap: 'wrap' }}>
                <a href="#start" className="btn-x brand">Start free — 300K tokens <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 setup<span className="sep">·</span>First report in minutes
              </span>
            </div>
          </div>

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

// Hero visual — a stylized snapshot of a Brynx deliverable.
function ReportPreview() {
  return (
    <div className="report-preview" aria-hidden="true">
      <div className="report-chrome">
        <span className="filename">
          <span className="ext">PDF</span>
          q3-cold-brew-segment.pdf
        </span>
        <span className="status">Delivered · 2h 04m</span>
      </div>

      <h4 className="report-title">Cold-brew RTD · Italy · Q3 outlook</h4>
      <div className="report-sub">42 pages · 287 sources cited · 6 segments</div>

      <div className="report-section-h">Key findings</div>
      <div className="report-find">
        <span className="idx">01</span>
        <span>Premium &amp; cold-brew now drives 38% of category growth, up from 21% YoY. <span className="cite">[refs 14, 22]</span></span>
      </div>
      <div className="report-find">
        <span className="idx">02</span>
        <span>Two challenger brands captured 11pp share at expense of incumbents. <span className="cite">[refs 41, 58]</span></span>
      </div>
      <div className="report-find">
        <span className="idx">03</span>
        <span>Urban 25–34 cohort indexes 2.4× on functional positioning. <span className="cite">[refs 73, 91]</span></span>
      </div>

      <div className="report-section-h">Segment momentum</div>
      <div className="report-bars"><span className="lbl">Cold-brew RTD</span><span className="track"><span className="fill" style={{ width: '92%' }}/></span><span className="val">+38%</span></div>
      <div className="report-bars"><span className="lbl">Functional</span><span className="track"><span className="fill" style={{ width: '74%' }}/></span><span className="val">+24%</span></div>
      <div className="report-bars"><span className="lbl">Single-origin</span><span className="track"><span className="fill" style={{ width: '52%' }}/></span><span className="val">+12%</span></div>
      <div className="report-bars"><span className="lbl">Mass market</span><span className="track"><span className="fill" style={{ width: '20%' }}/></span><span className="val">−4%</span></div>

      <div className="report-foot">
        <span className="pages">p. 7 / 42</span>
        <span>brynx · research engine</span>
      </div>
    </div>
  );
}

// ============================================================
// 2 · CONTRARIAN STRIP
// ============================================================
function BrynxContrarian() {
  return (
    <section className="brynx-strip reveal">
      <div className="container">
        <p className="text">
          Stop briefing an agency. Stop learning a dashboard.<br/>
          <span className="em">Ask a question — get the answer.</span>
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 3 · THE PROBLEM
// ============================================================
function BrynxProblem() {
  const items = [
    { n: '01', strike: 'Six-to-ten weeks',     body: 'Six-to-ten week turnaround. The decision is already made by the time the deck lands.' },
    { n: '02', strike: '€40k — €85k / project', body: 'Forty to eighty-five thousand euros per project. Research becomes a luxury, not a habit.' },
    { n: '03', strike: 'A dead PDF',            body: "A static PDF nobody reopens. Insight dies the day it's delivered." },
  ];
  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 }}>
          Traditional research breaks<br/>
          <span className="muted">on cost, speed and shelf-life.</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 · WHAT BRYNX DELIVERS (RaaS)
// ============================================================
function BrynxDelivers() {
  const props = [
    { g: '◇', name: 'Board-ready, not raw data.', desc: 'Strategic narrative and recommendations, not a pile of charts.' },
    { g: '§',  name: 'Every claim cited.',         desc: '500+ authoritative sources, traceable. No hallucinated numbers.' },
    { g: '∞',  name: 'Living documents.',          desc: 'Reusable and updatable — not archived as a dead PDF.' },
  ];
  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 Brynx delivers</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          A research agency<br/>
          <span className="muted">in your browser.</span>
        </h2>
        <p className="t-lead reveal" style={{ maxWidth: 800 }}>
          Ask in plain language. Brynx runs the full pipeline and returns a living, source-cited document you can interrogate, update and act on.
        </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 · THE THREE ENGINES (cuore prodotto)
// ============================================================
function BrynxEngines() {
  return (
    <section className="linear-section" id="engines">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="03">The three engines</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Three engines.<br/>
          <span className="muted">One research team.</span>
        </h2>

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

          <div className="engine">
            <div className="head">
              <span className="num">01</span>
              <span className="codename">Research Engine</span>
            </div>
            <h3 className="title">Deep market audits.</h3>
            <p className="desc">Explore segments, brands and audiences. Source-cited insights, client-ready deliverables — the work a strategist bills weeks for.</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">Pulse Engine</span>
            </div>
            <h3 className="title">Weak-signal trend detection.</h3>
            <p className="desc">A 7-step pipeline monitoring 500+ signals to surface emerging trends before your competitors notice them.</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">Strategy Engine</span>
            </div>
            <h3 className="title">Operational recommendations.</h3>
            <p className="desc">Not a report to read — actions to execute. What to do, in what order, with the rationale behind each move.</p>
            <div className="viz">
              <div className="viz-engine-strategy">
                <div className="step"><span className="n">01</span><span>Reposition premium tier around functional benefits</span><span className="pri high">P0</span></div>
                <div className="step"><span className="n">02</span><span>Launch challenger SKU in urban 25–34 cohort</span><span className="pri high">P0</span></div>
                <div className="step"><span className="n">03</span><span>Sunset mass-market line by Q1</span><span className="pri">P1</span></div>
                <div className="step"><span className="n">04</span><span>Renegotiate retail margins on cold-brew</span><span className="pri">P2</span></div>
              </div>
            </div>
          </div>

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

// ============================================================
// 6 · HOW IT WORKS
// ============================================================
function BrynxHow() {
  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 }}>
          Brief in.<br/>
          <span className="muted">Intelligence 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 market.</h3>
            <p className="step-desc">Describe the market, segment or question in plain language. No briefing template.</p>
          </div>
          <div className="how-step" style={{ paddingLeft: 32 }}>
            <span className="step-num">02 · Brynx runs</span>
            <h3 className="step-name">Multi-agent pipeline.</h3>
            <p className="step-desc">A pipeline of specialized agents gathers, validates and synthesizes across 500+ sources.</p>
          </div>
          <div className="how-step" style={{ paddingLeft: 32 }}>
            <span className="step-num">03 · Act</span>
            <h3 className="step-name">A living document.</h3>
            <p className="step-desc">A cited, board-ready document — yours in about 2 hours. Update it any time the question moves.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 7 · STATS
// ============================================================
function BrynxStats() {
  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">2h</span></span>
            <span className="k">Brief to deliverable</span>
          </div>
          <div className="bx-stat">
            <span className="v">−80%</span>
            <span className="k">Cost vs panel research</span>
          </div>
          <div className="bx-stat">
            <span className="v">500+</span>
            <span className="k">Sources per report</span>
          </div>
          <div className="bx-stat">
            <span className="v">EU + EN</span>
            <span className="k">All major languages</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 8 · REPLACES
// ============================================================
function BrynxReplaces() {
  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 research agency.</span>
        </h2>
        <p className="replaces-foot">
          Panel subscriptions, brand-tracker licences, junior-strategist hours — folded into one product that ships the result.
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 9 · PRICING — 3 tiers, middle highlighted
// ============================================================
function BrynxPricing() {
  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 projects.</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 three engines</li>
              <li>Card payment, monthly or annual (2 months free)</li>
              <li>Top-up anytime — $1 = 1,000 tokens</li>
            </ul>
            <a href="#start" 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 intelligence.</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 pipeline runs</li>
              <li>Card payment, monthly or annual</li>
              <li>Top-up anytime — $1 = 1,000 tokens</li>
            </ul>
            <a href="#start" 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 pipeline support</li>
            </ul>
            <a href="#contact" className="btn-x cta">Talk to sales</a>
          </div>

        </div>

        <p className="pricing-micro">
          300,000 tokens included — that's roughly 3 full reports. No credit card. Top up anytime · $1 = 1,000 tokens.
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 10 · FINAL CTA
// ============================================================
function BrynxFinalCTA() {
  return (
    <section className="final-cta" id="start">
      <div className="container layer">
        <h2 className="heading reveal">
          Your next research project<br/>
          <span className="muted">could be done by dinner.</span>
        </h2>
        <div className="ctas reveal">
          <a href="#" className="btn-x brand">Start free — 300K tokens <span className="arrow">→</span></a>
          <a href="#contact" className="btn-x">Talk to us</a>
        </div>
        <div className="micro reveal">No credit card · 300,000 tokens included · ~3 full reports</div>
      </div>
    </section>
  );
}

// ============================================================
// 11 · FOOTER (with ecosystem bar — 5 products, no GeoKe)
// ============================================================
function BrynxFooter() {
  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 === 'brynx';
                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 }}>
              <BxLogo size="m"/>
              <span style={{ color: 'var(--text-4)', fontSize: 13, lineHeight: 1.5, marginTop: 8 }}>
                Generative market research. A board-ready intelligence deliverable in about 2 hours, source-cited and ready to act on.
              </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="#engines">Engines</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="#start">Start free</a>
                <a href="#contact">Enterprise</a>
              </div>
              <div className="col" style={{ minWidth: 120 }}>
                <span className="group-label">Account</span>
                <a href="#">Login</a>
                <a href="#start">Sign up</a>
              </div>
              <div className="col" style={{ minWidth: 110 }}>
                <span className="group-label">Legal</span>
                <a href="#">Privacy</a>
                <a href="#">Terms</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">© Brynx · part of GMR Inc · {new Date().getFullYear()}</span>
            <span className="mono">brynx.ai</span>
          </div>
        </div>
      </footer>
    </>
  );
}

// Export all to window so the host App can use them.
Object.assign(window, {
  BxLogo,
  BrynxHeader, BrynxHero, ReportPreview, BrynxContrarian, BrynxProblem,
  BrynxDelivers, BrynxEngines, BrynxHow, BrynxStats, BrynxReplaces,
  BrynxPricing, BrynxFinalCTA, BrynxFooter,
  ECO_ORDER,
});