/* global React, Link */
const { useState: useStateF } = React;

// ---------- Appointments ----------
function AppointmentsPage() {
  const [submitted, setSubmitted] = useStateF(false);
  return (
    <div data-screen-label="06 Appointments">
      <section className="page-head">
        <div className="container">
          <div>
            <span className="eyebrow">Private hours · d3 atelier</span>
            <h1 style={{ marginTop: 24 }}>Request a private appointment.</h1>
          </div>
          <div className="blurb">
            We hold a small number of private hours at the Dubai Design District atelier each week. Try current pieces, hold the fabric in hand, and place a waitlist for capped silhouettes.
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="form-wrap">
            {!submitted ? (
              <form className="form" onSubmit={e => { e.preventDefault(); setSubmitted(true); }}>
                <div className="field-row">
                  <div className="field">
                    <label htmlFor="ap-first">First name</label>
                    <input id="ap-first" required />
                  </div>
                  <div className="field">
                    <label htmlFor="ap-last">Last name</label>
                    <input id="ap-last" required />
                  </div>
                </div>
                <div className="field-row">
                  <div className="field">
                    <label htmlFor="ap-email">Email</label>
                    <input id="ap-email" type="email" required />
                  </div>
                  <div className="field">
                    <label htmlFor="ap-phone">Phone (with country code)</label>
                    <input id="ap-phone" type="tel" required placeholder="+971 …" />
                  </div>
                </div>
                <div className="field-row">
                  <div className="field">
                    <label htmlFor="ap-date">Preferred date</label>
                    <input id="ap-date" type="date" required />
                  </div>
                  <div className="field">
                    <label htmlFor="ap-time">Preferred time</label>
                    <select id="ap-time" defaultValue="">
                      <option value="" disabled>Choose a window</option>
                      <option>10:00 — 11:30</option>
                      <option>12:00 — 13:30</option>
                      <option>14:30 — 16:00</option>
                      <option>16:30 — 18:00</option>
                    </select>
                  </div>
                </div>
                <div className="field">
                  <label htmlFor="ap-int">Interest</label>
                  <select id="ap-int" defaultValue="collection">
                    <option value="collection">The current collection (Drop 09)</option>
                    <option value="specific">A specific piece</option>
                    <option value="bespoke">Bespoke enquiry</option>
                    <option value="press">Press / editorial</option>
                  </select>
                </div>
                <div className="field">
                  <label htmlFor="ap-msg">A note (optional)</label>
                  <textarea id="ap-msg" rows="4" placeholder="Tell us a little about the occasion, or the pieces you’d like to try." />
                </div>
                <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 16, flexWrap: 'wrap' }}>
                  <button type="submit" className="cta">Request appointment</button>
                  <a href="#" onClick={e => e.preventDefault()} className="cta-ghost">Open in WhatsApp</a>
                </div>
                <span className="flag-note" style={{ marginTop: 8 }}><span className="icon">●</span> Backend pending — Formspree/Netlify + CRM webhook in spec</span>
              </form>
            ) : (
              <div className="form-success">
                <h3>Request received.</h3>
                <p style={{ color: 'var(--muted)', fontSize: 15, margin: 0 }}>
                  The atelier will write back within one working day with a confirmed window. If you prefer to talk first, you’ll get a WhatsApp link in the reply.
                </p>
                <div>
                  <button className="cta-ghost" onClick={() => setSubmitted(false)} style={{ marginTop: 12 }}>Send another</button>
                </div>
              </div>
            )}
            <aside className="form-aside">
              <div>
                <h3>What to expect</h3>
                <p>
                  Private hours, one party at a time. Coffee or karak in the d3 atelier. A small rail with the current drop and any waitlist pieces we’re holding. No-press, no-pressure — try, hold, decide.
                </p>
              </div>
              <div>
                <h3>How we cap</h3>
                <p>
                  If a piece you want is capped, we’ll put you on the list for the next silhouette in that family. We never restock a closed pattern.
                </p>
              </div>
              <div className="kv"><span className="k">Atelier</span><span className="v">Bldg 4, 1F, D3 Street, d3, Dubai</span></div>
              <div className="kv"><span className="k">Hours</span><span className="v">Mon — Sat, by appointment</span></div>
              <div className="kv"><span className="k">Lead time</span><span className="v">≈ 24 hours</span></div>
              <span className="flag-note"><span className="icon">●</span> Hours sourced from directory listing — confirm before publish</span>
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
}

// ---------- Contact ----------
function ContactPage() {
  const [sent, setSent] = useStateF(false);
  return (
    <div data-screen-label="07 Contact">
      <section className="page-head">
        <div className="container">
          <div>
            <span className="eyebrow">Find us · write to us</span>
            <h1 style={{ marginTop: 24 }}>The atelier, in d3.</h1>
          </div>
          <div className="blurb">
            The Cap Project is appointment-led. Drop a line for press, bespoke enquiries, or wholesale; book through the appointments page for a fitting.
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="form-wrap">
            <div>
              <div className="map-block" aria-label="Atelier location — Dubai Design District">
                <div className="map-grid" />
                <div className="map-tag">d3 · Dubai Design District</div>
                <div className="map-pin">
                  <div className="label mono">BLDG 4 · 1F</div>
                  <div className="dot" />
                </div>
              </div>
              <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div style={{ fontFamily: 'Archivo', fontSize: 22, letterSpacing: '-0.01em' }}>
                  The Cap Project Fashion Design L.L.C
                </div>
                <div style={{ color: 'var(--muted)', fontSize: 14, lineHeight: 1.6 }}>
                  Building 4, First Floor<br />
                  D3 Street, Dubai Design District (d3)<br />
                  Zaabeel, Dubai, United Arab Emirates
                </div>
                <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 8 }}>
                  <Link to="/appointments" className="cta">Request a private appointment</Link>
                </div>
                <span className="flag-note" style={{ marginTop: 8 }}><span className="icon">●</span> Phone, email &amp; WhatsApp — withheld until brand confirms</span>
              </div>
            </div>
            <aside className="form-aside" style={{ paddingTop: 0 }}>
              {!sent ? (
                <form className="form" onSubmit={e => { e.preventDefault(); setSent(true); }}>
                  <div>
                    <h3>Write to the atelier</h3>
                    <p>Press, wholesale, bespoke. For fittings, please use the appointments form.</p>
                  </div>
                  <div className="field-row">
                    <div className="field">
                      <label htmlFor="c-name">Name</label>
                      <input id="c-name" required />
                    </div>
                    <div className="field">
                      <label htmlFor="c-org">Organisation (optional)</label>
                      <input id="c-org" />
                    </div>
                  </div>
                  <div className="field">
                    <label htmlFor="c-email">Email</label>
                    <input id="c-email" type="email" required />
                  </div>
                  <div className="field">
                    <label htmlFor="c-int">Subject</label>
                    <select id="c-int" defaultValue="press">
                      <option value="press">Press / editorial</option>
                      <option value="wholesale">Wholesale enquiry</option>
                      <option value="bespoke">Bespoke commission</option>
                      <option value="general">General</option>
                    </select>
                  </div>
                  <div className="field">
                    <label htmlFor="c-msg">Message</label>
                    <textarea id="c-msg" rows="5" required />
                  </div>
                  <button type="submit" className="cta">Send</button>
                </form>
              ) : (
                <div className="form-success">
                  <h3>Sent. Thank you.</h3>
                  <p style={{ color: 'var(--muted)', margin: 0 }}>The atelier replies within two working days.</p>
                </div>
              )}
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AppointmentsPage, ContactPage });