// Landing — proyectos (avatares), proceso (timeline), trayectoria (cards), FAQ, CTA + footer, chat, tema
const { PROFILE: LP2, PROJECTS: LPROJ2, EXPERIENCE: LEXP } = window.PORTFOLIO_DATA;
const { LI: I, LLINKS: LINKS2, Dither: LDither, Magnetic: LMag, ynContact: mContact } = window;

const LSTEPS = [[I.cal, "Diagnóstico", "Una llamada de 30 minutos para entender el problema real, no el síntoma. Salimos con alcance, estructura y plazos claros."], [I.users, "Construcción", "Trabajamos con visibilidad total: iteraciones cortas, entregas visibles y cada pieza probada y documentada."], [I.rocket, "Operación", "Salida a producción con monitoreo, backups y un runbook que cualquiera puede seguir a las 3 AM."]];
function LHow({ onChat }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    let raf = 0;
    const f = () => { raf = 0; const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(), vh = window.innerHeight; const p = Math.min(1, Math.max(0, (vh * .7 - r.top) / r.height)); el.style.setProperty("--h", `${(p * 100).toFixed(1)}%`); el.querySelectorAll(".step").forEach(s => s.toggleAttribute("data-on", s.offsetTop + 30 <= p * r.height)); };
    const on = () => { if (!raf) raf = requestAnimationFrame(f); };
    f(); window.addEventListener("scroll", on, { passive: true }); window.addEventListener("resize", on);
    return () => { window.removeEventListener("scroll", on); window.removeEventListener("resize", on); cancelAnimationFrame(raf); };
  }, []);
  return (
    <section className="how" id="proceso">
      <div className="wrap hgrid">
        <div className="left reveal">
          <h2>Cómo trabajo</h2>
          <p className="sub">Tu operación, diseñada con criterio y puesta en producción con <strong>un único responsable técnico</strong>, lista para crecer.</p>
          <LMag className="btn black" href="#contacto" onClick={() => mContact("llamada")}>Agendar una llamada</LMag>
        </div>
        <div className="steps" ref={ref}><span className="fill"></span>
          {LSTEPS.map(([ic, t, d]) => <div className="step reveal" key={t}><i>{ic}</i><div><h3>{t}</h3><p>{d}</p></div></div>)}
        </div>
      </div>
    </section>
  );
}

