/* Lojo landing — the product, shown rather than described.

   TheLoop        scan → benchmark → fix → prove, the four stages
   ProductTour    tabbed walkthrough with mock-ups built from the real report's
                  visual language (CircadiaZen sample, labelled as such)
   FeatureGrid    six capabilities at a glance
   ForAgencies    the agency workspace

   Every number in a mock is sample data for a demo business; the copy
   says so where it appears. */

const LOOP = [
  { n: '01', icon: 'search', t: 'Scan', h: 'We read your site the way AI does.',
    d: 'No JavaScript, no cookies, just what the server sends. The homepage, your main navigation and the pages buyers reach. Free, in about two minutes.' },
  { n: '02', icon: 'bot', t: 'Benchmark', h: 'We ask the engines, out loud.',
    d: 'Forty buyer questions in your category, put to ChatGPT, Perplexity, Claude, Gemini and Google AI Overviews, three times each. Who gets named. Who gets cited. Where you lose.' },
  { n: '03', icon: 'zap', t: 'Fix', h: 'Every item ships with the fix.',
    d: 'A prioritised plan with the owner, the effort and the files to paste in: validated schema, the robots.txt diff, llms.txt, FAQ and title drafts. Facts only, placeholders for the rest.' },
  { n: '04', icon: 'shield', t: 'Prove', h: 'The plan checks itself.',
    d: 'A re-scan verifies each fix on the live site and dates it. Connect analytics and see the visits and orders that arrived from an AI assistant, as a lower bound, never a claim.' },
];

function TheLoop() {
  return (
    <section id="how" className="section" style={{ scrollMarginTop: 80 }}>
      <div className="wrap">
        <SectionHead over="How it works" center title='From invisible to <span class="hl-accent">recommended</span>, in one loop.'
          sub="Scan, benchmark, fix, prove. Then run it again. Each step feeds the next, and nothing is claimed that was not measured." />
        <div className="loop-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'clamp(14px,1.8vw,22px)' }}>
          {LOOP.map((s, i) =>
          <div key={s.n} className="card loop-card" style={{ padding: 'clamp(20px,2.4vw,28px)', position: 'relative', overflow: 'hidden' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
              <span style={{ width: 40, height: 40, borderRadius: 12, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                background: 'var(--accent-bg)', color: 'var(--accent)', border: '1px solid color-mix(in oklab, var(--accent) 35%, transparent)' }}><Icon name={s.icon} size={19} /></span>
              <span className="mono" style={{ fontSize: 12, color: 'var(--fg-subtle)', letterSpacing: '0.1em' }}>{s.n}</span>
            </div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--accent-deep)', marginBottom: 8 }}>{s.t}</div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(20px,1.8vw,24px)', fontWeight: 600, margin: '0 0 10px', lineHeight: 1.2, letterSpacing: '-0.01em' }}>{s.h}</h3>
            <p style={{ margin: 0, color: 'var(--fg-muted)', fontSize: 15, lineHeight: 1.6 }}>{s.d}</p>
            {i < LOOP.length - 1 && <span className="loop-arrow" style={{ position: 'absolute', right: -13, top: '50%', transform: 'translateY(-50%)', color: 'var(--line-strong)', zIndex: 2 }}><Icon name="arrow-right" size={22} /></span>}
          </div>)}
        </div>
      </div>
    </section>);
}

/* ---------- mock-ups ---------- */

const mockFrame = { background: 'var(--navy-2)', border: '1px solid var(--line-strong)', borderRadius: 'var(--r-xl)', boxShadow: 'var(--sh-float)', overflow: 'hidden' };
const mockHead = { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, padding: '12px 16px', borderBottom: '1px solid var(--line)', background: 'var(--navy)' };
const mockTitle = { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-subtle)' };
const sampleTag = <span className="mono" style={{ fontSize: 10, letterSpacing: '0.08em', color: 'var(--fg-subtle)', border: '1px solid var(--line)', borderRadius: 999, padding: '3px 8px' }}>SAMPLE · CIRCADIAZEN</span>;

