/* global React, Icon, Button, CONTACT */
const { useState: useNavState, useEffect: useNavEffect } = React;
const LOGO_WHITE = (window.__resources && window.__resources.logoWhite) || "/assets/logos/marketproof-logo-white.png";

/* Fixed header height — shared with the mobile menu offset and the in-page
   scroll anchors on Mentoría / Talleres / Talento. Raised from 76→96 so the
   enlarged logo has room without breaking the layout. */
const HEADER_H = 96;

/* Orden solicitado. "Agendar sesión" NO va aquí: se mantiene como botón CTA mint
   al final de la navbar (es el ítem 9 visualmente). El id es la clave de página
   que consume go(); "reclutamiento" mapea a la ruta /reclutamiento. */
const NAV_LINKS = [
  { id: "home", label: "Inicio" },
  { id: "nosotros", label: "Quiénes somos" },
  { id: "cursos", label: "Cursos" },
  { id: "mentoria", label: "Mentoría 1:1" },
  { id: "talleres", label: "Talleres & Empresas" },
  { id: "reclutamiento", label: "Reclutamiento" },
  { id: "bites", label: "Bites" },
  { id: "faq", label: "FAQ" },
];

function Navbar({ page, go, onCta }) {
  const [scrolled, setScrolled] = useNavState(false);
  const [open, setOpen] = useNavState(false);
  useNavEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useNavEffect(() => { setOpen(false); }, [page]);

  // Transparent only at the very top of Home (it overlays the dark hero); solid glass otherwise.
  const transparent = page === "home" && !scrolled;

  return (
    <>
      <header style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 60,
        background: transparent ? "rgba(15,32,44,0)" : "rgba(15,32,44,0.72)",
        backdropFilter: transparent ? "none" : "blur(18px) saturate(140%)",
        WebkitBackdropFilter: transparent ? "none" : "blur(18px) saturate(140%)",
        borderBottom: `1px solid ${transparent ? "rgba(255,255,255,0)" : "rgba(255,255,255,0.10)"}`,
        transition: "background 320ms var(--mp-ease), border-color 320ms var(--mp-ease)",
        color: "var(--mp-paper)",
      }}>
        <div style={{
          maxWidth: 1320, margin: "0 auto", padding: "0 28px", height: HEADER_H,
          display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20,
        }}>
          <a href="#" onClick={(e) => { e.preventDefault(); go("home"); }} aria-label="MarketProof — Inicio"
            style={{ display: "inline-flex", alignItems: "center", flex: "0 0 auto" }}>
            <img src={LOGO_WHITE} alt="MarketProof" className="mp-logo-img"
              style={{ height: 92, width: "auto", display: "block", marginLeft: -12 }} />
          </a>

          <nav className="mp-desktop-nav" style={{ display: "flex", alignItems: "center", gap: 26 }}>
            {NAV_LINKS.map((l) => (
              <a key={l.id} href="#" onClick={(e) => { e.preventDefault(); go(l.id); }}
                className="mp-navlink"
                style={{
                  color: page === l.id ? "var(--mp-paper)" : "rgba(255,255,255,0.66)",
                  textDecoration: "none", fontSize: 13.5, fontWeight: page === l.id ? 600 : 500,
                  position: "relative", whiteSpace: "nowrap", transition: "color 200ms",
                }}>
                {l.label}
                <span style={{
                  position: "absolute", left: 0, right: 0, bottom: -7, height: 2, borderRadius: 2,
                  background: "var(--mp-mint)", transformOrigin: "center",
                  transform: page === l.id ? "scaleX(1)" : "scaleX(0)",
                  transition: "transform 260ms var(--mp-ease)",
                }} />
              </a>
            ))}
          </nav>

          <div className="mp-desktop-nav" style={{ flex: "0 0 auto" }}>
            <Button variant="mint" size="sm" onClick={onCta} icon="calendar">Agendar sesión</Button>
          </div>

          <button className="mp-mobile-toggle" onClick={() => setOpen((o) => !o)}
            style={{
              display: "none", background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.14)",
              color: "var(--mp-paper)", width: 44, height: 44, borderRadius: 14, cursor: "pointer",
              alignItems: "center", justifyContent: "center",
            }}>
            <Icon name={open ? "x" : "menu"} size={22} />
          </button>
        </div>
      </header>

      {/* Mobile menu */}
      <div style={{
        position: "fixed", inset: `${HEADER_H}px 0 0 0`, zIndex: 55,
        background: "rgba(15,32,44,0.96)", backdropFilter: "blur(20px)",
        padding: "20px 24px 40px", display: open ? "flex" : "none", flexDirection: "column", gap: 4,
        overflowY: "auto",
      }}>
        {NAV_LINKS.map((l) => (
          <a key={l.id} href="#" onClick={(e) => { e.preventDefault(); go(l.id); }}
            style={{
              color: page === l.id ? "var(--mp-mint)" : "var(--mp-paper)", textDecoration: "none",
              fontSize: 22, fontWeight: 600, padding: "14px 4px",
              borderBottom: "1px solid rgba(255,255,255,0.08)",
            }}>{l.label}</a>
        ))}
        <div style={{ marginTop: 20 }}>
          <Button variant="mint" size="lg" full onClick={onCta} icon="calendar">Agendar sesión</Button>
        </div>
      </div>
    </>
  );
}

