/* global React, Icon, Photo, useReveal, useI18n, IMG */
// Dentertain — Contact page (Dennis Jakic, Bruchsal)

const ContactHero = () => {
  const { t } = useI18n();
  return (
    <section className="contact-hero">
      <div className="contact-hero__left page-enter">
        <span className="eyebrow">{t("ct.eyebrow")}</span>
        <h1 className="h-display">
          {t("ct.title.a")} <em>{t("ct.title.b")}</em>
        </h1>
        <p className="lead">{t("ct.lead")}</p>
        <div className="contact-info">
          <div className="contact-info__row">
            <div className="contact-info__icon"><Icon name="mail" size={16} /></div>
            <div className="contact-info__row-text">
              <span className="contact-info__label">{t("ct.info.mail")}</span>
              <a href="mailto:info@dentertain-production.de" className="contact-info__value">info@dentertain-production.de</a>
            </div>
          </div>
          <div className="contact-info__row">
            <div className="contact-info__icon"><Icon name="phone" size={16} /></div>
            <div className="contact-info__row-text">
              <span className="contact-info__label">{t("ct.info.phone")}</span>
              <a href="tel:+491733015581" className="contact-info__value">+49 173 301 55 81</a>
            </div>
          </div>
          <div className="contact-info__row">
            <div className="contact-info__icon"><Icon name="map-pin" size={16} /></div>
            <div className="contact-info__row-text">
              <span className="contact-info__label">{t("ct.info.studio")}</span>
              <span className="contact-info__value">{t("ct.info.studio.value")}</span>
            </div>
          </div>
          <div className="contact-info__row">
            <div className="contact-info__icon"><Icon name="instagram" size={16} /></div>
            <div className="contact-info__row-text">
              <span className="contact-info__label">{t("ct.info.ig")}</span>
              <span className="contact-info__value">@dentertain.weddings</span>
            </div>
          </div>
        </div>
      </div>
      <div className="page-enter">
        <ContactForm />
      </div>
    </section>
  );
};

