/* global React, Eyebrow, Icon, Button, SectionShell, GridBG */

function Community({ onApply, onJoin }) {
  const perks = [
    ['line-chart', 'Análisis diario del precio y proyecciones basadas en datos objetivos.'],
    ['users', 'Acompañamiento directo con estudiantes actuales y casos reales.'],
    ['graduation-cap', 'Clases estratégicas puntuales, impartidas de forma gratuita.'],
    ['message-circle', 'La cultura del gremio, viva cada día en nuestro Discord.'],
  ];
  return (
    <SectionShell id="comunidad" bg="var(--surface-1)">
      <GridBG opacity={0.04} cyan="20% 50%" style={{ maskImage: 'linear-gradient(90deg, #000, transparent 60%)', WebkitMaskImage: 'linear-gradient(90deg, #000, transparent 60%)' }} />
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 'clamp(32px,5vw,64px)', alignItems: 'center' }} className="cdt-2col">
        <div>
          <Eyebrow>Empieza aquí · 100% gratis</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(28px,3.6vw,46px)',
            lineHeight: 1.08, textTransform: 'uppercase', color: 'var(--fg-1)', margin: '18px 0 18px' }}>
            La comunidad es<br />la <span className="cdt-gradient-text">puerta de entrada</span>
          </h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.65, color: 'var(--fg-2)', margin: '0 0 22px', maxWidth: 500 }}>
            Aquí es donde todo empieza: un Discord gratuito donde aportamos valor cada día y se forja
            la cercanía del gremio. Desde dentro, quien quiere más escala hacia la
            <strong style={{ color: 'var(--fg-1)', fontWeight: 600 }}> formación</strong> y la
            <strong style={{ color: 'var(--fg-1)', fontWeight: 600 }}> mentoría 1 a 1</strong>.
          </p>
          <div style={{ background: 'var(--surface-3)', border: '1px solid rgba(0,229,255,.22)',
            borderLeft: '3px solid var(--neon-cyan)', borderRadius: 'var(--r-md)', padding: '16px 20px', marginBottom: 26 }}>
            <p style={{ fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 17, lineHeight: 1.4,
              color: 'var(--fg-1)', margin: 0, letterSpacing: '.01em' }}>
              Gratis no significa de relleno. Buscamos calidad, no cantidad: gente que viene a trabajar.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 13, flexWrap: 'wrap' }}>
            <Button onClick={onJoin} icon="message-circle">Únete gratis al Discord</Button>
            <Button variant="secondary" onClick={onApply}>Ver formación y mentoría</Button>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {perks.map(([ic, text], i) => (
            <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'center',
              background: 'var(--surface-2)', border: '1px solid var(--hairline)',
              borderRadius: 'var(--r-md)', padding: '18px 20px' }}>
              <div style={{ width: 42, height: 42, flexShrink: 0, borderRadius: 'var(--r-sm)',
                background: 'var(--cyan-soft)', border: '1px solid rgba(0,229,255,.25)',
                display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={ic} size={21} color="var(--neon-cyan)" stroke={2} />
              </div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.5, color: 'var(--fg-1)', margin: 0 }}>{text}</p>
            </div>
          ))}
        </div>
      </div>
    </SectionShell>
  );
}

window.Community = Community;