function MockPill({ tone, children }) {
  return <span className="mono" style={{ fontSize: 10.5, padding: '3px 8px', borderRadius: 999, border: `1px solid color-mix(in oklab, var(--${tone}) 40%, transparent)`, color: `var(--${tone})`, whiteSpace: 'nowrap' }}>{children}</span>;
}

function BenchmarkMock() {
  const rows = [
    ['ChatGPT', 'gpt-5', 0.33, 0.17, 0.5, '#3'], ['Perplexity', 'sonar', 0.0, 0, 0, '—'],
    ['Claude', 'claude-sonnet', 0.58, 0.5, 0.67, '#2'], ['Gemini', 'gemini-2.5', 0.42, 0.33, 0.5, '#2'], ['Google AI Overviews', 'serpapi', 0.17, 0.17, 0.17, '#4'],
  ];
  const pct = (x) => Math.round(x * 100) + '%';
  return (
    <div style={mockFrame}>
      <div style={mockHead}><span style={mockTitle}>Benchmark · 40 prompts × 5 engines × 3 runs</span>{sampleTag}</div>
      <div style={{ padding: '16px 16px 6px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 14 }} className="mock-tiles">
          {[['Named in answers', '30%', 'range 23–37% · 600 answers'], ['Site cited', '18%', 'range 13–22%'], ['Share of voice', '11%', '66 of 600 brand mentions']].map(([l, v, n]) =>
          <div key={l} style={{ padding: '12px 14px', borderRadius: 12, background: 'var(--navy)', border: '1px solid var(--line)' }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.09em', textTransform: 'uppercase', color: 'var(--fg-subtle)' }}>{l}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, lineHeight: 1, margin: '6px 0 4px' }}>{v}</div>
            <div style={{ fontSize: 11.5, color: 'var(--fg-muted)' }}>{n}</div>
          </div>)}
        </div>
        <div style={{ borderTop: '1px solid var(--line)' }}>
          {rows.map(([e, m, v, lo, hi, pos]) =>
          <div key={e} style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 150px) minmax(0, 1fr) 92px 40px', alignItems: 'center', gap: 12, padding: '9px 0', borderBottom: '1px solid var(--line)', fontSize: 13 }}>
            <div><div style={{ fontWeight: 600 }}>{e}</div><div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-subtle)' }}>{m}</div></div>
            <div style={{ position: 'relative', height: 10, borderRadius: 999, background: 'var(--line)' }}>
              <div style={{ position: 'absolute', left: `${lo * 100}%`, width: `${Math.max(2, (hi - lo) * 100)}%`, top: 0, bottom: 0, borderRadius: 999, background: 'color-mix(in oklab, var(--accent) 30%, transparent)' }}></div>
              <div style={{ position: 'absolute', left: `calc(${v * 100}% - 5px)`, top: -1, width: 12, height: 12, borderRadius: '50%', background: v ? 'var(--accent)' : 'var(--crit)', boxShadow: '0 0 10px var(--accent-glow)' }}></div>
            </div>
            <div className="mono" style={{ fontSize: 11.5, color: 'var(--fg-muted)', textAlign: 'right' }}>{pct(v)}{hi > lo ? ` (${pct(lo)}–${pct(hi)})` : ''}</div>
            <div className="mono" style={{ fontSize: 11.5, color: 'var(--fg-subtle)', textAlign: 'right' }}>{pos}</div>
          </div>)}
        </div>
        <div style={{ fontSize: 11.5, color: 'var(--fg-subtle)', lineHeight: 1.6, padding: '10px 0 8px' }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: '0.08em' }}>METHOD · </span>Answers via each engine's API with web search enabled, 3 runs per prompt. The range is the spread across runs; a wide one is itself a finding.
        </div>
      </div>
    </div>);
}

