/* Chrome: Navbar, Footer, EnquiryDrawer, MailingList, Closure bar, shared atoms */
const { useState, useEffect, useRef, useMemo } = React;

function Wordmark({ size = 22, className = "" }) {
  return (
    <span className={"wordmark " + className} style={{ fontSize: size }}>
      <span>Taymour Grahne</span>
      <span className="amp">·</span>
      <span style={{ fontStyle: "italic" }}>Projects</span>
    </span>
  );
}

function FootWordmark() {
  return (
    <div className="word">
      Taymour Grahne<span className="amp">·</span><span style={{ fontStyle: "italic" }}>Projects</span>
    </div>
  );
}

function ClosureBar() {
  return (
    <div className="closure-bar">
      <span className="dot"></span>
      Gallery closed for Eid Al Adha · 25 — 31 May 2026 · Reopening Mon 1 June, 11am — Dubai
    </div>
  );
}

function Nav({ route, onRoute, onEnquire, locale, onLocale }) {
  const links = [
    ["exhibitions", "Exhibitions"],
    ["artists", "Artists"],
    ["online", "Online"],
    ["fairs", "Art Fairs"],
    ["press", "Press"],
    ["about", "About"],
    ["contact", "Visit"]
  ];
  return (
    <header className="nav">
      <div className="shell shell-wide">
        <div className="nav-inner">
          <div>
            <button onClick={() => onRoute({ name: "home" })} aria-label="Go to home">
              <Wordmark />
            </button>
          </div>
          <nav className="nav-links" aria-label="Primary">
            {links.map(([k, label]) => (
              <button
                key={k}
                className={route.name === k || (k === "exhibitions" && route.name === "exhibition") || (k === "artists" && route.name === "artist") ? "active" : ""}
                onClick={() => onRoute({ name: k })}
              >
                {label}
              </button>
            ))}
          </nav>
          <div className="nav-right">
            <div className="locale" role="group" aria-label="Locale">
              {["EN", "AR", "RU", "ZH"].map((l) => (
                <button key={l} className={locale === l ? "on" : ""} onClick={() => onLocale(l)}>
                  {l}
                </button>
              ))}
            </div>
            <button className="btn" onClick={() => onEnquire({})}>
              Enquire <span className="arrow">→</span>
            </button>
          </div>
        </div>
      </div>
    </header>
  );
}

