// Hero responsive
function Hero({ onNav }) {
  const { isMobile, isTablet } = useBreakpoint();

  const h1Size = isMobile ? 44 : isTablet ? 64 : 92;
  const subSize = isMobile ? 17 : isTablet ? 19 : 21;
  const statCols = isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)';

  return (
    <Section id="top" padTop={isMobile ? 100 : isTablet ? 120 : 140} padBottom={isMobile ? 48 : 80}>
      <div style={{ textAlign: 'center', maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ marginBottom: 24 }}>
          <Eyebrow>Sistema de Acceso Vehicular</Eyebrow>
        </div>

        <h1 style={{
          fontSize: h1Size, lineHeight: 1.0, letterSpacing: '-0.04em',
          fontWeight: 600, margin: '0 0 24px', color: TOKENS.ink,
          textWrap: 'balance',
        }}>
          Control de acceso{' '}
          <span style={{ fontFamily: '"Fraunces", Georgia, serif', fontStyle: 'italic', fontWeight: 400 }}>
            inteligente
          </span>
          {isMobile ? ' ' : <br />}
          para tu colonia o privada.
        </h1>

        <p style={{
          fontSize: subSize, lineHeight: 1.55, color: TOKENS.inkSoft,
          maxWidth: 680, margin: '0 auto 36px', textWrap: 'pretty',
        }}>
          Soluciones tecnológicas avanzadas que optimizan la seguridad
          en colonias, privadas y residencias. Tu pluma se abre
          automáticamente al detectar tu placa — sin tarjetas, sin guardia
          y sin obras.
        </p>

        <div style={{
          display: 'flex', gap: 12, justifyContent: 'center', marginBottom: 48,
          flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'stretch' : 'center',
        }}>
          <Button kind="whatsapp" icon={<WhatsAppGlyph size={18} />} onClick={() => onNav('contacto')}>
            Contáctanos por WhatsApp
          </Button>
          <Button kind="ghost" onClick={() => onNav('como')}>
            Ver cómo funciona →
          </Button>
        </div>
      </div>

      {/* Imagen hero */}
      <HeroImage isMobile={isMobile} isTablet={isTablet} />

      {/* Stats */}
      <div style={{
        display: 'grid', gridTemplateColumns: statCols,
        gap: isMobile ? '24px 0' : 0, marginTop: isMobile ? 48 : 64,
        padding: isMobile ? '32px 0' : '40px 0',
        borderTop: `1px solid ${TOKENS.rule}`,
        borderBottom: `1px solid ${TOKENS.rule}`,
      }}>
        {[
          ['< 2 seg', 'Apertura de pluma'],
          ['99.98%', 'Disponibilidad'],
          ['24/7', 'Soporte técnico'],
          ['Modo offline', 'Sin interrupciones'],
        ].map(([n, l], i) => (
          <div key={i} style={{
            paddingLeft: (!isMobile && i > 0) ? 32 : isMobile && i % 2 !== 0 ? 20 : 0,
            borderLeft: (!isMobile && i > 0) ? `1px solid ${TOKENS.ruleSoft}` : isMobile && i % 2 !== 0 ? `1px solid ${TOKENS.ruleSoft}` : 'none',
            display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
          }}>
            <div style={{
              fontFamily: '"Fraunces", Georgia, serif',
              fontSize: isMobile ? 32 : 40, lineHeight: 1.1, letterSpacing: '-0.03em',
              fontWeight: 400, color: TOKENS.ink,
            }}>{n}</div>
            <div style={{ fontSize: 13, color: TOKENS.inkSoft, marginTop: 6 }}>{l}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function HeroImage({ isMobile, isTablet }) {
  const aspectH = isMobile ? 220 : isTablet ? 340 : undefined;
  return (
    <div style={{
      position: 'relative',
      aspectRatio: isMobile ? 'auto' : '21/9',
      height: aspectH,
      borderRadius: isMobile ? 14 : 20,
      overflow: 'hidden',
      background: 'linear-gradient(180deg, #1A2347 0%, #0A1228 60%, #050913 100%)',
      boxShadow: '0 40px 80px -30px rgba(10,37,64,0.45), 0 0 0 1px rgba(10,37,64,0.06)',
    }}>
      {/* Atmósfera */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at 50% 80%, rgba(20,84,214,0.35) 0%, transparent 55%)`,
      }}></div>

      {/* Skyline */}
      {!isMobile && (
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: '36%', height: '32%',
          display: 'flex', alignItems: 'flex-end',
        }}>
          {[{ h: 75, w: 90, l: 60 }, { h: 95, w: 70, l: 110 }, { h: 60, w: 110, l: 165 }, { h: 105, w: 80, l: 235 }].map((b, i) => (
            <div key={i} style={{
              position: 'absolute', left: `${b.l}px`, bottom: 0,
              width: b.w, height: `${b.h}%`, background: '#0F1A38', borderRadius: '4px 4px 0 0',
              backgroundImage: `repeating-linear-gradient(90deg, transparent 0 8px, rgba(96,165,250,0.4) 8px 12px)`,
            }}></div>
          ))}
          {[{ h: 80, w: 95, r: 60 }, { h: 110, w: 75, r: 130 }, { h: 65, w: 105, r: 180 }].map((b, i) => (
            <div key={i} style={{
              position: 'absolute', right: `${b.r}px`, bottom: 0,
              width: b.w, height: `${b.h}%`, background: '#0F1A38', borderRadius: '4px 4px 0 0',
              backgroundImage: `repeating-linear-gradient(90deg, transparent 0 8px, rgba(96,165,250,0.35) 8px 12px)`,
            }}></div>
          ))}
        </div>
      )}

      {/* Calle */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: isMobile ? '45%' : '36%',
        background: 'linear-gradient(180deg, #0A1228 0%, #060A1A 100%)',
      }}></div>

      {/* Caseta */}
      {!isMobile && (
        <div style={{
          position: 'absolute', left: '14%', bottom: '36%',
          width: 100, height: 130, background: '#1F2B52',
          borderTop: `4px solid ${TOKENS.accent}`, borderRadius: '4px 4px 0 0',
          boxShadow: '0 0 30px rgba(20,84,214,0.4)',
        }}>
          <div style={{
            position: 'absolute', top: 20, left: 14, right: 14, height: 44,
            background: 'rgba(255,193,7,0.5)', border: '1px solid rgba(255,193,7,0.7)',
          }}></div>
        </div>
      )}

      {/* Pluma poste */}
      <div style={{
        position: 'absolute',
        left: isMobile ? '28%' : '32%',
        bottom: isMobile ? '45%' : '36%',
        width: 12, height: isMobile ? 90 : 130,
        background: 'linear-gradient(180deg, #E5E9F2, #94A3B8)',
        borderRadius: '3px 3px 0 0',
      }}></div>

      {/* Pluma brazo */}
      <div style={{
        position: 'absolute',
        left: isMobile ? '28%' : '32%',
        bottom: isMobile ? 'calc(45% + 85px)' : 'calc(36% + 122px)',
        width: isMobile ? 160 : 260,
        height: 10,
        background: `repeating-linear-gradient(90deg, #E5E9F2 0 28px, ${TOKENS.accent} 28px 56px)`,
        transformOrigin: 'left center', transform: 'translateX(6px) rotate(-60deg)',
        borderRadius: 2,
      }}></div>

      {/* LED */}
      <div style={{
        position: 'absolute',
        left: isMobile ? '28%' : '32%',
        bottom: isMobile ? 'calc(45% + 96px)' : 'calc(36% + 136px)',
        width: 12, height: 12, borderRadius: '50%',
        background: TOKENS.success, boxShadow: `0 0 14px ${TOKENS.success}`,
      }}></div>

      {/* Carro */}
      <div style={{
        position: 'absolute',
        right: isMobile ? '8%' : '18%',
        bottom: isMobile ? 'calc(45% - 8px)' : 'calc(36% - 8px)',
        width: isMobile ? 130 : 200,
        height: isMobile ? 54 : 78,
      }}>
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0, height: isMobile ? 36 : 50,
          background: 'linear-gradient(180deg, #DDE3F0 0%, #A8B2C7 100%)',
          borderRadius: '16px 22px 5px 5px',
          boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
        }}></div>
        <div style={{
          position: 'absolute', bottom: isMobile ? 28 : 38, left: isMobile ? 18 : 28, right: isMobile ? 14 : 22,
          height: isMobile ? 26 : 36,
          background: 'linear-gradient(180deg, #DDE3F0 0%, #A8B2C7 100%)',
          borderRadius: '16px 20px 0 0',
        }}></div>
        <div style={{
          position: 'absolute', bottom: isMobile ? 32 : 44, left: isMobile ? 24 : 36, right: isMobile ? 18 : 32,
          height: isMobile ? 16 : 22,
          background: 'linear-gradient(180deg, rgba(96,165,250,0.7) 0%, rgba(20,84,214,0.4) 100%)',
          borderRadius: '12px 16px 0 0',
        }}></div>
        {/* Ruedas */}
        {[isMobile ? 14 : 22, isMobile ? 14 : 22].map((r, i) => (
          <div key={i} style={{
            position: 'absolute', bottom: -8,
            left: i === 0 ? (isMobile ? 16 : 22) : undefined,
            right: i === 1 ? (isMobile ? 16 : 22) : undefined,
            width: isMobile ? 22 : 28, height: isMobile ? 22 : 28,
            background: '#0A0F1F', borderRadius: '50%',
            border: '4px solid #2A3550',
          }}></div>
        ))}
      </div>

      {/* HUD */}
      <div style={{
        position: 'absolute',
        right: isMobile ? '6%' : '14%',
        bottom: isMobile ? '12%' : '22%',
        padding: isMobile ? '10px 12px' : '12px 16px',
        borderRadius: 10,
        background: 'rgba(10,37,64,0.9)', backdropFilter: 'blur(8px)',
        border: `1px solid ${TOKENS.accent}`,
        fontFamily: '"JetBrains Mono", monospace', color: '#fff',
        fontSize: isMobile ? 10 : 12,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
          <span style={{ width: 5, height: 5, borderRadius: '50%', background: TOKENS.success }}></span>
          <span style={{ color: TOKENS.success, fontWeight: 600, fontSize: isMobile ? 9 : 11, letterSpacing: '0.08em' }}>RESIDENTE DETECTADO</span>
        </div>
        <div style={{ fontSize: isMobile ? 14 : 16, fontWeight: 700, letterSpacing: '0.08em' }}>ABC-204</div>
        <div style={{ fontSize: isMobile ? 9 : 11, color: 'rgba(255,255,255,0.6)', marginTop: 2 }}>García, M. · Casa 47</div>
      </div>

      {/* Label */}
      <div style={{
        position: 'absolute', top: 14, left: 16,
        fontFamily: '"JetBrains Mono", monospace',
        fontSize: 9, color: 'rgba(255,255,255,0.35)', letterSpacing: '0.08em',
        display: isMobile ? 'none' : 'block',
      }}>
        [ acceso_residencial.jpg — placeholder ]
      </div>
    </div>
  );
}

window.Hero = Hero;