function Highlight({ children, tone }) {
  return <mark style={{ background: `color-mix(in oklab, var(--${tone}) 28%, transparent)`, color: 'var(--fg)', borderRadius: 3, padding: '0 3px', fontWeight: 600 }}>{children}</mark>;
}

function SnapshotMock() {
  const cards = [
    { e: 'ChatGPT', named: false, text: <span>For a science-backed option most people point to <Highlight tone="accent">Momentous</Highlight> or <Highlight tone="accent">Thorne</Highlight>; both publish third-party testing.</span>, cites: 'momentous.com, thorne.com' },
    { e: 'Perplexity', named: true, pos: 2, text: <span><Highlight tone="accent">Thorne</Highlight> leads on clinical citations; <Highlight tone="good">CircadiaZen</Highlight> is a close second with a published assay per lot.</span>, cites: 'thorne.com, circadiazen.com' },
    { e: 'Claude', named: true, pos: 1, text: <span><Highlight tone="good">CircadiaZen</Highlight> publishes its advisory board and lot assays, which is unusual. Alternatives: <Highlight tone="accent">Momentous</Highlight>.</span>, cites: 'circadiazen.com, momentous.com' },
  ];
  return (
    <div style={mockFrame}>
      <div style={mockHead}><span style={mockTitle}>Live answers · one question, every engine, now</span>{sampleTag}</div>
      <div style={{ padding: 16 }}>
        <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
          <div style={{ flex: 1, padding: '10px 12px', borderRadius: 10, background: 'var(--navy)', border: '1px solid var(--line-strong)', fontSize: 13.5, color: 'var(--fg)' }}>best science-backed sleep supplement for new parents</div>
          <span className="btn btn-primary" style={{ padding: '8px 14px', fontSize: 12.5, pointerEvents: 'none' }}>Ask the engines now</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }} className="mock-tiles">
          {cards.map((c) =>
          <div key={c.e} style={{ padding: '12px 13px', borderRadius: 12, background: 'var(--navy)', border: '1px solid var(--line)', minWidth: 0 }}>
            <div style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap', marginBottom: 8 }}>
              <span style={{ fontSize: 13, fontWeight: 600 }}>{c.e}</span>
              <MockPill tone={c.named ? 'good' : 'warn'}>{c.named ? `named #${c.pos}` : 'not named'}</MockPill>
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--fg-muted)', lineHeight: 1.6 }}>{c.text}</div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--fg-subtle)', marginTop: 8 }}>cites: {c.cites}</div>
          </div>)}
        </div>
        <div style={{ fontSize: 11.5, color: 'var(--fg-subtle)', marginTop: 12, lineHeight: 1.6 }}>Saved to the report as evidence. Agencies open this live in front of a client.</div>
      </div>
    </div>);
}

