/* global React, Splash, Btn, Food, Reveal, SectionHead, sendHolyForm */
const { useState: useCatState } = React;

const PACKAGES = [
{
  icon: "♥",
  title: "Hochzeiten",
  desc: "Burger statt Buffet. Smashed live, vor den Gästen. Inkl. Sides & Drinks."
},
{
  icon: "▲",
  title: "Firmenfeiern",
  desc: "Sommerfest, Weihnachtsfeier, Teamevent. Wir kommen in den Hof."
},
{
  icon: "✶",
  title: "Geburtstage",
  desc: "Egal ob 18, 40 oder 70 — Smashburger machen jeden Geburtstag besser."
},
{
  icon: "✦",
  title: "Privatevents",
  desc: "Hofeinweihung, Reunion, Grillfeier ohne grillen. Du feierst, wir smashen."
}];


const STEPS = [
{ title: "Anfrage", desc: "Über das Formular oder per Telefon. Datum, Gäste, Location." },
{ title: "Beratung", desc: "Wir senden Angebot mit Paketen, Menü-Optionen und Aufbau." },
{ title: "Event", desc: "Wir kommen pünktlich, bauen auf, smashen live, machen sauber." },
{ title: "Genießen", desc: "Du feierst mit deinen Gästen. Wir liefern Holy Vibes." }];


const GOOGLE_REVIEWS_URL = "https://www.google.com/maps/place/Holy+Smash+Premium+Burger+%26+Loaded+Fries/@51.1652083,7.9839916,17z/data=!3m1!5s0x47b956714202e585:0xac84989ad0884615!4m8!3m7!1s0x47b95734182ed5fb:0xecc83ef0fdff429a!8m2!3d51.1652083!4d7.9839916!9m1!1b1!16s%2Fg%2F11z9r2fbjq";

const TESTIMONIALS = [
{
  text: "Super nette Leute! Wunderbare Burger, einfach mega!",
  name: "Marius Wesener",
  sub: "5 Sterne · Google Bewertung"
},
{
  text: "Ein leckerer Classic Burger (OG Smash) und die Pommes sind knusprig und perfekt gesalzen.",
  name: "Maximilian Stoffel",
  sub: "5 Sterne · Google Bewertung"
},
{
  text: "Sehr leckere Burger und Pommes.",
  name: "Ansgar Schulte",
  sub: "5 Sterne · Google Bewertung"
}];


