/* Catalog page — shows all product categories */

const CATALOG_PAGE_ITEMS = [
  { name: "דגלים",            sub: "דגלי לאום, מותג ופרסומת",   Img: Prod.Flags },
  { name: "דגלי חוף",         sub: "Beach flags לקידום ומיתוג",   Img: Prod.Beach },
  { name: "רולאפים",          sub: "מסכי תצוגה מודפסים בהתאמה",   Img: Prod.Rollup },
  { name: "חולצות מודפסות",   sub: "טקסטיל ממותג לעובדים",        Img: Prod.TShirt },
  { name: "שילוט פנים וחוץ",  sub: "שלטי חזית, תפאורות, לוגואים", Img: Prod.Sign },
  { name: "מפות שולחן",       sub: "מפות ממותגות לאירועים",       Img: Prod.Tablecloth },
  { name: "מוצרי פרסום",      sub: "Gift sets, gimmicks, מתנות",   Img: Prod.Promo },
  { name: "מיתוג אירועים",    sub: "פתרון 360° מהקונספט להפקה",  Img: Prod.Event },
];

const SOLUTIONS = [
  { ic: "building",   title: "עיריות וגופים ציבוריים",  text: "פתרון רכש מלא עם מנהל לקוח ייעודי, חשבונית פטור, ועמידה בתקנים." },
  { ic: "factory",    title: "חברות הייטק ותעשייה",     text: "מיתוג משרדים, אירועי חברה, גיפטים ממותגים ומיתוג חוץ." },
  { ic: "users",      title: "מוסדות חינוך ואקדמיה",    text: "דגלים, באנרים, חולצות בוגרים ומיתוג קמפוסים." },
  { ic: "spark",      title: "אירועים גדולים והפקות",    text: "פתרון מקצה לקצה — קונספט, ייצור, התקנה ופירוק." },
];

function CatalogPage() {
  const [mobile, setMobile] = React.useState(false);
  useReveal();
  return (
    <React.Fragment>
      <TopBar />
      <Header current="catalog.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="cat-grid">
              {CATALOG_PAGE_ITEMS.map((c, i) => (
                <a key={c.name} href="category.html" className="cat-card reveal" style={{ transitionDelay: `${i * 30}ms` }}>
                  <div className="cat-img"><c.Img /></div>
                  <div className="cat-meta">
                    <h3>{c.name}</h3>
                    <div style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 4 }}>{c.sub}</div>
                    <span className="link">לפרטים נוספים <Icon name="arrow" size={12} /></span>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </section>

        <section className="section" id="business" style={{ background: 'var(--bg)' }}>
          <div className="container">
            <h2 className="section-title">פתרונות לעסקים</h2>
            <div className="section-rule" />
            <p className="section-lead">חבילות שירות ייעודיות לפי סוג הלקוח — עם תהליכים מוסדרים, חשבוניות פטור ועמידה בלוחות זמנים.</p>
            <div className="cat-grid">
              {SOLUTIONS.map((s, i) => (
                <div key={s.title} className="cat-card reveal" style={{ transitionDelay: `${i * 40}ms`, padding: 28 }}>
                  <div style={{ width: 56, height: 56, borderRadius: 14, background: 'rgba(11,45,92,0.06)', color: 'var(--blue)', display: 'grid', placeItems: 'center', marginBottom: 18 }}>
                    <Icon name={s.ic} size={26} />
                  </div>
                  <h3 style={{ fontSize: 19, color: 'var(--blue)', marginBottom: 8, textAlign: 'right' }}>{s.title}</h3>
                  <p style={{ fontSize: 14, color: 'var(--text-2)', margin: 0, lineHeight: 1.7, textAlign: 'right' }}>{s.text}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <FinalCTA />
      </main>
      <Footer />
      <StickyWhatsapp />
    </React.Fragment>
  );
}

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