/* Homepage sections (reference-styled) */

/* CMS helper */
const _cms_h = window.__CMS__?.content || {};
const _h = (section, key, fallback) => _cms_h[section]?.[key] ?? fallback;

/* =========================================================
   HERO — industrial scene with right-aligned text
========================================================= */
const HeroScene = () => (
  <svg className="hero-illust" viewBox="0 0 600 600" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="machine" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor="#1e3258" />
        <stop offset="60%" stopColor="#0e2148" />
        <stop offset="100%" stopColor="#061528" />
      </linearGradient>
      <linearGradient id="cyl" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#3a4f73" />
        <stop offset="50%" stopColor="#1a2d4d" />
        <stop offset="100%" stopColor="#0a1d3a" />
      </linearGradient>
      <radialGradient id="glow" cx="0.2" cy="0.5">
        <stop offset="0%" stopColor="#D62839" stopOpacity="0.25" />
        <stop offset="100%" stopColor="#D62839" stopOpacity="0" />
      </radialGradient>
    </defs>
    <rect width="600" height="600" fill="url(#machine)" />
    <rect width="600" height="600" fill="url(#glow)" />
    {/* Large printing cylinder on the left */}
    <ellipse cx="60" cy="300" rx="200" ry="200" fill="url(#cyl)" />
    <ellipse cx="60" cy="300" rx="200" ry="200" fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth="2" />
    {/* Cylinder ridges */}
    {Array.from({length: 14}).map((_, i) => (
      <path key={i} d={`M ${-30 + i * 18} 120 Q ${-15 + i * 18} 300 ${-30 + i * 18} 480`} stroke="rgba(255,255,255,0.05)" strokeWidth="1.5" fill="none" />
    ))}
    {/* Israeli flag fabric coming out of cylinder */}
    <g transform="translate(220, 200) rotate(8)">
      <rect x="0" y="0" width="380" height="240" fill="#f4f6fb" opacity="0.95" />
      <rect x="0" y="30" width="380" height="22" fill="#0B2D5C" opacity="0.95" />
      <rect x="0" y="188" width="380" height="22" fill="#0B2D5C" opacity="0.95" />
      {/* Star of David */}
      <g transform="translate(190, 120)" stroke="#0B2D5C" strokeWidth="3" fill="none" opacity="0.95">
        <polygon points="0,-32 27.7,16 -27.7,16" />
        <polygon points="0,32 27.7,-16 -27.7,-16" />
      </g>
      {/* Fabric drape shadow */}
      <rect x="0" y="0" width="380" height="240" fill="url(#fabricShade)" />
    </g>
    <defs>
      <linearGradient id="fabricShade" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#000" stopOpacity="0.05" />
        <stop offset="100%" stopColor="#000" stopOpacity="0.35" />
      </linearGradient>
    </defs>
    {/* Wave folds */}
    <path d="M 220 410 Q 320 430 420 410 Q 500 395 600 405 L 600 600 L 220 600 Z" fill="rgba(0,0,0,0.35)" />
    <path d="M 220 440 Q 320 460 420 440 Q 500 425 600 435" stroke="rgba(255,255,255,0.04)" strokeWidth="2" fill="none" />
    {/* Bottom darken */}
    <rect x="0" y="450" width="600" height="150" fill="url(#bottomFade)" />
    <defs>
      <linearGradient id="bottomFade" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#000" stopOpacity="0" />
        <stop offset="100%" stopColor="#000" stopOpacity="0.5" />
      </linearGradient>
    </defs>
  </svg>
);

