// Pricing page

function PricingPage() {
  const { go } = useNav();
  const { authed, setPlan } = useAuth();
  const { toast } = useToast();
  const [billing, setBilling] = useState('monthly');
  const pickPlan = (id) => { setPlan(id); go('billing'); };
  const sales = () => { window.location.href = 'mailto:eri@getfossyl.dev?subject=Fossyl%20%E2%80%94%20Sales%20enquiry'; };
  return (
    <div style={{ background: 'var(--bg)', minHeight: '100vh', paddingBottom: 96 }}>
      <AppTopBar authed={authed} onCta={() => go('signup')} onLogin={() => go('login')}/>

      <section style={{ maxWidth: 1280, margin: '0 auto', padding: '64px 32px 24px' }}>
        <div className="row jc-b ai-e" style={{ marginBottom: 48 }}>
          <div>
            <span className="caps">§ Plans — 2026 edition</span>
            <h1 className="display" style={{ fontSize: 68, fontWeight: 400, letterSpacing: '-0.025em', margin: '20px 0 0', lineHeight: 1 }}>
              Pay per excavation.<br/>Or for the whole season.
            </h1>
            <p style={{ fontSize: 16, color: 'var(--ink-dim)', maxWidth: 640, marginTop: 24 }}>
              Most teams buy a one-off scan before a migration. Teams running several Plone sites subscribe. Consulting firms take the Agency plan. All reports are self-contained HTML — yours to keep, forever.
            </p>
          </div>
          <div className="row g-0" style={{ border: '1px solid var(--line-2)', borderRadius: 3, overflow: 'hidden' }}>
            <BillingSeg active={billing === 'monthly'} onClick={() => setBilling('monthly')}>Monthly</BillingSeg>
            <BillingSeg active={billing === 'annual'} onClick={() => setBilling('annual')}>Annual · save 20%</BillingSeg>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--line)' }}>
          <PlanCard
            name="Specimen"
            tag="One-off"
            price={billing === 'monthly' ? '€ 2,400' : '€ 2,400'}
            priceUnit="single scan"
            sub="Best for teams preparing a single migration."
            features={[
              'One codebase, one report',
              'Up to 10,000 ZODB records',
              'Full HTML report + PDF export',
              'AI plain-English explanations',
              'Email support (48h)',
              '30-day report retention',
            ]}
            ctaLabel="Buy single scan →"
            onCta={() => pickPlan('specimen')}
          />
          <PlanCard
            name="Field"
            tag="Solo"
            price={billing === 'monthly' ? '€ 190' : '€ 152'}
            priceUnit="/ month"
            sub="Individual consultants and single-site engineers."
            features={[
              '5 scans / month',
              'Up to 25,000 ZODB records',
              'Full HTML report + PDF export',
              'AI plain-English explanations',
              'Dependency graph export (GraphML)',
              'Priority email support',
              '90-day report retention',
            ]}
            ctaLabel="Start Field →"
            onCta={() => pickPlan('field')}
          />
          <PlanCard
            name="Team"
            tag="Recommended"
            featured
            price={billing === 'monthly' ? '€ 490' : '€ 392'}
            priceUnit="/ month"
            sub="Engineering teams running several Plone systems."
            features={[
              'Unlimited scans',
              '5 seats (€ 60 / additional seat)',
              'Up to 100,000 ZODB records',
              'Shared workspace & report history',
              'Schema mapping (MySQL export)',
              'Slack integration + Shared comments',
              'Priority support (8h SLA)',
              '1-year report retention',
            ]}
            ctaLabel="Start Team →"
            onCta={() => pickPlan('team')}
          />
          <PlanCard
            name="Agency"
            tag="Custom"
            price="€ —"
            priceUnit="contact sales"
            sub="Consulting firms and integrators running migrations for 10+ clients."
            features={[
              'White-label HTML reports',
              'Unlimited seats & workspaces',
              'On-premise deployment available',
              'Custom ingestion adapters',
              'SSO (SAML / OIDC), SCIM',
              'Named CSM',
              'Security review (SOC 2 docs)',
            ]}
            ctaLabel="Talk to sales →"
            onCta={sales}
          />
        </div>

        {/* Field notes strip */}
        <div style={{ marginTop: 16, border: '1px solid var(--line)', padding: '16px 20px', background: 'var(--bg-1)' }}>
          <div className="row g-32">
            <FieldLine label="All plans" value="include unlimited report re-downloads for the retention window, and free PDF export."/>
            <FieldLine label="VAT" value="EU VAT added where applicable. Reverse-charge supported for B2B customers outside Germany."/>
            <FieldLine label="Refunds" value="14-day refund on the one-off Specimen plan if the report is empty or corrupt."/>
          </div>
        </div>
      </section>

      <PlanMatrix/>

      <section style={{ maxWidth: 1280, margin: '0 auto', padding: '32px' }}>
        <div style={{ border: '1px solid var(--line)', padding: '32px 40px', display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 40, alignItems: 'center', background: 'var(--bg-1)' }}>
          <div>
            <span className="caps">On-premise</span>
            <h3 className="display" style={{ fontSize: 32, fontWeight: 400, margin: '12px 0 12px', letterSpacing: '-0.02em' }}>Need Fossyl to run inside your network?</h3>
            <p style={{ fontSize: 14, color: 'var(--ink-dim)', margin: 0, maxWidth: 560 }}>
              The Agency plan ships a Docker image that runs against your ZODB on air-gapped infrastructure. Hospitals, government, defense. Nothing leaves your perimeter.
            </p>
          </div>
          <div className="row jc-e">
            <button className="btn btn-primary btn-lg" onClick={sales}>Request on-prem trial →</button>
          </div>
        </div>
      </section>
    </div>
  );
}

