/* global React */
// Dentertain — shared shell: Nav, Footer, Icon, Photo, data

// ===== Icons (Lucide-style) =====
const Icon = ({ name, size = 24, stroke = 1.5, className = "", style = {} }) => {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor",
    strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round",
    className, style,
  };
  switch (name) {
    case "camera":
      return (<svg {...common}><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z"/><circle cx="12" cy="13" r="3.5"/></svg>);
    case "film":
      return (<svg {...common}><rect x="2" y="2" width="20" height="20" rx="2"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg>);
    case "image":
      return (<svg {...common}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>);
    case "play":
      return (<svg {...common}><polygon points="6 4 20 12 6 20 6 4"/></svg>);
    case "calendar":
      return (<svg {...common}><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>);
    case "map-pin":
      return (<svg {...common}><path d="M12 22s-7-7.58-7-12a7 7 0 0 1 14 0c0 4.42-7 12-7 12z"/><circle cx="12" cy="10" r="2.5"/></svg>);
    case "clock":
      return (<svg {...common}><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></svg>);
    case "mail":
      return (<svg {...common}><rect x="3" y="5" width="18" height="14" rx="2"/><polyline points="3 7 12 13 21 7"/></svg>);
    case "phone":
      return (<svg {...common}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>);
    case "arrow-right":
      return (<svg {...common}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/></svg>);
    case "arrow-left":
      return (<svg {...common}><line x1="19" y1="12" x2="5" y2="12"/><polyline points="11 6 5 12 11 18"/></svg>);
    case "arrow-up-right":
      return (<svg {...common}><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>);
    case "chevron-down":
      return (<svg {...common}><polyline points="6 9 12 15 18 9"/></svg>);
    case "instagram":
      return (<svg {...common}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor" stroke="none"/></svg>);
    case "facebook":
      return (<svg {...common}><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>);
    case "tiktok":
      return (<svg {...common}><path d="M9 12a4 4 0 1 0 4 4V4c1 2 3 4 6 4"/></svg>);
    case "x":
      return (<svg {...common}><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg>);
    case "check":
      return (<svg {...common}><polyline points="4 12 10 18 20 6"/></svg>);
    case "send":
      return (<svg {...common}><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>);
    case "heart":
      return (<svg {...common}><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>);
    case "sparkles":
      return (<svg {...common}><path d="M12 3l1.5 5L19 9.5l-5.5 1.5L12 16l-1.5-5L5 9.5l5.5-1.5L12 3z"/><path d="M19 17l.6 2 2 .6-2 .6-.6 2-.6-2-2-.6 2-.6.6-2z"/></svg>);
    case "users":
      return (<svg {...common}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>);
    case "search":
      return (<svg {...common}><circle cx="11" cy="11" r="7"/><line x1="20" y1="20" x2="16.6" y2="16.6"/></svg>);
    case "menu":
      return (<svg {...common}><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="17" x2="20" y2="17"/></svg>);
    default:
      return null;
  }
};

// ===== Photo (lazy image) =====
const Photo = ({ src, alt = "", className = "", style = {}, children }) => (
  <div className={`photo ${className}`} style={style}>
    {src ? <img src={src} alt={alt} loading="lazy" /> : null}
    {children}
  </div>
);

// ===== VideoTile (auto-playing inline reel, pill-shaped via className) =====
// Hero-Demovideo + Poster werden SELBST gehostet (public/assets/) — kein externer
// Aufruf (Datenschutz). Dennis ersetzt sie durch sein eigenes Showreel im Backend
// unter „Startseiten-Videos" (überschreibt via siteImages heroVideo1/2 + heroPoster1/2).
const HERO_VIDEO = {
  src: "/assets/hero-demo.mp4",
  poster: "/assets/hero-poster.jpg",
};

const VideoTile = ({ src = HERO_VIDEO.src, poster = HERO_VIDEO.poster, className = "", label, style = {}, startAt = 0 }) => {
  const ref = React.useRef(null);
  const [failed, setFailed] = React.useState(false);
  React.useEffect(() => {
    const v = ref.current;
    if (!v) return;
    const seek = () => {
      if (startAt > 0 && isFinite(v.duration) && v.duration > startAt) {
        try { v.currentTime = startAt; } catch (e) { /* noop */ }
      }
    };
    if (v.readyState >= 1) seek();
    else v.addEventListener("loadedmetadata", seek, { once: true });
    // Kick autoplay (some browsers need an explicit play() after mount)
    const p = v.play();
    if (p && typeof p.catch === "function") p.catch(() => { /* fall back to poster */ });
  }, [startAt]);
  return (
    <div className={`photo photo--video ${className}`} style={style}>
      {failed ? (
        <img src={poster} alt="" loading="eager" />
      ) : (
        <video
          ref={ref}
          src={src}
          poster={poster}
          autoPlay
          muted
          loop
          playsInline
          preload="auto"
          onError={() => setFailed(true)}
        />
      )}
      {label ? (
        <span className="photo__live">
          <span className="photo__live-dot"></span>
          {label}
        </span>
      ) : null}
    </div>
  );
};

// ===== Wedding image data =====
// Curated Unsplash wedding photography
const IMG = {
  base: (id, w = 900) => `https://images.unsplash.com/photo-${id}?w=${w}&auto=format&fit=crop&q=80`,
};

const HERO_IMAGES = [
  "1519741497674-611481863552",  // couple wedding
  "1606800052052-a08af7148866",  // romantic couple
  "1465495976277-4387d4b0b4c6",  // rings
];

const PORTFOLIO_ITEMS = [
  { id: 1,  type: "photo", title: "Hannah & Jonas", place: "Schloss Drachenburg", year: "2025", img: "1519741497674-611481863552", h: 1.4 },
  { id: 2,  type: "video", title: "Marie & Lukas",  place: "Weingut Mosel",        year: "2025", img: "1606800052052-a08af7148866", h: 1.1 },
  { id: 3,  type: "photo", title: "Lara & Tom",     place: "Düsseldorf",           year: "2025", img: "1519225421980-715cb0215aed", h: 1.5 },
  { id: 4,  type: "photo", title: "Sophia & Ben",   place: "Eifel",                year: "2024", img: "1511285560929-80b456fea0bc", h: 0.8 },
  { id: 5,  type: "video", title: "Emma & Niko",    place: "Sylt",                 year: "2024", img: "1465495975988-5e1cbfb0c0c5", h: 1.2 },
  { id: 6,  type: "photo", title: "Anna & Pieter",  place: "Tegernsee",            year: "2024", img: "1522413452208-996ff3f3e740", h: 1.3 },
  { id: 7,  type: "photo", title: "Detail · Ringe", place: "Köln",                 year: "2024", img: "1511795409834-432f878bc5b1", h: 0.9 },
  { id: 8,  type: "video", title: "Charlotte & Finn",place: "Toskana",             year: "2024", img: "1525258946800-98cfd641d0de", h: 1.4 },
  { id: 9,  type: "photo", title: "Boho · Wald",    place: "Sauerland",            year: "2024", img: "1525772764200-be829a350797", h: 1.2 },
  { id: 10, type: "photo", title: "First Dance",    place: "Hamburg",              year: "2023", img: "1469371670807-013ccf25f16a", h: 0.9 },
  { id: 11, type: "video", title: "Mila & Jonas",   place: "Mallorca",             year: "2023", img: "1542037179399-b5e8d244e2c4", h: 1.3 },
  { id: 12, type: "photo", title: "Anna & David",   place: "Bonn",                 year: "2023", img: "1583939003579-730e3918a45a", h: 1.4 },
  { id: 13, type: "photo", title: "Standesamt",     place: "Köln",                 year: "2023", img: "1505236858219-8359eb29e329", h: 0.85 },
  { id: 14, type: "video", title: "Save the Date",  place: "Bretagne",             year: "2023", img: "1465495975988-5e1cbfb0c0c5", h: 1.1 },
];

// ===== Nav =====
const Nav = ({ route, onNavigate }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const { t } = window.useI18n ? window.useI18n() : { t: (k) => k };
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  // Close menu on route change
  React.useEffect(() => { setMenuOpen(false); }, [route]);
  // Close on Escape
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);
  const items = [
    { id: "home",      label: t("nav.about") },
    { id: "portfolio", label: t("nav.portfolio") },
    { id: "contact",   label: t("nav.contact") },
  ];
  const solid = route !== "home";
  const go = (id) => { setMenuOpen(false); onNavigate(id); };
  return (
    <header className={`nav ${scrolled ? "scrolled" : ""} ${solid ? "solid" : ""} ${menuOpen ? "menu-open" : ""}`}>
      <div className="nav__inner">
        <div className="nav__brand" onClick={() => go("home")}>
          <img src="assets/dentertain-logo.png" alt="Dentertain" />
          <span className="word">Dentertain</span>
        </div>
        <nav className="nav__pill">
          {items.map((it) => (
            <button
              key={it.id}
              className={`nav__link ${route === it.id ? "active" : ""}`}
              onClick={() => go(it.id)}
            >
              {it.label}
            </button>
          ))}
        </nav>
        <div className="nav__right">
          {window.LangSwitch ? <window.LangSwitch /> : null}
          <button className="btn btn--dark nav__cta" onClick={() => go("contact")}>
            {t("nav.cta")} <Icon name="arrow-right" size={14} />
          </button>
          <button
            className="nav__menu-toggle"
            aria-label="Menu"
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((v) => !v)}
          >
            <Icon name={menuOpen ? "x" : "menu"} size={20} stroke={1.8} />
          </button>
        </div>
      </div>
    </header>
  );
};

