/* Shared components for the Sevil Dolmacı Gallery prototype */
const { useState, useEffect, useMemo, useRef } = React;

// ---------------- Router (hash) ----------------
function useHashRoute() {
  const [hash, setHash] = useState(window.location.hash || "#/");
  useEffect(() => {
    const onChange = () => {
      setHash(window.location.hash || "#/");
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onChange);
    return () => window.removeEventListener("hashchange", onChange);
  }, []);
  const parts = hash.replace(/^#\//, "").split("/").filter(Boolean);
  return { hash, route: parts[0] || "home", sub: parts[1] };
}

function Link({ to, children, className, ...rest }) {
  return (
    <a
      href={"#/" + to}
      className={className}
      onClick={(e) => {
        // allow modifier-clicks
        if (e.metaKey || e.ctrlKey || e.shiftKey) return;
      }}
      {...rest}
    >
      {children}
    </a>
  );
}

// ---------------- Icons ----------------
const Icon = {
  Arrow: (p) => (
    <svg className="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>
  ),
  ArrowSmall: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <path d="M7 17L17 7M9 7h8v8" />
    </svg>
  ),
  Search: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" />
    </svg>
  ),
  Plus: (p) => (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1" {...p}>
      <path d="M6 0v12M0 6h12" />
    </svg>
  ),
};

