const { useState: useStatePr } = React;

const TIERS = [
  {
    name: 'Starter',
    setup: '$500–700',
    monthly: '$299',
    minutes: '500',
    bestFor: 'Single outlet, small business',
    features: [
      ['Custom-trained AI agent', true],
      ['Dashboard + recordings', true],
      ['Human handoff', true],
      ['Dedicated number', '1'],
      ['Urdu + English', true],
      ['Monthly performance report', false],
      ['Multi-location support', false],
      ['Bi-weekly strategy sessions', false],
    ],
  },
  {
    name: 'Growth',
    setup: '$700–900',
    monthly: '$599',
    minutes: '1,500',
    bestFor: 'Growing business, busy lines',
    star: true,
    features: [
      ['Custom-trained AI agent', true],
      ['Dashboard + recordings', true],
      ['Human handoff', true],
      ['Dedicated number', '1'],
      ['Urdu + English', true],
      ['Monthly performance report', true],
      ['Multi-location support', false],
      ['Bi-weekly strategy sessions', false],
    ],
  },
  {
    name: 'Pro',
    setup: '$1,000–1,500',
    monthly: '$999',
    minutes: '4,000',
    bestFor: 'High-volume, enterprise, multi-location',
    features: [
      ['Custom-trained AI agent', true],
      ['Dashboard + recordings', true],
      ['Human handoff', true],
      ['Dedicated number', '1'],
      ['Urdu + English', true],
      ['Monthly performance report', true],
      ['Multi-location support', true],
      ['Bi-weekly strategy sessions', true],
    ],
  },
];

