// LinkPass — Facial Recognition Demo for Educação page
// Pure CSS-keyframe animation: person walks → face scan → access granted → turnstile opens → loop

function FacialRecognitionDemo() {
  const isMobile = useMobile();
  return (
    <section style={{ padding: isMobile ? '60px 20px' : '100px 40px', background: T.bgDeep, position: 'relative', overflow: 'hidden' }}>
      <style>{`
        @keyframes lp-person-walk {
          0%, 8%   { transform: translateX(-260px); opacity: 0; }
          12%      { opacity: 1; }
          30%, 55% { transform: translateX(-30px); opacity: 1; }
          75%      { transform: translateX(140px); opacity: 1; }
          85%      { transform: translateX(220px); opacity: 0; }
          100%     { transform: translateX(220px); opacity: 0; }
        }
        @keyframes lp-cam-light {
          0%, 30%  { background: #06B6D4; box-shadow: 0 0 8px #06B6D4; }
          32%, 50% { background: #F59E0B; box-shadow: 0 0 12px #F59E0B; }
          55%, 80% { background: #10B981; box-shadow: 0 0 14px #10B981; }
          85%, 100%{ background: #06B6D4; box-shadow: 0 0 8px #06B6D4; }
        }
        @keyframes lp-scan-frame {
          0%, 30%   { opacity: 0; transform: scale(0.85); }
          35%, 50%  { opacity: 1; transform: scale(1); border-color: #F59E0B; }
          55%, 78%  { opacity: 1; transform: scale(1); border-color: #10B981; }
          82%, 100% { opacity: 0; transform: scale(0.85); }
        }
        @keyframes lp-scan-beam {
          0%, 30%   { opacity: 0; top: 0; }
          35%       { opacity: 1; top: 0; }
          50%       { opacity: 1; top: 100%; }
          51%, 100% { opacity: 0; top: 0; }
        }
        @keyframes lp-arm-rotate {
          0%, 55%   { transform: rotate(0deg); }
          62%, 78%  { transform: rotate(-78deg); }
          85%, 100% { transform: rotate(0deg); }
        }
        @keyframes lp-panel-state {
          0%, 30%   { --state-bg: rgba(6,182,212,0.08); --state-color: #06B6D4; --state-label: 'Aguardando aproximação'; }
          35%, 50%  { --state-bg: rgba(245,158,11,0.1); --state-color: #F59E0B; --state-label: 'Identificando rosto...'; }
          55%, 100% { --state-bg: rgba(16,185,129,0.1); --state-color: #10B981; --state-label: 'Acesso aprovado'; }
        }
        @keyframes lp-id-reveal {
          0%, 50%   { opacity: 0; transform: translateY(8px); }
          58%, 80%  { opacity: 1; transform: translateY(0); }
          88%, 100% { opacity: 0; transform: translateY(8px); }
        }
        @keyframes lp-pulse {
          0%, 100% { transform: scale(1); opacity: 0.8; }
          50%      { transform: scale(1.15); opacity: 0.3; }
        }
        @keyframes lp-grid-bg {
          0%, 30%, 85%, 100% { opacity: 0.1; }
          40%, 75%           { opacity: 0.3; }
        }
        .lp-anim * { box-sizing: border-box; }
      `}</style>

      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <SPBadge color="cyan">Reconhecimento Facial</SPBadge>
          <h2 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 28 : 44, letterSpacing: '-0.03em', color: T.white, margin: '16px 0 12px' }}>
            Acesso sem contato. Em milissegundos.
          </h2>
          <p style={{ fontSize: isMobile ? 15 : 17, color: T.muted, maxWidth: 580, margin: '0 auto' }}>
            Câmera inteligente integrada à catraca identifica o aluno e libera a passagem automaticamente — sem cartão, sem fila, sem dúvida.
          </p>
        </div>

        <div className="lp-anim" style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr', gap: 24, alignItems: 'stretch' }}>
          {/* ── Scene ── */}
          <div style={{
            position: 'relative',
            background: `linear-gradient(180deg, #0A1428 0%, #050810 100%)`,
            border: `1px solid ${T.border}`,
            borderRadius: 20,
            overflow: 'hidden',
            minHeight: isMobile ? 320 : 460,
            boxShadow: '0 24px 60px rgba(0,0,0,0.4)',
          }}>
            {/* Grid floor + back wall */}
            <div style={{ position: 'absolute', inset: 0, backgroundImage: `linear-gradient(rgba(6,182,212,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(6,182,212,0.08) 1px, transparent 1px)`, backgroundSize: '40px 40px', animation: 'lp-grid-bg 10s ease-in-out infinite' }} />

            {/* Floor highlight */}
            <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: '38%', background: 'linear-gradient(180deg, transparent 0%, rgba(6,182,212,0.05) 100%)' }} />

            {/* Glow */}
            <div style={{ position: 'absolute', top: '15%', left: '50%', transform: 'translateX(-50%)', width: 400, height: 200, background: 'radial-gradient(ellipse, rgba(6,182,212,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />

            {/* ─── Turnstile (centered) ─── */}
            <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', width: 280, height: 320 }}>
              {/* Left pillar */}
              <Pillar left={0} />
              {/* Right pillar */}
              <Pillar left={232} hasCamera />

              {/* Rotating arm (between pillars, attached to right pillar base) */}
              <div style={{
                position: 'absolute', left: 232, top: 200,
                transformOrigin: '12px 12px',
                animation: 'lp-arm-rotate 10s ease-in-out infinite',
              }}>
                <div style={{ width: 24, height: 24, borderRadius: '50%', background: '#1F2937', border: `2px solid ${T.border}` }} />
                <div style={{ position: 'absolute', top: 4, right: 24, width: 220, height: 14, background: 'linear-gradient(90deg, #1F2937, #475569)', borderRadius: 7, boxShadow: '0 2px 6px rgba(0,0,0,0.4)' }}>
                  <div style={{ position: 'absolute', top: 4, left: 8, right: 8, height: 6, background: 'linear-gradient(90deg, transparent, rgba(6,182,212,0.5), transparent)', borderRadius: 3 }} />
                </div>
              </div>
            </div>

            {/* ─── Person walking ─── */}
            <div style={{
              position: 'absolute', left: '50%', bottom: '8%',
              animation: 'lp-person-walk 10s ease-in-out infinite',
              willChange: 'transform',
            }}>
              <PersonSilhouette />
            </div>

            {/* ─── Face scan overlay (above person) ─── */}
            <div style={{
              position: 'absolute', left: 'calc(50% - 70px)', top: '24%',
              width: 140, height: 170, borderRadius: 12,
              border: '2px solid #F59E0B',
              animation: 'lp-scan-frame 10s ease-in-out infinite',
              pointerEvents: 'none',
            }}>
              {/* Corners */}
              {[
                { t: -2, l: -2, br: 'tl' },
                { t: -2, r: -2, br: 'tr' },
                { b: -2, l: -2, br: 'bl' },
                { b: -2, r: -2, br: 'br' },
              ].map(c => (
                <div key={c.br} style={{
                  position: 'absolute',
                  top: c.t, left: c.l, right: c.r, bottom: c.b,
                  width: 18, height: 18,
                  borderTop:    c.br.startsWith('t') ? '3px solid currentColor' : 'none',
                  borderBottom: c.br.startsWith('b') ? '3px solid currentColor' : 'none',
                  borderLeft:   c.br.endsWith('l')   ? '3px solid currentColor' : 'none',
                  borderRight:  c.br.endsWith('r')   ? '3px solid currentColor' : 'none',
                  color: 'inherit',
                }} />
              ))}
              {/* Scan beam */}
              <div style={{
                position: 'absolute', left: 6, right: 6, height: 2,
                background: 'linear-gradient(90deg, transparent, currentColor, transparent)',
                boxShadow: '0 0 12px currentColor',
                animation: 'lp-scan-beam 10s ease-in-out infinite',
              }} />
            </div>

            {/* ─── Label badge at bottom-left of scene ─── */}
            <div style={{ position: 'absolute', top: 18, left: 18, display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 100, background: 'rgba(7,11,24,0.7)', backdropFilter: 'blur(8px)', border: `1px solid ${T.border}`, fontSize: 11, color: T.mutedLt, fontWeight: 600, letterSpacing: '0.04em' }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#EF4444', animation: 'lp-pulse 2s ease-in-out infinite' }} />
              CAM 01 · Entrada Principal
            </div>
            <div style={{ position: 'absolute', top: 18, right: 18, padding: '5px 10px', borderRadius: 6, background: 'rgba(7,11,24,0.7)', backdropFilter: 'blur(8px)', border: `1px solid ${T.border}`, fontSize: 11, color: T.mutedLt, fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.05em' }}>
              07:42:18
            </div>
          </div>

          {/* ── Right panel: recognition state ── */}
          <RecognitionPanel />
        </div>
      </div>
    </section>
  );
}

function Pillar({ left, hasCamera }) {
  return (
    <div style={{ position: 'absolute', left, bottom: 0, width: 48, height: 280, background: 'linear-gradient(180deg, #475569 0%, #1F2937 100%)', borderRadius: '8px 8px 4px 4px', boxShadow: '0 4px 12px rgba(0,0,0,0.4)' }}>
      {/* Top cap */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 14, background: '#0F172A', borderRadius: '6px 6px 0 0', borderBottom: '1px solid #1E293B' }} />
      {/* Indicator LED */}
      <div style={{ position: 'absolute', top: 22, left: '50%', transform: 'translateX(-50%)', width: 8, height: 8, borderRadius: '50%', animation: 'lp-cam-light 10s ease-in-out infinite' }} />
      {/* RFID reader */}
      <div style={{ position: 'absolute', top: 40, left: 8, right: 8, height: 30, background: '#0F172A', borderRadius: 4, border: '1px solid #1E293B', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ width: 18, height: 18, border: '1.5px solid #475569', borderRadius: '50%', position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 4, border: '1.5px solid #475569', borderRadius: '50%' }} />
        </div>
      </div>
      {/* Body markings */}
      <div style={{ position: 'absolute', top: 90, left: 12, right: 12, fontSize: 7, color: '#64748B', fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.05em', textAlign: 'center' }}>LP-K2</div>

      {/* Camera unit ON TOP — only one pillar */}
      {hasCamera && (
        <div style={{ position: 'absolute', top: -78, left: -32, width: 112, height: 78 }}>
          {/* Mount arm */}
          <div style={{ position: 'absolute', bottom: 0, left: '50%', transform: 'translateX(-50%)', width: 8, height: 14, background: '#1F2937', borderRadius: 2 }} />
          {/* Camera body */}
          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 58, background: 'linear-gradient(180deg, #1E293B 0%, #0F172A 100%)', borderRadius: 10, border: '1px solid #334155', boxShadow: '0 4px 14px rgba(0,0,0,0.5)' }}>
            {/* Lens */}
            <div style={{ position: 'absolute', top: 12, left: 16, width: 34, height: 34, borderRadius: '50%', background: 'radial-gradient(circle at 35% 30%, #1E40AF 0%, #050810 70%)', border: '2px solid #0F172A' }}>
              <div style={{ position: 'absolute', top: 6, left: 7, width: 8, height: 8, borderRadius: '50%', background: 'rgba(6,182,212,0.5)' }} />
            </div>
            {/* IR LEDs ring */}
            <div style={{ position: 'absolute', top: 14, right: 12, width: 30, height: 30, borderRadius: '50%', border: '1px dashed #334155', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 1, padding: 4 }}>
              {[0,1,2,3,4,5,6,7,8].map(i => (
                <div key={i} style={{ width: 4, height: 4, borderRadius: '50%', background: i % 2 === 0 ? '#7F1D1D' : '#0F172A' }} />
              ))}
            </div>
            {/* Brand stripe */}
            <div style={{ position: 'absolute', bottom: 4, left: 8, fontSize: 7, color: T.cyan, fontFamily: "'JetBrains Mono', monospace", fontWeight: 700, letterSpacing: '0.1em' }}>LINKPASS · IPC-FR</div>
          </div>
        </div>
      )}
    </div>
  );
}

function PersonSilhouette() {
  return (
    <svg width="64" height="180" viewBox="0 0 64 180" fill="none" style={{ filter: 'drop-shadow(0 4px 12px rgba(6,182,212,0.3))' }}>
      {/* Head */}
      <circle cx="32" cy="22" r="16" fill="#1E293B" stroke="#475569" strokeWidth="1.5"/>
      {/* Backpack */}
      <path d="M14 56 Q14 50 18 50 L46 50 Q50 50 50 56 L50 90 Q50 96 46 96 L18 96 Q14 96 14 90 Z" fill="#0F172A" stroke="#334155" strokeWidth="1"/>
      <rect x="20" y="60" width="24" height="3" rx="1" fill="#475569"/>
      <rect x="20" y="68" width="24" height="3" rx="1" fill="#475569"/>
      {/* Body */}
      <path d="M16 50 Q16 40 32 40 Q48 40 48 50 L48 110 Q48 115 44 115 L20 115 Q16 115 16 110 Z" fill="#334155" stroke="#475569" strokeWidth="1"/>
      {/* Arms */}
      <rect x="8" y="50" width="8" height="48" rx="4" fill="#334155"/>
      <rect x="48" y="50" width="8" height="48" rx="4" fill="#334155"/>
      {/* Legs */}
      <rect x="20" y="115" width="9" height="50" rx="3" fill="#1E293B"/>
      <rect x="35" y="115" width="9" height="50" rx="3" fill="#1E293B"/>
      {/* Shoes */}
      <ellipse cx="24.5" cy="170" rx="8" ry="4" fill="#0F172A"/>
      <ellipse cx="39.5" cy="170" rx="8" ry="4" fill="#0F172A"/>
    </svg>
  );
}

function RecognitionPanel() {
  return (
    <div style={{
      background: T.bgCard, border: `1px solid ${T.border}`,
      borderRadius: 20, padding: 28, display: 'flex', flexDirection: 'column', gap: 18,
      minHeight: 460,
    }}>
      <style>{`
        @keyframes lp-status-cycle {
          0%, 30%   { background: rgba(6,182,212,0.10); color: #06B6D4; border-color: rgba(6,182,212,0.4); }
          35%, 50%  { background: rgba(245,158,11,0.12); color: #F59E0B; border-color: rgba(245,158,11,0.4); }
          55%, 100% { background: rgba(16,185,129,0.12); color: #10B981; border-color: rgba(16,185,129,0.4); }
        }
        @keyframes lp-status-dot {
          0%, 30%   { background: #06B6D4; }
          35%, 50%  { background: #F59E0B; }
          55%, 100% { background: #10B981; }
        }
        @keyframes lp-waiting-text { 0%, 30% { opacity: 1 } 31%, 100% { opacity: 0; display: none } }
        @keyframes lp-scanning-text { 0%, 30% { opacity: 0 } 35%, 50% { opacity: 1 } 51%, 100% { opacity: 0 } }
        @keyframes lp-approved-text { 0%, 50% { opacity: 0 } 55%, 100% { opacity: 1 } }
        @keyframes lp-conf-grow {
          0%, 35%  { width: 0%; }
          50%      { width: 62%; }
          65%, 100%{ width: 98%; }
        }
        @keyframes lp-conf-color {
          0%, 50%   { background: #F59E0B; }
          55%, 100% { background: #10B981; }
        }
      `}</style>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: 17, color: T.white }}>Reconhecimento em tempo real</div>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, color: T.muted, fontWeight: 600, letterSpacing: '0.05em' }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', animation: 'lp-status-dot 10s ease-in-out infinite', boxShadow: '0 0 6px currentColor' }} />
          AO VIVO
        </div>
      </div>

      {/* Status pill */}
      <div style={{
        padding: '14px 18px', borderRadius: 12,
        border: '1px solid', fontWeight: 700, fontSize: 14,
        animation: 'lp-status-cycle 10s ease-in-out infinite',
        display: 'flex', alignItems: 'center', gap: 12, position: 'relative', overflow: 'hidden',
      }}>
        <span style={{ position: 'absolute', animation: 'lp-waiting-text 10s ease-in-out infinite' }}>
          Aguardando aproximação...
        </span>
        <span style={{ position: 'absolute', animation: 'lp-scanning-text 10s ease-in-out infinite' }}>
          Identificando rosto...
        </span>
        <span style={{ position: 'absolute', animation: 'lp-approved-text 10s ease-in-out infinite' }}>
          ✓ Acesso aprovado
        </span>
        {/* Invisible spacer so the pill has the right height */}
        <span style={{ opacity: 0 }}>Identificando rosto...</span>
      </div>

      {/* Match details — appears after recognition */}
      <div style={{ background: T.bgSurface, borderRadius: 12, border: `1px solid ${T.border}`, padding: 18, animation: 'lp-id-reveal 10s ease-in-out infinite' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
          <div style={{ width: 56, height: 56, borderRadius: 10, background: 'linear-gradient(135deg, #06B6D4, #818CF8)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, color: '#07091A', fontSize: 22 }}>AL</div>
          <div>
            <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 700, fontSize: 16, color: T.white }}>Ana Lima</div>
            <div style={{ fontSize: 13, color: T.muted }}>6º ano B · Matrícula 2024-0142</div>
          </div>
        </div>

        {/* Confidence bar */}
        <div style={{ marginBottom: 10 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: T.muted, marginBottom: 5, fontWeight: 600, letterSpacing: '0.05em' }}>
            <span>CONFIANÇA</span>
            <span style={{ color: '#10B981' }}>98%</span>
          </div>
          <div style={{ height: 5, background: T.bgDeep, borderRadius: 4, overflow: 'hidden' }}>
            <div style={{ height: '100%', borderRadius: 4, animation: 'lp-conf-grow 10s ease-in-out infinite, lp-conf-color 10s ease-in-out infinite', boxShadow: '0 0 8px currentColor' }} />
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 14 }}>
          {[
            ['Entrada', '07:42:21'],
            ['Câmera', 'CAM 01'],
            ['Autorização', 'Válida'],
            ['Responsáveis', 'Ana Soares · Pedro L.'],
          ].map(([k, v]) => (
            <div key={k} style={{ background: T.bgDeep, padding: '8px 10px', borderRadius: 7 }}>
              <div style={{ fontSize: 10, color: T.muted, textTransform: 'uppercase', letterSpacing: '0.07em', marginBottom: 2 }}>{k}</div>
              <div style={{ fontSize: 12, color: T.white, fontWeight: 500 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 'auto', fontSize: 12, color: T.muted, textAlign: 'center', lineHeight: 1.6 }}>
        Tudo isso em <strong style={{ color: T.cyan }}>menos de 300ms</strong> — do reconhecimento à liberação da catraca.
      </div>
    </div>
  );
}

Object.assign(window, { FacialRecognitionDemo });