/* global React, STR, tr, DETAIL_TIERS, useApp, Slot, SectionHead */ // ============================================================ // PAGES: Detailing, About, Contact // ============================================================ const { useState: useStateM } = React; // ---------- DETAILING ---------- function DetailingPage() { const { lang, go } = useApp(); return ( React.createElement(React.Fragment, null, React.createElement("section", { className: "page-hero" }, React.createElement("div", { className: "container" }, React.createElement("span", { className: "eyebrow" }, lang === "de" ? "Bootsaufbereitung" : "Boat detailing"), React.createElement("h1", { className: "page-hero-title" }, lang === "de" ? "Perfekter Glanz, echter Werterhalt." : "Perfect shine, real value retention."), React.createElement("p", { className: "page-hero-lead" }, lang === "de" ? "Professionelle Aufbereitung — von der laufenden Pflege bis zur kompletten Verkaufsvorbereitung. Damit Ihr Boot jederzeit im besten Zustand ist." : "Professional detailing — from regular upkeep to complete sale preparation. So your boat is always in its best condition.") ) ), React.createElement("section", { className: "section pkg-sec" }, React.createElement("div", { className: "container" }, React.createElement("div", { className: "pkg-grid" }, DETAIL_TIERS.map(t => React.createElement("div", { className: "pkg-card detail-card reveal" + (t.featured ? " featured" : ""), key: t.id }, t.featured && React.createElement("span", { className: "pkg-flag" }, lang === "de" ? "Empfohlen" : "Recommended"), React.createElement("div", { className: "detail-card-media" }, React.createElement(Slot, { id: `detail-${t.id}`, src: { basic: "images/boats/performance-2.jpg", premium: "images/boats/azimut-5.jpg", refit: "images/boats/airon-5.jpg" }[t.id], label: tr([t.title_de, t.title_en], lang), style: { width: "100%", height: "100%" } })), React.createElement("div", { className: "detail-card-body" }, React.createElement("h3", { className: "pkg-title" }, tr([t.title_de, t.title_en], lang)), React.createElement("div", { className: "pkg-price" }, React.createElement("span", { className: "pp-amount" }, tr([t.price_de, t.price_en], lang))), React.createElement("p", { className: "detail-card-sub" }, tr([t.sub_de, t.sub_en], lang)), React.createElement("ul", { className: "pkg-feats" }, tr([t.feats_de, t.feats_en], lang).map((ft, i) => React.createElement("li", { key: i }, React.createElement("span", { className: "pf-tick" }, "✓"), ft))), React.createElement("button", { className: "btn btn-ghost", style: { marginTop: "auto" }, onClick: () => go("contact") }, tr(STR.cta.contact, lang))) ) )) ) ), // Vorher/Nachher-Sektion entfernt, bis echte Vorher-/Nachher-Fotos einer // Aufbereitung vorliegen — Platzhalter bzw. Fremdfotos wären hier irreführend. ) ); } // ---------- ABOUT ---------- function AboutPage() { const { lang, go } = useApp(); const stats = lang === "de" ? [["10", "vermittelte Boote"], ["2025", "gegründet"], ["100%", "persönliche Betreuung"]] : [["10", "boats brokered"], ["2025", "founded"], ["100%", "personal service"]]; return ( React.createElement(React.Fragment, null, React.createElement("section", { className: "section about-hero" }, React.createElement("div", { className: "container about-split" }, React.createElement("div", { className: "about-portrait reveal" }, React.createElement(Slot, { id: "about-portrait", src: "images/portrait-joel.jpg", label: lang === "de" ? "Porträt — Joel Anthofer" : "Portrait — Joel Anthofer", style: { width: "100%", height: "100%", borderRadius: "var(--r-lg)" } })), React.createElement("div", { className: "about-body reveal" }, React.createElement("span", { className: "eyebrow" }, lang === "de" ? "Über mich" : "About"), React.createElement("h1", { className: "about-title" }, "Joel Anthofer"), React.createElement("p", { className: "about-lead" }, lang === "de" ? "Boote sind für mich mehr als ein Geschäft — sie sind Leidenschaft. Aus dieser Begeisterung ist Anthofer Yacht & Bootsvermittlung entstanden." : "Boats are more than a business to me — they're a passion. Anthofer Yacht & Boat Brokerage grew out of that enthusiasm."), React.createElement("p", { className: "about-text" }, lang === "de" ? "Ich begleite Eigentümer und Käufer persönlich durch den gesamten Prozess: ehrliche Bewertung, professionelle Präsentation, sichere Abwicklung. Kein Callcenter, kein Verkaufsdruck — sondern ein Ansprechpartner, der Boote versteht und für jedes Schiff den passenden neuen Eigner findet." : "I personally guide owners and buyers through the whole process: honest valuation, professional presentation, secure handling. No call centre, no sales pressure — just one contact who understands boats and finds the right new owner for every vessel."), React.createElement("div", { className: "about-stats" }, stats.map(([n, l], i) => React.createElement("div", { className: "about-stat", key: i }, React.createElement("span", { className: "as-num" }, n), React.createElement("span", { className: "as-lab" }, l)))), React.createElement("div", { className: "hero-actions", style: { marginTop: 32 } }, React.createElement("button", { className: "btn btn-primary", onClick: () => go("contact") }, tr(STR.cta.contact, lang)), React.createElement("button", { className: "btn btn-ghost", onClick: () => go("boats") }, tr(STR.cta.browse, lang))) ) ) ), React.createElement("section", { className: "values-band" }, React.createElement("div", { className: "container values-grid" }, (lang === "de" ? [["Ehrlichkeit", "Realistische Preise und transparente Boots-Historie — keine Überraschungen."], ["Marktkenntnis", "Fundiertes Gespür für faire Preise und ein wachsendes Netzwerk an Käufern und Eignern."], ["Persönlich", "Ein Ansprechpartner von der ersten Nachricht bis zum letzten Handschlag."]] : [["Honesty", "Realistic prices and transparent boat history — no surprises."], ["Market insight", "A solid sense for fair prices and a growing network of buyers and owners."], ["Personal", "One contact from the first message to the final handshake."]]).map(([t, d], i) => React.createElement("div", { className: "value-item reveal", key: i, style: { transitionDelay: `${i * 80}ms` } }, React.createElement("span", { className: "vi-num mono" }, "0" + (i + 1)), React.createElement("h3", null, t), React.createElement("p", null, d))) ) ) ) ); } // ---------- CONTACT ---------- function ContactPage() { const { lang } = useApp(); const [f, setF] = useStateM({ name: "", email: "", msg: "" }); const [err, setErr] = useStateM({}); const [sent, setSent] = useStateM(false); const [waUrl, setWaUrl] = useStateM(""); const set = (k) => (e) => setF(s => ({ ...s, [k]: e.target.value })); const submit = (e) => { e.preventDefault(); const er = {}; if (!f.name.trim()) er.name = 1; if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.email)) er.email = 1; setErr(er); if (Object.keys(er).length !== 0) return; const lines = (lang === "de" ? ["Kontaktanfrage über die Website:", `Name: ${f.name.trim()}`, `E-Mail: ${f.email.trim()}`, f.msg.trim() && `Nachricht: ${f.msg.trim()}`] : ["Contact enquiry via the website:", `Name: ${f.name.trim()}`, `Email: ${f.email.trim()}`, f.msg.trim() && `Message: ${f.msg.trim()}`] ).filter(Boolean); const url = `https://api.whatsapp.com/send?phone=491633347560&text=${encodeURIComponent(lines.join("\n"))}`; setWaUrl(url); window.open(url, "_blank", "noopener"); setSent(true); }; return ( React.createElement(React.Fragment, null, React.createElement("section", { className: "page-hero" }, React.createElement("div", { className: "container" }, React.createElement("span", { className: "eyebrow" }, tr(STR.nav.contact, lang)), React.createElement("h1", { className: "page-hero-title" }, lang === "de" ? "Sprechen wir." : "Let's talk."), React.createElement("p", { className: "page-hero-lead" }, lang === "de" ? "Eine kurze Nachricht genügt. Am schnellsten erreichen Sie mich per WhatsApp oder Telefon." : "A short message is all it takes. The fastest way to reach me is WhatsApp or phone.") ) ), React.createElement("section", { className: "section contact-sec" }, React.createElement("div", { className: "container contact-split" }, React.createElement("div", { className: "contact-info" }, React.createElement(ContactLine, { k: lang === "de" ? "Telefon" : "Phone", v: "+49 163 3347560", href: "tel:+491633347560" }), React.createElement(ContactLine, { k: lang === "de" ? "E-Mail" : "Email", v: "anthoferyacht@gmail.com", href: "mailto:anthoferyacht@gmail.com" }), React.createElement(ContactLine, { k: "WhatsApp", v: "+49 163 3347560", href: "https://api.whatsapp.com/send?phone=491633347560" }), React.createElement(ContactLine, { k: lang === "de" ? "Adresse" : "Address", v: "Metzgerweg 37, 93055 Regensburg" }), React.createElement(ContactLine, { k: "Instagram", v: "@Anthoferyacht_bootsverkauf", href: "https://instagram.com/Anthoferyacht_bootsverkauf" }), React.createElement("div", { className: "contact-map" }, React.createElement(Slot, { id: "contact-map", src: "images/map-regensburg.jpg", label: lang === "de" ? "Metzgerweg 37, 93055 Regensburg" : "Metzgerweg 37, 93055 Regensburg, Germany", style: { width: "100%", height: "100%" } })) ), React.createElement("div", { className: "form-card" }, sent ? React.createElement("div", { className: "form-success" }, React.createElement("div", { className: "fs-check" }, "✓"), React.createElement("h3", null, lang === "de" ? "Fast geschafft!" : "Almost done!"), React.createElement("p", null, lang === "de" ? "WhatsApp hat sich mit Ihrer Nachricht geöffnet — bitte senden Sie sie dort noch ab. Ich melde mich schnellstmöglich bei Ihnen zurück." : "WhatsApp has opened with your message — please hit send there. I'll get back to you as soon as possible."), React.createElement("a", { className: "btn btn-primary", href: waUrl, target: "_blank", rel: "noopener" }, lang === "de" ? "WhatsApp erneut öffnen" : "Open WhatsApp again")) : React.createElement("form", { className: "val-form", onSubmit: submit, noValidate: true }, React.createElement(Field, { label: lang === "de" ? "Ihr Name" : "Your name", val: f.name, on: set("name"), err: err.name, errMsg: lang === "de" ? "Pflichtfeld" : "Required" }), React.createElement(Field, { label: lang === "de" ? "E-Mail" : "Email", type: "email", val: f.email, on: set("email"), err: err.email, errMsg: lang === "de" ? "Pflichtfeld" : "Required" }), React.createElement("div", { className: "vf-field" }, React.createElement("label", null, lang === "de" ? "Nachricht" : "Message"), React.createElement("textarea", { rows: 5, value: f.msg, onChange: set("msg") })), React.createElement("button", { className: "btn btn-primary vf-submit", type: "submit" }, tr(STR.cta.send, lang), React.createElement("span", { className: "arrow" }, "→"))) ) ) ) ) ); } function ContactLine({ k, v, href }) { const inner = React.createElement(React.Fragment, null, React.createElement("span", { className: "cl-key mono" }, k), React.createElement("span", { className: "cl-val" }, v)); return href ? React.createElement("a", { className: "contact-line", href, target: href.startsWith("http") ? "_blank" : undefined, rel: "noopener" }, inner) : React.createElement("div", { className: "contact-line" }, inner); } Object.assign(window, { DetailingPage, AboutPage, ContactPage });