/* Pricing tiers — 4 cards, one highlighted as "Most chosen" */
function PricingTiers() {
  const tiers = [
    {
      name: 'Starter',
      tag: 'For individuals & small teams',
      price: 'Free',
      sub: 'No platform fee · pay per use',
      cta: 'Open account',
      ctaStyle: 'ghost',
      features: [
        '1 multi-currency vIBAN (GBP, EUR, USD)',
        'SEPA Instant + Faster Payments',
        'USDC ↔ EUR / GBP / USD',
        'FX margin · 0.30%',
        '£25K monthly volume cap',
        'Email support',
      ],
    },
    {
      name: 'Growth',
      tag: 'Most chosen · scaling fintechs',
      price: '£99',
      priceUnit: '/ month',
      sub: 'Includes £250K of free volume',
      cta: 'Start 30-day trial',
      ctaStyle: 'primary',
      highlight: true,
      features: [
        '5 vIBANs · all G7 currencies',
        'All retail rails + on-chain settlement',
        'FX margin · 0.18%',
        '£2M monthly volume cap',
        'API + signed webhooks',
        'Slack + email support',
      ],
    },
    {
      name: 'Business',
      tag: 'Marketplaces & platforms',
      price: '£499',
      priceUnit: '/ month',
      sub: 'Includes £1.5M of free volume',
      cta: 'Contact sales',
      ctaStyle: 'ghost',
      features: [
        'Unlimited vIBANs',
        'Multi-entity accounts',
        'FX margin · 0.12% from £1M volume',
        'Travel Rule compliance built-in',
        'Dedicated solutions engineer',
        '99.95% uptime SLA',
      ],
    },
    {
      name: 'Enterprise',
      tag: 'Banks, brokers, regulated funds',
      price: 'Bespoke',
      sub: 'Custom contracts · volume-tiered FX',
      cta: 'Talk to us',
      ctaStyle: 'ghost',
      features: [
        'Bilateral pricing schedule',
        'Sub-bps FX margins available',
        'Dedicated liquidity pools',
        'Custom MLRO programme review',
        '24/7 named support team',
        'Bespoke audit & reporting',
      ],
    },
  ];

  return (
    <section id="tiers" className="m-section" style={{ paddingTop: 40 }}>
      <div className="m-container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div className="m-eyebrow" style={{ marginBottom: 14 }}>Plans</div>
            <h2 style={{
              font: '500 clamp(32px, 3.4vw, 44px)/1.1 var(--font-sans)',
              letterSpacing: '-0.025em', margin: 0, color: 'var(--m-fg)',
            }}>
              Four plans. Move from one to the next without re-papering.
            </h2>
          </div>
          <Toggle />
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
          gap: 16, alignItems: 'stretch',
        }}>
          {tiers.map((t) => <TierCard key={t.name} tier={t} />)}
        </div>
      </div>
    </section>
  );
}

function Toggle() {
  const [billing, setBilling] = React.useState('monthly');
  return (
    <div style={{
      display: 'inline-flex',
      background: 'var(--m-bg-elev, var(--m-card-bg))',
      border: '1px solid var(--m-border)',
      borderRadius: 999, padding: 3, position: 'relative',
    }}>
      {['monthly', 'annual'].map((b) => (
        <button key={b}
          onClick={() => setBilling(b)}
          style={{
            border: 'none', cursor: 'pointer',
            padding: '8px 16px', borderRadius: 999,
            font: '500 12.5px/1 var(--font-sans)',
            background: billing === b ? 'var(--m-fg)' : 'transparent',
            color: billing === b ? 'var(--m-bg)' : 'var(--m-fg-2)',
            transition: 'background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard)',
          }}>
          {b === 'monthly' ? 'Monthly' : 'Annual · save 15%'}
        </button>
      ))}
    </div>
  );
}

