// Pricing + Pilot page sections.
const { useState: useStatePr } = React;

const PricingHero = () => (
  <div className="hero" style={{ padding: '72px 0 40px' }}>
    <div className="bg-grid-dec"/>
    <div className="container" style={{ position: 'relative' }}>
      <div className="eyebrow">Pricing</div>
      <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 72, lineHeight: 1.0, letterSpacing: '-0.035em', fontWeight: 500, margin: '18px 0 0', maxWidth: 900 }}>
        Three packages.<br/>One conversation.<br/><em style={{ fontStyle: 'normal', color: 'var(--graphite)' }}>VPC or SaaS.</em>
      </h1>
      <p className="sub" style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--fg-2)', marginTop: 28, maxWidth: 580 }}>
        Pricing is set in conversation with each design partner. You keep your provider contracts — Bloom never sits on the bill. Run in your own VPC, or use Bloom SaaS.
      </p>
    </div>
  </div>
);

const PLANS = [
  {
    name: 'Starter', unit: 'Bloom SaaS · single region', meter: 'Design-partner pricing',
    target: 'One workload · get started fast',
    features: [
      '1 workload · 1 region',
      'Visibility + caching',
      'Standard routing rules',
      'Community Slack support',
      'SOC 2 Type II',
    ],
  },
  {
    name: 'Scale', popular: true, unit: 'Bloom SaaS · multi-region', meter: 'Design-partner pricing',
    target: 'Production teams · all four pillars',
    features: [
      'All Starter, plus —',
      'All four pillars enabled',
      'Closed-loop evals',
      'Per-team budgets and alerts',
      'p99 SLO ≤100ms · multi-region',
      '99.95% uptime SLA',
      'Slack channel · 4-hour response',
    ],
  },
  {
    name: 'Enterprise', unit: 'VPC or Bloom SaaS', meter: 'Custom commitments · BYOC',
    target: 'Self-hosted control plane',
    features: [
      'All Scale, plus —',
      'Run in your VPC or Bloom SaaS',
      'Custom SLOs · 99.99% uptime',
      'Provider passthrough billing',
      'HIPAA BAA · DPA · SAML SSO',
      'Dedicated CSM + solutions arch',
      'Audit log retention 7 years',
    ],
  },
];

const PricingTiers = () => {
  return (
    <div className="section" style={{ paddingTop: 32, borderTop: 0 }}>
      <div className="container">
        <div className="pricing-grid">
          {PLANS.map(p => {
            return (
              <div key={p.name} className={'plan ' + (p.popular ? 'popular' : '')}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <h3>{p.name}</h3>
                  {p.popular && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--signal)' }}>· popular</span>}
                </div>
                <div>
                  <div className="unit">{p.unit}</div>
                  <div className="unit" style={{ marginTop: 6 }}>{p.meter}</div>
                </div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: p.popular ? 'var(--graphite-2)' : 'var(--fg-3)', paddingBottom: 10, borderBottom: '1px solid ' + (p.popular ? 'rgba(255,255,255,0.10)' : 'var(--border-1)') }}>{p.target}</div>
                <ul>{p.features.map(f => <li key={f}>{f}</li>)}</ul>
                <a href="pilot.html" className="btn btn-secondary" style={{ marginTop: 'auto', justifyContent: 'center' }}>Talk to sales →</a>
              </div>
            );
          })}
        </div>
        <div style={{ marginTop: 24, fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--fg-3)', textAlign: 'center' }}>
          Design-partner pricing · VPC or Bloom SaaS · provider tokens billed by the providers
        </div>
      </div>
    </div>
  );
};

