// app.jsx — root component, wires up tweaks + sections

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#F5C842",
  "showCountdown": true,
  "heroVariant": "default",
  "fontDisplay": "Space Grotesk"
}/*EDITMODE-END*/;

function App() {
  const t = TWEAK_DEFAULTS;

  // Hero copy variants
  const heroVariants = {
    default: {
      title: <>Crea, lanza y vende tu primer<br/>producto digital con <em>IA</em><br/>en solo 48 horas.</>,
      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.'
    },
    bold: {
      title: <>De idea a producto<br/>vendiendo en <em>48h</em>.</>,
      sub: 'Un fin de semana. Cuatro fases. Agentes de IA que ejecutan por ti. Sales con tu primer producto digital ya en el mercado.'
    },
    direct: {
      title: <>Tu primer producto digital<br/><em>sale al aire</em> el domingo.</>,
      sub: 'No es un curso. Es un workshop en vivo donde construyes oferta, producto, embudo y tráfico — con IA, paso a paso, conmigo del otro lado.'
    },
  };

  // Inject hero variant into Hero via ref-like prop
  // Shared workshop start target — used by nav countdown
  const workshopTarget = React.useMemo(() => new Date('2026-05-02T11:30:00-03:00').getTime(), []);

  return (
    <>
      <Nav target={workshopTarget} showCountdown={t.showCountdown} />
      <HeroVariant variant={heroVariants[t.heroVariant]} />
      <Identification />
      <Problems />
      <OpetMethod />
      <Author />
      <Transform />
      <Schedule />
      <Testimonials />
      <Offer />
      <Faq />
      <Ps />
      <Footer />
      <StickyCta />
      <NotifStack />
      <ExitPopup onTriggerForce={(fn) => { window.__forceExitPopup = fn; }} />
    </>
  );
}

// Hero with variant copy
const HeroVariant = ({ variant }) => {
  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">{variant.title}</h1>

        <p className="lead hero__sub">{variant.sub}</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</li>
          <li><Check/> Resultados 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>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);