/* global React, STR, tr, fmtPrice, BOATS */
// ============================================================
// SHARED: context, hooks, header, footer, primitives
// ============================================================
const { createContext, useContext, useState, useEffect, useRef, useCallback } = React;

const AppCtx = createContext(null);
const useApp = () => useContext(AppCtx);

// reveal-on-scroll hook
function useReveal() {
  useEffect(() => {
    if (!("IntersectionObserver" in window)) {
      document.querySelectorAll(".reveal:not(.in)").forEach((e) => e.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {
        if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    const observeAll = () => document.querySelectorAll(".reveal:not(.in)").forEach((e) => io.observe(e));
    observeAll();
    // .reveal-Elemente, die ohne App-Render mounten (z. B. gefilterte Bootslisten), nachträglich beobachten
    const mo = new MutationObserver(observeAll);
    mo.observe(document.body, { childList: true, subtree: true });
    return () => { mo.disconnect(); io.disconnect(); };
  });
}

// Image slot wrapper (premium placeholder; user-fillable)
function Slot({ id, label, className = "", style = {}, shape = "rect", radius = 0, ...rest }) {
  const { lang } = useApp();
  return (
    React.createElement("div", { className: `slot-wrap ${className}`, style },
      React.createElement("image-slot", {
        id, shape, radius: String(radius),
        placeholder: label || (lang === "de" ? "Bild folgt" : "Image coming soon"),
        style: { width: "100%", height: "100%" },
        ...rest,
      }),
      React.createElement("span", { className: "slot-tag mono" }, label)
    )
  );
}

// brand mark — minimalist anchor/compass lockup (simple geometry only)
function Logo({ light = false, compact = false }) {
  const { lang } = useApp();
  const c = light ? "var(--white)" : "var(--navy-900)";
  const sub = light ? "oklch(0.8 0.02 240)" : "var(--slate-500)";
  return (
    React.createElement("div", { className: "logo", style: { color: c } },
      React.createElement("svg", { width: 30, height: 30, viewBox: "0 0 40 40", fill: "none", "aria-hidden": true },
        React.createElement("circle", { cx: 20, cy: 20, r: 18, stroke: light ? "var(--brass)" : "var(--brass)", strokeWidth: 1.5 }),
        React.createElement("path", { d: "M20 7 L20 33 M11 28 q9 7 18 0 M20 7 a2.4 2.4 0 1 0 0.01 0 M14 13 h12", stroke: c, strokeWidth: 1.6, strokeLinecap: "round", fill: "none" })
      ),
      !compact && React.createElement("div", { className: "logo-text" },
        React.createElement("span", { className: "logo-name" }, "ANTHOFER"),
        React.createElement("span", { className: "logo-sub", style: { color: sub } }, tr(STR.common.brandSub, lang))
      )
    )
  );
}

const NAV = [
  ["home", "home"], ["boats", "boats"], ["sell", "sell"],
  ["detailing", "detailing"], ["about", "about"], ["contact", "contact"],
];

function Header() {
  const { lang, setLang, route, go } = useApp();
  const [scrolled, setScrolled] = useState(false);
  const [solid, setSolid] = useState(false);
  const [menu, setMenu] = useState(false);

  // home hero is dark → header starts transparent/light; other pages start solid
  const darkTop = route === "home";

  useEffect(() => {
    const onScroll = () => { setScrolled(window.scrollY > 24); setSolid(window.scrollY > 80); };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => { setMenu(false); }, [route]);

  const transparent = darkTop && !scrolled;
  const cls = ["site-header", scrolled ? "is-scrolled" : "", transparent ? "is-transparent" : "is-solid"].join(" ");

  return (
    React.createElement("header", { className: cls },
      React.createElement("div", { className: "container header-inner" },
        React.createElement("button", { className: "logo-btn", onClick: () => go("home"), "aria-label": "Home" },
          React.createElement(Logo, { light: transparent })
        ),
        React.createElement("nav", { className: "main-nav" },
          NAV.map(([key, r]) =>
            React.createElement("button", {
              key, onClick: () => go(r),
              className: "nav-link" + (route === r || (r === "boats" && route === "detail") ? " active" : ""),
            }, tr(STR.nav[key], lang))
          )
        ),
        React.createElement("div", { className: "header-actions" },
          React.createElement("div", { className: "lang-toggle", role: "group", "aria-label": lang === "de" ? "Sprache" : "Language" },
            ["de", "en"].map((l) =>
              React.createElement("button", {
                key: l, onClick: () => setLang(l),
                className: "lang-opt" + (lang === l ? " on" : ""),
              }, l.toUpperCase())
            )
          ),
          React.createElement("button", { className: "btn btn-primary header-cta", onClick: () => go("sell") },
            tr(STR.cta.valuation, lang)
          ),
          React.createElement("button", { className: "burger" + (menu ? " open" : ""), onClick: () => setMenu(m => !m), "aria-label": lang === "de" ? "Menü" : "Menu" },
            React.createElement("span"), React.createElement("span"), React.createElement("span")
          )
        )
      ),
      // mobile drawer
      React.createElement("div", { className: "mobile-drawer" + (menu ? " open" : "") },
        NAV.map(([key, r]) =>
          React.createElement("button", { key, onClick: () => { go(r); setMenu(false); }, className: "drawer-link" + (route === r ? " active" : "") },
            tr(STR.nav[key], lang)
          )
        ),
        React.createElement("button", { className: "btn btn-primary", style: { marginTop: 14 }, onClick: () => { go("sell"); setMenu(false); } },
          tr(STR.cta.valuation, lang)
        )
      )
    )
  );
}

function Footer() {
  const { lang, go } = useApp();
  return (
    React.createElement("footer", { className: "site-footer" },
      React.createElement("div", { className: "container footer-grid" },
        React.createElement("div", { className: "footer-brand" },
          React.createElement(Logo, { light: true }),
          React.createElement("p", { className: "footer-tag" },
            lang === "de"
              ? "Boot kaufen oder verkaufen — professionell begleitet. Vermittlung, Beratung und Aufbereitung aus einer Hand."
              : "Buy or sell a boat — professionally guided. Brokerage, advice and detailing from a single source."
          ),
          React.createElement("div", { className: "footer-social" },
            React.createElement("a", { href: "https://api.whatsapp.com/send?phone=491633347560", target: "_blank", rel: "noopener" }, "WhatsApp"),
            React.createElement("a", { href: "https://instagram.com/Anthoferyacht_bootsverkauf", target: "_blank", rel: "noopener" }, "Instagram")
          )
        ),
        React.createElement("div", { className: "footer-col" },
          React.createElement("h4", null, lang === "de" ? "Navigation" : "Navigate"),
          NAV.map(([key, r]) =>
            React.createElement("button", { key, className: "footer-link", onClick: () => go(r) }, tr(STR.nav[key], lang))
          )
        ),
        React.createElement("div", { className: "footer-col" },
          React.createElement("h4", null, tr(STR.nav.contact, lang)),
          React.createElement("address", { className: "footer-addr" },
            "Metzgerweg 37", React.createElement("br"), "93055 Regensburg", React.createElement("br"), React.createElement("br"),
            React.createElement("a", { href: "tel:+491633347560" }, "+49 163 3347560"), React.createElement("br"),
            React.createElement("a", { href: "mailto:anthoferyacht@gmail.com" }, "anthoferyacht@gmail.com")
          )
        ),
        React.createElement("div", { className: "footer-col" },
          React.createElement("h4", null, lang === "de" ? "Rechtliches" : "Legal"),
          React.createElement("button", { className: "footer-link", onClick: () => go("impressum") }, lang === "de" ? "Impressum" : "Legal Notice"),
          React.createElement("button", { className: "footer-link", onClick: () => go("agb") }, lang === "de" ? "AGB" : "Terms & Conditions"),
          React.createElement("button", { className: "footer-link", onClick: () => go("datenschutz") }, lang === "de" ? "Datenschutz" : "Privacy")
        )
      ),
      React.createElement("div", { className: "container footer-bottom" },
        React.createElement("span", null, "© 2026 Anthofer Yacht & Bootsvermittlung"),
        React.createElement("span", { className: "mono" }, lang === "de" ? "Regensburg · Bodensee · Adria" : "Regensburg · Lake Constance · Adriatic")
      )
    )
  );
}

// section heading
function SectionHead({ eyebrow, title, sub, center, light }) {
  return (
    React.createElement("div", { className: "section-head reveal" + (center ? " center" : ""), style: light ? { color: "var(--white)" } : null },
      eyebrow && React.createElement("span", { className: "eyebrow" + (center ? " center" : "") }, eyebrow),
      React.createElement("h2", { className: "section-title", style: light ? { color: "var(--white)" } : null }, title),
      sub && React.createElement("p", { className: "section-sub" + (center ? " center" : ""), style: light ? { color: "oklch(0.85 0.02 240)" } : null }, sub)
    )
  );
}

// boat spec chip row
function SpecMini({ b, lang }) {
  return (
    React.createElement("div", { className: "spec-mini" },
      React.createElement("span", null, b.year),
      React.createElement("span", null, (lang === "de" ? b.length.toString().replace(".", ",") : b.length.toString()) + " m"),
      React.createElement("span", null, b.power + (lang === "de" ? " PS" : " hp")),
      React.createElement("span", null, b.fuel === "Benzin" && lang === "en" ? "Petrol" : b.fuel)
    )
  );
}

// boat card
function BoatCard({ b }) {
  const { lang, go } = useApp();
  const onSale = b.oldPrice && b.oldPrice > b.price;
  return (
    React.createElement("article", { className: "boat-card reveal", onClick: () => go("detail", { id: b.id }), tabIndex: 0,
      onKeyDown: (e) => { if (e.key === "Enter") go("detail", { id: b.id }); } },
      React.createElement("div", { className: "boat-card-media" },
        React.createElement(Slot, { id: `boat-${b.id}-0`, src: b.images && b.images[0], label: tr([b.scenes, b.scenes_en], lang)[0], style: { width: "100%", height: "100%" } }),
        onSale && React.createElement("span", { className: "sale-badge" }, "Sale"),
        React.createElement("span", { className: "card-loc mono" }, b.location === "Auf Anfrage" && lang === "en" ? "On request" : b.location)
      ),
      React.createElement("div", { className: "boat-card-body" },
        React.createElement("div", { className: "boat-card-top" },
          React.createElement("h3", { className: "boat-name" }, b.brand, " ", React.createElement("span", null, b.model)),
        ),
        React.createElement(SpecMini, { b, lang }),
        React.createElement("p", { className: "boat-blurb" }, tr([b.blurb_de, b.blurb_en], lang)),
        React.createElement("div", { className: "boat-card-foot" },
          React.createElement("div", { className: "price-wrap" },
            onSale && React.createElement("span", { className: "price-old" }, fmtPrice(b.oldPrice, lang)),
            React.createElement("span", { className: "price" }, fmtPrice(b.price, lang))
          ),
          React.createElement("span", { className: "card-cta" }, tr(STR.cta.details, lang),
            React.createElement("span", { className: "arrow" }, "→"))
        )
      )
    )
  );
}

Object.assign(window, { AppCtx, useApp, useReveal, Slot, Logo, Header, Footer, SectionHead, BoatCard, SpecMini, NAV });