function MailingList() {
  const [val, setVal] = useState("");
  const [sent, setSent] = useState(false);
  return (
    <section className="mailing">
      <div className="shell">
        <div className="mailing-grid">
          <div>
            <div className="eyebrow" style={{ color: "rgba(251,251,249,0.55)", marginBottom: 18 }}>
              <span className="dot"></span> Mailing list · For collectors, curators &amp; press
            </div>
            <h3 className="display">
              Quiet dispatch from Dubai<br />
              <span className="italic">&amp; London — five times a year.</span>
            </h3>
          </div>
          <div>
            <form
              onSubmit={(e) => {
                e.preventDefault();
                setSent(true);
              }}
            >
              <input
                type="email"
                placeholder="you@institution.org"
                value={val}
                required
                onChange={(e) => setVal(e.target.value)}
                aria-label="Email"
              />
              <button type="submit">{sent ? "Thank you ✓" : "Subscribe →"}</button>
            </form>
            <div className="mailing-fine">
              Exhibition openings, online presentations, press releases and select viewing-room access.
              No prices, no marketing — written by the gallery, read in five minutes.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ onRoute }) {
  return (
    <footer className="foot">
      <div className="shell">
        <div className="foot-grid">
          <div>
            <FootWordmark />
            <div style={{ fontSize: 13, lineHeight: 1.6, maxWidth: 28 + "ch" }}>
              A project-led contemporary art gallery — Dubai &amp; London — since 2013. Painting-led, working
              across and between the Global South and the West.
            </div>
            <div style={{ marginTop: 18, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.04em" }}>
              info@taymourgrahne.com · +971 4 286 9627
            </div>
          </div>
          <div>
            <h6>Programme</h6>
            <ul>
              <li><a onClick={() => onRoute({ name: "exhibitions" })} href="#">Exhibitions</a></li>
              <li><a onClick={() => onRoute({ name: "artists" })} href="#">Artists (65)</a></li>
              <li><a onClick={() => onRoute({ name: "online" })} href="#">Online presentations</a></li>
              <li><a onClick={() => onRoute({ name: "fairs" })} href="#">Art fairs</a></li>
            </ul>
          </div>
          <div>
            <h6>Gallery</h6>
            <ul>
              <li><a onClick={() => onRoute({ name: "about" })} href="#">About</a></li>
              <li><a onClick={() => onRoute({ name: "press" })} href="#">Press</a></li>
              <li><a onClick={() => onRoute({ name: "contact" })} href="#">Visit · Contact</a></li>
              <li><a href="#">Mailing list</a></li>
            </ul>
          </div>
          <div>
            <h6>Visit</h6>
            <ul>
              <li><span style={{ color: "var(--bg)" }}>Dubai</span></li>
              <li>Warehouse 31A, Lane 4</li>
              <li>Alserkal Avenue, Al Quoz 1</li>
              <li>Mon — Sat · 11am — 7pm</li>
              <li style={{ marginTop: 12 }}><span style={{ color: "var(--bg)" }}>London</span></li>
              <li>Unit 2, Television Centre</li>
              <li>101 Wood Ln · W12 7FA</li>
              <li>By appointment</li>
            </ul>
          </div>
          <div>
            <h6>Elsewhere</h6>
            <ul>
              <li><a href="#">Instagram · @taymourgrahneprojects</a></li>
              <li><a href="#">Artsy partner</a></li>
              <li><a href="#">e-flux directory</a></li>
              <li><a href="#">Press kit · 24.8 MB</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-mini">
          <div>© 2013 — 2026 Taymour Grahne Projects · All artworks © the artists</div>
          <div>Project-led · since 2013 · DXB · LDN</div>
        </div>
      </div>
    </footer>
  );
}

function EnquiryDrawer({ open, context, onClose }) {
  const [sent, setSent] = useState(false);
  useEffect(() => {
    if (open) setSent(false);
  }, [open, context]);
  const ctx = context || {};
  return (
    <React.Fragment>
      <div className={"drawer-scrim " + (open ? "on" : "")} onClick={onClose}></div>
      <aside className={"drawer " + (open ? "on" : "")} aria-hidden={!open}>
        <div className="drawer-head">
          <div className="eyebrow"><span className="dot"></span>Enquiry · POA</div>
          <button onClick={onClose}>Close ✕</button>
        </div>
        <div className="drawer-body">
          {!sent && (
            <React.Fragment>
              <h2 className="display">{ctx.heading || "Request information"}</h2>
              <div className="sub">{ctx.sub || "Discreet · by enquiry only"}</div>
              {ctx.pre && (
                <div className="pre">
                  {ctx.pre.img && <div className="thumb"><img src={ctx.pre.img} alt="" /></div>}
                  <div className="info">
                    <div className="credit">
                      <span className="name">{ctx.pre.artist}</span>
                      <span className="title" style={{ fontStyle: "italic" }}>{ctx.pre.title}</span>
                      {ctx.pre.spec && <div>{ctx.pre.spec}</div>}
                      {ctx.pre.note && <div style={{ marginTop: 4 }}>{ctx.pre.note}</div>}
                    </div>
                  </div>
                </div>
              )}
              <form
                onSubmit={(e) => {
                  e.preventDefault();
                  setSent(true);
                }}
              >
                <div className="row2">
                  <div className="field">
                    <label>First name</label>
                    <input required defaultValue="" />
                  </div>
                  <div className="field">
                    <label>Last name</label>
                    <input required defaultValue="" />
                  </div>
                </div>
                <div className="field">
                  <label>Email</label>
                  <input type="email" required placeholder="you@institution.org" />
                </div>
                <div className="row2">
                  <div className="field">
                    <label>Collector / Institution / Press</label>
                    <input required placeholder="Private collector" />
                  </div>
                  <div className="field">
                    <label>Country</label>
                    <input required placeholder="United Arab Emirates" />
                  </div>
                </div>
                <div className="field">
                  <label>Message (optional)</label>
                  <textarea placeholder="A short note — context, dates, related works, or condition questions."></textarea>
                </div>
                <div className="check">
                  <input type="checkbox" defaultChecked id="ml" />
                  <label htmlFor="ml">Add me to the gallery mailing list (five dispatches per year — no prices, no marketing).</label>
                </div>
                <div className="check">
                  <input type="checkbox" defaultChecked id="dis" />
                  <label htmlFor="dis">I understand artwork details are shared on a discreet, by-enquiry basis.</label>
                </div>
                <button className="btn" type="submit" style={{ width: "100%", justifyContent: "center", marginTop: 8 }}>
                  Send enquiry <span className="arrow">→</span>
                </button>
              </form>
            </React.Fragment>
          )}
          {sent && (
            <div style={{ padding: "40px 0" }}>
              <div className="eyebrow accent" style={{ color: "var(--accent)" }}><span className="dot"></span>Enquiry sent</div>
              <h2 className="display" style={{ marginTop: 14 }}>Thank you.</h2>
              <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 20, color: "var(--secondary)", maxWidth: "40ch" }}>
                A member of the gallery will respond personally within one working day, in confidence.
              </p>
              <div className="meta" style={{ marginTop: 24 }}>
                Reference · TGP-2026-{Math.floor(Math.random() * 9000 + 1000)}<br />
                Routed to · info@taymourgrahne.com<br />
                Gallery hours · Mon–Sat 11–7 (GST)
              </div>
            </div>
          )}
        </div>
        {!sent && (
          <div className="drawer-foot">
            <div className="note">No prices · POA · routed to info@taymourgrahne.com</div>
            <div className="meta">Encrypted</div>
          </div>
        )}
      </aside>
    </React.Fragment>
  );
}

function SectionHead({ num, kicker, title, end }) {
  return (
    <div className="section-head">
      <div>
        <div className="num">{num}</div>
        <div className="eyebrow" style={{ marginTop: 6 }}>{kicker}</div>
      </div>
      <h2>{title}</h2>
      <div className="end">{end}</div>
    </div>
  );
}

function CreditLine({ name, title, year, medium, dims, courtesy, sold }) {
  return (
    <div className="credit-block">
      <div className="name">{name}</div>
      <div className="title">{title}{year ? ", " + year : ""}</div>
      <div className="spec">
        {medium}
        {dims ? " · " + dims : ""}
        <br />© {name}. {courtesy || "Courtesy the artist and Taymour Grahne Projects."}
      </div>
      <div className={"avail " + (sold ? "sold" : "")}>{sold ? "On loan / Sold" : "Enquire · POA"}</div>
    </div>
  );
}

Object.assign(window, { Wordmark, FootWordmark, Nav, MailingList, Footer, EnquiryDrawer, SectionHead, CreditLine, ClosureBar });