// PonteREI — header, footer, splash, tweaks panel

function Header({ onListProperty }) {
  const { locale, setLocale } = useLocale();
  const { path, navigate } = useRouter();
  const [mobileOpen, setMobileOpen] = useState(false);

  const links = [
    { to: "/properties", label: t("nav.properties", locale) },
    { to: "/how-it-works", label: t("nav.howItWorks", locale) },
    { to: "/about", label: t("nav.about", locale) },
    { to: "/list-property", label: t("nav.listProperty", locale) },
  ];

  const isActive = (to) => path === to || (to !== "/" && path.startsWith(to));

  return (
    <header className="header">
      <div className="container header-inner">
        <a href="#/" className="logo" onClick={(e) => { e.preventDefault(); navigate("/"); }} aria-label="PonteREI home">
          <span className="logo-mark"><LogoMark size={22} /></span>
          Ponte<em>REI</em>
        </a>

        <nav className="nav-links">
          {links.map((l) => (
            <a
              key={l.to}
              href={`#${l.to}`}
              className={`nav-link ${isActive(l.to) ? "active" : ""}`}
              onClick={(e) => { e.preventDefault(); navigate(l.to); }}
            >
              {l.label}
            </a>
          ))}
        </nav>

        <div className="header-right">
          <div className="lang-switch" role="tablist" aria-label="Language">
            <button className={locale === "pt" ? "active" : ""} onClick={() => setLocale("pt")} aria-pressed={locale === "pt"}>PT</button>
            <button className={locale === "en" ? "active" : ""} onClick={() => setLocale("en")} aria-pressed={locale === "en"}>EN</button>
          </div>
          <a
            href="#/login"
            className="nav-link"
            onClick={(e) => { e.preventDefault(); navigate("/login"); }}
            style={{ display: "inline-block" }}
          >
            {t("nav.signIn", locale)}
          </a>
          <a
            href="#/signup"
            className="btn btn-primary btn-sm"
            onClick={(e) => { e.preventDefault(); navigate("/signup"); }}
          >
            {t("nav.getStarted", locale)}
          </a>
          <button className="mobile-menu-toggle" onClick={() => setMobileOpen(true)} aria-label="Open menu">
            <Icon.Menu />
          </button>
        </div>
      </div>

      {mobileOpen && (
        <div className="mobile-menu-overlay">
          <div className="flex justify-between items-center">
            <span className="logo"><LogoMark size={22} /> Ponte<em>REI</em></span>
            <button onClick={() => setMobileOpen(false)} aria-label="Close menu" style={{ padding: 8 }}>
              <Icon.Close />
            </button>
          </div>
          <nav>
            {links.map((l) => (
              <a key={l.to} href={`#${l.to}`} onClick={(e) => { e.preventDefault(); navigate(l.to); setMobileOpen(false); }}>
                {l.label}
              </a>
            ))}
          </nav>
          <div className="flex gap-12">
            <button className="btn btn-ghost" style={{ flex: 1 }} onClick={() => { navigate("/login"); setMobileOpen(false); }}>{t("nav.signIn", locale)}</button>
            <button className="btn btn-primary" style={{ flex: 1 }} onClick={() => { navigate("/signup"); setMobileOpen(false); }}>{t("nav.getStarted", locale)}</button>
          </div>
        </div>
      )}
    </header>
  );
}

