/* 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">Como funciona</a>
          <a href="#recursos">Recursos</a>
          <a href="#founder">Plano de pré-lançamento</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav__cta">
          <a href="#founder" className="btn btn--primary">
            Garantir vaga <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>Pré-lançamento · <strong>aberto</strong></span>
          </span>
          <h1 className="display hero__title">
            {tweaks.heroVariant === "direction" && (
              <>Direção para o seu negócio.<br/><em>24 horas por dia.</em></>
            )}
            {tweaks.heroVariant === "execution" && (
              <>Pare de consumir conteúdo.<br/><em>Comece a executar.</em></>
            )}
            {tweaks.heroVariant === "wisdom" && (
              <>Sabedoria aplicada.<br/><em>Negócio em movimento.</em></>
            )}
          </h1>
          <p className="lede">
            Jethro é a primeira mentoria com IA construída para empreendedores cristãos.
            Diagnóstico, plano 30/90/180 dias, metas, scripts e princípios — em um só lugar.
            Sem teoria. Sem enrolação.
          </p>
          <div className="hero__cta-row">
            <a href="#founder" className="btn btn--primary btn--lg">
              Quero o plano de pré lançamento <span className="btn-arrow"><Icon.Arrow /></span>
            </a>
            <a href="#como" className="btn btn--ghost btn--lg">Ver como funciona</a>
          </div>
          <div className="hero__meta">
            <div className="hero__meta-item">
              <span className="hero__meta-num">500</span>
              <span className="mono-label">vagas founder</span>
            </div>
            <div className="hero__meta-item">
              <span className="hero__meta-num">−60%</span>
              <span className="mono-label">vs. preço final</span>
            </div>
            <div className="hero__meta-item">
              <span className="hero__meta-num">24/7</span>
              <span className="mono-label">acesso ao mentor</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 Jethro" className="hero__symbol" />
          <span className="hero__chip hero__chip--1">DIAGNÓSTICO</span>
          <span className="hero__chip hero__chip--2">PLANO 30/90/180</span>
          <span className="hero__chip hero__chip--3">METAS · CHECK-INS</span>
          <span className="hero__chip hero__chip--4">PRINCÍPIOS</span>
        </div>
      </div>
    </header>
  );
}

/* ============================================
   Logo Strip
   ============================================ */
function LogoStrip() {
  const items = [
    "Direção estratégica",
    "Plano 30/90/180",
    "Mentoria com IA",
    "Princípios aplicados",
    "Execução semanal"
  ];

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

/* ============================================
   Stats divider
   ============================================ */
function Stats() {
  const stats = [
    { n: "67%", l: "DOS EMPREENDEDORES", d: "operam sem plano de 90 dias escrito." },
    { n: "3.4×", l: "MAIS RESULTADO", d: "para quem trabalha com metas + check-in semanal." },
    { n: "82%", l: "DESISTEM EM 12 MESES", d: "por falta de governo, não de ideia." },
    { n: "1", l: "MENTOR PERMANENTE", d: "que cabe no seu bolso, dia e noite." }
  ];
  return (
    <section className="section section--darker" style={{padding: 0}}>
      <div className="stats">
        {stats.map((s, i) => (
          <div key={i} className="stat">
            <div className="stat__num">{s.n}</div>
            <div className="stat__label">{s.l}</div>
            <div className="stat__desc">{s.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

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