/* Portfolio page — reads from CMS portfolio, falls back to static data */

const _cmsPortfolio = window.__CMS__?.portfolio || [];

const PORTFOLIO_DEFAULT = [
  { id:'1', cat:"דגלים",   title:"100 דגלי רחוב",          sub:"עיריית תל אביב יפו",       variant:"stripes", w:2, h:2 },
  { id:'2', cat:"אירועים", title:"טקס יום העצמאות",         sub:"הר הרצל · משרד הביטחון",  variant:"warm",    w:1, h:1 },
  { id:'3', cat:"שילוט",   title:"מתחם הזנק טכניון",        sub:"שילוט חזית + פנים",        variant:"",        w:1, h:1 },
  { id:'4', cat:"טקסטיל",  title:"1,200 חולצות Strauss",    sub:"כנס שנתי לעובדים",         variant:"weave",   w:1, h:2 },
  { id:'5', cat:"דגלים",   title:"דגלי חוף Wix",            sub:"מטה החברה · ת'א",          variant:"stripes", w:1, h:1 },
  { id:'6', cat:"מוסדות",  title:"בית חולים הדסה",           sub:"30 דגלי קומפלקס",          variant:"light",   w:1, h:1 },
  { id:'7', cat:"אירועים", title:"Founders Summit",         sub:"מיתוג מלא + רולאפים",      variant:"warm",    w:2, h:1 },
  { id:'8', cat:"שילוט",   title:"סניף בנק הפועלים",        sub:"חזית + תפאורת לובי",       variant:"",        w:1, h:1 },
  { id:'9', cat:"דגלים",   title:"כנס פתיחת שנה",           sub:"אוניברסיטת ת'א",           variant:"stripes", w:1, h:1 },
  { id:'10',cat:"טקסטיל",  title:"חולצות פולו עירייה",       sub:"עיריית הרצליה · 500 יח",   variant:"weave",   w:1, h:1 },
  { id:'11',cat:"מוסדות",  title:"מיתוג קמפוס Microsoft",   sub:"הרצליה פיתוח",             variant:"",        w:2, h:1 },
  { id:'12',cat:"אירועים", title:"כנס Cyber Tech",          sub:"באנרים + מיתוג ביתן",      variant:"warm",    w:1, h:1 },
];

const PORTFOLIO = _cmsPortfolio.length > 0 ? _cmsPortfolio : PORTFOLIO_DEFAULT;
const ALL_CATS  = ["הכל", ...Array.from(new Set(PORTFOLIO.map(p => p.cat).filter(Boolean)))];

function PortfolioPage() {
  const [mobile, setMobile] = React.useState(false);
  const [filter, setFilter] = React.useState("הכל");
  useReveal();
  const items = filter === "הכל" ? PORTFOLIO : PORTFOLIO.filter(g => g.cat === filter);

  return (
    <React.Fragment>
      <TopBar />
      <Header current="portfolio.html" onMobileOpen={() => setMobile(true)} />
      <MobileMenu open={mobile} onClose={() => setMobile(false)} />
      <main>
        <section className="page-hero">
          <div className="container">
            <div className="breadcrumb">
              <a href="index.html">דף הבית</a><span className="sep">›</span><span>עבודות שלנו</span>
            </div>
            <h1>הפרויקטים שלנו</h1>
            <p>מבחר מהעבודות שעשינו בשנים האחרונות — עיריות, חברות הייטק, מוסדות חינוך וגופי ממשל.</p>
          </div>
        </section>
        <section className="section">
          <div className="container">
            <div className="filters">
              {ALL_CATS.map(f => (
                <button key={f} className={"filter "+(f===filter?"active":"")} onClick={() => setFilter(f)}>{f}</button>
              ))}
            </div>
            <div className="works-grid">
              {items.map((g, i) => (
                <div key={g.id||g.title+i}
                  className={"work-tile "+(g.w===2?"w2 ":"")+(g.h===2?"h2 ":"")}>
                  {g.image
                    ? <img src={g.image} alt={g.title} style={{ width:'100%',height:'100%',objectFit:'cover' }} />
                    : <div className={"ph "+(g.variant||"")} data-label={g.title} />
                  }
                  <div className="label-overlay">
                    <strong>{g.title}</strong>
                    <span>{g.sub}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
        <FinalCTA />
      </main>
      <Footer />
      <StickyWhatsapp />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<PortfolioPage />);