function Footer() {
  const { locale } = useLocale();
  const { navigate } = useRouter();
  const { push } = useToast();
  const [email, setEmail] = useState("");

  const submit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) return;
    push(locale === "pt" ? "Inscrição confirmada — bem-vindo!" : "Subscribed — welcome aboard!");
    setEmail("");
  };

  const link = (to, label) => (
    <li><a href={`#${to}`} onClick={(e) => { e.preventDefault(); navigate(to); }}>{label}</a></li>
  );

  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <span className="logo"><LogoMark size={26} /> Ponte<em>REI</em></span>
            <p className="footer-tagline">{t("footer.tagline", locale)}</p>
            <p className="footer-italian">{t("footer.italianSig", locale)}</p>
            <form className="footer-newsletter" onSubmit={submit} style={{ marginTop: 24 }}>
              <input type="email" required placeholder={t("footer.newsletterPlaceholder", locale)} value={email} onChange={(e) => setEmail(e.target.value)} />
              <button type="submit">{t("footer.newsletterCta", locale)}</button>
            </form>
          </div>

          <div>
            <h4>{t("footer.product", locale)}</h4>
            <ul>
              {link("/properties", t("nav.properties", locale))}
              {link("/how-it-works", t("nav.howItWorks", locale))}
              {link("/list-property", t("nav.listProperty", locale))}
            </ul>
          </div>

          <div>
            <h4>{t("footer.company", locale)}</h4>
            <ul>
              {link("/about", t("nav.about", locale))}
              <li><a href="#/about">{t("footer.careers", locale)}</a></li>
              <li><a href="#/about">{t("footer.press", locale)}</a></li>
              <li><a href="mailto:contato@ponterei.com">{t("footer.contact", locale)}</a></li>
            </ul>
          </div>

          <div>
            <h4>{t("footer.resources", locale)}</h4>
            <ul>
              <li><a href="#/">{t("footer.blog", locale)}</a></li>
              <li><a href="#/how-it-works">{t("nav.howItWorks", locale)}</a></li>
              <li><a href="#/">FAQ</a></li>
            </ul>
          </div>

          <div>
            <h4>{t("footer.legal", locale)}</h4>
            <ul>
              <li><a href="#/">{t("footer.terms", locale)}</a></li>
              <li><a href="#/">{t("footer.privacy", locale)}</a></li>
              <li><a href="#/">{t("footer.risk", locale)}</a></li>
              <li><a href="#/">{t("footer.cvm", locale)}</a></li>
            </ul>
          </div>
        </div>

        <p className="footer-disclaimer">{t("footer.disclaimer", locale)}</p>

        <div className="footer-bottom">
          <span>{t("footer.copyright", locale)}</span>
          <span>CNPJ 53.812.904/0001-03 · CVM 88</span>
        </div>
      </div>
    </footer>
  );
}

// Locale Splash — shown on first load only
function LocaleSplash({ onPick }) {
  return (
    <div className="splash" role="dialog" aria-modal="true" aria-labelledby="splash-title">
      <div className="splash-card">
        <div className="splash-logo" id="splash-title"><LogoMark size={56} /> Ponte<em>REI</em></div>
        <p className="splash-italian">"{window.I18N.splash.italianMeaning.pt}"</p>
        <p>{window.I18N.splash.welcome.pt}<br/>{window.I18N.splash.chooseLanguage.pt} · {window.I18N.splash.chooseLanguage.en}</p>
        <div className="splash-buttons">
          <button className="splash-btn" onClick={() => onPick("pt")}>
            <span className="flex items-center gap-12">
              <span className="flag">🇧🇷</span>
              {window.I18N.splash.pt.pt}
            </span>
            <Icon.ArrowRight />
          </button>
          <button className="splash-btn" onClick={() => onPick("en")}>
            <span className="flex items-center gap-12">
              <span className="flag">🌐</span>
              {window.I18N.splash.en.en}
            </span>
            <Icon.ArrowRight />
          </button>
        </div>
      </div>
    </div>
  );
}

// Tweaks panel — protocol per system prompt
function TweaksPanel({ globeMode, setGlobeMode }) {
  const { locale, setLocale } = useLocale();
  const [active, setActive] = useState(false);

  useEffect(() => {
    const onMsg = (e) => {
      const data = e.data || {};
      if (data.type === "__activate_edit_mode") setActive(true);
      else if (data.type === "__deactivate_edit_mode") setActive(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  if (!active) return null;
  return (
    <div className="tweaks-panel" role="dialog" aria-label="Tweaks">
      <div className="flex justify-between items-center mb-16">
        <h4 style={{ margin: 0 }}>Tweaks</h4>
        <button onClick={() => { setActive(false); window.parent.postMessage({ type: "__edit_mode_dismissed" }, "*"); }} aria-label="Close">
          <Icon.Close />
        </button>
      </div>
      <div className="tweak-row">
        <span className="tweak-label">Locale</span>
        <div className="lang-switch">
          <button className={locale === "pt" ? "active" : ""} onClick={() => setLocale("pt")}>PT</button>
          <button className={locale === "en" ? "active" : ""} onClick={() => setLocale("en")}>EN</button>
        </div>
      </div>
      <div className="tweak-row">
        <span className="tweak-label">Globe</span>
        <div className="lang-switch">
          <button className={globeMode === "3d" ? "active" : ""} onClick={() => setGlobeMode("3d")}>3D</button>
          <button className={globeMode === "2d" ? "active" : ""} onClick={() => setGlobeMode("2d")}>2D</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Header, Footer, LocaleSplash, TweaksPanel });