function CateringPage() {
  const [form, setForm] = useCatState({
    name: "",
    email: "",
    phone: "",
    date: "",
    guests: "",
    type: "Hochzeit",
    message: ""
  });
  const [sent, setSent] = useCatState(false);
  const [sending, setSending] = useCatState(false);
  const [error, setError] = useCatState("");

  const set = (k, v) => setForm((p) => ({ ...p, [k]: v }));

  const submit = async (e) => {
    e.preventDefault();
    setError("");
    setSending(true);
    try {
      await sendHolyForm("catering", form);
      setSent(true);
      setForm({ name: "", email: "", phone: "", date: "", guests: "", type: "Hochzeit", message: "" });
    } catch (err) {
      setError(err.message || "Die Anfrage konnte nicht gesendet werden. Bitte versuche es später erneut.");
    } finally {
      setSending(false);
    }
  };

  return (
    <>
      {/* Hero */}
      <header className="page-head">
        <Splash className="page-head__splash" />
        <div className="container">
          <div className="cater-hero">
            <Reveal>
              <div>
                <div className="eyebrow page-head__eyebrow">Holy Smash · Catering</div>
                <h1 className="page-head__title display" style={{ fontFamily: "Anton", height: "53px" }}>
                  Holy Smash
                  <br />
                  fuer <span style={{ color: "var(--teal)" }}>deine</span>
                  <br />
                  Feier.
                </h1>
                <p className="page-head__sub">
                  Wir bringen den Truck zu dir. Hochzeiten, Firmenfeiern, Geburtstage
                  oder einfach nur weil. Live gesmasht, frisch gemacht, ohne Catering-Vibes.
                </p>
                <div style={{ display: "flex", gap: 10, marginTop: 24 }}>
                  <Btn variant="primary" onClick={() => {
                    const el = document.getElementById("anfrage");
                    if (el) {
                      const top = el.getBoundingClientRect().top + window.scrollY - 80;
                      window.scrollTo({ top, behavior: "smooth" });
                    }
                  }}>
                    Anfrage stellen <span className="arrow">→</span>
                  </Btn>
                  <Btn variant="ghost" href="tel:+4901759618981">
                    01759 618981
                  </Btn>
                </div>
              </div>
            </Reveal>
            <Reveal>
              <Food wide label="Event Setup" sub="live vom truck" hand="event mode" palette="orange" badges={[{ text: "Live Cooking", kind: "teal" }]} img="assets-min/catering.jpg" />
            </Reveal>
          </div>
        </div>
      </header>

      {/* Packages */}
      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="Pakete"
            title="Was wir bieten."
            sub="Alle Pakete inkl. Anfahrt im Sauerland-Umkreis, Aufbau, Live-Cooking & Reinigung. Auf Wunsch mit Drinks-Modul." />
          
          <Reveal staggerChildren className="packages">
            {PACKAGES.map((p, i) =>
            <article key={i} className="pkg">
                <div className="pkg__icon">{p.icon}</div>
                <h3 className="display">{p.title}</h3>
                <p>{p.desc}</p>
              </article>
            )}
          </Reveal>
        </div>
      </section>

      {/* Steps */}
      <section className="section section--dark section--frame">
        <div className="container">
          <SectionHead
            eyebrow="So läuft's"
            title="In vier Schritten zur Holy Feier." />
          
          <Reveal staggerChildren className="steps">
            {STEPS.map((s, i) =>
            <div key={i} className="step">
                <h4 className="display">{s.title}</h4>
                <p>{s.desc}</p>
              </div>
            )}
          </Reveal>
        </div>
      </section>

      {/* Testimonials */}
      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="Referenzen"
            title="Was Gäste sagen." />
          
          <Reveal staggerChildren className="menu-grid">
            {TESTIMONIALS.map((t, i) =>
            <a key={i} className="card review-card" href={GOOGLE_REVIEWS_URL} target="_blank" rel="noreferrer" style={{ padding: 28 }}>
                <span className="hand" style={{ fontSize: 32, color: "var(--teal)" }}>"</span>
                <div className="review-card__stars" aria-label="5 Sterne Google Bewertung">★★★★★ <span>Google</span></div>
                <p style={{ fontSize: 18, lineHeight: 1.4, marginBottom: 24, color: "var(--white)" }}>
                  {t.text}
                </p>
                <div style={{ borderTop: "1px solid var(--line)", paddingTop: 16 }}>
                  <div className="display" style={{ fontSize: 22 }}>{t.name}</div>
                  <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)", marginTop: 2 }}>
                    {t.sub}
                  </div>
                </div>
              </a>
            )}
          </Reveal>
        </div>
      </section>

      {/* Form */}
      <section className="section section--dark section--frame" id="anfrage">
        <div className="container" style={{ maxWidth: 920 }}>
          <SectionHead
            eyebrow="Catering-Anfrage"
            title="Sag uns von deinem Event."
            sub="Wir melden uns innerhalb von 24 h mit einem Angebot zurück. Versprochen." />
          
          {sent ?
          <Reveal>
              <div className="form-success">
                <h3 className="display">Holy! Anfrage ist raus.</h3>
                <p style={{ color: "var(--muted)" }}>
                  Wir melden uns innerhalb von 24 Stunden bei dir. Bis dahin: Folge uns auf
                  Instagram für Holy Vibes.
                </p>
                <div style={{ marginTop: 18 }}>
                  <Btn variant="ghost" onClick={() => {setSent(false);setForm({ name: "", email: "", phone: "", date: "", guests: "", type: "Hochzeit", message: "" });}}>
                    Neue Anfrage
                  </Btn>
                </div>
              </div>
            </Reveal> :

          <Reveal>
              <form className="form" onSubmit={submit}>
                {error && <div className="form-error full">{error}</div>}
                <div className="field">
                  <label>Name</label>
                  <input required value={form.name} onChange={(e) => set("name", e.target.value)} placeholder="Max Mustermann" />
                </div>
                <div className="field">
                  <label>E-Mail</label>
                  <input required type="email" value={form.email} onChange={(e) => set("email", e.target.value)} placeholder="max@beispiel.de" />
                </div>
                <div className="field">
                  <label>Telefon</label>
                  <input value={form.phone} onChange={(e) => set("phone", e.target.value)} placeholder="0175 …" />
                </div>
                <div className="field">
                  <label>Eventdatum</label>
                  <input type="date" value={form.date} onChange={(e) => set("date", e.target.value)} />
                </div>
                <div className="field">
                  <label>Gästezahl</label>
                  <input type="number" value={form.guests} onChange={(e) => set("guests", e.target.value)} placeholder="z. B. 80" />
                </div>
                <div className="field">
                  <label>Eventart</label>
                  <select value={form.type} onChange={(e) => set("type", e.target.value)}>
                    <option>Hochzeit</option>
                    <option>Firmenfeier</option>
                    <option>Geburtstag</option>
                    <option>Privatevent</option>
                    <option>Sonstiges</option>
                  </select>
                </div>
                <div className="field full">
                  <label>Nachricht</label>
                  <textarea rows="5" value={form.message} onChange={(e) => set("message", e.target.value)} placeholder="Erzähl uns ein bisschen — Location, Uhrzeit, Stromanschluss, Besonderheiten." />
                </div>
                <div className="full" style={{ display: "flex", justifyContent: "flex-end", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
                  <span style={{ color: "var(--muted)", fontSize: 13 }}>
                    Antwort innerhalb von 24 h.
                  </span>
                  <Btn variant="primary" size="lg" type="submit" disabled={sending}>
                    {sending ? "Sendet …" : "Anfrage senden"} <span className="arrow">→</span>
                  </Btn>
                </div>
              </form>
            </Reveal>
          }
        </div>
      </section>
    </>);

}

window.CateringPage = CateringPage;