/* global React, STR, tr, SELL_PACKAGES, useApp, Slot, SectionHead */
// ============================================================
// PAGE: Sell your boat (packages + valuation form)
// ============================================================
const { useState: useStateS } = React;

function ValuationForm() {
  const { lang } = useApp();
  const [f, setF] = useStateS({ name: "", email: "", phone: "", brand: "", year: "", length: "", price: "", msg: "", pkg: "komplett" });
  const [err, setErr] = useStateS({});
  const [sent, setSent] = useStateS(false);
  const [waUrl, setWaUrl] = useStateS("");
  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;
    if (!f.brand.trim()) er.brand = 1;
    setErr(er);
    if (Object.keys(er).length !== 0) return;
    const pkg = SELL_PACKAGES.find(p => p.id === f.pkg);
    const lines = (lang === "de"
      ? ["Bootsverkauf-Anfrage über die Website:",
         `Name: ${f.name.trim()}`,
         `E-Mail: ${f.email.trim()}`,
         f.phone.trim() && `Telefon: ${f.phone.trim()}`,
         `Boot: ${f.brand.trim()}`,
         f.year.trim() && `Baujahr: ${f.year.trim()}`,
         f.length.trim() && `Länge: ${f.length.trim()} m`,
         f.price.trim() && `Preisvorstellung: ${f.price.trim()}`,
         pkg && `Gewünschtes Paket: ${pkg.title_de}`,
         f.msg.trim() && `Nachricht: ${f.msg.trim()}`]
      : ["Boat sale enquiry via the website:",
         `Name: ${f.name.trim()}`,
         `Email: ${f.email.trim()}`,
         f.phone.trim() && `Phone: ${f.phone.trim()}`,
         `Boat: ${f.brand.trim()}`,
         f.year.trim() && `Year: ${f.year.trim()}`,
         f.length.trim() && `Length: ${f.length.trim()} m`,
         f.price.trim() && `Asking price: ${f.price.trim()}`,
         pkg && `Preferred package: ${pkg.title_en}`,
         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);
  };

  if (sent) return (
    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 Anfrage zu ${f.brand || "Ihrem Boot"} geöffnet — bitte senden Sie die Nachricht dort noch ab. Wir melden uns innerhalb von 24 Stunden mit einer ehrlichen Einschätzung.`
        : `WhatsApp has opened with your enquiry about ${f.brand || "your boat"} — please hit send there. We'll get back to you within 24 hours with an honest assessment.`),
      React.createElement("a", { className: "btn btn-primary", href: waUrl, target: "_blank", rel: "noopener" },
        lang === "de" ? "WhatsApp erneut öffnen" : "Open WhatsApp again"),
      React.createElement("button", { className: "btn btn-ghost", onClick: () => { setSent(false); setWaUrl(""); setF({ name: "", email: "", phone: "", brand: "", year: "", length: "", price: "", msg: "", pkg: "komplett" }); } },
        lang === "de" ? "Weitere Anfrage" : "Another request")
    )
  );

  const L = lang === "de"
    ? { name: "Ihr Name", email: "E-Mail", phone: "Telefon (optional)", brand: "Marke & Modell", year: "Baujahr", length: "Länge (m)", price: "Preisvorstellung (optional)", msg: "Nachricht (optional)", pkg: "Gewünschtes Paket", req: "Pflichtfeld" }
    : { name: "Your name", email: "Email", phone: "Phone (optional)", brand: "Brand & model", year: "Year", length: "Length (m)", price: "Asking price (optional)", msg: "Message (optional)", pkg: "Preferred package", req: "Required" };

  return (
    React.createElement("form", { className: "val-form", onSubmit: submit, noValidate: true },
      React.createElement("div", { className: "vf-row" },
        React.createElement(Field, { label: L.name, val: f.name, on: set("name"), err: err.name, errMsg: L.req }),
        React.createElement(Field, { label: L.email, type: "email", val: f.email, on: set("email"), err: err.email, errMsg: L.req })
      ),
      React.createElement("div", { className: "vf-row" },
        React.createElement(Field, { label: L.phone, val: f.phone, on: set("phone") }),
        React.createElement(Field, { label: L.brand, val: f.brand, on: set("brand"), err: err.brand, errMsg: L.req })
      ),
      React.createElement("div", { className: "vf-row vf-row-3" },
        React.createElement(Field, { label: L.year, val: f.year, on: set("year") }),
        React.createElement(Field, { label: L.length, val: f.length, on: set("length") }),
        React.createElement(Field, { label: L.price, val: f.price, on: set("price") })
      ),
      React.createElement("div", { className: "vf-field" },
        React.createElement("label", null, L.pkg),
        React.createElement("div", { className: "pkg-radios" }, SELL_PACKAGES.map(p =>
          React.createElement("button", { type: "button", key: p.id, className: "pkg-radio" + (f.pkg === p.id ? " on" : ""), onClick: () => setF(s => ({ ...s, pkg: p.id })) },
            React.createElement("span", { className: "pr-title" }, tr([p.title_de, p.title_en], lang)),
            React.createElement("span", { className: "pr-price" }, tr([p.price_de, p.price_en], lang)))
        ))
      ),
      React.createElement("div", { className: "vf-field" },
        React.createElement("label", null, L.msg),
        React.createElement("textarea", { rows: 4, 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 Field({ label, val, on, err, errMsg, type = "text" }) {
  const id = "field-" + label.toLowerCase().replace(/[^a-zäöüß0-9]+/g, "-").replace(/^-|-$/g, "");
  return (
    React.createElement("div", { className: "vf-field" + (err ? " has-err" : "") },
      React.createElement("label", { htmlFor: id }, label),
      React.createElement("input", { id, type, value: val, onChange: on }),
      err && React.createElement("span", { className: "vf-err" }, errMsg)
    )
  );
}

function SellPage() {
  const { lang } = 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" ? "Boot verkaufen" : "Sell your boat"),
          React.createElement("h1", { className: "page-hero-title" }, lang === "de" ? "Verkaufen ohne Stress." : "Sell without stress."),
          React.createElement("p", { className: "page-hero-lead" }, lang === "de"
            ? "Wenig Zeit, wenig Anfragen oder einfach unsicher beim Preis? Wir übernehmen so viel, wie Sie möchten — von der Optimierung bis zum kompletten Verkauf."
            : "Short on time, few enquiries or unsure about the price? We take on as much as you like — from optimisation to the complete sale.")
        )
      ),
      // packages
      React.createElement("section", { className: "section pkg-sec" },
        React.createElement("div", { className: "container" },
          React.createElement(SectionHead, { center: true,
            eyebrow: lang === "de" ? "Drei Pakete" : "Three packages",
            title: lang === "de" ? "Sie wählen, wir liefern." : "You choose, we deliver.",
            sub: lang === "de" ? "Klare Leistungen, transparente Preise — kein Kleingedrucktes." : "Clear deliverables, transparent prices — no fine print." }),
          React.createElement("div", { className: "pkg-grid" }, SELL_PACKAGES.map(p =>
            React.createElement("div", { className: "pkg-card reveal" + (p.featured ? " featured" : ""), key: p.id },
              p.featured && React.createElement("span", { className: "pkg-flag" }, lang === "de" ? "Beliebt" : "Popular"),
              React.createElement("span", { className: "pkg-tag" }, tr([p.tag_de, p.tag_en], lang)),
              React.createElement("h3", { className: "pkg-title" }, tr([p.title_de, p.title_en], lang)),
              React.createElement("div", { className: "pkg-price" },
                React.createElement("span", { className: "pp-amount" }, tr([p.price_de, p.price_en], lang)),
                React.createElement("span", { className: "pp-note" }, tr([p.note_de, p.note_en], lang))),
              React.createElement("ul", { className: "pkg-feats" }, tr([p.feats_de, p.feats_en], lang).map((ft, i) =>
                React.createElement("li", { key: i }, React.createElement("span", { className: "pf-tick" }, "✓"), ft)))
            )
          ))
        )
      ),
      // form
      React.createElement("section", { className: "section form-sec" },
        React.createElement("div", { className: "container form-split" },
          React.createElement("div", { className: "form-intro" },
            React.createElement("span", { className: "eyebrow" }, lang === "de" ? "Kostenlose Bewertung" : "Free valuation"),
            React.createElement("h2", { className: "form-title" }, lang === "de" ? "Was ist Ihr Boot wert?" : "What's your boat worth?"),
            React.createElement("p", { className: "form-lead" }, lang === "de"
              ? "Schildern Sie uns Ihr Boot — Sie erhalten innerhalb von 24 Stunden eine ehrliche, marktgerechte Einschätzung. Unverbindlich und kostenlos."
              : "Tell us about your boat — you'll receive an honest, market-based assessment within 24 hours. No obligation, free of charge."),
            React.createElement("div", { className: "form-media" },
              React.createElement(Slot, { id: "sell-form-img", src: "images/boat-lake.jpg", label: lang === "de" ? "Sportboot am Wasser" : "Sport boat on the water", style: { width: "100%", height: "100%", borderRadius: "var(--r-lg)" } }))
          ),
          React.createElement("div", { className: "form-card" }, React.createElement(ValuationForm))
        )
      )
    )
  );
}

Object.assign(window, { SellPage });