function Contact() {
  const [form, setForm] = useState({
    name: "", email: "", phone: "", date: "",
    eventType: "Wedding", guests: "", venue: "", project: "", details: "",
  });
  const [sent, setSent] = useState(false);

  const types = ["Wedding", "Corporate", "Private", "Public"];
  const projects = ["Not sure yet", "Mandolin Ranch", "Gypsy Mandolin", "Solo / Charlie", "Chris King Band"];

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

  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  if (sent) {
    return (
      <section>
        <div className="wrap-narrow" style={{ padding: "120px 0" }}>
          <div className="form-success">
            <div className="check">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M5 13l4 4 10-10" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            <h2>Thank you, {form.name || "friend"}.</h2>
            <p style={{ color: "var(--ink-2)", maxWidth: 440, margin: "20px auto 36px" }}>
              Your inquiry is in. Charlie usually replies within a day, often with
              a few clarifying questions and, when available, a live quote.
            </p>
            <a className="btn btn-ghost" onClick={() => { setSent(false); setForm({ name: "", email: "", phone: "", date: "", eventType: "Wedding", guests: "", venue: "", project: "", details: "" }); }}>Send another →</a>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section>
      <div className="wrap">
        <div className="contact-grid">
          <div className="intro">
            <div className="mono" style={{ marginBottom: 14, color: "var(--accent)" }}>Book Charlie</div>
            <h1>Let's talk about<br /><em>your event.</em></h1>
            <p>
              Weddings, corporate events, private parties, vineyards, backyards, quiet
              ceremonies and loud receptions. Send the date and a few details, we
              usually reply within a day.
            </p>
            <div className="line">
              <span className="lbl">Call</span>
              <a className="val" href="tel:+17209368877" style={{ textDecoration: "none" }}>(720) 936-8877</a>
            </div>
            <div className="line">
              <span className="lbl">Email</span>
              <a className="val" href="mailto:charlie@mandolinranch.com" style={{ textDecoration: "none", fontSize: 18 }}>charlie@mandolinranch.com</a>
            </div>
            <div className="line">
              <span className="lbl">Based</span>
              <span className="val">Colorado · Front Range</span>
            </div>
            <div className="line">
              <span className="lbl">Serves</span>
              <span className="val" style={{ fontSize: 18 }}>Denver, Boulder, Aspen, Telluride & beyond</span>
            </div>
          </div>

          <form className="form" onSubmit={submit}>
            <div className="row">
              <label>Event type</label>
              <div className="event-types">
                {types.map((t) => (
                  <label key={t} className={form.eventType === t ? "active" : ""}>
                    <input type="radio" name="type" value={t} checked={form.eventType === t} onChange={() => update("eventType", t)} />
                    {t}
                  </label>
                ))}
              </div>
            </div>

            <div className="row two">
              <div className="row">
                <label>Your name</label>
                <input required value={form.name} onChange={(e) => update("name", e.target.value)} placeholder="First & last" />
              </div>
              <div className="row">
                <label>Email</label>
                <input required type="email" value={form.email} onChange={(e) => update("email", e.target.value)} placeholder="you@example.com" />
              </div>
            </div>

            <div className="row two">
              <div className="row">
                <label>Phone (optional)</label>
                <input value={form.phone} onChange={(e) => update("phone", e.target.value)} placeholder="(303) 555-0123" />
              </div>
              <div className="row">
                <label>Event date</label>
                <input type="date" value={form.date} onChange={(e) => update("date", e.target.value)} />
              </div>
            </div>

            <div className="row two">
              <div className="row">
                <label>Guest count</label>
                <input value={form.guests} onChange={(e) => update("guests", e.target.value)} placeholder="e.g. 120" />
              </div>
              <div className="row">
                <label>Venue / location</label>
                <input value={form.venue} onChange={(e) => update("venue", e.target.value)} placeholder="City or venue" />
              </div>
            </div>

            <div className="row">
              <label>Which project are you thinking about?</label>
              <select value={form.project} onChange={(e) => update("project", e.target.value)}>
                <option value="">Pick one…</option>
                {projects.map((p) => <option key={p}>{p}</option>)}
              </select>
            </div>

            <div className="row">
              <label>Tell us about the event</label>
              <textarea
                value={form.details}
                onChange={(e) => update("details", e.target.value)}
                placeholder="Ceremony music, cocktail hour, first dance, dinner, anything you've imagined so far."
              />
            </div>

            <button className="btn btn-primary submit" type="submit">
              Send inquiry →
            </button>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-soft)" }}>
              We respond within 1 business day · No spam, ever.
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

window.Contact = Contact;