// ─── Segmented section: For Principals / Parents / Teachers ──
const SEGMENTS = {
  principals: {
    label: 'Principals & Directors',
    short: 'Principals',
    headline: 'Run a tighter, safer campus — with fewer staff, fewer incidents, fewer complaints.',
    kicker: 'For the people accountable for every child on campus.',
    points: [
      { title: 'Zero-friction attendance', body: 'Roll call happens automatically as students enter class. Teachers get 10 minutes back, every period.' },
      { title: 'Real-time safety command centre', body: 'See every student, every bus, every boundary — on one map. Get alerts before parents start calling.' },
      { title: 'Admissions ammunition', body: 'Show prospective parents live tracking, auto-attendance, and AI grading. Differentiate without price-cutting.' },
      { title: 'Operational clarity', body: 'Which rooms are over-used, which under-used, where students congregate. Plan your next block with data.' },
    ],
    metric: { value: 'Visibility', label: 'every child, every bus, every gate — always in view' },
  },
  parents: {
    label: 'Parents',
    short: 'Parents',
    headline: 'Know your child is safe. Without texting a teacher once.',
    kicker: 'The peace of mind you thought you had to pay a premium for.',
    points: [
      { title: 'Live bus tracking', body: 'See the exact bus position, ETA to your stop, and the moment your child boards or alights.' },
      { title: 'Campus check-ins', body: 'Entry and exit times, which block of the campus they are in — all of it, always visible.' },
      { title: 'Academic pulse', body: 'Your child\'s actual strengths and gaps. What the teacher saw, without having to wait for PTM.' },
      { title: 'Unified communication', body: 'Circulars, fee reminders, event notices, teacher notes — one app, no WhatsApp chaos.' },
    ],
    metric: { value: 'Live', label: 'bus position, campus entry, academic pulse — in one app' },
  },
  teachers: {
    label: 'Teachers',
    short: 'Teachers',
    headline: 'Less admin. More actual teaching.',
    kicker: 'Built by people who sat through enough PTMs.',
    points: [
      { title: 'Attendance that does itself', body: 'No more "say present" rituals. Open the lesson, start teaching.' },
      { title: 'Bulk grading, finally fair', body: 'Upload a stack of answer sheets. Get marks, weak topics per student, class-wide patterns — in minutes.' },
      { title: 'Know your class', body: 'Which students are struggling. Which topics need re-teaching. Which peer groups need gentle mixing-up.' },
      { title: 'Eva, your co-pilot', body: 'Ask her anything — attendance patterns, grade drops, behavioural changes. She has the data.' },
    ],
    metric: { value: 'Auto', label: 'attendance, grading, reports — from the moment class starts' },
  },
};

function SegmentedSection() {
  const [active, setActive] = useState('principals');
  const seg = SEGMENTS[active];

  return (
    <section id="platform" className="section" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="wrap">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <Eyebrow>One platform · Three audiences</Eyebrow>
          <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 60px)', marginTop: 18, maxWidth: 780, marginLeft: 'auto', marginRight: 'auto' }}>
            Every stakeholder gets exactly what they need. <em className="display-italic" style={{ color: 'var(--saffron)' }}>Nothing more.</em>
          </h2>
        </div>

        {/* Segment switcher */}
        <div className="seg-switcher" style={{
          display: 'flex', justifyContent: 'center', gap: 0,
          background: 'var(--bg-2)',
          padding: 5,
          borderRadius: 100,
          maxWidth: 540,
          margin: '0 auto 56px',
          border: '1px solid var(--line)',
        }}>
          {Object.entries(SEGMENTS).map(([key, s]) => (
            <button
              key={key}
              onClick={() => setActive(key)}
              style={{
                flex: 1,
                padding: '12px 20px',
                borderRadius: 100,
                border: 'none',
                background: active === key ? 'var(--ink-0)' : 'transparent',
                color: active === key ? 'var(--bg-1)' : 'var(--ink-1)',
                fontFamily: 'var(--font-sans)',
                fontSize: 14,
                fontWeight: 500,
                cursor: 'pointer',
                transition: 'all 0.25s',
                letterSpacing: '-0.005em',
              }}
            >
              For {s.short}
            </button>
          ))}
        </div>

        {/* Content */}
        <div key={active} className="fade-up" style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 0.95fr) minmax(0, 1.1fr)',
          gap: 60,
          alignItems: 'start',
        }}>
          {/* Left — narrative */}
          <div style={{ position: 'sticky', top: 100 }}>
            <div style={{ color: 'var(--saffron)', fontSize: 14, fontWeight: 500, fontFamily: 'var(--font-mono)', letterSpacing: '0.08em', marginBottom: 16, textTransform: 'uppercase' }}>
              {seg.kicker}
            </div>
            <h3 className="display" style={{ fontSize: 'clamp(32px, 4vw, 48px)', marginBottom: 28, letterSpacing: '-0.02em' }}>
              {seg.headline}
            </h3>

            {/* Metric card */}
            <div className="card card-elevated" style={{
              padding: 28,
              background: 'linear-gradient(135deg, var(--bg-1) 0%, var(--saffron-soft) 180%)',
              borderColor: 'var(--saffron-soft)',
              marginBottom: 24,
            }}>
              <div className="metric-flex" style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
                <div className="display" style={{ fontSize: 72, color: 'var(--saffron)', lineHeight: 1, letterSpacing: '-0.04em' }}>
                  {seg.metric.value}
                </div>
                <div style={{ color: 'var(--ink-1)', fontSize: 14, lineHeight: 1.4 }}>
                  {seg.metric.label}
                </div>
              </div>
            </div>

            <div style={{ color: 'var(--ink-2)', fontSize: 13, fontStyle: 'italic' }}>
              — What every EduGuard campus runs on, from day one.
            </div>
          </div>

          {/* Right — point list */}
          <div style={{ display: 'grid', gap: 18 }}>
            {seg.points.map((p, i) => (
              <div key={i} className="card" style={{
                padding: 26,
                display: 'grid',
                gridTemplateColumns: '42px 1fr',
                gap: 20,
                animation: `fade-up 0.6s ${0.1 + i * 0.08}s backwards`,
              }}>
                <div style={{
                  width: 42, height: 42, borderRadius: 11,
                  background: 'var(--bg-2)',
                  border: '1px solid var(--line)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--saffron)',
                  fontFamily: 'var(--font-display)',
                  fontSize: 20,
                  fontStyle: 'italic',
                }}>
                  {String(i + 1).padStart(2, '0')}
                </div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 6, color: 'var(--ink-0)' }}>
                    {p.title}
                  </div>
                  <div style={{ color: 'var(--ink-1)', fontSize: 14.5, lineHeight: 1.55 }}>
                    {p.body}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          #platform .wrap > div:last-of-type { grid-template-columns: 1fr !important; gap: 32px !important; }
          #platform .wrap > div:last-of-type > div:first-child { position: static !important; }
        }
        @media (max-width: 600px) {
          .seg-switcher { flex-direction: column !important; border-radius: 16px !important; }
          .seg-switcher button { border-radius: 12px !important; }
          .metric-flex { flex-wrap: wrap !important; gap: 8px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { SegmentedSection });