/* Wisdom — Home. Entrada al sitio: hero + logos + resúmenes con "Ver más →". */
(function () {
  const W = window.WISDOM;
  const Arrow = window.WArrow;
  const { WLogoMarquee } = window;

  function Hero() {
    const vref = React.useRef(null);
    React.useEffect(() => {
      const v = vref.current;
      if (!v) return;
      let objUrl = null;
      v.muted = true;
      v.defaultMuted = true;
      v.volume = 0;
      v.removeAttribute("controls");
      const tryPlay = () => { const p = v.play(); if (p && p.catch) p.catch(() => {}); };
      v.addEventListener("loadeddata", tryPlay);
      // The preview server ignores HTTP Range requests, which stalls the native
      // media loader. Fetch the file as a Blob and play it from an object URL.
      let cancelled = false;
      fetch("assets/wisdom-landing.mp4")
        .then((r) => r.blob())
        .then((blob) => {
          if (cancelled) return;
          objUrl = URL.createObjectURL(blob);
          v.src = objUrl;
          v.load();
          tryPlay();
        })
        .catch(() => { tryPlay(); });
      return () => {
        cancelled = true;
        v.removeEventListener("loadeddata", tryPlay);
        if (objUrl) URL.revokeObjectURL(objUrl);
      };
    }, []);
    return (
      <section className="hero hero--video" id="top">
        <div className="hero-glow" />
        <div className="hero-video-frame">
          <video ref={vref} className="hero-video" autoPlay muted loop playsInline preload="auto" aria-hidden="true">
            <source src="assets/wisdom-landing.mp4" type="video/mp4" />
          </video>
          <div className="hero-foot">
            <p className="hero-slogan">
              Automation &amp; AI<br /><span className="gold-text">From strategy to operation</span>
            </p>
            <a className="arrow-link hero-foot-link" href="metodologia.html">Conoce Nuestra Metodología <Arrow /></a>
          </div>
        </div>

        <WLogoMarquee />
      </section>
    );
  }

  /* Contraste — por qué el método importa */
  function SumContrast() {
    const cross = (
      <svg className="cx-ico" viewBox="0 0 20 20" fill="none" aria-hidden="true">
        <path d="M6 6l8 8M14 6l-8 8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
      </svg>
    );
    const check = (
      <svg className="ck-ico" viewBox="0 0 20 20" fill="none" aria-hidden="true">
        <path d="M5 10.5l3.2 3.2L15 7" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    );
    const bad = [
      "La herramienta decide antes que el problema.",
      "Se automatiza el proceso tal como está.",
      "Los pilotos quedan aislados.",
      "No hay dueño, métricas ni gobierno.",
      "La solución no escala.",
    ];
    const good = [
      "Se identifica dónde está el valor real.",
      "Se rediseña el proceso antes de automatizar.",
      "Se elige la tecnología adecuada para cada caso.",
      "Cada iniciativa tiene dueño, métricas y gobierno.",
      "La solución llega a producción y mejora en el tiempo.",
    ];
    return (
      <section className="section contrast">
        <div className="contrast-glow" />
        <div className="wrap">
          <div className="contrast-panel">
            <div className="section-head contrast-head">
              <p className="eyebrow">Por qué importa el método</p>
              <h2>Automatizar sin método<br />es acelerar en la dirección equivocada.</h2>
            </div>
            <div className="contrast-grid">
              <div className="contrast-card contrast-card--bad">
                <p className="contrast-tag contrast-tag--bad">Automatización sin dirección</p>
                <ul className="contrast-list">
                  {bad.map((t, i) => (
                    <li key={i}><span className="cx-wrap">{cross}</span>{t}</li>
                  ))}
                </ul>
              </div>
              <div className="contrast-card contrast-card--good">
                <p className="contrast-tag contrast-tag--good">Con Wisdom Methodology</p>
                <ul className="contrast-list">
                  {good.map((t, i) => (
                    <li key={i}><span className="ck-wrap">{check}</span>{t}</li>
                  ))}
                </ul>
              </div>
            </div>
            <div className="contrast-foot">
              <p className="contrast-statement">
                Wisdom Methodology cambia el orden: primero <span className="gold-text">entendemos, priorizamos y rediseñamos</span>. Después automatizamos.
              </p>
              <a className="contrast-cta" href="metodologia.html">Conocé nuestra metodología <Arrow /></a>
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* Resumen 2 — Señales: dónde hay valor para capturar */
  function SumSignals() {
    const signals = [
      { t: "Mucho trabajo manual", d: "Equipos copiando, validando o moviendo información entre sistemas." },
      { t: "Procesos con errores", d: "Retrabajo, demoras, excepciones y decisiones inconsistentes." },
      { t: "Datos dispersos", d: "Información en planillas, correos, sistemas aislados o documentos difíciles de explotar." },
      { t: "Pilotos que no escalan", d: "Soluciones que funcionan en demo pero no llegan a producción ni generan impacto medible." },
    ];
    return (
      <section className="section section--light home-block">
        <div className="wrap">
          <div className="section-head">
            <p className="eyebrow eyebrow--dark">Señales</p>
            <h2>Si esto pasa en tu organización,<br />hay valor para capturar.</h2>
          </div>
          <div className="signals-grid">
            {signals.map((s, i) => (
              <div className="signal-card" key={i}>
                <span className="signal-n">{String(i + 1).padStart(2, "0")}</span>
                <h3 className="signal-title">{s.t}</h3>
                <p className="signal-desc">{s.d}</p>
              </div>
            ))}
          </div>
          <div className="signals-cta">
            <a className="contrast-cta" href="contacto.html">Detectar oportunidades <Arrow /></a>
          </div>
        </div>
      </section>
    );
  }

  /* Por qué automatizar ahora */
  function SumWhy() {
    const cards = [
      { n: "01", t: "Más velocidad operativa", d: "Reducí tareas manuales, tiempos de respuesta y pasos repetitivos que consumen capacidad del equipo." },
      { n: "02", t: "Mejores decisiones", d: "Convertí datos dispersos en información útil para priorizar, anticipar problemas y actuar con más precisión." },
      { n: "03", t: "Más adopción y escala", d: "Pasá de pilotos aislados a soluciones que los equipos usan, miden y mejoran en la operación diaria." },
    ];
    const strip = [
      { k: "+Eficiencia", v: "Menos trabajo manual." },
      { k: "+Inteligencia", v: "Decisiones basadas en datos." },
      { k: "+Capacidad", v: "Equipos enfocados en tareas de mayor valor." },
    ];
    return (
      <section className="section why">
        <div className="why-glow" />
        <div className="wrap">
          <div className="section-head why-head">
            <h2>¿Por qué automatizar ahora?</h2>
            <p>
              Las organizaciones que logran escalar no son las que hacen más tareas, sino las que aprenden a decidir mejor, operar más rápido y liberar capacidad usando datos, IA y automatización.
            </p>
          </div>
          <div className="why-grid">
            {cards.map((c) => (
              <div className="why-card" key={c.n}>
                <p className="why-card-n"><span>{c.n}</span> · {c.t}</p>
                <p className="why-card-d">{c.d}</p>
              </div>
            ))}
          </div>
          <div className="why-strip">
            {strip.map((s, i) => (
              <div className="why-strip-item" key={i}>
                <span className="why-strip-k">{s.k}</span>
                <span className="why-strip-v">{s.v}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* Cierre — Contacto: info + formulario simple */
  function HomeCTA() {
    const [sent, setSent] = React.useState(false);
    const IcoMail = (
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2.5" stroke="currentColor" strokeWidth="1.7" /><path d="M4 7l8 6 8-6" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" /></svg>
    );
    const IcoPin = (
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 21s7-5.5 7-11a7 7 0 10-14 0c0 5.5 7 11 7 11z" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round" /><circle cx="12" cy="10" r="2.6" stroke="currentColor" strokeWidth="1.7" /></svg>
    );
    const IcoIn = (
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3.5" y="3.5" width="17" height="17" rx="3" stroke="currentColor" strokeWidth="1.7" /><path d="M8 10.5V16M8 7.6v.01M11.5 16v-3.1a1.9 1.9 0 013.8 0V16" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" /></svg>
    );
    const IcoClock = (
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="8.2" stroke="currentColor" strokeWidth="1.7" /><path d="M12 7.6V12l3 1.8" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" /></svg>
    );
    const info = [
      { ico: IcoMail, label: "Email", lines: ["contacto@wisdomdai.com"] },
      { ico: IcoPin, label: "Dirección", lines: ["Av. Corrientes 800", "CABA, Argentina"] },
      { ico: IcoIn, label: "LinkedIn", lines: ["/company/wisdom-dai"] },
      { ico: IcoClock, label: "Tiempo de respuesta", lines: ["Menos de 24 hs"] },
    ];
    return (
      <section className="section contact">
        <div className="contact-glow" />
        <div className="wrap">
          <div className="contact2-grid">
            <div className="contact2-info">
              <p className="eyebrow">Conectemos</p>
              <h2 className="contact2-title">Estamos para <span className="gold-text">ayudarte</span></h2>
              <p className="contact2-lead">
                Escribinos y agendamos una primera reunión sin compromiso para entender tu caso. En 30 minutos podés salir con ideas concretas.
              </p>
              <div className="contact2-items">
                {info.map((it) => (
                  <div className="contact2-item" key={it.label}>
                    <span className="contact2-ico">{it.ico}</span>
                    <div className="contact2-itxt">
                      <p className="contact2-ilabel">{it.label}</p>
                      {it.lines.map((l, i) => <p className="contact2-ivalue" key={i}>{l}</p>)}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="cform-card">
              <div className="cform-head">
                <h3>Agendá tu diagnóstico</h3>
                <p>Contanos dónde estás y coordinamos una primera reunión sin compromiso.</p>
              </div>
              {sent ? (
                <div className="cform-sent">
                  <div className="cform-sent-mark">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  </div>
                  <h4>¡Gracias por escribirnos!</h4>
                  <p>Recibimos tu mensaje. Te respondemos en menos de 24 horas.</p>
                </div>
              ) : (
                <form className="cform" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                  <label className="cfield">
                    <span className="cfield-label">Email corporativo <i>*</i></span>
                    <input className="cfield-input" type="email" name="email" autoComplete="email" placeholder="nombre@empresa.com" required />
                  </label>
                  <label className="cfield">
                    <span className="cfield-label">Teléfono <em>(opcional)</em></span>
                    <input className="cfield-input" type="tel" name="telefono" autoComplete="tel" placeholder="+54 11 0000 0000" />
                  </label>
                  <label className="cfield">
                    <span className="cfield-label">Empresa</span>
                    <input className="cfield-input" type="text" name="empresa" autoComplete="organization" placeholder="Razón social" />
                  </label>
                  <button className="cform-submit" type="submit">
                    Agendar diagnóstico
                    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10h11M11 6l4 4-4 4" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  </button>
                  <p className="cform-fine">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="5" y="10.5" width="14" height="9" rx="2" stroke="currentColor" strokeWidth="1.6" /><path d="M8 10.5V8a4 4 0 018 0v2.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
                    Tus datos están seguros. No compartimos tu información.
                  </p>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* CTA de cierre — "Trabajemos juntos" (mismo patrón moderno que Acerca de Wisdom) */
  function Trabajemos() {
    return (
      <section className="section cta2-band">
        <div className="wrap">
          <div className="cta2">
            <p className="cta2-eyebrow"><span className="cta2-dash"></span>Trabajemos juntos</p>
            <h2 className="cta2-title">Contanos qué desafío estás enfrentando.</h2>
            <p className="cta2-lead">Lo pensamos con vos y diseñamos el camino hacia una solución que genere valor medible desde el primer día.</p>
            <div className="cta2-actions">
              <a className="cta2-primary" href="contacto.html">Trabajemos juntos <Arrow /></a>
              <a className="cta2-ghost" href="impacto.html">Ver casos de impacto</a>
            </div>
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, { WHero: Hero, WSumContrast: SumContrast, WSumSignals: SumSignals, WSumWhy: SumWhy, WHomeCTA: HomeCTA, WTrabajemos: Trabajemos });
})();