function PlanMock() {
  const items = [
    { id: 'A1', t: 'Allow the answering AI crawlers in robots.txt', s: 'verified', found: 'none of OAI-SearchBot, PerplexityBot, ClaudeBot is disallowed (checked 2026-10-07)', file: 'robots.txt.diff', meta: 'Fix now · Developer · hours' },
    { id: 'A2', t: 'Add Organization schema with sameAs to every template', s: 'open', found: 'no Organization JSON-LD on the page (found WebSite)', file: 'organization.jsonld', fileTag: 'validates · 4 to fill in', meta: 'This quarter · Developer · days' },
    { id: 'A3', t: 'Answer the top twelve buyer questions on the FAQ page', s: 'manual', found: '', file: 'faq.md', fileTag: '12 to fill in', meta: 'This quarter · Marketing · days' },
  ];
  const tone = { verified: 'good', open: 'warn', manual: 'fg-subtle' };
  const label = { verified: 'verified on the site', open: 'not yet on the site', manual: 'checked by a person' };
  return (
    <div style={mockFrame}>
      <div style={mockHead}><span style={mockTitle}>Action plan · re-scanned 2026-10-07 · 1/2 verified</span>{sampleTag}</div>
      <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((a) =>
        <div key={a.id} style={{ padding: '12px 14px', borderRadius: 12, background: 'var(--navy)', border: '1px solid var(--line)', opacity: a.s === 'verified' ? 0.75 : 1 }}>
          <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <span style={{ width: 16, height: 16, borderRadius: 4, border: '1.5px solid var(--line-strong)', marginTop: 2, flex: '0 0 auto', background: a.s === 'verified' ? 'var(--accent)' : 'transparent', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--on-accent)' }}>{a.s === 'verified' && <Icon name="check" size={12} stroke={3} />}</span>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-subtle)', marginBottom: 3 }}>{a.id} · {a.meta}</div>
              <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 1.35, textDecoration: a.s === 'verified' ? 'line-through' : 'none' }}>{a.t}</div>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center', marginTop: 7 }}>
                <MockPill tone={tone[a.s]}>{label[a.s]}</MockPill>
                <span className="mono" style={{ fontSize: 10.5, padding: '3px 8px', borderRadius: 999, background: 'var(--navy-3)', border: '1px solid var(--line)', color: 'var(--fg-muted)' }}>⇩ {a.file}{a.fileTag ? ` · ${a.fileTag}` : ''}</span>
              </div>
              {a.found && <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 6 }}><span className="mono" style={{ fontSize: 10, color: 'var(--fg-subtle)', letterSpacing: '0.06em' }}>FOUND · </span>{a.found}</div>}
            </div>
          </div>
        </div>)}
        <div style={{ fontSize: 11.5, color: 'var(--fg-subtle)', lineHeight: 1.6 }}>Ticks by hand are never undone by a re-scan; a disagreement is flagged instead. Placeholders like <span className="mono" style={{ color: 'var(--warn)' }}>{'{{FOUNDING_YEAR}}'}</span> mark what only you can say.</div>
      </div>
    </div>);
}

function TrafficMock() {
  const weeks = [4, 6, 5, 9, 8, 12, 15, 14, 19, 23, 22, 28];
  const orders = [0, 1, 0, 1, 1, 2, 2, 3, 3, 4, 3, 5];
  const max = 34;
  const w = 560, h = 120, pad = 10, bw = (w - pad * 2) / weeks.length - 6;
  return (
    <div style={mockFrame}>
      <div style={mockHead}><span style={mockTitle}>AI traffic · 90 days · lower bound</span>{sampleTag}</div>
      <div style={{ padding: 16 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 12 }} className="mock-tiles">
          {[['AI-referred sessions', '165', '5.9% of all sessions'], ['Orders from AI', '25', '6.7% of all orders'], ['Revenue from AI', '$1,840', 'Shopify, refunds excluded']].map(([l, v, n]) =>
          <div key={l} style={{ padding: '12px 14px', borderRadius: 12, background: 'var(--navy)', border: '1px solid var(--line)' }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.09em', textTransform: 'uppercase', color: 'var(--fg-subtle)' }}>{l}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, lineHeight: 1, margin: '6px 0 4px' }}>{v}</div>
            <div style={{ fontSize: 11.5, color: 'var(--fg-muted)' }}>{n}</div>
          </div>)}
        </div>
        <svg viewBox={`0 0 ${w} ${h + 26}`} width="100%" style={{ display: 'block' }} role="img" aria-label="AI-referred sessions per week, sample">
          {weeks.map((s, i) => {
            const x = pad + i * ((w - pad * 2) / weeks.length), hs = (s / max) * h, ho = (orders[i] / max) * h;
            return (
              <g key={i}>
                <rect x={x} y={pad + h - hs} width={bw} height={hs} fill="var(--accent)" opacity="0.85" rx="2" />
                {orders[i] > 0 && <rect x={x} y={pad + h - hs - ho} width={bw} height={ho} fill="var(--good)" rx="2" />}
                {(i === 5 || i === 8) && <g><line x1={x + bw / 2} x2={x + bw / 2} y1={pad - 6} y2={pad + h} stroke="var(--warn)" strokeDasharray="3 3" /><circle cx={x + bw / 2} cy={pad - 8} r="4.5" fill="var(--warn)" /></g>}
              </g>);
          })}
          <text x={pad} y={h + 24} fontSize="10" fill="var(--fg-subtle)" fontFamily="var(--font-mono)">Jul</text>
          <text x={w - pad - 20} y={h + 24} fontSize="10" fill="var(--fg-subtle)" fontFamily="var(--font-mono)">Sep</text>
        </svg>
        <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-subtle)', display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 4 }}>
          <span><span style={{ display: 'inline-block', width: 9, height: 9, background: 'var(--accent)', marginRight: 5, verticalAlign: 'middle' }}></span>AI-referred sessions</span>
          <span><span style={{ display: 'inline-block', width: 9, height: 9, background: 'var(--good)', marginRight: 5, verticalAlign: 'middle' }}></span>orders</span>
          <span><span style={{ display: 'inline-block', width: 9, height: 9, borderRadius: 5, background: 'var(--warn)', marginRight: 5, verticalAlign: 'middle' }}></span>a fix was verified that week</span>
        </div>
        <div style={{ fontSize: 11.5, color: 'var(--fg-subtle)', marginTop: 10, lineHeight: 1.6 }}>From your own GA4 and Shopify. Only visits whose referrer named an assistant count, so the real figure is at least this. Markers are dates, not causes.</div>
      </div>
    </div>);
}