function BillingSeg({ active, onClick, children }) {
  return (
    <button onClick={onClick} style={{
      padding: '9px 18px',
      background: active ? 'var(--bg-2)' : 'transparent',
      color: active ? 'var(--ink)' : 'var(--muted)',
      border: 0,
      fontFamily: 'var(--mono)',
      fontSize: 11,
      letterSpacing: '0.08em',
      textTransform: 'uppercase',
      cursor: 'pointer',
      borderRight: '1px solid var(--line-2)',
    }}>{children}</button>
  );
}

function PlanCard({ name, tag, price, priceUnit, sub, features, ctaLabel, onCta, featured }) {
  return (
    <div style={{
      padding: '28px 24px 28px',
      background: featured ? 'var(--bg-1)' : 'var(--bg)',
      borderRight: '1px solid var(--line)',
      position: 'relative',
      display: 'flex', flexDirection: 'column', gap: 20,
    }}>
      {featured && (
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 2,
          background: 'var(--bone)',
        }}/>
      )}
      <div className="row jc-b ai-c">
        <span className="caps" style={{ color: featured ? 'var(--bone)' : 'var(--muted)' }}>{tag}</span>
        <span className="mono" style={{ fontSize: 10.5, color: 'var(--dim)' }}>plan_{name.toLowerCase()}</span>
      </div>
      <div>
        <h3 className="serif" style={{ fontSize: 32, fontWeight: 400, letterSpacing: '-0.02em', margin: 0 }}>{name}</h3>
        <p style={{ fontSize: 13, color: 'var(--ink-dim)', margin: '8px 0 0', minHeight: 36 }}>{sub}</p>
      </div>
      <div className="col g-4">
        <span className="serif" style={{ fontSize: 38, fontWeight: 400, letterSpacing: '-0.025em', lineHeight: 1, whiteSpace: 'nowrap' }}>{price}</span>
        <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{priceUnit}</span>
      </div>
      <button className={featured ? 'btn btn-primary' : 'btn'} onClick={onCta} style={{ justifyContent: 'center' }}>{ctaLabel}</button>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, borderTop: '1px solid var(--line)', paddingTop: 20 }}>
        {features.map((f, i) => (
          <li key={i} style={{ fontSize: 12.5, color: 'var(--ink-dim)', display: 'flex', gap: 10, alignItems: 'flex-start', lineHeight: 1.45 }}>
            <span style={{ color: featured ? 'var(--bone)' : 'var(--dim)', marginTop: 1 }}>▸</span>
            {f}
          </li>
        ))}
      </ul>
    </div>
  );
}

