/* app.jsx — shell, hero variants, narrative sections, tweaks, theming */

const { useState: useS, useEffect: useE, useRef: useR } = React;
const S = window.SITE;
const U = S.ui;
const tr = (v, lang) => window.L(v, lang);

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "stage",
  "theme": "dark",
  "accent": "bronze"
}/*EDITMODE-END*/;

/* ---------- language (default Hebrew, persisted) ---------- */
function useLang() {
  const [lang, setLang] = useS(() => {
    try { return localStorage.getItem("ybd-lang") || "he"; } catch (e) { return "he"; }
  });
  useE(() => {
    try { localStorage.setItem("ybd-lang", lang); } catch (e) {}
    const el = document.documentElement;
    el.lang = lang;
    el.dir = lang === "he" ? "rtl" : "ltr";
  }, [lang]);
  return [lang, setLang];
}

/* apply theme + accent to :root so fixed overlays inherit too */
function useTheme(themeKey, accentKey) {
  useE(() => {
    const t = THEMES[themeKey] || THEMES.light;
    const r = document.documentElement.style;
    r.setProperty("--paper", t.paper);
    r.setProperty("--paper-2", t.paper2);
    r.setProperty("--paper-3", t.paper3);
    r.setProperty("--ink", t.ink);
    r.setProperty("--ink-soft", t.inkSoft);
    r.setProperty("--ink-faint", t.inkFaint);
    r.setProperty("--line", t.line);
    r.setProperty("--line-2", t.line2);
    r.setProperty("--accent", ACCENTS[accentKey] || ACCENTS.bronze);
    r.setProperty("--accent-ink", t.accentInk);
  }, [themeKey, accentKey]);
}

/* ---------- LANGUAGE SWITCHER ---------- */
function LangSwitch({ lang, onLang }) {
  const opts = [["he","עב"],["en","EN"]];
  return (
    <div className="langswitch" role="group" aria-label="Language">
      {opts.map(([code,glyph]) => (
        <button key={code} onClick={()=>onLang(code)}
          aria-pressed={lang===code}
          className={"langbtn" + (lang===code ? " on" : "")}
          title={code==="he" ? "עברית" : "English"}>
          {glyph}
        </button>
      ))}
      <style>{`
        .langswitch{display:flex; align-items:center; border:1px solid var(--line); border-radius:99px; overflow:hidden;}
        .langbtn{all:unset; cursor:pointer; min-width:34px; height:28px; display:flex; align-items:center; justify-content:center;
          font-family:"Assistant","Hanken Grotesk",sans-serif; font-size:12px; font-weight:600; letter-spacing:.02em; line-height:1; color:var(--ink-faint);
          transition:color .3s var(--ease), background .3s var(--ease);}
        .langbtn.on{color:var(--accent-ink); background:var(--accent);}
        .langbtn:not(.on):hover{color:var(--ink);}
      `}</style>
    </div>
  );
}

