/* global React, INK, CREAM, PULSE, GradText, Reveal, SectionHead, SectionShell, SB_EASE, MShell, MHead */
// § 15 — Pricing. Three tiers from the approved pricing sheet; desktop + mobile renderers.

const PRICE_TIERS = [
  { name: 'Starter', desc: 'Perfect for casual creators and testing ideas.', price: '$14.99', week: '($3.75/week)', credits: '30 credits/month', per: '$0.50 per credit',
    feats: ['30 Credits / month', '1 character slot (max)', '~30 AI images per month', '~50 minutes of text-to-speech', 'Reference to image', 'Custom aspect ratios', 'Background editing', 'Video generation (5 sec)'] },
  { name: 'Creator', desc: 'For professionals who need consistent high-quality output.', price: '$59.99', week: '($15.00/week)', credits: '150 credits/month', per: '$0.40 per credit', popular: true, save: 'Save 43%',
    feats: ['All Starter features', '150 Credits / month', '1 character slot per subscription', '~150 AI images per month', '~250 minutes of text-to-speech', 'Inpainting & photo editing', 'Reimagine (style transfer)', 'TikTok/IG video cloning (coming soon)', '2K/4K image resolution'] },
  { name: 'Agency', desc: 'Volume generation and team collaboration tools.', price: '$149.99', week: '($37.50/week)', credits: '450 credits/month', per: '$0.33 per credit', save: 'Save 53%',
    feats: ['Everything in Creator', '450 Credits / month', '3 character slots per subscription', '~450 AI images per month', '~750 minutes of text-to-speech', '5 Team Seats'] },
];

const PriceCheck = () => (
  <svg width="13" height="13" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0, marginTop: 3 }}>
    <path d="M2.5 8.4l3.2 3.2L13.5 4" stroke="#22C55E" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const PriceCard = ({ t, compact = false }) => (
  <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', borderRadius: 20, background: '#fff', boxSizing: 'border-box',
    padding: compact ? '26px 20px 20px' : '34px 28px 28px',
    boxShadow: t.popular ? '0 24px 56px rgba(104,19,212,0.16), inset 0 0 0 2px var(--brand-purple-500)' : '0 12px 32px rgba(28,27,27,0.08), inset 0 0 0 1px rgba(28,27,27,0.08)' }}>
    {(t.popular || t.save) && (
      <div style={{ position: 'absolute', top: -12, right: t.popular ? '50%' : 18, transform: t.popular ? 'translateX(50%)' : 'none', display: 'flex', gap: 6 }}>
        {t.popular && <span style={{ borderRadius: 9999, padding: '5px 12px', background: PULSE, color: '#fff', fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>Most popular</span>}
        {t.save && <span style={{ borderRadius: 9999, padding: '5px 12px', background: '#22C55E', color: '#fff', fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>{t.save}</span>}
      </div>
    )}
    <div style={{ textAlign: 'center', marginBottom: compact ? 16 : 22 }}>
      <div style={{ fontSize: compact ? 18 : 21, fontWeight: 800, letterSpacing: '-0.01em', color: INK, marginBottom: 6 }}>{t.name}</div>
      <div style={{ fontSize: compact ? 11.5 : 12.5, lineHeight: 1.5, color: 'var(--text-secondary)', maxWidth: 250, margin: '0 auto' }}>{t.desc}</div>
    </div>
    <div style={{ textAlign: 'center', marginBottom: compact ? 16 : 22 }}>
      <div>
        <span style={{ font: `800 ${compact ? 34 : 40}px/1 var(--font-sans)`, letterSpacing: '-0.03em', color: INK }}>{t.price}</span>
        <span style={{ fontSize: compact ? 13 : 15, fontWeight: 600, color: 'var(--text-mute)' }}>/mo</span>
      </div>
    </div>
    <div style={{ display: 'flex', justifyContent: 'center', flex: 1 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: compact ? 11 : 10 }}>
        {t.feats.map(f => (
          <span key={f} style={{ display: 'flex', gap: 9, alignItems: 'flex-start', fontSize: compact ? 13.5 : 13, lineHeight: 1.45, color: INK }}>
            <PriceCheck />{f}
          </span>
        ))}
      </div>
    </div>
    <div style={{ marginTop: compact ? 20 : 28 }}>
      <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: compact ? 42 : 48, borderRadius: 9999, cursor: 'pointer',
        background: t.popular ? PULSE : INK, color: '#fff', fontSize: compact ? 11.5 : 12.5, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase',
        boxShadow: t.popular ? '0 12px 30px -6px rgba(104,19,212,0.55)' : 'none' }} data-sz-cta={'pricing-' + t.name.toLowerCase()} onClick={(e) => window.szGo && window.szGo(window.SZ_SIGNUP_URL, e.currentTarget.getAttribute('data-sz-cta'))}>Get started</span>
    </div>
  </div>
);

const PricingSection = () => (
  <SectionShell bg="#fff">
    <SectionHead num="15" center title={<span>Start <GradText>creating.</GradText></span>}
      sub="Three tiers, one studio. Cancel anytime — your Character stays yours." />
    <Reveal delay={140}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22, alignItems: 'stretch', maxWidth: 1040, margin: '52px auto 0' }}>
        {PRICE_TIERS.map(t => <PriceCard key={t.name} t={t} />)}
      </div>
    </Reveal>
  </SectionShell>
);

const MPricingSection = () => (
  <MShell bg="#fff">
    <MHead title={<span>Start <GradText>creating.</GradText></span>}
      sub="Three tiers, one studio. Cancel anytime — your Character stays yours." />
    <Reveal delay={140}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24, marginTop: 32 }}>
        {PRICE_TIERS.map(t => <PriceCard key={t.name} t={t} compact />)}
      </div>
    </Reveal>
  </MShell>
);

Object.assign(window, { PricingSection, MPricingSection });