// GALLERY — Direction B: spacious, minimal, filterable. Masonry of placeholders.
const GAL_ITEMS = [
  { c:'family', t:'משפחה' }, { c:'kids', t:'ילדים' }, { c:'oneyear', t:'גיל שנה' },
  { c:'halake', t:'חלאקה' }, { c:'family', t:'משפחה' }, { c:'outdoor', t:'חוץ' },
  { c:'seasonal', t:'פורים' }, { c:'kids', t:'ילדים' }, { c:'maternity', t:'הריון' },
  { c:'oneyear', t:'סמאש קייק' }, { c:'family', t:'משפחה' }, { c:'outdoor', t:'חוץ' },
  { c:'halake', t:'חלאקה' }, { c:'seasonal', t:'עונתי' }, { c:'kids', t:'ילדים' },
  { c:'family', t:'משפחה' },
];

function GalleryPage(){
  const [cat, setCat] = React.useState('all');
  const items = cat === 'all' ? GAL_ITEMS : GAL_ITEMS.filter(i => i.c === cat);
  const heights = [200,150,170,210,150,180,160,200,150,190];
  return (
    <div className="page">
      <div className="sec" style={{ paddingBottom:16, textAlign:'center' }}>
        <div className="kick" style={{ marginBottom:10 }}>תיק עבודות</div>
        <h1 className="h-display" style={{ fontSize:34, fontWeight:400 }}>הגלריה</h1>
        <p className="lede" style={{ margin:'14px auto 0', maxWidth:300 }}>מבחר מתוך עבודות הסטודיו. בקרוב יוחלף בתמונות נבחרות ועדכניות.</p>
      </div>

      <div className="gal-chips">
        {GAL_CATS.map(c => (
          <button key={c.id} className={'chip' + (cat === c.id ? ' active' : '')}
            onClick={() => setCat(c.id)}>{c.label}</button>
        ))}
      </div>

      <div className="gal-meta">
        <span>FIG. {String(items.length).padStart(2,'0')}</span>
        <span>{GAL_CATS.find(c => c.id === cat).label.toUpperCase()}</span>
      </div>
      <div style={{ height:14 }}></div>

      <div className="gal-grid" key={cat}>
        {items.map((it,i) => (
          <PhotoPlaceholder key={i} className="fade-in" variant="light"
            style={{ animationDelay:(i*0.03)+'s' }}
            h={heights[i % heights.length]} tag="IMG" label={it.t} />
        ))}
      </div>

      <div className="sec warm" style={{ textAlign:'center', marginTop:30 }}>
        <h2 className="h-sec" style={{ marginBottom:16 }}>אהבתם את הסגנון?</h2>
        <p className="body" style={{ margin:'0 auto 20px', maxWidth:290 }}>נשמח לצלם גם אתכם — בקצב רגוע ובאווירה אישית.</p>
        <WAButton variant="btn-rose" />
        <div className="note-after">{PHONE_DISPLAY}</div>
      </div>

      <Footer />
    </div>
  );
}
Object.assign(window, { GalleryPage });