// Section 6, Pricing
const Pricing = () => {
  const tiers = [
    {
      name: 'Free',
      price: '£0',
      cadence: 'no credit card',
      features: [
        '1 challenge',
        'Up to 30 responses',
        'Full analysis & synthesis',
        'Company memory bank',
      ],
      cta: 'Get started',
      featured: false,
    },
    {
      name: 'Pro',
      price: '£149',
      cadence: '/ month · or £1,299/year',
      features: [
        'Unlimited challenges',
        'Up to 200 responses per challenge',
        'Rewards & points system',
        'Persistent memory bank',
        'Leaderboard',
      ],
      cta: 'Start Pro',
      featured: true,
    },
    {
      name: 'Team',
      price: '£249',
      cadence: '/ month',
      features: [
        'Everything in Pro',
        'Up to 5 executive accounts',
        'Shared memory bank',
        'Consolidated leaderboard',
      ],
      cta: 'Contact us',
      featured: false,
    },
  ];
  return (
    <section style={{ background: T.greenTint, padding: '120px 32px' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <SectionLabel>Pricing</SectionLabel>
          <h2 className="display" style={{
            fontSize: 'clamp(28px, 3.6vw, 44px)',
            fontWeight: 700, letterSpacing: -0.8, color: T.ink,
            lineHeight: 1.15,
          }}>
            Below procurement. Above the bar.
          </h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
          alignItems: 'stretch',
        }}>
          {tiers.map(t => <PriceCard key={t.name} t={t} />)}
        </div>

        <p style={{
          textAlign: 'center', marginTop: 32,
          fontSize: 13.5, color: T.ink3,
        }}>
          Pro subscribers receive a credit toward Harmoni's full platform if they upgrade.
        </p>
      </div>
    </section>
  );
};

const PriceCard = ({ t: tier }) => {
  const featured = tier.featured;
  return (
    <div style={{
      background: featured ? T.dark : T.paper,
      color: featured ? 'white' : T.ink,
      border: featured ? `1px solid ${T.dark}` : `1px solid ${T.border}`,
      borderRadius: 16,
      padding: 32,
      position: 'relative',
      transform: featured ? 'translateY(-8px)' : 'none',
      boxShadow: featured
        ? '0 24px 60px rgba(15,43,26,0.25)'
        : '0 4px 16px rgba(15,43,26,0.04)',
      display: 'flex', flexDirection: 'column',
    }}>
      {featured && (
        <div style={{
          position: 'absolute', top: -12, left: 32,
          background: T.orange, color: 'white',
          fontSize: 11, fontWeight: 700, letterSpacing: 0.6,
          padding: '5px 10px', borderRadius: 999,
          textTransform: 'uppercase',
        }}>
          Recommended
        </div>
      )}
      <div style={{
        fontSize: 15, fontWeight: 700, letterSpacing: 0.4,
        textTransform: 'uppercase',
        color: featured ? 'rgba(255,255,255,0.7)' : T.ink4,
        marginBottom: 14,
      }}>{tier.name}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 4 }}>
        <span className="display" style={{
          fontSize: 42, fontWeight: 700, letterSpacing: -1.2,
          color: featured ? 'white' : T.ink,
        }}>{tier.price}</span>
      </div>
      <div style={{
        fontSize: 13, color: featured ? 'rgba(255,255,255,0.6)' : T.ink4,
        marginBottom: 24,
      }}>{tier.cadence}</div>
      <div style={{
        height: 1, background: featured ? 'rgba(255,255,255,0.12)' : T.borderSoft,
        marginBottom: 20,
      }} />
      <ul style={{
        listStyle: 'none', flex: 1,
        display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 28,
      }}>
        {tier.features.map(f => (
          <li key={f} style={{
            display: 'flex', alignItems: 'flex-start', gap: 10,
            fontSize: 14.5, lineHeight: 1.45,
            color: featured ? 'rgba(255,255,255,0.92)' : T.ink2,
          }}>
            <span style={{
              color: featured ? T.orange : T.green,
              flexShrink: 0, marginTop: 2,
            }}>
              <Icon d="M5 13l4 4L19 7" size={14} sw={2.5} />
            </span>
            {f}
          </li>
        ))}
      </ul>
      <a href="#start" style={{
        textDecoration: 'none', textAlign: 'center',
        background: featured ? T.orange : 'transparent',
        color: featured ? 'white' : T.ink,
        border: featured ? 'none' : `1px solid ${T.border}`,
        padding: '13px 16px', borderRadius: 10,
        fontWeight: 600, fontSize: 15,
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        transition: 'all 200ms ease',
      }}
      onMouseEnter={e => {
        if (featured) {
          e.currentTarget.style.background = T.orangeHover;
        } else {
          e.currentTarget.style.background = T.greenTint;
          e.currentTarget.style.borderColor = T.green;
        }
      }}
      onMouseLeave={e => {
        if (featured) {
          e.currentTarget.style.background = T.orange;
        } else {
          e.currentTarget.style.background = 'transparent';
          e.currentTarget.style.borderColor = T.border;
        }
      }}>
        {tier.cta}
        <Icon d="M5 12h14M12 5l7 7-7 7" size={14} sw={2} />
      </a>
    </div>
  );
};

window.Pricing = Pricing;