// Pricing section — three tiers, with the middle highlighted.

const PricingCard = ({ tier, price, sub, blurb, features, cta, highlighted, delay }) => (
  <div className="reveal" style={{
    transitionDelay: `${delay}ms`,
    padding: '36px 32px 32px',
    borderRadius: 'var(--radius-lg)',
    background: highlighted ? 'var(--fg)' : 'var(--card-solid)',
    color: highlighted ? 'var(--bg)' : 'var(--fg)',
    border: '1px solid ' + (highlighted ? 'var(--fg)' : 'var(--line)'),
    display: 'flex',
    flexDirection: 'column',
    position: 'relative',
    boxShadow: highlighted ? 'var(--shadow-lg)' : 'none',
    transform: highlighted ? 'translateY(-8px)' : 'none',
  }}>
    {highlighted && (
      <div style={{
        position: 'absolute',
        top: -12,
        left: 32,
        background: 'var(--gold)',
        color: '#1A1A1A',
        fontSize: 11,
        fontWeight: 600,
        padding: '5px 12px',
        borderRadius: 999,
        letterSpacing: '0.04em',
      }}>Most practices</div>
    )}
    <div style={{ marginBottom: 24 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <h3 style={{ fontSize: 22, color: 'inherit' }}>{tier}</h3>
      </div>
      <p style={{ fontSize: 13, color: highlighted ? 'rgba(245,241,232,0.6)' : 'var(--fg-faint)', marginTop: 4 }}>{blurb}</p>
    </div>

    <div style={{ marginBottom: 28 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <div className="serif" style={{ fontSize: 56, color: 'inherit', lineHeight: 1, letterSpacing: '-0.02em' }}>{price}</div>
        <div style={{ fontSize: 14, color: highlighted ? 'rgba(245,241,232,0.6)' : 'var(--fg-faint)' }}>{sub}</div>
      </div>
    </div>

    <button className="btn btn-lg" style={{
      width: '100%',
      background: highlighted ? 'var(--gold)' : 'transparent',
      color: highlighted ? '#1A1A1A' : 'var(--fg)',
      border: '1px solid ' + (highlighted ? 'var(--gold)' : 'var(--line-strong)'),
      justifyContent: 'center',
      marginBottom: 28,
    }}>
      {cta}
    </button>

    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      {features.map((f, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13, color: highlighted ? 'rgba(245,241,232,0.85)' : 'var(--fg-mute)', lineHeight: 1.5 }}>
          <span style={{ color: highlighted ? 'var(--gold-soft)' : 'var(--gold-deep)', marginTop: 2, flexShrink: 0 }}><Icon name="check" size={13} stroke={2} /></span>
          <span>{f}</span>
        </div>
      ))}
    </div>
  </div>
);

const Pricing = () => {
  return (
    <section id="pricing" style={{ background: 'var(--bg-soft)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, gap: 40, flexWrap: 'wrap' }}>
          <div className="reveal" style={{ maxWidth: 640 }}>
            <div className="eyebrow" style={{ marginBottom: 24 }}>Pricing</div>
            <h2>Less than the cost of one lost case per year.</h2>
          </div>
          <p className="lede reveal" style={{ maxWidth: 420 }}>
            Free for your first ten plans. After that, choose the tier that
            fits — every plan downgrades or cancels with one click.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 24, alignItems: 'start' }}>
          <PricingCard
            tier="Solo"
            price="$199"
            sub="/month"
            blurb="One specialist, unlimited treatment plans."
            cta="Start free trial"
            delay={0}
            features={[
              'Unlimited patient plans',
              'AI-generated explanations',
              'Full 3D animation library',
              'Mobile share via WhatsApp / SMS / Email',
              'Branded patient experience',
              'Email support',
            ]}
          />
          <PricingCard
            tier="Practice"
            price="$399"
            sub="/month"
            highlighted
            blurb="Up to 5 providers. Built for specialist clinics."
            cta="Start free trial"
            delay={80}
            features={[
              'Everything in Solo',
              'Up to 5 providers, unlimited staff seats',
              'Multi-provider branding',
              'Patient-side analytics',
              'Treatment plan library + templates',
              'Priority human support · ~2 hr response',
              'Onboarding session for your team',
            ]}
          />
          <PricingCard
            tier="Group"
            price="Custom"
            sub=""
            blurb="Multi-location, DSO, or 6+ specialists."
            cta="Talk to us"
            delay={160}
            features={[
              'Everything in Practice',
              'Unlimited providers and locations',
              'Roll-up analytics across clinics',
              'Custom data residency',
              'SSO + audit log export',
              'Named customer success contact',
              'Co-branded marketing partnership',
            ]}
          />
        </div>

        <div className="reveal" style={{
          marginTop: 64,
          padding: '20px 28px',
          borderRadius: 999,
          background: 'var(--card-solid)',
          border: '1px solid var(--line)',
          display: 'flex',
          gap: 24,
          alignItems: 'center',
          justifyContent: 'center',
          flexWrap: 'wrap',
          maxWidth: 720,
          margin: '64px auto 0',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--fg-mute)' }}>
            <Icon name="check" size={14} /> 14-day free trial
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--fg-mute)' }}>
            <Icon name="check" size={14} /> No card to start
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--fg-mute)' }}>
            <Icon name="check" size={14} /> Cancel any time
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Pricing });