/* MIRAI landing — section components (dark/violet redesign) */

const { useState: useS, useEffect: useE, useRef: useR } = React;

// ============ NAV ============
function Nav() {
  const [scrolled, setScrolled] = useS(false);
  const [open, setOpen] = useS(false);
  const route = useRoute();
  useE(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useE(() => { setOpen(false); }, [route]);
  useE(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener("keydown", onKey);
    };
  }, [open]);
  const isActive = (r) => route === r ? "active" : "";
  const close = () => setOpen(false);
  return (
    <nav className={`nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="wrap nav__inner">
        <a href="#/" className="nav__logo" aria-label="MIRAI Studio">
          <img src="assets/mirailogo3.png" alt="MIRAI" />
        </a>
        <div className="nav__menu">
          <a href="#/" className={isActive("/")}>Home</a>
          <a href="#/contacto" className={isActive("/contacto")}>Dashboard</a>
          <a href="#/onboarding" className={isActive("/onboarding")}>Onboarding</a>
          <a href="#/sobre-nosotros" className={isActive("/sobre-nosotros")}>Sobre Nosotros</a>
        </div>
        <div className="nav__cta">
          <a
            href="https://api.whatsapp.com/send/?phone=5491165712340&text=Hola%2C+buenos+d%C3%ADas%2C+quer%C3%ADa+m%C3%A1s+informaci%C3%B3n+sobre+Mirai.&type=phone_number&app_absent=0"
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn--outline btn--sm">
            Contáctanos <span className="arrow">→</span>
          </a>
          <a href="#/dashboard" className="nav__user" aria-label="Acceder al dashboard">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="8" r="4" />
              <path d="M4 20c0-4 4-6 8-6s8 2 8 6" />
            </svg>
          </a>
          <button
            className="nav__burger"
            aria-label={open ? "Cerrar menú" : "Abrir menú"}
            aria-expanded={open}
            onClick={() => setOpen((v) => !v)}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              {open ? (
                <React.Fragment>
                  <line x1="5" y1="5" x2="19" y2="19" />
                  <line x1="19" y1="5" x2="5" y2="19" />
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <line x1="4" y1="7" x2="20" y2="7" />
                  <line x1="4" y1="12" x2="20" y2="12" />
                  <line x1="4" y1="17" x2="20" y2="17" />
                </React.Fragment>
              )}
            </svg>
          </button>
        </div>
      </div>
      <div className="nav__mobile" data-open={open} aria-hidden={!open}>
        <div className="nav__mobile__head">
          <a href="#/" className="nav__logo" aria-label="MIRAI Studio" onClick={close}>
            <img src="assets/mirailogo3.png" alt="MIRAI" />
          </a>
          <button className="nav__burger" aria-label="Cerrar menú" onClick={close}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <line x1="5" y1="5" x2="19" y2="19" />
              <line x1="19" y1="5" x2="5" y2="19" />
            </svg>
          </button>
        </div>
        <div className="nav__mobile__list">
          <a href="#/" className={isActive("/")} onClick={close}>Home</a>
          <a href="#/contacto" className={isActive("/contacto")} onClick={close}>Dashboard</a>
          <a href="#/onboarding" className={isActive("/onboarding")} onClick={close}>Onboarding</a>
          <a href="#/sobre-nosotros" className={isActive("/sobre-nosotros")} onClick={close}>Sobre Nosotros</a>
        </div>
        <div className="nav__mobile__cta">
          <a
            href="https://api.whatsapp.com/send/?phone=5491165712340&text=Hola%2C+buenos+d%C3%ADas%2C+quer%C3%ADa+m%C3%A1s+informaci%C3%B3n+sobre+Mirai.&type=phone_number&app_absent=0"
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn--primary"
            onClick={close}>
            Contáctanos <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </nav>);

}

// ============ HERO ============
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero__sheen"></div>
      <div className="hero__orb"></div>
      <div className="hero__beam"></div>
      <div className="wrap">
        <div className="hero__content">
          <Reveal as="span" className="eyebrow">
            <span className="dot"></span>
            IA especializada en Real Estate
          </Reveal>
          <Reveal as="h1" className="display-1 hero__headline" delay={80}>
            <span className="gradient-text" style={{ lineHeight: "1.1", letterSpacing: "-0.5px", textAlign: "center" }}>Aplicamos inteligencia para ampliar <span style={{ fontFamily: "Georgia, 'Times New Roman', serif", fontStyle: "italic" }}>potencial Humano.</span></span>
          </Reveal>
          <Reveal as="p" className="hero__sub" delay={160}>
            Automatiza tus consultas de WhatsApp, Instagram, Mercado Libre y de tu CRM con un agente
            personalizado con tu tono y tus procesos comerciales.
          </Reveal>
          <Reveal className="hero__ctas" delay={240}>
            <a
              href="https://api.whatsapp.com/send/?phone=5491165712340&text=Hola%2C+buenos+d%C3%ADas%2C+quiero+probar+la+demo.&type=phone_number&app_absent=0"
              target="_blank"
              rel="noopener noreferrer"
              className="btn btn--primary"
              style={{ height: "51px" }}>
              Probar Demo <span className="arrow">→</span>
            </a>
          </Reveal>
          <Reveal delay={320}>
            <div className="hero__foot">
              <span className="pulse"></span>
              <span>Procesando leads en vivo</span>
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

// ============ DASHBOARD ============
function Dashboard() {
  const [bars, setBars] = useS([35, 50, 42, 65, 58, 95, 70]);
  const [typed, setTyped] = useS(0);
  const aiText = "Hola Camila! Sí, el 3 ambientes en Palermo sigue disponible. ¿Te paso planos y agendamos visita?";

  useE(() => {
    const t = setInterval(() => {
      setBars((b) => b.map((v, i) => i === 5 ? 95 : 28 + Math.random() * 40));
    }, 3200);
    return () => clearInterval(t);
  }, []);

  useE(() => {
    let n = 0;
    const t = setInterval(() => {
      n += 2;
      setTyped(Math.min(n, aiText.length));
      if (n >= aiText.length) clearInterval(t);
    }, 28);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="dash">
      <div className="dash__bar">
        <span className="left"><img src="assets/mirailogo3.png" alt="" /> · BANDEJA EN VIVO</span>
        <span className="dash__search">⌕ Buscar conversación, lead o propiedad…</span>
        <span className="right">
          <span style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".1em", color: "rgba(255,255,255,0.55)" }}>HI, MARIANA</span>
          <span className="av"></span>
        </span>
      </div>
      <div className="dash__body">
        <div className="dash__rail">
          <span className="icon active">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="1" y="1" width="5.5" height="5.5" /><rect x="7.5" y="1" width="5.5" height="5.5" /><rect x="1" y="7.5" width="5.5" height="5.5" /><rect x="7.5" y="7.5" width="5.5" height="5.5" /></svg>
          </span>
          <span className="icon">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M2 11 L7 4 L12 11" /></svg>
          </span>
          <span className="icon">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="7" cy="7" r="5" /><path d="M7 4 v3 l2 1" /></svg>
          </span>
        </div>
        <div className="dash__main">
          <div className="dash__title">Panel comercial</div>
          <div className="dash__tabs">
            <button className="active">Todos</button>
            <button>Calientes</button>
            <button>Visitas</button>
            <button>Archivados</button>
          </div>
          <div className="dash__card">
            <div className="head">
              <span>Leads procesados — Semana 19</span>
              <a>Ver todo →</a>
            </div>
            <div className="dash__chart">
              <div className="yaxis"><span>120</span><span>80</span><span>40</span><span>0</span></div>
              {bars.map((h, i) =>
              <div
                key={i}
                className={`bar ${i === 5 ? "active" : ""}`}
                style={{ height: `${h}%` }}>
              </div>
              )}
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10, fontFamily: "var(--mono)", fontSize: 10, color: "rgba(255,255,255,0.4)", letterSpacing: ".08em" }}>
              <span>L</span><span>M</span><span>X</span><span>J</span><span>V</span><span>S</span><span>D</span>
            </div>
          </div>
        </div>
        <div className="dash__side">
          <div className="dash__kpi">
            <div className="head">
              <span>Tiempo de respuesta</span>
              <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "rgba(167,139,250,0.9)" }}>▼ 96%</span>
            </div>
            <div className="big">4 s</div>
            <div className="sub">PROMEDIO · ÚLTIMAS 24 HS</div>
          </div>
          <div className="dash__msg">
            <div className="row">
              <span className="who">Camila R. · WhatsApp</span>
              <span className="time">12:04</span>
            </div>
            <div className="text">Hola, vi el 3 ambientes de Palermo. ¿Sigue disponible? ¿Acepta mascotas?</div>
          </div>
          <div className="dash__msg ai">
            <div className="row">
              <span className="who">
                <span className="badge">AI</span>&nbsp;&nbsp;MIRAI · auto-reply
              </span>
              <span className="time">+8s</span>
            </div>
            <div className="text">
              {aiText.slice(0, typed)}
              {typed < aiText.length && <span className="cursor"></span>}
            </div>
          </div>
        </div>
      </div>
    </div>);

}


// ============ EL PROBLEMA ============
function SectionProblema() {
  const INBOX = [
    { who: "Lucas M.", ch: "WhatsApp", text: "Hola, me interesa el 2amb de Palermo", t: "09:12", color: "#25D366" },
    { who: "Valentina R.", ch: "Instagram", text: "Vi su publicación, ¿el precio es negociable?", t: "09:34", color: "#DD2A7B" },
    { who: "Tomás F.", ch: "Formulario", text: "Consulta: ¿cochera incluida?", t: "10:01", color: "#555" },
    { who: "Carla M.", ch: "Email", text: "Buenos días, quiero agendar visita", t: "10:47", color: "#2563eb" },
    { who: "Rodrigo P.", ch: "WhatsApp", text: "Buen día, consulta por el 3 amb de Villa Crespo", t: "11:02", color: "#25D366" },
  ];

  const [visible, setVisible] = useS(1);
  const [shake, setShake] = useS(false);
  const [collapsed, setCollapsed] = useS(false);

  useE(() => {
    let i = 1;
    const t = setInterval(() => {
      i++;
      setVisible(Math.min(i, INBOX.length));
      setShake(true);
      setTimeout(() => setShake(false), 400);
      if (i >= INBOX.length) {
        clearInterval(t);
        setTimeout(() => setCollapsed(true), 2200);
      }
    }, 1600);
    return () => clearInterval(t);
  }, []);

  const channels = [
    {
      label: "WhatsApp",
      icon: (
        <svg width="28" height="28" viewBox="0 0 32 32" fill="none">
          <path d="M16 3C8.8 3 3 8.8 3 16c0 2.3.6 4.5 1.7 6.4L3 29l6.8-1.8C11.7 28.4 13.8 29 16 29c7.2 0 13-5.8 13-13S23.2 3 16 3z" fill="#25D366" />
          <path d="M22.9 19.4c-.4-.2-2.2-1.1-2.5-1.2-.3-.1-.6-.2-.8.2-.2.4-.9 1.2-1.1 1.4-.2.2-.4.2-.8.1-.4-.2-1.6-.6-3-1.8-1.1-1-1.9-2.2-2.1-2.6-.2-.4 0-.6.2-.8.2-.2.4-.4.6-.6.2-.2.2-.4.4-.6.1-.2 0-.5 0-.7-.1-.2-.8-2-1.1-2.7-.3-.7-.6-.6-.8-.6h-.7c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.9 0 1.7 1.2 3.4 1.4 3.6.2.2 2.4 3.7 5.9 5.2.8.4 1.5.6 2 .7.8.3 1.6.2 2.2.1.7-.1 2.1-.9 2.4-1.7.3-.8.3-1.5.2-1.7-.1-.1-.3-.2-.7-.4z" fill="#fff" />
        </svg>
      )
    },
    {
      label: "Instagram",
      icon: (
        <svg width="28" height="28" viewBox="0 0 32 32" fill="none">
          <defs>
            <radialGradient id="igG2" cx="30%" cy="107%" r="150%">
              <stop offset="0%" stopColor="#FFD776" />
              <stop offset="25%" stopColor="#F58529" />
              <stop offset="50%" stopColor="#DD2A7B" />
              <stop offset="75%" stopColor="#8134AF" />
              <stop offset="100%" stopColor="#515BD4" />
            </radialGradient>
          </defs>
          <rect x="2" y="2" width="28" height="28" rx="8" fill="url(#igG2)" />
          <rect x="7" y="7" width="18" height="18" rx="5" fill="none" stroke="#fff" strokeWidth="2" />
          <circle cx="16" cy="16" r="4.5" fill="none" stroke="#fff" strokeWidth="2" />
          <circle cx="22" cy="10" r="1.4" fill="#fff" />
        </svg>
      )
    },
    {
      label: "Formularios",
      icon: (
        <svg width="26" height="26" viewBox="0 0 28 28" fill="none" stroke="#000" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
          <rect x="4" y="3" width="20" height="22" rx="3" fill="#f0f0f0" stroke="#000" strokeWidth="1.7" />
          <line x1="8.5" y1="10" x2="19.5" y2="10" />
          <line x1="8.5" y1="15" x2="19.5" y2="15" />
          <line x1="8.5" y1="20" x2="14" y2="20" />
        </svg>
      )
    },
    {
      label: "Email",
      icon: (
        <svg width="26" height="26" viewBox="0 0 28 28" fill="none" stroke="#000" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="7" width="22" height="14" rx="2.5" fill="#f0f0f0" />
          <path d="M3 9l11 8 11-8" />
        </svg>
      )
    }
  ];

  const problems = [
    {
      title: "Se responden tarde — y el lead se enfría",
      gradient: ["#E11D48", "#EF4444"],
      shadow: "rgba(225,29,72,0.45)",
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
          <line x1="12" y1="9" x2="12" y2="13" />
          <line x1="12" y1="17" x2="12.01" y2="17" strokeWidth="2.4" />
        </svg>
      )
    },
    {
      title: "El CRM vive desconectado de la realidad",
      gradient: ["#F97316", "#FB923C"],
      shadow: "rgba(249,115,22,0.45)",
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <ellipse cx="12" cy="5" rx="9" ry="3" />
          <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
          <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
        </svg>
      )
    },
    {
      title: "Las oportunidades se pierden en silencio",
      gradient: ["#F59E0B", "#FACC15"],
      shadow: "rgba(245,158,11,0.45)",
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
        </svg>
      )
    }
  ];

  return (
    <section className="section" id="problema">
      <div className="wrap">
        <div className="section-head">
          <div className="section-head__tag">El Problema</div>
          <Reveal as="h2" className="section-head__title">
            Los leads llegan por todos lados.
          </Reveal>
        </div>

        <div className="two-col two-col--center">
          {/* Izquierda: inbox animado */}
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>

            {/* Canales centrados */}
            <div style={{ display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
              {channels.map((ch, i) => (
                <Reveal key={i} delay={i * 80}>
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
                    <div className="problema-ch-icon">
                      {ch.icon}
                    </div>
                    <span style={{ fontSize: 10, color: "var(--muted)", fontFamily: "var(--mono)", letterSpacing: "0.06em" }}>{ch.label.toUpperCase()}</span>
                  </div>
                </Reveal>
              ))}
            </div>

            {/* Flecha hacia abajo */}
            <div style={{ display: "flex", justifyContent: "center" }}>
              <svg width="2" height="32" viewBox="0 0 2 32">
                <line x1="1" y1="0" x2="1" y2="32" stroke="#000" strokeWidth="1.4" strokeDasharray="4 3" opacity="0.3" />
              </svg>
            </div>

            {/* Bandeja animada */}
            <Reveal>
              <div className={`problema-inbox${shake ? " problema-inbox--shake" : ""}`}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
                  <span style={{ fontWeight: 500, fontSize: 14 }}>Una bandeja saturada</span>
                  {visible > 1 && (
                    <span className="problema-badge">{visible}</span>
                  )}
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 8, maxHeight: 220, overflow: "hidden" }}>
                  {INBOX.slice(0, visible).map((m, i) => (
                    <div key={i} className={`problema-msg${collapsed ? " problema-msg--collapsed" : ""}`}>
                      <span className="problema-msg__dot" style={{ background: m.color }}></span>
                      <div style={{ flex: 1, minWidth: 0, overflow: "hidden" }}>
                        <div style={{ display: "flex", justifyContent: "space-between" }}>
                          <span style={{ fontSize: 12, fontWeight: 500 }}>{m.who}</span>
                          {!collapsed && <span style={{ fontSize: 10, color: "var(--muted)", fontFamily: "var(--mono)", flexShrink: 0 }}>{m.t}</span>}
                        </div>
                        {!collapsed && (
                          <div style={{ fontSize: 12, color: "var(--muted)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", marginTop: 2 }}>{m.text}</div>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: 10, paddingTop: 10, borderTop: "1px solid var(--rule)", fontSize: 11, color: "var(--muted)", fontFamily: "var(--mono)", letterSpacing: "0.04em" }}>
                  Respuesta promedio: +5 h · Sin priorización
                </div>
              </div>
            </Reveal>
          </div>

          {/* Derecha: los tres problemas */}
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            {problems.map((p, i) => (
              <Reveal key={i} delay={i * 120}>
                <div className="problema-item">
                  <div
                    className="problema-item__icon"
                    style={{
                      "--icon-grad": `linear-gradient(135deg, ${p.gradient[0]}, ${p.gradient[1]})`,
                      "--icon-shadow": p.shadow
                    }}>
                    {p.icon}
                  </div>
                  <h3 style={{ fontSize: 15, fontWeight: 600, lineHeight: 1.35, color: "#000" }}>{p.title}</h3>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ EL CAMBIO ============
function SectionCambio() {
  const spokes = [
    { label: "WhatsApp", angle: 90, vb: "2 2 28 28",
      icon: (
        <>
          <path d="M16 3C8.8 3 3 8.8 3 16c0 2.3.6 4.5 1.7 6.4L3 29l6.8-1.8C11.7 28.4 13.8 29 16 29c7.2 0 13-5.8 13-13S23.2 3 16 3z" fill="#25D366" />
          <path d="M22.9 19.4c-.4-.2-2.2-1.1-2.5-1.2-.3-.1-.6-.2-.8.2-.2.4-.9 1.2-1.1 1.4-.2.2-.4.2-.8.1-.4-.2-1.6-.6-3-1.8-1.1-1-1.9-2.2-2.1-2.6-.2-.4 0-.6.2-.8.2-.2.4-.4.6-.6.2-.2.2-.4.4-.6.1-.2 0-.5 0-.7-.1-.2-.8-2-1.1-2.7-.3-.7-.6-.6-.8-.6h-.7c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.9 0 1.7 1.2 3.4 1.4 3.6.2.2 2.4 3.7 5.9 5.2.8.4 1.5.6 2 .7.8.3 1.6.2 2.2.1.7-.1 2.1-.9 2.4-1.7.3-.8.3-1.5.2-1.7-.1-.1-.3-.2-.7-.4z" fill="#fff" />
        </>
      )
    },
    { label: "Instagram", angle: 30, vb: "1 1 30 30",
      icon: (
        <>
          <defs>
            <radialGradient id="igG3" cx="30%" cy="107%" r="150%">
              <stop offset="0%" stopColor="#FFD776" /><stop offset="25%" stopColor="#F58529" />
              <stop offset="50%" stopColor="#DD2A7B" /><stop offset="75%" stopColor="#8134AF" />
              <stop offset="100%" stopColor="#515BD4" />
            </radialGradient>
          </defs>
          <rect x="2" y="2" width="28" height="28" rx="8" fill="url(#igG3)" />
          <rect x="7" y="7" width="18" height="18" rx="5" fill="none" stroke="#fff" strokeWidth="2" />
          <circle cx="16" cy="16" r="4.5" fill="none" stroke="#fff" strokeWidth="2" />
          <circle cx="22" cy="10" r="1.4" fill="#fff" />
        </>
      )
    },
    { label: "Contactos", angle: 150, vb: "3 3 22 24",
      icon: (
        <>
          <circle cx="14" cy="10" r="5" fill="none" stroke="#000" strokeWidth="1.8" strokeLinecap="round" />
          <path d="M5 26c0-5 4-9 9-9s9 4 9 9" fill="none" stroke="#000" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
        </>
      )
    },
    { label: "Formularios", angle: 210, vb: "3 2 22 25",
      icon: (
        <>
          <rect x="4" y="3" width="20" height="22" rx="3" fill="none" stroke="#000" strokeWidth="1.7" />
          <line x1="8.5" y1="10" x2="19.5" y2="10" stroke="#000" strokeWidth="1.7" strokeLinecap="round" />
          <line x1="8.5" y1="15" x2="19.5" y2="15" stroke="#000" strokeWidth="1.7" strokeLinecap="round" />
          <line x1="8.5" y1="20" x2="14" y2="20" stroke="#000" strokeWidth="1.7" strokeLinecap="round" />
        </>
      )
    },
    { label: "Email", angle: 270, vb: "2 6 24 16",
      icon: (
        <>
          <rect x="3" y="7" width="22" height="14" rx="2.5" fill="none" stroke="#000" strokeWidth="1.7" />
          <path d="M3 9l11 8 11-8" fill="none" stroke="#000" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
        </>
      )
    },
    { label: "Teléfono", angle: 330, vb: "3 3 18 18",
      icon: (
        <path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z" fill="none" stroke="#000" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
      )
    }
  ];

  const R = 150;
  const SIZE = 420;
  const cx = SIZE / 2, cy = SIZE / 2;

  return (
    <section className="section section--tight" id="cambio" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div className="section-head">
          <div className="section-head__tag">El Cambio</div>
          <Reveal as="h2" className="section-head__title">
            Nuestra automatización ordena el caos.
          </Reveal>
          <Reveal className="section-head__lede">
            Conectamos tus canales y ordenamos la operación: cada lead se atiende a tiempo, se califica y queda cargado en tu CRM.
          </Reveal>
        </div>

        <Reveal delay={100}>
          <div className="cambio-hub-wrap" style={{ display: "flex", justifyContent: "center", marginTop: "clamp(32px, 4vw, 56px)" }}>
            <svg viewBox={`0 0 ${SIZE} ${SIZE}`} fill="none" className="cambio-hub" style={{ width: "100%", maxWidth: 420 }}>
              {/* anillos de pulso */}
              <circle cx={cx} cy={cy} r="70" stroke="#000" strokeWidth="1" opacity="0.06" className="cambio-ring cambio-ring--1" />
              <circle cx={cx} cy={cy} r="100" stroke="#000" strokeWidth="1" opacity="0.04" className="cambio-ring cambio-ring--2" />

              {/* spokes */}
              {spokes.map((s, i) => {
                const rad = (s.angle - 90) * Math.PI / 180;
                const nx = cx + R * Math.cos(rad);
                const ny = cy + R * Math.sin(rad);
                return (
                  <line key={i} x1={cx} y1={cy} x2={nx} y2={ny}
                    stroke="#000" strokeWidth="1" opacity="0.18"
                    strokeDasharray="4 4" className="cambio-spoke" />
                );
              })}

              {/* pulsos de datos viajando hacia el agente */}
              {spokes.map((s, i) => {
                const rad = (s.angle - 90) * Math.PI / 180;
                const nx = cx + R * Math.cos(rad);
                const ny = cy + R * Math.sin(rad);
                return (
                  <circle key={i} className="cambio-pulse-dot"
                    cx={nx} cy={ny} r="3" fill="#000" opacity="0"
                    data-cx={cx} data-cy={cy} data-x={nx} data-y={ny} />
                );
              })}

              {/* nodos */}
              {spokes.map((s, i) => {
                const rad = (s.angle - 90) * Math.PI / 180;
                const nx = cx + R * Math.cos(rad);
                const ny = cy + R * Math.sin(rad);
                const iconSize = 28;
                const half = iconSize / 2;
                return (
                  <g key={i} className="cambio-node">
                    <circle cx={nx} cy={ny} r="28" fill="#fff" stroke="#000" strokeWidth="1.2" />
                    <svg
                      x={nx - half} y={ny - half}
                      width={iconSize} height={iconSize}
                      viewBox={s.vb}
                      preserveAspectRatio="xMidYMid meet"
                      overflow="visible"
                    >
                      {s.icon}
                    </svg>
                  </g>
                );
              })}

              {/* centro */}
              <g className="cambio-center">
                <circle cx={cx} cy={cy} r="80" stroke="#000" strokeWidth="1" strokeDasharray="1 7" opacity="0.15" className="cambio-orbit" />
                <circle cx={cx} cy={cy} r="56" fill="#000" className="cambio-center__core" />
                <circle cx={cx} cy={cy} r="56" stroke="#fff" strokeWidth="0.5" opacity="0.12" fill="none" />
                <text x={cx} y={cy - 7} textAnchor="middle" dominantBaseline="middle"
                  fontSize="12" fontFamily="var(--mono)" fill="#fff" letterSpacing="0.12em" fontWeight="600">AGENTE</text>
                <text x={cx} y={cy + 12} textAnchor="middle" dominantBaseline="middle"
                  fontSize="10" fontFamily="var(--mono)" fill="rgba(255,255,255,0.45)" letterSpacing="0.1em">MIRAI</text>
              </g>
            </svg>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============ VALUES (Feature cards) ============
function Values() {
  const features = [
    {
      title: "Responde 24/7",
      desc: "Nunca pierde una consulta, ni siquiera a las 3 de la mañana o un domingo. Responde al instante, en cualquier canal y a cualquier hora.",
      gradient: ["#5B84B8", "#7FA8DC"],
      shadow: "rgba(91,132,184,0.4)",
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="14" cy="14" r="10" />
          <path d="M14 7 V14 L18 17" />
        </svg>
      )
    },
    {
      title: "Tono personalizado",
      desc: "Habla con la voz de tu marca: el estilo, las palabras y los límites que vos definís, no un bot genérico.",
      gradient: ["#C56C8A", "#DE93AC"],
      shadow: "rgba(197,108,138,0.4)",
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M14 3 L16.5 9.5 L23.5 9.5 L18 13.5 L20 20 L14 16 L8 20 L10 13.5 L4.5 9.5 L11.5 9.5 Z" fill="none" />
          <circle cx="21" cy="6" r="1.4" fill="white" stroke="none" />
          <circle cx="24" cy="10" r="1" fill="white" stroke="none" />
          <circle cx="20" cy="3" r="0.8" fill="white" stroke="none" />
        </svg>
      )
    },
    {
      title: "Captura datos del lead",
      desc: "Pide y ordena nombre, contacto, zona, presupuesto y lo que necesites saber de cada consulta, sin que se te escape nada.",
      gradient: ["#3F9C82", "#5FBFA0"],
      shadow: "rgba(63,156,130,0.4)",
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <ellipse cx="14" cy="7" rx="9" ry="3" />
          <path d="M5 7 v5 c0 1.7 4 3 9 3 s9-1.3 9-3 V7" />
          <path d="M5 12 v5 c0 1.7 4 3 9 3 s9-1.3 9-3 v-5" />
          <path d="M5 17 v5 c0 1.7 4 3 9 3 s9-1.3 9-3 v-5" />
        </svg>
      )
    },
    {
      title: "Responde con info de tu empresa",
      desc: "Entrenado con tus propios datos: precios, catálogo, condiciones y preguntas frecuentes, siempre actualizado.",
      gradient: ["#D18F44", "#EAB268"],
      shadow: "rgba(209,143,68,0.4)",
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <rect x="5" y="3" width="18" height="22" rx="3" />
          <line x1="9" y1="9" x2="19" y2="9" />
          <line x1="9" y1="13" x2="19" y2="13" />
          <line x1="9" y1="17" x2="15" y2="17" />
        </svg>
      )
    },
    {
      title: "Deriva a humanos",
      desc: "Sabe cuándo un lead está listo o pide hablar con alguien, y lo deriva al asesor correcto en el momento justo.",
      gradient: ["#8A64C4", "#AD8AE0"],
      shadow: "rgba(138,100,196,0.4)",
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="14" cy="9" r="5" />
          <path d="M5 26c0-5 4-9 9-9s9 4 9 9" />
        </svg>
      )
    },
    {
      title: "Tu información protegida",
      desc: "Tus datos y los de tus clientes viajan cifrados y quedan solo donde vos decidís, con acceso controlado.",
      gradient: ["#5560A0", "#7986C4"],
      shadow: "rgba(85,96,160,0.4)",
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M14 3 L4 7 V14 C4 19.5 8.4 24.5 14 26 C19.6 24.5 24 19.5 24 14 V7 Z" />
          <path d="M10 14 L13 17 L18 11" />
        </svg>
      )
    }
  ];

  return (
    <section className="section" id="value">
      <div className="wrap">
        <div className="section-head">
          <div className="section-head__tag">Características</div>
          <Reveal as="h2" className="section-head__title">
            Acelerá tu operación con flujos de IA pensados para tu empresa.
          </Reveal>
          <Reveal className="section-head__lede">
            Las herramientas que necesitás para optimizar la atención, calificar leads y crecer — sin sumar headcount.
          </Reveal>
        </div>

        <div className="features-grid">
          {features.map((f, i) => (
            <Reveal key={f.title} delay={i * 80}>
              <div
                className="feature-card"
                style={{
                  "--card-grad": `linear-gradient(135deg, ${f.gradient[0]}, ${f.gradient[1]})`,
                  "--card-shadow": f.shadow
                }}>
                <div className="feature-card__icon">{f.icon}</div>
                <h3 className="feature-card__title">{f.title}</h3>
                <p className="feature-card__desc">{f.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>);

}

// ============ FLOW (lead journey) ============
function Flow() {
  const steps = [
  {
    label: "Ve tu anuncio en redes",
    icon:
    <svg width="38" height="38" viewBox="0 0 32 32" fill="none">
        <defs>
          <radialGradient id="igGrad" cx="30%" cy="107%" r="150%">
            <stop offset="0%" stopColor="#FFD776" />
            <stop offset="25%" stopColor="#F58529" />
            <stop offset="50%" stopColor="#DD2A7B" />
            <stop offset="75%" stopColor="#8134AF" />
            <stop offset="100%" stopColor="#515BD4" />
          </radialGradient>
        </defs>
        <rect x="2" y="2" width="28" height="28" rx="8" fill="url(#igGrad)" />
        <rect x="7" y="7" width="18" height="18" rx="5" fill="none" stroke="#fff" strokeWidth="2" />
        <circle cx="16" cy="16" r="4.5" fill="none" stroke="#fff" strokeWidth="2" />
        <circle cx="22" cy="10" r="1.4" fill="#fff" />
      </svg>

  },
  {
    label: "Escribe por WhatsApp",
    icon:
    <svg width="38" height="38" viewBox="0 0 32 32" fill="none">
        <path d="M16 3C8.8 3 3 8.8 3 16c0 2.3.6 4.5 1.7 6.4L3 29l6.8-1.8C11.7 28.4 13.8 29 16 29c7.2 0 13-5.8 13-13S23.2 3 16 3z" fill="#25D366" />
        <path d="M22.9 19.4c-.4-.2-2.2-1.1-2.5-1.2-.3-.1-.6-.2-.8.2-.2.4-.9 1.2-1.1 1.4-.2.2-.4.2-.8.1-.4-.2-1.6-.6-3-1.8-1.1-1-1.9-2.2-2.1-2.6-.2-.4 0-.6.2-.8.2-.2.4-.4.6-.6.2-.2.2-.4.4-.6.1-.2 0-.5 0-.7-.1-.2-.8-2-1.1-2.7-.3-.7-.6-.6-.8-.6h-.7c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.9 0 1.7 1.2 3.4 1.4 3.6.2.2 2.4 3.7 5.9 5.2.8.4 1.5.6 2 .7.8.3 1.6.2 2.2.1.7-.1 2.1-.9 2.4-1.7.3-.8.3-1.5.2-1.7-.1-.1-.3-.2-.7-.4z" fill="#fff" />
      </svg>

  },
  {
    label: "mirAI responde al instante",
    icon:
    <svg width="36" height="36" viewBox="0 0 32 32" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <line x1="16" y1="7" x2="16" y2="3" />
        <circle cx="16" cy="3" r="1.6" fill="#fff" stroke="none" />
        <rect x="6" y="7" width="20" height="16" rx="5" />
        <circle cx="12.5" cy="15" r="1.8" fill="#fff" stroke="none" />
        <circle cx="19.5" cy="15" r="1.8" fill="#fff" stroke="none" />
        <path d="M12 19.5c1.2 1 6.8 1 8 0" />
        <line x1="2.5" y1="14" x2="6" y2="14" />
        <line x1="26" y1="14" x2="29.5" y2="14" />
      </svg>,

    isBrand: true
  },
  {
    label: "Captura datos",
    icon:
    <svg width="34" height="34" viewBox="0 0 32 32" fill="none" stroke="#000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="5" y="4" width="22" height="24" rx="3" fill="#fff" stroke="#000" strokeWidth="2" />
        <line x1="10" y1="11" x2="22" y2="11" />
        <line x1="10" y1="16" x2="22" y2="16" />
        <line x1="10" y1="21" x2="17" y2="21" />
      </svg>

  },
  {
    label: "Deriva a humano con resumen",
    icon:
    <svg width="34" height="34" viewBox="0 0 32 32" fill="none" stroke="#000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="16" cy="10" r="5" fill="#fff" />
        <path d="M6 28c0-5.5 4.5-10 10-10s10 4.5 10 10" />
      </svg>

  },
  {
    label: "Hace seguimiento si no hay respuesta",
    icon:
    <svg width="34" height="34" viewBox="0 0 32 32" fill="none" stroke="#000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="16" cy="16" r="11" fill="#fff" />
        <path d="M16 10v6l4 2" />
      </svg>

  }];


  return (
    <section className="section flow-section" id="flow">
      <div className="wrap">
        <div className="section-head">
          <div className="section-head__tag">Flujo</div>
          <Reveal as="h2" className="section-head__title">
            Así funciona cada vez que un interesado escribe.
          </Reveal>
        </div>
        <Reveal>
          <ol className="flow">
            {steps.map((s, i) =>
            <li key={i} className="flow__step">
                <div className={`flow__tile ${s.isBrand ? "flow__tile--brand" : ""}`}>{s.icon}</div>
                <span className="flow__num">{i + 1}</span>
                <span className="flow__label">{s.label}</span>
              </li>
            )}
          </ol>
        </Reveal>
      </div>
    </section>);

}

// ============ HOW IT WORKS ============
function HowItWorks() {
  const steps = [
  {
    title: "Conectá WhatsApp e Instagram",
    body: "Activamos el número y cuenta de Instagram en menos de 24 hs. Sin perder historial, sin migrar bandeja."
  },
  {
    title: "Personalizamos tu agente",
    body: "Cargamos propiedades, scripts, CRM, Bases de Datos y FAQs. La IA empieza a hablar con tu tono desde el día uno."
  },
  {
    title: "Atiende y califica 24/7",
    body: "Responde consultas, califica leads, agenda visitas en el calendario del asesor y registra todo en el CRM."
  },
  {
    title: "Tu equipo cierra más ventas",
    body: "Los asesores reciben sólo leads calificados, con contexto completo. Más tiempo cerrando, menos filtrando."
  }];

  return (
    <>
      <section className="section section--how" id="how">
        <div className="how__bg" aria-hidden="true">
          <div className="how__orb"></div>
          <div className="how__grid"></div>
        </div>
        <div className="wrap">
          <div className="section-head">
            <div className="section-head__tag">Cómo funciona</div>
            <Reveal as="h2" className="section-head__title">Operando en un mes. Sin reescribir tus procesos.</Reveal>
            <Reveal className="section-head__lede">
              Te acompañamos en el setup. Nosotros entrenamos. Vos validás. La IA aprende de cada conversación.
            </Reveal>
          </div>
          <div className="steps steps--timeline">
            <span className="steps__line" aria-hidden="true"></span>
            {steps.map((s, i) =>
            <Reveal key={i} delay={i * 80} className="step step--card">
                <span className="step__dot" aria-hidden="true"></span>
                <span className="step__num">PASO 0{i + 1}</span>
                <h3 className="step__title">{s.title}</h3>
                <p className="step__body">{s.body}</p>
              </Reveal>
            )}
          </div>
        </div>
      </section>
      <LogosCarousel />
    </>);

}

// ============ LOGOS CARRUSEL ============
function LogosCarousel() {
  const logos = [
  { src: "assets/logos/de-leo-propiedades.svg", alt: "De Leo Propiedades" },
  { src: "assets/logos/de-leo-propiedades.svg", alt: "De Leo Propiedades" },
  { src: "assets/logos/de-leo-propiedades.svg", alt: "De Leo Propiedades" },
  { src: "assets/logos/de-leo-propiedades.svg", alt: "De Leo Propiedades" },
  { src: "assets/logos/de-leo-propiedades.svg", alt: "De Leo Propiedades" },
  { src: "assets/logos/de-leo-propiedades.svg", alt: "De Leo Propiedades" }];

  const loop = [...logos, ...logos];

  return (
    <section className="section section--logos" id="inmobiliarias">
      <div className="wrap">
        <div className="section-head section-head--center">
          <div className="section-head__tag">Confianza</div>
          <Reveal as="h2" className="section-head__title">Inmobiliarias que implementaron MirAI</Reveal>
        </div>
      </div>
      <div className="logos__viewport" aria-label="Logos de inmobiliarias clientes">
        <div className="logos__track">
          {loop.map((l, i) =>
          <div className="logos__item" key={i}>
              <img src={l.src} alt={l.alt} loading="lazy" />
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============ CASE / TESTIMONIAL ============
function Case() {
  return (
    <section className="section" id="case">
      <div className="case">
        <div className="case__grid">
          <div>
            <span className="eyebrow"><span className="dot"></span>Caso de éxito · Inmobiliaria De Leo Propiedades</span>
            <Reveal as="blockquote" className="case__quote">
              <span className="mark">“</span>Pasamos de responder en 4 horas a hacerlo en menos de 1 minuto. Sin contratar a nadie. La diferencia en conversión la vimos el primer mes.<span className="mark">”</span>
            </Reveal>
            <div className="case__byline">
              <div className="case__avatar">PD</div>
              <div>
                <div className="name">Paola de Leo</div>
                <div className="role">Dueña de De Leo Propiedades</div>
              </div>
            </div>
          </div>
          <Reveal>
            <div className="case__stats">
              <div className="case__stat">
                <div className="num"><Counter to={45} suffix="%" /></div>
                <div className="label">Aumento de conversión</div>
                <div className="delta">vs. trimestre anterior</div>
              </div>
              <div className="case__stat">
                <div className="num">4 h → 1 min</div>
                <div className="label">Tiempo de respuesta</div>
                <div className="delta">promedio inbound</div>
              </div>
              <div className="case__stat">
                <div className="num">+<Counter to={500} /></div>
                <div className="label">Leads procesados / mes</div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

// ============ PRICING ============
function Pricing() {
  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <div className="section-head">
          <div className="section-head__tag">Funciones</div>
          <Reveal as="h2" className="section-head__title">Un solo plan. Sin sorpresas en la factura.</Reveal>
          <Reveal className="section-head__lede">
            Setup, entrenamiento, soporte y mejoras incluidos. Sólo pagás más si tu volumen crece — y si crece, es porque vendés más.
          </Reveal>
        </div>

        <div className="pricing pricing--single">
          <div className="plan plan--featured">
            <span className="plan__tag"><span style={{ width: 6, height: 6, background: "#fff", borderRadius: 999, display: "inline-block" }}></span>Plan único</span>
            <div className="plan__name">mirAI Studio</div>
            <p className="plan__desc">Pensado para Inmobiliarias que procesan entre 50 y 5000 leads por Mes.</p>
            <div className="plan__price">
              <span className="amount amount--text">Funciones</span>
            </div>
            <ul className="plan__features">
              <li>Asistente personalizado para tu Inmobiliaria</li>
              <li>WhatsApp Business API + Instagram Direct</li>
              <li>Calificación automática + agenda de visitas</li>
              <li>Integración con tu CRM (HubSpot, Tokko, custom)</li>
              <li>Integración con Mercado Libre</li>
              <li>Dashboard con Metricas en vivo</li>
              <li>Soporte 24/7 vía WhatsApp</li>
            </ul>
            <a href="https://api.whatsapp.com/send/?phone=5491128661164&text=Quer%C3%ADa+cotizar+ahora+mismo+MirAI&type=phone_number&app_absent=0" target="_blank" rel="noopener noreferrer" className="btn btn--primary" style={{ alignSelf: "flex-start" }}>
              Cotizar Ahora Mismo <span className="arrow">→</span>
            </a>
            <div className="plan__foot">Setup + entrenamiento</div>
          </div>
        </div>
      </div>
    </section>);

}

// ============ FOR WHOM ============
function ForWhom() {
  const items = [
  { label: "B1", title: "Tecnología", body: "Empresas de tecnología que necesitan eficiencia en atención al cliente." },
  { label: "B2", title: "Marketing", body: "Agencias de marketing que necesitan escalar sin sumar costos fijos." },
  { label: "B3", title: "Real Estate", body: "Inmobiliarias que quieren optimizar su tiempo." },
  { label: "B4", title: "Otros", body: "Cualquier otro tipo de empresas que quieran automatizar consultas y generar leads." }];

  return (
    <section className="section section--tight">
      <div className="wrap">
        <div className="section-head">
          <div className="section-head__tag">Para quién es</div>
          <Reveal as="h2" className="section-head__title">Diseñado para empresas que quieran escalar.</Reveal>
        </div>
        <Reveal>
          <ul className="forwhom__list">
            {items.map((it, i) =>
            <li key={i}>
                <span className="n">{it.label}</span>
                <span><strong className="forwhom__title">{it.title}</strong>{it.body}</span>
              </li>
            )}
          </ul>
        </Reveal>
      </div>
    </section>);

}

// ============ FAQ ============
function FAQ() {
  const items = [
  { q: "¿La IA suena robótica o como mi equipo?", a: "La entrenamos con tu tono, tus scripts y tu cartera. En las pruebas A/B con prospects reales, el 91% no detecta que está hablando con una IA hasta que se lo decimos." },
  { q: "¿Qué pasa cuando un lead pregunta algo fuera de mi cartera?", a: "MIRAI tiene reglas de handoff configurables. Cuando detecta una pregunta fuera del scope o un lead caliente, escala al asesor humano con todo el contexto de la conversación." },
  { q: "¿Funciona con mi CRM actual?", a: "Tenemos integraciones nativas con Tokko, HubSpot y Pipedrive. Para CRMs custom, conectamos vía webhooks o API en 1–2 días." },
  { q: "¿Cuánto tarda el setup?", a: "Aproximadamente un mes desde la firma. Discovery + carga de cartera, entrenamiento de la IA, pruebas internas y go-live acompañado." },
  { q: "¿Y si quiero pausar o cancelar?", a: "Mes a mes, sin permanencia. Te quedás con el historial de conversaciones y la base de datos que se generó durante el servicio." },
  { q: "¿Mis datos están seguros?", a: "Sí. Trabajamos con servidores privados, protección DDoS y altos estándares de ciberseguridad para que nuestros clientes puedan operar tranquilos, sabiendo que sus datos están protegidos." }];

  const [open, setOpen] = useS(0);
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="section-head">
          <div className="section-head__tag">Preguntas frecuentes</div>
          <Reveal as="h2" className="section-head__title">Lo que nos preguntan antes de Implementar IA.</Reveal>
        </div>
        <div className="faq">
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div className={`faq__item ${isOpen ? "open" : ""}`} key={i}>
                <button className="faq__q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span>{it.q}</span>
                  <span className="faq__plus"></span>
                </button>
                <div className="faq__a" style={{ maxHeight: isOpen ? 400 : 0 }}>
                  <div className="faq__a__inner">{it.a}</div>
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

// ============ FINAL CTA ============
function FinalCTA() {
  return (
    <section className="final" id="contact">
      <div className="final__orb"></div>
      <div className="final__inner">
        <span className="eyebrow"><span className="dot"></span>Próximo paso</span>
        <Reveal as="h2">¿Listo para <em>escalar</em>?</Reveal>
        <Reveal className="final__ctas" delay={120}>
          <a href="#" className="btn btn--primary btn--lg">Agendar Demo <span className="arrow">→</span></a>
          <a href="#" className="btn btn--outline btn--lg">Chat por WhatsApp</a>
        </Reveal>
      </div>
    </section>);

}

// ============ PRECIO CALCULATOR ============
// ============ ABOUT ============
function About() {
  const blocks = [
  {
    eyebrow: "Observación",
    body:
    "Trabajamos sobre cómo las cosas funcionan. Observamos procesos, decisiones y formas de operar para entender dónde hay fricción, ruido o pérdida de tiempo. A partir de eso, diseñamos sistemas donde la inteligencia artificial se integra de manera natural."
  },
  {
    eyebrow: "Enfoque",
    body:
    "No buscamos tecnología por el simple hecho de implementarla, sino soluciones que resuelvan problemas específicos. Nos enfocamos en automatizar lo que no requiere atención humana, para que las personas puedan concentrarse en lo que sí la necesita. Construimos herramientas que asisten, conectan información y simplifican flujos de trabajo."
  },
  {
    eyebrow: "Método",
    body:
    "Nuestro enfoque es práctico y estructurado. Evaluamos la realidad operativa de un equipo o empresa y desarrollamos arquitecturas adaptadas a su contexto. Desde asistentes personalizados y sistemas de conocimiento hasta integraciones complejas entre plataformas, nuestro objetivo siempre es el mismo: reducir complejidad, mejorar la forma en que se toman decisiones y liberar tiempo para lo que realmente importa."
  }];


  const team = [
    {
      name: "Francesco Scazzuso",
      role: "Fundador · Estrategia y Automatización",
      bio: "Estudiante de Negocios Digitales en la Universidad de San Andrés, con experiencia en marketing, automatización de procesos e inteligencia artificial aplicada a negocios. En MirAI lidera estrategia, producto y crecimiento.",
      img: "assets/team-francesco.png",
      linkedin: "https://linkedin.com/in/francesco-scazzuso-04921b297",
    },
    {
      name: "Manuel Kaplan",
      role: "Fundador · Tecnología y Marketing",
      bio: "Estudiante de Ingeniería Industrial en el ITBA, con experiencia en desarrollo web, automatización, agentes de IA y campañas publicitarias. En MirAI lidera tecnología, producto y marketing.",
      img: "assets/team-manuel.png",
      linkedin: "https://linkedin.com/in/manuel-kaplan-aa546329b",
    },
    {
      name: "Ariel Recondo",
      role: "Fundador · Estrategia y Pensamiento",
      bio: "Director Creativo que pasó de colaborar con gigantes globales a darle cara a campañas políticas y proyectos blockchain, donde todo cambia rápido menos la necesidad de una buena idea. Estrategia y pensamiento como dos caras de la misma moneda.",
      img: "assets/Foto Ariel.jpeg",
      linkedin: null,
    },
  ];

  return (
    <section className="section about" id="about">
      <div className="wrap">
        <div className="section-head">
          <Reveal as="div" className="section-head__tag">Equipo</Reveal>
          <Reveal as="h2" className="section-head__title">Sobre Nosotros</Reveal>
        </div>
        <div className="team__grid">
          {team.map((m, i) =>
            <Reveal key={i} className="team__card" delay={100 * i}>
              <div className="team__photo-wrap">
                <img src={m.img} alt={m.name} className="team__photo" loading="lazy" />
              </div>
              <div className="team__info">
                <div className="team__name-row">
                  <div className="team__name">{m.name}</div>
                  {m.linkedin && (
                    <a href={m.linkedin} target="_blank" rel="noopener noreferrer" className="team__linkedin" aria-label={`LinkedIn de ${m.name}`}>
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                      </svg>
                    </a>
                  )}
                </div>
                <div className="team__role">{m.role}</div>
                <p className="team__bio">{m.bio}</p>
              </div>
            </Reveal>
          )}
        </div>
        <div className="section-head section-head--inner">
          <Reveal as="div" className="section-head__tag">Identidad</Reveal>
        </div>
        <div className="about__grid">
          {blocks.map((b, i) =>
          <Reveal key={i} className="about__card" delay={80 * i}>
              <div className="about__eyebrow">{b.eyebrow}</div>
              <p className="about__body">{b.body}</p>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// En mobile, en vez de reacomodar los paneles del preview a una columna
// (layout mobile normal, compartido con el dashboard real), se conserva la
// organización de escritorio (sidebar + grillas) y se la escala hacia abajo
// con transform:scale para que entre en el ancho de pantalla. `zoom` fue
// descartado: en WebKit escala el ancho pero no la altura de igual forma
// que en Chromium, dejando huecos y contenido más grande de lo esperado.
// Mismo corte que el @media (max-width: 640px) de #dashboard-preview en
// styles.css: por debajo, "mini escritorio"; en cualquier ventana más ancha
// (aunque sea un desktop achicado a, digamos, 900px) se deja todo intacto.
const MINI_DESKTOP_BREAKPOINT = 640;

function useMiniDesktop(outerRef, innerRef, naturalWidth) {
  React.useLayoutEffect(() => {
    const outer = outerRef.current;
    const inner = innerRef.current;
    if (!outer || !inner) return;

    const apply = () => {
      const available = outer.clientWidth;
      if (available > MINI_DESKTOP_BREAKPOINT) {
        inner.style.width = "";
        inner.style.transform = "";
        inner.style.transformOrigin = "";
        outer.style.height = "";
        return;
      }
      inner.style.width = naturalWidth + "px";
      inner.style.transform = "none";
      const naturalHeight = inner.getBoundingClientRect().height;
      const scale = available / naturalWidth;
      inner.style.transform = `scale(${scale})`;
      inner.style.transformOrigin = "top left";
      outer.style.height = Math.ceil(naturalHeight * scale) + "px";
    };

    apply();
    const ro = new ResizeObserver(apply);
    ro.observe(outer);
    return () => ro.disconnect();
  }, [outerRef, innerRef, naturalWidth]);
}

// ============ DASHBOARD PREVIEW ============
function DashboardPreview() {
  const [filters, setFilters] = useS({ period: "30d", channel: "all", compare: false });
  const [selected, setSelected] = useS(null);
  const shellOuterRef = useR(null);
  const shellInnerRef = useR(null);
  useMiniDesktop(shellOuterRef, shellInnerRef, 1200);

  const metrics  = dashGetMetrics(filters);
  const series   = dashGetSeries(filters);
  const results  = dashGetResults(filters);
  const channels = dashGetChannels(filters);
  const rows     = dashGetConsultations(filters).slice(0, 6);
  const zones    = dashGetZones(filters).slice(0, 5);
  const unresolved = dashGetUnresolved(filters).slice(0, 4);

  const periodLabel = (DASH_PERIODS.find((p) => p.key === filters.period) || {}).label;

  const navItems = [
    { key: "inicio",    label: "Inicio",        icon: <Icon name="home" size={16} />,        active: true },
    { key: "whatsapp",  label: "WhatsApp",       icon: <WhatsAppIcon size={16} color="#25D366" />, active: false },
    { key: "instagram", label: "Instagram",      icon: <InstagramIcon size={16} />,           active: false },
    { key: "crm",       label: "CRM",            icon: <Icon name="user" size={16} />,        active: false },
    { key: "rastreo",   label: "Rastreo",        icon: <Icon name="radar" size={16} />,       active: false },
    { key: "tickets",   label: "Tickets",        icon: <Icon name="ticket" size={16} />,      active: false },
    { key: "config",    label: "Configuración",  icon: <Icon name="gear" size={16} />,        active: false },
  ];

  const mainItems = navItems.filter((it) => it.key !== "config");
  const configItem = navItems.find((it) => it.key === "config");

  return (
    <section className="dp-page" id="dashboard-preview">

      {/* Título centrado */}
      <div className="dp-page__hero">
        <div className="section-head__tag">Dashboard</div>
        <h2 className="dp-page__title">Toda la operación, en un solo lugar.</h2>
        <p className="dp-page__lede">Métricas, conversaciones y zonas de interés en un solo lugar. El dashboard te muestra qué está pasando ahora — para que decidas con datos, no con intuición.</p>
      </div>

      {/* Shell: sidebar + contenido (envuelto para poder escalarlo en mobile) */}
      <div className="dp-shell-outer" ref={shellOuterRef}>
      <div className="dp-shell" ref={shellInnerRef}>

        {/* Sidebar vertical de chips */}
        <aside className="dp-sidebar">
          <div className="dp-sidebar__main">
            {mainItems.map((it) => (
              <span key={it.key} className={`dp-nav__chip ${it.active ? "is-active" : ""}`}>
                {it.icon}
                {it.label}
              </span>
            ))}
          </div>
          <div className="dp-sidebar__foot">
            <span className={`dp-nav__chip ${configItem.active ? "is-active" : ""}`}>
              {configItem.icon}
              {configItem.label}
            </span>
          </div>
        </aside>

        {/* Contenido del dashboard */}
        <div className="dp-content">

        {/* Header interno */}
        <div className="dp-head">
          <div className="dp-head__left">
            <h1 className="dp-head__title">Dashboard</h1>
            <p className="dp-head__sub">Resumen general de atención y leads</p>
          </div>
          <div className="dp-head__right">
            <div className="dp-filters">
              <div className="dp-pill">
                <Icon name="calendar" size={15} /> {periodLabel} <Icon name="chevron" size={14} />
              </div>
              <div className="dp-pill">Todos <Icon name="chevron" size={14} /></div>
            </div>
            <span className="dp-head__updated">Actualizado ahora</span>
            <span className="dp-iconbtn"><Icon name="refresh" size={16} /></span>
            <span className="dp-iconbtn"><Icon name="user" size={16} /></span>
          </div>
        </div>

        {/* Métricas */}
        <div className="dash-metrics">
          {metrics.map((m) => <MetricCard key={m.label} m={m} />)}
        </div>

        {/* Gráficos */}
        <div className="dash-charts">
          <div className="dash-card dash-card--chart">
            <h3 className="dash-card__title">Evolución de consultas y leads</h3>
            <div className="dash-legend">
              <span className="dash-legend__item"><span className="dot dot--dark"></span>Consultas</span>
              <span className="dash-legend__item"><span className="dot dot--gray"></span>Leads</span>
            </div>
            <ConsultationsLineChart data={series} />
          </div>
          <div className="dash-card">
            <h3 className="dash-card__title">Resultado de las consultas</h3>
            <div className="dash-results">
              <ConsultationResultsChart data={results} />
              <ul className="dash-results__legend">
                {results.map((seg) => (
                  <li key={seg.label}>
                    <span className="dash-results__dot" style={{ background: seg.color }}></span>
                    <span className="dash-results__name">{seg.label}</span>
                    <span className="dash-results__pct">{seg.value}%</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
          <div className="dash-card">
            <h3 className="dash-card__title">Canales</h3>
            <ChannelBreakdown channels={channels} />
          </div>
        </div>

        {/* Tabla + paneles */}
        <div className="dash-bottom">
          <div className="dash-card dash-card--table">
            <h3 className="dash-card__title">Últimas consultas relevantes</h3>
            <RecentConsultationsTable rows={rows} onSelect={setSelected} />
          </div>
          <div className="dash-card dash-list-card">
            <h3 className="dash-card__title">Zonas más buscadas</h3>
            <ol className="dash-rank">
              {zones.map((z, i) => (
                <li key={z.zone} className="dash-rank__row">
                  <span className="dash-rank__name">{i + 1}. {z.zone}</span>
                  <span className="dash-rank__val">{z.count.toLocaleString("es-AR")}</span>
                </li>
              ))}
            </ol>
          </div>
          <div className="dash-card dash-list-card">
            <h3 className="dash-card__title">Consultas no resueltas</h3>
            <ol className="dash-rank">
              {unresolved.map((it, i) => (
                <li key={it.reason} className="dash-rank__row">
                  <span className="dash-rank__name">{i + 1}. {it.reason}</span>
                  <span className="dash-rank__val dash-rank__val--muted">{it.pct}%</span>
                </li>
              ))}
            </ol>
          </div>
        </div>

        </div>{/* /dp-content */}
      </div>{/* /dp-shell */}
      </div>{/* /dp-shell-outer */}

      {/* Features horizontales */}
      <div className="dp-features">
        {["Métricas de consultas y leads", "WhatsApp en vivo", "Instagram en vivo", "CRM", "Rastreo de propiedades"].map((f) => (
          <div key={f} className="dp-features__item">
            <span className="dp-features__dot"></span>
            {f}
          </div>
        ))}
      </div>

      {selected && <ConsultationDetailDrawer row={selected} onClose={() => setSelected(null)} />}
    </section>);

}

// ============ FOOTER ============
function Footer() {
  return (
    <footer className="footer footer--compact">
      <div className="wrap footer__inner">
        <a href="#/" className="footer__brand" aria-label="MIRAI Studio">
          <img src="assets/mirailogo3.png" alt="MIRAI" />
        </a>
        <p className="footer__tag">Agentes de IA para inmobiliarias · Buenos Aires, Argentina</p>
        <nav className="footer__links" aria-label="Footer">
          <a href="#/sobre-nosotros">Sobre Nosotros</a>
          <span aria-hidden="true">·</span>
          <a href="#/contacto">Dashboard</a>
          <span aria-hidden="true">·</span>
          <a href="#/onboarding">Onboarding</a>
        </nav>
        <span className="footer__copy">© 2026 MIRAI STUDIO</span>
      </div>
    </footer>);

}

// ============ DASHBOARD LOGIN ============
function DashboardLogin({ onLogin }) {
  const [user, setUser] = useS("");
  const [pass, setPass] = useS("");
  const [errors, setErrors] = useS({});
  const [loading, setLoading] = useS(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    const next = {};
    if (!user.trim()) next.user = "Ingresá tu usuario.";
    if (!pass.trim()) next.pass = "Ingresá tu contraseña.";
    if (Object.keys(next).length) { setErrors(next); return; }
    setErrors({});
    setLoading(true);
    const found = await authenticate(user, pass);
    setLoading(false);
    if (!found) {
      setErrors({ form: "Usuario o contraseña incorrectos." });
      return;
    }
    onLogin(found.user, found.token);
  };

  return (
    <div className="dash-login">
      <header className="dash-login__top">
        <a href="#/" className="nav__logo" aria-label="MIRAI Studio">
          <img src="assets/mirailogo3.png" alt="MIRAI" />
        </a>
        <a href="#/" className="dash-login__back">← Volver al inicio</a>
      </header>
      <main className="dash-login__main">
        <div className="dash-login__card">
          <h1 className="dash-login__title">Dashboard</h1>
          <p className="dash-login__sub">Ingresá a tu cuenta para acceder a tu panel.</p>
          <form className="dash-login__form" onSubmit={onSubmit} noValidate>
            <label className="dash-login__field">
              <span className="dash-login__label">Usuario</span>
              <input
                type="text"
                name="user"
                className="dash-login__input"
                placeholder="Tu usuario"
                autoComplete="username"
                value={user}
                onChange={(e) => setUser(e.target.value)} />

              {errors.user && <span className="dash-login__error">{errors.user}</span>}
            </label>
            <label className="dash-login__field">
              <span className="dash-login__label">Contraseña</span>
              <input
                type="password"
                name="password"
                className="dash-login__input"
                placeholder="Tu contraseña"
                autoComplete="current-password"
                value={pass}
                onChange={(e) => setPass(e.target.value)} />

              {errors.pass && <span className="dash-login__error">{errors.pass}</span>}
            </label>
            <button type="submit" className="btn btn--primary dash-login__btn" disabled={loading}>
              {loading ? "Ingresando…" : "Iniciar sesión"}
            </button>
            {errors.form && (
              <span className="dash-login__error dash-login__error--form">{errors.form}</span>
            )}
          </form>
          <p className="dash-login__help">
            ¿Necesitás ayuda para ingresar? <a href="#/contacto">Contactanos</a>.
          </p>
        </div>
      </main>
    </div>);

}

// ============ DASHBOARD HOME (protegido — placeholder) ============
function DashboardHome({ user, onLogout }) {
  return (
    <div className="dash-login">
      <header className="dash-login__top">
        <a href="#/" className="nav__logo" aria-label="MIRAI Studio">
          <img src="assets/mirailogo3.png" alt="MIRAI" />
        </a>
        <div className="dash-home__user">
          <span className="dash-home__hello">Hola, {user}</span>
          <button type="button" className="btn btn--ghost btn--sm" onClick={onLogout}>
            Cerrar sesión
          </button>
        </div>
      </header>
      <main className="dash-login__main">
        <div className="dash-home__panel">
          <h1 className="dash-login__title">Tu panel</h1>
          <p className="dash-login__sub">Tu panel está en construcción. Pronto vas a ver tus métricas y conversaciones acá.</p>
        </div>
      </main>
    </div>);

}

// ============ PROYECTOS ============
const CLIENTES = [
  {
    nombre: "De Leo Propiedades",
    logo: "assets/DeLeo3.png",
    web: "https://www.paoladeleo.com.ar/",
    demo: "#",
  },
];

function Proyectos() {
  return (
    <section className="section proyectos" id="proyectos">
      <div className="wrap">
        <div className="section-head">
          <Reveal as="div" className="section-head__tag">Proyectos</Reveal>
          <Reveal as="h2" className="section-head__title">Inmobiliarias que confían<br />en mirAI</Reveal>
        </div>
        <div className="proyectos__grid">
          {CLIENTES.map((c, i) =>
            <Reveal key={i} className="proyectos__card" delay={80 * i}>
              <div className="proyectos__logo-wrap">
                <img src={c.logo} alt={c.nombre} className="proyectos__logo" />
              </div>
              <div className="proyectos__nombre">{c.nombre}</div>
              <div className="proyectos__actions">
                <a href={c.web} target="_blank" rel="noopener noreferrer" className="btn proyectos__btn--web">
                  Página web <span className="arrow">→</span>
                </a>
                <a href={c.demo} className="btn proyectos__btn--demo">
                  Ver demo <span className="arrow">→</span>
                </a>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>
  );
}

// ============ AGENTE DE CAMPAÑA ============
function SectionAgenteCampana() {
  const cards = [
    {
      title: "Conectado con tu agente",
      desc: "Recibe en tiempo real los datos de calidad de cada lead: origen, canal, zona, intención y velocidad de conversión. Sin exportar nada ni configurar integraciones.",
      gradient: ["#4F7DFF", "#7C6FFF"],
      shadow: "rgba(79,125,255,0.4)",
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M15 3 L7 16 L13 16 L11 25 L21 11 L15 11 Z" fill="currentColor" stroke="none" />
        </svg>
      )
    },
    {
      title: "Optimiza por conversiones reales",
      desc: "Olvidate del CTR y las impresiones. El agente mide cuántos leads se convirtieron en ventas reales y reasigna el presupuesto automáticamente hacia lo que funciona.",
      gradient: ["#10B981", "#22D3EE"],
      shadow: "rgba(16,185,129,0.4)",
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="3 20 9 13 14 17 21 8 25 10" />
          <polyline points="21 8 25 8 25 12" />
        </svg>
      )
    },
    {
      title: "Estrategia de contenido y audiencias",
      desc: "Genera recomendaciones de copies, creatividades y segmentaciones basadas en los patrones de los leads que más convirtieron. Menos prueba y error, más resultados.",
      gradient: ["#F472B6", "#FB923C"],
      shadow: "rgba(244,114,182,0.4)",
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <ellipse cx="14" cy="7" rx="9" ry="3" />
          <path d="M5 7 v5 c0 1.7 4 3 9 3 s9-1.3 9-3 V7" />
          <path d="M5 12 v5 c0 1.7 4 3 9 3 s9-1.3 9-3 v-5" />
        </svg>
      )
    }
  ];

  return (
    <section className="section campana-section" id="agente-campana">
      <div className="wrap">
        <div className="section-head section-head--center">
          <div className="section-head__tag">El Agente de Campañas</div>
          <Reveal as="h2" className="section-head__title campana-title">
            <span style={{ display: "block" }}>La inteligencia de tu agente convertida en</span>
            <span style={{ display: "block" }}>inversión publicitaria certera.</span>
          </Reveal>
          <Reveal className="section-head__lede campana-lede">
            Tu agente sabe todo sobre cada lead: de dónde vino, qué preguntó, cuánto tardó en convertir y qué lo convenció. El agente de campañas toma esa información y la transforma en estrategia publicitaria en Google Ads y Meta Ads — invirtiendo donde realmente se vende, no donde los números parecen buenos.
          </Reveal>
        </div>

        <div className="campana-grid">
          {cards.map((c, i) => (
            <Reveal key={i} delay={i * 100}>
              <div
                className="campana-card"
                style={{
                  "--card-grad": `linear-gradient(135deg, ${c.gradient[0]}, ${c.gradient[1]})`,
                  "--card-shadow": c.shadow
                }}>
                <div className="campana-card__icon">{c.icon}</div>
                <h3 className="campana-card__title">{c.title}</h3>
                <p className="campana-card__desc">{c.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Dashboard, Marquee, Metrics, SectionProblema, SectionCambio, Values, Flow, SectionAgenteCampana, HowItWorks, LogosCarousel, Case, Pricing, ForWhom, FAQ, FinalCTA, About, Contact, DashboardLogin, DashboardHome, Footer, Proyectos });