// ─── How It Works Section ─────────────────────────────────
// Explains the core product: Smart ID Cards + Sensors + Cloud

function HowItWorksSection() {
  const steps = [
    {
      number: '01',
      title: 'The Smart ID Card',
      description: 'Every student wears a sleek, tamper-proof smart ID card. No charging, no apps, no effort — it works the moment they walk in.',
      detail: 'Deploy once. Runs maintenance-free for 2–3 years.',
      icon: (
        <svg style={{ width: 32, height: 32 }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
        </svg>
      ),
    },
    {
      number: '02',
      title: 'The Discreet Sensor',
      description: 'Small, hidden sensors placed at gates, classrooms, corridors, and buses detect students automatically as they move through campus.',
      detail: 'Invisible infrastructure. Zero disruption to teaching.',
      icon: (
        <svg style={{ width: 32, height: 32 }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
        </svg>
      ),
    },
    {
      number: '03',
      title: 'The Cloud Intelligence',
      description: 'Data flows securely to EduGuard\'s cloud. Parents get real-time alerts. Principals get dashboards. Eva analyses everything.',
      detail: 'Instant alerts. Zero manual effort. Complete visibility.',
      icon: (
        <svg style={{ width: 32, height: 32 }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
        </svg>
      ),
    },
  ];

  return (
    <section id="how-it-works" className="section" style={{ background: 'var(--bg-0)', position: 'relative', overflow: 'hidden' }}>
      {/* Subtle connecting line */}
      <div style={{
        position: 'absolute', top: '50%', left: 0, right: 0,
        height: 1, background: 'var(--line)',
        display: 'none',
      }} className="flow-line" />

      <div className="wrap">
        <SectionHeader
          eyebrow="How it works"
          title="Invisible tech."
          italicTail="Visible safety."
          subtitle="Three simple layers work together to give your school complete awareness — without changing a single process, installing apps, or training your staff."
          align="center"
        />

        {/* Safety callout */}
        <div className="safety-callout" style={{
          maxWidth: 720, margin: '0 auto 56px',
          padding: '20px 28px',
          background: 'rgba(26,92,151,0.04)',
          border: '1px solid rgba(26,92,151,0.12)',
          borderRadius: 16,
          display: 'flex', alignItems: 'center', gap: 16,
          textAlign: 'left',
        }}>
          <div style={{
            width: 44, height: 44, minWidth: 44, borderRadius: 12,
            background: 'rgba(26,92,151,0.08)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--saffron)',
          }}>
            <Icon.Shield style={{ width: 22, height: 22 }} />
          </div>
          <div>
            <div style={{ fontWeight: 600, fontSize: 14.5, color: 'var(--ink-0)', marginBottom: 4 }}>
              Student safety is our core mission
            </div>
            <div style={{ fontSize: 13.5, color: 'var(--ink-1)', lineHeight: 1.5 }}>
              Every feature — from live location tracking to zone violation alerts — exists to ensure that no child goes unaccounted for, and every parent knows their child is safe.
            </div>
          </div>
        </div>

        {/* 3-step flow */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 24,
          position: 'relative',
        }} className="hiw-grid">

          {steps.map((s, i) => (
            <div key={i} className="card" style={{
              padding: 32,
              textAlign: 'center',
              position: 'relative',
              transition: 'all 0.3s ease',
              cursor: 'default',
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; }}
            >
              {/* Step number */}
              <div className="mono" style={{
                position: 'absolute', top: 16, right: 20,
                fontSize: 11, letterSpacing: '0.15em', color: 'var(--saffron)', fontWeight: 600,
              }}>
                STEP {s.number}
              </div>

              {/* Icon */}
              <div style={{
                width: 72, height: 72, borderRadius: 20,
                background: 'linear-gradient(135deg, rgba(26,92,151,0.06) 0%, rgba(26,92,151,0.02) 100%)',
                border: '1px solid var(--line)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                margin: '0 auto 24px',
                color: 'var(--saffron)',
              }}>
                {s.icon}
              </div>

              {/* Title */}
              <h4 style={{ fontSize: 19, fontWeight: 600, color: 'var(--ink-0)', marginBottom: 12, letterSpacing: '-0.01em' }}>
                {s.title}
              </h4>

              {/* Description */}
              <p style={{ fontSize: 14, color: 'var(--ink-1)', lineHeight: 1.6, marginBottom: 16 }}>
                {s.description}
              </p>

              {/* Detail chip */}
              <div style={{
                display: 'inline-block',
                padding: '8px 16px',
                background: 'var(--bg-2)',
                borderRadius: 100,
                fontSize: 12,
                fontFamily: 'var(--font-mono)',
                color: 'var(--ink-2)',
                letterSpacing: '0.04em',
              }}>
                {s.detail}
              </div>

              {/* Arrow connector (except last) */}
              {i < steps.length - 1 && (
                <div style={{
                  position: 'absolute', right: -14, top: '50%', transform: 'translateY(-50%)',
                  width: 28, height: 28, borderRadius: '50%',
                  background: 'var(--bg-1)', border: '1px solid var(--line)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  zIndex: 2,
                  color: 'var(--saffron)',
                  fontSize: 14,
                }} className="hiw-arrow">
                  →
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .hiw-grid { grid-template-columns: 1fr !important; }
          .hiw-arrow { display: none !important; }
        }
        @media (max-width: 600px) {
          .safety-callout { flex-direction: column !important; align-items: flex-start !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { HowItWorksSection });