// Pricing page
function PricingPage() {
  const [period, setPeriod] = React.useState('monthly');
  const tiers = [
    { name: 'Trial', price: 'Free', per: '14 days', cta: 'Start trial', features: ['Unlimited users', 'Up to 100 defects', 'PDF reports', 'Mobile + web', 'Email support'] },
    { name: 'Team', price: period === 'monthly' ? '$149' : '$1,490', per: period === 'monthly' ? 'per site / month' : 'per site / year', cta: 'Start pilot', highlight: true, features: ['Up to 25 users', 'Unlimited defects', 'All PDF report formats', 'Offline sync', 'Trade assignment', 'Priority email support'] },
    { name: 'Enterprise', price: 'Custom', per: 'talk to sales', cta: 'Contact sales', features: ['Unlimited users & sites', 'White-label branding', 'SSO / SAML', 'API access', 'Dedicated CSM', 'SLA + onboarding'] },
  ];
  return (
    <SideRailLayout current="/pricing">
      <Block pad="56px 56px 24px">
        <Headline eyebrow="Pricing" title="Fair pricing. Per site, not per seat." subtitle="Add every inspector, builder and sub-contractor at no additional seat cost. Only pay for active sites." />
        <div style={{ display: 'flex', justifyContent: 'center', gap: 4, marginBottom: 36 }}>
          {[['monthly','Monthly'], ['yearly','Yearly · save 17%']].map(([k, l]) => (
            <button key={k} onClick={() => setPeriod(k)} style={{
              padding: '10px 16px', fontSize: 13, fontFamily: 'var(--font-sans)',
              background: period === k ? 'var(--ink)' : 'transparent',
              color: period === k ? 'var(--paper)' : 'var(--ink-2)',
              border: '1px solid ' + (period === k ? 'var(--ink)' : 'var(--rule)'),
              borderRadius: 6, cursor: 'pointer', fontWeight: 500,
            }}>{l}</button>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }} className="tiers">
          {tiers.map(t => (
            <div key={t.name} style={{
              borderRadius: 12, padding: 24,
              background: t.highlight ? 'var(--ink)' : 'var(--paper-2)',
              color: t.highlight ? 'var(--paper)' : 'var(--ink)',
              border: '1px solid ' + (t.highlight ? 'var(--ink)' : 'var(--rule)'),
              display: 'flex', flexDirection: 'column', gap: 16,
              position: 'relative',
            }}>
              {t.highlight && (
                <span style={{
                  position: 'absolute', top: -10, right: 16,
                  background: 'var(--accent)', color: 'oklch(0.18 0.04 55)',
                  padding: '3px 8px', borderRadius: 4,
                  fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
                  letterSpacing: '0.06em', textTransform: 'uppercase',
                }}>Most popular</span>
              )}
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', opacity: 0.7, marginBottom: 12 }}>{t.name}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span style={{ fontSize: 44, fontWeight: 500, letterSpacing: '-0.03em' }}>{t.price}</span>
                </div>
                <div style={{ fontSize: 12, opacity: 0.65, marginTop: 4 }}>{t.per}</div>
              </div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 8 }}>
                {t.features.map(f => (
                  <li key={f} style={{ fontSize: 13, display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                    <span style={{ color: 'var(--accent)', fontWeight: 600 }}>✓</span>
                    {f}
                  </li>
                ))}
              </ul>
              <Btn to="/contact" variant={t.highlight ? 'accent' : 'primary'} size="md" style={{ marginTop: 'auto', justifyContent: 'center' }}>{t.cta}</Btn>
            </div>
          ))}
        </div>
      </Block>
      <Block>
        <Headline title="Frequently asked." />
        <div style={{ display: 'grid', gap: 6, maxWidth: 620, margin: '0 auto' }}>
          {[
            ['What counts as a "site"?', 'A site is any active construction project. You can add unlimited users (inspectors, builders, trades) per site at no extra seat cost.'],
            ['Is there a minimum contract?', 'No. Monthly plans are month-to-month. Yearly plans save 17% and can be cancelled with 30 days notice.'],
            ['Does it work offline?', 'Yes — IssuesId is a progressive web app built offline-first. Every defect captured syncs automatically when signal returns.'],
            ['Can we white-label it?', 'Enterprise tier includes full white-label: your logo, colours, and domain on the app sub-contractors see.'],
            ['What about data export?', 'Every tier includes CSV export and PDF reports. Enterprise includes full API access.'],
          ].map(([q, a]) => <Accordion key={q} q={q} a={a} />)}
        </div>
      </Block>
    </SideRailLayout>
  );
}

function Accordion({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: '1px solid var(--rule)' }}>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', textAlign: 'left', background: 'transparent', border: 'none',
        padding: '18px 0', cursor: 'pointer', color: 'var(--ink)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
      }}>
        <span style={{ fontSize: 15, fontWeight: 500 }}>{q}</span>
        <span style={{ color: 'var(--accent)', fontFamily: 'var(--font-mono)', fontSize: 18, transform: open ? 'rotate(45deg)' : 'none', transition: 'transform .15s' }}>+</span>
      </button>
      {open && <div style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-3)', paddingBottom: 18, maxWidth: 520 }}>{a}</div>}
    </div>
  );
}

window.PricingPage = PricingPage;