function Included() {
  const isMobile = useMediaQuery('(max-width: 768px)');
  const isNarrow = useMediaQuery('(max-width: 1024px)');
  const features = [
    { label: 'AI voice agent', detail: 'Custom-trained on your business data.', icon: 'voice' },
    { label: 'Dedicated number', detail: 'US or local. Yours forever.', icon: 'phone' },
    { label: 'Personal dashboard', detail: 'Logs, transcripts, recordings.', icon: 'dash' },
    { label: 'Live human handoff', detail: 'Smooth transfer when needed.', icon: 'handoff' },
    { label: '24/7 availability', detail: 'No staff, no holidays, no hold.', icon: 'clock' },
    { label: 'Urdu + English', detail: 'Switches mid-conversation.', icon: 'lang' },
    { label: 'Onboarding included', detail: 'We set up everything for you.', icon: 'setup' },
    { label: 'Real-time logging', detail: 'Every call, every detail, searchable.', icon: 'log' },
  ];

  const Icon = ({ kind }) => {
    const props = { width: 18, height: 18, viewBox: '0 0 18 18', fill: 'none' };
    const stroke = { stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' };
    switch (kind) {
      case 'voice': return <svg {...props}><path d="M9 2v9m-3-2 3 3 3-3M3 14h12" {...stroke}/></svg>;
      case 'phone': return <svg {...props}><path d="M3 4.5C3 3.67 3.67 3 4.5 3h2L8 6 6 7c.83 2.5 2.5 4.17 5 5l1-2 3 1.5v2c0 .83-.67 1.5-1.5 1.5C7.6 15 3 10.4 3 4.5Z" {...stroke}/></svg>;
      case 'dash': return <svg {...props}><rect x="2" y="3" width="14" height="11" rx="1.5" {...stroke}/><path d="M2 7h14M6 14v-4" {...stroke}/></svg>;
      case 'handoff': return <svg {...props}><path d="M3 9h12m-3-3 3 3-3 3" {...stroke}/></svg>;
      case 'clock': return <svg {...props}><circle cx="9" cy="9" r="6.5" {...stroke}/><path d="M9 5v4l2.5 2" {...stroke}/></svg>;
      case 'lang': return <svg {...props}><path d="M2 5h7M5 3v2m1.5 0c0 3-2 5-4.5 6m2-4c.5 1.5 2 3.5 4 4.5M11 14l2.5-6 2.5 6m-4-2h3" {...stroke}/></svg>;
      case 'setup': return <svg {...props}><circle cx="9" cy="9" r="2.5" {...stroke}/><path d="M9 1v2m0 12v2m6-8h2M1 9h2m11.5-5.5L13 5M5 13l-1.5 1.5m11 0L13 13M5 5 3.5 3.5" {...stroke}/></svg>;
      case 'log': return <svg {...props}><rect x="3" y="2" width="11" height="14" rx="1.5" {...stroke}/><path d="M6 6h5M6 9h5M6 12h3" {...stroke}/></svg>;
      default: return null;
    }
  };

  return (
    <section style={{
      maxWidth: 1440, margin: '0 auto',
      padding: isMobile ? '64px 20px' : '120px 48px',
    }}>
      <div style={{ marginBottom: isMobile ? 36 : 56, maxWidth: 720 }}>
        <div className="mono" style={{
          fontSize: 11, color: 'var(--ink-3)',
          letterSpacing: '0.1em', marginBottom: 16,
        }}>
          03 — WHAT'S INCLUDED
        </div>
        <h2 style={{
          fontSize: 'clamp(40px, 4.6vw, 64px)',
          lineHeight: 1.02,
          letterSpacing: '-0.02em',
        }}>
          <span className="serif">One plan, </span>
          <span style={{ fontWeight: 500 }}>everything you need</span>
          <span className="serif"> to never miss </span>
          <span className="serif italic">another call.</span>
        </h2>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr 1fr' : isNarrow ? '1fr 1fr' : 'repeat(4, 1fr)',
        gap: 1,
        background: 'var(--line)',
        border: '1px solid var(--line)',
        borderRadius: 20,
        overflow: 'hidden',
      }}>
        {features.map((f, i) => (
          <div key={i} style={{
            background: 'var(--bg)',
            padding: isMobile ? '24px 18px' : '32px 24px',
            minHeight: isMobile ? 150 : 180,
            display: 'flex', flexDirection: 'column', gap: 16,
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 10,
              background: 'var(--accent-soft)',
              color: 'var(--accent-ink)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon kind={f.icon} />
            </div>
            <div>
              <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 6, letterSpacing: '-0.01em' }}>
                {f.label}
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                {f.detail}
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Included = Included;