/* ---------- the tour ---------- */

const TOUR = [
  { key: 'benchmark', tab: 'Benchmark', over: 'Measured, never guessed', title: 'Know exactly how often AI names you.',
    points: ['Forty buyer questions, written for your category, editable before a run', 'ChatGPT, Perplexity, Claude, Gemini and Google AI Overviews, three runs each', 'Every rate with its sample size and the range across runs', 'Which competitors get named instead, and on which questions'],
    mock: BenchmarkMock },
  { key: 'answers', tab: 'Live answers', over: 'Evidence, not opinion', title: 'See the actual answer, with your name in it. Or not.',
    points: ['Ask any question, get every engine side by side in a minute', 'You and your competitors highlighted in the text, citations listed', 'Saved to the report as dated evidence', 'Pitch mode for agencies: run it live in the meeting'],
    mock: SnapshotMock },
  { key: 'plan', tab: 'Action plan', over: 'Ships with the fix', title: 'A plan that checks itself off.',
    points: ['Prioritised items with owner, effort and a done-when', 'Validated JSON-LD, the robots.txt diff, llms.txt, FAQ and title drafts, ready to paste', 'A re-scan verifies each item on the live site and records the evidence', 'Nothing invented: anything only you know is a highlighted placeholder'],
    mock: PlanMock },
  { key: 'traffic', tab: 'AI traffic', over: 'Honest attribution', title: 'Then watch the visits and orders arrive.',
    points: ['Connect GA4 and Shopify in two steps; credentials encrypted, never shown again', 'Sessions, key events, orders and revenue by assistant and by week', 'Labelled a lower bound, because assistants hide more than they show', 'Verified fixes marked on the timeline, as dates, never as causes'],
    mock: TrafficMock },
];

