// Artwork detail — full-screen lightbox overlay with metadata & enquiry CTA.
function JHArtworkDetail({ id, onClose, onNav, onNavigate }) {
  const { Button, Tag, IconButton } = window.JasminHaasDesignSystem_416321;
  const works = window.JH_ARTWORKS;
  const idx = works.findIndex((w) => w.id === id);
  const w = works[idx];
  if (!w) return null;

  const statusLabel = { available: "Verfügbar", sold: "Verkauft", reserved: "Reserviert" }[w.status];

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") onNavigate((idx + 1) % works.length);
      if (e.key === "ArrowLeft") onNavigate((idx - 1 + works.length) % works.length);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [idx]);

  return (
    <div style={{ position: "fixed", inset: 0, zIndex: 100, display: "flex", animation: "jh-fade var(--dur-base) var(--ease-gallery)" }}>
      <div onClick={onClose} style={{ position: "absolute", inset: 0, background: "var(--scrim-ink)", backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" }} />

      <div style={{ position: "relative", margin: "auto", width: "min(1180px, 94vw)", maxHeight: "92vh", display: "grid", gridTemplateColumns: "1.25fr 1fr", background: "var(--bg-paper)", borderRadius: "var(--radius-md)", overflow: "hidden", boxShadow: "var(--shadow-lg)", animation: "jh-rise var(--dur-slow) var(--ease-gallery)" }}>
        {/* Image */}
        <div style={{ position: "relative", background: "var(--ink-900)", display: "flex", alignItems: "center", justifyContent: "center", padding: "clamp(20px, 4vw, 56px)" }}>
          <img src={w.img} alt={w.title} style={{ maxWidth: "100%", maxHeight: "78vh", objectFit: "contain", boxShadow: "var(--shadow-lg)" }} />
          <div style={{ position: "absolute", left: "20px", bottom: "20px", display: "flex", gap: "8px" }}>
            <IconButton label="Vorheriges Werk" variant="on-ink" round onClick={() => onNavigate((idx - 1 + works.length) % works.length)}>
              <i data-lucide="chevron-left" style={{ width: 18, height: 18 }}></i>
            </IconButton>
            <IconButton label="Nächstes Werk" variant="on-ink" round onClick={() => onNavigate((idx + 1) % works.length)}>
              <i data-lucide="chevron-right" style={{ width: 18, height: 18 }}></i>
            </IconButton>
          </div>
        </div>

        {/* Details */}
        <div style={{ padding: "clamp(28px, 3.5vw, 52px)", display: "flex", flexDirection: "column", overflowY: "auto" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: "0.66rem", fontWeight: 600, letterSpacing: "0.24em", textTransform: "uppercase", color: "var(--text-gold)" }}>
              Werk · {String(idx + 1).padStart(2, "0")} / {String(works.length).padStart(2, "0")}
            </span>
            <IconButton label="Schließen" variant="ghost" onClick={onClose}><i data-lucide="x" style={{ width: 20, height: 20 }}></i></IconButton>
          </div>

          <h2 style={{ margin: "20px 0 0", fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: "clamp(2.4rem, 4vw, 3.4rem)", lineHeight: 1.05, color: "var(--text-primary)" }}>{w.title}</h2>
          <div style={{ display: "flex", gap: "10px", marginTop: "18px", flexWrap: "wrap" }}>
            <Tag variant="status" tone={w.status}>{statusLabel}</Tag>
            <Tag variant="gold">Blattgold</Tag>
          </div>

          <div style={{ marginTop: "30px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px 16px", paddingTop: "24px", borderTop: "1px solid var(--line)" }}>
            {[["Technik", "Acryl & Blattgold"], ["Träger", "Leinwand"], ["Format", w.w], ["Jahr", String(w.year)]].map(([k, v]) => (
              <div key={k}>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: "0.62rem", fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-muted)" }}>{k}</div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: "0.98rem", color: "var(--text-primary)", marginTop: "5px" }}>{v}</div>
              </div>
            ))}
          </div>

          <p style={{ margin: "26px 0 0", fontFamily: "var(--font-sans)", fontSize: "1rem", lineHeight: 1.7, color: "var(--text-secondary)" }}>
            Ein Unikat aus meinem Atelier — Schicht für Schicht in Acryl aufgebaut und mit echtem Blattgold veredelt. Jedes Werk lebt vom Wechsel aus Struktur, Tiefe und schimmerndem Licht.
          </p>

          <div style={{ marginTop: "auto", paddingTop: "30px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "16px", flexWrap: "wrap" }}>
            <div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: "0.62rem", fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-muted)" }}>Preis</div>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "1.6rem", color: w.status === "sold" ? "var(--text-muted)" : "var(--text-gold)" }}>
                {w.status === "sold" ? "Verkauft" : (w.price || "auf Anfrage")}
              </div>
            </div>
            <Button variant={w.status === "sold" ? "outline" : "gold"} size="lg" onClick={() => { onClose(); onNav("contact"); }}>
              {w.status === "sold" ? "Ähnliches anfragen" : "Dieses Werk anfragen"}
            </Button>
          </div>
        </div>
      </div>

      <IconButton label="Schließen" variant="on-ink" round onClick={onClose} style={{ position: "absolute", top: "22px", right: "22px" }}>
        <i data-lucide="x" style={{ width: 20, height: 20 }}></i>
      </IconButton>
    </div>
  );
}
window.JHArtworkDetail = JHArtworkDetail;