/* app.jsx — composición, modal de demo y panel de Tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "a",
  "theme": "light",
  "accent": ["#2DD4BF", "#0D9488", "#0F766E"],
  "headingFont": "Space Grotesk"
}/*EDITMODE-END*/;

const ACCENTS = [
  ["#2DD4BF", "#0D9488", "#0F766E"],
  ["#22D3EE", "#06B6D4", "#0E7490"],
  ["#5EEAD4", "#14B8A6", "#115E59"],
];

/* ---- Modal Contáctanos ----
   Reemplaza el antiguo formulario de "Solicitar demo": al presionar
   "Contáctanos" se muestran directamente las formas de contacto reales
   (las mismas de /pages/contacto.html), con WhatsApp como canal principal. */
const CONTACTOS = [
  {
    icono: "phone", titulo: "WhatsApp", valor: "+57 302 452 3802",
    sub: "El canal más rápido — respondemos el mismo día",
    href: "https://wa.me/573024523802?text=" + encodeURIComponent("Hola Treego, quiero información para mi restaurante."),
    destacado: true,
  },
  {
    icono: "mail", titulo: "Correo", valor: "treegos.a.s@gmail.com",
    sub: "Para cotizaciones y convenios",
    href: "mailto:treegos.a.s@gmail.com",
  },
  {
    icono: "camera", titulo: "Instagram", valor: "@TreegoS.A.S",
    sub: "Síguenos y escríbenos por DM",
    href: "https://instagram.com/TreegoS.A.S",
  },
];

function ContactoModal({ open, onClose }) {
  useEffect(() => {
    const k = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", k);
    return () => window.removeEventListener("keydown", k);
  }, [onClose]);
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, zIndex: 200, display: "grid", placeItems: "center", padding: 20,
      background: "color-mix(in oklab, var(--dark) 55%, transparent)", backdropFilter: "blur(6px)",
      animation: "fadeIn .25s ease",
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: "min(480px,100%)", background: "var(--surface)", borderRadius: "var(--r-xl)",
        border: "1px solid var(--line)", boxShadow: "var(--shadow-lg)", padding: 36, position: "relative",
      }}>
        <button onClick={onClose} aria-label="Cerrar" style={{
          position: "absolute", top: 18, right: 18, width: 34, height: 34, borderRadius: "50%",
          background: "var(--bg-2)", color: "var(--ink-2)", display: "grid", placeItems: "center",
          fontSize: 18, border: "none", cursor: "pointer",
        }}>×</button>
        <span className="eyebrow">Contáctanos</span>
        <h3 style={{ fontSize: 26, marginTop: 14 }}>Hablemos de su restaurante.</h3>
        <p style={{ marginTop: 10, color: "var(--ink-2)", fontSize: 15 }}>
          Escríbanos por el canal que prefiera: le mostramos el panel, los planes y
          cómo Treego se adapta a su cocina.
        </p>
        <div style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 12 }}>
          {CONTACTOS.map((c) => (
            <a key={c.titulo} href={c.href}
              target={c.href.startsWith("http") ? "_blank" : undefined}
              rel={c.href.startsWith("http") ? "noopener noreferrer" : undefined}
              style={{
                display: "flex", alignItems: "center", gap: 14, padding: "15px 16px",
                borderRadius: "var(--r)", textDecoration: "none", color: "var(--ink)",
                border: c.destacado ? "1.5px solid var(--g2)" : "1px solid var(--line-2)",
                background: c.destacado ? "color-mix(in oklab, var(--g1) 10%, var(--bg))" : "var(--bg)",
              }}>
              <span style={{
                width: 44, height: 44, borderRadius: 13, flex: "none",
                background: c.destacado ? "var(--grad)" : "var(--bg-2)",
                color: c.destacado ? "#fff" : "var(--g3)",
                display: "grid", placeItems: "center",
              }}>
                <Icon name={c.icono} style={{ width: 20, height: 20 }} />
              </span>
              <span style={{ minWidth: 0 }}>
                <span style={{ display: "block", fontSize: 13, fontWeight: 600, color: "var(--ink-2)" }}>{c.titulo}</span>
                <b style={{ display: "block", fontSize: 16.5, fontFamily: "var(--font-display)", letterSpacing: "-.01em" }}>{c.valor}</b>
                <span style={{ display: "block", fontSize: 12.5, color: "var(--ink-3)" }}>{c.sub}</span>
              </span>
              <Icon name="arrow" style={{ width: 16, height: 16, marginLeft: "auto", color: "var(--ink-3)", flex: "none" }} />
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---- Componente principal de la landing ---- */
function LandingApp({ onGoPanel, onGoRegister }) {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [contacto, setContacto] = useState(false);
  useReveal();

  useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-hero", t.hero);
    r.setAttribute("data-theme", t.theme);
    const a = t.accent || ACCENTS[0];
    r.style.setProperty("--g1", a[0]);
    r.style.setProperty("--g2", a[1]);
    r.style.setProperty("--g3", a[2]);
    r.style.setProperty("--font-display", `'${t.headingFont}', system-ui, sans-serif`);
  }, [t]);

  const openContacto = () => setContacto(true);

  const handleLogin = () => {
    if (typeof onGoPanel === 'function') {
      onGoPanel(); // unified mode — switch to panel view in the same page
    } else {
      window.location.href = '/pages/panel.html'; // standalone mode — navigate to panel
    }
  };

  return (
    <React.Fragment>
      <Nav onContacto={openContacto} onLogin={handleLogin} onRegister={onGoRegister} />
      <Hero onContacto={openContacto} />
      <Pillars />
      <How />
      <Drivers />
      <Diff />
      <Plans onContacto={openContacto} />
      <Testimonials />
      <FAQ />
      <FinalCTA onContacto={openContacto} />
      <Footer onLogin={handleLogin} />
      <ContactoModal open={contacto} onClose={() => setContacto(false)} />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio label="Estilo del hero" value={t.hero}
          options={[{ value: "a", label: "Editorial" }, { value: "b", label: "Centrado" }, { value: "c", label: "Oscuro" }]}
          onChange={(v) => setTweak("hero", v)} />
        <TweakSection label="Apariencia" />
        <TweakRadio label="Tema de la landing" value={t.theme}
          options={[{ value: "light", label: "Claro" }, { value: "dark", label: "Oscuro" }]}
          onChange={(v) => setTweak("theme", v)} />
        <TweakColor label="Acento" value={t.accent} options={ACCENTS}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSelect label="Tipografía de titulares" value={t.headingFont}
          options={["Space Grotesk", "Sora", "Bricolage Grotesque"]}
          onChange={(v) => setTweak("headingFont", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

Object.assign(window, { LandingApp });

/* Self-render only when opened as a standalone page (not in unified index.html) */
if (!window.TREEGO_UNIFIED_MODE) {
  ReactDOM.createRoot(document.getElementById("root")).render(<LandingApp />);
}