// ─── Feature Grid ─────────────────────────────────────────
// Institutional 3-column grid. Icon + title + description.

const FEATURE_GROUPS = [
  {
    heading: 'Safety & Presence',
    sub: 'The foundation. Every child accounted for, every moment of the school day.',
    features: [
      { icon: 'Pin', title: 'Live campus tracking', body: 'Every child located to the room level, in real time. One map, zero paperwork.' },
      { icon: 'Shield', title: 'Unauthorised zone alerts', body: 'Staff rooms, storerooms, boundaries — instant alert if a student enters a restricted area.' },
      { icon: 'Check', title: 'Automatic attendance', body: 'Roll call happens the moment students enter class. Zero friction, zero disputes.' },
      { icon: 'Route', title: 'Student journey replay', body: 'Scrub any school day. See exactly where a child was, and when. Resolves disputes in seconds.' },
    ],
  },
  {
    heading: 'Parents & Buses',
    sub: 'The trust layer. Parents see what they need to, exactly when they need to.',
    features: [
      { icon: 'Bus', title: 'Live bus tracking', body: 'GPS + onboard verification. Parents see the bus, the route, and the exact moment their child boards.' },
      { icon: 'Bell', title: 'Smart communication hub', body: 'Circulars, fee reminders, PTM invites, emergency alerts — delivered to the right parent, instantly.' },
    ],
  },
  {
    heading: 'Intelligence & Academics',
    sub: 'The academic uplift. AI that understands your school, not just your data.',
    features: [
      { icon: 'Grade', title: 'AI bulk grading', body: 'Upload a class\'s answer sheets. Get marks, per-topic weaknesses, and classwide patterns in minutes.' },
      { icon: 'Brain', title: 'Deep subject analytics', body: 'Drill into sub-topics. Know which chapter, which concept, which student — ready for your next PTM.' },
      { icon: 'Chart', title: 'Risk profiling', body: 'A living score that flags students drifting — academically, behaviourally, or socially — before it\'s a crisis.' },
      { icon: 'Users', title: 'Peer network insights', body: 'See who spends time with whom. Spot unhealthy groupings early, celebrate positive friendships.' },
    ],
  },
];

function FeatureGrid() {
  return (
    <section id="features" className="section" style={{ background: 'var(--bg-0)' }}>
      <div className="wrap">
        <SectionHeader
          eyebrow="The full platform"
          title="Eleven modules."
          italicTail="One intelligent system."
          subtitle="Every feature works with every other. Attendance feeds into risk scores. Grading feeds into Eva. Bus tracking feeds into safety. Nothing is a silo."
          align="center"
        />

        {FEATURE_GROUPS.map((group, gi) => (
          <div key={gi} style={{ marginBottom: gi < FEATURE_GROUPS.length - 1 ? 72 : 0 }}>
            {/* Group heading */}
            <div style={{
              display: 'grid',
              gridTemplateColumns: '200px 1fr',
              gap: 40,
              marginBottom: 28,
              alignItems: 'end',
            }} className="group-row">
              <div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--saffron)', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 6, fontWeight: 500 }}>
                  0{gi + 1} / 03
                </div>
                <h3 style={{ fontSize: 20, letterSpacing: '-0.01em', margin: 0 }}>{group.heading}</h3>
              </div>
              <div style={{ color: 'var(--ink-1)', fontSize: 15.5, maxWidth: 640 }}>
                {group.sub}
              </div>
            </div>

            <div style={{ height: 1, background: 'var(--line)', marginBottom: 28 }} />

            {/* Feature cards */}
            <div style={{
              display: 'grid',
              gridTemplateColumns: `repeat(${group.features.length >= 4 ? 4 : group.features.length}, 1fr)`,
              gap: 16,
            }} className="feature-grid">
              {group.features.map((f, i) => {
                const IconC = Icon[f.icon];
                return (
                  <div key={i} className="card" style={{
                    padding: 24,
                    transition: 'all 0.25s',
                    cursor: 'default',
                  }}
                  onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--shadow-md)'; e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.borderColor = 'var(--line-strong)'; }}
                  onMouseLeave={e => { e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.borderColor = 'var(--line)'; }}
                  >
                    <div style={{
                      width: 44, height: 44,
                      borderRadius: 11,
                      background: 'var(--bg-2)',
                      border: '1px solid var(--line)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      color: 'var(--saffron)',
                      marginBottom: 18,
                    }}>
                      <IconC style={{ width: 22, height: 22 }} />
                    </div>
                    <div style={{ fontWeight: 600, fontSize: 15.5, marginBottom: 8, color: 'var(--ink-0)', letterSpacing: '-0.01em' }}>
                      {f.title}
                    </div>
                    <div style={{ color: 'var(--ink-1)', fontSize: 13.5, lineHeight: 1.55 }}>
                      {f.body}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
      <style>{`
        @media (max-width: 1100px) { .feature-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 680px) { .feature-grid { grid-template-columns: 1fr !important; } .group-row { grid-template-columns: 1fr !important; gap: 12px !important; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { FeatureGrid });