// gmr-sections-no-geoke.jsx — Linear-style structure (existing graphics)
// adapted to the new genmr-v2 copy. 7 products (5 originals + Geoky + Klenux).

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

const REPLACES = {
  brynx:     'panel research, brand-tracker subscriptions, junior-strategist hours',
  dtwin:     'survey panels, persona slides, recruitment fees',
  marketear: 'enterprise listening seats, weekly analyst reports',
  crewrev:   'sales-tool stacks, agency BDR teams, CRM dashboards',
  influrep:  'creator-vetting agencies, manual due diligence, gut-feel signing',
  geoky:     'rank trackers, manual ChatGPT spot-checks, gut-feel brand monitoring',
  klenux:    'recruiting agencies, incentive budgets, scheduling weeks, five-user studies',
};

// ---- Helpers ----
function MonoBadge({ brand, size = '', showAccent = true, ...rest }) {
  const b = SITE_BRANDS[brand];
  return (
    <span className={`mono-badge ${size}`} {...rest}>
      <img src={MONO_FILES[brand]} alt={b.mono}/>
      {showAccent && <span className="badge-accent" style={{ background: b.accent }}/>}
    </span>
  );
}

// ---- HEADER ----
function LinearHeader() {
  return (
    <header className="linear-header">
      <div className="container">
        <a href="#top" style={{ display: 'inline-flex', alignItems: 'center', gap: 14, textDecoration: 'none' }}>
          <Brand brand="gmr" size="m"/>
        </a>
        <nav>
          <a href="#portfolio">Portfolio</a>
          <a href="#loop">The loop</a>
          <a href="#dna">DNA</a>
          <a href="#contact" className="btn-x">Contact <span className="arrow">→</span></a>
        </nav>
      </div>
    </header>
  );
}

// ---- HERO ----
function Hero() {
  return (
    <section id="top" style={{ position: 'relative', paddingTop: 96, paddingBottom: 96, overflow: 'hidden' }}>
      <div className="ambient"/>
      <div className="container layer col gap-8" style={{ paddingTop: 64 }}>

        <span className="pill-x live" style={{ alignSelf: 'flex-start' }}>
          <span className="dot"/> GMR Inc · AI holding company
        </span>

        <h1 className="t-display reveal" style={{ maxWidth: 1280 }}>
          Agencies sell headcount.<br/>
          <span className="muted">Tools sell dashboards.</span><br/>
          We sell the output.
        </h1>

        <p className="t-lead reveal" style={{ maxWidth: 760 }}>
          We don't license seats. We don't bill hours. We deliver the finished result — Result as a Service. Five AI-native products, one shared audience foundation.
        </p>

        <div className="row gap-3 reveal" style={{ flexWrap: 'wrap' }}>
          <a href="#portfolio" className="btn-x primary">Explore the portfolio <span className="arrow">→</span></a>
          <a href="#contact" className="btn-x">Talk to GMR</a>
        </div>

        {/* Removed stat strip — replaced by RaaS infographic in section below */}
      </div>
    </section>
  );
}

// ---- CONTRARIAN — three models ----
function Contrarian() {
  return (
    <section className="linear-section" id="why" style={{ paddingTop: 96, paddingBottom: 96 }}>
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 64 }}>
        <span className="mono-label" data-num="01">Why GMR exists</span>

        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 16 }}>
          Three ways to win the next agency cycle.<br/>
          <span className="muted">Two of them won't.</span>
        </h2>

        <div className="contrarian reveal-stagger" style={{ marginTop: 40 }}>
          <div className="con-col">
            <span className="con-kicker">The agency model</span>
            <h3 className="con-h">Sell headcount.</h3>
            <p className="con-p">Bill hours. Hire faster than you can scale. Margins compress every year. The client ends up paying for org chart instead of outcomes.</p>
          </div>
          <div className="con-col">
            <span className="con-kicker">The tool model</span>
            <h3 className="con-h">Sell dashboards.</h3>
            <p className="con-p">Ship a SaaS, charge per seat, hope someone logs in. The buyer still has to figure out what to do with the data. The work doesn't get done.</p>
          </div>
          <div className="con-col highlight">
            <span className="con-kicker" style={{ color: '#34D399' }}>The GMR model</span>
            <h3 className="con-h">Sell the output.</h3>
            <p className="con-p">Proprietary AI pipelines do the work end-to-end. The agency ships deliverables — not seats, not screenshots. Result as a Service.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- PORTFOLIO ----