function FieldLine({ label, value }) {
  return (
    <div style={{ flex: 1 }}>
      <div className="caps" style={{ marginBottom: 4 }}>{label}</div>
      <p style={{ margin: 0, fontSize: 12.5, color: 'var(--ink-dim)', lineHeight: 1.5 }}>{value}</p>
    </div>
  );
}

function PlanMatrix() {
  const rows = [
    ['Scans / month', 'One', '5', 'Unlimited', 'Unlimited'],
    ['ZODB records / scan', '10k', '25k', '100k', 'Unlimited'],
    ['HTML report', '✓', '✓', '✓', '✓'],
    ['PDF export', '✓', '✓', '✓', '✓'],
    ['AI explanations', '✓', '✓', '✓', '✓'],
    ['Dependency graph export (GraphML)', '—', '✓', '✓', '✓'],
    ['MySQL schema mapping', '—', '✓', '✓', '✓'],
    ['Shared workspace', '—', '—', '✓', '✓'],
    ['Slack / email integrations', '—', '—', '✓', '✓'],
    ['SSO (SAML / OIDC)', '—', '—', '—', '✓'],
    ['White-label reports', '—', '—', '—', '✓'],
    ['On-premise deployment', '—', '—', '—', '✓'],
    ['Support SLA', '48h', '24h', '8h', '4h · named CSM'],
    ['Report retention', '30 days', '90 days', '1 year', 'Unlimited'],
  ];
  return (
    <section style={{ maxWidth: 1280, margin: '48px auto 0', padding: '0 32px' }}>
      <div className="row jc-b ai-e" style={{ marginBottom: 20 }}>
        <div>
          <span className="caps">§ Matrix — feature by plan</span>
          <h3 className="display" style={{ fontSize: 32, fontWeight: 400, letterSpacing: '-0.02em', margin: '10px 0 0' }}>Every feature, every plan.</h3>
        </div>
      </div>
      <div style={{ border: '1px solid var(--line)', background: 'var(--bg-1)' }}>
        <table className="table" style={{ fontFamily: 'var(--sans)', fontSize: 13 }}>
          <thead>
            <tr>
              <th style={{ width: '32%' }}>Feature</th>
              <th style={{ width: '17%' }}>Specimen</th>
              <th style={{ width: '17%' }}>Field</th>
              <th style={{ width: '17%', color: 'var(--bone)' }}>Team</th>
              <th style={{ width: '17%' }}>Agency</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                <td style={{ color: 'var(--ink)' }}>{r[0]}</td>
                {r.slice(1).map((c, j) => (
                  <td key={j} style={{ color: c === '—' ? 'var(--dim)' : 'var(--ink-dim)' }}>{c}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

// shared top bar for logged-out pages that aren't landing
function AppTopBar({ onCta, onLogin, authed }) {
  const { go } = useNav();
  return (
    <div style={{ borderBottom: '1px solid var(--line)', background: 'var(--bg)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '14px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a onClick={() => go('landing')} style={{ cursor: 'pointer' }}><Logo size={22}/></a>
        <nav style={{ display: 'flex', gap: 28, fontSize: 13 }}>
          <a className="ink-dim">Product</a>
          <a className="ink-dim">How it works</a>
          <a className="ink" style={{ borderBottom: '1px solid var(--ink)' }}>Pricing</a>
          <a className="ink-dim">Docs</a>
        </nav>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          {authed
            ? <button className="btn btn-primary btn-sm" onClick={() => go('upload')}>Open app →</button>
            : <>
                <button className="btn btn-ghost btn-sm" onClick={onLogin}>Sign in</button>
                <button className="btn btn-primary btn-sm" onClick={onCta}>Get Fossyl</button>
              </>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PricingPage, AppTopBar });