const PricingTable = () => {
  const rows = [
    { f: 'Per-customer cost attribution', s: 'standard', p: 'standard', e: 'standard' },
    { f: 'Semantic + exact cache', s: '50 GB', p: '500 GB', e: 'unlimited' },
    { f: 'Routing rules', s: 'cost / latency', p: 'all', e: 'all + custom' },
    { f: 'Closed-loop evals', s: '—', p: 'standard', e: 'custom scorers' },
    { f: 'Guardrails (PII, toxicity, topic)', s: 'standard', p: 'standard', e: 'custom policies' },
    { f: 'Regions', s: '1', p: 'multi (3)', e: 'all + on-prem' },
    { f: 'Uptime SLA', s: '99.9%', p: '99.95%', e: '99.99%' },
    { f: 'Audit log retention', s: '30 days', p: '180 days', e: '7 years' },
    { f: 'Support response', s: 'community', p: '4 hours', e: '15 min · pager' },
    { f: 'Solutions architect', s: '—', p: '—', e: 'dedicated' },
    { f: 'SAML SSO · SCIM', s: '—', p: 'SAML', e: 'SAML + SCIM' },
    { f: 'HIPAA BAA · custom DPA', s: '—', p: '—', e: 'included' },
  ];
  return (
    <div className="section" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <div className="section-head">
          <div className="eyebrow center">Compare plans</div>
          <h2>Everything in one table.</h2>
        </div>
        <div style={{ background: 'var(--paper)', border: '1px solid var(--border-1)', borderRadius: 6, overflow: 'hidden' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr>
                <th style={{ textAlign: 'left', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.10em', textTransform: 'uppercase', color: 'var(--fg-3)', fontWeight: 500, padding: '16px 24px', borderBottom: '1px solid var(--border-1)' }}>Feature</th>
                <th style={{ textAlign: 'left', fontSize: 14, fontWeight: 500, padding: '16px 16px', borderBottom: '1px solid var(--border-1)' }}>Starter</th>
                <th style={{ textAlign: 'left', fontSize: 14, fontWeight: 500, padding: '16px 16px', borderBottom: '1px solid var(--border-1)', background: 'var(--paper-2)' }}>Scale</th>
                <th style={{ textAlign: 'left', fontSize: 14, fontWeight: 500, padding: '16px 16px', borderBottom: '1px solid var(--border-1)' }}>Enterprise</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i}>
                  <td style={{ padding: '14px 24px', borderTop: i ? '1px solid var(--border-1)' : 0, fontSize: 14 }}>{r.f}</td>
                  <td style={{ padding: '14px 16px', borderTop: i ? '1px solid var(--border-1)' : 0, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-2)' }}>{r.s}</td>
                  <td style={{ padding: '14px 16px', borderTop: i ? '1px solid var(--border-1)' : 0, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-2)', background: 'var(--paper-2)' }}>{r.p}</td>
                  <td style={{ padding: '14px 16px', borderTop: i ? '1px solid var(--border-1)' : 0, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-2)' }}>{r.e}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

const PilotSection = () => (
  <div className="section" id="pilot" style={{ borderTop: '1px solid var(--border-1)' }}>
    <div className="container">
      <div className="section-head">
        <div className="eyebrow center">Design partner program</div>
        <h2>90 days. Four phases.<br/>One workload.</h2>
        <p className="sub">Scoped to one or two of your highest-spend AI features. Crawl, walk, run — never blocking traffic until you say so. The cohort is small and intentional. 4 of 6 spots remaining.</p>
      </div>

      <div className="phases">
        <div className="phase">
          <div className="lab">PHASE 01 · 0–30D</div>
          <div className="h">Observe</div>
          <div className="p">Instrument traffic. Map cost, latency, and quality per customer, per agent, per team.</div>
          <div className="out">▸ READ-ONLY</div>
        </div>
        <div className="phase">
          <div className="lab">PHASE 02 · 30–60D</div>
          <div className="h">Advise</div>
          <div className="p">Surface routing recommendations and savings opportunities. Still read-only — no traffic changed.</div>
          <div className="out">▸ RECOMMENDATIONS LIVE</div>
        </div>
        <div className="phase">
          <div className="lab">PHASE 03 · 60–90D</div>
          <div className="h">Control</div>
          <div className="p">Flip on routing and guardrails for selected workloads. Reversible at any point.</div>
          <div className="out">▸ ROUTING ON</div>
        </div>
        <div className="phase">
          <div className="lab">PHASE 04 · 90D+</div>
          <div className="h">Automate</div>
          <div className="p">Bounded automation with human-in-the-loop. Closed-loop evals running.</div>
          <div className="out">▸ FLYWHEEL ENGAGED</div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, marginTop: 32 }}>
        <div style={{ padding: 28, background: 'var(--paper-2)', border: '1px solid var(--border-1)', borderRadius: 6 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>You get</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14 }}>
            <li>→ Locked design-partner pricing</li>
            <li>→ Direct line to product · roadmap input</li>
            <li>→ White-glove integration · Bloom engineers in the room</li>
            <li>→ Optional joint case study · fully your call</li>
          </ul>
        </div>
        <div style={{ padding: 28, background: 'var(--paper-2)', border: '1px solid var(--border-1)', borderRadius: 6 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>We need</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14 }}>
            <li>→ One technical sponsor + one finance sponsor</li>
            <li>→ One workload to instrument</li>
            <li>→ Bi-weekly cadence, 60 minutes</li>
            <li>→ Letter of intent by week 2</li>
          </ul>
        </div>
        <div style={{ padding: 28, background: 'var(--ink)', color: 'var(--paper)', borderRadius: 6, boxShadow: 'var(--shadow-pop)' }}>
          <div className="eyebrow" style={{ marginBottom: 16, color: 'var(--graphite-2)' }}>Next steps</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12, fontSize: 14, color: 'var(--paper)' }}>
            <li><span style={{ fontFamily: 'var(--font-mono)', color: 'var(--signal)', marginRight: 10 }}>WK 1</span> Technical deep-dive</li>
            <li><span style={{ fontFamily: 'var(--font-mono)', color: 'var(--signal)', marginRight: 10 }}>WK 2</span> Letter of intent</li>
            <li><span style={{ fontFamily: 'var(--font-mono)', color: 'var(--signal)', marginRight: 10 }}>WK 4</span> Instrumentation</li>
          </ul>
          <a href="#apply" className="btn btn-signal" style={{ marginTop: 24, width: '100%', justifyContent: 'center' }}>Apply to pilot →</a>
        </div>
      </div>
    </div>
  </div>
);

const ApplyForm = () => {
  const [submitted, setSubmitted] = useStatePr(false);
  const [loading, setLoading] = useStatePr(false);
  const [error, setError] = useStatePr(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    const fd = new FormData(e.target);
    const body = Object.fromEntries(fd.entries());
    try {
      const res = await fetch('/api/apply', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      if (!res.ok) throw new Error('failed');
      setSubmitted(true);
    } catch {
      setError('Something went wrong. Please try again or email us directly.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="section" id="apply" style={{ background: 'var(--paper-2)' }}>
      <div className="container" style={{ maxWidth: 760 }}>
        <div className="eyebrow">Apply</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 44, letterSpacing: '-0.025em', fontWeight: 500, margin: '14px 0 0' }}>Tell us about your workload.</h2>
        <p style={{ color: 'var(--fg-2)', marginTop: 14, fontSize: 16, maxWidth: 560 }}>We read every application. Most teams hear back within two business days. The cohort closes this quarter.</p>
        {submitted ? (
          <div style={{ marginTop: 32, padding: 32, background: 'var(--paper)', border: '1px solid var(--border-1)', borderRadius: 6, textAlign: 'center' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.10em', textTransform: 'uppercase', color: 'var(--signal-ink)', marginBottom: 10 }}>▸ APPLICATION RECEIVED</div>
            <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.015em' }}>Thanks. The cohort team will be in touch.</div>
            <div style={{ fontSize: 14, color: 'var(--fg-2)', marginTop: 8 }}>Reference · pilot_q2_2026_a8f3c</div>
          </div>
        ) : (
          <form onSubmit={handleSubmit} style={{ marginTop: 32, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {[
              { l: 'Company', n: 'company', ph: 'Acme Robotics', span: 1 },
              { l: 'Work email', n: 'email', ph: 'you@company.com', span: 1, type: 'email' },
              { l: 'Your role', n: 'role', ph: 'Head of Platform', span: 1 },
              { l: 'Monthly inference spend', n: 'spend', ph: '$25K – $100K', span: 1 },
            ].map(f => (
              <label key={f.n} style={{ gridColumn: 'span ' + f.span, display: 'flex', flexDirection: 'column', gap: 6 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--fg-3)' }}>{f.l}</span>
                <input required type={f.type || 'text'} name={f.n} placeholder={f.ph}
                       style={{ padding: '12px 14px', fontFamily: 'var(--font-sans)', fontSize: 14, background: 'var(--paper)', border: '1px solid var(--border-1)', borderRadius: 6, outline: 'none', color: 'var(--ink)' }} />
              </label>
            ))}
            <label style={{ gridColumn: 'span 2', display: 'flex', flexDirection: 'column', gap: 6 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--fg-3)' }}>What workload would you instrument first?</span>
              <textarea required name="workload" rows="4" placeholder="One or two sentences. Which feature, which models, why this one."
                        style={{ padding: '12px 14px', fontFamily: 'var(--font-sans)', fontSize: 14, background: 'var(--paper)', border: '1px solid var(--border-1)', borderRadius: 6, outline: 'none', color: 'var(--ink)', resize: 'vertical' }} />
            </label>
            {error && (
              <div style={{ gridColumn: 'span 2', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--err)', padding: '10px 14px', background: 'var(--err-wash)', border: '1px solid var(--err)', borderRadius: 4 }}>
                {error}
              </div>
            )}
            <div style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', gap: 14, marginTop: 8, flexWrap: 'wrap' }}>
              <button type="submit" disabled={loading} className="btn btn-primary btn-lg" style={{ opacity: loading ? 0.6 : 1 }}>
                {loading ? 'Sending…' : 'Submit application →'}
              </button>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--fg-3)' }}>Cohort response · within 2 business days</span>
            </div>
          </form>
        )}
      </div>
    </div>
  );
};

const PricingFAQ = () => {
  const items = [
    { q: 'How does pricing work?', a: 'Every package is priced in conversation with the design-partner team. We size to your workload and commit terms, in writing, before you spin up. There are no hidden meters and no usage tiers we have not discussed with you first.' },
    { q: 'Do you mark up provider tokens?', a: 'No. You keep your provider contracts and rate cards. Provider invoices come from the providers, never from us. Bloom charges a platform fee — that is it.' },
    { q: 'Can I run Bloom in my own VPC?', a: 'Yes. Bloom runs in your VPC (Helm chart + Terraform module) or on Bloom SaaS. Same product, same SLAs. The control plane phones home for billing telemetry only — never your prompts or completions.' },
    { q: 'How long does deployment take?', a: 'About half a sprint. Most design partners are routing production traffic within 5 working days of kickoff. The first phase is observe-only — we add the gateway in front of your existing client and watch.' },
    { q: 'What happens if I want to leave?', a: 'Switch your base URL back. Your provider keys and contracts are yours. There is no exit penalty and no required notice. We try to be obviously worth the platform fee every month.' },
  ];
  const [open, setOpen] = useStatePr(0);
  return (
    <div className="section">
      <div className="container">
        <div className="section-head left">
          <div className="eyebrow">FAQ</div>
          <h2>The questions we hear most.</h2>
        </div>
        <div style={{ borderTop: '1px solid var(--border-1)' }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: '1px solid var(--border-1)' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '22px 0', background: 'transparent', border: 0, cursor: 'pointer', textAlign: 'left', fontFamily: 'var(--font-sans)', fontSize: 17, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.01em' }}>
                <span>{it.q}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--fg-3)', transition: 'transform 140ms', transform: open === i ? 'rotate(45deg)' : 'rotate(0)' }}>+</span>
              </button>
              {open === i && (
                <div style={{ paddingBottom: 22, fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.6, maxWidth: 760 }}>{it.a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

window.PricingHero = PricingHero;
window.PricingTiers = PricingTiers;
window.PricingTable = PricingTable;
window.PilotSection = PilotSection;
window.ApplyForm = ApplyForm;
window.PricingFAQ = PricingFAQ;