const ContactForm = () => {
  const { t, lang } = useI18n();
  const PACKAGES = [
    { id: "photo",   label: t("pkg.photo") },
    { id: "film",    label: t("pkg.film") },
    { id: "both",    label: t("pkg.both") },
    { id: "unsure",  label: t("pkg.unsure") },
  ];
  const [pkg, setPkg] = React.useState("both");
  const [sent, setSent] = React.useState(false);
  const [data, setData] = React.useState({
    names: "", email: "", date: "", location: "", guests: "", story: "", source: "",
  });
  const upd = (k) => (e) => setData((d) => ({ ...d, [k]: e.target.value }));

  const onSubmit = async (e) => {
    e.preventDefault();
    // Build mailto fallback. In production wire to a /api/send endpoint that
    // forwards to SMTP (e.g. resend / postmark / nodemailer).
    const greet = lang === "en" ? "Hello Dennis," : "Hallo Dennis,";
    const intro = lang === "en" ? "We'd love to enquire about our wedding." : "wir möchten gerne wegen unserer Hochzeit anfragen.";
    const sign = lang === "en" ? "Best," : "Liebe Grüße";
    const body = encodeURIComponent(
      `${greet}\n\n${intro}\n\n` +
      `${t("ct.form.pkg")}: ${PACKAGES.find(p => p.id === pkg).label}\n` +
      `${t("ct.form.names")}: ${data.names}\n` +
      `${t("ct.form.email")}: ${data.email}\n` +
      `${t("ct.form.date")}: ${data.date}\n` +
      `${t("ct.form.loc")}: ${data.location}\n` +
      `${t("ct.form.guests")}: ${data.guests}\n` +
      `${t("ct.form.source")}: ${data.source}\n\n` +
      `${data.story}\n\n${sign}`
    );
    const subject = encodeURIComponent(
      (lang === "en" ? "Wedding enquiry — " : "Hochzeitsanfrage — ") + (data.names || "Anfrage")
    );
    try {
      window.location.href = `mailto:info@dentertain-production.de?subject=${subject}&body=${body}`;
    } catch (e) { /* noop */ }
    setSent(true);
  };

  if (sent) {
    return (
      <div className="contact-form-wrap page-enter">
        <div className="sent-state">
          <div className="sent-state__icon"><Icon name="check" size={36} stroke={1.8} /></div>
          <span className="eyebrow solo">{t("ct.sent.eyebrow")}</span>
          <h3 className="h2">{t("ct.sent.title")}</h3>
          <p className="p" style={{ maxWidth: 380 }}>{t("ct.sent.body")}</p>
          <div style={{ display: "flex", gap: 10, marginTop: 12, flexWrap: "wrap", justifyContent: "center" }}>
            <a href="mailto:info@dentertain-production.de" className="btn btn--dark">
              <Icon name="mail" size={14} /> {t("ct.sent.btn1")}
            </a>
            <button
              className="btn btn--ghost"
              onClick={() => {
                setSent(false);
                setData({ names: "", email: "", date: "", location: "", guests: "", story: "", source: "" });
              }}
            >
              {t("ct.sent.btn2")} →
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="contact-form-wrap">
      <form className="contact-form" onSubmit={onSubmit}>
        <div className="contact-form__head">
          <span className="eyebrow solo">{t("ct.form.eyebrow")}</span>
          <div className="contact-form__head-title">{t("ct.form.title")}</div>
          <div className="contact-form__head-sub">{t("ct.form.sub")}</div>
        </div>

        <div className="field full">
          <label className="field__label">{t("ct.form.pkg")} <span className="req">*</span></label>
          <div className="chips">
            {PACKAGES.map((p) => (
              <button
                type="button"
                key={p.id}
                className={`chip ${pkg === p.id ? "active" : ""}`}
                onClick={() => setPkg(p.id)}
              >
                {p.label}
              </button>
            ))}
          </div>
        </div>

        <div className="field">
          <label className="field__label">{t("ct.form.names")} <span className="req">*</span></label>
          <input
            className="field__input"
            type="text"
            placeholder={lang === "en" ? "e.g. Marie & Jonas" : "z.B. Marie & Jonas"}
            value={data.names}
            onChange={upd("names")}
            required
          />
        </div>

        <div className="field">
          <label className="field__label">{t("ct.form.email")} <span className="req">*</span></label>
          <input
            className="field__input"
            type="email"
            placeholder={lang === "en" ? "you@example.com" : "ihr@beispiel.de"}
            value={data.email}
            onChange={upd("email")}
            required
          />
        </div>

        <div className="field">
          <label className="field__label">{t("ct.form.date")}</label>
          <input
            className="field__input"
            type="text"
            placeholder={lang === "en" ? "e.g. June 14, 2026 or Summer 2026" : "z.B. 14.06.2026 oder Sommer 2026"}
            value={data.date}
            onChange={upd("date")}
          />
        </div>

        <div className="field">
          <label className="field__label">{t("ct.form.loc")} <span style={{ opacity: 0.5 }}>{t("ct.form.loc.opt")}</span></label>
          <input
            className="field__input"
            type="text"
            placeholder={lang === "en" ? "e.g. Schloss Eberstein, Pfalz" : "z.B. Schloss Eberstein, Pfalz"}
            value={data.location}
            onChange={upd("location")}
          />
        </div>

        <div className="field">
          <label className="field__label">{t("ct.form.guests")}</label>
          <select className="field__select" value={data.guests} onChange={upd("guests")}>
            <option value="">— {lang === "en" ? "Pick a size" : "Wählt eine Größe"} —</option>
            <option>{lang === "en" ? "Up to 30" : "Bis 30"}</option>
            <option>30 – 80</option>
            <option>80 – 150</option>
            <option>150 – 250</option>
            <option>250+</option>
            <option>{lang === "en" ? "Not sure yet" : "Noch unklar"}</option>
          </select>
        </div>

        <div className="field">
          <label className="field__label">{t("ct.form.source")}</label>
          <select className="field__select" value={data.source} onChange={upd("source")}>
            <option value="">— {lang === "en" ? "Optional" : "Optional"} —</option>
            <option>Instagram</option>
            <option>Google</option>
            <option>{lang === "en" ? "Friends · recommendation" : "Empfehlung von Freunden"}</option>
            <option>{lang === "en" ? "Through the venue" : "Über die Location"}</option>
            <option>{lang === "en" ? "Wedding blog" : "Hochzeitsblog"}</option>
            <option>99fire Filmfestival</option>
            <option>{lang === "en" ? "Other" : "Anders"}</option>
          </select>
        </div>

        <div className="field full">
          <label className="field__label">{t("ct.form.story")}</label>
          <textarea
            className="field__textarea"
            placeholder={t("ct.form.story.ph")}
            value={data.story}
            onChange={upd("story")}
          />
        </div>

        <div className="field-row">
          <label className="consent">
            <input type="checkbox" required defaultChecked />
            {t("ct.form.consent")}
          </label>
          <button type="submit" className="btn btn--primary">
            {t("ct.form.send")} <Icon name="send" size={14} stroke={1.8} />
          </button>
        </div>
      </form>
    </div>
  );
};

const FAQ_ITEMS = {
  de: [
    { q: "Wann sollten wir buchen?", a: "So früh wie möglich. Ich nehme nur so viele Hochzeiten an, dass ich nach jedem Dreh zwei freie Tage für die Schnitt-Vorbereitung habe. Sommer-Wochenenden gehen oft am schnellsten weg." },
    { q: "Reist du auch?", a: "Ja, jederzeit. Ich war schon in der Toskana und auf Mallorca unterwegs. Reisekosten fließen ins Angebot ein, dafür gibt's keine extra Zuschläge." },
    { q: "Wann bekommen wir den Film?", a: "Ein Highlight-Reel voraussichtlich innerhalb von etwa zwei Wochen — perfekt für Social. Der vollständige cinematische Film in der Regel nach ungefähr drei Monaten. Fotos: Vorschau meist nach etwa einer Woche, die vollständige Galerie voraussichtlich nach rund sechs Wochen." },
    { q: "Was kostet das?", a: "Ehrliche Antwort: Das besprechen wir persönlich. Keine Hochzeit gleicht der anderen — Stunden, Location, Foto, Film oder beides. Nach einem kurzen Gespräch bekommt ihr ein klares Angebot, zugeschnitten auf euren Tag. Ohne versteckte Posten, ohne Überraschungen." },
    { q: "Was, wenn du krank wirst?", a: "Erstmal: Ich bin da. Solange es kein absoluter Notfall ist, stehe ich an eurem Tag hinter der Kamera. Und für den Fall der Fälle habe ich ein Netz aus Foto- und Videografen, die Top-Qualität liefern und im Notfall für mich einspringen würden. Euer Tag ist so oder so abgesichert." },
    { q: "Habt ihr VFX wirklich nötig?", a: "Nein — und das ist der Punkt. VFX setze ich nur ein, wenn die Story es trägt: ein leiser Übergang, ein Lichteffekt, ein Time-Lapse-Insert. Nie als Selbstzweck. Das Können ist da, falls ihr es wollt." },
  ],
  en: [
    { q: "When should we book?", a: "As early as possible. I only take on as many weddings as let me keep two quiet days after each shoot for edit prep. Summer weekends go first." },
    { q: "Do you travel?", a: "Yes, anytime. I've shot in Tuscany and on Mallorca. Travel cost is built into the quote — no surcharges." },
    { q: "When do we get the film?", a: "A highlight reel usually within about two weeks — perfect for socials. The full cinematic film typically after around three months. Photos: preview after roughly a week, full gallery after about six weeks." },
    { q: "What does it cost?", a: "Honest answer: we discuss that personally. No two weddings are alike — hours, location, photo, film or both. After a short chat you get one clear quote, tailored to your day. No hidden items, no surprises." },
    { q: "What if you get sick?", a: "First things first: I'll be there. Unless it's a genuine emergency, I'm behind the camera on your day. And just in case, I have a network of photo and video professionals who deliver top quality and would step in for me. Your day is covered either way." },
    { q: "Do we really need VFX?", a: "No — and that's the point. I only use VFX when the story carries it: a quiet transition, a light beat, a time-lapse insert. Never as an end in itself. The skill is there, if you want it." },
  ],
};

const FAQ = () => {
  const { t, lang } = useI18n();
  const items = FAQ_ITEMS[lang] || FAQ_ITEMS.de;
  return (
    <div className="faq">
      <div className="section-head reveal" style={{ alignItems: "center", textAlign: "center", marginLeft: "auto", marginRight: "auto" }}>
        <span className="eyebrow">{t("ct.faq.eyebrow")}</span>
        <h2 className="h1" style={{ textAlign: "center" }}>
          {t("ct.faq.title.a")} <em>{t("ct.faq.title.b")}</em>
        </h2>
      </div>
      {items.map((f, i) => (
        <details className="faq-item reveal" key={i} open={i === 0}>
          <summary>{f.q}</summary>
          <div className="faq-item__body">{f.a}</div>
        </details>
      ))}
    </div>
  );
};

const ContactPage = () => {
  useReveal();
  return (
    <div className="contact-page">
      <ContactHero />
      <FAQ />
    </div>
  );
};

Object.assign(window, { ContactPage });
