/* Pricing page */
const { useState: pUseState } = React;

function PricingPage() {
  const [tier, setTier] = pUseState('starter');
  const [extraLots, setExtraLots] = pUseState(0);
  const [recall, setRecall] = pUseState(false);
  const [titleAging, setTitleAging] = pUseState(false);

  const tiers = [
    {
      id: 'starter', name: 'Starter', price: 99, kicker: '14-DAY FREE TRIAL',
      blurb: 'Everything to keep you out of trouble. For lots with one rooftop.',
      features: [
        'WISP generator + annual refresh',
        'Nightly listing scanner · 5 channels',
        '4-year communication vault',
        'Compliance tracker + ledger',
        'Monthly compliance report (PDF)',
        'Email support · 24h response',
      ],
    },
    {
      id: 'standard', name: 'Standard', price: 129, kicker: 'PRIORITY SUPPORT',
      blurb: 'Same toolkit, with a phone number that picks up.',
      features: [
        'Everything in Starter',
        'Priority support · 2h response',
        'Phone + SMS support line',
        'Quarterly check-in with QI',
        'Insurance carrier introductions',
        'Custom audit prep on request',
      ],
    },
  ];

  const base = tiers.find(t => t.id === tier).price;
  const total = base + (extraLots * 49) + (recall ? 39 : 0) + (titleAging ? 79 : 0);

  return (
    <div className="page-fade">
      {/* Hero */}
      <section style={{ paddingTop: 64, paddingBottom: 32 }}>
        <div className="container">
          <div className="label" style={{ marginBottom: 18 }}>SCHEDULE A · INDEPENDENT DEALER PRICING</div>
          <h1 className="h-display">
            Ninety-nine.<br/>
            <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400 }}>Cancel anytime.</span>
          </h1>
          <p className="lede" style={{ marginTop: 26, maxWidth: 640 }}>
            One subscription. Five tools. The only thing your office manager has to know is the password.
          </p>
        </div>
      </section>

      {/* Tier cards */}
      <section style={{ paddingTop: 32, paddingBottom: 64 }}>
        <div className="container">
          <div className="m-tier-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--rule)' }}>
            {tiers.map((t, i) => {
              const active = tier === t.id;
              return (
                <div key={t.id} onClick={() => setTier(t.id)} style={{
                  padding: '32px 32px 28px',
                  borderRight: i === 0 ? '1px solid var(--rule)' : 0,
                  background: active ? 'var(--ink)' : 'var(--paper)',
                  color: active ? 'var(--paper)' : 'var(--ink)',
                  cursor: 'pointer',
                  transition: 'background .2s',
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28 }}>
                    <span className="mono" style={{ fontSize: 11, letterSpacing: '0.08em', opacity: 0.7 }}>0{i + 1} · {t.kicker}</span>
                    <span style={{ width: 14, height: 14, borderRadius: '50%', border: '1px solid currentColor', position: 'relative' }}>
                      {active && <span style={{ position: 'absolute', inset: 3, background: 'currentColor', borderRadius: '50%' }}/>}
                    </span>
                  </div>
                  <div className="display" style={{ fontSize: 56, lineHeight: 0.95, letterSpacing: '-0.035em' }}>
                    {t.name}
                  </div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 18 }}>
                    <span className="display tnum" style={{ fontSize: 56, lineHeight: 1 }}>${t.price}</span>
                    <span className="mono" style={{ fontSize: 12, opacity: 0.6 }}>/MO · PER LOT</span>
                  </div>
                  <p style={{ marginTop: 14, opacity: 0.85, maxWidth: 380 }}>{t.blurb}</p>
                  <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'grid', gap: 8 }}>
                    {t.features.map((f, j) => (
                      <li key={j} style={{ display: 'flex', gap: 12, fontSize: 13, opacity: 0.95 }}>
                        <span style={{ color: active ? 'var(--signal)' : 'var(--signal-deep)' }}>→</span>
                        <span>{f}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Configurator */}
      <section style={{ padding: '64px 0', background: 'var(--paper-2)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
        <div className="container">
          <SectionLabel
            no="02"
            kana="ADJUST · ADD-ONS"
            title="Tune your subscription."
            sub="Multi-lot dealers and add-ons configure here. Total updates live."
          />
          <div className="m-config-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32 }}>
            <div className="sheet" style={{ padding: 0 }}>
              {/* Locations */}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', padding: '20px 24px', borderBottom: '1px solid var(--rule)' }}>
                <div>
                  <div className="display" style={{ fontSize: 22 }}>Additional locations</div>
                  <p style={{ marginTop: 4, color: 'var(--ink-2)', fontSize: 13 }}>$49 / month for each rooftop beyond your first.</p>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'var(--mono)' }}>
                  <button onClick={() => setExtraLots(Math.max(0, extraLots - 1))} className="btn btn--ghost btn--sm" style={{ width: 32, padding: 0, height: 32, justifyContent: 'center' }}>−</button>
                  <span className="display tnum" style={{ fontSize: 28, minWidth: 32, textAlign: 'center' }}>{extraLots}</span>
                  <button onClick={() => setExtraLots(extraLots + 1)} className="btn btn--ghost btn--sm" style={{ width: 32, padding: 0, height: 32, justifyContent: 'center' }}>+</button>
                </div>
              </div>

              {/* Recall sweep */}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', padding: '20px 24px', borderBottom: '1px solid var(--rule)' }}>
                <div>
                  <div className="display" style={{ fontSize: 22 }}>Recall Sweep <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>+$39/mo</span></div>
                  <p style={{ marginTop: 4, color: 'var(--ink-2)', fontSize: 13 }}>Daily NHTSA + manufacturer recall checks against your VIN inventory.</p>
                </div>
                <Toggle on={recall} onChange={setRecall}/>
              </div>

              {/* Title aging */}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', padding: '20px 24px' }}>
                <div>
                  <div className="display" style={{ fontSize: 22 }}>Title Aging Tracker <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>+$79/mo</span></div>
                  <p style={{ marginTop: 4, color: 'var(--ink-2)', fontSize: 13 }}>30/45/60-day aging on titles in transit. Catches DMV mail-back failures before the customer calls.</p>
                </div>
                <Toggle on={titleAging} onChange={setTitleAging}/>
              </div>
            </div>

            <div className="sheet m-summary-card" style={{ padding: 24, position: 'sticky', top: 80 }}>
              <div className="label" style={{ marginBottom: 16 }}>YOUR SUBSCRIPTION</div>
              <div style={{ display: 'grid', gap: 8 }}>
                {[
                  ['Plan', tiers.find(t => t.id === tier).name, '$' + base],
                  ['Locations', `1 + ${extraLots} extra`, extraLots > 0 ? '$' + (extraLots * 49) : '—'],
                  ['Recall Sweep', recall ? 'Yes' : 'No', recall ? '$39' : '—'],
                  ['Title Aging', titleAging ? 'Yes' : 'No', titleAging ? '$79' : '—'],
                ].map(([k, v, p], i) => (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr auto auto', gap: 12, padding: '6px 0', borderBottom: '1px dashed var(--rule)' }}>
                    <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>{k.toUpperCase()}</span>
                    <span style={{ fontSize: 12, color: 'var(--ink-2)' }}>{v}</span>
                    <span className="mono tnum" style={{ fontSize: 12 }}>{p}</span>
                  </div>
                ))}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 18, paddingTop: 18, borderTop: '1px solid var(--ink)' }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: '0.08em' }}>TOTAL · MONTHLY</span>
                <span className="display tnum" style={{ fontSize: 44, lineHeight: 1 }}>${total}</span>
              </div>
              <button className="btn" style={{ width: '100%', justifyContent: 'center', marginTop: 18 }} onClick={() => go('signup')}>Start 14-day trial &nbsp;→</button>
              <p className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', textAlign: 'center', marginTop: 12, letterSpacing: '0.06em' }}>NO CREDIT CARD UNTIL DAY 15</p>
            </div>
          </div>
        </div>
      </section>

      {/* Comparison strip */}
      <section style={{ padding: '64px 0' }}>
        <div className="container">
          <SectionLabel
            no="03"
            kana="VS THE ENTERPRISE TOOLS"
            title="Same scope. A fifth of the price."
          />
          <div className="sheet m-table-scroll" style={{ padding: 0 }}>
            <div className="mono" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 0, padding: '14px 24px', borderBottom: '1px solid var(--rule)', fontSize: 10, letterSpacing: '0.08em', color: 'var(--ink-3)' }}>
              <span>FEATURE</span><span style={{ textAlign: 'center' }}>LOT COPILOT</span><span style={{ textAlign: 'center' }}>ENTERPRISE A</span><span style={{ textAlign: 'center' }}>ENTERPRISE B</span>
            </div>
            {[
              ['WISP generator',                 true,  true,  true],
              ['Nightly listing scanner · 5 ch', true,  'partial', false],
              ['4-year comm vault (SB 766)',     true,  'partial', false],
              ['Insurance-ready monthly PDF',    true,  false, false],
              ['5-minute setup · no IT',         true,  false, false],
              ['Pricing',                        '$99/mo', '$400/mo', '$500/mo'],
            ].map(([k, a, b, c], i, arr) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 0, padding: '14px 24px', borderBottom: i < arr.length - 1 ? '1px solid var(--rule)' : 0, alignItems: 'center' }}>
                <span style={{ fontSize: 13 }}>{k}</span>
                {[a, b, c].map((v, j) => (
                  <span key={j} className="mono" style={{ textAlign: 'center', fontSize: 12 }}>
                    {v === true && <span style={{ color: 'var(--signal-deep)' }}>● YES</span>}
                    {v === false && <span style={{ color: 'var(--ink-3)' }}>○ NO</span>}
                    {v === 'partial' && <span style={{ color: 'var(--warn)' }}>◐ PARTIAL</span>}
                    {typeof v === 'string' && v !== 'partial' && <span style={{ color: 'var(--ink)' }}>{v}</span>}
                  </span>
                ))}
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function Toggle({ on, onChange }) {
  return (
    <button onClick={() => onChange(!on)} aria-pressed={on} style={{
      width: 44, height: 24, padding: 0, position: 'relative',
      background: on ? 'var(--signal-deep)' : 'var(--paper-3)',
      border: '1px solid ' + (on ? 'var(--signal-deep)' : 'var(--rule-strong)'),
      transition: 'background .15s',
    }}>
      <span style={{
        position: 'absolute', top: 2, left: on ? 22 : 2,
        width: 18, height: 18, background: 'var(--paper)', transition: 'left .15s',
      }}/>
    </button>
  );
}

window.PricingPage = PricingPage;