import { useState } from "react";

export default function Contact() {
  const [sent, setSent] = useState(false);

  return (
    <section id="kontakt" className="section">
      <div className="section-head">
        <div>
          <span className="num">— Sprechen wir</span>
        </div>
        <div>
          <span className="eyebrow">finden Sie uns</span>
          <h2>
            Schreiben Sie uns — <em>wir freuen uns</em>.
          </h2>
        </div>
      </div>

      <div className="contact">
        <aside className="contact-card">
          <div className="letterhead">
            <h3>Familie Dotzauer</h3>
            <span className="h">in der Werkstatt erreichbar</span>
          </div>
          <ul>
            <li>
              <strong>Werkstatt</strong>
              <span className="value">Maiberger Str. 2 · 03044 Cottbus</span>
            </li>
            <li>
              <strong>Telefon</strong>
              <a href="tel:+4935586034 5">0355 / 86 03 45</a>
            </li>
            <li>
              <strong>Notdienst (24 / 7)</strong>
              <a href="tel:+4935586034 6">0355 / 86 03 46</a>
            </li>
            <li>
              <strong>E-Post</strong>
              <a href="mailto:info@dotzauer-kaelte-klima.de">
                info@dotzauer-kaelte-klima.de
              </a>
            </li>
            <li>
              <strong>Öffnungszeit</strong>
              <span className="value">Mo – Fr · 7 – 17 Uhr</span>
            </li>
          </ul>
        </aside>

        <form
          className="contact-form"
          onSubmit={(e) => { e.preventDefault(); setSent(true); }}
        >
          <span className="form-label">
            Hallo!
            <span className="small">Erzählen Sie uns, worum es geht — wir antworten binnen eines Werktages.</span>
          </span>

          <div className="form-row">
            <label>
              <span>Ihr Name</span>
              <input type="text" required placeholder="Vor- und Nachname" />
            </label>
            <label>
              <span>E-Post</span>
              <input type="email" required placeholder="ihre@adresse.de" />
            </label>
          </div>

          <div className="form-row full">
            <label>
              <span>Worum geht es?</span>
              <textarea rows="4" required placeholder="Was beschäftigt Sie? Welche Anlage, welcher Standort, welcher Termin?" />
            </label>
          </div>

          {sent ? (
            <p className="form-success">
              Vielen Dank! Wir melden uns binnen eines Werktages bei Ihnen. — Familie Dotzauer
            </p>
          ) : (
            <div className="actions">
              <span className="note">Wir antworten binnen 24h ✓</span>
              <button type="submit" className="btn btn-primary">
                Absenden <span className="arrow">→</span>
              </button>
            </div>
          )}
        </form>
      </div>
    </section>
  );
}