// Pricing page

const PricingPage = () => {
  // Fetch live product data for price display
  const [liveProducts, setLiveProducts] = React.useState(null);
  React.useEffect(() => {
    if (typeof FH_API === 'undefined') return;
    fetch(FH_API + '/products').then(r => r.ok ? r.json() : null).then(data => {
      if (data && Array.isArray(data) && data.length > 0) setLiveProducts(data);
    }).catch(() => {});
  }, []);

  const minPrice = liveProducts
    ? Math.min(...liveProducts.filter(p => p.price_monthly > 0).map(p => p.price_monthly))
    : 29;
  const productCount = liveProducts ? liveProducts.length : 15;

  const tiers = [
    {
      name: '\u00C0 LA CARTE',
      tag: 'Pick what you need',
      price: 'from $' + minPrice,
      sub: 'per product, per month',
      cta: 'BROWSE PORTFOLIO',
      ctaHref: 'index.html#portfolio',
      ctaAction: null,
      features: [
        'Any single product',
        'Direct API access',
        'MCP server included',
        'Up to 10K calls / day',
        'Community support',
        'Cancel any time',
      ],
    },
    {
      name: 'BUNDLE',
      tag: 'All ' + productCount,
      price: '$299',
      sub: 'per month \u00b7 all products',
      cta: 'START 14-DAY TRIAL',
      ctaHref: '#',
      ctaAction: 'checkout',
      features: [
        'All ' + productCount + ' products, every tool',
        'One API key',
        'Up to 100K calls / day',
        'Priority support \u00b7 24h SLA',
        'Annual billing saves 17%',
        'New products included free',
      ],
      highlight: true,
    },
    {
      name: 'ENTERPRISE',
      tag: 'For platforms & agencies',
      price: 'Custom',
      sub: 'volume pricing · annual contracts',
      cta: 'CONTACT SALES',
      ctaHref: 'about.html#contact',
      features: [
        'Everything in Bundle',
        'Unlimited calls',
        'Dedicated infrastructure',
        'Single sign-on (SAML)',
        'Custom data residency',
        'White-glove onboarding',
      ],
    },
  ];

  return (
    <PageShell active="Pricing">
      <SectionHead
        kicker="PRICING · TWO LINES, ONE BUNDLE"
        title="Pay per product."
        em="Or get them all."
        right="à la carte starts at $29/mo. The bundle — every product, every tool, one key — is $299/mo. Annual billing saves 17%. 14-day trial, no card required."
      />

      {/* Tier cards */}
      <div style={{
        padding: '52px 32px',
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1,
        background: FH.border, borderTop: `1px solid ${FH.border}`,
        borderBottom: `1px solid ${FH.border}`,
      }}>
        {tiers.map((t) => (
          <div key={t.name} style={{
            padding: '36px 32px',
            background: t.highlight ? FH.bg2 : FH.bg,
            display: 'flex', flexDirection: 'column',
            borderTop: t.highlight ? `2px solid ${FH.accent}` : `2px solid transparent`,
          }}>
            <div style={{ fontSize: 11, color: t.highlight ? FH.accent : FH.ink3, letterSpacing: '0.18em', marginBottom: 8 }}>
              ◆ {t.name}
            </div>
            <div style={{ fontSize: 13, color: FH.ink2, marginBottom: 28 }}>{t.tag}</div>
            <div style={{
              fontFamily: '"Instrument Serif", Georgia, serif',
              fontSize: 64, lineHeight: 1, letterSpacing: '-0.02em',
              color: t.highlight ? FH.ink : FH.ink, marginBottom: 6,
            }}>
              {t.price.startsWith('$') ? <>
                <span style={{ color: FH.accent }}>{t.price}</span>
              </> : t.price}
            </div>
            <div style={{ fontSize: 12, color: FH.ink3, marginBottom: 28, letterSpacing: '0.04em' }}>{t.sub}</div>
            <a href={t.ctaAction ? '#' : t.ctaHref}
              onClick={t.ctaAction === 'checkout' ? (e) => {
                e.preventDefault();
                if (typeof fhCheckout !== 'undefined') fhCheckout('bundle', e.currentTarget);
                else window.location.href = 'dashboard.html';
              } : undefined}
              style={{
              display: 'block',
              padding: '14px 0',
              background: t.highlight ? FH.accent : 'transparent',
              border: `1px solid ${t.highlight ? FH.accent : FH.borderHi}`,
              color: t.highlight ? FH.bg : FH.ink,
              fontSize: 12, letterSpacing: '0.12em', fontWeight: 600,
              textAlign: 'center', textDecoration: 'none',
              marginBottom: 28, cursor: 'pointer',
            }}>
              {t.cta} ↗
            </a>
            <div style={{ flex: 1 }}>
              {t.features.map(f => (
                <div key={f} style={{ display: 'flex', gap: 10, padding: '8px 0', fontSize: 13, color: FH.ink2, borderBottom: `1px solid ${FH.border}` }}>
                  <span style={{ color: FH.accent, fontFamily: '"JetBrains Mono", monospace' }}>✓</span>
                  <span>{f}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Comparison ledger */}
      <div style={{ padding: '52px 32px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: `1.5px solid ${FH.borderHi}`, paddingBottom: 10, marginBottom: 4 }}>
          <div style={{ fontSize: 12, color: FH.ink, letterSpacing: '0.14em', fontWeight: 600 }}>◆ COMPARE · LIMITS &amp; FEATURES</div>
          <div style={{ fontSize: 10, color: FH.ink3, letterSpacing: '0.1em' }}>USD · MONTHLY</div>
        </div>
        {[
          ['API calls / day',     '10,000',  '100,000', 'Unlimited'],
          ['Products included',   '1 of 15', 'All 15',  'All 15'],
          ['Tools / endpoints',   '~3',      '47',      '47 + custom'],
          ['Webhook delivery',    '—',       '✓',       '✓'],
          ['Historical backfill', '90 days', '5 years', 'All-time'],
          ['Support SLA',         'Best effort', '24h', '4h · phone'],
          ['SSO (SAML)',          '—',       '—',       '✓'],
          ['Dedicated infra',     '—',       '—',       '✓'],
          ['Annual discount',     '—',       '17%',     'Custom'],
        ].map(([feat, a, b, c], i) => (
          <div key={feat} style={{
            display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr',
            padding: '14px 0', borderBottom: `1px solid ${FH.border}`,
            fontSize: 13, alignItems: 'center',
          }}>
            <div style={{ color: FH.ink, fontFamily: '"Instrument Serif", Georgia, serif', fontSize: 18 }}>{feat}</div>
            <div style={{ color: FH.ink3, fontFamily: '"JetBrains Mono", monospace' }}>{a}</div>
            <div style={{ color: FH.ink, fontFamily: '"JetBrains Mono", monospace' }}>{b}</div>
            <div style={{ color: FH.ink2, fontFamily: '"JetBrains Mono", monospace' }}>{c}</div>
          </div>
        ))}
      </div>

      {/* FAQ */}
      <div style={{ padding: '0 32px 64px' }}>
        <div style={{ borderBottom: `1.5px solid ${FH.borderHi}`, paddingBottom: 10, marginBottom: 24 }}>
          <div style={{ fontSize: 12, color: FH.ink, letterSpacing: '0.14em', fontWeight: 600 }}>◆ FAQ</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '32px 56px' }}>
          {[
            ['What counts as a call?', 'Each MCP tool invocation is one call. A search returning 200 results is still one call. We rate-limit by calls per day, rolling.'],
            ['Can I switch tiers?', 'Yes, any time. Upgrade prorates immediately; downgrade kicks in at the next billing cycle.'],
            ['Do you have a free tier?', 'No, but the 14-day Bundle trial gives you full access — every product, every tool, no card on file.'],
            ['What happens at the limit?', 'You get 429s with a Retry-After header. We email you at 80% so it isn\'t a surprise. No overage charges; you upgrade if you need more.'],
            ['Annual vs monthly?', 'Annual saves 17% (about two months free). Pay upfront or quarterly. Cancel any time, prorated refund on unused months.'],
            ['Where does the data come from?', 'Public sources: SEC EDGAR, the Federal Register, BLS, FAA, IRS, SAM.gov, etc. We pay for nothing. We add the structure, classification, and tool surface.'],
          ].map(([q, a]) => (
            <div key={q}>
              <div style={{
                fontFamily: '"Instrument Serif", Georgia, serif',
                fontSize: 22, color: FH.ink, marginBottom: 10, lineHeight: 1.2,
              }}>{q}</div>
              <div style={{ fontSize: 13, color: FH.ink2, lineHeight: 1.6 }}>{a}</div>
            </div>
          ))}
        </div>
      </div>
    </PageShell>
  );
};

window.PricingPage = PricingPage;