// ─────────── East Wind Social Club — Cities (the club on the road) ───────────

// A round "table" emblem — the brand seal, personalised with the city initial
function CityEmblem({ city }) {
  return (
    <div className="ew-citycard__emblem">
      <svg width="150" height="150" viewBox="0 0 200 200" aria-hidden="true">
        <circle cx="100" cy="100" r="74" fill="none" stroke="var(--navy)" strokeWidth="1.4" />
        <circle cx="100" cy="100" r="66" fill="none" stroke="var(--navy)" strokeWidth="0.5" opacity="0.55" />
        {/* place settings around the table */}
        {[0, 60, 120, 180, 240, 300].map(a => (
          <rect key={a} x="96.5" y="22" width="7" height="11" rx="1.4" fill="var(--navy)" opacity="0.42"
            transform={`rotate(${a} 100 100)`} />
        ))}
        <text x="100" y="124" fontFamily="var(--f-display)" fontStyle="italic" fontWeight="400"
          fontSize="86" fill="var(--navy)" textAnchor="middle">{city.initial}</text>
        <text x="100" y="150" fontFamily="var(--f-han)" fontWeight="700" fontSize="17"
          fill="var(--signal)" textAnchor="middle">東</text>
      </svg>
      <span className="ew-citycard__script">{city.name}</span>
    </div>
  );
}

function CityCard({ city, onReserve, onNav }) {
  const open = city.status === "open";
  return (
    <article className={"ew-citycard" + (open ? "" : " is-soon")}>
      <div className="ew-citycard__media" style={{ background: city.cardBg }}>
        <span className={"ew-citycard__status" + (open ? " is-open" : " is-soon")}>
          {open ? "Seats open" : "Coming soon"}
        </span>
        <span className="ew-citycard__season">{city.season}</span>
        <CityEmblem city={city} />
      </div>
      <div className="ew-citycard__body">
        <div className="ew-citycard__row">
          <h3 className="ew-citycard__name">{city.title}</h3>
          <span className="ew-citycard__region">{city.region}</span>
        </div>
        <div className="ew-citycard__meta">
          <span>{city.date}</span><span className="ew-row__dot">·</span><span>{city.venue}</span>
        </div>
        <p className="ew-citycard__note">{city.note}</p>
        <div className="ew-citycard__foot">
          <Button variant="line" onClick={() => open ? onNav({ name: "club" }) : onReserve(city.name)}>
            {city.cta} →
          </Button>
          <span className={"ew-citycard__seats" + (open ? "" : " is-soon")}>{city.seats}</span>
        </div>
      </div>
    </article>
  );
}

// ─────────── Request your city ───────────
function RequestCity({ prefill }) {
  const [city, setCity] = useState("");
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);

  useEffect(() => { if (prefill) { setCity(prefill); setSent(false); } }, [prefill]);

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

  return (
    <div className="ew-request">
      <div className="ew-request__inner">
        <div className="ew-request__copy">
          <span className="ew-kicker ew-kicker--gold">Request your city</span>
          <h2 className="ew-request__title">Call the club<br />to your table.</h2>
          <p>We open a new city when enough of you ask for it. Tell us where you play and we'll bring the tiles, the rosé, and the line — and write you first when a date is set.</p>
          <div className="ew-request__demand">
            <span className="ew-request__demandlabel">Most-asked next</span>
            <div className="ew-request__chips">
              {REQUESTED_CITIES.map(c => (
                <button type="button" key={c} className="ew-request__chip"
                  onClick={() => { setCity(c); setSent(false); }}>{c}</button>
              ))}
            </div>
          </div>
        </div>

        <div className="ew-request__panel">
          {sent ? (
            <div className="ew-request__done">
              <EastMark size={64} ring="var(--rope)" char="var(--cream)" />
              <h3>You're on the list.</h3>
              <p>We'll write the moment a table opens in <em>{city}</em>. East starts the game.</p>
              <button className="ew-request__again" onClick={() => { setSent(false); setCity(""); setEmail(""); }}>
                Request another city
              </button>
            </div>
          ) : (
            <form className="ew-request__form" onSubmit={submit}>
              <span className="ew-kicker">Add your name</span>
              <label className="ew-request__field">
                <span>Your city</span>
                <input type="text" value={city} onChange={e => setCity(e.target.value)}
                  placeholder="Which city should we visit?" aria-label="City" />
              </label>
              <label className="ew-request__field">
                <span>Email</span>
                <input type="email" value={email} onChange={e => setEmail(e.target.value)}
                  placeholder="you@email.com" aria-label="Email" />
              </label>
              <Button variant="solid-cream" full type="submit">Request a table</Button>
              <p className="ew-request__fine">No card, no commitment — just first word when we set the date.</p>
            </form>
          )}
        </div>
      </div>
    </div>
  );
}

