/* pages.jsx — marketing/info scenes: How it works, Pricing, Docs.
 * Observatory style: serif display headers, .grad accent, .eyebrow, card surfaces
 * built from the design tokens (var(--bg-1), var(--line), var(--r-lg), --shadow-lg).
 * Positioning wedge (from competitor research): every other AI-visibility tool stops
 * at a dashboard / advice — AISO opens the pull request. Lead with that everywhere.
 */

const card = {
  background: 'var(--bg-1)',
  border: '1px solid var(--line)',
  borderRadius: 'var(--r-lg)',
  padding: '26px 24px',
  boxShadow: 'var(--shadow-lg)',
};
const eyebrowStyle = { marginBottom: 18 };
const serifNum = {
  fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 40, lineHeight: 1,
  color: 'var(--fg-3)',
};

function PageHeader({ kicker, children, sub }) {
  return (
    <div style={{ maxWidth: '60ch', marginBottom: 40 }}>
      <div className="eyebrow" style={eyebrowStyle}><span className="pulse" /> {kicker}</div>
      <h1 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(34px, 5vw, 60px)', lineHeight: 1.04, margin: 0, letterSpacing: '-0.01em' }}>
        {children}
      </h1>
      {sub && <p className="lede" style={{ marginTop: 18, color: 'var(--fg-2)' }}>{sub}</p>}
    </div>
  );
}

