/* VideoHook landing kit — page sections */
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

/* Resource resolver: uses bundled blob URLs (offline standalone) when present,
   otherwise falls back to the real project path (live preview). */
const R = (id, fallback) => (window.__resources && window.__resources[id]) || fallback;

function Nav() {
  return (
    <nav id="nav">
      <a href="#" className="nav-logo"><img src={R("symbol", "assets/videohook-symbol.png")} alt="VideoHook" style={{ height: 26 }} /></a>
      <ul className="nav-links">
        <li><a href="#problema">El problema</a></li>
        <li><a href="#solucion">Solución</a></li>
        <li><a href="#demo">Demo</a></li>
        <li><a href="#contacto">Contacto</a></li>
      </ul>
      <a href={WA} target="_blank" rel="noreferrer" className="nav-cta">Demo gratuita</a>
    </nav>
  );
}

function Hero() {
  const h1 = "Tus competidores ya tienen el precio.".split(" ");
  const h2 = "Tú tienes la imagen.".split(" ");
  const word = (w, i, base) => (
    <span key={base + i} className="hero-word"
      style={{ animationDelay: (0.5 + (base === "a" ? i : h1.length + i) * 0.08) + "s",
               color: (w === "precio." || w === "imagen.") ? "var(--yellow)" : undefined,
               marginRight: "0.28em" }}>{w}</span>
  );
  return (
    <section className="hero">
      <video autoPlay muted loop playsInline poster={R("posterHero", "assets/video/poster-hero.jpg")} id="hero-video">
        <source src={R("vidHero", "assets/video/full-render-landing.mp4")} type="video/mp4" />
      </video>
      <div className="hero-content">
        <div className="eyebrow"><div className="eyebrow-bar"></div><span className="eyebrow-text">Gestión inteligente de obra · España</span></div>
        <h1 className="hero-h1">{h1.map((w, i) => word(w, i, "a"))}</h1>
        <p className="hero-h2">{h2.map((w, i) => word(w, i, "b"))}</p>
        <p className="hero-sub">VideoHook digitaliza tu obra con inteligencia artificial y construye la reputación visual que necesitas para ganar más proyectos.</p>
        <div className="hero-ctas">
          <BtnPrimary href="#demo">Ver cómo funciona <Arrow /></BtnPrimary>
          <BtnGhost href={WA}><WAIcon /> WhatsApp directo</BtnGhost>
        </div>
      </div>
      <div className="scroll-hint"><div className="scroll-line"></div><span className="scroll-label">Descubre más</span></div>
      <div className="hero-tagbar">
        <span className="tagbar-text">CONTROL DE OBRA EN <span>TIEMPO REAL</span></span>
        <span className="tagbar-text">VIDEOHOOK.NET</span>
      </div>
    </section>
  );
}

function StatBand({ motion = "cinematic" }) {
  const [val, setVal] = useStateS(motion === "static" ? 16.5 : 0);
  const numRef = useRefS(null);
  useEffectS(() => {
    if (motion === "static") { setVal(16.5); return; }
    const el = numRef.current;
    if (!el) return;
    let raf, started = false;
    const dur = motion === "subtle" ? 900 : 1600;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          const target = 16.5, t0 = performance.now();
          const tick = (now) => {
            const p = Math.min(1, (now - t0) / dur);
            const eased = 1 - Math.pow(1 - p, 3); // ease-out cubic
            setVal(target * eased);
            if (p < 1) raf = requestAnimationFrame(tick);
          };
          raf = requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.5 });
    io.observe(el);
    return () => { io.disconnect(); cancelAnimationFrame(raf); };
  }, [motion]);
  const display = val.toFixed(1).replace(".", ",");
  return (
    <section className="stat-band reveal">
      <div className="stat-number" ref={numRef}>{display}<span className="stat-unit">%</span></div>
      <div className="stat-divider"></div>
      <div className="stat-body">
        <div className="stat-label">El coste invisible</div>
        <p className="stat-desc">En España, los errores en la gestión de albaranes y facturas hacen que las constructoras pierdan hasta un <strong>16,5% de su facturación anual</strong>. No por trabajar mal sino por no tener el control.</p>
        <p className="stat-source">Fuente: CIC Construcción &amp; Arquitectura · XM2News · 2024–2025</p>
      </div>
    </section>
  );
}