/* ---------- NAV ---------- */
function Nav({ onJump, lang, onLang }) {
  const [solid, setSolid] = useS(false);
  useE(() => {
    const onScroll = () => setSolid(window.scrollY > 80);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [["work"],["about"],["exhibitions"],["contact"]];
  return (
    <header style={{ position:"fixed", top:0, insetInlineStart:0, insetInlineEnd:0, zIndex:90,
      transition:"background .5s var(--ease), border-color .5s var(--ease)",
      background: solid ? "color-mix(in srgb, var(--paper) 86%, transparent)" : "transparent",
      backdropFilter: solid ? "blur(12px)" : "none",
      borderBottom: `1px solid ${solid ? "var(--line)" : "transparent"}` }}>
      <nav className="container" style={{ display:"flex", alignItems:"center", justifyContent:"space-between",
        height:74 }}>
        <a href="#top" onClick={(e)=>{e.preventDefault();onJump("top");}} style={{ display:"flex", flexDirection:"column", lineHeight:1 }}>
          <span style={{ fontFamily:"var(--font-display)", fontSize:20, letterSpacing:".02em", color:"var(--ink)" }}>{tr(S.artist.name, lang)}</span>
          <span style={{ fontFamily:"var(--font-ui)", fontSize:9.5, letterSpacing:".34em", textTransform:"uppercase", color:"var(--ink-faint)", marginTop:4 }}>{tr(S.artist.role, lang)}</span>
        </a>
        <div style={{ display:"flex", gap:"clamp(14px,2.2vw,36px)", alignItems:"center" }}>
          {links.map(([id]) => (
            <a key={id} href={"#"+id} onClick={(e)=>{e.preventDefault();onJump(id);}}
              className="navlink"
              style={{ fontFamily:"var(--font-ui)", fontSize:13, fontWeight:500, letterSpacing:".04em", color:"var(--ink)", position:"relative", paddingBottom:3, whiteSpace:"nowrap" }}>
              {tr(U.nav[id], lang)}
            </a>
          ))}
          <LangSwitch lang={lang} onLang={onLang} />
        </div>
      </nav>
      <style>{`.navlink::after{content:"";position:absolute;inset-inline-start:0;bottom:0;height:1.5px;width:0;background:var(--accent);transition:width .4s var(--ease);}
      .navlink:hover::after{width:100%;}
      @media(max-width:680px){.navlink{display:none;}}`}</style>
    </header>
  );
}

/* ---------- HERO VARIANTS ---------- */
function HeroEditorial({ onJump, lang }) {
  return (
    <section id="top" style={{ minHeight:"100vh", display:"grid", gridTemplateColumns:"1.05fr 0.95fr",
      alignItems:"stretch" }}>
      <div style={{ display:"flex", flexDirection:"column", justifyContent:"center", padding:"120px var(--gutter) 80px",
        gap:0, maxWidth:760, marginInlineStart:"auto", width:"100%" }}>
        <span className="eyebrow heroin" style={{ marginBottom:26 }}>{tr(U.heroEyebrow, lang)}</span>
        <h1 className="heroin d1" style={{ fontSize:"clamp(52px,8vw,120px)", color:"var(--ink)", letterSpacing:"-0.01em" }}>
          {tr(S.artist.firstName, lang)}<br/>{tr(S.artist.lastName, lang)}
        </h1>
        <p className="heroin d2" style={{ fontFamily:"Cormorant Garamond", fontStyle:"italic",
          fontSize:"clamp(20px,2.4vw,28px)", color:"var(--ink-soft)", marginTop:28, maxWidth:480, lineHeight:1.4 }}>
          {tr(S.artist.tagline, lang)}
        </p>
        <div className="heroin d3" style={{ display:"flex", gap:18, alignItems:"center", marginTop:42, flexWrap:"wrap" }}>
          <a href="#work" onClick={(e)=>{e.preventDefault();onJump("work");}} style={ctaPrimary}>{tr(U.exploreCta, lang)}</a>
          <a href="#about" onClick={(e)=>{e.preventDefault();onJump("about");}} style={ctaGhost}>{tr(U.theArtistCta, lang)}</a>
        </div>
      </div>
      <div className="heroin d2" style={{ position:"relative", overflow:"hidden", minHeight:420, background:"var(--paper-2)" }}>
        <img src="assets/wood/wood-2.jpg" alt="" style={{ position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover" }} />
        <div style={{ position:"absolute", inset:0, background:"linear-gradient(105deg, var(--paper) -4%, rgba(0,0,0,0) 22%)" }} />
      </div>
    </section>
  );
}

function HeroStage({ onJump, lang }) {
  const figRef = useR(null);
  const scrimRef = useR(null);

  // mouse parallax + scroll drift on the lit sculpture — pure transform, rAF-throttled
  useE(() => {
    const fig = figRef.current;
    if (!fig) return;
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    if (mq.matches) return;
    let mx = 0, my = 0, sy = 0, raf = 0;
    const apply = () => {
      raf = 0;
      fig.style.setProperty("--px", (mx * 16).toFixed(2) + "px");
      fig.style.setProperty("--py", (my * 12 + sy * 0.14).toFixed(2) + "px");
      fig.style.setProperty("--rot", (mx * 2.4).toFixed(2) + "deg");
      if (scrimRef.current) scrimRef.current.style.opacity = String(Math.min(1, 0.5 + sy / 600));
    };
    const queue = () => { if (!raf) raf = requestAnimationFrame(apply); };
    const onMove = (e) => { mx = e.clientX / window.innerWidth - 0.5; my = e.clientY / window.innerHeight - 0.5; queue(); };
    const onScroll = () => { sy = Math.min(window.scrollY, 800); queue(); };
    window.addEventListener("mousemove", onMove, { passive: true });
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); };
  }, []);

  return (
    <section id="top" className="stage" style={{ minHeight:"100vh", position:"relative", display:"flex",
      flexDirection:"column", alignItems:"center", justifyContent:"center", overflow:"hidden", textAlign:"center",
      padding:"120px var(--gutter) 56px" }}>

      {/* warm room glow blooming behind everything */}
      <div className="stage-glow" aria-hidden="true" />

      {/* the lit sculpture — luminous slab masked into the dark, gently breathing */}
      <div ref={figRef} className="stage-fig" aria-hidden="true">
        <div className="stage-fig-float">
          <div className="stage-fig-img">
            <img src="assets/wood/wood-2.jpg" alt="" />
            <span className="stage-sweep" />
          </div>
        </div>
      </div>

      {/* dark scrim that deepens on scroll so text stays legible */}
      <div ref={scrimRef} className="stage-textscrim" aria-hidden="true" />

      {/* foreground content */}
      <span className="eyebrow heroin" style={{ position:"relative", zIndex:3, marginBottom:24, color:"var(--accent)", textShadow:"0 1px 22px rgba(0,0,0,.7)" }}>
        {tr(U.heroEyebrow, lang)}
      </span>
      <h1 className="heroin d1 stage-title" style={{ position:"relative", zIndex:3, fontSize:"clamp(60px,13vw,200px)", color:"var(--ink)", letterSpacing:".005em" }}>
        {tr(S.artist.firstName, lang)} {tr(S.artist.lastName, lang)}
      </h1>
      <p className="heroin d3" style={{ position:"relative", zIndex:3, fontFamily:"Cormorant Garamond", fontStyle:"italic",
        fontSize:"clamp(19px,2.2vw,27px)", color:"var(--ink-soft)", maxWidth:580, marginTop:20, lineHeight:1.42 }}>
        {tr(S.artist.tagline, lang)}
      </p>
      <a href="#work" onClick={(e)=>{e.preventDefault();onJump("work");}} className="heroin d3" style={{ ...ctaPrimary, position:"relative", zIndex:3, marginTop:40 }}>{tr(U.exploreCta, lang)}</a>

      {/* scroll cue */}
      <button onClick={()=>onJump("work")} className="heroin d3 stage-cue" aria-label={tr(U.scroll, lang)}>
        <span className="stage-cue-label">{tr(U.scroll, lang)}</span>
        <span className="stage-cue-line" />
      </button>

      {/* artist portrait — in the studio */}
      <figure className="heroin d3 stage-portrait">
        <div className="stage-portrait-img">
          <img src="assets/artist.jpg" alt={tr(S.artist.name, lang)} />
        </div>
        <figcaption>
          <span className="stage-portrait-name">{tr(S.artist.name, lang)}</span>
          <span className="stage-portrait-sub">{tr(U.inStudio, lang)}</span>
        </figcaption>
      </figure>

      <style>{`
        .stage-glow{position:absolute; inset:-10% -10% -10% -10%; z-index:0; pointer-events:none;
          background:
            radial-gradient(46% 50% at 50% 40%, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 60%),
            radial-gradient(70% 70% at 50% 38%, color-mix(in srgb, var(--paper-3) 90%, var(--accent)) 0%, transparent 62%);
          opacity:0; transform:scale(.9); animation:stageGlowIn 2.2s var(--ease) .1s forwards;}
        .stage-fig{position:absolute; left:50%; top:48%; z-index:1; pointer-events:none;
          width:min(440px,70vw); aspect-ratio:3/4;
          transform:translate(calc(-50% + var(--px,0px)), calc(-50% + var(--py,0px))) rotate(var(--rot,0deg));
          transition:transform .5s var(--ease);}
        .stage-fig-float{width:100%; height:100%; animation:stageFloat 11s ease-in-out 1.4s infinite;}
        .stage-fig-img{position:relative; width:100%; height:100%;
          -webkit-mask-image:radial-gradient(58% 60% at 50% 44%, #000 0%, #000 34%, rgba(0,0,0,.4) 62%, transparent 80%);
                  mask-image:radial-gradient(58% 60% at 50% 44%, #000 0%, #000 34%, rgba(0,0,0,.4) 62%, transparent 80%);
          filter:drop-shadow(0 60px 80px rgba(0,0,0,.6));
          opacity:0; transform:scale(1.08); animation:stageFigIn 2s var(--ease) .35s forwards;}
        .stage-fig-img img{width:100%; height:100%; object-fit:cover;
          filter:saturate(1.06) contrast(1.06) brightness(.96);}
        /* warm spotlight pooled on the figure + dark floor below */
        .stage-fig-img::after{content:""; position:absolute; inset:0;
          background:
            radial-gradient(50% 44% at 50% 34%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 60%),
            linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--paper) 78%, transparent) 100%);
          mix-blend-mode:soft-light;}
        /* slow specular sweep across the carving */
        .stage-sweep{position:absolute; inset:0; pointer-events:none;
          background:linear-gradient(72deg, transparent 38%, rgba(255,244,222,.16) 50%, transparent 62%);
          background-size:240% 100%; background-position:120% 0;
          mix-blend-mode:screen; animation:stageSweep 9s ease-in-out 2.4s infinite;}
        .stage-textscrim{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5;
          background:radial-gradient(62% 56% at 50% 48%, color-mix(in srgb, var(--paper) 80%, transparent) 0%, color-mix(in srgb, var(--paper) 34%, transparent) 46%, transparent 74%);}
        .stage-title{text-shadow:0 2px 40px color-mix(in srgb, var(--paper) 80%, transparent);}
        .stage-cue{all:unset; position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:3;
          display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer; color:var(--ink-faint);}
        .stage-cue:hover{color:var(--accent);}
        .stage-cue-label{font-family:"Hanken Grotesk"; font-size:10px; letter-spacing:.32em; text-transform:uppercase;}
        .stage-cue-line{width:1px; height:46px; background:linear-gradient(var(--ink-faint), transparent);
          transform-origin:top; animation:stageCue 2.4s ease-in-out infinite;}
        .stage-portrait{position:absolute; inset-inline-start:var(--gutter); bottom:34px; z-index:3; margin:0;
          display:flex; align-items:flex-end; gap:14px;}
        .stage-portrait-img{width:96px; height:108px; overflow:hidden; flex:none;
          border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
          box-shadow:0 22px 44px -18px rgba(0,0,0,.7);}
        .stage-portrait-img img{width:100%; height:100%; object-fit:cover; object-position:50% 28%;
          filter:saturate(1.04) contrast(1.03); transition:transform 1.4s var(--ease);}
        .stage-portrait:hover .stage-portrait-img img{transform:scale(1.05);}
        .stage-portrait figcaption{display:flex; flex-direction:column; gap:3px; padding-bottom:6px; text-align:start;}
        .stage-portrait-name{font-family:"Marcellus"; font-size:15px; color:var(--ink);}
        .stage-portrait-sub{font-family:"Hanken Grotesk"; font-size:10px; letter-spacing:.2em;
          text-transform:uppercase; color:var(--ink-faint);}
        @keyframes stageGlowIn{to{opacity:1; transform:scale(1);}}
        @keyframes stageFigIn{to{opacity:1; transform:scale(1);}}
        @keyframes stageFloat{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-16px) rotate(.4deg);}}
        @keyframes stageSweep{0%{background-position:120% 0;} 55%,100%{background-position:-60% 0;}}
        @keyframes stageCue{0%,100%{transform:scaleY(.35); opacity:.5;} 50%{transform:scaleY(1); opacity:1;}}
        @media(prefers-reduced-motion:reduce){
          .stage-glow,.stage-fig-img{opacity:1!important; transform:none!important; animation:none!important;}
          .stage-fig-float,.stage-sweep,.stage-cue-line{animation:none!important;}
        }
        @media(max-width:900px){ .stage-portrait{display:none;} }
      `}</style>
    </section>
  );
}

function HeroIndex({ onJump, lang }) {
  const [hover, setHover] = useS(null);
  return (
    <section id="top" style={{ minHeight:"100vh", display:"flex", flexDirection:"column", justifyContent:"center", padding:"130px 0 70px" }}>
      <div className="container">
        <span className="eyebrow heroin" style={{ marginBottom:30, display:"block" }}>{tr(U.indexEyebrow, lang)}</span>
        <h1 className="heroin d1" style={{ fontSize:"clamp(46px,8.5vw,150px)", color:"var(--ink)", maxWidth:1100, lineHeight:0.98 }}>
          {tr(U.indexTitlePre, lang)}<span className="serif-italic" style={{ color:"var(--accent)" }}>{tr(U.indexTitleEm, lang)}</span>{tr(U.indexTitlePost, lang)}
        </h1>
        <div className="heroin d3" style={{ marginTop:60, borderTop:"1px solid var(--line)" }}>
          {S.materials.map((m, i) => (
            <a key={m.key} href={"#"+m.key} onClick={(e)=>{e.preventDefault();onJump(m.key);}}
              onMouseEnter={()=>setHover(m.key)} onMouseLeave={()=>setHover(null)}
              style={{ display:"grid", gridTemplateColumns:"auto 1fr auto", alignItems:"center", gap:24,
                padding:"22px 4px", borderBottom:"1px solid var(--line)",
                color: hover===m.key ? "var(--accent)" : "var(--ink)",
                transition:"color .3s var(--ease), padding-inline-start .4s var(--ease)", paddingInlineStart: hover===m.key ? 18 : 4 }}>
              <span style={{ fontFamily:"Cormorant Garamond", fontStyle:"italic", fontSize:18, color:MATERIAL_COLOR[m.key], width:34 }}>{String(i+1).padStart(2,"0")}</span>
              <span style={{ fontFamily:"Marcellus", fontSize:"clamp(26px,4vw,48px)" }}>{tr(m.name, lang)}</span>
              <span style={{ fontFamily:"Hanken Grotesk", fontSize:13, color:"var(--ink-faint)" }}>{tr(m.subtitle, lang)}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Hero({ variant, onJump, lang }) {
  const Comp = variant === "stage" ? HeroStage : variant === "index" ? HeroIndex : HeroEditorial;
  return <Comp onJump={onJump} lang={lang} />;
}

/* ---------- ABOUT ---------- */
function About({ lang }) {
  const ref = useReveal();
  return (
    <section ref={ref} id="about" data-screen-label="About" style={{ padding:"clamp(90px,13vh,170px) 0", background:"var(--paper-2)" }}>
      <div className="container" style={{ display:"grid", gridTemplateColumns:"0.85fr 1.15fr", gap:"clamp(36px,6vw,90px)", alignItems:"start" }}>
        <div className="reveal" style={{ position:"sticky", top:110 }}>
          <span className="eyebrow" style={{ color:"var(--accent)" }}>{tr(U.about.eyebrow, lang)}</span>
          <h2 style={{ fontSize:"clamp(34px,4.4vw,62px)", color:"var(--ink)", marginTop:18 }}>{tr(U.about.title, lang)}</h2>
          <div style={{ position:"relative", marginTop:30, width:"100%", maxWidth:300, aspectRatio:"3/4", overflow:"hidden", boxShadow:"0 24px 50px -28px rgba(0,0,0,0.5)" }}>
            <img src="assets/artist.jpg" alt={tr(S.artist.name, lang)} style={{ width:"100%", height:"100%", objectFit:"cover", objectPosition:"50% 22%" }} />
          </div>
          <p style={{ fontSize:14, color:"var(--ink-faint)", marginTop:16, maxWidth:300 }}>
            {tr(U.about.bio, lang)}
          </p>
        </div>
        <div className="reveal" style={{ transitionDelay:"120ms" }}>
          <p style={{ fontFamily:"Cormorant Garamond", fontStyle:"italic", fontSize:"clamp(22px,2.6vw,32px)", lineHeight:1.4, color:"var(--ink)", marginBottom:34 }}>
            {tr(S.artist.statementShort, lang)}
          </p>
          {S.artist.statement.map((para, i) => (
            <p key={i} style={{ fontSize:17, lineHeight:1.78, color:"var(--ink-soft)", marginBottom:20, maxWidth:620 }}>{tr(para, lang)}</p>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- PAINTINGS ---------- */
function Paintings({ lang }) {
  const ref = useReveal();
  const P = U.paintings;
  return (
    <section ref={ref} id="paintings" data-screen-label="Paintings" style={{ padding:"clamp(90px,13vh,170px) 0", background:"var(--paper-2)" }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom:50 }}>
          <span className="eyebrow" style={{ color:"var(--accent)" }}>{tr(P.eyebrow, lang)}</span>
          <h2 style={{ fontSize:"clamp(34px,5vw,68px)", color:"var(--ink)", marginTop:16 }}>{tr(P.title, lang)}</h2>
          <p style={{ fontSize:17, color:"var(--ink-soft)", maxWidth:560, marginTop:18, lineHeight:1.7 }}>{tr(P.desc, lang)}</p>
        </div>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit, minmax(240px, 1fr))", gap:"clamp(22px,3vw,44px)" }}>
          {S.paintings.map((pt, i) => (
            <div key={pt.id} className="reveal" style={{ transitionDelay:`${i*50}ms` }}>
              <div style={{ position:"relative", aspectRatio:"4/3", background:"var(--paper-3)", overflow:"hidden",
                boxShadow:"0 18px 40px -20px rgba(0,0,0,0.45)", marginBottom:18 }}>
                {pt.img
                  ? <img src={pt.img} alt={tr(pt.title, lang)} style={{ width:"100%", height:"100%", objectFit:"cover" }} />
                  : <div style={{ width:"100%", height:"100%", display:"flex", alignItems:"center", justifyContent:"center" }}>
                      <span style={{ fontFamily:"Cormorant Garamond", fontStyle:"italic", fontSize:14, color:"var(--ink-faint)" }}>{tr(P.photo, lang)}</span>
                    </div>
                }
              </div>
              <h3 style={{ fontFamily:"Marcellus", fontSize:"clamp(17px,2vw,22px)", color:"var(--ink)", margin:0 }}>{tr(pt.title, lang)}</h3>
              <p style={{ fontFamily:"Hanken Grotesk", fontSize:13, color:"var(--ink-faint)", marginTop:6 }}>
                {tr(pt.medium, lang)} · {pt.year} · {tr(pt.size, lang)}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- EXHIBITIONS ---------- */
function Exhibitions({ lang }) {
  const ref = useReveal();
  return (
    <section ref={ref} id="exhibitions" data-screen-label="Exhibitions" style={{ padding:"clamp(90px,13vh,170px) 0" }}>
      <div className="container">
        <div className="reveal" style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-end", flexWrap:"wrap", gap:16, marginBottom:50 }}>
          <div>
            <span className="eyebrow" style={{ color:"var(--accent)" }}>{tr(U.exhibitions.eyebrow, lang)}</span>
            <h2 style={{ fontSize:"clamp(34px,5vw,68px)", color:"var(--ink)", marginTop:16 }}>{tr(U.exhibitions.title, lang)}</h2>
          </div>
          <span style={{ fontFamily:"Cormorant Garamond", fontStyle:"italic", fontSize:22, color:"var(--ink-faint)" }}>{tr(U.exhibitions.range, lang)}</span>
        </div>
        <ol style={{ listStyle:"none", margin:0, padding:0 }}>
          {S.exhibitions.map((ex, i) => (
            <li key={i} className="reveal" style={{ transitionDelay:`${i*40}ms`,
              display:"grid", gridTemplateColumns:"96px 1fr auto", gap:24, alignItems:"baseline",
              padding:"22px 0", borderTop:"1px solid var(--line)" }}>
              <span style={{ fontFamily:"Marcellus", fontSize:22, color:"var(--accent)" }}>{ex.year}</span>
              <span style={{ fontSize:"clamp(17px,1.9vw,21px)", color:"var(--ink)" }}>{tr(ex.title, lang)}</span>
              <span style={{ fontFamily:"Hanken Grotesk", fontSize:13.5, color:"var(--ink-faint)", textAlign:"end" }}>
                {[tr(ex.month, lang), tr(ex.place, lang)].filter(Boolean).join(" · ")}
              </span>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ---------- CONTACT ---------- */
function Contact({ lang }) {
  const ref = useReveal();
  const [sent, setSent] = useS(false);
  const c = U.contact;
  return (
    <section ref={ref} id="contact" data-screen-label="Contact" style={{ padding:"clamp(90px,13vh,170px) 0", background:"var(--paper-2)" }}>
      <div className="container" style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"clamp(36px,6vw,80px)" }}>
        <div className="reveal">
          <span className="eyebrow" style={{ color:"var(--accent)" }}>{tr(c.eyebrow, lang)}</span>
          <h2 style={{ fontSize:"clamp(34px,4.6vw,64px)", color:"var(--ink)", marginTop:18, maxWidth:460 }}>
            {tr(c.title, lang)}
          </h2>
          <p style={{ fontSize:17, color:"var(--ink-soft)", marginTop:22, maxWidth:430, lineHeight:1.7 }}>
            {tr(c.desc, lang)}
          </p>
          <div style={{ marginTop:34, display:"grid", gap:14 }}>
            {c.rows.map((row,idx)=>(
              <div key={idx} style={{ display:"grid", gridTemplateColumns:"110px 1fr", gap:16, borderTop:"1px solid var(--line)", paddingTop:14 }}>
                <span className="eyebrow">{tr(row.label, lang)}</span>
                <span style={{ fontSize:16, color:"var(--ink)" }}>{tr(row.value, lang)}</span>
              </div>
            ))}
          </div>
        </div>
        <form className="reveal" onSubmit={(e)=>{e.preventDefault();setSent(true);}} style={{ transitionDelay:"120ms", display:"grid", gap:18, alignContent:"start" }}>
          {[["name",c.nameLabel,"text"],["email",c.emailLabel,"email"]].map(([id,label,type])=>(
            <label key={id} style={{ display:"grid", gap:7 }}>
              <span className="eyebrow">{tr(label, lang)}</span>
              <input required type={type} name={id} style={fieldStyle} />
            </label>
          ))}
          <label style={{ display:"grid", gap:7 }}>
            <span className="eyebrow">{tr(c.messageLabel, lang)}</span>
            <textarea name="message" rows={4} placeholder={tr(c.messagePlaceholder, lang)} style={{ ...fieldStyle, resize:"vertical", fontFamily:"Hanken Grotesk" }} />
          </label>
          <button type="submit" style={{ ...ctaPrimary, border:"none", cursor:"pointer", justifySelf:"start", marginTop:6 }}>
            {sent ? tr(c.sent, lang) : tr(c.send, lang)}
          </button>
        </form>
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */
function Footer({ onJump, lang }) {
  const links = ["work","about","exhibitions","contact"];
  return (
    <footer style={{ padding:"60px 0 50px", borderTop:"1px solid var(--line)" }}>
      <div className="container" style={{ display:"flex", justifyContent:"space-between", alignItems:"center", flexWrap:"wrap", gap:20 }}>
        <div style={{ fontFamily:"Marcellus", fontSize:24, color:"var(--ink)" }}>{tr(S.artist.name, lang)}</div>
        <div style={{ display:"flex", gap:26, flexWrap:"wrap" }}>
          {links.map((id)=>(
            <a key={id} href={"#"+id} onClick={(e)=>{e.preventDefault();onJump(id);}} style={{ fontFamily:"Hanken Grotesk", fontSize:13, color:"var(--ink-faint)" }}>{tr(U.nav[id], lang)}</a>
          ))}
        </div>
        <div style={{ fontFamily:"Hanken Grotesk", fontSize:12, color:"var(--ink-faint)" }}>© {new Date().getFullYear()} · {tr(U.footerCity, lang)}</div>
      </div>
    </footer>
  );
}

/* ---------- shared button styles ---------- */
const ctaPrimary = { fontFamily:"Hanken Grotesk", fontWeight:600, fontSize:13.5, letterSpacing:".04em", whiteSpace:"nowrap",
  background:"var(--accent)", color:"var(--accent-ink)", padding:"15px 30px", display:"inline-block" };
const ctaGhost = { fontFamily:"Hanken Grotesk", fontWeight:600, fontSize:13.5, letterSpacing:".04em", whiteSpace:"nowrap",
  color:"var(--ink)", padding:"15px 26px", border:"1px solid var(--line)", display:"inline-block" };
const fieldStyle = { background:"var(--paper)", border:"1px solid var(--line)", padding:"13px 15px",
  fontSize:15, color:"var(--ink)", fontFamily:"Hanken Grotesk", borderRadius:0, outline:"none" };

/* ---------- APP ---------- */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useLang();
  useTheme(t.theme, t.accent);
  const [active, setActive] = useS(null); // open piece {piece, mkey}

  const jump = (id) => {
    if (id === "top") { window.scrollTo({ top:0, behavior:"smooth" }); return; }
    const el = document.getElementById(id);
    if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 60; window.scrollTo({ top:y, behavior:"smooth" }); }
  };

  return (
    <div>
      <Nav onJump={jump} lang={lang} onLang={setLang} />
      <Hero variant={t.hero} onJump={jump} lang={lang} key={t.hero} />

      <About lang={lang} />

      <section id="work" data-screen-label="Work" style={{ paddingTop:"clamp(40px,7vh,90px)" }}>
        <div className="container" style={{ textAlign:"center", marginBottom:20 }}>
          <span className="eyebrow" style={{ color:"var(--accent)" }}>{tr(U.work.eyebrow, lang)}</span>
          <h2 style={{ fontSize:"clamp(30px,4vw,52px)", color:"var(--ink)", marginTop:16 }}>
            {tr(U.work.titlePre, lang)}<span className="serif-italic">{tr(U.work.titleEm, lang)}</span>
          </h2>
          <p style={{ fontSize:16.5, color:"var(--ink-soft)", maxWidth:560, margin:"18px auto 0", lineHeight:1.7 }}>
            {tr(U.work.desc, lang)}
          </p>
        </div>
        {S.materials.map((m, i) => (
          <MaterialSection key={m.key} material={m} idx={i} dark={t.theme==="dark"} lang={lang}
            onOpen={(p)=>setActive({ piece:p, mkey:m.key })} />
        ))}
      </section>

      <Paintings lang={lang} />
      <Exhibitions lang={lang} />
      <Contact lang={lang} />
      <Footer onJump={jump} lang={lang} />

      {active && <PieceDetail piece={active.piece} mkey={active.mkey} dark={t.theme==="dark"} lang={lang} onClose={()=>setActive(null)} />}

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio label="Layout" value={t.hero} options={["editorial","stage","index"]} onChange={(v)=>setTweak("hero", v)} />
        <TweakSection label="Theme" />
        <TweakRadio label="Mode" value={t.theme} options={["light","dark"]} onChange={(v)=>setTweak("theme", v)} />
        <TweakColor label="Accent" value={ACCENTS[t.accent]}
          options={[ACCENTS.bronze, ACCENTS.stone, ACCENTS.clay, ACCENTS.ink]}
          onChange={(v)=>{ const k = Object.keys(ACCENTS).find(k=>ACCENTS[k]===v) || "bronze"; setTweak("accent", k); }} />
      </TweaksPanel>

      <style>{`
        @keyframes heroRise{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
        .heroin{animation:heroRise 1.1s var(--ease) .06s forwards;}
        .heroin.d1{animation-delay:.14s;} .heroin.d2{animation-delay:.28s;} .heroin.d3{animation-delay:.42s;}
        @media(prefers-reduced-motion:reduce){.heroin{animation:none!important;opacity:1!important;transform:none!important;}}
        @media(max-width:860px){
          section#top{grid-template-columns:1fr!important;}
          [style*="grid-template-columns: 0.85fr"],[style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important;}
        }
      `}</style>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);