// sections.jsx — landing page sections

const Nav = ({ target, showCountdown = true }) => (
  <nav className="nav">
    <div className="nav__inner">
      {showCountdown && target ? (
        <NavCountdown target={target} />
      ) : (
        <div className="brand">
          <span className="brand__mark">L</span>
          <span>Leonardo Arias</span>
        </div>
      )}
      <div className="nav__meta">
        <span className="nav__date">02—03 MAY · EN VIVO</span>
        <Pill>EN VIVO</Pill>
      </div>
    </div>
  </nav>
);

const Hero = ({ tweaks }) => {
  return (
    <section className="hero">
      <div className="grid-bg"></div>
      <div className="glow glow--lime"></div>
      <div className="glow glow--violet"></div>
      <div className="container hero__inner">
        <Pill>WORKSHOP EN VIVO · 02—03 MAYO · 2026</Pill>

        <h1 className="h-display hero__title">
          Crea, lanza y vende tu primer<br/>
          producto digital con <em>IA</em><br/>
          en solo 48 horas.
        </h1>

        <p className="lead hero__sub">
          El único workshop en vivo que convierte personas frustradas en
          creadores digitales — usando agentes de IA que hacen el trabajo
          técnico por ti.
        </p>

        <ul className="hero__bullets">
          <li><Check/> Sin experiencia previa</li>
          <li><Check/> Acompañamiento paso a paso</li>
          <li><Check/> Agentes de IA que ejecutan por ti</li>
          <li><Check/> Resultados reales en 48h</li>
        </ul>

        <div className="hero__cta-block">
          <div className="hero__ctas">
            <a href="#oferta" className="btn btn--primary btn--lg">
              Quiero crear mi producto con IA <span className="btn-arrow">→</span>
            </a>
            <a href="#metodo" className="btn btn--ghost btn--lg">Conocer el método</a>
          </div>

          <div className="urgency-strip" role="status" aria-live="polite">
            <div className="urgency-strip__row">
              <span className="urgency-strip__dot" aria-hidden="true"></span>
              <span className="urgency-strip__text">
                Lote 1 · <strong>99% ocupado</strong>
              </span>
            </div>
            <div className="loadbar loadbar--thin" aria-hidden="true">
              <div className="loadbar__fill"></div>
            </div>
          </div>
        </div>

        <div className="hero__stats" role="list">
          <div className="hero__stat" role="listitem">
            <svg className="hero__stat-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5"/>
              <path d="M12 7v5l3 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
            </svg>
            <div className="hero__stat-num">16h</div>
            <div className="hero__stat-label">contenido en vivo</div>
          </div>

          <div className="hero__stat-divider" aria-hidden="true"></div>

          <div className="hero__stat" role="listitem">
            <svg className="hero__stat-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M9 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" stroke="currentColor" strokeWidth="1.5"/>
              <path d="M16 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" stroke="currentColor" strokeWidth="1.5"/>
              <path d="M3 19c0-2.8 2.7-5 6-5s6 2.2 6 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
              <path d="M15 14c2.8 0 6 2.2 6 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
            </svg>
            <div className="hero__stat-num">+500</div>
            <div className="hero__stat-label">alumnos transformados</div>
          </div>

          <div className="hero__stat-divider" aria-hidden="true"></div>

          <div className="hero__stat" role="listitem">
            <svg className="hero__stat-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M3 17l5-5 4 3 7-8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M14 7h5v5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            <div className="hero__stat-num">US$3M+</div>
            <div className="hero__stat-label">en ventas generadas</div>
          </div>
        </div>
      </div>
    </section>
  );
};

const PERSONAS = [
  { id: '01', emoji: '👔', title: 'Empleado estancado',
    desc: 'Trabajas 8+ horas al día, ganas "razonablemente bien" pero vives al límite. Los años pasan y sigues en el mismo lugar.' },
  { id: '02', emoji: '🔄', title: 'Frustrado digital',
    desc: 'Cursos, tutoriales, métodos "infalibles"… solo acumulaste información sin resultados concretos.' },
  { id: '03', emoji: '🤖', title: 'Curioso de la IA',
    desc: 'Ves a otros prosperar con inteligencia artificial — pero a ti te parece complicado y "para expertos".' },
  { id: '04', emoji: '🧭', title: 'Buscador de libertad',
    desc: 'Quieres ingresos que no dependan de jefes ni horarios — pero no sabes por dónde empezar.' },
];

