/* global React, STR, tr, fmtPrice, BOATS, SELL_PACKAGES, DETAIL_TIERS, useApp, Slot, SectionHead, BoatCard */ // ============================================================ // PAGE: Home // ============================================================ const { useEffect: useEffectH } = React; function Hero() { const { lang, go } = useApp(); return ( React.createElement("section", { className: "hero" }, React.createElement("div", { className: "hero-media" }, React.createElement("image-slot", { id: "hero-main", src: "images/hero-yacht.jpg", shape: "rect", placeholder: lang === "de" ? "Hero — Yacht in Fahrt bei Sonnenlicht" : "Hero — yacht under way in sunlight", style: { width: "100%", height: "100%" } }), React.createElement("div", { className: "hero-scrim" }) ), React.createElement("div", { className: "container hero-inner" }, React.createElement("span", { className: "eyebrow hero-eyebrow" }, lang === "de" ? "Regensburg · seit 2025" : "Regensburg · since 2025"), React.createElement("h1", { className: "hero-title" }, lang === "de" ? "Ihr Boot verdient den " : "Your boat deserves the ", React.createElement("em", null, lang === "de" ? "richtigen Käufer." : "right buyer.") ), React.createElement("p", { className: "hero-lead" }, lang === "de" ? "Boot kaufen oder verkaufen, professionell begleitet. Vermittlung, ehrliche Beratung und Aufbereitung — von einem, der Boote liebt." : "Buy or sell a boat, professionally guided. Brokerage, honest advice and detailing — from someone who loves boats." ), React.createElement("div", { className: "hero-actions" }, React.createElement("button", { className: "btn btn-light", onClick: () => go("boats") }, tr(STR.cta.browse, lang), React.createElement("span", { className: "arrow" }, "→")), React.createElement("button", { className: "btn btn-ghost hero-ghost", onClick: () => go("sell") }, tr(STR.cta.valuation, lang)) ), React.createElement("div", { className: "hero-stats" }, [["10", lang === "de" ? "vermittelte Boote" : "boats brokered"], [lang === "de" ? "3 Wo." : "3 wks", lang === "de" ? "Ø Verkaufszeit" : "avg. time to sell"], ["100%", lang === "de" ? "persönliche Betreuung" : "personal service"]].map(([n, l], i) => React.createElement("div", { className: "hero-stat", key: i }, React.createElement("span", { className: "hs-num" }, n), React.createElement("span", { className: "hs-lab" }, l)) ) ) ), React.createElement("button", { className: "hero-scroll", onClick: () => window.scrollTo({ top: window.innerHeight * 0.92, behavior: "smooth" }), "aria-label": lang === "de" ? "Nach unten scrollen" : "Scroll down" }, React.createElement("span", { className: "mono" }, lang === "de" ? "Entdecken" : "Discover"), React.createElement("span", { className: "hs-line" }) ) ) ); } function TrustBar() { const { lang } = useApp(); const items = lang === "de" ? ["Geprüfte Boote", "Transparente Historie", "Faire Marktbewertung", "Betreuung bis zum Abschluss", "Sichere Abwicklung"] : ["Inspected boats", "Transparent history", "Fair market valuation", "Support through closing", "Secure handling"]; return ( React.createElement("div", { className: "trust-bar" }, React.createElement("div", { className: "trust-track" }, [...items, ...items].map((t, i) => React.createElement("span", { className: "trust-item", key: i }, React.createElement("span", { className: "ti-dot" }), t) ) ) ) ); } function FeaturedBoats() { const { lang, go } = useApp(); const featured = BOATS.filter(b => b.featured).slice(0, 3); return ( React.createElement("section", { className: "section" }, React.createElement("div", { className: "container" }, React.createElement("div", { className: "head-row" }, React.createElement(SectionHead, { eyebrow: lang === "de" ? "Aktuelle Angebote" : "Current listings", title: lang === "de" ? "Ausgewählte Boote." : "Selected boats.", sub: lang === "de" ? "Handverlesene Motorboote und Yachten — geprüft, dokumentiert und bereit für die nächste Saison." : "Hand-picked motorboats and yachts — inspected, documented and ready for the next season.", }), React.createElement("button", { className: "btn btn-ghost head-row-btn", onClick: () => go("boats") }, tr(STR.cta.all, lang), React.createElement("span", { className: "arrow" }, "→")) ), React.createElement("div", { className: "boats-grid" }, featured.map(b => React.createElement(BoatCard, { key: b.id, b }))) ) ) ); } // Sell teaser — split layout function SellTeaser() { const { lang, go } = useApp(); return ( React.createElement("section", { className: "section sell-teaser" }, React.createElement("div", { className: "container split" }, React.createElement("div", { className: "split-media reveal" }, React.createElement(Slot, { id: "sell-teaser", src: "images/boats/airon-2.jpg", label: lang === "de" ? "Motoryacht vor der Küste" : "Motor yacht off the coast", style: { width: "100%", height: "100%", borderRadius: "var(--r-lg)" } }) ), React.createElement("div", { className: "split-body reveal" }, React.createElement("span", { className: "eyebrow" }, lang === "de" ? "Boot verkaufen" : "Sell your boat"), React.createElement("h2", { className: "split-title" }, lang === "de" ? "Verkaufen ohne Stress, Zeitverlust oder Risiko." : "Sell without stress, wasted time or risk."), React.createElement("p", { className: "split-lead" }, lang === "de" ? "Vom optimierten Inserat bis zur Vermittlung auf Provisionsbasis — Sie wählen, wie viel wir übernehmen. Drei klare Pakete, keine versteckten Kosten." : "From an optimised listing to a full commission-based sale — you choose how much we take on. Three clear packages, no hidden costs."), React.createElement("ul", { className: "pkg-mini" }, SELL_PACKAGES.map(p => React.createElement("li", { key: p.id }, React.createElement("span", { className: "pm-title" }, tr([p.title_de, p.title_en], lang)), React.createElement("span", { className: "pm-price" }, tr([p.price_de, p.price_en], lang))) )), React.createElement("button", { className: "btn btn-primary", onClick: () => go("sell") }, tr(STR.cta.valuation, lang), React.createElement("span", { className: "arrow" }, "→")) ) ) ) ); } // Process steps function Process() { const { lang } = useApp(); const steps = lang === "de" ? [["01", "Kostenlose Bewertung", "Sie schildern Ihr Boot, wir liefern eine ehrliche, marktgerechte Einschätzung."], ["02", "Professionelle Präsentation", "Verkaufstext, Fotoauswahl und Inserat auf den richtigen Plattformen."], ["03", "Käufer & Verhandlung", "Wir filtern Anfragen, koordinieren Besichtigungen und verhandeln für Sie."], ["04", "Sicherer Abschluss", "Vertrag, Übergabe und Abwicklung — begleitet bis zum letzten Handschlag."]] : [["01", "Free valuation", "You describe your boat, we give an honest, market-based assessment."], ["02", "Professional presentation", "Sales copy, photo selection and a listing on the right platforms."], ["03", "Buyers & negotiation", "We filter enquiries, arrange viewings and negotiate on your behalf."], ["04", "Secure closing", "Contract, handover and paperwork — guided to the final handshake."]]; return ( React.createElement("section", { className: "section process-sec" }, React.createElement("div", { className: "container" }, React.createElement(SectionHead, { center: true, eyebrow: lang === "de" ? "So arbeiten wir" : "How it works", title: lang === "de" ? "Vier Schritte zum Verkauf." : "Four steps to a sale." }), React.createElement("div", { className: "process-grid" }, steps.map(([n, t, d], i) => React.createElement("div", { className: "process-step reveal", key: i, style: { transitionDelay: `${i * 70}ms` } }, React.createElement("span", { className: "ps-num" }, n), React.createElement("h3", { className: "ps-title" }, t), React.createElement("p", { className: "ps-desc" }, d)) )) ) ) ); } // Detailing teaser band (dark) function DetailingTeaser() { const { lang, go } = useApp(); return ( React.createElement("section", { className: "detail-band" }, React.createElement("div", { className: "detail-band-media" }, React.createElement("image-slot", { id: "detail-band", src: "images/boats/azimut-3.jpg", shape: "rect", placeholder: lang === "de" ? "Glänzendes, frisch poliertes Bootsdeck" : "Glossy, freshly polished boat deck", style: { width: "100%", height: "100%" } }), React.createElement("div", { className: "detail-band-scrim" }) ), React.createElement("div", { className: "container detail-band-inner reveal" }, React.createElement("span", { className: "eyebrow", style: { color: "var(--brass)" } }, lang === "de" ? "Bootsaufbereitung" : "Boat detailing"), React.createElement("h2", { className: "detail-band-title" }, lang === "de" ? "Werterhalt, Schutz und perfekter Glanz." : "Value retention, protection and perfect shine."), React.createElement("p", { className: "detail-band-lead" }, lang === "de" ? "Von der laufenden Pflege bis zur kompletten Verkaufsaufbereitung — damit Ihr Boot jederzeit im besten Zustand ist." : "From regular upkeep to full sale preparation — so your boat is always in its best condition."), React.createElement("div", { className: "detail-band-tiers" }, DETAIL_TIERS.map(t => React.createElement("div", { className: "dbt", key: t.id }, React.createElement("span", { className: "dbt-name" }, tr([t.title_de, t.title_en], lang)), React.createElement("span", { className: "dbt-price" }, tr([t.price_de, t.price_en], lang))) )), React.createElement("button", { className: "btn btn-light", onClick: () => go("detailing") }, lang === "de" ? "Pakete ansehen" : "View packages", React.createElement("span", { className: "arrow" }, "→")) ) ) ); } function CTABand() { const { lang, go } = useApp(); return ( React.createElement("section", { className: "cta-band" }, React.createElement("div", { className: "container cta-inner reveal" }, React.createElement("h2", { className: "cta-title" }, lang === "de" ? "Reden wir über Ihr Boot." : "Let's talk about your boat."), React.createElement("p", { className: "cta-lead" }, lang === "de" ? "Ob Kauf, Verkauf oder Aufbereitung — eine kurze Nachricht genügt für den ersten Schritt." : "Whether buying, selling or detailing — a short message is all it takes to start."), React.createElement("div", { className: "hero-actions", style: { justifyContent: "center" } }, React.createElement("button", { className: "btn btn-brass", onClick: () => go("contact") }, tr(STR.cta.contact, lang)), React.createElement("a", { className: "btn btn-ghost cta-ghost", href: "https://api.whatsapp.com/send?phone=491633347560", target: "_blank", rel: "noopener" }, "WhatsApp")) ) ) ); } function HomePage() { return ( React.createElement(React.Fragment, null, React.createElement(Hero), React.createElement(TrustBar), React.createElement(FeaturedBoats), React.createElement(SellTeaser), React.createElement(Process), React.createElement(DetailingTeaser), React.createElement(CTABand) ) ); } Object.assign(window, { HomePage });