/* global React, ReactDOM, Page, BOOKING_EMAIL */

function Book() {
  const { useState } = React;
  const [form, setForm] = useState({
    name: "", org: "", email: "", date: "", city: "",
    setType: "Headline", crowd: "300", notes: "",
  });
  const [sent, setSent] = useState(false);
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    const subject = `Booking · ${form.org || "DJ Woodi"} · ${form.date || "TBD"}`;
    const lines = [
      `Hi Will,`, ``,
      `I'd like to book DJ Woodi.`, ``,
      `Name: ${form.name}`,
      `Organisation / Venue: ${form.org}`,
      `Reply email: ${form.email}`,
      `Proposed date: ${form.date}`,
      `City: ${form.city}`,
      `Set type: ${form.setType}`,
      `Expected crowd: ${form.crowd}`,
      ``, `Notes:`, form.notes || "(none)",
      ``, `— Sent via djwoodi.fm`,
    ];
    const body = encodeURIComponent(lines.join("\n"));
    window.location.href = `mailto:${BOOKING_EMAIL}?subject=${encodeURIComponent(subject)}&body=${body}`;
    setSent(true);
  };

  return (
    <Page current="book">
      <section className="page section booking" data-screen-label="booking">
        <div className="wrap">
          <header className="page-head">
            <div className="eyebrow">File 06 · Booking</div>
            <h1 className="page-title display">Book the<br/>set</h1>
            <div className="page-meta mono-tiny">
              Reply within 48h &nbsp;·&nbsp;
              Direct · <a href={`mailto:${BOOKING_EMAIL}`}>{BOOKING_EMAIL}</a>
            </div>
          </header>

          <div className="booking-grid">
            <form className="bk-form" onSubmit={submit}>
              <div className="fld">
                <label>01 · Your name</label>
                <input value={form.name} onChange={update("name")} placeholder="A. Promoter" required />
              </div>
              <div className="fld">
                <label>02 · Organisation / venue</label>
                <input value={form.org} onChange={update("org")} placeholder="The Dime" />
              </div>
              <div className="fld col-2">
                <label>03 · Reply email</label>
                <input type="email" value={form.email} onChange={update("email")} placeholder="you@venue.com" required />
              </div>
              <div className="fld">
                <label>04 · Proposed date</label>
                <input value={form.date} onChange={update("date")} placeholder="Fri 12 Sep 2026" />
              </div>
              <div className="fld">
                <label>05 · City</label>
                <input value={form.city} onChange={update("city")} placeholder="Chicago, IL" />
              </div>
              <div className="fld">
                <label>06 · Set type</label>
                <div className="seg">
                  {["Opening", "Headline", "B2B", "All-night"].map(opt => (
                    <button type="button" key={opt}
                      className={form.setType === opt ? "on" : ""}
                      onClick={() => setForm({ ...form, setType: opt })}>{opt}</button>
                  ))}
                </div>
              </div>
              <div className="fld">
                <label>07 · Expected crowd</label>
                <div className="seg">
                  {["100", "300", "800", "2k+"].map(opt => (
                    <button type="button" key={opt}
                      className={form.crowd === opt ? "on" : ""}
                      onClick={() => setForm({ ...form, crowd: opt })}>{opt}</button>
                  ))}
                </div>
              </div>
              <div className="fld col-2">
                <label>08 · Notes</label>
                <textarea rows="4" value={form.notes} onChange={update("notes")}
                  placeholder="Soundsystem, curfew, support DJs, anything Will should know…" />
              </div>
              <div className="bk-foot">
                <small>Opens your email client · sends to {BOOKING_EMAIL}</small>
                <button className="btn" type="submit">
                  {sent ? "Sent ✓" : "Send request"}
                </button>
              </div>
            </form>

            <aside className="bk-side">
              <div className="bk-card">
                <span className="kicker">Direct channels</span>
                <div className="contact-row"><span className="mono-tiny">Booking</span>
                  <span><a className="hl" href={`mailto:${BOOKING_EMAIL}`}>{BOOKING_EMAIL}</a></span></div>
                <div className="contact-row"><span className="mono-tiny">Instagram</span>
                  <span><a className="hl" href="https://www.instagram.com/itsjustwoodi" target="_blank" rel="noopener">@itsjustwoodi</a></span></div>
                <div className="contact-row"><span className="mono-tiny">SoundCloud</span>
                  <span><a className="hl" href="https://soundcloud.com/dj_woodi" target="_blank" rel="noopener">@dj_woodi</a></span></div>
                <div className="contact-row"><span className="mono-tiny">YouTube</span>
                  <span><a className="hl" href="https://www.youtube.com/@DJWoodi" target="_blank" rel="noopener">@DJWoodi</a></span></div>
              </div>
              <div className="bk-card">
                <span className="kicker">Rider · short</span>
                <ul className="rider">
                  <li>Pioneer Flex 10 + Vari Club speaker</li>
                  <li>Or: USB sticks + venue-provided sound</li>
                  <li>Booth power, 1× outlet, small table</li>
                  <li>Bottled water, friendly crowd</li>
                </ul>
              </div>
            </aside>
          </div>

          <div className="page-nav">
            <a href="/friends">← Friends</a>
            <a href="/">Home →</a>
          </div>
        </div>
      </section>
    </Page>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Book />);