// ===== Footer =====
const Footer = ({ onNavigate }) => {
  const { t, lang } = window.useI18n ? window.useI18n() : { t: (k) => k, lang: "de" };
  const labels = lang === "en" ? {
    tag: "Wedding videography & photography. The day, held — never staged. Available in Germany and worldwide.",
    studio: "Studio", services: "Services", legal: "Legal",
    about: "About", portfolio: "Portfolio", contact: "Contact", journal: "Journal", bewerten: "Review us on Google",
    s1: "Wedding video", s2: "Wedding photo", s3: "Combo package", s4: "After-wedding",
    l1: "Imprint", l2: "Privacy", l3: "Terms", l4: "Withdrawal",
    by: "Made with care in Bruchsal",
  } : {
    tag: "Hochzeitsfilm & Fotografie. Den Tag halten — nicht inszenieren. Verfügbar in Deutschland und weltweit.",
    studio: "Studio", services: "Leistungen", legal: "Rechtliches",
    about: "Über mich", portfolio: "Portfolio", contact: "Kontakt", journal: "Journal", bewerten: "Auf Google bewerten",
    s1: "Hochzeitsfilm", s2: "Hochzeitsfoto", s3: "Kombi-Paket", s4: "After-Wedding",
    l1: "Impressum", l2: "Datenschutz", l3: "AGB", l4: "Widerruf",
    by: "Made with care in Bruchsal",
  };
  return (
    <footer className="footer">
      <div className="footer__giant">DENTERTAIN</div>
      <div className="container footer__inner">
        <div className="footer__top">
          <div className="footer__brand">
            <div className="footer__brand-row">
              <img src="assets/dentertain-logo.png" alt="" />
              <span className="word">Dentertain</span>
            </div>
            <p className="footer__tag">{labels.tag}</p>
            <div className="footer__social">
              <a href="https://www.instagram.com/dennis.jakic/" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><Icon name="instagram" size={16} /></a>
              <a href="#" aria-label="TikTok"><Icon name="play" size={16} /></a>
              <a href="mailto:info@dentertain-production.de" aria-label="Mail"><Icon name="mail" size={16} /></a>
            </div>
          </div>
          <div className="footer__col">
            <h4>{labels.studio}</h4>
            <a onClick={() => onNavigate("home")}>{labels.about}</a>
            <a onClick={() => onNavigate("portfolio")}>{labels.portfolio}</a>
            <a onClick={() => onNavigate("contact")}>{labels.contact}</a>
            <a onClick={() => onNavigate("bewerten")}>{labels.bewerten}</a>
          </div>
          <div className="footer__col">
            <h4>{labels.services}</h4>
            <a>{labels.s1}</a>
            <a>{labels.s2}</a>
            <a>{labels.s3}</a>
            <a>{labels.s4}</a>
          </div>
          <div className="footer__col">
            <h4>{labels.legal}</h4>
            <a onClick={() => onNavigate("impressum")}>{labels.l1}</a>
            <a onClick={() => onNavigate("datenschutz")}>{labels.l2}</a>
            <a onClick={() => onNavigate("agb")}>{labels.l3}</a>
            <a onClick={() => onNavigate("widerruf")}>{labels.l4}</a>
          </div>
        </div>
        <div className="footer__bottom">
          <span onClick={(e) => {
            const now = Date.now();
            const w = window.__dtSeq || { n: 0, t: 0 };
            window.__dtSeq = now - w.t < 2000 ? { n: w.n + 1, t: now } : { n: 1, t: now };
            if (window.__dtSeq.n >= 3) { window.__dtSeq = { n: 0, t: 0 }; window.location.href = "admin.html"; }
          }} style={{ cursor: "default", userSelect: "none" }}>© DENTERTAIN 2026 · {labels.by}</span>
          <span>49.1289° N, 8.5953° E</span>
        </div>
      </div>
    </footer>
  );
};

// ===== Scroll-reveal hook (IntersectionObserver) =====
const useReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    if (!els.length) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("in");
          io.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
};

Object.assign(window, {
  Icon, Photo, VideoTile, HERO_VIDEO, Nav, Footer, useReveal, IMG, HERO_IMAGES, PORTFOLIO_ITEMS,
});