function ProductTour() {
  const [active, setActive] = React.useState(0);
  const t = TOUR[active];
  const Mock = t.mock;
  return (
    <section id="inside" className="section" style={{ background: 'var(--navy)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', scrollMarginTop: 80 }}>
      <div className="wrap">
        <SectionHead over="Inside the full report" center title='Four things no SEO tool can tell you.'
          sub="Because they are measured against the engines themselves, on your site, and checked again after you fix them." />
        <div className="tour-tabs" role="tablist" style={{ display: 'flex', gap: 6, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 'clamp(24px,3vw,36px)' }}>
          {TOUR.map((x, i) =>
          <button key={x.key} role="tab" aria-selected={i === active} onClick={() => setActive(i)} className={'tour-tab' + (i === active ? ' on' : '')}>
            <span className="mono" style={{ fontSize: 10.5, opacity: 0.7, marginRight: 8 }}>0{i + 1}</span>{x.tab}
          </button>)}
        </div>
        <div className="tour-body" style={{ display: 'grid', gridTemplateColumns: 'minmax(280px, 0.8fr) minmax(0, 1.3fr)', gap: 'clamp(24px,4vw,56px)', alignItems: 'center' }}>
          <div key={t.key} className="reveal in">
            <div className="overline" style={{ marginBottom: 12 }}>{t.over}</div>
            <h3 className="display" style={{ fontSize: 'clamp(26px,3vw,40px)', margin: '0 0 18px', lineHeight: 1.1 }}>{t.title}</h3>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
              {t.points.map((p) =>
              <li key={p} style={{ display: 'flex', gap: 10, fontSize: 15.5, color: 'var(--fg)', lineHeight: 1.5 }}>
                <span style={{ color: 'var(--accent)', flex: '0 0 auto', marginTop: 3 }}><Icon name="check" size={16} stroke={2.6} /></span>{p}
              </li>)}
            </ul>
            <div style={{ display: 'flex', gap: 10, marginTop: 24, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={() => document.getElementById('audit')?.scrollIntoView({ behavior: 'smooth', block: 'center' })}>Start with the free report <Icon name="arrow-right" size={17} /></button>
              <button className="btn btn-ghost" onClick={() => setActive((active + 1) % TOUR.length)}>Next: {TOUR[(active + 1) % TOUR.length].tab}</button>
            </div>
          </div>
          <div key={'m' + t.key} className="reveal in" style={{ minWidth: 0 }}><Mock /></div>
        </div>
      </div>
    </section>);
}

/* ---------- at a glance ---------- */

const FEATURES = [
  { icon: 'eye', t: 'See what AI sees', d: 'The raw page an answer engine gets: what renders, what is blocked, what it cannot read.' },
  { icon: 'bot', t: 'Named or not, by engine', d: 'Mention and citation rates per engine, per buying stage, per question cluster, with ranges.' },
  { icon: 'globe', t: 'Where competitors win', d: 'The exact questions where a rival is named and you are not, with the answer that did it.' },
  { icon: 'doc', t: 'Files, not advice', d: 'Validated schema, a robots.txt diff that touches only AI bots, llms.txt, FAQ and meta drafts.' },
  { icon: 'shield', t: 'Verified on the live site', d: 'Each fix re-checked against your site with evidence and a date. Regressions get flagged.' },
  { icon: 'cart', t: 'Visits and orders from AI', d: 'GA4 and Shopify, by assistant and week, labelled as the lower bound it is.' },
];

function FeatureGrid() {
  return (
    <section id="features" className="section" style={{ scrollMarginTop: 80 }}>
      <div className="wrap">
        <SectionHead over="At a glance" center title='Everything a buyer-facing team needs<br>to win the AI answer.' />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'clamp(14px,1.8vw,22px)' }}>
          {FEATURES.map((f) =>
          <div key={f.t} className="card feature-card" style={{ padding: 'clamp(20px,2.4vw,28px)' }}>
            <span style={{ display: 'inline-flex', width: 38, height: 38, borderRadius: 11, alignItems: 'center', justifyContent: 'center', background: 'var(--navy-3)', border: '1px solid var(--line-strong)', color: 'var(--accent)', marginBottom: 14 }}><Icon name={f.icon} size={18} /></span>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 21, fontWeight: 600, margin: '0 0 8px', letterSpacing: '-0.01em' }}>{f.t}</h3>
            <p style={{ margin: 0, color: 'var(--fg-muted)', fontSize: 14.5, lineHeight: 1.6 }}>{f.d}</p>
          </div>)}
        </div>
      </div>
    </section>);
}