const Identification = () => (
  <section className="section" id="identificacion">
    <div className="container">
      <div className="section-head">
        <Eyebrow center>Diagnóstico</Eyebrow>
        <h2 className="h-1">¿Te identificas con alguna de estas situaciones?</h2>
      </div>

      <div className="persona-grid">
        {PERSONAS.map(p => (
          <Reveal key={p.id} delay={0}>
            <article className="persona">
              <Placeholder
                label={`${p.emoji} ${p.title.toUpperCase()}`}
                className="persona__media"
              />
              <div className="persona__id">PERFIL · {p.id}</div>
              <h3 className="persona__title">{p.title}</h3>
              <p className="persona__desc">{p.desc}</p>
            </article>
          </Reveal>
        ))}
      </div>

      <p className="lead" style={{margin:'56px auto 0', textAlign:'center', maxWidth:'48ch'}}>
        Si te identificaste con al menos una, este workshop fue creado{' '}
        <span className="accent">específicamente para ti.</span>
      </p>
    </div>
  </section>
);

const PROBLEMS = [
  { num: '01', title: 'Te vendieron teoría en lugar de ejecución.',
    desc: 'Manuales eternos. Cero implementación. Cero resultado.' },
  { num: '02', title: 'Te dejaron solo cuando más necesitabas ayuda.',
    desc: 'Compraste el curso, abriste el módulo 1, y nadie volvió a aparecer.' },
  { num: '03', title: 'Te dijeron "es fácil" sin entregar las herramientas.',
    desc: 'Consejos vagos. Promesas grandes. Nada operativo.' },
  { num: '04', title: 'Nadie te enseñó a usar IA de forma práctica y rentable.',
    desc: 'La IA no es un truco — es una palanca. Pero alguien tiene que enseñarte a operarla.' },
];

const Problems = () => (
  <section className="section" style={{paddingTop:0}}>
    <div className="container">
      <div className="section-head">
        <Eyebrow center>El problema no eres tú</Eyebrow>
        <h2 className="h-2">Llegas a casa después de 8, 9, 10 horas de trabajo —<br/>
          y te preguntas <span className="accent">"¿por qué ellos sí y yo no?"</span></h2>
        <p className="lead" style={{textAlign:'center'}}>
          La respuesta es simple: ellos tienen el método correcto. Tú no.
        </p>
      </div>

      <div className="problem-list">
        {PROBLEMS.map(p => (
          <div key={p.num} className="problem-list__item">
            <span className="problem-list__num">PROBLEMA {p.num}</span>
            <h3 className="problem-list__title">{p.title}</h3>
            <p className="muted" style={{fontSize:14}}>{p.desc}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const PHASES = [
  { letter: 'O', num: '01', title: 'Oferta irresistible',
    desc: 'No necesitas una idea brillante — necesitas una oferta que el mercado quiera comprar. Usamos IA para identificar necesidades reales y construir ofertas de alta conversión.' },
  { letter: 'P', num: '02', title: 'Producto con IA',
    desc: 'Aquí es donde la magia sucede. Con agentes entrenados creas ebooks, cursos, audiolibros y templates completos. Sin ser experto. Sin aparecer en cámara.' },
  { letter: 'E', num: '03', title: 'Embudo de venta',
    desc: 'Tu producto necesita una máquina de vender. Página de venta, checkout optimizado y productos complementarios que convierten visitantes en compradores.' },
  { letter: 'T', num: '04', title: 'Tráfico con IA',
    desc: 'Un producto sin tráfico es un secreto. Generamos anuncios, copys y creativos visuales con IA que llenan tu embudo de compradores reales.' },
];

const OpetMethod = () => (
  <section className="section opet" id="metodo">
    <div className="opet__hero" aria-hidden="true">
      <img
        src="assets/leonardo-stage.jpg"
        alt=""
        className="opet__hero-img"
        loading="lazy"
        decoding="async"
      />
      <div className="opet__hero-fade"></div>
    </div>
    <div className="container">
      <div className="opet__head">
        <Eyebrow center>El método</Eyebrow>
        <h2 className="opet__brand">O.P.E.T.<sup>™</sup></h2>
        <p className="lead" style={{textAlign:'center'}}>
          El único sistema que convierte ideas en productos digitales{' '}
          <span className="accent">vendibles</span> usando IA en tiempo récord.
        </p>
      </div>

      <div className="phase-grid">
        {PHASES.map(p => (
          <Reveal key={p.num}>
            <article className="phase">
              <div className="phase__head">
                <span className="phase__num">FASE {p.num}</span>
                <span className="phase__letter">{p.letter}</span>
              </div>
              <p className="phase__desc">{p.desc}</p>
              <h3 className="phase__title">{p.title}</h3>
            </article>
          </Reveal>
        ))}
      </div>

      <div style={{textAlign:'center', marginTop:64}}>
        <p className="h-2" style={{maxWidth:'24ch', margin:'0 auto 32px'}}>
          En 48 horas pasas de la idea<br/>al <span className="accent">producto vendiendo</span>.
        </p>
        <a href="#oferta" className="btn btn--primary btn--lg">
          Quiero dominar el método O.P.E.T. <span className="btn-arrow">→</span>
        </a>
      </div>
    </div>
  </section>
);

Object.assign(window, { Nav, Hero, Identification, Problems, OpetMethod });