const LPRODUCTS = [
  { title: "Dialer", who: "Para equipos de venta telefónica", from: "USD 97", per: "/ mes", org: "Marcador, CRM y contactos en un solo lugar. Incluye 5 usuarios.", cta: ["Pedir una demo", "#contacto", "demo-dialer"], items: ["Pipeline y seguimiento por vendedor", "Llamadas y contactos sobre la misma base", "Pagás solo los módulos que usás"] },
  { title: "Leadko AI", who: "Para quien recibe consultas por WhatsApp e Instagram", from: "USD 49", per: "/ mes", org: "Agentes de IA que atienden, califican y derivan leads 24/7.", hi: true, cta: ["Probar Leadko AI", "https://leadkoai.com"], items: ["WhatsApp, Instagram, Web y Messenger en un inbox", "Conversación natural, sin menús", "Calificación automática según criterios que definas", "Seguís usando tu mismo WhatsApp en el celular"] },
  { title: "VelIA", who: "Para administración de edificios y posventa", from: "USD 1200", per: "único pago", org: "Cada reclamo, desde que entra hasta que se resuelve. Mantenimiento opcional.", cta: ["Pedir una demo", "#contacto", "demo-velia"], items: ["Triage por urgencia y SLA configurables", "Técnicos, carga y agenda de visitas", "Reportes por categoría y tiempo de resolución", "Proveedores e histórico por edificio"] },
];
function LProducts() {
  return (
    <section className="plans" id="productos">
      <div className="wrap">
        <div className="head reveal"><span className="kicker">Productos</span><h2>Tres productos, tres problemas distintos</h2><p className="sub">No son niveles de un mismo plan: cada uno resuelve una operación diferente. Sin permanencia; la implementación se cotiza aparte.</p></div>
        <div className="pgrid">
          {LPRODUCTS.map((p, k) => (
            <article key={p.title} className={`plan reveal${p.hi ? " hi" : ""}`} style={{ "--d": `${k * .08}s` }}>
              {p.hi && <span className="badge">PRODUCTO PRINCIPAL</span>}
              <h3>{p.title}</h3>
              <div className="price"><small>desde</small><b>{p.from}</b><span>{p.per}</span></div>
              <p className="org">{p.org}</p>
              <a className={`btn ${p.hi ? "black" : "gray"}`} href={p.cta[1]} target={p.cta[1].startsWith("http") ? "_blank" : undefined} rel="noreferrer" onClick={p.cta[2] ? () => mContact(p.cta[2]) : undefined}>{p.cta[0]} {p.hi && I.arrow}</a>
              <p className="inc">Incluye:</p>
              <ul>{p.items.map(t => <li key={t}>{t}</li>)}</ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function LWho() {
  return (
    <section className="who" id="trayectoria">
      <div className="wrap">
        <div className="reveal"><span className="kicker">Quién está detrás</span><h3>Yeiko Nova</h3><p className="sub">Infraestructura y redes como base. Producto y automatización como palanca. Un único responsable técnico de punta a punta.</p></div>
        <dl className="reveal" style={{ "--d": ".1s" }}>
          {LEXP.map(e => <React.Fragment key={e.org}><dt>{e.period}</dt><dd>{e.role} · {e.org}</dd></React.Fragment>)}
          <dt>Formación</dt><dd>Analista en Infraestructura · ORT &nbsp;·&nbsp; Tecnólogo Informático · IAE</dd>
        </dl>
      </div>
    </section>
  );
}

const LFAQ = [["¿Cómo empiezo con Leadko AI?", "Entrás a leadkoai.com, conectás tus canales (WhatsApp, Instagram, Web o Messenger) y cargás tus documentos. El agente queda atendiendo el mismo día."], ["¿Sirve para mi rubro?", "Nació en inmobiliarias, pero el agente aprende de tus documentos y procedimientos. Funciona para cualquier equipo que reciba consultas y necesite calificarlas rápido."], ["¿Dialer y VelIA se pueden contratar?", "Sí. Son plataformas en producción que se adaptan a tu empresa. Pedí una demo y vemos qué módulos necesitás."], ["¿Quién implementa y mantiene todo?", "Yo. Infraestructura, integración y soporte con un único responsable técnico, con monitoreo y backups incluidos."], ["¿Cuánto tarda una implementación?", "Leadko AI, días. Una plataforma a medida, de dos a cuatro meses. También trabajo con retainers mensuales de operación."]];
function LFaq({ onChat }) {
  const [o, setO] = React.useState(0);
  return (
    <section className="faq" id="faq">
      <div className="wrap">
        <div className="head reveal"><span className="kicker">Preguntas frecuentes</span><h2>Todo lo que necesitás saber</h2><p className="sub">¿Tenés otra pregunta? Escribime o preguntale a Leadko AI.</p><div className="btns"><a className="btn black" href="#contacto" onClick={() => mContact("contacto")}>Pedir una demo</a><button className="btn white" onClick={onChat}>Hablar con Leadko AI</button></div></div>
        <div className="acc reveal">{LFAQ.map(([q, a], k) => <div className="q" key={q} data-open={o === k ? "" : undefined}><button onClick={() => setO(o === k ? -1 : k)} aria-expanded={o === k}>{q}{I.chev}</button><div className="a"><div><p>{a}</p></div></div></div>)}</div>
      </div>
    </section>
  );
}

function LEnd() {
  const [v, setV] = React.useState("");
  const [hp, setHp] = React.useState(""); // honeypot
  const [origen, setOrigen] = React.useState("contacto");
  const [st, setSt] = React.useState({ s: "idle", msg: "" }); // idle | sending | ok | error
  const mail = LP2.social.find(s => s.href.startsWith("mailto:"));
  const addr = mail ? mail.href.replace("mailto:", "") : "yeikonovah@gmail.com";
  React.useEffect(() => {
    const on = (e) => { setOrigen(e.detail || "contacto"); setSt(x => x.s === "ok" ? x : { s: "idle", msg: "" }); };
    window.addEventListener("yn-contact", on);
    return () => window.removeEventListener("yn-contact", on);
  }, []);
  const go = async (e) => {
    e.preventDefault();
    if (st.s === "sending") return;
    setSt({ s: "sending", msg: "" });
    try {
      const r = await fetch("/api/contact", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: v.trim(), origen, website: hp }) });
      if (r.ok) { setSt({ s: "ok", msg: "Listo, te escribo pronto" }); setV(""); return; }
      const d = await r.json().catch(() => ({}));
      const msg = d.error === "invalid_email" ? "Ese email no parece válido. Revisalo y probá de nuevo."
        : r.status === 429 ? "Demasiados intentos. Probá de nuevo en unos minutos."
        : `No se pudo enviar. Probá de nuevo o escribime a ${addr}.`;
      setSt({ s: "error", msg });
    } catch (err) { setSt({ s: "error", msg: `No se pudo enviar. Probá de nuevo o escribime a ${addr}.` }); }
  };
  const kick = { "demo-dialer": "Dialer", "demo-velia": "VelIA" }[origen] || "Leadko AI";
  return (
    <div className="end" id="contacto">
      <div className="band"></div>
      <div className="wrap">
        <div className="cta reveal">
          <div className="blur" aria-hidden="true"><LDither cell={3} sky /></div>
          <div className="in">
            <span className="kicker" style={{ color: "#3b4d1c" }}>{kick}</span>
            <h2>¿Arrancamos?<br />Contame qué necesitás.</h2>
            {st.s === "ok"
              ? <p role="status" style={{ margin: 0, fontSize: 20, fontWeight: 700, color: "#111" }}>{st.msg}</p>
              : <form className="mailbox" onSubmit={go}>{I.mail}<input type="email" required value={v} onChange={e => setV(e.target.value)} placeholder="Tu email de trabajo" aria-label="Tu email de trabajo" disabled={st.s === "sending"} /><div aria-hidden="true" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, overflow: "hidden" }}><label>No completar este campo<input type="text" name="website" tabIndex={-1} autoComplete="off" value={hp} onChange={e => setHp(e.target.value)} /></label></div><button className="btn black" type="submit" disabled={st.s === "sending"}>{st.s === "sending" ? "Enviando…" : <>Pedir demo {I.right}</>}</button></form>}
            {st.s === "error" && <p role="alert" style={{ margin: 0, fontWeight: 600, color: "#7a1414" }}>{st.msg}</p>}
            <a className="alt" href="https://leadkoai.com" target="_blank" rel="noreferrer">o probá Leadko AI ahora {I.arrow}</a>
          </div>
        </div>
      </div>
      <footer>
        <div className="wrap">
          <div className="fgrid">
            <a className="logo" href="#top">Yeiko Nova</a>
            <div className="fcols">
              <div><h4>Menú</h4><ul>{LINKS2.map(([h, l]) => <li key={h}><a href={h}>{l}</a></li>)}</ul></div>
              <div><h4>Proyectos</h4><ul>{LPROJ2.map(p => <li key={p.slug}><a href={p.demo || "#proyectos"} target={p.demo ? "_blank" : undefined} rel="noreferrer">{p.title}</a></li>)}</ul></div>
              <div><h4>Social</h4><ul>{LP2.social.map(s => <li key={s.label}><a href={s.href} target={s.href.startsWith("http") ? "_blank" : undefined} rel="noreferrer">{s.label}</a></li>)}</ul></div>
            </div>
          </div>
          <div className="copy"><span>© {new Date().getFullYear()} Yeiko Nova. Todos los derechos reservados.</span></div>
        </div>
      </footer>
    </div>
  );
}