/* ---------- agencies ---------- */

function ForAgencies() {
  const perks = [
    ['Your clients, one workspace', 'Every client you bring, with its report, access code, benchmark and re-scan. Hand the client their code when you are ready.'],
    ['Pitch mode', 'Ask the engines a buyer question live, in the meeting, with the client and their competitors highlighted. It is saved as evidence.'],
    ['A proposal, drafted', 'Each full report for an agency carries a proposal in your voice: opportunities, phases, price bands from your day rate.'],
    ['Your keys, your engines', 'Claude is included. Add your own OpenAI, Perplexity, Gemini or SerpApi keys and every client run uses them, billed to you.'],
  ];
  return (
    <section id="agencies" className="section" style={{ background: 'var(--navy)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', scrollMarginTop: 80 }}>
      <div className="wrap">
        <div className="agency-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 'clamp(24px,4vw,56px)', alignItems: 'center' }}>
          <div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', marginBottom: 14 }}>
              <div className="overline">For agencies and service providers</div>
              <span className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '3px 8px', borderRadius: 999, border: '1px solid var(--line-strong)', color: 'var(--fg-muted)' }}>Beta</span>
            </div>
            <h2 className="display" style={{ fontSize: 'clamp(30px,4vw,52px)', margin: '0 0 16px' }}>Run it for every client.<br /><span className="hl-accent">Sell the fix, not the audit.</span></h2>
            <p className="lede" style={{ margin: '0 0 24px', maxWidth: 520 }}>Web, SEO, design and automation shops use Lojo to open the conversation with a measured problem and close it with a plan the client can see working.</p>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <a href="agency/" className="btn btn-primary">Run a client's free report <Icon name="arrow-right" size={17} /></a>
              <a href="agency/admin/?signup=1" className="btn btn-ghost">Create an agency account</a>
              <a href="agency/admin/" className="btn btn-ghost">Sign in</a>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }} className="agency-perks">
            {perks.map(([t, d]) =>
            <div key={t} className="card" style={{ padding: '18px 18px', background: 'var(--navy-2)' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 600, marginBottom: 6, letterSpacing: '-0.01em' }}>{t}</div>
              <div style={{ fontSize: 13.5, color: 'var(--fg-muted)', lineHeight: 1.6 }}>{d}</div>
            </div>)}
          </div>
        </div>
      </div>
    </section>);
}

/* ---------- the platform: what runs today, what is coming ---------- */

const MODULES = [
  { id: 'visibility', t: 'AI visibility', status: 'live', d: 'How AI reads your site, whether it names you, and the fixes in order. The entry point: free report in minutes, full report within 24 hours.', href: '#audit', cta: 'Get your free report' },
  { id: 'stack', t: 'Stack intelligence', status: 'beta', d: 'Your software, what it costs, which seats sit idle, what overlaps, and where an agent could take the work. Upload a CSV, get recommendations with the money shown.', href: '/app/?demo=1', cta: 'Explore the demo' },
  { id: 'execute', t: 'Execute', status: 'beta', d: 'Opportunities with options compared, approvals with reasons, actuals against forecast, and a roadmap with owners. Every figure traceable to its inputs.', href: '/app/?demo=1&m=execute', cta: 'See the ledger' },
  { id: 'operations', t: 'Operations', status: 'soon', d: 'Process mapping, where an agent sits in each workflow and where a person approves, and redesigns handed to Execute.' },
  { id: 'workforce', t: 'Workforce', status: 'soon', d: 'Roles mapped to capabilities, organization scenarios as automation lands, transition plans. Never individual evaluation or pay decisions.' },
  { id: 'strategy', t: 'Strategy', status: 'soon', d: 'The opportunity ledger under several assumption sets, operating-model scenarios, and the P&L lines each initiative moves.' },
  { id: 'mna', t: 'M&A and NewCo', status: 'soon', d: 'Two organizations assessed the same way, overlapping stacks and contracts reconciled, synergies tracked as opportunities with actuals.' },
  { id: 'portfolio', t: 'Portfolio', status: 'soon', d: 'A fund workspace that sees what each portfolio company shares: stack, spend, opportunities, EBITDA levers, with consent recorded.' },
];
const STATUS_LABEL = { live: 'Live', beta: 'Beta · in the workspace', soon: 'Coming soon · demo ready' };

