/* global React */
const { useState: useState3, useEffect: useEffect3 } = React;

/* ============================================
   Disponible ahora (sustituye al antiguo FounderPlan)
   ============================================ */
function FounderPlan() {
  return (
    <section className="section founder" id="baixar">
      <div className="founder__bg"></div>
      <div className="container founder__inner">
        <div>
          <span className="eyebrow">05 / Disponible ahora</span>
          <h2 className="title" style={{marginTop: 18}}>
            Descarga y empieza <em>hoy</em>.
          </h2>
          <p className="lede" style={{marginTop: 24}}>
            Jethro está disponible en la App Store y en Google Play. Descarga y empieza hoy.
          </p>

          <div className="hero__cta-row" style={{marginTop: 36}}>
            <a href="https://apps.apple.com/br/app/jethro/id6768756480" target="_blank" rel="noopener" className="btn btn--primary btn--lg">
              Descargar en la App Store <span className="btn-arrow"><Icon.Arrow /></span>
            </a>
            <a href="https://play.google.com/store/apps/developer?id=Jethroapp" target="_blank" rel="noopener" className="btn btn--primary btn--lg">
              Descargar en Google Play <span className="btn-arrow"><Icon.Arrow /></span>
            </a>
            <a href="#faq" className="btn btn--ghost btn--lg">Cómo funciona la suscripción</a>
          </div>

          <p className="mono-label" style={{marginTop: 24}}>
            Suscripción procesada por la tienda (App Store o Google Play) · Cancela cuando quieras en la configuración de tu cuenta.
          </p>
        </div>

        <div className="pricing-card">
          <div className="pricing-card__ribbon">
            <Icon.Spark /> Qué está incluido
          </div>
          <h3 className="pricing-card__title">Todo en una sola suscripción</h3>
          <p className="pricing-card__sub">
            Una sola suscripción desbloquea toda la experiencia Jethro, sin upgrades, sin complementos obligatorios.
          </p>

          <ul className="pricing-card__included" style={{marginTop: 20}}>
            <li><Icon.Check /><span><strong>Diagnóstico</strong> de tu negocio y de tu perfil entre los 9 del Método PBN.</span></li>
            <li><Icon.Check /><span><strong>Plan de 24 semanas</strong> personalizado, con acciones, metas y principios bíblicos aplicados.</span></li>
            <li><Icon.Check /><span><strong>Mentor IA</strong> que conoce tu negocio y responde a cualquier hora.</span></li>
            <li><Icon.Check /><span><strong>Check-ins semanales</strong> y biblioteca de materiales prácticos.</span></li>
            <li><Icon.Check /><span><strong>Exportación del plan en PDF</strong> para imprimir y llevar a tu semana.</span></li>
          </ul>
          <p className="pricing-card__guarantee">Pago vía App Store o Google Play · Sin permanencia · Cancela en cualquier momento</p>
        </div>
      </div>
    </section>
  );
}

/* ============================================
   For Whom
   ============================================ */
function ForWhom() {
  const forItems = [
    "Micro o pequeño emprendedor cristiano.",
    "Quien se cansó de comprar cursos y quiere ejecución.",
    "Fundador solo que no tiene un consejero al lado.",
    "Quien quiere principios bíblicos sin lenguaje religioso superficial.",
    "Quien entiende que ritmo > inspiración."
  ];
  const notItems = [
    "Quien busca un milagro rápido sin esfuerzo.",
    "Quien prefiere consumir contenido antes que ejecutar.",
    "Quien solo quiere otro chatbot genérico.",
    "Quien no acepta la constancia semanal.",
    "Quien espera promesas de enriquecimiento."
  ];
  return (
    <section className="section section--ice" id="para-quem">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow eyebrow--light">06 / Para quién es</span>
          <h2 className="title">Construido para quien <em>está listo</em>.</h2>
        </div>
        <div className="audience">
          <div className="audience__col audience__col--for">
            <h4>✱ Es para ti si</h4>
            <ul>
              {forItems.map((t, i) => (
                <li key={i}><span className="mark"><Icon.Check size={16}/></span><span>{t}</span></li>
              ))}
            </ul>
          </div>
          <div className="audience__col audience__col--not">
            <h4>✕ No es para ti si</h4>
            <ul>
              {notItems.map((t, i) => (
                <li key={i}><span className="mark"><Icon.X size={16}/></span><span>{t}</span></li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Authority / Quién fue Jetro
   ============================================ */
function JetroCarousel() {
  const trackRef = React.useRef(null);
  const scrollByCard = (dir) => {
    const track = trackRef.current;
    if (!track) return;
    const card = track.querySelector(".jetro-slide");
    const step = card ? card.offsetWidth + 16 : track.clientWidth;
    track.scrollBy({ left: dir * step, behavior: "smooth" });
  };
  return (
    <div className="jetro-carousel">
      <button className="jetro-nav jetro-nav--prev" onClick={() => scrollByCard(-1)} aria-label="Diapositiva anterior">‹</button>
      <div className="jetro-track" ref={trackRef}>
        {Array.from({ length: 10 }, (_, i) => (
          <img
            key={i}
            className="jetro-slide"
            src={`/assets/jetro/${i + 1}.jpg`}
            alt={`Quién fue Jetro, diapositiva ${i + 1}`}
            loading={i < 2 ? "eager" : "lazy"}
          />
        ))}
      </div>
      <button className="jetro-nav jetro-nav--next" onClick={() => scrollByCard(1)} aria-label="Siguiente diapositiva">›</button>
    </div>
  );
}

function Authority() {
  return (
    <section className="section section--light" id="historia">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow eyebrow--light">07 / Quién fue Jetro</span>
          <h2 className="title">La escuela de <em>Éxodo 18</em>.</h2>
          <p className="lede lede--light" style={{marginTop: 20}}>
            Jetro fue el mentor que le enseñó a Moisés a no cargarlo todo solo. Él no predicó, diagnosticó, y
            diseñó un sistema de gobierno que funcionó. Ese es el ADN de Jethro: claridad, delegación y ritmo,
            aplicados a tu negocio.
          </p>
        </div>
        <JetroCarousel />
        <p className="mono-label" style={{marginTop: 24, textAlign: "center", justifyContent: "center", display: "block"}}>← desliza para conocer la historia →</p>
      </div>
    </section>
  );
}

Object.assign(window, { FounderPlan, ForWhom, Authority });