// LinkPass — LPR (License Plate Recognition) Demo for Condomínio page
// Pure CSS-keyframe animation: car arrives → plate scan → barrier opens → car passes → loop

function LPRDemo() {
  const isMobile = useMobile();
  return (
    <section style={{ padding: isMobile ? '60px 20px' : '100px 40px', background: T.bgDeep, position: 'relative', overflow: 'hidden' }}>
      <style>{`
        @keyframes lp-car-drive {
          0%, 8%   { transform: translateX(-400px); }
          22%, 50% { transform: translateX(-110px); }
          60%      { transform: translateX(-90px); }
          80%      { transform: translateX(560px); }
          82%, 100%{ transform: translateX(560px); }
        }
        @keyframes lp-car-wheels {
          0%, 8%, 22%, 50%, 80%, 100% { animation-timing-function: linear; }
          0%   { transform: rotate(0); }
          8%   { transform: rotate(-720deg); }
          22%  { transform: rotate(-1200deg); }
          50%  { transform: rotate(-1200deg); }
          60%  { transform: rotate(-1280deg); }
          80%  { transform: rotate(-2200deg); }
          100% { transform: rotate(-2200deg); }
        }
        @keyframes lp-boom-open {
          0%, 55%  { transform: rotate(0deg); }
          65%, 78% { transform: rotate(-88deg); }
          88%, 100%{ transform: rotate(0deg); }
        }
        @keyframes lp-cam-light-condo {
          0%, 25%  { background: #818CF8; box-shadow: 0 0 8px #818CF8; }
          28%, 48% { background: #F59E0B; box-shadow: 0 0 12px #F59E0B; }
          52%, 82% { background: #10B981; box-shadow: 0 0 14px #10B981; }
          88%, 100%{ background: #818CF8; box-shadow: 0 0 8px #818CF8; }
        }
        @keyframes lp-plate-frame {
          0%, 25%  { opacity: 0; transform: scale(0.85); }
          28%, 45% { opacity: 1; transform: scale(1); border-color: #F59E0B; box-shadow: 0 0 14px rgba(245,158,11,0.5); }
          50%, 78% { opacity: 1; transform: scale(1); border-color: #10B981; box-shadow: 0 0 14px rgba(16,185,129,0.5); }
          85%, 100%{ opacity: 0; transform: scale(0.85); }
        }
        @keyframes lp-plate-beam {
          0%, 25%  { opacity: 0; left: 0; }
          28%      { opacity: 1; left: 0; }
          45%      { opacity: 1; left: 100%; }
          46%, 100%{ opacity: 0; left: 0; }
        }
        @keyframes lp-headlights {
          0%, 8%, 80%, 100% { opacity: 0; }
          15%, 78%          { opacity: 1; }
        }
        @keyframes lp-grid-glow-condo {
          0%, 25%, 85%, 100% { opacity: 0.12; }
          30%, 75%           { opacity: 0.28; }
        }
        @keyframes lp-condo-status {
          0%, 25%  { background: rgba(129,140,248,0.10); color: #818CF8; border-color: rgba(129,140,248,0.4); }
          28%, 45% { background: rgba(245,158,11,0.12); color: #F59E0B; border-color: rgba(245,158,11,0.4); }
          50%, 100%{ background: rgba(16,185,129,0.12); color: #10B981; border-color: rgba(16,185,129,0.4); }
        }
        @keyframes lp-condo-dot {
          0%, 25%  { background: #818CF8; }
          28%, 45% { background: #F59E0B; }
          50%, 100%{ background: #10B981; }
        }
        @keyframes lp-text-wait-c   { 0%, 25% { opacity: 1 } 26%, 100% { opacity: 0 } }
        @keyframes lp-text-scan-c   { 0%, 25% { opacity: 0 } 28%, 45% { opacity: 1 } 46%, 100% { opacity: 0 } }
        @keyframes lp-text-ok-c     { 0%, 45% { opacity: 0 } 50%, 100% { opacity: 1 } }
        @keyframes lp-id-reveal-c {
          0%, 45%   { opacity: 0; transform: translateY(8px); }
          55%, 82%  { opacity: 1; transform: translateY(0); }
          90%, 100% { opacity: 0; transform: translateY(8px); }
        }
        @keyframes lp-conf-grow-c {
          0%, 28%  { width: 0%; }
          45%      { width: 58%; }
          60%, 100%{ width: 96%; }
        }
        @keyframes lp-conf-color-c {
          0%, 45%  { background: #F59E0B; }
          50%, 100%{ background: #10B981; }
        }
        @keyframes lp-pulse-c {
          0%, 100% { transform: scale(1); opacity: 0.85; }
          50%      { transform: scale(1.2); opacity: 0.4; }
        }
      `}</style>

      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <SPBadge color="indigo">Leitura de Placa (LPR)</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' }}>
            Veículo na entrada? Abre sozinho.
          </h2>
          <p style={{ fontSize: isMobile ? 15 : 17, color: T.muted, maxWidth: 600, margin: '0 auto' }}>
            Câmera com IA lê a placa do morador, valida no cadastro e libera a cancela em segundos — sem controle remoto, sem fila, sem porteiro intervindo.
          </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 70%, #060B1A 100%)',
            border: `1px solid ${T.border}`,
            borderRadius: 20,
            overflow: 'hidden',
            minHeight: isMobile ? 300 : 460,
            boxShadow: '0 24px 60px rgba(0,0,0,0.4)',
          }}>
            {/* Grid background */}
            <div style={{ position: 'absolute', inset: 0, backgroundImage: `linear-gradient(rgba(129,140,248,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(129,140,248,0.1) 1px, transparent 1px)`, backgroundSize: '40px 40px', animation: 'lp-grid-glow-condo 10s ease-in-out infinite' }} />

            {/* Indigo wash glow */}
            <div style={{ position: 'absolute', top: '15%', right: '20%', width: 320, height: 220, background: 'radial-gradient(ellipse, rgba(129,140,248,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />

            {/* Road floor */}
            <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: '38%', background: 'linear-gradient(180deg, transparent 0%, rgba(129,140,248,0.06) 60%, rgba(129,140,248,0.12) 100%)' }}>
              {/* Lane markings (dashed center line) */}
              <div style={{ position: 'absolute', top: '55%', left: 0, right: 0, height: 3, backgroundImage: 'repeating-linear-gradient(90deg, rgba(255,255,255,0.15) 0 20px, transparent 20px 50px)' }} />
            </div>

            {/* ── Boom barrier (right side) ── */}
            <div style={{ position: 'absolute', right: 90, bottom: 70, width: 14, height: 180 }}>
              {/* Vertical pole */}
              <div style={{ position: 'absolute', left: 0, bottom: 0, width: 14, height: 180, background: 'linear-gradient(180deg, #FED15D 0%, #F59E0B 100%)', borderRadius: 3, boxShadow: '0 0 14px rgba(245,158,11,0.3)' }}>
                {/* Stripes */}
                {[20, 60, 100, 140].map(t => (
                  <div key={t} style={{ position: 'absolute', top: t, left: 0, width: '100%', height: 12, background: '#1F2937' }} />
                ))}
              </div>
              {/* Base */}
              <div style={{ position: 'absolute', left: -10, bottom: -6, width: 34, height: 18, background: '#0F172A', borderRadius: 4, border: '1px solid #1E293B' }} />
              {/* Top cap */}
              <div style={{ position: 'absolute', left: -3, top: -10, width: 20, height: 14, background: '#1F2937', borderRadius: 3, border: '1px solid #334155' }} />
              {/* Status LED on top */}
              <div style={{ position: 'absolute', top: -4, left: 4, width: 6, height: 6, borderRadius: '50%', animation: 'lp-cam-light-condo 10s ease-in-out infinite' }} />

              {/* Boom pivot point (zero-sized anchor at top of pole). The boom extends LEFT from here, and rotates UP around this point. */}
              <div style={{
                position: 'absolute',
                left: 7, top: 2, width: 0, height: 0,
                transformOrigin: '0 0',
                animation: 'lp-boom-open 10s ease-in-out infinite',
              }}>
                <div style={{
                  position: 'absolute',
                  right: 0, top: -4,
                  width: 170, height: 7,
                  background: 'repeating-linear-gradient(90deg, #FED15D 0 22px, #DC2626 22px 44px)',
                  borderRadius: 4,
                  boxShadow: '0 2px 6px rgba(0,0,0,0.4)',
                }}>
                  {/* Reflector dots */}
                  <div style={{ position: 'absolute', top: 2, left: '15%', width: 3, height: 3, borderRadius: '50%', background: '#FFFFFF', opacity: 0.7 }} />
                  <div style={{ position: 'absolute', top: 2, left: '45%', width: 3, height: 3, borderRadius: '50%', background: '#FFFFFF', opacity: 0.7 }} />
                  <div style={{ position: 'absolute', top: 2, left: '75%', width: 3, height: 3, borderRadius: '50%', background: '#FFFFFF', opacity: 0.7 }} />
                </div>
              </div>
            </div>

            {/* ── LPR Camera (mounted on its own pole, left of barrier) ── */}
            <div style={{ position: 'absolute', right: 130, bottom: 250, width: 12, height: 60, background: 'linear-gradient(180deg, #475569 0%, #1F2937 100%)' }}>
              {/* Camera head */}
              <div style={{ position: 'absolute', top: -42, left: -38, width: 90, height: 50, background: 'linear-gradient(180deg, #1E293B 0%, #0F172A 100%)', borderRadius: 8, border: '1px solid #334155', boxShadow: '0 4px 14px rgba(0,0,0,0.5)', transform: 'rotate(8deg)' }}>
                {/* Lens */}
                <div style={{ position: 'absolute', top: 10, left: 12, width: 28, height: 28, borderRadius: '50%', background: 'radial-gradient(circle at 35% 30%, #1E40AF 0%, #050810 70%)', border: '2px solid #0F172A' }}>
                  <div style={{ position: 'absolute', top: 5, left: 6, width: 7, height: 7, borderRadius: '50%', background: 'rgba(129,140,248,0.5)' }} />
                </div>
                {/* IR LED grid */}
                <div style={{ position: 'absolute', top: 12, right: 8, width: 24, height: 24, borderRadius: '50%', border: '1px dashed #334155', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 1, padding: 3 }}>
                  {[0,1,2,3,4,5,6,7,8].map(i => (
                    <div key={i} style={{ width: 3, height: 3, borderRadius: '50%', background: i % 2 === 0 ? '#7F1D1D' : '#0F172A' }} />
                  ))}
                </div>
                {/* Brand */}
                <div style={{ position: 'absolute', bottom: 2, left: 6, fontSize: 6, color: T.indigo, fontFamily: "'JetBrains Mono', monospace", fontWeight: 700, letterSpacing: '0.1em' }}>LP·LPR-300</div>
              </div>
            </div>

            {/* ── Car ── */}
            <div style={{
              position: 'absolute',
              left: '50%', bottom: '14%',
              animation: 'lp-car-drive 10s ease-in-out infinite',
              willChange: 'transform',
            }}>
              <div style={{ transform: 'scaleX(-1) scale(1.3)' }}>
                <CarSilhouette />
              </div>
            </div>

            {/* ── Plate scan frame (positioned at car's plate location when stopped) ── */}
            <div style={{
              position: 'absolute',
              left: 'calc(50% - 6px)', bottom: 'calc(14% - 14px)',
              width: 106, height: 30, borderRadius: 4,
              border: '2px solid #F59E0B',
              animation: 'lp-plate-frame 10s ease-in-out infinite',
              pointerEvents: 'none', overflow: 'hidden',
            }}>
              {/* 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: 10, height: 10,
                  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',
                }} />
              ))}
              {/* Scan beam (horizontal sweep) */}
              <div style={{
                position: 'absolute', top: 2, bottom: 2, width: 2,
                background: 'linear-gradient(180deg, transparent, currentColor, transparent)',
                boxShadow: '0 0 8px currentColor',
                animation: 'lp-plate-beam 10s ease-in-out infinite',
              }} />
            </div>

            {/* Scene badges */}
            <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-c 2s ease-in-out infinite' }} />
              LPR 02 · Portão Veículos
            </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' }}>
              18:33:04
            </div>
          </div>

          {/* ── Right panel ── */}
          <LPRPanel />
        </div>
      </div>
    </section>
  );
}