function Portfolio() {
  return (
    <section className="linear-section" id="portfolio">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 80 }}>
        <span className="mono-label" data-num="02">The portfolio</span>

        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 16 }}>
          Seven AI-native products.<br/>
          <span className="muted">One operating group.</span>
        </h2>

        <p className="t-lead reveal" style={{ maxWidth: 800, marginTop: 4 }}>
          Each product is a standalone instrument. Together they form a stack no competitor can replicate.
        </p>

        <div className="reveal-stagger" style={{ marginTop: 32 }}>
          <ProductGrid/>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// PRODUCT GRID — unified 3x3 (7 products + 1 CTA card)
// One micro-animation per product, single visual grammar, accent
// only differs by hue. Linear-tight.
// ============================================================
function ProductGrid() {
  return (
    <div className="pg-grid">
      {PRODUCT_ORDER.map(id => {
        const b = SITE_BRANDS[id];
        return (
          <a key={id} href={b.url} target="_blank" rel="noopener"
             className="pg-card"
             style={{ '--pg-accent': b.accent }}>
            <div className="pg-head">
              <MonoBadge brand={id} size="sm"/>
              <span className={`pill-x ${b.status === 'live' ? 'live' : 'pre'}`}>
                <span className="dot"/>{b.status === 'live' ? 'Live' : 'Soon'}
              </span>
            </div>

            <div className="pg-viz">
              <ProductMotif id={id}/>
            </div>

            <div className="pg-body">
              <h3 className="pg-name">
                <span className="pg-name-accent">{b.long.slice(0, 1)}</span>{b.long.slice(1)}
              </h3>
              <p className="pg-desc">{b.desc}</p>
              <p className="pg-replaces">Replaces · {REPLACES[id]}</p>
            </div>

            <div className="pg-foot">
              <span className="pg-visit">{b.url.replace('https://', '')}</span>
              <span className="pg-arrow">→</span>
            </div>
          </a>
        );
      })}

      {/* 8th cell — CTA for the eighth slot to balance 3x3 */}
      <a href="#contact" className="pg-card pg-card-cta">
        <div className="pg-head">
          <span className="mono-label" data-num="·">Build on GMR</span>
        </div>
        <div className="pg-viz">
          <svg viewBox="0 0 120 80" className="pg-motif" aria-hidden="true">
            <defs>
              <radialGradient id="cta-grad" cx="50%" cy="50%" r="50%">
                <stop offset="0%"  stopColor="#34D399" stopOpacity="0.5"/>
                <stop offset="100%" stopColor="#34D399" stopOpacity="0"/>
              </radialGradient>
            </defs>
            <circle cx="60" cy="40" r="36" fill="url(#cta-grad)">
              <animate attributeName="r" values="32;38;32" dur="3s" repeatCount="indefinite"/>
            </circle>
            <circle cx="60" cy="40" r="3" fill="#34D399"/>
          </svg>
        </div>
        <div className="pg-body">
          <h3 className="pg-name"><span style={{ color: '#34D399' }}>G</span>et in touch</h3>
          <p className="pg-desc">Partner, invest, or build on the GMR stack.</p>
          <p className="pg-replaces">All seven products · one wallet</p>
        </div>
        <div className="pg-foot">
          <span className="pg-visit">hello@genmr.co</span>
          <span className="pg-arrow">→</span>
        </div>
      </a>
    </div>
  );
}