function LChat({ open, onClose }) {
  const [msgs, setMsgs] = React.useState([{ role: "agent", content: "Hola, soy Leadko AI, el agente de Yeiko. Contame qué necesita tu operación y te oriento. ¿Cómo te llamás y de qué se trata el proyecto?" }]);
  const [input, setInput] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const box = React.useRef(null);
  React.useEffect(() => { if (box.current) box.current.scrollTop = box.current.scrollHeight; }, [msgs, busy, open]);
  const send = async (text) => {
    const t = (text ?? input).trim(); if (!t || busy) return;
    const next = [...msgs, { role: "user", content: t }];
    setMsgs(next); setInput(""); setBusy(true);
    try {
      // El saludo inicial es sólo de UI: la API arranca en el primer mensaje del usuario.
      let history = next.map(m => ({ role: m.role === "agent" ? "assistant" : "user", content: m.content })).slice(-20);
      while (history.length && history[0].role !== "user") history = history.slice(1);
      const r = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: history }) });
      if (!r.ok) throw new Error(`HTTP ${r.status}`);
      const { reply } = await r.json();
      // El prompt pide texto plano; por si igual llega markdown, sacamos los ** de negrita.
      const clean = typeof reply === "string" ? reply.replace(/\*\*/g, "").trim() : "";
      if (!clean) throw new Error("empty reply");
      setMsgs(p => [...p, { role: "agent", content: clean }]);
    } catch (e) { setMsgs(p => [...p, { role: "agent", content: "No pude conectar en este momento. Escribile directo a yeikonovah@gmail.com; responde en menos de 24 horas." }]); }
    finally { setBusy(false); }
  };
  if (!open) return null;
  const quick = ["Quiero probar Leadko AI", "Pedir una demo de Dialer", "Necesito gestionar reclamos de posventa", "¿Cuánto cuesta?"];
  return (
    <div className="panel" role="dialog" aria-label="Chat con Leadko AI">
      <header><div className="avatar">L</div><div><b>Leadko AI</b><small><i></i>Agente de Yeiko · en línea</small></div><button className="x" aria-label="Cerrar" onClick={onClose}>{I.close}</button></header>
      <div className="msgs" ref={box}>{msgs.map((m, k) => <div key={k} className={`msg ${m.role}`}>{m.content}</div>)}{busy && <div className="msg agent typing"><span></span><span></span><span></span></div>}</div>
      {msgs.length <= 1 && !busy && <div className="quick">{quick.map(q => <button key={q} onClick={() => send(q)}>{q}</button>)}</div>}
      <div className="input"><input value={input} onChange={e => setInput(e.target.value)} onKeyDown={e => { if (e.key === "Enter") send(); }} placeholder="Escribile a Leadko AI…" disabled={busy} autoFocus /><button className="send" aria-label="Enviar" onClick={() => send()} disabled={busy || !input.trim()}>{I.right}</button></div>
      <a className="powered" href="https://leadkoai.com" target="_blank" rel="noreferrer">Chat con tecnología de <b>Leadko AI</b></a>
    </div>
  );
}

function LTheme({ theme, onToggle }) { return <button className="theme" aria-label="Cambiar tema" onClick={onToggle}><span key={theme} className="ico">{theme === "dark" ? I.sun : I.moon}</span></button>; }

Object.assign(window, { LHow, LProducts, LWho, LFaq, LEnd, LChat, LTheme });