/* global React, HeroStats, useT */

const HERO_DESKTOP_VIDEO  = "assets/facade.mp4";
const HERO_DESKTOP_POSTER = "assets/facade.png";
const HERO_MOBILE_VIDEO   = "assets/mobile-hero.mp4";
const HERO_MOBILE_POSTER  = "assets/mobile-hero.png";

function TopNav({ active, onLang, lang = "EN" }) {
  const t = useT();
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    ["architecture", t("nav.architecture")],
    ["residences",   t("nav.residences")],
    ["amenities",    t("nav.amenities")],
    ["investment",   t("nav.investment")],
    ["location",     t("nav.location")],
    ["heritage",     t("nav.heritage")],
  ];
  return (
    <header className={"topnav " + (scrolled ? "scrolled" : "")}>
      <a href="#top" className="topnav__brand">
        <img src="assets/adriatik-logo.png" alt="Adriatik Residences — luxury branded residences, Durrës, Albania" className="logo-light" />
      </a>
      <ul className="topnav__links">
        {links.map(([id, label]) => (
          <li key={id}><a href={"#" + id} className={active === id ? "active" : ""}>{label}</a></li>
        ))}
      </ul>
      <div className="topnav__right">
        <div className="lang">
          {["EN", "AL", "IT"].map((l) => (
            <button key={l} onClick={() => onLang && onLang(l)}
                    className={lang === l ? "active" : ""}>{l}</button>
          ))}
        </div>
        <a href="#reserve" className="btn btn--ghost btn--sm">{t("nav.reserve")} <span className="arrow">→</span></a>
      </div>
    </header>
  );
}

function HeroBackground() {
  const [videoOk, setVideoOk] = React.useState(true);
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== "undefined" && window.matchMedia("(max-width: 768px)").matches
  );
  React.useEffect(() => {
    const mql = window.matchMedia("(max-width: 768px)");
    const update = () => setIsMobile(mql.matches);
    mql.addEventListener("change", update);
    return () => mql.removeEventListener("change", update);
  }, []);
  const videoSrc  = isMobile ? HERO_MOBILE_VIDEO  : HERO_DESKTOP_VIDEO;
  const posterSrc = isMobile ? HERO_MOBILE_POSTER : HERO_DESKTOP_POSTER;
  return (
    <div className="hero__media">
      <div className="ph-img kenburns"
           style={{
             position: "absolute", inset: 0,
             backgroundImage: `linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)), url(${posterSrc})`,
             backgroundSize: "cover", backgroundPosition: "center",
           }} />
      {videoOk && (
        <video key={videoSrc} autoPlay loop muted playsInline poster={posterSrc}
               onError={() => setVideoOk(false)}
               className="kenburns" style={{ position: "absolute", inset: 0 }}>
          <source src={videoSrc} type="video/mp4" />
        </video>
      )}
    </div>
  );
}

function Hero() {
  const t = useT();
  return (
    <section id="top" className="hero">
      <HeroBackground />
      <div className="hero__veil" />
      <div className="hero__chrome">
        <div className="hero__body">
          <div className="hero__copy fade-in">
            <div className="eyebrow">{t("hero.eyebrow")}</div>
            <h1 className="hero__title">{t("hero.title_1")}<em>{t("hero.title_em")}</em>{t("hero.title_2")}</h1>
            <p className="hero__sub">{t("hero.subtitle")}</p>
            <div className="hero__ctas">
              <a href="#reserve" className="btn btn--primary">{t("hero.cta_primary")} <span className="arrow">→</span></a>
              <a href="#residences" className="btn btn--ghost">{t("hero.cta_secondary")}</a>
            </div>
          </div>
          <div className="hero__late" style={{ "--late-delay": "1.05s" }}><HeroStats /></div>
        </div>
        <div className="hero__foot">
          <div className="partner-badge hero__late" style={{ "--late-delay": "1.25s" }}><span className="dot" />{t("hero.partner_badge")}</div>
          <div className="scroll hero__late" style={{ "--late-delay": "1.45s" }}><span>{t("hero.scroll")}</span><span className="scroll-line" /></div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TopNav, Hero });