// ============================================================
// PRODUCT MOTIF — one tiny, elegant animated SVG per product.
// All share the same canvas (120×80) and stroke-weight, so the
// grid reads as one family even when the visual changes.
// ============================================================
function ProductMotif({ id }) {
  switch (id) {
    case 'brynx':
      // Stacked bars (market research data)
      return (
        <svg viewBox="0 0 120 80" className="pg-motif" aria-hidden="true">
          {[10, 26, 42, 58, 74, 90].map((x, i) => {
            const h = [22, 38, 28, 56, 44, 32][i];
            return (
              <rect key={i} x={x} y={70 - h} width="14" height={h} rx="1.5">
                <animate attributeName="height"
                  values={`${h * 0.55};${h};${h * 0.55}`}
                  dur="2.4s" begin={`${i * 0.18}s`} repeatCount="indefinite"/>
                <animate attributeName="y"
                  values={`${70 - h * 0.55};${70 - h};${70 - h * 0.55}`}
                  dur="2.4s" begin={`${i * 0.18}s`} repeatCount="indefinite"/>
              </rect>
            );
          })}
        </svg>
      );

    case 'dtwin':
      // Dot grid pulse (audience twins)
      return (
        <svg viewBox="0 0 120 80" className="pg-motif" aria-hidden="true">
          {Array.from({ length: 5 }).map((_, row) =>
            Array.from({ length: 8 }).map((_, col) => {
              const i = row * 8 + col;
              return (
                <circle key={i} cx={14 + col * 13} cy={12 + row * 14} r="2">
                  <animate attributeName="opacity"
                    values="0.25;1;0.25"
                    dur="2.6s" begin={`${(i % 6) * 0.18}s`} repeatCount="indefinite"/>
                </circle>
              );
            })
          )}
        </svg>
      );

    case 'marketear':
      // Listening waveform
      return (
        <svg viewBox="0 0 120 80" className="pg-motif" aria-hidden="true">
          {Array.from({ length: 20 }).map((_, i) => {
            const max = [12, 18, 14, 26, 20, 32, 22, 38, 24, 30, 18, 28, 36, 20, 32, 24, 28, 16, 22, 14][i];
            return (
              <rect key={i} x={3 + i * 6} y={40 - max / 2} width="3" height={max} rx="1.5">
                <animate attributeName="height"
                  values={`${max * 0.3};${max};${max * 0.3}`}
                  dur="1.8s" begin={`${i * 0.08}s`} repeatCount="indefinite"/>
                <animate attributeName="y"
                  values={`${40 - max * 0.15};${40 - max / 2};${40 - max * 0.15}`}
                  dur="1.8s" begin={`${i * 0.08}s`} repeatCount="indefinite"/>
              </rect>
            );
          })}
        </svg>
      );

    case 'crewrev':
      // Chat dots (revenue team in conversation)
      return (
        <svg viewBox="0 0 120 80" className="pg-motif" aria-hidden="true">
          {[42, 56, 70].map((x, i) => (
            <circle key={i} cx={x} cy="40" r="5">
              <animate attributeName="cy"
                values="40;30;40" dur="1.2s"
                begin={`${i * 0.2}s`} repeatCount="indefinite"/>
              <animate attributeName="opacity"
                values="0.4;1;0.4" dur="1.2s"
                begin={`${i * 0.2}s`} repeatCount="indefinite"/>
            </circle>
          ))}
          <rect x="20" y="22" width="80" height="36" rx="18" fill="none" strokeWidth="1.2" opacity="0.4"/>
        </svg>
      );

    case 'influrep':
      // Creator score — rising line over a faint baseline
      return (
        <svg viewBox="0 0 120 80" className="pg-motif" aria-hidden="true">
          <path d="M 6 60 L 24 50 L 42 56 L 60 38 L 78 44 L 96 22 L 114 28"
                fill="none" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <animate attributeName="stroke-dasharray" values="0,300;300,0" dur="3.6s" repeatCount="indefinite"/>
          </path>
          {[6, 24, 42, 60, 78, 96, 114].map((x, i) => {
            const y = [60, 50, 56, 38, 44, 22, 28][i];
            return (
              <circle key={i} cx={x} cy={y} r="2.4">
                <animate attributeName="opacity"
                  values="0;1;1;0" keyTimes="0;0.3;0.7;1"
                  dur="3.6s" begin={`${i * 0.45}s`} repeatCount="indefinite"/>
              </circle>
            );
          })}
        </svg>
      );

    case 'geoky':
      // AI search — query line + 4 engine bars + result pill animating in
      return (
        <svg viewBox="0 0 120 80" className="pg-motif" aria-hidden="true">
          <rect x="8" y="14" width="80" height="6" rx="3" opacity="0.35"/>
          <rect x="92" y="14" width="20" height="6" rx="3" opacity="0.6">
            <animate attributeName="opacity" values="0.6;1;0.6" dur="2s" repeatCount="indefinite"/>
          </rect>
          {[
            { y: 32, w: 92 },
            { y: 44, w: 70 },
            { y: 56, w: 54 },
            { y: 68, w: 38 },
          ].map((b, i) => (
            <rect key={i} x="8" y={b.y} width={b.w} height="4" rx="2">
              <animate attributeName="width"
                values={`${b.w * 0.3};${b.w};${b.w * 0.3}`}
                dur="3s" begin={`${i * 0.25}s`} repeatCount="indefinite"/>
            </rect>
          ))}
        </svg>
      );

    case 'klenux':
      // UX testing — pointer + tap ripple
      return (
        <svg viewBox="0 0 120 80" className="pg-motif" aria-hidden="true">
          <rect x="14" y="14" width="92" height="52" rx="6" fill="none" strokeWidth="1.2" opacity="0.4"/>
          <rect x="22" y="22" width="40" height="6" rx="2" opacity="0.55"/>
          <rect x="22" y="32" width="28" height="4" rx="2" opacity="0.35"/>
          <rect x="22" y="40" width="34" height="4" rx="2" opacity="0.35"/>
          {/* Tap ripple */}
          <circle cx="82" cy="48" r="3">
            <animate attributeName="r" values="3;14;3" dur="2.2s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values="1;0;1" dur="2.2s" repeatCount="indefinite"/>
          </circle>
          <circle cx="82" cy="48" r="3"/>
        </svg>
      );

    default:
      return null;
  }
}

