// Kontakt — Formular, Adresse, Karten-Platzhalter

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "show_grain": true
} /*EDITMODE-END*/;

const Form = () => {
  const [data, setData] = React.useState({ name: "", email: "", topic: "general", message: "" });
  const [sent, setSent] = React.useState(false);
  const update = (k) => (e) => setData({ ...data, [k]: e.target.value });
  const submit = (e) => {e.preventDefault();setSent(true);};

  if (sent) {
    return (
      <div className="success-msg">
        Danke, {data.name || "Freund"} — deine Nachricht ist angekommen.<br />
        Ich melde mich, sobald der Sud fertig ist.
      </div>);

  }

  return (
    <form className="kontakt-form" onSubmit={submit}>
      <div className="kontakt-field">
        <label htmlFor="n">Name</label>
        <input id="n" required value={data.name} onChange={update("name")} placeholder="Wie heisst du?" />
      </div>
      <div className="kontakt-field">
        <label htmlFor="e">E-Mail</label>
        <input id="e" type="email" required value={data.email} onChange={update("email")} placeholder="dein@email.ch" />
      </div>
      <div className="kontakt-field">
        <label htmlFor="t">Worum geht's?</label>
        <select id="t" value={data.topic} onChange={update("topic")}>
          <option value="general">Einfach mal Hallo sagen</option>
          <option value="order">Bier bestellen</option>
          <option value="visit">Brauerei besuchen</option>
          <option value="press">Presse / Restaurant</option>
        </select>
      </div>
      <div className="kontakt-field">
        <label htmlFor="m">Nachricht</label>
        <textarea id="m" required value={data.message} onChange={update("message")} placeholder="Schreib was du willst." />
      </div>
      <button type="submit" className="btn btn-primary" style={{ justifySelf: "start", marginTop: 16 }}>
        Senden <span className="arrow">→</span>
      </button>
    </form>);

};

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  return (
    <div className={tweaks.show_grain ? "grain" : ""}>
      <Nav active="kontakt" />

      <section className="container kontakt-hero">
        <div className="h-eyebrow">Kontakt · Hallo sagen</div>
        <h1 className="h-display" style={{ fontSize: "clamp(56px, 8vw, 100px)", margin: "16px 0 24px", lineHeight: 1 }}>
          Schreib mir.<br /><em>Oder komm vorbei.</em>
        </h1>
        <p style={{ fontSize: 19, color: "var(--ink-2)", maxWidth: 600, margin: 0 }}>
          Bestellungen, Brauereibesuche, Restaurantkooperationen, oder einfach eine
          Frage zum Bier. Ich antworte meistens innert ein, zwei Tagen — ausser ich braue gerade.
        </p>

        <div className="kontakt-grid">
          <Form />
          <aside className="kontakt-info">
            <h3>So findest du mich</h3>
            <dl>
              <div>
                <dt>Adresse</dt>
                <dd>Dorfstrasse 5<br />3075 Rüfenacht BE</dd>
              </div>
              <div>
                <dt>E-Mail</dt>
                <dd>brauen@agaeumann.ch</dd>
              </div>
              <div>
                <dt>Telefon</dt>
                <dd>+41 79 643 00 00</dd>
              </div>
              <div>
                <dt>Brauerei besuchen</dt>
                <dd>Wer gerne selber Hand anlegen will, bitte über das Formular melden</dd>
              </div>
            </dl>
            <a className="map-link" href="https://www.google.com/maps/search/?api=1&query=R%C3%BCfenacht+Bern" target="_blank" rel="noopener">
              <img className="map-img" src="assets/karte-ruefenacht.png" alt="Karte · Rüfenacht" />
              <span className="map-pin" aria-hidden="true">
                <span className="map-pin-dot" />
                <span className="map-pin-ring" />
              </span>
              <span className="map-caption">In Google Maps öffnen →</span>
            </a>
          </aside>
        </div>
      </section>

      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Atmosphäre">
          <TweakToggle label="Filmkorn-Textur" value={tweaks.show_grain} onChange={(v) => setTweak("show_grain", v)} />
        </TweakSection>
      </TweaksPanel>
    </div>);

};

ReactDOM.createRoot(document.getElementById("app")).render(<App />);