/* global React */
const { useState: useStatePrice } = React;

const FEATURES = [
  { label: 'Follow = Rank Overlay (Rocket League, Apex Legends, Valorant, Call of Duty, Dead by Daylight, Fortnite, Marvel Rivals, Rainbow 6)', free: false },
  { label: 'Gift Tracker', free: false },
  { label: 'Top Gift', free: false },
  { label: 'Top Streak', free: false },
  { label: 'Custom Overlays (Follows, Heart Me, 1 Custom Slot)', labelPremium: 'Custom Overlays (Follows, Heart Me, 3 Custom Slots)', free: true },
  { label: 'Set Sound for Specific Events', free: true },
  { label: 'Gift Feed', free: true },
  { label: 'Goal Overlays', free: true },
  { label: 'Like Leaderboard', free: true },
  { label: 'Gift Leaderboard', free: true },
  { label: 'Bubbly Controller Engine Overlay (PS5, PS4, and Xbox)', free: true },
  { label: 'Bubbly Spotify Engine Overlay', free: true },
  { label: 'Gift Browser', free: true },
  { label: 'Battles!', free: false },
  { label: 'Chat Battle Themes', free: false },
  { label: 'TTS (Text-to-Speech)', free: false },
  { label: 'Custom Commands', free: false },
];

function CheckIcon() {
  return (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round" style={{flexShrink: 0}}>
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
}

function XIcon() {
  return (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#ff4d6d" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round" style={{flexShrink: 0}}>
      <line x1="18" y1="6" x2="6" y2="18" />
      <line x1="6" y1="6" x2="18" y2="18" />
    </svg>
  );
}

function FeatureList({ showFree }) {
  return (
    <ul>
      {FEATURES.map((f, i) => (
        <li key={i} style={{display: 'flex', alignItems: 'flex-start', gap: 8, opacity: showFree && !f.free ? 0.45 : 1}}>
          {showFree ? (f.free ? <CheckIcon /> : <XIcon />) : <CheckIcon />}
          <span>{!showFree && f.labelPremium ? f.labelPremium : f.label}</span>
        </li>
      ))}
    </ul>
  );
}

function Pricing() {
  const [yearly, setYearly] = useStatePrice(false);
  return (
    <section className="section" id="pricing">
      <div className="section-eyebrow">Pricing</div>
      <h2>Start free. <span className="grad">Upgrade when chat catches fire.</span></h2>
      <p className="section-sub">
        Premium unlocks deeper creator engines and advanced customization. Billing is simple Stripe, no account maze.
      </p>

      <div style={{display: 'inline-flex', marginTop: 24, background: 'rgba(255,255,255,0.5)', border: '1px solid var(--glass-border)', borderRadius: 999, padding: 4, boxShadow: 'var(--shadow-soft)'}}>
        <button onClick={() => setYearly(false)}
          style={{padding: '8px 18px', borderRadius: 999, fontWeight: 800, fontSize: 13,
            background: !yearly ? 'var(--grad-brand)' : 'transparent',
            color: !yearly ? 'white' : 'var(--ink-soft)'}}>Monthly</button>
        <button onClick={() => setYearly(true)}
          style={{padding: '8px 18px', borderRadius: 999, fontWeight: 800, fontSize: 13,
            background: yearly ? 'var(--grad-brand)' : 'transparent',
            color: yearly ? 'white' : 'var(--ink-soft)'}}>
          Yearly <span style={{fontSize: 11, marginLeft: 4, color: yearly ? 'white' : '#ec4899', fontWeight: 800}}>· 2 Months FREE!</span>
        </button>
      </div>

      <div className="pricing-grid">
        <div className="price-card">
          <div className="tier">Free</div>
          <div className="price">$0<span className="per"> / forever</span></div>
          <p className="blurb">Everything you need to make your stream feel alive.</p>
          <FeatureList showFree={true} />
          <a href="#" className="btn btn-ghost" style={{width: '100%', textAlign: 'center', textDecoration: 'none'}}>Download free</a>
        </div>
        <div className="price-card premium">
          <div className="tier">Premium</div>
          <div className="price">
            {yearly ? '$8' : '$10'}<span className="per"> / month</span>
            {yearly && <span className="yearly-pill">$96 / yr</span>}
            {yearly && <span style={{fontSize: 13, fontWeight: 800, color: '#ec4899', marginLeft: 8}}>2 Months FREE!</span>}
          </div>
          <p className="blurb">Unlock the engines that turn streams into shows.</p>
          <FeatureList showFree={false} />
          <button className="btn btn-primary" style={{width: '100%'}}>Upgrade to Premium in the Bubbly App</button>
        </div>
      </div>
    </section>
  );
}