const PAINS = [
  { kind: "doc", t: "Albaranes perdidos", d: "Documentación que desaparece en la cabina del camión. Semanas después de que el coste ya se disparó." },
  { kind: "clock", t: "Facturas con retraso", d: "Sorpresas a fin de mes. Liquidez comprometida por documentos que nadie persigue a tiempo." },
  { kind: "phone", t: "Imagen de móvil", d: "Dossiers de licitación que no reflejan la calidad real de lo que construyes. Pierdes contratos que merecías ganar." },
  { kind: "warn", t: "Multas de Hacienda", d: "Errores en facturas: sanciones del 1% por documento. Con VeriFactu, la no adaptación ya está costando caro." },
];
function PainGrid() {
  return (
    <section className="section section-dark pain-section" id="problema">
      <LazyVideo className="pain-video" src={R("vidCreando", "assets/video/creando-obras.mp4")} poster={R("posterCreando", "assets/video/poster-creando.jpg")} />
      <div className="pain-content">
        <div className="section-eyebrow reveal">El problema</div>
        <h2 className="section-h2 reveal">¿Cuántas licitaciones has perdido<br />por <em>cómo presentas</em> tu trabajo?</h2>
        <div className="pain-grid">
          {PAINS.map((p, i) => (
            <div className="pain-card reveal" key={i} style={{ transitionDelay: i * 0.06 + "s" }}>
              <PainIcon kind={p.kind} />
              <div className="pain-title">{p.t}</div>
              <p className="pain-desc">{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SolutionPillars() {
  return (
    <section className="section section-mid" id="solucion">
      <div className="section-eyebrow reveal">La solución</div>
      <div className="solution-intro">
        <div><h2 className="section-h2 reveal">Un sistema.<br />Dos resultados que<br /><em>cambian tu negocio.</em></h2></div>
        <div className="solution-intro-right reveal">
          <p>VideoHook combina <strong>gestión documental con IA</strong> y <strong>producción de vídeo profesional</strong> en un único servicio pensado para constructoras españolas.</p>
          <p>No es software que tienes que aprender. Es un sistema que funciona desde el primer día, con las herramientas que tu equipo ya usa: WhatsApp y Google Sheets.</p>
        </div>
      </div>
      <div className="pillars">
        <div className="pillar reveal">
          <div className="pillar-num">01</div>
          <div className="pillar-tag">Motor operacional</div>
          <h3 className="pillar-h3">Gestión documental<br />con inteligencia artificial</h3>
          <p className="pillar-desc">Tu equipo manda la foto del albarán por WhatsApp. Nosotros lo procesamos, clasificamos y registramos automáticamente. Tú ves todo en tiempo real, sin instalar nada.</p>
        </div>
        <div className="pillar featured reveal" style={{ transitionDelay: ".08s" }}>
          <div className="pillar-num">02</div>
          <div className="pillar-tag">Motor visual</div>
          <h3 className="pillar-h3">Producción de vídeo<br />que gana licitaciones</h3>
          <p className="pillar-desc">Con la documentación de tu obra generamos vídeos profesionales que muestran tu trabajo como merece. Para tenders, para clientes, para tu reputación.</p>
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  { n: "01", t: "El encargado manda la foto", s: "Albarán, factura o documento por WhatsApp. Como siempre." },
  { n: "02", t: "La IA lo procesa y registra", s: "Extrae datos, detecta anomalías y actualiza el Sheet en segundos." },
  { n: "03", t: "Tú recibes la confirmación", s: "Notificación inmediata con el resumen. Control total sin esfuerzo." },
  { n: "04", t: "Tu obra queda documentada", s: "Al final del año, vídeo profesional listo para tus licitaciones." },
];
function DemoChat() {
  const [stage, setStage] = useStateS(0); // 0 none,1 photo,2 ai,3 sheet,4 deliverable
  const bodyRef = useRefS(null);
  const badgeRefs = useRefS([]);
  const [track, setTrack] = useStateS({ top: 0, height: 0, fill: 0 });
  useEffectS(() => {
    function measure() {
      const body = bodyRef.current;
      const badges = badgeRefs.current.filter(Boolean);
      if (!body || badges.length < 4) return;
      const bodyTop = body.getBoundingClientRect().top;
      const centers = badges.map((b) => {
        const r = b.getBoundingClientRect();
        return r.top - bodyTop + r.height / 2;
      });
      const idx = Math.max(0, Math.min(stage - 1, centers.length - 1));
      setTrack({
        top: centers[0],
        height: centers[centers.length - 1] - centers[0],
        fill: stage >= 1 ? centers[idx] - centers[0] : 0,
      });
    }
    measure();
    window.addEventListener("resize", measure);
    return () => window.removeEventListener("resize", measure);
  }, [stage]);
  useEffectS(() => {
    let t = [];
    function run() {
      setStage(0);
      t.push(setTimeout(() => setStage(1), 600));
      t.push(setTimeout(() => setStage(2), 1800));
      t.push(setTimeout(() => setStage(3), 3000));
      t.push(setTimeout(() => setStage(4), 4300));
      t.push(setTimeout(run, 8000));
    }
    run();
    return () => t.forEach(clearTimeout);
  }, []);
  return (
    <section className="section section-dark" id="demo">
      <div className="demo-layout">
        <div>
          <div className="section-eyebrow reveal">Cómo funciona</div>
          <h2 className="demo-h2 reveal">De la foto al registro<br />en <span>5 segundos.</span></h2>
          <p className="demo-desc reveal">Sin apps nuevas. Sin formación. Sin cambiar cómo trabaja tu equipo. Solo WhatsApp y nuestra IA haciendo el resto.</p>
          <div className="steps reveal">
            {STEPS.map((s, i) => (
              <div className={"step" + (stage === i + 1 ? " active" : "") + (stage > i + 1 ? " done" : "")} key={s.n}>
                <span className="step-num">{s.n}</span>
                <div><div className="step-title">{s.t}</div><div className="step-sub">{s.s}</div></div>
              </div>
            ))}
          </div>
        </div>
        <div className="demo-window reveal">
          <div className="demo-bar">
            <div className="dbar-dot" style={{ background: "#ff5f57" }}></div>
            <div className="dbar-dot" style={{ background: "#febc2e" }}></div>
            <div className="dbar-dot" style={{ background: "#28c840" }}></div>
            <span style={{ fontFamily: "Orbitron,monospace", fontSize: 9, color: "rgba(244,244,244,.28)", marginLeft: 8, letterSpacing: ".08em" }}>VIDEOHOOK · SISTEMA</span>
          </div>
          <div className="demo-body" ref={bodyRef}>
            <div className="flow-track" style={{ top: track.top, height: track.height }}>
              <div className="flow-track-fill" style={{ height: track.fill }}></div>
            </div>
            <div className="flow-row">
              <div className="flow-gutter">
                <span className={"flow-num" + (stage >= 1 ? " on" : "")} ref={(el) => (badgeRefs.current[0] = el)}>1</span>
              </div>
              <div className="flow-content">
                <div className={"fmsg" + (stage >= 1 ? " show" : "")}>
                  <div className="favatar av-w">JL</div>
                  <div className="fbubble">
                    <div className="img-ph">📄</div>
                    <div className="bt">Albarán García Hormigones<br />HA-25 — 12m³</div>
                    <div className="bs">09:14 · Obra Calle Mayor 42</div>
                  </div>
                </div>
              </div>
            </div>
            <div className="flow-row">
              <div className="flow-gutter">
                <span className={"flow-num" + (stage >= 2 ? " on" : "")} ref={(el) => (badgeRefs.current[1] = el)}>2</span>
              </div>
              <div className="flow-content">
                <div className={"fmsg right" + (stage >= 2 ? " show" : "")}>
                  <div className="favatar av-ai">AI</div>
                  <div className="fbubble ai">
                    <div style={{ display: "flex", alignItems: "center", gap: 4, marginBottom: 4 }}>
                      <span className="pulse"></span>
                      <span style={{ fontSize: 9, color: "rgba(245,180,0,.7)", fontFamily: "Orbitron,monospace", letterSpacing: ".1em" }}>PROCESANDO</span>
                    </div>
                    <div className="bt">Albarán detectado y registrado ✓</div>
                    <div className="btag">Google Sheets actualizado</div>
                    <div className="bs">09:14 · 3 segundos</div>
                  </div>
                </div>
              </div>
            </div>
            <div className="flow-row">
              <div className="flow-gutter">
                <span className={"flow-num" + (stage >= 3 ? " on" : "")} ref={(el) => (badgeRefs.current[2] = el)}>3</span>
              </div>
              <div className="flow-content">
                <div className={"sheet" + (stage >= 3 ? " show" : "")}>
                  <div className="sh-head">📊 Obra Calle Mayor 42 — Albaranes</div>
                  <div className="sh-row"><div className="sh-cell h">Proveedor</div><div className="sh-cell h">Material</div><div className="sh-cell h">Importe</div></div>
                  <div className="sh-row"><div className="sh-cell">Hnos. Martínez</div><div className="sh-cell">Hierro corrugado</div><div className="sh-cell">€2.340</div></div>
                  <div className="sh-row"><div className="sh-cell">Áridos del Sur</div><div className="sh-cell">Grava 20mm</div><div className="sh-cell">€890</div></div>
                  <div className="sh-row hl"><div className="sh-cell">García Hormigones</div><div className="sh-cell">Hormigón HA-25</div><div className="sh-cell">€1.560</div></div>
                </div>
              </div>
            </div>
            <div className="flow-row">
              <div className="flow-gutter">
                <span className={"flow-num" + (stage >= 4 ? " on" : "")} ref={(el) => (badgeRefs.current[3] = el)}>4</span>
              </div>
              <div className="flow-content">
                <div className={"deliver" + (stage >= 4 ? " show" : "")}>
                  <div className="deliver-thumb">
                    <img src={R("posterHero", "assets/video/poster-hero.jpg")} alt="" />
                    <span className="deliver-play">
                      <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M8 5v14l11-7z" /></svg>
                    </span>
                  </div>
                  <div className="deliver-meta">
                    <div className="deliver-eyebrow">Entregable anual</div>
                    <div className="deliver-title">Dossier de obra · 2026</div>
                    <div className="deliver-tags"><span>VÍDEO 4K</span><span>INFORME PDF</span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const HOWS = [
  { n: "01", t: "Conectas tu obra", d: "Número de WhatsApp dedicado a tu proyecto. Sin hardware, sin instalaciones, sin cambiar cómo trabaja tu equipo.", arr: true },
  { n: "02", t: "La IA organiza todo", d: "Cada documento se clasifica, registra y analiza. Anomalías detectadas, presupuesto vigilado, certificaciones al día.", arr: true },
  { n: "03", t: "Tú controlas y creces", d: "Dashboard en tiempo real. Y al final del año, un vídeo profesional de tu obra que ningún competidor tiene para sus licitaciones.", arr: false },
];
function ProcessGrid() {
  return (
    <section className="section section-mid" id="proceso">
      <div className="section-eyebrow reveal">El proceso</div>
      <h2 className="section-h2 reveal">Tres pasos.<br /><em>Cero fricción.</em></h2>
      <div className="how-grid">
        {HOWS.map((h, i) => (
          <div className="how-card reveal" key={h.n} style={{ transitionDelay: i * 0.06 + "s" }}>
            <div className="how-n">{h.n}</div>
            <div className="how-title">{h.t}</div>
            <p className="how-desc">{h.d}</p>
            {h.arr && <FlowArrow />}
          </div>
        ))}
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="section-cta" id="contacto">
      <p className="cta-eyebrow reveal">El siguiente paso</p>
      <h2 className="cta-h2 reveal">La próxima licitación<br />que ganes <span>empieza hoy.</span></h2>
      <p className="cta-sub reveal">Sin compromiso. Sin contrato inmediato. Solo una conversación.</p>
      <div className="reveal">
        <BtnPrimary href={WA} style={{ padding: "18px 44px", fontSize: 11 }}><WAIcon /> Quiero una demo gratuita</BtnPrimary>
      </div>
      <p className="cta-micro">Respuesta en menos de 24 horas · España</p>
      <div className="closing-bar">
        <img src={R("logoFull", "assets/videohook-logo-full.png")} alt="VideoHook" className="footer-logo" />
        <div className="footer-meta">
          <span className="footer-tag">Control de obra en tiempo real</span>
          <span className="footer-tag"><a href="https://videohook.net/privacidad.html" target="_blank" className="stat-label">Política de Privacidad</a> · © 2026 · videohook.net</span>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return null;
}

Object.assign(window, { Nav, Hero, StatBand, PainGrid, SolutionPillars, DemoChat, ProcessGrid, CTA, Footer });