// ─── SECTIONS A: Nav, Hero, Ticker, Problem, Cases ─────────────────────

const { useEffect: useEffectA, useState: useStateA, useRef: useRefA } = React;

// ─── NAV ───────────────────────────────────────────────────────────────
function Nav() {
  const [scrolled, setScrolled] = useStateA(false);
  const [active, setActive] = useStateA("");
  const [drawerOpen, setDrawerOpen] = useStateA(false);

  useEffectA(() => {
    const ids = ["casos", "metodo", "diferenciador", "resultados", "sobre-mi", "contacto"];
    const onScroll = () => {
      setScrolled(window.scrollY > 32);
      const y = window.scrollY + window.innerHeight * 0.35;
      let found = "";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        const top = el.offsetTop;
        const bot = top + el.offsetHeight;
        if (y >= top && y <= bot) { found = id; break; }
      }
      setActive(found);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffectA(() => {
    document.body.style.overflow = drawerOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [drawerOpen]);

  const links = [
    { id: "casos", label: "Casos" },
    { id: "metodo", label: "Método" },
    { id: "diferenciador", label: "¿Por qué yo?" },
    { id: "resultados", label: "Resultados" },
    { id: "sobre-mi", label: "Sobre mí" },
  ];

  const go = (id) => {
    setDrawerOpen(false);
    setTimeout(() => {
      const el = document.getElementById(id);
      if (el) {
        const top = el.getBoundingClientRect().top + window.scrollY - 56;
        window.scrollTo({ top, behavior: "smooth" });
      }
    }, 80);
  };

  return (
    <>
      <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <button
            className="hamburger"
            aria-label="Abrir menú"
            aria-expanded={drawerOpen}
            onClick={() => setDrawerOpen(true)}
          >
            <span className="bars" aria-hidden="true">
              <span />
              <span />
              <span />
            </span>
          </button>
          <a className="nav-logo" href="#top" aria-label="Inicio">
            <img src="assets/logo-mateo.png" alt="Mateo Marketing" />
          </a>
        </div>
        <div className="nav-links">
          {links.map((l) => (
            <a
              key={l.id}
              href={`#${l.id}`}
              className={active === l.id ? "active" : ""}
              onClick={(e) => { e.preventDefault(); go(l.id); }}
            >
              {l.label}
            </a>
          ))}
        </div>
        <MagBtn href={WA_LINK} variant="primary" size="sm">
          <WaIcon size={14} />
          Hablemos
        </MagBtn>
      </nav>

      <div className={`drawer ${drawerOpen ? "open" : ""}`} aria-hidden={!drawerOpen}>
        <div className="drawer-backdrop" onClick={() => setDrawerOpen(false)} />
        <aside className="drawer-panel" role="dialog" aria-label="Menú">
          <div className="drawer-head">
            <img src="assets/logo-mateo.png" alt="Mateo Marketing" />
            <button className="drawer-close" aria-label="Cerrar menú" onClick={() => setDrawerOpen(false)}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M6 6l12 12M6 18L18 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
            </button>
          </div>
          {links.map((l) => (
            <a
              key={l.id}
              href={`#${l.id}`}
              className="drawer-link"
              onClick={(e) => { e.preventDefault(); go(l.id); }}
            >
              {l.label}
              <span className="ico"><ArrowIcon size={16} /></span>
            </a>
          ))}
          <div className="drawer-foot">
            <span className="note">¿Empezamos?</span>
            <MagBtn href={WA_LINK} variant="primary">
              <WaIcon size={16} />
              Hablemos por WhatsApp
            </MagBtn>
            <span className="note" style={{ marginTop: 12 }}>+34 694 21 64 03</span>
          </div>
        </aside>
      </div>
    </>
  );
}

// ─── HERO ──────────────────────────────────────────────────────────────
function Hero() {
  return (
    <section className="hero shell" id="top">
      <div className="hero-main">
        <div>
          <h1 className="hero-display reveal">
            Más <RotatingWord /><br />
            para tu negocio.
          </h1>

          <p className="hero-sub reveal reveal-delay-1">
            Consigo más clientes para cualquier negocio. Pero clientes de verdad, de los
            que quieren tu servicio y te contratan.
          </p>
          <p className="hero-sub-2 reveal reveal-delay-2">
            Sé que cada caso es distinto, pero tu negocio también puede ser
            el próximo caso de éxito. <strong>¿Quieres comprobarlo?</strong>
          </p>

          <div className="hero-cta-row reveal reveal-delay-2">
            <MagBtn href={WA_LINK} variant="primary">
              <WaIcon size={16} />
              Quiero hablar con Joel
            </MagBtn>
            <a href="#casos" className="arrow-link">
              Ver casos reales
              <ArrowIcon size={14} />
            </a>
          </div>
        </div>

        <div className="hero-portrait reveal reveal-delay-1">
          <div className="img-wrap">
            <img src="assets/joel.jpg" alt="Joel Mateo" />
          </div>
          <div className="sign-block">
            <span className="sig" aria-hidden="true">Joel Mateo</span>
            <span className="role">Fundador</span>
          </div>
        </div>
      </div>

      <div className="hero-stat-row reveal reveal-delay-4">
        <div className="hero-stat">
          <span className="v">
            +<AnimatedNumber to={6} suffix="" />
            <em> años</em>
          </span>
          <span className="l">En marketing digital</span>
        </div>
        <div className="hero-stat">
          <span className="v">
            <AnimatedNumber to={6} />
            <em>M€</em>
          </span>
          <span className="l">Inversión gestionada</span>
        </div>
        <div className="hero-stat">
          <span className="v">
            +<AnimatedNumber to={50} />
          </span>
          <span className="l">Clientes con resultados</span>
        </div>
        <div className="hero-stat">
          <span className="v">
            <em>×</em><AnimatedNumber to={24} />
          </span>
          <span className="l">ROI medio · mes 1</span>
        </div>
      </div>
    </section>
  );
}

// ─── HERO LIVE PANEL ───────────────────────────────────────────────────
// ─── REVIEWS STRIP ─────────────────────────────────────────────────────
function Star() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12 2.5l2.95 6.5 7.05.7-5.3 4.85 1.55 7.05L12 17.9l-6.25 3.7 1.55-7.05L2 9.7l7.05-.7L12 2.5z" />
    </svg>
  );
}

function ReviewsStrip() {
  return (
    <div className="reviews-strip">
      <a
        href="#testimonios"
        onClick={(e) => {
          e.preventDefault();
          const el = document.getElementById("testimonios");
          if (el) {
            const top = el.getBoundingClientRect().top + window.scrollY - 64;
            window.scrollTo({ top, behavior: "smooth" });
          }
        }}
      >
        <span className="stars" aria-label="5 de 5 estrellas">
          <Star /><Star /><Star /><Star /><Star />
        </span>
        <span className="rate tabular">
          5,0<em> / </em>5,0
        </span>
        <span className="sep" aria-hidden="true" />
        <span className="who">
          Lo dicen <strong>+50 clientes</strong> que ya firman más contratos cada mes
        </span>
        <span className="sep" aria-hidden="true" />
        <span className="cta">
          Ver reseñas <ArrowIcon size={14} />
        </span>
      </a>
    </div>
  );
}

function HeroLive() {
  const items = [
    { time: "Hace 12 min", what: "+5 leads cualificados",      who: "Bufete Tena · Madrid" },
    { time: "Hace 28 min", what: "Cita agendada",              who: "Clínica Riera · Barcelona" },
    { time: "Hace 1 h",    what: "Presupuesto enviado",        who: "Cocinas Modernas · BCN" },
    { time: "Hace 2 h",    what: "Hoja de encargo firmada",    who: "Delusio Abogados · Valencia" },
    { time: "Hace 3 h",    what: "Onboarding nuevo cliente",   who: "Inmo Roca · Palma" },
    { time: "Esta mañana", what: "3 exclusivas captadas",      who: "Habitat.cat · Catalunya" },
  ];
  return (
    <aside className="hero-live reveal reveal-delay-2" aria-label="Actividad reciente">
      <div className="hero-live-head">
        <span className="label">En vivo · cartera</span>
        <span className="live-blip">
          <span className="b" />
          activo
        </span>
      </div>
      <div className="hero-live-feed">
        <div className="hero-live-feed-inner">
          {[...items, ...items].map((it, i) => (
            <div key={i} className="hero-live-item">
              <span className="time">{it.time}</span>
              <span className="what">
                <span className="marker" />
                {it.what}
              </span>
              <span className="who">{it.who}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="hero-live-foot">
        <span className="v">
          <em>+</em><AnimatedNumber to={2400000} duration={2400} />€
        </span>
        <span className="l">Generado · 2025</span>
      </div>
    </aside>
  );
}

// ─── ROTATING WORD ─────────────────────────────────────────────────────
function RotatingWord() {
  const words = ["clientes", "casos", "pacientes", "presupuestos", "firmas", "reservas", "ventas", "matrículas"];
  const [i, setI] = useStateA(0);

  useEffectA(() => {
    const id = setInterval(() => setI((p) => (p + 1) % words.length), 2200);
    return () => clearInterval(id);
  }, []);

  // measure width of widest word for stable layout
  const measureRef = useRefA(null);
  const [width, setWidth] = useStateA("auto");
  useEffectA(() => {
    if (!measureRef.current) return;
    const measure = () => {
      const spans = measureRef.current.querySelectorAll("span");
      let max = 0;
      spans.forEach((s) => { max = Math.max(max, s.getBoundingClientRect().width); });
      setWidth(`${Math.ceil(max)}px`);
    };
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(measureRef.current);
    return () => ro.disconnect();
  }, []);

  return (
    <>
      {/* hidden measure layer */}
      <span
        ref={measureRef}
        aria-hidden="true"
        style={{ position: "absolute", visibility: "hidden", pointerEvents: "none", fontFamily: "var(--font-serif)", fontStyle: "italic", letterSpacing: "-0.02em", fontSize: "inherit" }}
      >
        {words.map((w) => <span key={w} style={{ display: "inline-block" }}>{w}</span>)}
      </span>
      <span
        className="rotor"
        style={{ width, height: "1.05em", lineHeight: "1" }}
        aria-live="polite"
        aria-atomic="true"
      >
        <span
          className="rotor-track"
          style={{ transform: `translateY(-${i * 100}%)` }}
        >
          {words.map((w) => (
            <span key={w}>{w}</span>
          ))}
        </span>
      </span>
    </>
  );
}

// ─── TICKER ────────────────────────────────────────────────────────────
function Ticker() {
  return (
    <div className="ticker">
      <Marquee
        items={TICKER_ITEMS}
        gap={48}
        duration={75}
        renderItem={(item, i) => (
          <span className="ticker-item">
            <span className="dot" />
            {item}
          </span>
        )}
      />
    </div>
  );
}

// ─── PROBLEM (FAQ) ─────────────────────────────────────────────────────
function Problem() {
  const items = [
    {
      tag: "Primera vez",
      q: "Nunca he hecho marketing digital. ¿Por dónde empiezo?",
      a: "Por aquí. Una llamada de quince minutos, sin tecnicismos. Te cuento cómo funciona el sistema con un ejemplo concreto de tu sector, qué presupuesto mínimo tiene sentido y qué esperar el primer mes. Si decides no seguir, igualmente te llevas una hoja de ruta que vale para ir a cualquier otro sitio.",
    },
    {
      tag: "Ya has probado",
      q: "Ya he probado antes con otra agencia. ¿Cómo sé que esta vez sí?",
      a: "Es la pregunta más frecuente que recibo. Te respondo con tres cosas. Uno: yo ejecuto, no hay gestor intermedio que diluya la responsabilidad. Dos: en la primera semana ya tienes datos reales en la mano, no promesas a tres meses. Tres: si en el primer mes no hay tracción, te lo digo yo antes de que tú lo veas — y se ajusta, o paramos.",
    },
    {
      tag: "Garantías",
      q: "¿Y si no funciona, qué pasa?",
      a: "Lo sabes antes de pagar tu segundo mes. Reviso números a diario, no mensualmente. Si en treinta días no veo una curva clara de mejora, paramos o reestructuramos. No vivo de cobrar a quien no debería estar conmigo — y mi cartera está llena precisamente porque ese filtro lo aplico al inicio.",
    },
    {
      tag: "Sector",
      q: "¿Para mi sector también funciona?",
      a: "Si hay un proceso de venta claro y un cliente dispuesto a pagar, hay sistema. El noventa por ciento de los negocios que llegan aquí tienen mecánica similar: atraer a la persona correcta, calificarla y entregarla a tu equipo de cierre. Lo que cambia entre sectores es el mensaje y los canales, no la metodología.",
    },
    {
      tag: "Tiempo",
      q: "¿Cuánto tarda en verse?",
      a: "Primera semana: datos reales — coste por contacto, perfil que entra, mensaje que resuena. Primer mes: primeros contratos cerrados en la mayoría de sectores. Tres meses: el sistema funciona en automático y solo se afina. No es magia: es metodología ya rodada con más de 50 clientes.",
    },
  ];

  return (
    <section className="section shell" id="problema">
      <div className="section-label-row">
        <div>
          <div className="section-label">
            <span className="num">01</span>
            <span className="rule" />
            Las preguntas que me hacen
          </div>
          <h2 className="section-title reveal" style={{ marginTop: 24 }}>
            Probablemente te estás <em>preguntando</em><br />
            algo de esto.
          </h2>
        </div>
        <p className="section-lede reveal reveal-delay-1">
          Hay cinco preguntas que escucho casi en cada primera llamada. Las respondo aquí
          con la misma honestidad con la que las contesto en directo. Si tienes una
          sexta, la hablamos por WhatsApp.
        </p>
      </div>

      <div className="faq-list reveal">
        {items.map((it, i) => (
          <details key={i} className="faq-item" {...(i === 0 ? { open: true } : {})}>
            <summary>
              <span className="faq-num tabular">{String(i + 1).padStart(2, "0")}</span>
              <div className="faq-q-wrap">
                <span className="faq-tag">{it.tag}</span>
                <span className="faq-q">{it.q}</span>
              </div>
              <span className="faq-chev" aria-hidden="true">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                  <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
                </svg>
              </span>
            </summary>
            <div className="faq-a">{it.a}</div>
          </details>
        ))}
      </div>

      <div className="faq-footer reveal">
        <span className="serif-italic" style={{ fontSize: 22, color: "var(--ink-2)" }}>
          ¿Tienes la sexta?
        </span>
        <a
          href={WA_LINK}
          target="_blank"
          rel="noopener noreferrer"
          className="arrow-link"
        >
          Pregúntamela por WhatsApp <ArrowIcon size={14} />
        </a>
      </div>
    </section>
  );
}

// ─── CASES ─────────────────────────────────────────────────────────────
function Cases() {
  const cols = [[], [], []];
  CASES.forEach((c, i) => cols[i % 3].push(c));

  // duplicate so the marquee loops smoothly
  const renderColumn = (items, duration) => (
    <div className="case-col">
      <div className="case-col-track" style={{ animationDuration: `${duration}s` }}>
        {[...items, ...items].map((c, i) => (
          <CaseCard key={i} c={c} />
        ))}
      </div>
    </div>
  );

  return (
    <section className="section" id="casos">
      <div className="shell">
        <div className="section-label-row">
          <div>
            <div className="section-label">
              <span className="num">02</span>
              <span className="rule" />
              Casos · 11 sectores · 50+ clientes
            </div>
            <h2 className="section-title reveal" style={{ marginTop: 24 }}>
              Nombres reales.<br />
              Números <em>reales.</em>
            </h2>
          </div>
          <p className="section-lede reveal reveal-delay-1">
            Sin nombres tachados ni capturas borrosas. Cada uno de estos negocios facturando
            más este trimestre que el anterior, con métodos que se pueden auditar.
          </p>
        </div>
      </div>

      <div className="shell-wide cases-strip reveal">
        {renderColumn(cols[0], 65)}
        {renderColumn(cols[1], 85)}
        {renderColumn(cols[2], 55)}
      </div>

      <div className="shell" style={{ marginTop: 40, display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 16 }}>
        <p style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 17, color: "var(--ink-2)", letterSpacing: "-0.015em" }}>
          ¿Tu sector no aparece? <span className="serif-italic" style={{ color: "var(--terra)" }}>Si hay proceso de venta, hay sistema.</span>
        </p>
        <a href={WA_LINK} target="_blank" rel="noopener noreferrer" className="arrow-link">
          Te cuento cómo lo plantearía para ti <ArrowIcon size={14} />
        </a>
      </div>
    </section>
  );
}

function CaseCard({ c }) {
  return (
    <div className="case-card">
      <div className="tag">{c.group} · {c.sector}</div>
      <div className="headline tabular">{c.headline}</div>
      <div className="sub">{c.headlineUnit} · {c.sub}</div>
      <div className="body">{c.body}</div>
      <div className="foot">
        <span className="client">{c.client}</span>
        <span className="contact">— {c.contact}</span>
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, ReviewsStrip, Ticker, Problem, Cases });