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

function ContactMap() {
  return (
    <div className="main-loc__map" style={{ aspectRatio: "16/12" }}>
      <svg viewBox="0 0 600 450" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0 }}>
        <defs>
          <pattern id="grid2" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1a1a1c" strokeWidth="1" />
          </pattern>
        </defs>
        <rect width="600" height="450" fill="#0c0c0e" />
        <rect width="600" height="450" fill="url(#grid2)" />
        <path d="M0 220 Q150 200 300 240 T 600 220" stroke="#2a2a2e" strokeWidth="28" fill="none" />
        <path d="M0 220 Q150 200 300 240 T 600 220" stroke="#1a1a1c" strokeWidth="26" fill="none" />
        <path d="M300 0 L320 200 L300 240 L280 450" stroke="#222226" strokeWidth="20" fill="none" />
        <path d="M300 0 L320 200 L300 240 L280 450" stroke="#0f0f11" strokeWidth="18" fill="none" />
        <rect x="265" y="195" width="70" height="55" fill="#1d2725" rx="4" stroke="#3dd6d0" strokeOpacity="0.4" />
        <text x="300" y="222" textAnchor="middle" fill="#3dd6d0" fontFamily="ui-monospace, monospace" fontSize="9" letterSpacing="1">SCHÜTZENHALLE</text>
        <text x="300" y="234" textAnchor="middle" fill="#3dd6d0" fontFamily="ui-monospace, monospace" fontSize="9" opacity="0.6">BAMENOHL</text>
        <g transform="translate(300 195)">
          <circle r="36" fill="#3dd6d0" fillOpacity="0.1" />
          <circle r="20" fill="#3dd6d0" fillOpacity="0.2">
            <animate attributeName="r" values="20;36;20" dur="2.5s" repeatCount="indefinite" />
            <animate attributeName="fillOpacity" values="0.3;0;0.3" dur="2.5s" repeatCount="indefinite" />
          </circle>
          <circle r="10" fill="#3dd6d0" />
          <circle r="4" fill="#0a0a0a" />
        </g>
      </svg>
    </div>);

}

function PhoneIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z" />
    </svg>);

}
function MailIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="4" width="20" height="16" rx="2" />
      <path d="m22 6-10 7L2 6" />
    </svg>);

}
function PinIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0z" />
      <circle cx="12" cy="10" r="3" />
    </svg>);

}
function IgIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="2" width="20" height="20" rx="5" />
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
    </svg>);

}

function WhatsAppIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm5.96 4.5c-.2-.13-1.84-.91-2.12-1.01-.28-.1-.49-.15-.69.15-.2.3-.79 1-.97 1.2-.18.2-.36.23-.66.08-.3-.15-1.27-.47-2.42-1.49-.9-.8-1.5-1.78-1.68-2.08-.18-.3-.02-.47.13-.62.14-.14.3-.36.45-.54.15-.18.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.66-1.66-.92-2.27-.24-.6-.49-.51-.67-.52l-.57-.01c-.2 0-.53.08-.81.38-.28.3-1.07 1.04-1.07 2.55 0 1.5 1.1 2.96 1.25 3.16.15.2 2.16 3.3 5.32 4.49.74.32 1.32.51 1.77.65.74.24 1.42.2 1.96.12.6-.09 1.84-.75 2.1-1.48.26-.73.26-1.35.18-1.48-.08-.13-.28-.2-.58-.36z" transform="translate(1.5 1)" />
    </svg>);

}