// ---- RAAS INFOGRAPHIC ----
// Visual explainer for "Result as a Service": shows the transformation
// from inputs (seats, hours, tools) into a single shipped deliverable.
function RaaSStrip() {
  return (
    <section className="raas-strip" id="raas">
      <div className="container col gap-7">
        <div className="col gap-4" style={{ alignItems: 'center', textAlign: 'center' }}>
          <span className="mono-label" data-num="·" style={{ color: '#34D399' }}>RaaS · Result as a Service</span>
          <h2 className="t-h1 reveal" style={{ maxWidth: 980, marginTop: 4 }}>
            We don't ship seats.<br/>
            <span className="muted">We ship the deliverable.</span>
          </h2>
          <p className="t-lead reveal" style={{ maxWidth: 720, marginTop: 0 }}>
            Every GMR product replaces hours of work with a finished output — measured, sourced, shippable.
          </p>
        </div>

        {/* The infographic — three "inputs" funnel into one "output" */}
        <div className="raas-infographic reveal" style={{ marginTop: 32 }}>
          <div className="raas-side raas-inputs">
            <span className="raas-side-label">The old way</span>
            <div className="raas-input">
              <span className="raas-input-glyph">⌗</span>
              <div className="col gap-1">
                <span className="raas-input-name">Seats</span>
                <span className="raas-input-desc">Per-user SaaS · licenses</span>
              </div>
            </div>
            <div className="raas-input">
              <span className="raas-input-glyph">⏱</span>
              <div className="col gap-1">
                <span className="raas-input-name">Hours</span>
                <span className="raas-input-desc">Billable headcount · timesheets</span>
              </div>
            </div>
            <div className="raas-input">
              <span className="raas-input-glyph">▦</span>
              <div className="col gap-1">
                <span className="raas-input-name">Dashboards</span>
                <span className="raas-input-desc">Reports nobody reads</span>
              </div>
            </div>
          </div>

          <div className="raas-funnel" aria-hidden="true">
            <svg viewBox="0 0 220 240" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
              <defs>
                <linearGradient id="rg" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%"  stopColor="rgba(228,228,232,0.22)"/>
                  <stop offset="100%" stopColor="rgba(52,211,153,0.55)"/>
                </linearGradient>
              </defs>
              {/* funnel outline */}
              <path d="M 10 30 L 210 30 L 140 130 L 140 230 L 80 230 L 80 130 Z"
                    fill="none" stroke="url(#rg)" strokeWidth="1.5"/>
              {/* particle streams in */}
              <line x1="35"  y1="30" x2="100" y2="130" stroke="rgba(228,228,232,0.25)" strokeWidth="1"/>
              <line x1="110" y1="30" x2="110" y2="130" stroke="rgba(228,228,232,0.25)" strokeWidth="1"/>
              <line x1="185" y1="30" x2="120" y2="130" stroke="rgba(228,228,232,0.25)" strokeWidth="1"/>
              {/* output line down */}
              <line x1="110" y1="130" x2="110" y2="230" stroke="rgba(52,211,153,0.6)" strokeWidth="1.5"/>
              {/* output dot */}
              <circle cx="110" cy="232" r="5" fill="#34D399"/>
              {/* animated dots flowing in */}
              <circle r="3" fill="#E4E4E8">
                <animateMotion dur="2.8s" repeatCount="indefinite" path="M 35 30 L 100 130 L 110 220"/>
                <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="2.8s" repeatCount="indefinite"/>
              </circle>
              <circle r="3" fill="#E4E4E8">
                <animateMotion dur="2.8s" begin="0.9s" repeatCount="indefinite" path="M 110 30 L 110 130 L 110 220"/>
                <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="2.8s" begin="0.9s" repeatCount="indefinite"/>
              </circle>
              <circle r="3" fill="#E4E4E8">
                <animateMotion dur="2.8s" begin="1.8s" repeatCount="indefinite" path="M 185 30 L 120 130 L 110 220"/>
                <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="2.8s" begin="1.8s" repeatCount="indefinite"/>
              </circle>
            </svg>
            <span className="raas-funnel-label">GMR pipeline</span>
          </div>

          <div className="raas-side raas-output">
            <span className="raas-side-label" style={{ color: '#34D399' }}>The GMR way</span>
            <div className="raas-output-card">
              <div className="row between" style={{ alignItems: 'center', marginBottom: 12 }}>
                <span className="raas-output-tag">Deliverable</span>
                <span className="raas-output-status">● Shipped</span>
              </div>
              <div className="col gap-2" style={{ marginBottom: 14 }}>
                <span className="raas-output-title">Q3 brand strategy.pdf</span>
                <span className="raas-output-meta">42 pages · 287 sources cited · 2h turnaround</span>
              </div>
              <div className="raas-output-bar"><div className="raas-output-fill"/></div>
              <span className="raas-output-foot">One output. Sourced. Shippable. Paid by result.</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- THE LOOP ----
function Loop() {
  return (
    <section className="linear-section" id="loop">
      <hr className="section-rule"/>
      <div className="container col gap-5" style={{ paddingTop: 48 }}>
        <span className="mono-label" data-num="03">The loop</span>

        <h2 className="t-h2 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          The unfair advantage<br/>
          <span className="muted">isn't any single product.</span>
        </h2>

        <p className="t-lead reveal" style={{ maxWidth: 980, marginTop: 0 }}>
          It's the loop that connects them. Every GMR product writes into the same audience foundation, and reads from it. Each interaction sharpens the twin. Each sharper twin improves every other product. We call it the Twin Loop.
        </p>

        <div className="reveal" style={{ marginTop: 16 }}>
          <ArchitectureDiagram />
        </div>
      </div>
    </section>
  );
}

// ---- DNA ----
function DNA() {
  const pillars = [
    { num: '01', accent: '#3B82F6', name: 'Frontier models',          copy: 'Model-agnostic by design. Intelligent routing across frontier models. Always state-of-the-art, no vendor lock-in.' },
    { num: '02', accent: '#6B6B80', name: 'Digital twin foundation',  copy: 'Real audiences flow across every product. 100+ probabilistic attributes per twin. Every interaction refines it.' },
    { num: '03', accent: '#34D399', name: 'Chat-native interaction',  copy: 'Natural language is the primary interface. Zero learning curve. Built on the MCP standard.' },
    { num: '04', accent: '#8B5CF6', name: 'Multi-agent pipelines',    copy: '3–10 specialized agents per product. Shared memory. Adversarial quality gates. Not a wrapper — a system.' },
  ];

  return (
    <section className="linear-section" id="dna">
      <hr className="section-rule"/>
      <div className="container col gap-5" style={{ paddingTop: 48 }}>
        <span className="mono-label" data-num="04">The GMR DNA</span>

        <h2 className="t-h2 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Same primitives<br/>
          <span className="muted">under every product.</span>
        </h2>

        <div className="grid grid-2 reveal-stagger" style={{ marginTop: 16, gap: 0 }}>
          {pillars.map(p => (
            <div key={p.num} className="pillar">
              <div className="num-row">
                <span className="num">{p.num}</span>
                <span className="dot" style={{ background: p.accent }}/>
                <div style={{ flex: 1, height: 1, background: 'var(--line)' }}/>
              </div>
              <h3 className="name">{p.name}</h3>
              <p className="copy">{p.copy}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- CONTACT ----
function Contact() {
  return (
    <section className="linear-section" id="contact" style={{ position: 'relative', overflow: 'hidden' }}>
      <hr className="section-rule"/>
      <div className="container col gap-5" style={{ alignItems: 'flex-start', maxWidth: 1100, paddingTop: 48 }}>
        <span className="mono-label" data-num="05">Let's talk</span>

        <h2 className="t-h2 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Want the output, not the tool?<br/>
          <span className="muted">Investing in the model?</span><br/>
          <span className="muted">Building on top of GMR?</span>
        </h2>

        <p className="t-lead reveal">
          Tell us which one — we'll route you to the right person within 24 hours.
        </p>

        <div className="row gap-3 reveal" style={{ flexWrap: 'wrap', marginTop: 4 }}>
          <a href="mailto:hello@genmr.co" className="btn-x primary">hello@genmr.co <span className="arrow">→</span></a>
          <a href="#portfolio" className="btn-x">Explore portfolio</a>
        </div>
      </div>
    </section>
  );
}

// ---- FOOTER ----
function LinearFooter() {
  return (
    <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: 340 }}>
            <Brand brand="gmr" size="m"/>
            <span style={{ color: 'var(--text-4)', fontSize: 13, lineHeight: 1.5 }}>
              AI-native products that deliver results, not tools. Built on audience twins, frontier models, multi-agent pipelines.
            </span>
          </div>

          <div className="row gap-7" style={{ flexWrap: 'wrap' }}>
            <div className="col" style={{ minWidth: 120 }}>
              <span className="group-label">Products</span>
              {PRODUCT_ORDER.map(id => (
                <a key={id} href={SITE_BRANDS[id].url} target="_blank" rel="noopener">{SITE_BRANDS[id].long}</a>
              ))}
            </div>
            <div className="col" style={{ minWidth: 110 }}>
              <span className="group-label">Company</span>
              <a href="#top">About</a>
              <a href="#loop">The loop</a>
              <a href="#contact">Contact</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">© GMR Inc · {new Date().getFullYear()} · San Francisco, CA</span>
          <span className="mono">genmr.co</span>
        </div>
      </div>
    </footer>
  );
}

// ---- ARCHITECTURE DIAGRAM ----
// All 7 products as peers; the audience twin is the shared foundation.
function ArchitectureDiagram() {
  const products = [
    { id: 'dtwin',     label: 'Audience twins',   role: 'intel' },
    { id: 'brynx',     label: 'Market research',  role: 'intel' },
    { id: 'marketear', label: 'Social listening', role: 'intel' },
    { id: 'influrep',  label: 'Creator intel',    role: 'intel' },
    { id: 'geoky',     label: 'AI search intel',  role: 'intel' },
    { id: 'klenux',    label: 'UX testing',       role: 'intel' },
    { id: 'crewrev',   label: 'Revenue team',     role: 'exec' },
  ];
  return (
    <div className="arch">
      <div className="arch-inner">
        <span className="arch-tag">GMR portfolio · 7 peer products</span>

        <div className="arch-grid" style={{ gridTemplateColumns: 'repeat(7, 1fr)' }}>
          {products.map(p => {
            const b = SITE_BRANDS[p.id];
            return (
              <a key={p.id} href={b.url} target="_blank" rel="noopener"
                 className={`arch-node ${p.role === 'exec' ? 'exec' : 'intel'}`}>
                <span className="arch-pin" style={{ background: b.accent }}/>
                <span className="arch-mono"><img src={MONO_FILES[p.id]} alt={b.mono}/></span>
                <span className="arch-name">{p.label}</span>
                <span className="arch-role">{p.role === 'exec' ? 'execution' : 'intelligence'}</span>
              </a>
            );
          })}
        </div>

        <div className="arch-feed" style={{ gridTemplateColumns: 'repeat(7, 1fr)' }}>
          <div className="feed-line"/><div className="feed-line"/><div className="feed-line"/>
          <div className="feed-line"/><div className="feed-line"/><div className="feed-line"/>
          <div className="feed-line"/>
        </div>

        <div className="arch-foundation">
          <span className="label">Audience twin · shared foundation</span>
          <span className="desc">Every interaction refines the twin. Every refined twin improves every product.</span>
        </div>

        <div className="arch-legend">
          <span className="item"><span className="swatch"/>Intelligence · 6 products</span>
          <span className="item"><span className="swatch exec"/>Execution · 1 product</span>
        </div>
      </div>
    </div>
  );
}

// ---- CONCEPT TILES (illustrative — 5 products, no GeoKe) ----
function ConceptTiles() {
  return (
    <div className="grid grid-2" style={{ gap: 16 }}>
      <div className="concept-tile">
        <span className="tile-eyebrow" style={{ color: '#6B6B80' }}>DTwin · audience twins</span>
        <h3>500 synthetic respondents, no panel.</h3>
        <p>~100 probabilistic attributes per twin. 60+ countries. Zero PII. Always interactive.</p>
        <div className="viz-twins">
          {Array.from({ length: 18 }).map((_, i) => (
            <div key={i} className={`viz-twin ${[3, 8, 14].includes(i) ? 'accent' : ''}`}/>
          ))}
        </div>
      </div>

      <div className="concept-tile">
        <span className="tile-eyebrow" style={{ color: '#34D399' }}>CrewRev · revenue team</span>
        <h3>One conversation. A complete team.</h3>
        <p>Six autonomous agents run go-to-market through 33 MCP tools — all answered in chat.</p>
        <div className="viz-chat" style={{ marginTop: 16 }}>
          <div className="viz-msg"><span className="who user">@founder</span><span className="text muted">how are we doing this week on client X?</span></div>
          <div className="viz-msg"><span className="who">@cro</span><span className="text">42 MQLs ↑12% · 3 closed-won · pipeline +$84k.</span></div>
          <div className="viz-msg"><span className="who">@sdr</span><span className="text">Campaign 219 hit 3.1% CTR — top quartile.<span className="viz-cursor"/></span></div>
        </div>
      </div>

      <div className="concept-tile">
        <span className="tile-eyebrow" style={{ color: '#3B82F6' }}>Brynx · market research</span>
        <h3>2 hours, 500+ sources, one report.</h3>
        <p>Three engines — Research, Pulse, Strategy — run in parallel. Source-cited. Living.</p>
        <div className="viz-grid">
          {Array.from({ length: 24 }).map((_, i) => {
            const v = (i * 7) % 11;
            const cls = v > 8 ? 'b3' : v > 5 ? 'b2' : v > 2 ? 'b1' : '';
            return <div key={i} className={`viz-cell ${cls}`}/>;
          })}
        </div>
      </div>

      <div className="concept-tile">
        <span className="tile-eyebrow" style={{ color: '#8B5CF6' }}>Marketear · social listening</span>
        <h3>From thousands of posts to 3 insights.</h3>
        <p>A 5-agent pipeline reads, clusters, interprets — and writes the report you'd write at 2am.</p>
        <div className="viz-wave">
          {[0.3, 0.5, 0.7, 0.4, 0.9, 0.6, 0.8, 0.5, 0.7, 0.95, 0.6, 0.4, 0.55, 0.7, 0.85, 0.5, 0.65, 0.8, 0.4, 0.6, 0.75, 0.5, 0.9, 0.65].map((h, i) => (
            <div key={i} className="viz-wave-bar" style={{ height: `${h * 100}%`, animationDelay: `${i * 0.08}s` }}/>
          ))}
        </div>
      </div>

      <div className="concept-tile">
        <span className="tile-eyebrow" style={{ color: '#F59E0B', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
          InfluRep · creator intel
          <span style={{
            fontFamily: 'ui-monospace, monospace', fontSize: 9, letterSpacing: '0.08em',
            padding: '2px 7px', borderRadius: 999,
            border: '1px solid rgba(245,158,11,0.4)', background: 'rgba(245,158,11,0.08)',
            color: '#F59E0B', textTransform: 'uppercase',
          }}>Coming soon</span>
        </span>
        <h3>Due diligence in two hours, not two weeks.</h3>
        <p>Public posts → strategic insight. Sentiment, tone, risk, brand fit, competitor mapping.</p>
        <div className="viz-creators">
          <div className="viz-creator"/>
          <div className="viz-creator"/>
          <div className="viz-creator"/>
          <div className="viz-creator"/>
          <div className="viz-creator"/>
          <div className="viz-creator"/>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  MonoBadge, LinearHeader, Hero, Contrarian, Portfolio, RaaSStrip, Loop, DNA, Contact, LinearFooter,
  ArchitectureDiagram, ConceptTiles,
  ProductGrid, ProductMotif,
  PRODUCT_ORDER,
});