function Pricing() {
  const [billing, setBilling] = useStatePr('monthly');
  const isMobile = useMediaQuery('(max-width: 768px)');
  const isNarrow = useMediaQuery('(max-width: 1024px)');

  return (
    <section id="pricing" style={{
      maxWidth: 1440, margin: '0 auto',
      padding: isMobile ? '32px 20px 64px' : '40px 48px 120px',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: isMobile ? 32 : 48, flexWrap: 'wrap', gap: isMobile ? 16 : 24 }}>
        <div>
          <div className="mono" style={{
            fontSize: 11, color: 'var(--ink-3)',
            letterSpacing: '0.1em', marginBottom: 16,
          }}>
            04 — PRICING
          </div>
          <h2 style={{
            fontSize: 'clamp(40px, 4.6vw, 64px)',
            lineHeight: 1.02,
            letterSpacing: '-0.02em',
            maxWidth: 800,
          }}>
            <span className="serif">Simple plans. </span>
            <span className="serif italic">Pay for what you use.</span>
          </h2>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: 4, background: 'var(--bg-2)', border: '1px solid var(--line)', borderRadius: 999 }}>
          {['monthly', 'annual'].map((b) => (
            <button key={b} onClick={() => setBilling(b)} style={{
              padding: '8px 16px',
              borderRadius: 999,
              fontSize: 13, fontWeight: 500,
              background: billing === b ? 'var(--ink)' : 'transparent',
              color: billing === b ? 'var(--bg)' : 'var(--ink-2)',
              transition: 'all 0.2s',
              textTransform: 'capitalize',
            }}>
              {b} {b === 'annual' && <span style={{ fontSize: 11, opacity: 0.7 }}>· save 15%</span>}
            </button>
          ))}
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isNarrow ? '1fr' : 'repeat(3, 1fr)', gap: 16 }}>
        {TIERS.map((t, i) => {
          const monthlyNum = parseInt(t.monthly.replace(/\D/g, ''));
          const displayMonthly = billing === 'annual'
            ? '$' + Math.round(monthlyNum * 0.85)
            : t.monthly;
          return (
            <div key={i} style={{
              background: t.star ? 'var(--ink)' : 'var(--bg)',
              color: t.star ? 'var(--bg)' : 'var(--ink)',
              border: t.star ? 'none' : '1px solid var(--line)',
              borderRadius: 20,
              padding: isMobile ? 24 : 32,
              position: 'relative',
              display: 'flex', flexDirection: 'column',
            }}>
              {t.star && (
                <div style={{
                  position: 'absolute', top: 18, right: 18,
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '4px 10px',
                  background: 'var(--accent)', color: 'white',
                  borderRadius: 999,
                  fontSize: 10, fontWeight: 600, letterSpacing: '0.08em',
                }} className="mono">
                  ★ MOST POPULAR
                </div>
              )}

              <div style={{ marginBottom: 24, paddingRight: (isMobile && t.star) ? 130 : 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: t.star ? 'oklch(0.7 0.01 60)' : 'var(--ink-3)', marginBottom: 4 }}>
                  {t.name}
                </div>
                <div style={{ fontSize: 13, color: t.star ? 'oklch(0.75 0.01 60)' : 'var(--ink-2)' }}>
                  {t.bestFor}
                </div>
              </div>

              <div style={{ marginBottom: 8, display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span className="serif" style={{
                  fontSize: isMobile ? 56 : 64, lineHeight: 1, letterSpacing: '-0.03em',
                }}>{displayMonthly}</span>
                <span style={{ fontSize: 14, color: t.star ? 'oklch(0.7 0.01 60)' : 'var(--ink-3)' }}>/mo</span>
              </div>

              <div className="mono" style={{ fontSize: 11, color: t.star ? 'oklch(0.65 0.01 60)' : 'var(--ink-3)', marginBottom: 24, letterSpacing: '0.04em' }}>
                + {t.setup} ONE-TIME SETUP
              </div>

              <div style={{
                padding: '12px 14px',
                background: t.star ? 'oklch(0.25 0.01 60)' : 'var(--bg-2)',
                borderRadius: 10,
                marginBottom: 24,
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              }}>
                <span style={{ fontSize: 13, color: t.star ? 'oklch(0.8 0.01 60)' : 'var(--ink-2)' }}>Call minutes</span>
                <span className="mono" style={{ fontSize: 14, fontWeight: 500 }}>
                  {t.minutes} <span style={{ color: t.star ? 'oklch(0.6 0.01 60)' : 'var(--ink-3)', fontSize: 11 }}>/ MO</span>
                </span>
              </div>

              <button style={{
                background: t.star ? 'var(--accent)' : 'var(--ink)',
                color: 'white',
                padding: '14px 22px',
                borderRadius: 999,
                fontSize: 14, fontWeight: 500,
                marginBottom: 28,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              }}>
                Choose {t.name}
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M3 6h6m-2-2 2 2-2 2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>

              <div style={{ borderTop: t.star ? '1px solid oklch(0.28 0.01 60)' : '1px solid var(--line-2)', paddingTop: 20, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {t.features.map(([label, val], j) => (
                  <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13 }}>
                    {val === true ? (
                      <span style={{
                        width: 16, height: 16, borderRadius: 999,
                        background: t.star ? 'var(--accent)' : 'var(--accent-soft)',
                        color: t.star ? 'white' : 'var(--accent-ink)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        flexShrink: 0,
                      }}>
                        <svg width="9" height="9" viewBox="0 0 9 9" fill="none"><path d="M1.5 4.5 3.5 6.5 7.5 2.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                      </span>
                    ) : val === false ? (
                      <span style={{ width: 16, height: 16, color: t.star ? 'oklch(0.45 0.01 60)' : 'var(--ink-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                        <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 5h6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
                      </span>
                    ) : (
                      <span className="mono" style={{
                        width: 16, height: 16, borderRadius: 4,
                        background: t.star ? 'oklch(0.28 0.01 60)' : 'var(--bg-2)',
                        color: t.star ? 'var(--bg)' : 'var(--ink)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 9, fontWeight: 600,
                        flexShrink: 0,
                      }}>{val}</span>
                    )}
                    <span style={{
                      color: val === false
                        ? (t.star ? 'oklch(0.5 0.01 60)' : 'var(--ink-3)')
                        : (t.star ? 'oklch(0.85 0.01 60)' : 'var(--ink-2)'),
                      textDecoration: val === false ? 'line-through' : 'none',
                    }}>
                      {label}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>

      <div style={{
        marginTop: 32,
        padding: isMobile ? 20 : 24,
        border: '1px dashed var(--line)',
        borderRadius: 16,
        display: 'flex',
        alignItems: isMobile ? 'stretch' : 'center',
        justifyContent: 'space-between',
        flexDirection: isMobile ? 'column' : 'row',
        flexWrap: 'wrap', gap: 16,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{
            width: 40, height: 40, borderRadius: 999,
            background: 'var(--bg-2)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 9h12M9 3v12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
          </div>
          <div>
            <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 2 }}>Need more than 4,000 minutes?</div>
            <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>Custom enterprise plans for chains, contact centers, and franchises.</div>
          </div>
        </div>
        <button style={{
          padding: isMobile ? '12px 18px' : '10px 18px',
          border: '1px solid var(--ink)',
          borderRadius: 999,
          fontSize: 13, fontWeight: 500,
          width: isMobile ? '100%' : 'auto',
          flexShrink: 0,
        }}>Talk to sales →</button>
      </div>
    </section>
  );
}

window.Pricing = Pricing;