// Benefits + Audience — responsive
function Benefits() {
  const { isMobile, isTablet } = useBreakpoint();
  const cols = isMobile ? 'repeat(1,1fr)' : isTablet ? 'repeat(2,1fr)' : 'repeat(3,1fr)';

  const benefits = [
    { title: 'Seguridad reforzada',     body: 'Solo vehículos autorizados acceden. Cada entrada queda registrada con foto, placa y hora.' },
    { title: 'Sin filas en la entrada', body: 'La pluma se abre en menos de 2 segundos al detectar la placa. Sin tarjetas, sin botones.' },
    { title: 'Visitas por WhatsApp',    body: 'Registra invitados desde tu chat. Reciben un mensaje cuando llegan a la caseta.' },
    { title: 'Notificaciones en tiempo real', body: 'Entérate cuando un visitante tuyo llega o cuando hay actividad inusual.' },
    { title: 'Pago de cuotas integrado', body: 'Mantenimiento y servicios en la misma plataforma. Adiós a mensajes y transferencias sueltas.' },
    { title: 'Reportes para administración', body: 'Mesa directiva accede a métricas de tráfico, accesos y comportamiento de la colonia o privada.' },
  ];

  return (
    <Section id="beneficios" bg={TOKENS.bg}>
      <div style={{ marginBottom: isMobile ? 36 : 56 }}>
        <Eyebrow>Beneficios</Eyebrow>
        <h2 style={{
          fontSize: isMobile ? 34 : isTablet ? 44 : 56, lineHeight: 1.05,
          letterSpacing: '-0.035em', fontWeight: 600, margin: '16px 0 0', color: TOKENS.ink,
        }}>
          Una plataforma{' '}
          <span style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 400 }}>pensada</span>
          {' '}para tu comunidad.
        </h2>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: cols, gap: 1,
        background: TOKENS.rule, border: `1px solid ${TOKENS.rule}`,
        borderRadius: 16, overflow: 'hidden',
      }}>
        {benefits.map((b, i) => (
          <div key={i} style={{ padding: isMobile ? '28px 20px' : '32px 28px', background: TOKENS.bgAlt }}>
            <div style={{
              width: 32, height: 32, borderRadius: 7,
              background: TOKENS.accentSoft, color: TOKENS.accent,
              display: 'grid', placeItems: 'center',
              fontFamily: '"JetBrains Mono", monospace', fontSize: 11, fontWeight: 700,
              marginBottom: 16,
            }}>{String(i + 1).padStart(2, '0')}</div>
            <h3 style={{ fontSize: isMobile ? 17 : 19, fontWeight: 600, color: TOKENS.ink, margin: '0 0 8px', letterSpacing: '-0.02em' }}>{b.title}</h3>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: TOKENS.inkSoft, margin: 0 }}>{b.body}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

function Audience() {
  const { isMobile, isTablet } = useBreakpoint();
  const cols = isMobile ? 'repeat(1,1fr)' : 'repeat(3,1fr)';

  const groups = [
    {
      tag: 'Para residentes',
      title: 'Colonias, Privadas y Residencias',
      body: 'Colonias cerradas, privadas y residencias que buscan seguridad y máxima comodidad para sus residentes.',
      stat: ['Sin obra civil', 'Instalación incluida'],
      idx: 0,
    },
    {
      tag: 'Para administración',
      title: 'Mesas Directivas',
      body: 'Administradores y comités de colonias, privadas y residencias que desean modernizar el control de acceso a la comunidad.',
      stat: ['87%', 'Reducción tiempo entrada'],
      idx: 1,
    },
    {
      tag: 'Para constructores',
      title: 'Desarrollos Inmobiliarios',
      body: 'Proyectos con soluciones escalables que necesiten un futuro cambio o expansión.',
      stat: ['100%', 'Compatible y escalable'],
      idx: 2,
    },
  ];

  return (
    <Section id="enfoque" bg={TOKENS.bgAlt}>
      <div style={{ textAlign: 'center', marginBottom: isMobile ? 36 : 56, maxWidth: 700, margin: '0 auto', paddingBottom: isMobile ? 36 : 56 }}>
        <Eyebrow>Nuestro enfoque</Eyebrow>
        <h2 style={{
          fontSize: isMobile ? 34 : isTablet ? 44 : 56, lineHeight: 1.05,
          letterSpacing: '-0.035em', fontWeight: 600, margin: '16px 0 0', color: TOKENS.ink,
        }}>
          Diseñado para tres tipos de comunidades.
        </h2>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: 20 }}>
        {groups.map((g) => {
          const dark = g.idx === 1;
          return (
            <div key={g.idx} style={{
              padding: isMobile ? '28px 20px' : '32px 28px',
              background: dark ? TOKENS.ink : TOKENS.bg,
              color: dark ? '#fff' : TOKENS.ink,
              borderRadius: 16,
              border: `1px solid ${dark ? TOKENS.ink : TOKENS.ruleSoft}`,
              display: 'flex', flexDirection: 'column',
            }}>
              {/* Glifo visual */}
              <div style={{
                height: isMobile ? 70 : 90, marginBottom: 24,
                background: dark
                  ? 'repeating-linear-gradient(135deg, transparent 0 8px, rgba(255,255,255,0.05) 8px 9px)'
                  : `repeating-linear-gradient(135deg, transparent 0 8px, ${TOKENS.ruleSoft} 8px 9px)`,
                borderRadius: 10, display: 'grid', placeItems: 'center',
                border: dark ? '1px solid rgba(255,255,255,0.08)' : `1px solid ${TOKENS.ruleSoft}`,
              }}>
                <AudienceGlyph idx={g.idx} dark={dark} />
              </div>

              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: dark ? '#93C5FD' : TOKENS.accent, fontWeight: 700 }}>{g.tag}</div>
              <h3 style={{ fontSize: isMobile ? 20 : 24, fontWeight: 600, margin: '10px 0 10px', letterSpacing: '-0.02em' }}>{g.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: dark ? 'rgba(255,255,255,0.7)' : TOKENS.inkSoft, margin: '0 0 24px', flex: 1 }}>{g.body}</p>

              <div style={{ paddingTop: 20, borderTop: `1px solid ${dark ? 'rgba(255,255,255,0.1)' : TOKENS.ruleSoft}`, display: 'flex', alignItems: 'baseline', gap: 12 }}>
                <div style={{ fontFamily: '"Fraunces", serif', fontSize: 32, lineHeight: 1, letterSpacing: '-0.03em' }}>{g.stat[0]}</div>
                <div style={{ fontSize: 12, color: dark ? 'rgba(255,255,255,0.6)' : TOKENS.inkSoft }}>{g.stat[1]}</div>
              </div>
            </div>
          );
        })}
      </div>
    </Section>
  );
}

