// Reusable photo placeholder, logo, navbar
const PhotoPH = ({ tone = "dark", label, tag, style }) => {
  const cls = `photo-ph ${tone === "cream" ? "cream" : tone === "warm" ? "warm" : ""}`;
  return (
    <div className={cls} style={style}>
      {tag ? <span className="corner-tag">{tag}</span> : null}
      <span>{label}</span>
      <span>↗</span>
    </div>
  );
};

// Image-based logo with light + dark variants. Both PNGs present; CSS shows correct one per theme.
const Logo = ({ className = "" }) => (
  <a className={`logo ${className}`} href="#top" aria-label="MCheco Rent Car">
    <img className="l-on-dark" src="assets/logo-dark.png" alt="MCheco Rent Car" />
    <img className="l-on-light" src="assets/logo-light.png" alt="MCheco Rent Car" />
  </a>
);

const LangToggle = ({ lang, setLang }) => (
  <div className="lang-toggle" role="group" aria-label="Language">
    <button className={lang === "ES" ? "active" : ""} onClick={() => setLang("ES")}>ES</button>
    <button className={lang === "EN" ? "active" : ""} onClick={() => setLang("EN")}>EN</button>
  </div>
);

const ThemeToggle = ({ theme, setTheme }) => (
  <button
    className="theme-toggle"
    aria-label={theme === "dark" ? "Activar modo claro" : "Activar modo oscuro"}
    onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
  >
    {theme === "dark" ? <IconSun size={15} /> : <IconMoon size={15} />}
  </button>
);

const WAButton = ({ children, size = "", className = "", style }) => (
  <a href={WA_LINK} target="_blank" rel="noopener" className={`btn btn-red ${size} ${className}`} style={style}>
    <IconWA size={16} />
    <span>{children}</span>
  </a>
);

const Navbar = ({ lang, setLang, theme, setTheme, t }) => {
  const navRef = React.useRef(null);
  React.useEffect(() => {
    const el = navRef.current;
    if (!el) return;
    const onScroll = () => el.classList.toggle("scrolled", window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className="nav" id="top" ref={navRef}>
      <div className="container nav-inner">
        <Logo />
        <nav className="nav-links" aria-label="Primary">
          <a href="#catalogo">{t.nav.catalog}</a>
          <a href="#venta">{t.nav.sale}</a>
          <a href="#nosotros">{t.nav.about}</a>
          <a href="#contacto">{t.nav.contact}</a>
        </nav>
        <div className="nav-right">
          <ThemeToggle theme={theme} setTheme={setTheme} />
          <LangToggle lang={lang} setLang={setLang} />
          <WAButton size="btn-sm">{t.nav.wa}</WAButton>
        </div>
      </div>
    </header>
  );
};

Object.assign(window, { PhotoPH, Logo, LangToggle, ThemeToggle, WAButton, Navbar });