/* global React */
/* ─────────────────────────────────────────────────────────────
   Pricing section.
   Layout lives in site.css (.pricing-head, .pricing-grid,
   .pricing-grouplabel, .price-card); per-tier visuals are inline below.

   The model, not the numbers: prices are deliberately omitted while
   they're being decided. Each tier shows whether it's free, a
   one-time purchase, or a subscription — swap in figures later by
   editing each tier's `price`.
   ───────────────────────────────────────────────────────────── */

function Pricing() {
  const INK = '#1A0E08';
  const INK_2 = '#3D241A';
  const INK_3 = '#6F4A3A';
  const ACCENT = '#FC6739';
  const NAVY = '#142E40';
  const FOAM = '#EAF1F5';
  const FOAM_2 = '#AEC2CE';
  const CARD = '#FDFBF6';
  const HAIRLINE = 'rgba(26, 14, 8, 0.14)';

  // Group 1 — how you get the app.
  const appTiers = [
    {
      name: 'Reviewer & reader',
      price: 'Free',
      blurb: 'Got a review request? Read and comment for free.',
      cta: 'Sign up for updates',
      ctaHref: '#waitlist',
      feats: [
        'Read-only & reviewer mode',
        'Leave comments and suggestions',
        'Free Mac, iPhone & iPad app',
        'Free web app',
      ],
    },
    {
      name: 'Story Builder',
      price: 'One-time purchase',
      blurb: 'The full writing studio. Pay once, no subscription.',
      cta: 'Sign up for updates',
      ctaHref: '#waitlist',
      featured: true,
      feats: [
        'Every writing & analysis feature',
        'Local analysis is free and works offline',
        'Free upgrades until the next major version',
        'Licensed for all your personal devices',
        'Mac, iPhone & iPad',
      ],
    },
  ];

  // Group 2 — optional cloud subscriptions, layered on top of the app.
  const cloudTiers = [
    {
      name: 'Cloud sync',
      price: 'Subscription',
      blurb: 'Keep your manuscripts in sync across every device.',
      cta: 'Sign up for updates',
      ctaHref: '#waitlist',
      feats: [
        'End-to-end encrypted sync',
        'Includes your manuscript, analysis, versions, and reviews',
        'Every device, always current',
      ],
    },
    {
      name: 'Cloud analysis',
      price: 'Subscription',
      blurb: 'Cloud analysis with Anthropic models.',
      cta: 'Sign up for updates',
      ctaHref: '#waitlist',
      feats: [
        'Includes everything in Cloud sync',
        'Run analysis with Anthropic Claude models',
        'For devices that can’t analyze locally (iPhone & iPad)',
        'Pay only for what you use',
      ],
    },
  ];

  const Card = (t, i) => {
    const featured = !!t.featured;
    return (
      <div
        key={t.name}
        data-reveal
        data-reveal-delay={i + 1}
        className={`price-card${featured ? ' is-featured' : ''}`}
        style={{
          position: 'relative',
          display: 'flex',
          flexDirection: 'column',
          borderRadius: 18,
          padding: '28px 26px 26px',
          background: featured ? NAVY : CARD,
          color: featured ? FOAM : INK,
          boxShadow: featured
            ? '0 24px 60px -18px rgba(20, 46, 64, 0.55), 0 0 0 1px rgba(234,241,245,0.06)'
            : `0 1px 2px rgba(26,14,8,0.04), 0 0 0 1px ${HAIRLINE}`,
        }}
      >
        {featured && (
          <span style={{
            position: 'absolute', top: 18, right: 18,
            font: '500 10px/1 var(--font-mono)',
            letterSpacing: '0.08em', textTransform: 'uppercase',
            color: '#1A0E08', background: ACCENT,
            padding: '5px 9px', borderRadius: 999,
          }}>Start here</span>
        )}

        <div style={{
          font: '500 clamp(26px, 3vw, 34px)/1.1 var(--font-serif-classical)',
          letterSpacing: '-0.01em',
          color: featured ? FOAM : INK,
          marginBottom: 12,
          paddingRight: featured ? 90 : 0,
        }}>{t.name}</div>

        <div style={{
          font: '500 12px/1 var(--font-mono)',
          letterSpacing: '0.08em', textTransform: 'uppercase',
          color: featured ? FOAM_2 : INK_3,
          marginBottom: 18,
        }}>{t.price}</div>

        <p style={{
          font: '400 15px/1.5 var(--font-serif-literary)',
          fontStyle: 'italic',
          color: featured ? FOAM : INK_2,
          margin: '0 0 22px',
          minHeight: 46,
        }}>{t.blurb}</p>

        {/*<a
          href={t.ctaHref}
          className="btn"
          style={{
            justifyContent: 'center',
            marginBottom: 24,
            background: featured ? ACCENT : 'transparent',
            color: featured ? '#1A0E08' : INK,
            boxShadow: featured ? 'none' : `inset 0 0 0 1px ${HAIRLINE}`,
          }}
        >{t.cta}</a>*/}

        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
          {t.feats.map(f => (
            <li key={f} style={{
              position: 'relative',
              paddingLeft: 24,
              font: '400 14px/1.45 var(--font-sans)',
              color: featured ? FOAM_2 : INK_2,
            }}>
              <svg
                width="14" height="14" viewBox="0 0 24 24" fill="none"
                stroke={ACCENT} strokeWidth="2.4"
                strokeLinecap="round" strokeLinejoin="round"
                style={{ position: 'absolute', left: 0, top: 3 }}
              ><path d="M5 12l5 5 9-11"/></svg>
              {f}
            </li>
          ))}
        </ul>
      </div>
    );
  };

  return (
    <section className="sec" id="pricing">
      <div className="container">
        <div className="pricing-head">
          <div data-reveal>
            <span className="eyebrow">Pricing</span>
          </div>
          <div data-reveal data-reveal-delay="1">
            <h2 className="headline" style={{ marginBottom: 20 }}>
              Buy <em>once,</em> write forever.
            </h2>
            <p className="subhead">
              Story Builder is a one-time purchase.
              Local analysis runs on your own machine at no cost, and reviewers always read for free.
              Cloud sync and cloud analysis subscriptions cover ongoing costs on your behalf.
            </p>
          </div>
        </div>

        {/* Group 1 — get the app */}
        <div data-reveal className="pricing-grouplabel">Get Story Builder</div>
        <div className="pricing-grid">
          {appTiers.map(Card)}
        </div>

        {/* Group 2 — optional cloud subscriptions */}
        <div data-reveal className="pricing-grouplabel">Optional subscriptions</div>
        <div className="pricing-grid">
          {cloudTiers.map(Card)}
        </div>

        <p data-reveal style={{
          marginTop: 40,
          font: '400 14px/1.5 var(--font-sans)',
          color: INK_3,
          textAlign: 'center',
          maxWidth: '64ch',
          marginLeft: 'auto',
          marginRight: 'auto',
        }}>
          No enshittification.<br/>
          Features you pay for will never be moved behind a subscription.
        </p>
      </div>
    </section>
  );
}

window.Pricing = Pricing;