function Footer({ go }) {
  const cols = [
    { h: "Plataforma", links: [["Cursos", "cursos"], ["Mentoría", "mentoria"], ["Talleres", "talleres"], ["Reclutamiento", "reclutamiento"], ["Bites", "bites"]] },
    { h: "Empresa", links: [["Quiénes somos", "nosotros"], ["FAQ", "faq"], ["Blog", null]] },
  ];
  return (
    <footer style={{ background: "var(--mp-ink)", color: "var(--mp-paper)", padding: "72px 28px 30px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1.3fr", gap: 40,
          paddingBottom: 44, borderBottom: "1px solid rgba(255,255,255,0.10)",
        }} className="mp-footer-grid">
          <div style={{ maxWidth: 320 }}>
            <img src={LOGO_WHITE} alt="MarketProof" className="mp-foot-logo"
              style={{ height: 84, width: "auto", marginLeft: -10, marginBottom: 6 }} />
            <p style={{ fontSize: 14.5, color: "rgba(255,255,255,0.62)", margin: "0 0 22px", lineHeight: 1.55 }}>
              El conocimiento que <span style={{ fontStyle: "italic", color: "var(--mp-mint)" }}>sí se aplica.</span><br />
              De experto a experto. Sin rodeos.
            </p>
            <div style={{ display: "flex", gap: 9 }}>
              {[["IG", CONTACT.instagram], ["IN", CONTACT.linkedin], ["YT", CONTACT.youtube], ["TT", CONTACT.tiktok]].map(([s, url]) => (
                <a key={s} href={url} target="_blank" rel="noopener noreferrer" aria-label={s} className="mp-social" style={{
                  width: 38, height: 38, borderRadius: 999, background: "rgba(255,255,255,0.07)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  fontSize: 11, fontWeight: 700, letterSpacing: "0.04em", cursor: "pointer",
                  textDecoration: "none", color: "inherit", transition: "background 200ms",
                }}>{s}</a>
              ))}
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.h} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.45)", marginBottom: 4 }}>{c.h}</div>
              {c.links.map(([label, pg]) => (
                <a key={label} href="#" onClick={(e) => { e.preventDefault(); pg && go(pg); }}
                  className="mp-footlink"
                  style={{ color: "rgba(255,255,255,0.74)", textDecoration: "none", fontSize: 14, fontWeight: 500 }}>{label}</a>
              ))}
            </div>
          ))}
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.45)", marginBottom: 4 }}>Contacto</div>
            <a href={"mailto:" + CONTACT.email} className="mp-footlink" style={{ color: "rgba(255,255,255,0.74)", textDecoration: "none", fontSize: 14, display: "inline-flex", alignItems: "center", gap: 9 }}>
              <Icon name="mail" size={16} /> {CONTACT.email}
            </a>
            <a href={CONTACT.whatsapp} target="_blank" rel="noopener noreferrer" className="mp-footlink" style={{ color: "rgba(255,255,255,0.74)", textDecoration: "none", fontSize: 14, display: "inline-flex", alignItems: "center", gap: 9 }}>
              <Icon name="message" size={16} /> WhatsApp
            </a>
            <span style={{ color: "rgba(255,255,255,0.5)", fontSize: 14, display: "inline-flex", alignItems: "center", gap: 9 }}>
              <Icon name="mapPin" size={16} /> Guatemala · LATAM · Online
            </span>
          </div>
        </div>
        <div className="mp-footbottom" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 22, fontSize: 12.5, color: "rgba(255,255,255,0.45)", gap: 12, flexWrap: "wrap" }}>
          <span>© 2026 MarketProof S.A. · Todos los derechos reservados.</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
            Hecho con propósito en Guatemala <span style={{ color: "var(--mp-mint)" }}>●</span>
          </span>
        </div>
      </div>
    </footer>
  );
}

window.Navbar = Navbar;
window.Footer = Footer;