const GALLERY = [
  { cls:"g-1", src:"anna_gal_chrome_blush.png",   bg:"#E9C9C1", accent:"#9A5550", cat:"art",    label:"Chrome blush · авторский" },
  { cls:"g-2", src:"anna_gal_olive_milk.png",     bg:"#DCE0D1", accent:"#6B7259", cat:"nude",   label:"Olive milk" },
  { cls:"g-3", src:"anna_gal_soft_french.png",    bg:"#C4B89A", accent:"#8B6F5A", cat:"french", label:"Soft french" },
  { cls:"g-4", src:"anna_gal_gilded_night.png",   bg:"#1C1A15", accent:"#C9A96A", cat:"art",    label:"Gilded night" },
  { cls:"g-5", src:"anna_gal_milk_rose.png",      bg:"#FDF6F2", accent:"#E9C9C1", cat:"nude",   label:"Milk rose" },
  { cls:"g-6", src:"anna_gal_bordeaux_ombre.png", bg:"#B87A7C", accent:"#3A2A2A", cat:"ombre",  label:"Bordeaux ombre" },
  { cls:"g-7", src:"anna_gal_olive_tip.png",      bg:"#EEE8DA", accent:"#6B7259", cat:"french", label:"Olive tip" },
  { cls:"g-8", src:"anna_gal_pearl_drops.png",    bg:"#2B2320", accent:"#D49A96", cat:"art",    label:"Pearl drops" },
  { cls:"g-9", src:"anna_gal_sage_fade.png",      bg:"#C7D4C3", accent:"#4F553E", cat:"ombre",  label:"Sage fade" },
];

const Gallery = () => {
  const [lightbox, setLightbox] = React.useState(null);

  return (
    <section className="section shell" id="gallery">
      <div className="section-head">
        <div>
          <div className="overline">Портфолио · 2024–2026</div>
          <h2>Работы, которыми <em style={{fontFamily:"var(--serif)",fontStyle:"italic",color:"var(--olive)"}}>горжусь</em>.</h2>
        </div>
        <p>Живая лента в <a href="#" style={{color:"var(--olive)"}}>@anna.kovaleva.nails</a> — здесь только избранное за последний сезон.</p>
      </div>

      <div className="gallery-grid">
        {GALLERY.map((g, i) => (
          <div key={i} className={`g-item ${g.cls}`}
               onClick={() => setLightbox(g)}>
            <NailPlaceholder src={g.src} bg={g.bg} accent={g.accent} label=""/>
          </div>
        ))}
      </div>

      {lightbox && (
        <div onClick={()=>setLightbox(null)}
          style={{position:"fixed",inset:0,background:"rgba(28,26,21,.85)",zIndex:100,display:"grid",placeItems:"center",padding:40,cursor:"zoom-out",backdropFilter:"blur(8px)"}}>
          <div style={{width:"min(600px, 100%)", aspectRatio:"4/5", borderRadius:20, overflow:"hidden"}}>
            <NailPlaceholder src={lightbox.src} bg={lightbox.bg} accent={lightbox.accent} label=""/>
          </div>
          <button onClick={()=>setLightbox(null)}
            style={{position:"absolute",top:24,right:24,background:"var(--paper)",border:"none",width:48,height:48,borderRadius:"50%",cursor:"pointer",display:"grid",placeItems:"center"}}>
            <Icon name="x" size={18}/>
          </button>
        </div>
      )}
    </section>
  );
};

Object.assign(window, { Gallery });