function PlatformModules() {
  return (
    <section id="platform" className="section" style={{ background: 'var(--navy)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', scrollMarginTop: 80 }}>
      <div className="wrap">
        <SectionHead over="The platform" center
          title='AI visibility gets you in the door.<br>The rest of <span class="hl-accent">Lojo</span> runs the business.'
          sub="One platform, built module by module. Each one is useful on its own; together they describe the business you are today and the one you should become. Here is what is live, what is in beta, and what is coming." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: 'clamp(12px,1.6vw,18px)' }}>
          {MODULES.map((m) =>
          <div key={m.id} className="card" style={{ padding: 'clamp(18px,2.2vw,24px)', display: 'flex', flexDirection: 'column',
            background: m.status === 'soon' ? 'transparent' : 'var(--navy-2)', borderStyle: m.status === 'soon' ? 'dashed' : 'solid',
            borderColor: m.status === 'live' ? 'var(--accent)' : 'var(--line-strong)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <span className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '3px 8px', borderRadius: 999, border: '1px solid',
                color: m.status === 'live' ? 'var(--accent)' : m.status === 'beta' ? 'var(--warn)' : 'var(--fg-subtle)',
                borderColor: m.status === 'live' ? 'var(--accent)' : m.status === 'beta' ? 'color-mix(in oklab, var(--warn) 50%, transparent)' : 'var(--line-strong)' }}>{STATUS_LABEL[m.status]}</span>
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 21, fontWeight: 600, margin: '0 0 8px', letterSpacing: '-0.01em', color: m.status === 'soon' ? 'var(--fg-muted)' : 'var(--fg)' }}>{m.t}</h3>
            <p style={{ margin: '0 0 14px', color: m.status === 'soon' ? 'var(--fg-subtle)' : 'var(--fg-muted)', fontSize: 14, lineHeight: 1.6, flex: 1 }}>{m.d}</p>
            {m.href ? <a href={m.href} style={{ color: 'var(--accent)', fontSize: 13.5, fontWeight: 600, textDecoration: 'none' }}>{m.cta} →</a>
              : <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <a href={'/app/?demo=1&m=' + m.id} style={{ color: 'var(--accent)', fontSize: 13.5, fontWeight: 600, textDecoration: 'none' }}>See the demo →</a>
                  <a href={'/app/?request=' + m.id} style={{ color: 'var(--fg-muted)', fontSize: 13, textDecoration: 'none' }}>Talk to us about implementing it →</a>
                </div>}
          </div>)}
        </div>
        <p style={{ textAlign: 'center', margin: '26px auto 0', maxWidth: 680, fontSize: 13.5, color: 'var(--fg-muted)', lineHeight: 1.6 }}>
          The more of a company Lojo understands, the more each module can do. Data stays isolated per organization, sensitive HR data is kept apart, and nothing trains shared models.
          Every module beyond AI visibility is on <b style={{ color: 'var(--warn)' }}>beta pricing</b>, confirmed on a call based on complexity and the size of your organization.
          Sensitive modules work under a mutual NDA, signed in a minute or using your own.
        </p>
        <div style={{ textAlign: 'center', marginTop: 16 }}><a href="/app/?request=1" className="btn btn-ghost">Book a call about a module</a></div>
      </div>
    </section>);
}

Object.assign(window, { TheLoop, ProductTour, FeatureGrid, ForAgencies, PlatformModules });