function ContactPage() {
  const [form, setForm] = useContactState({ name: "", email: "", message: "" });
  const [sent, setSent] = useContactState(false);
  const [sending, setSending] = useContactState(false);
  const [error, setError] = useContactState("");
  const set = (k, v) => setForm((p) => ({ ...p, [k]: v }));
  const submit = async (e) => {
    e.preventDefault();
    setError("");
    setSending(true);
    try {
      await sendHolyForm("contact", form);
      setSent(true);
      setForm({ name: "", email: "", message: "" });
    } catch (err) {
      setError(err.message || "Die Nachricht konnte nicht gesendet werden. Bitte versuche es später erneut.");
    } finally {
      setSending(false);
    }
  };

  return (
    <>
      <header className="page-head">
        <Splash className="page-head__splash" />
        <div className="container">
          <Reveal>
            <div className="eyebrow page-head__eyebrow">Kontakt</div>
            <h1 className="page-head__title display">
              Hol dir
              <br />
              <span style={{ color: "var(--teal)" }}>Holy Vibes.</span>
            </h1>
            <p className="page-head__sub">
              Anrufen, schreiben oder einfach vorbeikommen — die Schützenhalle ist nicht zu übersehen.
            </p>
          </Reveal>
        </div>
      </header>

      <section className="section section--tight" style={{ paddingTop: 24 }}>
        <div className="container">
          <Reveal>
            <a className="wa-cta" href="https://wa.me/4901759618981?text=Hallo%20Holy%20Smash%2C%20ich%20h%C3%A4tte%20eine%20Frage%3A" target="_blank" rel="noreferrer" style={{ color: "rgb(1, 31, 30)" }}>
              <span className="wa-cta__icon"><WhatsAppIcon /></span>
              <span className="wa-cta__body">
                <span className="wa-cta__lbl" style={{ color: "rgb(1, 31, 30)" }}>Direkt per WhatsApp schreiben</span>
                <span className="wa-cta__sub" style={{ color: "rgb(1, 31, 30)" }}>Schnellste Antwort — meist innerhalb weniger Minuten.</span>
              </span>
              <span className="wa-cta__arrow">→</span>
            </a>
          </Reveal>
          <div className="contact-grid">
            <Reveal>
              <div>
                <a className="contact-tile" href="tel:+4901759618981">
                  <span className="contact-tile__icon"><PhoneIcon /></span>
                  <div className="contact-tile__body">
                    <div className="lbl">Telefon</div>
                    <div className="val">0175 9618981</div>
                  </div>
                </a>
                <a className="contact-tile" href="https://instagram.com/holy_smashburgers" target="_blank" rel="noreferrer">
                  <span className="contact-tile__icon"><IgIcon /></span>
                  <div className="contact-tile__body">
                    <div className="lbl">Instagram</div>
                    <div className="val">@holy_smashburgers</div>
                  </div>
                </a>
                <a className="contact-tile" href="mailto:kontakt@holysmashburger.de">
                  <span className="contact-tile__icon"><MailIcon /></span>
                  <div className="contact-tile__body">
                    <div className="lbl">E-Mail</div>
                    <div className="val">kontakt@holysmashburger.de</div>
                  </div>
                </a>
                <a className="contact-tile" href="https://maps.google.com/?q=Sch%C3%BCtzenhalle+Bamenohl" target="_blank" rel="noreferrer">
                  <span className="contact-tile__icon"><PinIcon /></span>
                  <div className="contact-tile__body">
                    <div className="lbl">Standort</div>
                    <div className="val">Schützenhalle Bamenohl</div>
                    <div style={{ color: "var(--muted)", fontSize: 13, marginTop: 4 }}>57413 Finnentrop, NRW</div>
                  </div>
                </a>

                <div style={{ marginTop: 32 }}>
                  <h3 className="display" style={{ fontSize: 28, marginBottom: 16 }}>Öffnungszeiten</h3>
                  <ul className="hours">
                    <li><span className="day">Freitag</span><span className="time">17:00–21:00</span></li>
                    <li><span className="day">Samstag</span><span className="time">17:00–21:00</span></li>
                    <li><span className="day">Sonntag</span><span className="time">17:00–21:00</span></li>
                    <li><span className="day">Mo–Do</span><span className="time">Ruhetag · Catering möglich</span></li>
                  </ul>
                </div>
              </div>
            </Reveal>

            <Reveal>
              <div>
                <h3 className="display" style={{ fontSize: 32, marginBottom: 16 }}>
                  Allgemeine Anfrage
                </h3>
                <p style={{ color: "var(--muted)", marginBottom: 24 }}>
                  Du willst was wissen, Feedback geben oder uns einfach Liebe schicken?
                  Schreib uns. Für Catering nutze bitte das Formular auf der Catering-Seite.
                </p>
                {sent ?
                <div className="form-success">
                    <h3 className="display">Danke. Holy gut!</h3>
                    <p style={{ color: "var(--muted)" }}>Wir melden uns bald.</p>
                  </div> :

                <form className="form" onSubmit={submit}>
                    {error && <div className="form-error full">{error}</div>}
                    <div className="field full">
                      <label>Name</label>
                      <input required value={form.name} onChange={(e) => set("name", e.target.value)} placeholder="Dein Name" />
                    </div>
                    <div className="field full">
                      <label>E-Mail</label>
                      <input required type="email" value={form.email} onChange={(e) => set("email", e.target.value)} placeholder="du@beispiel.de" />
                    </div>
                    <div className="field full">
                      <label>Nachricht</label>
                      <textarea required rows="5" value={form.message} onChange={(e) => set("message", e.target.value)} placeholder="Worum geht's?" />
                    </div>
                    <div className="full" style={{ display: "flex", justifyContent: "flex-end" }}>
                      <Btn variant="primary" size="lg" type="submit" disabled={sending}>{sending ? "Sendet …" : "Senden"} <span className="arrow">→</span></Btn>
                    </div>
                  </form>
                }

                <div style={{ marginTop: 32 }}>
                  <ContactMap />
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </>);

}

window.ContactPage = ContactPage;