/* ---------------- HOW IT WORKS ---------------- */
function HowItWorks({ onStart, onNav }) {
  const steps = [
    {
      n: '01', t: 'Scan',
      d: 'Drop in a domain. We run vertical-aware prompts across all six models — Claude, GPT-5, Gemini, Perplexity, Grok, DeepSeek — and read your live site server-side: robots.txt, sitemap, JSON-LD, meta, Wikidata.',
      tag: 'no login · ~30s',
    },
    {
      n: '02', t: 'Diagnose',
      d: 'A rank-weighted visibility score — being recommended #1 counts far more than a passing mention. See who AI names instead of you, and the exact technical gaps holding you back (missing schema, thin content, weak entity).',
      tag: '6 models · real responses',
    },
    {
      n: '03', t: 'Ship', hero: true,
      d: 'Your highest-impact fix becomes a real GitHub pull request — generated JSON-LD, committed to your repo, ready to merge. Not a to-do list. A diff. Every other tool stops at advice; AISO closes the loop.',
      tag: 'branch → commit → PR',
    },
    {
      n: '04', t: 'Track',
      d: 'Re-scan over time and watch the score move. One quiet notification when something material changes — a score swing past your threshold, a competitor passing you. Otherwise, silence.',
      tag: 'per-model, over time',
    },
  ];
  return (
    <section className="container fade-in" style={{ paddingTop: 28, paddingBottom: 64 }}>
      <PageHeader
        kicker="How it works"
        sub="Most AI-visibility tools hand you a dashboard and a list of suggestions. AISO measures where you stand across the models people actually ask — then ships the fix as a pull request you can merge.">
        Everyone else tells you.<br/><span className="grad">AISO ships the fix.</span>
      </PageHeader>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 16 }}>
        {steps.map((s) => (
          <div key={s.n} style={{
            ...card,
            position: 'relative',
            ...(s.hero ? { borderColor: 'transparent', backgroundImage: 'linear-gradient(var(--bg-1), var(--bg-1)), var(--accent-grad)', backgroundOrigin: 'border-box', backgroundClip: 'padding-box, border-box', boxShadow: 'var(--shadow-lg), var(--shadow-glow)' } : {}),
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div style={serifNum}>{s.n}</div>
              {s.hero && <span className="eyebrow" style={{ margin: 0, fontSize: 11 }}><span className="pulse" /> the part nobody else does</span>}
            </div>
            <h3 style={{ fontFamily: 'var(--serif)', fontSize: 26, margin: '14px 0 8px' }}>
              {s.hero ? <span className="grad">{s.t}</span> : s.t}
            </h3>
            <p style={{ color: 'var(--fg-2)', fontSize: 15, lineHeight: 1.55, margin: 0 }}>{s.d}</p>
            <div style={{ marginTop: 16, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{s.tag}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'flex', gap: 12, marginTop: 40, flexWrap: 'wrap' }}>
        <button className="btn btn-primary" onClick={onStart}>Scan your site — free <Arrow /></button>
        <button className="btn btn-ghost" onClick={() => onNav('pricing')}>See pricing</button>
      </div>
    </section>
  );
}

/* ---------------- PRICING ---------------- */
function Pricing({ onStart, onNav, onSettings }) {
  const tiers = [
    {
      name: 'Free', price: '$0', cadence: 'forever',
      tagline: 'See where you stand.',
      features: ['Instant scan, no login', 'All 6 models', '1 saved site', 'Full report + brand review', 'Copy-paste fixes'],
      cta: 'Scan free', action: onStart, kind: 'ghost',
    },
    {
      name: 'Pro', price: '$49', cadence: '/mo', popular: true,
      tagline: 'Ship fixes on autopilot.',
      features: ['Everything in Free', '1 domain, weekly auto re-scan', 'Unlimited GitHub PR fixes', 'Visibility over time', 'Query inspector + competitor radar'],
      cta: 'Start Pro', action: onSettings, kind: 'primary',
    },
    {
      name: 'Agency', price: '$149', cadence: '/mo',
      tagline: 'Run it for your clients.',
      features: ['Up to 10 domains', 'Daily tracking', 'White-label reports', 'Multiple seats', 'Priority support'],
      cta: 'Start Agency', action: onSettings, kind: 'ghost',
    },
    {
      name: 'Enterprise', price: 'Custom', cadence: '',
      tagline: 'Scale, security, control.',
      features: ['Unlimited domains', 'SSO / SAML', 'API access', 'SOC 2, dedicated CSM', 'Custom integrations'],
      cta: 'Talk to us', action: onSettings, kind: 'ghost',
    },
  ];
  return (
    <section className="container fade-in" style={{ paddingTop: 28, paddingBottom: 64 }}>
      <PageHeader
        kicker="Pricing"
        sub="Profound starts at $99 for a dashboard. Ahrefs' AI add-on is $828/mo all-in. They tell you what's wrong. AISO opens the pull request — starting at $0.">
        Pricing that ships fixes,<br/><span className="grad">not invoices.</span>
      </PageHeader>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 16, alignItems: 'stretch' }}>
        {tiers.map((t) => (
          <div key={t.name} style={{
            ...card, display: 'flex', flexDirection: 'column',
            ...(t.popular ? { borderColor: 'transparent', backgroundImage: 'linear-gradient(var(--bg-1), var(--bg-1)), var(--accent-grad)', backgroundOrigin: 'border-box', backgroundClip: 'padding-box, border-box', boxShadow: 'var(--shadow-lg), var(--shadow-glow)' } : {}),
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-1)' }}>{t.name}</span>
              {t.popular && <span className="eyebrow" style={{ margin: 0, fontSize: 10 }}>most popular</span>}
            </div>
            <div style={{ margin: '14px 0 4px', display: 'flex', alignItems: 'baseline', gap: 4 }}>
              <span style={{ fontFamily: 'var(--serif)', fontSize: 44, lineHeight: 1 }} className={t.popular ? 'grad' : ''}>{t.price}</span>
              <span style={{ color: 'var(--fg-3)', fontSize: 14 }}>{t.cadence}</span>
            </div>
            <div style={{ color: 'var(--fg-2)', fontSize: 14, marginBottom: 16, fontStyle: 'italic' }}>{t.tagline}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 20px', display: 'grid', gap: 9, flex: 1 }}>
              {t.features.map((f, i) => (
                <li key={i} style={{ display: 'flex', gap: 8, fontSize: 14, color: 'var(--fg-1)', alignItems: 'flex-start' }}>
                  <span style={{ color: 'var(--good)', flexShrink: 0, marginTop: 1 }}><Tick /></span> {f}
                </li>
              ))}
            </ul>
            <button className={`btn ${t.kind === 'primary' ? 'btn-primary' : 'btn-ghost'}`} onClick={t.action}>{t.cta}</button>
          </div>
        ))}
      </div>

      <p style={{ marginTop: 22, color: 'var(--fg-3)', fontSize: 13, textAlign: 'center' }}>
        Annual billing saves ~2 months. Your API keys and data stay yours — AISO stores nothing it doesn't have to.
      </p>
    </section>
  );
}

/* ---------------- DOCS ---------------- */
function Docs({ onNav }) {
  const sections = [
    { t: 'Quickstart', body: 'Open AISO, type a domain, hit Scan. You get a full report in ~30 seconds — no login, no card. To run your own copy, deploy the repo to Vercel (static + edge functions) and add your provider keys as environment variables.' },
    { t: 'The six models', body: 'Every scan fans out across Claude (Sonnet 4.5), GPT-5, Gemini 2.5 Pro, Perplexity (Sonar), Grok 4 and DeepSeek. In managed mode the keys live on the server, so end users never wire anything — they just scan.' },
    { t: 'How the score works', body: 'Visibility is rank-weighted, not a yes/no count: being recommended #1 scores ~1.0, a mid-list mention less, a buried/in-passing mention least — averaged across every model × prompt. So "mentioned everywhere but always last" reads low, not 100%.' },
    { t: 'Shipping fixes via GitHub', body: 'Connect a fine-grained Personal Access Token (Contents + Pull requests) and pick your repo. "Approve & deploy" then opens a real PR: it finds your <head> file, commits the generated JSON-LD on a new branch, and links you the pull request to merge.' },
    { t: 'Cloud sync (Supabase)', body: 'Optional. Bring your own Supabase project, run setup-supabase.sql once, paste your URL + anon key. Your sites and scan history then follow you across devices. Skip it and everything works locally in your browser.' },
    { t: 'FAQ', body: 'Is my data stored? Only what you choose to sync, in your own Supabase. Do you keep my API keys? No — managed keys live in your Vercel env; nothing is sent anywhere except each provider. Which fixes auto-ship? The highest-impact auto-deployable one becomes the #1 PR.' },
  ];
  return (
    <section className="container fade-in" style={{ paddingTop: 28, paddingBottom: 64 }}>
      <PageHeader
        kicker="Docs"
        sub="The short version. Everything AISO does is real — live model calls, live site fetches, real pull requests — and it runs on your keys, your repo, your data.">
        How <span className="grad">AISO</span> works under the hood.
      </PageHeader>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
        {sections.map((s, i) => (
          <div key={i} style={card}>
            <h3 style={{ fontFamily: 'var(--serif)', fontSize: 22, margin: '0 0 10px' }}>{s.t}</h3>
            <p style={{ color: 'var(--fg-2)', fontSize: 14.5, lineHeight: 1.6, margin: 0 }}>{s.body}</p>
          </div>
        ))}
      </div>

      <div style={{ display: 'flex', gap: 12, marginTop: 40, flexWrap: 'wrap' }}>
        <button className="btn btn-primary" onClick={() => onNav('landing')}>Scan a site <Arrow /></button>
        <button className="btn btn-ghost" onClick={() => onNav('how')}>How it works</button>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks, Pricing, Docs });