/* global React, HeroStats */

const HERO_MEDIA = {
  facade: { label: "Architecture", poster: "assets/facade.png", video: "assets/facade.mp4" },
};

function TopNav({ active, onLang, lang = "EN" }) {
  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", "Architecture"],
    ["residences",   "Residences"],
    ["amenities",    "Amenities"],
    ["investment",   "Investment"],
    ["location",     "Location"],
    ["heritage",     "Heritage"],
  ];
  return (
    <header className={"topnav " + (scrolled ? "scrolled" : "")}>
      <a href="#top" className="topnav__brand">
        <img src="assets/adriatik-logo.png" alt="Adriatik Hotel" 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", "SQ", "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">Reserve <span className="arrow">→</span></a>
      </div>
    </header>
  );
}

function HeroBackground({ mediaKey = "facade" }) {
  const m = HERO_MEDIA[mediaKey] || HERO_MEDIA.facade;
  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 ? "assets/mobile-hero.mp4" : m.video;
  const posterSrc = isMobile ? "assets/mobile-hero.png" : m.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({ mediaKey = "facade" }) {
  return (
    <section id="top" className="hero">
      <HeroBackground mediaKey={mediaKey} />
      <div className="hero__veil" />
      <div className="hero__chrome">
        <div className="hero__body">
          <div className="hero__copy fade-in">
            <div className="eyebrow">Durrës · Albanian Riviera · Est. 1957</div>
            <h1 className="hero__title">A new chapter on the <em>Adriatic.</em></h1>
            <p className="hero__sub">
              One hundred private residences rising above the same shoreline our family has welcomed guests to since 1957.
              Reserved now, ready 2029.
            </p>
            <div className="hero__ctas">
              <a href="#reserve" className="btn btn--primary">Reserve a residence <span className="arrow">→</span></a>
              <a href="#residences" className="btn btn--ghost">See floor plans</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" />Best Western Premier Collection · Operating partner</div>
          <div className="scroll hero__late" style={{ "--late-delay": "1.45s" }}><span>Scroll</span><span className="scroll-line" /></div>
        </div>
      </div>
    </section>
  );
}

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