function Hero() {
  const title    = _h('hero', 'title',          'מייצרים דגלים ומיתוג\nלעסקים, עיריות וגופים\nמובילים בישראל');
  const subtitle = _h('hero', 'subtitle',       'מפעל כחול־לבן עם ניסיון של מעל 20 שנה בייצור דגלים, שילוט ומוצרי פרסום בהתאמה אישית.');
  const ctaPrimary   = _h('hero', 'ctaPrimaryText',   'קבלו הצעת מחיר');
  const ctaSecondary = _h('hero', 'ctaSecondaryText', 'צפו בקטלוג');
  const bgImage  = _h('hero', 'backgroundImage', null);
  return (
    <section className="hero" data-screen-label="Hero" style={bgImage ? { backgroundImage: `url(${bgImage})`, backgroundSize: 'cover' } : {}}>
      <div className="hero-bg" />
      <div className="hero-scene" />
      {!bgImage && <HeroScene />}
      <div className="hero-overlay" />
      <div className="container hero-inner">
        <div className="hero-content">
          <h1 className="reveal">
            {title.split('\n').map((line, i, arr) => (
              <React.Fragment key={i}>{line}{i < arr.length - 1 && <br />}</React.Fragment>
            ))}
          </h1>
          <p className="hero-sub reveal">{subtitle}</p>
          <div className="hero-cta reveal">
            <a href="contact.html" className="btn btn-primary btn-lg">{ctaPrimary}</a>
            <a href="catalog.html" className="btn btn-dark-outline btn-lg">{ctaSecondary}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   TRUST STRIP — 6 icons centered
========================================================= */
const TRUST_DEFAULT = [
  { ic: "award",        title: "מעל 20 שנות ניסיון" },
  { ic: "starOfDavid",  title: "ייצור כחול־לבן" },
  { ic: "truck",        title: "אספקה לכל הארץ" },
  { ic: "building",     title: "עבודה עם עיריות וחברות" },
  { ic: "edit",         title: "התאמה אישית מלאה" },
  { ic: "headset",      title: "שירות מקצועי ומהיר" },
];
function TrustStrip() {
  const items = (_cms_h.trust && _cms_h.trust.length) ? _cms_h.trust : TRUST_DEFAULT;
  return (
    <section className="trust" data-screen-label="Trust">
      <div className="container">
        <div className="trust-grid">
          {items.map((t, i) => (
            <div className="trust-item reveal" key={i} style={{ transitionDelay: `${i * 40}ms` }}>
              <div className="trust-icon"><Icon name={t.icon || t.ic} size={30} stroke={1.4} /></div>
              <strong>{t.title}</strong>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   CATALOG — 2x4 white cards
========================================================= */
const CATALOG_CARDS = [
  { name: "חולצות מודפסות", Img: Prod.TShirt },
  { name: "רולאפים",        Img: Prod.Rollup },
  { name: "דגלי חוף",       Img: Prod.Beach },
  { name: "דגלים",          Img: Prod.Flags },
  { name: "שילוט",          Img: Prod.Sign },
  { name: "מפות שולחן",     Img: Prod.Tablecloth },
  { name: "מוצרי פרסום",    Img: Prod.Promo },
  { name: "מיתוג אירועים",  Img: Prod.Event },
];
function Catalog() {
  return (
    <section className="section" data-screen-label="Catalog">
      <div className="container">
        <h2 className="section-title">קטלוג המוצרים שלנו</h2>
        <div className="section-rule" />
        <div className="cat-grid">
          {CATALOG_CARDS.map((c, i) => (
            <a key={c.name} href="category.html" className="cat-card reveal" style={{ transitionDelay: `${i * 40}ms` }}>
              <div className="cat-img"><c.Img /></div>
              <div className="cat-meta">
                <h3>{c.name}</h3>
                <span className="link">לפרטים נוספים <Icon name="arrow" size={12} /></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   WHY US — split with collage on right
========================================================= */
function WhyUs() {
  const title   = _h('whyus', 'title', 'לא עוד בית דפוס -\nמפעל ייצור ישראלי ברמה גבוהה');
  const text    = _h('whyus', 'text',  'אנו משלבים טכנולוגיה מתקדמת, חומרי גלם איכותיים ועבודת צוות מקצועית — כדי לספק לכם פתרונות מיתוג, דגלים ושילוט בסטנדרט הגבוה ביותר.');
  const ctaText = _h('whyus', 'ctaText', 'קראו עוד עלינו');
  return (
    <section className="section" data-screen-label="WhyUs">
      <div className="container">
        <div className="whyus-grid">
          <div className="whyus-text reveal">
            <h2>{title.split('\n').map((l,i,a)=><React.Fragment key={i}>{l}{i<a.length-1&&<br/>}</React.Fragment>)}</h2>
            <p>{text}</p>
            <div className="whyus-features">
              <div className="whyus-feat">
                <div className="ic"><Icon name="headset" size={20} /></div>
                <strong>שירות אישי</strong>
                <span>ליווי אישי לכל לקוח<br/>מהרגע הראשון ועד האספקה</span>
              </div>
              <div className="whyus-feat">
                <div className="ic"><Icon name="sliders" size={20} /></div>
                <strong>איכות ללא פשרות</strong>
                <span>חומרי גלם איכותיים<br/>והדפסות בסטנדרט גבוה</span>
              </div>
              <div className="whyus-feat">
                <div className="ic"><Icon name="starFilled" size={20} /></div>
                <strong>עמידה בזמנים</strong>
                <span>אספקה מהירה<br/>בזמן שנקבע</span>
              </div>
            </div>
            <a href="about.html" className="btn btn-primary">{ctaText}</a>
          </div>
          <div className="whyus-collage reveal">
            <div className="ph dark" data-label="image · printing-press.jpg" />
            <div className="ph weave" data-label="image · stitching.jpg" />
            <div className="ph" data-label="image · production.jpg" />
            <div className="ph light" data-label="image · factory-exterior.jpg" />
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   WORKS GALLERY — filterable masonry-grid
========================================================= */
const GALLERY = [
  { cat: "דגלים",    title: "דגלי עיריית ת״א",        sub: "100 דגלי רחוב",   variant: "stripes", h: 1, w: 2 },
  { cat: "אירועים",  title: "טקס יום העצמאות",         sub: "הר הרצל",         variant: "warm",    h: 2, w: 2 },
  { cat: "שילוט",    title: "מתחם הזנק טכניון",         sub: "שילוט פנים",      variant: "",        h: 1, w: 2 },
  { cat: "טקסטיל",   title: "חולצות Strauss",         sub: "1,200 יחידות",    variant: "weave",   h: 1, w: 1 },
  { cat: "דגלים",    title: "דגלי חוף Wix",            sub: "ביתן תערוכה",     variant: "stripes", h: 1, w: 1 },
  { cat: "מוסדות",   title: "בית חולים הדסה",          sub: "30 דגלים",        variant: "light",   h: 1, w: 1 },
  { cat: "אירועים",  title: "Founders Summit",         sub: "מיתוג מלא",       variant: "warm",    h: 1, w: 2 },
  { cat: "שילוט",    title: "סניף בנק הפועלים",        sub: "חזית + פנים",     variant: "",        h: 1, w: 2 },
];
const FILTERS = ["הכל", "דגלים", "שילוט", "אירועים", "טקסטיל", "מוסדות"];

function Works() {
  const [filter, setFilter] = React.useState("הכל");
  const items = filter === "הכל" ? GALLERY : GALLERY.filter(g => g.cat === filter);
  return (
    <section className="section works-bg" data-screen-label="Works">
      <div className="container">
        <h2 className="section-title">עבודות שלנו</h2>
        <div className="section-rule" />
        <div className="filters">
          {FILTERS.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.title}-${i}`} className={"work-tile " + (g.w === 2 ? "w2 " : "") + (g.h === 2 ? "h2 " : "")}>
              <div className={"ph " + g.variant} data-label={`image · ${g.title}`} />
              <div className="label-overlay">
                <strong>{g.title}</strong>
                <span>{g.sub}</span>
              </div>
            </div>
          ))}
        </div>
        <div className="works-more">
          <a href="portfolio.html" className="btn btn-outline btn-lg">צפו בכל העבודות <Icon name="arrow" size={14} /></a>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   CLIENTS — dark blue strip
========================================================= */
const CLIENTS = [
  { name: "עיריית ת״א",    Logo: ClientLogos.TLV },
  { name: "Hadera",        Logo: ClientLogos.Hadera },
  { name: "צה״ל",          Logo: ClientLogos.IDF },
  { name: "משטרת ישראל",   Logo: ClientLogos.Police },
  { name: "אוניברסיטה",    Logo: ClientLogos.University },
  { name: "ממשלת ישראל",   Logo: ClientLogos.Govt },
  { name: "בריאות",        Logo: ClientLogos.Health },
];
function Clients() {
  return (
    <section className="clients" data-screen-label="Clients">
      <div className="container">
        <h2 className="section-title">לקוחות שסומכים עלינו</h2>
        <div className="section-rule" />
        <div className="clients-row">
          {CLIENTS.map((c, i) => (
            <div key={i} className="client-cell" title={c.name}>
              <div className="logo-svg"><c.Logo /></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   TESTIMONIALS
========================================================= */
const TESTI = [
  { quote: "שירות מקצועי, אמינות וזריזות ברמה גבוהה.",                                    name: "עיריית נתניה",   org: "אגף שיווק",          Logo: ClientLogos.TLV },
  { quote: "איכות ההדפסה מעולה ועמידה בזמנים בכל פרויקט.",                                  name: "חברת חשמל",       org: "מח׳ דוברות",         Logo: ClientLogos.Govt },
  { quote: "צוות מקצועי, עבודה חלקית - וחווינו תוצלחה בכל פעם.",                            name: "צה״ל",            org: "דובר צה״ל",          Logo: ClientLogos.IDF },
];
function Testimonials() {
  return (
    <section className="section testi" data-screen-label="Testimonials">
      <div className="container">
        <h2 className="section-title">מה הלקוחות שלנו אומרים</h2>
        <div className="section-rule" />
        <div className="testi-grid">
          {TESTI.map((t, i) => (
            <div key={i} className="t-card reveal" style={{ transitionDelay: `${i * 60}ms` }}>
              <Stars />
              <p className="t-quote">״{t.quote}״</p>
              <div className="t-author">
                <div className="t-logo"><t.Logo /></div>
                <div className="t-author-info">
                  <strong>{t.name}</strong>
                  <span>{t.org}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   PROCESS — red numbered circles 1→5 (RTL: 5 on left, 1 on right)
========================================================= */
const STEPS = [
  { n: 1, title: "שולחים בקשה",    sub: "מתקשרים, טופס או\nאו מגיעים בוואטסאפ" },
  { n: 2, title: "מאפיינים צורך",  sub: "מבצעים יחד עם הצורך\nוהבריף שלכם" },
  { n: 3, title: "עיצוב ואישור",   sub: "מעצבים ומתאמים\nאת התוצר" },
  { n: 4, title: "ייצור מקצועי",   sub: "מיוצרים בסטנדרט גבוה\nובדיוק מלא" },
  { n: 5, title: "אספקה עד הלקוח", sub: "משלוח מהיר\nלכל הארץ" },
];
function Process() {
  // RTL display — show 1 on right; reverse for visual order
  return (
    <section className="section process" data-screen-label="Process">
      <div className="container">
        <h2 className="section-title">תהליך העבודה שלנו</h2>
        <div className="section-rule" />
        <div className="process-grid">
          {STEPS.map((s, i) => (
            <div className="process-step reveal" key={s.n} style={{ transitionDelay: `${i * 70}ms` }}>
              <div className="step-num">{s.n}</div>
              <h4>{s.title}</h4>
              <p>{s.sub}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   FINAL CTA — red gradient with flag
========================================================= */
function FinalCTA() {
  const title      = _h('finalCta', 'title',           'מוכנים להתחיל?');
  const subtitle   = _h('finalCta', 'subtitle',        'שלחו לנו הודעה ונחזור אליכם עם פתרון מקצועי בהתאמה אישית.');
  const ctaWa      = _h('finalCta', 'ctaWhatsappText', 'דברו איתנו בוואטסאפ');
  const ctaPhone   = _h('finalCta', 'ctaPhoneText',    'התקשרו עכשיו');
  const ctaForm    = _h('finalCta', 'ctaFormText',     'שלחו להצעת מחיר');
  const phone      = _h('general',  'phone',           '03-6248480');
  const wa         = (_h('general', 'whatsapp', '050-1234567')).replace(/[^0-9]/g,'').replace(/^0/,'');
  return (
    <section className="final-cta" id="contact" data-screen-label="FinalCTA">
      <div className="final-bg" />
      <div className="final-flag" />
      <div className="container">
        <div className="final-content">
          <h2>{title}</h2>
          <p>{subtitle}</p>
          <div className="final-actions">
            <a href={`https://wa.me/972${wa}`} className="btn btn-whatsapp btn-lg" target="_blank" rel="noopener noreferrer"><Icon name="whatsapp" size={18} /> {ctaWa}</a>
            <a href={`tel:${phone}`} className="btn btn-light-outline btn-lg"><Icon name="phone" size={16} /> {ctaPhone}</a>
            <a href="contact.html" className="btn btn-light-outline btn-lg"><Icon name="edit" size={16} /> {ctaForm}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, TrustStrip, Catalog, WhyUs, Works, Clients, Testimonials, Process, FinalCTA });