/* global React, STR, tr, fmtPrice, BOATS, useApp, Slot, BoatCard */
// ============================================================
// PAGE: Boat detail (gallery + specs + enquiry)
// ============================================================
const { useState: useStateD } = React;

function BoatDetail({ id }) {
  const { lang, go } = useApp();
  const b = BOATS.find(x => x.id === id) || BOATS[0];
  const [active, setActive] = useStateD(0);
  const [lightbox, setLightbox] = useStateD(false);
  const onSale = b.oldPrice && b.oldPrice > b.price;

  const dec = (n) => lang === "de" ? n.toString().replace(".", ",") : n.toString();
  const scenes = tr([b.scenes, b.scenes_en], lang);
  const specs = [
    [STR.common.year, b.year],
    [STR.common.length, dec(b.length) + " m"],
    b.beam != null && [STR.common.beam, dec(b.beam) + " m"],
    [STR.common.power, b.power + (lang === "de" ? " PS" : " hp")],
    [STR.common.fuel, b.fuel === "Benzin" && lang === "en" ? "Petrol" : b.fuel],
    b.hours != null && [STR.common.hours, b.hours + " h"],
    [STR.common.cabins, b.cabins || (lang === "de" ? "Offen" : "Open")],
    [STR.common.location, b.location === "Auf Anfrage" && lang === "en" ? "On request" : b.location],
  ].filter(Boolean);

  const related = BOATS.filter(x => x.id !== b.id && x.brand === b.brand).concat(BOATS.filter(x => x.id !== b.id && x.brand !== b.brand)).slice(0, 3);

  return (
    React.createElement(React.Fragment, null,
      React.createElement("div", { className: "detail-top container" },
        React.createElement("button", { className: "breadcrumb", onClick: () => go("boats") }, "← ", lang === "de" ? "Alle Boote" : "All boats")
      ),
      React.createElement("section", { className: "container detail-main" },
        // gallery
        React.createElement("div", { className: "gallery" },
          React.createElement("div", { className: "gallery-main", onClick: () => setLightbox(true) },
            React.createElement(Slot, { id: `boat-${b.id}-${active}`, src: b.images && b.images[active], label: scenes[active], style: { width: "100%", height: "100%" } }),
            onSale && React.createElement("span", { className: "sale-badge" }, "Sale"),
            React.createElement("span", { className: "gallery-zoom mono" }, "⤢ ", lang === "de" ? "Vergrößern" : "Zoom")
          ),
          React.createElement("div", { className: "gallery-thumbs" }, b.scenes.map((s, i) =>
            React.createElement("button", { key: i, className: "gthumb" + (i === active ? " on" : ""), onClick: () => setActive(i) },
              React.createElement(Slot, { id: `boat-${b.id}-${i}`, src: b.images && b.images[i], label: "", style: { width: "100%", height: "100%" } }),
              React.createElement("span", { className: "gthumb-num mono" }, String(i + 1).padStart(2, "0")))
          ))
        ),
        // info
        React.createElement("div", { className: "detail-info" },
          React.createElement("span", { className: "eyebrow" }, b.brand, " · ", b.year),
          React.createElement("h1", { className: "detail-title" }, b.brand, " ", b.model),
          React.createElement("p", { className: "detail-blurb" }, tr([b.blurb_de, b.blurb_en], lang)),
          React.createElement("div", { className: "detail-price" },
            onSale && React.createElement("span", { className: "price-old" }, fmtPrice(b.oldPrice, lang)),
            React.createElement("span", { className: "price" }, fmtPrice(b.price, lang)),
            React.createElement("span", { className: "price-note mono" }, lang === "de" ? "inkl. MwSt." : "incl. VAT")
          ),
          React.createElement("dl", { className: "spec-grid" }, specs.map(([k, v], i) =>
            React.createElement("div", { className: "spec-row", key: i },
              React.createElement("dt", null, tr(k, lang)),
              React.createElement("dd", null, v))
          )),
          React.createElement("div", { className: "detail-actions" },
            React.createElement("button", { className: "btn btn-primary", onClick: () => go("contact") }, tr(STR.cta.enquire, lang), React.createElement("span", { className: "arrow" }, "→")),
            React.createElement("a", { className: "btn btn-ghost", href: "https://api.whatsapp.com/send?phone=491633347560", target: "_blank", rel: "noopener" }, "WhatsApp")
          ),
          React.createElement("div", { className: "detail-assure" },
            (lang === "de"
              ? ["Geprüfter Zustand", "Dokumentierte Historie", "Persönliche Besichtigung möglich"]
              : ["Inspected condition", "Documented history", "Personal viewing available"]).map((t, i) =>
              React.createElement("span", { key: i, className: "assure-item" }, "✓ ", t))
          )
        )
      ),
      // description + equipment
      (b.desc_de || b.feats_de) && React.createElement("section", { className: "section detail-desc-sec" },
        React.createElement("div", { className: "container detail-desc-grid" },
          b.desc_de && React.createElement("div", { className: "detail-desc-text reveal" },
            React.createElement("h2", { className: "detail-desc-h" }, lang === "de" ? "Beschreibung" : "Description"),
            tr([b.desc_de, b.desc_en], lang).split("\n\n").map((p, i) =>
              React.createElement("p", { className: "detail-desc-p", key: i }, p))
          ),
          b.feats_de && React.createElement("div", { className: "detail-feats reveal" },
            React.createElement("h3", { className: "detail-feats-h" }, lang === "de" ? "Ausstattung & Highlights" : "Equipment & highlights"),
            React.createElement("ul", { className: "detail-feats-list" }, tr([b.feats_de, b.feats_en], lang).map((f, i) =>
              React.createElement("li", { key: i }, React.createElement("span", { className: "df-tick" }, "✓"), f)))
          )
        )
      ),
      // related
      React.createElement("section", { className: "section" },
        React.createElement("div", { className: "container" },
          React.createElement("h2", { className: "related-title" }, lang === "de" ? "Das könnte Sie auch interessieren" : "You might also like"),
          React.createElement("div", { className: "boats-grid", style: { marginTop: 32 } }, related.map(rb => React.createElement(BoatCard, { key: rb.id, b: rb })))
        )
      ),
      lightbox && React.createElement("div", { className: "lightbox", onClick: () => setLightbox(false) },
        React.createElement("button", { className: "lightbox-close", "aria-label": lang === "de" ? "Schließen" : "Close", onClick: () => setLightbox(false) }, "✕"),
        React.createElement("div", { className: "lightbox-stage", onClick: e => e.stopPropagation() },
          React.createElement(Slot, { id: `boat-${b.id}-${active}`, src: b.images && b.images[active], label: scenes[active], style: { width: "100%", height: "100%" } }),
          React.createElement("div", { className: "lightbox-nav" },
            React.createElement("button", { "aria-label": lang === "de" ? "Vorheriges Bild" : "Previous image", onClick: () => setActive(a => (a - 1 + b.scenes.length) % b.scenes.length) }, "←"),
            React.createElement("span", { className: "mono" }, active + 1, " / ", b.scenes.length),
            React.createElement("button", { "aria-label": lang === "de" ? "Nächstes Bild" : "Next image", onClick: () => setActive(a => (a + 1) % b.scenes.length) }, "→"))
        )
      )
    )
  );
}

Object.assign(window, { BoatDetail });