// Nav, Footer, Enquire drawer — shared chrome
const { useState, useEffect, useRef } = React;

function Wordmark({ size = 22, dark = false }) {
  return (
    <span className="serif" style={{ fontSize: size, letterSpacing: "-0.01em", color: dark ? "var(--dark-text)" : "var(--text)" }}>
      Efie <em style={{ fontStyle: "italic", color: dark ? "var(--mint)" : "var(--primary)" }}>Gallery</em>
    </span>
  );
}

function Nav({ route, goTo, openEnquire }) {
  const [lang, setLang] = useState("EN");
  const links = [
    ["exhibitions", "Exhibitions"],
    ["artists", "Artists"],
    ["viewing-rooms", "Viewing Rooms"],
    ["rekord", "Rekord"],
    ["about", "About"],
    ["visit", "Visit"]
  ];
  const isActive = (key) => {
    if (key === "exhibitions") return route.page === "exhibitions" || route.page === "exhibition";
    if (key === "artists") return route.page === "artists" || route.page === "artist";
    return route.page === key;
  };
  return (
    <header className="nav">
      <div className="nav__inner">
        <a href="#" onClick={(e) => { e.preventDefault(); goTo({ page: "home" }); }} className="nav__wordmark" aria-label="Efie Gallery home">
          <Wordmark />
        </a>
        <nav className="nav__links" aria-label="Primary">
          {links.map(([key, label]) => (
            <a key={key}
               href={"#" + key}
               onClick={(e) => { e.preventDefault(); goTo({ page: key }); }}
               className="nav__link"
               aria-current={isActive(key) ? "page" : undefined}>
              {label}
            </a>
          ))}
        </nav>
        <div className="nav__util">
          <div className="nav__lang" aria-label="Language">
            {["EN","AR","RU","ZH"].map((l) => (
              <button key={l} data-on={lang === l} onClick={() => setLang(l)}>{l}</button>
            ))}
          </div>
          <button className="nav__cta" onClick={() => openEnquire({ kind: "general" })}>
            Enquire <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </header>
  );
}

function Footer({ goTo }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__brand">
            <span className="wordmark">Efie <em>Gallery</em></span>
            <p>Efie is the Twi word for home. A contemporary art gallery at Warehouse 61, Alserkal Avenue — representing and advancing artists of African origin, from the continent and its diaspora.</p>
          </div>
          <div>
            <h4>Programme</h4>
            <ul>
              <li><a onClick={() => goTo({ page: "exhibitions" })} href="#">Exhibitions</a></li>
              <li><a onClick={() => goTo({ page: "artists" })} href="#">Artists</a></li>
              <li><a onClick={() => goTo({ page: "viewing-rooms" })} href="#">Viewing Rooms</a></li>
              <li><a onClick={() => goTo({ page: "rekord" })} href="#">Rekord Gallery</a></li>
            </ul>
          </div>
          <div>
            <h4>Visit</h4>
            <ul>
              <li>Warehouse 61, Alserkal Ave.</li>
              <li>17th St, Al Quoz 1</li>
              <li>Dubai, UAE</li>
              <li>Mon–Sat 11:00–19:00</li>
              <li>Sun by appointment</li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li><a href="mailto:info@efiegallery.com">info@efiegallery.com</a></li>
              <li><a href="tel:+97142524182">+971 (0)4 252 4182</a></li>
              <li><a href="#">Instagram</a></li>
              <li><a href="#">LinkedIn</a></li>
              <li><a href="#">Artsy</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 Efie Gallery</span>
          <span>Site by · Studio</span>
        </div>
      </div>
    </footer>
  );
}

function EnquireDrawer({ enquire, close }) {
  const open = !!enquire;
  const [sent, setSent] = useState(false);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [msg, setMsg] = useState("");
  useEffect(() => { if (!open) { setSent(false); setName(""); setEmail(""); setMsg(""); } }, [open]);
  useEffect(() => {
    function k(e) { if (e.key === "Escape" && open) close(); }
    window.addEventListener("keydown", k); return () => window.removeEventListener("keydown", k);
  }, [open, close]);

  const ctx = enquire || {};
  const kind = ctx.kind || "general";
  const heading = {
    work: "Enquire — Artwork",
    exhibition: "Enquire — Exhibition",
    artist: "Enquire — Artist",
    "viewing-room": "Request access — Viewing Room",
    general: "Enquire"
  }[kind] || "Enquire";

  function submit(e) {
    e.preventDefault();
    setSent(true);
  }

  return (
    <>
      <div className="scrim" data-on={open} onClick={close} aria-hidden={!open}></div>
      <aside className="drawer" data-on={open} aria-hidden={!open} role="dialog" aria-label={heading}>
        <div className="drawer__head">
          <h3>{heading}</h3>
          <button className="drawer__close" onClick={close} aria-label="Close">×</button>
        </div>
        {!sent ? (
          <form className="drawer__body" onSubmit={submit}>
            {ctx.image && (
              <div className="drawer__ctx">
                <img src={ctx.image} alt="" />
                <div>
                  <div className="label">{ctx.label || "Subject"}</div>
                  <div className="name">{ctx.title || "—"}</div>
                  <div className="meta">{ctx.meta || "[credit pending]"}</div>
                </div>
              </div>
            )}
            <div className="drawer__field">
              <label htmlFor="enq-name">Full name</label>
              <input id="enq-name" required value={name} onChange={(e)=>setName(e.target.value)} />
            </div>
            <div className="drawer__field">
              <label htmlFor="enq-email">Email</label>
              <input id="enq-email" type="email" required value={email} onChange={(e)=>setEmail(e.target.value)} />
            </div>
            <div className="drawer__field">
              <label htmlFor="enq-phone">Phone <span style={{textTransform:"none",letterSpacing:0,color:"var(--muted)"}}>· optional</span></label>
              <input id="enq-phone" />
            </div>
            <div className="drawer__field">
              <label htmlFor="enq-msg">Message</label>
              <textarea id="enq-msg" rows="4" value={msg} onChange={(e)=>setMsg(e.target.value)} placeholder="A brief note on your interest. A member of the team will be in touch." />
            </div>
            <label className="drawer__consent">
              <input type="checkbox" required />
              <span>I consent to Efie Gallery contacting me about this enquiry. Pricing is on enquiry only.</span>
            </label>
            <button type="submit" className="btn btn--primary drawer__submit">Send enquiry <span className="arrow">→</span></button>
            <p style={{ fontSize: 11, color: "var(--muted)", marginTop: 24, fontFamily: "var(--mono)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
              Discreet · POA · No third-party sharing
            </p>
          </form>
        ) : (
          <div className="drawer__sent">
            <h4>Thank you.</h4>
            <p>A member of the team will be in touch shortly at the email you provided.</p>
            <button onClick={close} className="btn btn--ghost" style={{ marginTop: 36 }}>Close</button>
          </div>
        )}
      </aside>
    </>
  );
}

Object.assign(window, { Nav, Footer, EnquireDrawer, Wordmark });