function AudienceGlyph({ idx, dark }) {
  const stroke = dark ? 'rgba(255,255,255,0.6)' : TOKENS.accent;
  if (idx === 0) return (
    <div style={{ display: 'flex', gap: 6, alignItems: 'flex-end' }}>
      {[28, 38, 28].map((h, i) => (
        <div key={i} style={{ width: 22, height: h, background: stroke, opacity: 0.7, position: 'relative' }}>
          <div style={{ position: 'absolute', top: -7, left: 0, right: 0, height: 0, borderLeft: '11px solid transparent', borderRight: '11px solid transparent', borderBottom: `7px solid ${stroke}` }}></div>
        </div>
      ))}
    </div>
  );
  if (idx === 1) return (
    <div style={{ width: 52, height: 60, background: stroke, opacity: 0.7, backgroundImage: `repeating-linear-gradient(0deg,transparent 0 7px,rgba(255,255,255,0.2) 7px 9px),repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,255,255,0.2) 10px 12px)` }}></div>
  );
  return (
    <div style={{ width: 68, height: 52, border: `1.5px solid ${stroke}`, position: 'relative' }}>
      <div style={{ position: 'absolute', top: 0, bottom: 0, left: '40%', width: 1.5, background: stroke }}></div>
      <div style={{ position: 'absolute', left: 0, right: '60%', top: '50%', height: 1.5, background: stroke }}></div>
      <div style={{ position: 'absolute', left: '40%', right: 0, top: '62%', height: 1.5, background: stroke }}></div>
    </div>
  );
}

window.Benefits = Benefits;
window.Audience = Audience;