// ─────────── East Wind Social Club — Contact ───────────

const CONTACT_LINES = [
  ["General", "hello@eastwindsocialclub.com", "Anything and everything — we read every note."],
  ["Orders & returns", "care@eastwindsocialclub.com", "Sizing, shipping, and the 東 hangtag returns."],
  ["A table in your city", "tables@eastwindsocialclub.com", "Host a game, or bring the club to town."],
  ["Press & partnerships", "studio@eastwindsocialclub.com", "Stockists, collaborations, and stories."],
];

const CONTACT_TOPICS = ["Order help", "A piece", "Bring a table", "Press", "Something else"];

function ContactPage({ onNav }) {
  const [topic, setTopic] = useState("Order help");
  const [form, setForm] = useState({ name: "", email: "", message: "" });
  const [sent, setSent] = useState(false);
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    if (!form.name.trim() || !form.email.trim() || !form.message.trim()) return;
    setSent(true);
  };

  return (
    <div className="ew-page ew-contact">
      <header className="ew-pagehead">
        <span className="ew-kicker">Contact</span>
        <h1 className="ew-pagehead__title">Say hello.</h1>
        <p className="ew-pagehead__lede">A question about a piece, an order, or bringing a table to your city — write us a note and a real person will write back. East starts the game; we'd love to hear from you.</p>
      </header>

      <div className="ew-contact__grid">
        {/* ── Details ── */}
        <div className="ew-contact__detail">
          <span className="ew-kicker ew-kicker--gold">Reach the club</span>
          <ul className="ew-contact__list">
            {CONTACT_LINES.map(([label, email, note]) => (
              <li key={label} className="ew-contact__item">
                <span className="ew-contact__label">{label}</span>
                <a className="ew-contact__email" href={"mailto:" + email}>{email}</a>
                <span className="ew-contact__note">{note}</span>
              </li>
            ))}
          </ul>
          <div className="ew-contact__aside">
            <EastMark size={48} ring="var(--rope-deep)" char="var(--navy)" />
            <p>The studio reads notes Monday–Friday and writes back within two business days. For a table in a city we haven't announced yet, <button className="ew-contact__inline" onClick={() => onNav({ name: "cities", focus: "request" })}>request your city →</button></p>
          </div>
        </div>

        {/* ── Form ── */}
        <div className="ew-contact__panel">
          {sent ? (
            <div className="ew-contact__done">
              <EastMark size={64} ring="var(--rope)" char="var(--cream)" />
              <h3>Note received.</h3>
              <p>Thank you, <em>{form.name.split(" ")[0] || "friend"}</em>. We'll write back within two business days.</p>
              <button className="ew-contact__again" onClick={() => { setSent(false); setForm({ name: "", email: "", message: "" }); }}>Send another note</button>
            </div>
          ) : (
            <form className="ew-contact__form" onSubmit={submit}>
              <span className="ew-kicker">Write the studio</span>
              <label className="ew-contact__field">
                <span>Name</span>
                <input type="text" value={form.name} onChange={set("name")} placeholder="Your name" aria-label="Name" />
              </label>
              <label className="ew-contact__field">
                <span>Email</span>
                <input type="email" value={form.email} onChange={set("email")} placeholder="you@email.com" aria-label="Email" />
              </label>
              <div className="ew-contact__field">
                <span>What's it about?</span>
                <div className="ew-contact__topics">
                  {CONTACT_TOPICS.map(t => (
                    <button type="button" key={t}
                      className={"ew-contact__topic" + (topic === t ? " is-active" : "")}
                      onClick={() => setTopic(t)}>{t}</button>
                  ))}
                </div>
              </div>
              <label className="ew-contact__field">
                <span>Message</span>
                <textarea value={form.message} onChange={set("message")} rows="4" placeholder="Tell us what's on your mind…" aria-label="Message"></textarea>
              </label>
              <Button variant="solid-cream" full type="submit">Send note</Button>
              <p className="ew-contact__fine">We'll only use your email to write back — never to fill your inbox.</p>
            </form>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ContactPage });