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

function TierCard({ level, name, price, tagline, features, featured, construction, badge, ctaLabel, ctaVariant, ctaIcon, onCta }) {
  const [hover, setHover] = React.useState(false);
  const accent = featured ? 'var(--neon-magenta)' : 'var(--neon-cyan)';
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        background: featured ? 'linear-gradient(180deg, rgba(255,0,127,.14), var(--surface-3) 42%)' : 'var(--surface-3)',
        border: featured ? '1px solid rgba(255,0,127,.55)'
          : construction ? '1px dashed var(--hairline-strong)'
          : `1px solid ${hover ? 'var(--hairline-strong)' : 'var(--hairline)'}`,
        borderRadius: 'var(--r-lg)', padding: '32px 28px',
        boxShadow: featured
          ? '0 0 0 1px rgba(255,0,127,.25), 0 0 44px rgba(255,0,127,.14), var(--shadow-card)'
          : 'var(--shadow-card)',
        opacity: construction ? 0.96 : 1,
        transform: hover ? 'translateY(-4px)' : 'none', transition: 'all 200ms ease',
        display: 'flex', flexDirection: 'column',
      }}>
      {badge && (
        <span style={{ position: 'absolute', top: -12, left: 28, display: 'inline-flex', alignItems: 'center', gap: 6,
          fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 11, letterSpacing: '.1em', textTransform: 'uppercase',
          background: construction ? 'var(--surface-2)' : 'var(--neon-magenta)',
          color: construction ? 'var(--fg-3)' : '#fff',
          border: construction ? '1px solid var(--hairline-strong)' : 'none',
          borderRadius: 'var(--r-pill)', padding: '5px 13px',
          boxShadow: construction ? 'none' : 'var(--glow-magenta-sm)' }}>
          {featured && <Icon name="crown" size={13} color="#fff" stroke={2.4} />}
          {construction && <Icon name="hard-hat" size={13} color="var(--fg-3)" stroke={2.2} />}
          {badge}
        </span>
      )}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 13,
        letterSpacing: '.16em', textTransform: 'uppercase', color: accent }}>
        Nivel {level}
      </div>
      <h3 style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 26, textTransform: 'uppercase',
        color: 'var(--fg-1)', margin: '8px 0 6px', letterSpacing: '.01em' }}>{name}</h3>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: 'var(--fg-1)', marginBottom: 4 }}>{price}</div>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.5, color: 'var(--fg-2)', margin: '0 0 22px' }}>{tagline}</p>
      <div style={{ height: 1, background: 'var(--divider)', margin: '0 0 20px' }} />
      <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 26px', display: 'flex', flexDirection: 'column', gap: 13, flex: 1 }}>
        {features.map((f, i) => (
          <li key={i} style={{ display: 'flex', gap: 11, alignItems: 'flex-start',
            fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.45, color: 'var(--fg-2)' }}>
            <span style={{ marginTop: 1, flexShrink: 0 }}>
              <Icon name="check" size={17} color={accent} stroke={2.4} />
            </span>
            <span>{f.text}</span>
          </li>
        ))}
      </ul>
      <Button variant={ctaVariant || (featured ? 'primary' : 'secondary')} onClick={onCta}
        icon={ctaIcon}
        style={{ width: '100%', justifyContent: 'center' }}>{ctaLabel}</Button>
    </div>
  );
}

function Tiers({ go, onJoin }) {
  return (
    <SectionShell id="niveles" bg="var(--surface-0)">
      <div style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto' }}>
        <Eyebrow style={{ display: 'inline-block' }}>El camino del gremio</Eyebrow>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(30px,4vw,48px)',
          lineHeight: 1.08, textTransform: 'uppercase', color: 'var(--fg-1)', margin: '18px 0 16px' }}>
          Del nivel cero a la consistencia
        </h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 }}>
          Empiezas gratis en la comunidad. Desde ahí, cada nivel pide más compromiso y entrega más valor.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: 22, marginTop: 'clamp(44px,5vw,64px)', alignItems: 'stretch' }} className="cdt-3col">
        <TierCard level="1" name="La Comunidad" price="Gratis"
          tagline="La puerta de entrada. Aquí empieza todo." badge="Empieza aquí"
          ctaLabel="Únete gratis al Discord" ctaVariant="primary" ctaIcon="message-circle" onCta={onJoin}
          features={[
            { text: 'Análisis de mercado y proyecciones a diario' },
            { text: 'Oportunidades operativas y seguimiento del precio' },
            { text: 'Clases estratégicas puntuales gratuitas' },
            { text: 'Discord del gremio y contacto con alumnos' },
          ]} />
        <TierCard level="2" name="Formación" price="Próximamente" construction badge="En construcción"
          tagline="La formación grabada. Aún en obras: únete a la lista de espera."
          ctaLabel="Únete a la lista de espera" ctaVariant="secondary" ctaIcon="bell" onCta={go('formacion')}
          features={[
            { text: 'Todo lo del Nivel 1 incluido' },
            { text: 'Formación estructurada: núcleo teórico y técnico' },
            { text: 'Contenido grabado, a tu ritmo' },
            { text: 'Aviso prioritario al abrir plazas' },
          ]} />
        <TierCard level="3" name="Mentoría 1 a 1" price="High-Ticket · Premium" featured badge="La cima · plazas limitadas"
          tagline="El servicio más exclusivo de la academia. Trabajo directo con el fundador."
          ctaLabel="Aplica a la Mentoría" ctaIcon="arrow-right" onCta={go('mentoria')}
          features={[
            { text: 'Formación directa con el fundador' },
            { text: 'Estrategia pulida de forma 100% individual' },
            { text: 'Enfoque total en disciplina y consistencia' },
            { text: 'Orientado al alto rendimiento' },
          ]} />
      </div>
    </SectionShell>
  );
}

window.Tiers = Tiers;