const { Button, Input, Select, Checkbox, Badge, Toast } = window.StrandvGen18DesignSystem_6e17b4;

const CONTACT_EMAIL = "stefan.berg@gmail.com";

function PricingSection({ t }) {
  return (
    <section id="villkor" style={{ background: "var(--surface-page)" }}>
      <div className="ms-split ms-section" style={{ maxWidth: "var(--content-max)", margin: "0 auto", display: "grid", gap: 48, alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <SectionHeading eyebrow={t.priceEyebrow} title={t.priceTitle} />
          <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-card)", overflow: "hidden" }}>
            {t.priceRows.map(([l, p], i) => (
              <div key={l} style={{ display: "flex", justifyContent: "space-between", gap: 16, padding: "14px 20px", borderTop: i ? "1px solid var(--border-default)" : "none", font: "var(--type-body)", fontFamily: "var(--font-body)" }}>
                <span style={{ color: "var(--text-body)" }}>{l}</span>
                <span style={{ color: "var(--text-heading)", fontWeight: 700, whiteSpace: "nowrap", textAlign: "right" }}>{p}</span>
              </div>
            ))}
          </div>
          <p style={{ margin: 0, font: "var(--type-small)", fontFamily: "var(--font-body)", color: "var(--text-muted)" }}>{t.priceNote}</p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <SectionHeading eyebrow={t.availEyebrow} title={t.availTitle} />
          <p style={{ margin: 0, font: "var(--type-body)", fontFamily: "var(--font-body)", color: "var(--text-body)" }}>{t.availBody}</p>
          <div style={{ display: "flex", flexDirection: "column", gap: 0, background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-card)", overflow: "hidden" }}>
            {t.availPoints.map((p, i) => (
              <div key={p} style={{ display: "flex", alignItems: "center", gap: 12, padding: "14px 20px", borderTop: i ? "1px solid var(--border-default)" : "none" }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--status-success)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flex: "none" }}><polyline points="20 6 9 17 4 12"></polyline></svg>
                <span style={{ font: "var(--type-small)", fontFamily: "var(--font-body)", color: "var(--text-body)" }}>{p}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function BookingSection({ t }) {
  const [form, setForm] = React.useState({ name: "", email: "", moveIn: 0, guests: 1, pets: false, msg: "" });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value });
  const setIdx = (k, opts) => (e) => setForm({ ...form, [k]: opts.indexOf(e.target.value) });

  const submit = async () => {
    const errs = {};
    if (!form.name.trim()) errs.name = true;
    if (!/.+@.+\..+/.test(form.email)) errs.email = true;
    setErrors(errs);
    if (Object.keys(errs).length) return;
    setSending(true);
    try {
      const resp = await fetch("/api/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: form.name, email: form.email,
          moveIn: t.moveInOpts[form.moveIn], household: t.guestsOpts[form.guests],
          pets: form.pets, msg: form.msg,
        }),
      });
      if (!resp.ok) throw new Error("send failed");
      setSent("server");
    } catch (e) {
      // Fallback: open a pre-filled email (works without the Pages Function)
      const subject = `${t.bookEyebrow} — Strandvägen 18: ${form.name}`;
      const body = [
        `${t.fName}: ${form.name}`,
        `${t.fEmail}: ${form.email}`,
        `${t.fMoveIn}: ${t.moveInOpts[form.moveIn]}`,
        `${t.fGuests}: ${t.guestsOpts[form.guests]}`,
        `${t.fPets}: ${form.pets ? "Ja / Yes" : "Nej / No"}`,
        "",
        form.msg,
      ].join("\n");
      window.location.href = `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
      setSent("mailto");
    } finally {
      setSending(false);
    }
  };

  return (
    <section id="kontakt" style={{ background: "var(--surface-card)", borderTop: "1px solid var(--border-default)" }}>
      <div className="ms-section" style={{ maxWidth: 720, margin: "0 auto", display: "flex", flexDirection: "column", gap: 28 }}>
        <div style={{ textAlign: "center", display: "flex", flexDirection: "column", gap: 8 }}>
          <div style={{ font: "var(--type-label)", letterSpacing: "var(--tracking-label)", textTransform: "uppercase", color: "var(--text-muted)" }}>{t.bookEyebrow}</div>
          <h2 style={{ margin: 0, font: "var(--type-h2)", fontFamily: "var(--font-display)", color: "var(--text-heading)" }}>{t.bookTitle}</h2>
          <p style={{ margin: 0, font: "var(--type-body)", fontFamily: "var(--font-body)", color: "var(--text-muted)" }}>{t.bookLead}</p>
        </div>
        <div className="ms-form" style={{ display: "grid", gap: 16 }}>
          <Input label={t.fName} value={form.name} onChange={set("name")} error={errors.name ? t.fNameErr : undefined} placeholder={t.fNamePh} />
          <Input label={t.fEmail} type="email" value={form.email} onChange={set("email")} error={errors.email ? t.fEmailErr : undefined} placeholder={t.fEmailPh} />
          <Select label={t.fMoveIn} value={t.moveInOpts[form.moveIn]} onChange={setIdx("moveIn", t.moveInOpts)} options={t.moveInOpts} />
          <Select label={t.fGuests} value={t.guestsOpts[form.guests]} onChange={setIdx("guests", t.guestsOpts)} options={t.guestsOpts} />
        </div>
        <Input label={t.fMsg} value={form.msg} onChange={set("msg")} placeholder={t.fMsgPh} />
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
          <Checkbox label={t.fPets} checked={form.pets} onChange={set("pets")} />
          <Button size="lg" onClick={submit} disabled={sending}>{t.cta}</Button>
        </div>
        {sent && (
          <div style={{ display: "flex", justifyContent: "center" }}>
            <Toast tone="success" onDismiss={() => setSent(false)}>{sent === "server" ? t.sentServer(form.name.split(" ")[0]) : t.sent(form.name.split(" ")[0])}</Toast>
          </div>
        )}
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer style={{ background: "var(--surface-inverse)", borderTop: "1px solid var(--sv-roof-700)" }}>
      <div className="ms-footer" style={{ maxWidth: "var(--content-max)", margin: "0 auto", padding: "48px var(--content-pad)", display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 24, flexWrap: "wrap" }}>
        <Wordmark inverse />
        <div className="ms-footer-info" style={{ display: "flex", flexDirection: "column", gap: 6, font: "var(--type-small)", fontFamily: "var(--font-body)", color: "var(--sv-panel-400)", textAlign: "right" }}>
          <a href="https://www.google.com/maps/search/?api=1&query=Strandv%C3%A4gen%2018%2C%20196%2031%20Kungs%C3%A4ngen" target="_blank" rel="noopener" style={{ color: "inherit", textDecoration: "underline", textUnderlineOffset: 3 }}>{t.footerAddr}</a>
          <span>{t.footerNote}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { PricingSection, BookingSection, Footer });