/* global React */
const { useState, useEffect, useRef } = React;

/* ============================================
   Icons
   ============================================ */
const Icon = {
  Arrow: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10m0 0L8.5 3.5M13 8l-4.5 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Check: ({ color = "#D4AF37", size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <circle cx="8" cy="8" r="7.25" stroke={color} strokeWidth="1"/>
      <path d="M5 8.2l2.2 2.2L11.2 6" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  X: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <circle cx="8" cy="8" r="7.25" stroke="#9aa7bb" strokeWidth="1"/>
      <path d="M5.5 5.5l5 5m0-5l-5 5" stroke="#9aa7bb" strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  ),
  Spark: () => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M7 0l1.5 5.5L14 7l-5.5 1.5L7 14l-1.5-5.5L0 7l5.5-1.5L7 0z" fill="#D4AF37"/>
    </svg>
  )
};

/* ============================================
   Nav
   ============================================ */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="container nav__inner">
        <a href="#top" className="nav__brand">
          <img src="/assets/jethro-symbol.png" alt="" />
          <span>Jethro</span>
        </a>
        <div className="nav__links">
          <a href="#problema">Problema</a>
          <a href="#como">Cómo funciona</a>
          <a href="#recursos">Funciones</a>
          <a href="#baixar">Descargar</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav__cta">
          <a href="#baixar" className="btn btn--primary">
            Descargar la app <span className="btn-arrow"><Icon.Arrow /></span>
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ============================================
   Hero
   ============================================ */
function Hero({ tweaks }) {
  return (
    <header className="hero" id="top">
      <div className="hero__grid"></div>
      <div className="hero__glow"></div>
      <div className="container hero__inner">
        <div className="hero__copy">
          <span className="hero__badge">
            <span className="hero__badge-dot"></span>
            <span>Disponible en la <strong>App Store</strong> y en <strong>Google Play</strong></span>
          </span>
          <h1 className="display hero__title">
            {tweaks.heroVariant === "direction" && (
              <>Dirección para tu negocio.<br/><em>24 horas al día.</em></>
            )}
            {tweaks.heroVariant === "execution" && (
              <>Deja de consumir contenido.<br/><em>Empieza a ejecutar.</em></>
            )}
            {tweaks.heroVariant === "wisdom" && (
              <>Sabiduría aplicada.<br/><em>Negocio en movimiento.</em></>
            )}
          </h1>
          <p className="lede">
            No es una app de productividad más. Es la primera IA especializada en el emprendedor
            cristiano: diagnóstico, plan de 24 semanas y un mentor que conoce tu negocio.
            Une principios bíblicos y gestión comprobada, a tu ritmo, con integridad.
          </p>
          <div className="hero__cta-row">
            <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="#como" className="btn btn--ghost btn--lg">Ver cómo funciona</a>
          </div>
          <p className="hero__free">Empieza por el diagnóstico, <strong>es gratis</strong>. Plan y mentor por suscripción, sin permanencia.</p>
          <div className="hero__meta">
            <div className="hero__meta-item">
              <span className="hero__meta-num">24</span>
              <span className="mono-label">semanas de plan</span>
            </div>
            <div className="hero__meta-item">
              <span className="hero__meta-num">7</span>
              <span className="mono-label">min · diagnóstico del negocio</span>
            </div>
            <div className="hero__meta-item">
              <span className="hero__meta-num">24/7</span>
              <span className="mono-label">acceso al mentor IA</span>
            </div>
          </div>
        </div>

        <div className="hero__visual">
          <div className="hero__rings">
            <div className="hero__ring hero__ring--3"></div>
            <div className="hero__ring hero__ring--1"></div>
            <div className="hero__ring hero__ring--2"></div>
          </div>
          <img src="/assets/jethro-symbol.png" alt="Símbolo de Jethro" className="hero__symbol" />
          <span className="hero__chip hero__chip--1">DIAGNÓSTICO</span>
          <span className="hero__chip hero__chip--2">PLAN · 24 SEMANAS</span>
          <span className="hero__chip hero__chip--3">METAS · CHECK-INS</span>
          <span className="hero__chip hero__chip--4">PRINCIPIOS</span>
        </div>
      </div>
    </header>
  );
}

/* ============================================
   Logo Strip
   ============================================ */
function LogoStrip() {
  const items = [
    "Prestadores de servicios",
    "Comercios",
    "Trabajadores independientes",
    "Pequeñas empresas",
    "Emprendedores cristianos"
  ];

  return (
    <section className="logo-strip">
      <div className="container">
        <div className="logo-strip__label mono-label">Construido para</div>
        <div className="logo-strip__track">
          {items.map((item, i) => (
            <div key={i} className="logo-strip__item">{item}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Icon, Nav, Hero, LogoStrip });