function TierCard({ tier }) {
  const [hover, setHover] = React.useState(false);

  const cardStyle = tier.highlight
    ? {
        background: 'var(--m-fg)',
        color: 'var(--m-bg)',
        border: '1px solid var(--m-fg)',
      }
    : {
        background: 'transparent',
        color: 'var(--m-fg)',
        border: '1px solid var(--m-border)',
      };

  const ctaStyle = tier.ctaStyle === 'primary'
    ? { background: 'var(--m-bg)', color: 'var(--m-fg)' }
    : tier.highlight
      ? { background: 'transparent', color: 'var(--m-bg)', border: '1px solid rgba(255,255,255,0.3)' }
      : { background: 'transparent', color: 'var(--m-fg)', border: '1px solid var(--m-border)' };

  return (
    <article
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        ...cardStyle,
        borderRadius: 20, padding: 28,
        display: 'flex', flexDirection: 'column', gap: 24,
        transition: 'transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard)',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hover
          ? (tier.highlight ? '0 24px 60px -20px rgba(20,15,49,0.45)' : '0 24px 60px -28px rgba(20,15,49,0.18)')
          : 'none',
        position: 'relative', overflow: 'hidden',
        minHeight: 540,
      }}>
      {tier.highlight && (
        <span style={{
          position: 'absolute', top: 18, right: 18,
          font: '500 10.5px/1 var(--font-sans)',
          letterSpacing: '0.12em', textTransform: 'uppercase',
          padding: '5px 9px', borderRadius: 999,
          background: 'rgba(255,255,255,0.14)', color: 'var(--m-bg)',
        }}>Most chosen</span>
      )}

      <div>
        <div style={{
          font: '500 14px/1 var(--font-sans)',
          letterSpacing: '-0.005em',
          color: tier.highlight ? 'rgba(255,255,255,0.7)' : 'var(--m-fg-2)',
        }}>{tier.name}</div>
        <div style={{
          font: '400 12.5px/1.3 var(--font-sans)',
          color: tier.highlight ? 'rgba(255,255,255,0.55)' : 'var(--m-fg-3)',
          marginTop: 4,
        }}>{tier.tag}</div>
      </div>

      <div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
          <span style={{
            font: '500 44px/1 var(--font-sans)',
            letterSpacing: '-0.028em',
            fontFamily: tier.price === 'Free' || tier.price === 'Bespoke' ? 'var(--font-sans)' : 'IBM Plex Mono, ui-monospace, monospace',
            fontVariantNumeric: 'tabular-nums',
          }}>{tier.price}</span>
          {tier.priceUnit && (
            <span style={{
              font: '500 14px/1 var(--font-sans)',
              color: tier.highlight ? 'rgba(255,255,255,0.55)' : 'var(--m-fg-3)',
            }}>{tier.priceUnit}</span>
          )}
        </div>
        <div style={{
          font: '400 13px/1.4 var(--font-sans)',
          color: tier.highlight ? 'rgba(255,255,255,0.62)' : 'var(--m-fg-2)',
          marginTop: 8,
        }}>{tier.sub}</div>
      </div>

      <button style={{
        ...ctaStyle,
        padding: '12px 16px',
        borderRadius: 12,
        font: '500 14px/1 var(--font-sans)',
        cursor: 'pointer', border: ctaStyle.border || 'none',
        transition: 'background var(--dur-base) var(--ease-standard)',
      }}>{tier.cta}</button>

      <div style={{
        height: 1, background: tier.highlight ? 'rgba(255,255,255,0.18)' : 'var(--m-border)',
      }} />

      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {tier.features.map((f) => (
          <li key={f} style={{
            display: 'flex', gap: 10, alignItems: 'flex-start',
            font: '400 14px/1.45 var(--font-sans)',
            color: tier.highlight ? 'rgba(255,255,255,0.85)' : 'var(--m-fg)',
          }}>
            <span aria-hidden="true" style={{
              flexShrink: 0, marginTop: 3,
              width: 14, height: 14,
              display: 'grid', placeItems: 'center',
              color: tier.highlight ? 'rgba(255,255,255,0.85)' : 'var(--m-fg-2)',
            }}>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M2.5 7.5l3 3 6-7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </span>
            {f}
          </li>
        ))}
      </ul>
    </article>
  );
}

window.PricingTiers = PricingTiers;