function CarSilhouette() {
  return (
    <div style={{ position: 'relative', width: 220, height: 90 }}>
      {/* Headlight glow */}
      <div style={{
        position: 'absolute', left: -50, top: 30, width: 60, height: 30,
        background: 'radial-gradient(ellipse, rgba(254,209,93,0.5) 0%, transparent 70%)',
        animation: 'lp-headlights 10s ease-in-out infinite',
      }} />

      <svg width="220" height="90" viewBox="0 0 220 90" fill="none" style={{ filter: 'drop-shadow(0 6px 14px rgba(0,0,0,0.5))' }}>
        {/* Body */}
        <path d="M10 70 Q10 55 25 52 L60 50 Q70 35 95 32 L150 30 Q170 30 180 50 L200 53 Q210 56 210 70 L210 78 Q210 82 206 82 L188 82 Q186 70 175 70 Q164 70 162 82 L60 82 Q58 70 47 70 Q36 70 34 82 L14 82 Q10 82 10 78 Z"
          fill="#1E293B" stroke="#334155" strokeWidth="1.5"/>
        {/* Windows */}
        <path d="M68 50 Q75 38 95 36 L150 34 Q165 35 173 50 Z" fill="#0F172A" stroke="#1E293B" strokeWidth="1"/>
        {/* Window divider */}
        <line x1="118" y1="36" x2="118" y2="50" stroke="#1E293B" strokeWidth="1.5"/>
        {/* Door line */}
        <line x1="118" y1="50" x2="118" y2="80" stroke="#0F172A" strokeWidth="1"/>
        {/* Handle */}
        <rect x="98" y="58" width="14" height="2.5" rx="1" fill="#475569"/>
        <rect x="124" y="58" width="14" height="2.5" rx="1" fill="#475569"/>
        {/* Headlight */}
        <ellipse cx="14" cy="62" rx="6" ry="4" fill="#FED15D" opacity="0.9"/>
        {/* Taillight */}
        <ellipse cx="206" cy="62" rx="5" ry="3.5" fill="#DC2626"/>
        {/* Front grille */}
        <rect x="12" y="68" width="14" height="4" rx="1" fill="#0F172A"/>
        {/* Wheel wells */}
        <ellipse cx="47" cy="82" rx="14" ry="3" fill="#050810" opacity="0.6"/>
        <ellipse cx="175" cy="82" rx="14" ry="3" fill="#050810" opacity="0.6"/>
      </svg>

      {/* Wheels (spinning) */}
      <div style={{ position: 'absolute', left: 33, top: 64, width: 28, height: 28, borderRadius: '50%', background: '#0F172A', border: '2px solid #1E293B', animation: 'lp-car-wheels 10s linear infinite' }}>
        <div style={{ position: 'absolute', inset: 5, borderRadius: '50%', background: '#1F2937' }} />
        <div style={{ position: 'absolute', top: 11, left: 2, right: 2, height: 2, background: '#475569' }} />
        <div style={{ position: 'absolute', left: 11, top: 2, bottom: 2, width: 2, background: '#475569' }} />
      </div>
      <div style={{ position: 'absolute', left: 161, top: 64, width: 28, height: 28, borderRadius: '50%', background: '#0F172A', border: '2px solid #1E293B', animation: 'lp-car-wheels 10s linear infinite' }}>
        <div style={{ position: 'absolute', inset: 5, borderRadius: '50%', background: '#1F2937' }} />
        <div style={{ position: 'absolute', top: 11, left: 2, right: 2, height: 2, background: '#475569' }} />
        <div style={{ position: 'absolute', left: 11, top: 2, bottom: 2, width: 2, background: '#475569' }} />
      </div>

      {/* License plate */}
      <div style={{ position: 'absolute', left: 38, top: 71, width: 72, height: 20, background: '#F1F5F9', borderRadius: 2, border: '1px solid #334155', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'JetBrains Mono', monospace", fontWeight: 800, fontSize: 11, color: '#07091A', letterSpacing: '0.05em', transform: 'scaleX(-1)' }}>
        ABC-1D23
      </div>
    </div>
  );
}

function LPRPanel() {
  return (
    <div style={{
      background: T.bgCard, border: `1px solid ${T.border}`,
      borderRadius: 20, padding: 28, display: 'flex', flexDirection: 'column', gap: 18,
      minHeight: 460,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: 17, color: T.white }}>Leitura de placa 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-condo-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-condo-status 10s ease-in-out infinite',
        display: 'flex', alignItems: 'center', gap: 12, position: 'relative', overflow: 'hidden',
      }}>
        <span style={{ position: 'absolute', animation: 'lp-text-wait-c 10s ease-in-out infinite' }}>Aguardando veículo...</span>
        <span style={{ position: 'absolute', animation: 'lp-text-scan-c 10s ease-in-out infinite' }}>Lendo placa...</span>
        <span style={{ position: 'absolute', animation: 'lp-text-ok-c 10s ease-in-out infinite' }}>✓ Veículo autorizado</span>
        <span style={{ opacity: 0 }}>Aguardando veículo...</span>
      </div>

      {/* Match details */}
      <div style={{ background: T.bgSurface, borderRadius: 12, border: `1px solid ${T.border}`, padding: 18, animation: 'lp-id-reveal-c 10s ease-in-out infinite' }}>
        {/* Highlighted plate */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
          <div style={{
            padding: '8px 14px', background: '#F1F5F9', borderRadius: 6, border: '2px solid #0F172A',
            fontFamily: "'JetBrains Mono', monospace", fontWeight: 800, fontSize: 18, color: '#07091A', letterSpacing: '0.08em',
            boxShadow: '0 0 16px rgba(16,185,129,0.4), 0 2px 6px rgba(0,0,0,0.3)',
          }}>
            ABC-1D23
          </div>
          <div>
            <div style={{ fontSize: 11, color: T.muted, textTransform: 'uppercase', letterSpacing: '0.07em', marginBottom: 2 }}>Modelo</div>
            <div style={{ fontSize: 13, color: T.white, fontWeight: 600 }}>Honda Civic · Prata</div>
          </div>
        </div>

        {/* Confidence */}
        <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 OCR</span>
            <span style={{ color: '#10B981' }}>96%</span>
          </div>
          <div style={{ height: 5, background: T.bgDeep, borderRadius: 4, overflow: 'hidden' }}>
            <div style={{ height: '100%', borderRadius: 4, animation: 'lp-conf-grow-c 10s ease-in-out infinite, lp-conf-color-c 10s ease-in-out infinite', boxShadow: '0 0 8px currentColor' }} />
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 14 }}>
          {[
            ['Morador', 'Bruno Almeida'],
            ['Unidade', 'Bloco 04 · Apt 1203'],
            ['Entrada', '18:33:07'],
            ['Vaga', 'G2 · 42'],
          ].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 }}>
        Cancela aberta em <strong style={{ color: T.indigo }}>menos de 1 segundo</strong> — sem controle, sem app, sem espera.
      </div>
    </div>
  );
}

Object.assign(window, { LPRDemo });