function CitiesPage({ products, onNav, focus }) {
  const tabs = ["All", "Open", "Coming soon"];
  const [filter, setFilter] = useState("All");
  const [prefill, setPrefill] = useState("");
  const reqRef = useRef(null);

  const scrollToRequest = (behavior = "smooth") => {
    const el = reqRef.current;
    if (el) {
      const y = window.scrollY + el.getBoundingClientRect().top - 90;
      window.scrollTo({ top: y, behavior });
    }
  };

  useEffect(() => {
    if (focus === "request") {
      const id = setTimeout(() => scrollToRequest("auto"), 260);
      return () => clearTimeout(id);
    }
  }, [focus]);

  const shown = CITIES.filter(c =>
    filter === "All" ? true : filter === "Open" ? c.status === "open" : c.status === "soon");

  const goRequest = (cityName) => {
    setPrefill(cityName || " ");
    scrollToRequest();
  };

  const linePieces = products.slice(0, 3);

  return (
    <div className="ew-page">
      <header className="ew-pagehead">
        <span className="ew-kicker">The club, on the road</span>
        <h1 className="ew-pagehead__title">A table in every city.</h1>
        <p className="ew-pagehead__lede">East Wind is a label and a club. We bring the Spring line — and a standing table of tiles, rosé, and good company — to one city at a time. Find your table below, or call us to yours.</p>
      </header>

      {/* ── The Line anchor — the thread through every city ── */}
      <section className="ew-cityline">
        <div className="ew-cityline__copy">
          <span className="ew-kicker ew-kicker--gold">The thread</span>
          <h2 className="ew-cityline__title">Every table plays <em>The Line.</em></h2>
          <p>Wherever we set up, the East Wind collection travels with us — winds, flowers, the seasons and a setting sun. Shop from anywhere, then find your city below.</p>
          <Button variant="line" onClick={() => onNav({ name: "the-line" })}>See The Line →</Button>
        </div>
        <div className="ew-cityline__tiles">
          {linePieces.map(p => {
            return (
              <button key={p.id} className="ew-cityline__tile" style={{ background: p.cardBg }}
                onClick={() => onNav({ name: "product", productId: p.id })} aria-label={p.name}>
                <ProductVisual product={p} />
              </button>
            );
          })}
        </div>
      </section>

      {/* ── Whole-hand grid of cities ── */}
      <div className="ew-filter">
        {tabs.map(t => (
          <button key={t} className={"ew-chip" + (filter === t ? " is-active" : "")} onClick={() => setFilter(t)}>{t}</button>
        ))}
        <span className="ew-filter__count">{shown.length} {shown.length === 1 ? "city" : "cities"}</span>
      </div>
      <div className="ew-citygrid">
        {shown.map(c => <CityCard key={c.id} city={c} onNav={onNav} onReserve={goRequest} />)}
      </div>

      {/* ── Request your city ── */}
      <section ref={reqRef} className="ew-request-wrap">
        <RequestCity prefill={prefill} />
      </section>
    </div>
  );
}

Object.assign(window, { CitiesPage, CityCard, RequestCity });