// ---------------- Top Bar ----------------
function TopBar() {
  const [lang, setLang] = useState("EN");
  return (
    <div className="top-bar">
      <div className="links">
        <span>Istanbul &nbsp;10:30 — 18:00</span>
        <span style={{ color: "var(--border-strong)" }}>·</span>
        <span>Dubai &nbsp;10:00 — 19:00</span>
      </div>
      <div className="links">
        <a href="#/exhibitions/european-art-ii"><span className="dot" style={{ color: "var(--accent)" }}>●</span>&nbsp; Now on view — European Art&nbsp;II</a>
      </div>
      <div className="locale" role="group" aria-label="Language">
        {["EN", "TR", "AR"].map((l, i) => (
          <React.Fragment key={l}>
            {i > 0 && <span className="sep">/</span>}
            <button className={lang === l ? "active" : ""} onClick={() => setLang(l)}>{l}</button>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

// ---------------- Nav ----------------
function Nav({ route }) {
  const items = [
    ["exhibitions", "Exhibitions"],
    ["artists", "Artists"],
    ["publications", "Publications"],
    ["fairs", "Fairs"],
    ["press", "Press"],
    ["about", "About"],
    ["contact", "Contact"],
  ];
  return (
    <header className="nav">
      <div className="nav-inner">
        <a href="#/" className="brand" aria-label="Sevil Dolmacı home">
          SEVİL DOLMACI<span className="dot">.</span>
        </a>
        <nav>
          <ul>
            {items.map(([slug, label]) => (
              <li key={slug}>
                <a href={"#/" + slug} className={route === slug ? "active" : ""}>{label}</a>
              </li>
            ))}
          </ul>
        </nav>
        <div className="right">
          <a href="#" className="search" aria-label="Search"><Icon.Search /></a>
          <a href="#/contact" className="enq">Enquire</a>
        </div>
      </div>
    </header>
  );
}

// ---------------- Footer ----------------
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="grid">
          <div>
            <div className="brand-lg">Sevil Dolmacı</div>
            <div className="sub-line">A contemporary art gallery between Istanbul and Dubai — a bridge between the Western art world and the Middle East.</div>
            <div style={{ marginTop: 28 }}>
              <h4>Newsletter</h4>
              <form className="ml" onSubmit={(e) => { e.preventDefault(); alert("Subscribed (prototype)."); }}>
                <input type="email" placeholder="your@email.com" required />
                <button type="submit">Subscribe →</button>
              </form>
            </div>
          </div>

          <div>
            <h4>Istanbul</h4>
            <div className="addr">
              <strong>Villa Ipranosyan</strong><br />
              Cihannüma Mah., Çömezler Sk.<br />
              No: 16, Beşiktaş / İstanbul<br /><br />
              +90 (212) 258 95 85<br />
              info@sevildolmaci.com<br /><br />
              Tue — Sat &nbsp;10:30 — 18:00<br />
              Mon by appointment
            </div>
          </div>

          <div>
            <h4>Dubai</h4>
            <div className="addr">
              <strong>Dubai Design District</strong><br />
              Building R04, 11<br />
              Dubai, UAE<br /><br />
              +971 58 571 61 86<br />
              dubai@sevildolmaci.com<br /><br />
              Tue — Sat &nbsp;10:00 — 19:00<br />
              Mon by appointment
            </div>
          </div>

          <div>
            <h4>Contacts</h4>
            <ul>
              <li><a href="mailto:sales@sevildolmaci.com">sales@sevildolmaci.com &nbsp;— availability</a></li>
              <li><a href="mailto:press@sevildolmaci.com">press@sevildolmaci.com &nbsp;— media</a></li>
              <li><a href="mailto:dubai@sevildolmaci.com">dubai@sevildolmaci.com &nbsp;— Dubai</a></li>
              <li><a href="mailto:info@sevildolmaci.com">info@sevildolmaci.com &nbsp;— general</a></li>
            </ul>
            <h4 style={{ marginTop: 28 }}>Elsewhere</h4>
            <ul>
              <li><a href="#" className="link-u">Instagram <span style={{opacity:.5}}>↗</span></a></li>
              <li><a href="#" className="link-u">Artsy <span style={{opacity:.5}}>↗</span></a></li>
              <li><a href="#" className="link-u">Artfacts <span style={{opacity:.5}}>↗</span></a></li>
              <li><a href="#" className="link-u">YouTube <span style={{opacity:.5}}>↗</span></a></li>
            </ul>
          </div>
        </div>

        <div className="legal">
          <div>© 2026 Sevil Dolmacı Gallery — Founded 2017</div>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="#">Privacy</a>
            <a href="#">Imprint</a>
            <a href="#">Press kit</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ---------------- Image with credit ----------------
function ImgFig({ src, alt, credit, className, aspect = "4x3", zoom = true }) {
  return (
    <div className={"img-wrap" + (zoom ? " zoom" : "") + " aspect-" + aspect + (className ? " " + className : "")}>
      {src ? <img src={src} alt={alt || ""} loading="lazy" /> : null}
      {credit && <span className="credit-overlay">{credit}</span>}
    </div>
  );
}

// ---------------- Credit line (block) ----------------
function CreditLine({ artist, title, year, medium, courtesy }) {
  return (
    <div className="credit">
      <strong style={{ fontStyle: "normal", color: "var(--secondary)" }}>{artist}</strong>
      {title ? <>, <em>{title}</em></> : null}
      {year ? <>, {year}</> : null}
      {medium ? <>. {medium}</> : null}
      {courtesy ? <>. {courtesy}</> : <>. Courtesy of the artist and Sevil Dolmacı Gallery.</>}
    </div>
  );
}

// ---------------- Exhibition card ----------------
function ExhibitionCard({ ex, large }) {
  return (
    <a href={"#/exhibitions/" + ex.slug} className="ex-card">
      <ImgFig src={ex.cover} aspect={large ? "4x3" : "3x4"} alt={ex.title} />
      <div className="meta" style={{ marginBottom: 8 }}>
        {ex.status === "current" ? <span className="pill live" style={{marginRight: 8}}><span className="dot"></span> Now on view</span> : null}
        {ex.city} · {ex.space}
      </div>
      <h3 className="title">
        <em>{ex.title}</em>
      </h3>
      <div className="who">{ex.curator}</div>
      <div className="dates">{ex.start} — {ex.end}</div>
    </a>
  );
}

// ---------------- Section Head ----------------
function SectionHead({ kicker, title, rightLabel, rightHref }) {
  return (
    <div className="sec-head">
      <div>
        {kicker && <div className="eyebrow"><span className="dot"></span>{kicker}</div>}
        <h2 className="title h2" style={{ marginTop: 14 }}>{title}</h2>
      </div>
      {rightLabel && (
        <a href={rightHref} className="meta-right btn-arrow">
          <span className="ln"></span>
          {rightLabel}
        </a>
      )}
    </div>
  );
}

// ---------------- Publication Card ----------------
function PublicationCard({ pub }) {
  return (
    <div className="pub-card">
      <div className={"img-wrap aspect-5x7"}>
        <div className={"pub-cover cover-" + (pub.cover || "default")}>
          <div>
            <div className="pc-artist">{pub.artist}</div>
            <div className="pc-rule"></div>
          </div>
          <div>
            <div className="pc-title">{pub.title}</div>
            <div className="pc-rule"></div>
            <div className="pc-meta">Sevil Dolmacı Editions · {pub.year}</div>
          </div>
        </div>
      </div>
      <div className="pc-foot">
        <span className="pc-title-link" style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 18, color: "var(--primary)", letterSpacing: 0 }}>
          {pub.title}
        </span>
        <span>{pub.year} · {pub.pages} pp</span>
      </div>
      <div style={{ marginTop: 8 }}>
        <a href="#/contact" className="link-bronze" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase" }}>Request catalogue</a>
      </div>
    </div>
  );
}

// ---------------- Marquee ----------------
function ArtistMarquee({ artists }) {
  const list = useMemo(() => [...artists, ...artists, ...artists].map(a => a.name), [artists]);
  return (
    <div className="marquee" aria-hidden>
      <div className="marquee-track">
        {list.map((n, i) => (
          <span key={i}>{n}<span className="dot"> ◆ </span></span>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  useHashRoute, Link, TopBar, Nav, Footer, ImgFig, CreditLine, ExhibitionCard,
  SectionHead, PublicationCard, ArtistMarquee, Icon,
});
