// Sections — Salon Crème
const { useState: useStateS, useEffect: useEffectS, useContext: useContextS, useMemo: useMemoS, useRef: useRefS } = React;

// ---------- Hero ----------
window.Hero = function Hero() {
  const slides = [
    [
      "https://images.unsplash.com/photo-1571115177098-24ec42ed204d?auto=format&fit=crop&w=1400&q=85",
      "https://images.unsplash.com/photo-1519915028121-7d3463d20b13?auto=format&fit=crop&w=1400&q=85",
    ],
    [
      "https://images.unsplash.com/photo-1565958011703-44f9829ba187?auto=format&fit=crop&w=1400&q=85",
      "https://images.unsplash.com/photo-1606313564200-e75d5e30476c?auto=format&fit=crop&w=1400&q=85",
    ],
    [
      "https://images.unsplash.com/photo-1623334044303-241021148842?auto=format&fit=crop&w=1400&q=85",
      "https://images.unsplash.com/photo-1535141192574-5d4897c12636?auto=format&fit=crop&w=1400&q=85",
    ],
  ];
  const [idx, setIdx] = useStateS(0);
  const next = () => setIdx(i => (i + 1) % slides.length);
  const prev = () => setIdx(i => (i - 1 + slides.length) % slides.length);

  return (
    <section className="hero-pro">
      <div className="hero-pro-top">
        <h1 className="hero-pro-mark hero-anim" aria-label="Salon Crème">
          <span className="big">SALON</span><span className="small">CR&Egrave;ME</span>
        </h1>
      </div>

      <div className="hero-pro-meta hero-anim-2">
        <div className="hero-pro-copy">
          <p>
            <strong>החנות והקונדיטוריה שלנו;</strong><br/>
            עוגות, מאפים ועוגיות בעבודת יד.<br/>
            חומרי גלם לאפייה, וכלים יפים<br/>
            שאתם לא צריכים אבל חייבים לקחת הביתה.
          </p>
        </div>
        <div className="hero-pro-cta-wrap">
          <button className="cta-solid hero-pro-cta">הזמינו משלוח / איסוף</button>
        </div>
      </div>

      <div className="hero-pro-slider hero-anim-3">
        <button className="hero-pro-nav prev" aria-label="הקודם" onClick={prev}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M15 6l-6 6 6 6"/></svg>
        </button>
        <div className="hero-pro-track">
          {slides[idx].map((src, i) => (
            <div key={i} className="hero-pro-tile">
              <img src={src} alt="" />
            </div>
          ))}
        </div>
        <button className="hero-pro-nav next" aria-label="הבא" onClick={next}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M9 6l6 6-6 6"/></svg>
        </button>
      </div>

      <nav className="cat-strip" aria-label="קטגוריות מהירות">
        {window.SHALEV_DATA.categories.map(c => (
          <a key={c.id} href={`#cat-${c.id}`} onClick={(e) => { e.preventDefault(); document.getElementById('shop')?.scrollIntoView({behavior: 'smooth'}); }}>
            {c.he}
          </a>
        ))}
      </nav>
    </section>
  );
};

// ---------- Categories big grid ----------
window.Categories = function Categories({ setActiveCat }) {
  const cats = window.SHALEV_DATA.categories;
  return (
    <section className="section">
      <div className="container">
        <div className="section-head" data-reveal>
          <h2 className="section-title">התפריט שלנו, <em>שישה פרקים.</em></h2>
          <p className="section-side">כל פרק נכתב מחדש מדי עונה. החומרים הם ההשראה: פירות עונה, חמאה צרפתית, וניל מדגסקר ושוקולד וולרונה.</p>
        </div>
        <div className="cat-grid" data-reveal>
          {cats.map((c, i) => (
            <a key={c.id} className="cat-card" data-reveal-child href={`#cat-${c.id}`} onClick={(e) => { e.preventDefault(); setActiveCat(c.id); document.getElementById('shop')?.scrollIntoView({behavior: 'smooth'}); }}>
              <div className="frame"><img src={c.img} alt={c.he} /></div>
              <div className="label">
                <span className="he">{c.he}</span>
                <span className="num">0{i+1}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- Product grid (shop) ----------
window.Shop = function Shop({ activeCat, setActiveCat, onQuickView }) {
  const cart = useContextS(window.CartCtx);
  const filters = window.SHALEV_DATA.catFilters;
  const all = window.SHALEV_DATA.products;
  const list = useMemoS(() => {
    if (activeCat === 'all') return all;
    return all.filter(p => p.cat === activeCat);
  }, [activeCat, all]);

  return (
    <section className="section section-tight" id="shop" style={{paddingTop:32}}>
      <div className="container">
        <div className="section-head" data-reveal>
          <h2 className="section-title">החנות, <em>היום.</em></h2>
          <div className="cat-pills">
            {filters.map(f => (
              <button key={f.id} className={activeCat === f.id ? "active" : ""} onClick={() => setActiveCat(f.id)}>{f.he}</button>
            ))}
          </div>
        </div>

        <div className="products" data-reveal>
          {list.map(p => (
            <article key={p.id} className="product" data-reveal-child onClick={() => onQuickView(p)}>
              <div className="ph"><img src={p.img} alt={p.name} /></div>
              <button className="add" aria-label="צרו קשר להזמנה"
                      onClick={(e) => { e.stopPropagation(); window.dispatchEvent(new CustomEvent('maison:contact', { detail: { product: p } })); document.getElementById('contact')?.scrollIntoView({behavior:'smooth'}); }}>
                <Icon.Arrow />
              </button>
              {p.badge && <span className={"badge " + (p.badgeKind === "rose" ? "rose" : "")}>{p.badge}</span>}
              <div className="meta">
                <div className="row1">
                  <span className="name">{p.name}</span>
                  <span className="price">‎₪‎{p.price}</span>
                </div>
                <span className="desc">{p.desc}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- Reviews ----------
window.Reviews = function Reviews({ onQuickView }) {
  const products = window.SHALEV_DATA.products;
  const find = (id) => products.find(p => p.id === id);
  const items = [
    { id: "r1", productId: "p1", quote: "הזמנתי ליום ההולדת של בעלי. הוא ירד מהרגליים. עיצוב, טעם, אריזה — הכל בליגה אחרת.", name: "מאיה ב׳", city: "הרצליה" },
    { id: "r2", productId: "p3", quote: "הצ׳יזקייק הכי טוב שטעמתי בארץ. הקרם פשוט נמס בפה, והפירות טריים מהשוק.", name: "יואב ס׳", city: "פתח תקווה" },
    { id: "r3", productId: "p4", quote: "הזמנתי לארוחת ערב חגיגית. כל האורחים ביקשו את הטלפון של הקונדיטוריה לפני שהקפה הוגש.", name: "רוני ל׳", city: "ראשון לציון" },
    { id: "r4", productId: "p8", quote: "מתנת יום הולדת מושלמת לאמא. הקופסה הגיעה כמו תכשיט מבית בוטיק בפריז.", name: "דנה ק׳", city: "גבעתיים" },
    { id: "r5", productId: "p7", quote: "הילדים עוד מדברים על העוגה. לקחו את הרעיון שלי והפכו אותו למשהו שלא ראינו אף פעם.", name: "עידן ר׳", city: "רמת גן" },
    { id: "r6", productId: "p5", quote: "עדינה, מפתיעה ויפה כמו ציור. הזמנתי שוב באותו השבוע — וזה אומר הכל.", name: "תמר א׳", city: "ראשון לציון" },
  ];
  return (
    <section className="section reviews" id="reviews">
      <div className="container">
        <div className="section-head" data-reveal>
          <h2 className="section-title">מה <em>מספרים</em><br/>עלינו.</h2>
          <p className="section-side">אוסף קטן של לקוחות שחזרו אלינו עם מילים יפות, תמונות מהשולחן, וצילומים אחרי החתיכה הראשונה. אתם מוזמנים להוסיף את שלכם.</p>
        </div>
        <div className="reviews-grid" data-reveal>
          {items.map((r) => {
            const p = find(r.productId);
            return (
              <article key={r.id} className="review-card" data-reveal-child onClick={() => p && onQuickView(p)}>
                <div className="review-img"><img src={p?.img} alt={p?.name} /></div>
                <div className="review-body">
                  <div className="stars" aria-label="חמישה כוכבים">
                    {[0,1,2,3,4].map(i => (
                      <svg key={i} width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7 7 .8-5.2 4.7 1.5 7-6.3-3.7L5.7 21l1.5-7L2 9.8 9 9z"/></svg>
                    ))}
                  </div>
                  <p className="review-quote"><span className="qmark">“</span>{r.quote}<span className="qmark close">”</span></p>
                  <div className="review-meta">
                    <span className="who">— {r.name} · {r.city}</span>
                    <span className="prod">{p?.name}</span>
                  </div>
                </div>
              </article>
            );
          })}
        </div>
        <div className="reviews-foot">
          <span className="eyebrow-en">אהבתם? נשמח לקבל את הביקורת שלכם</span>
          <button className="cta-solid" onClick={() => document.getElementById('contact')?.scrollIntoView({behavior:'smooth'})}>שלחו את הסיפור שלכם</button>
        </div>
      </div>
    </section>
  );
};

// ---------- Spotlight feature ----------
window.Spotlight = function Spotlight({ onQuickView }) {
  const products = window.SHALEV_DATA.products;
  const hero = products.find(p => p.id === 'p4');
  return (
    <section className="spotlight">
      <div className="container">
        <div className="spotlight-grid" data-reveal>
          <div>
            <div className="label">פריט הכבוד · גליון 07</div>
            <h3>טארט שוקולד <em>מלוח.</em></h3>
            <p style={{marginTop:24}}>גנאש שוקולד מריר 70% מ‎־Valrhona, על בצק קקאו פריך, מלח ים אפור מבריטני וקצף וניל קר. נחתך ביד, נארז ביד, נאכל לאט.</p>
            <div style={{display:'flex', gap:16, marginTop:32, alignItems:'center'}}>
              <button className="btn-outline-dark" onClick={() => onQuickView(hero)}>הציגו פרטים <Icon.Arrow /></button>
              <span className="eyebrow-en" style={{color:'var(--plum)', opacity:0.7}}>‎₪‎175 · 8 מנות</span>
            </div>
          </div>
          <div className="frame">
            <img src="https://images.unsplash.com/photo-1606313564200-e75d5e30476c?auto=format&fit=crop&w=1200&q=85" alt="טארט שוקולד מלוח" />
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- Tape ----------
window.Tape = function Tape() {
  const phrase = (
    <span>
      Salon Cr&egrave;me <span className="dot"></span>
      ראשון לציון <span className="dot"></span>
      Pâtisserie Artisanale <span className="dot"></span>
      אפוי בעבודת יד <span className="dot"></span>
      Made by hand, daily <span className="dot"></span>
      Vol. 07 · אביב <span className="dot"></span>
    </span>
  );
  return (
    <div className="tape">
      <div className="tape-track">
        {phrase}{phrase}{phrase}
      </div>
    </div>
  );
};

// ---------- Contact ----------
window.Contact = function Contact() {
  const [form, setForm] = useStateS({ name: '', phone: '', email: '', order: '', date: '', notes: '' });
  const [sent, setSent] = useStateS(false);
  const orderRef = useRefS(null);

  useEffectS(() => {
    const h = (e) => {
      const p = e.detail?.product;
      const size = e.detail?.size;
      const qty = e.detail?.qty;
      if (!p) return;
      const parts = [p.name];
      if (size) parts.push(`גודל: ${size}`);
      if (qty && qty > 1) parts.push(`כמות: ${qty}`);
      setForm(f => ({ ...f, order: parts.join(' · ') }));
      setTimeout(() => orderRef.current?.focus(), 600);
    };
    window.addEventListener('maison:contact', h);
    return () => window.removeEventListener('maison:contact', h);
  }, []);

  const update = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = (e) => { e.preventDefault(); setSent(true); setTimeout(() => setSent(false), 4000); };

  return (
    <section className="section contact" id="contact">
      <div className="container">
        <div className="contact-grid" data-reveal>
          <div className="contact-left">
            <span className="eyebrow-en">CONTACT · להזמנת עוגה</span>
            <h2 className="section-title" style={{marginTop:18}}>מה <em>תרצו</em><br/>שאכין?</h2>
            <p className="contact-lead">כל עוגה נאפית במיוחד עבורכם, בהזמנה אישית. השאירו פרטים ואחזור אליכם תוך 24 שעות עם הצעת מחיר ותאריך אספקה.</p>

            <ul className="contact-info">
              <li>
                <span className="k">WhatsApp</span>
                <a className="v" href="https://wa.me/972500000000" target="_blank" rel="noopener">‎+972&nbsp;50&nbsp;000&nbsp;0000</a>
              </li>
              <li>
                <span className="k">דוא״ל</span>
                <a className="v" href="mailto:hello@saloncreme.co.il">hello@saloncreme.co.il</a>
              </li>
              <li>
                <span className="k">איסוף</span>
                <span className="v">ראשון לציון · בתיאום מראש</span>
              </li>
              <li>
                <span className="k">משלוחים</span>
                <span className="v">מרכז הארץ · ימים א׳-ו׳</span>
              </li>
              <li>
                <span className="k">זמן הכנה</span>
                <span className="v">48 שעות מראש · אירועים שבוע</span>
              </li>
            </ul>
          </div>

          <form className="contact-form" onSubmit={submit}>
            <div className="row2">
              <div className="field">
                <label>שם מלא</label>
                <input type="text" required value={form.name} onChange={update('name')} placeholder="איך לפנות אליכם" />
              </div>
              <div className="field">
                <label>טלפון</label>
                <input type="tel" required value={form.phone} onChange={update('phone')} placeholder="050-0000000" />
              </div>
            </div>
            <div className="field">
              <label>דוא״ל</label>
              <input type="email" value={form.email} onChange={update('email')} placeholder="name@example.com" />
            </div>
            <div className="field">
              <label>מה תרצו להזמין?</label>
              <input ref={orderRef} type="text" value={form.order} onChange={update('order')} placeholder="שם העוגה, מספר אנשים, אלרגיות" />
            </div>
            <div className="field">
              <label>תאריך האירוע</label>
              <input type="date" value={form.date} onChange={update('date')} />
            </div>
            <div className="field">
              <label>הערות</label>
              <textarea rows={4} value={form.notes} onChange={update('notes')} placeholder="כתוב על גבי העוגה, השראה, צבעים, אלרגיות..."></textarea>
            </div>
            <button type="submit" className="cta-solid contact-submit" disabled={sent}>
              {sent ? "תודה — נחזור אליכם בקרוב" : "שלחו פנייה"}
            </button>
            <span className="contact-fineprint">בלחיצה על שליחה אתם מאשרים שאחזור אליכם בטלפון או ב-WhatsApp.</span>
          </form>
        </div>
      </div>
    </section>
  );
};

// ---------- Newsletter ----------
window.News = function News() {
  const [email, setEmail] = useStateS('');
  const [sent, setSent] = useStateS(false);
  return (
    <section className="news">
      <div className="container">
        <div>
          <span className="eyebrow-en" style={{color:'var(--rose-2)'}}>JOURNAL · גליון חודשי</span>
          <h3 style={{marginTop:18}}>הצטרפו ל<em>גליון</em><br/>הקטן שלנו.</h3>
          <p>פעם בחודש: מתכון מהמטבח שלנו, קולקציות חדשות, ואירועי טעימות סגורים לחברים. אפס ספאם, רק חמאה.</p>
        </div>
        <form className="news-form" onSubmit={e => { e.preventDefault(); if (email) { setSent(true); setEmail(''); setTimeout(()=> setSent(false), 2400); }}}>
          <input type="email" placeholder={sent ? "תודה — נשמח להישאר בקשר" : "האימייל שלך"} value={email} onChange={e => setEmail(e.target.value)} />
          <button type="submit">הירשמו</button>
        </form>
      </div>
    </section>
  );
};

// ---------- Footer ----------
window.Footer = function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="brand-block">
            <div className="name">Salon Cr&egrave;me</div>
            <div className="tag">Pâtisserie Artisanale</div>
            <p>קונדיטוריה ביתית עצמאית מראשון לציון. עוגות, מאפים ומארזי בוטיק — אפויים ביום, בעבודת יד, בהזמנה אישית.</p>
            <div className="flex-row" style={{marginTop:18}}>
              <a className="icon-btn" href="#" style={{width:36,height:36}}><Icon.Insta /></a>
              <span className="eyebrow-en">‎@‎salon.creme</span>
            </div>
          </div>
          <div>
            <h5>החנות</h5>
            <ul>
              <li><a href="#">כל המוצרים</a></li>
              <li><a href="#">עוגות בנטו</a></li>
              <li><a href="#">עוגות גבינה</a></li>
              <li><a href="#">מארזים</a></li>
              <li><a href="#">גיפט קארד</a></li>
            </ul>
          </div>
          <div>
            <h5>שירות</h5>
            <ul>
              <li><a href="#">משלוחים ואיסוף</a></li>
              <li><a href="#">הזמנות מיוחדות</a></li>
              <li><a href="#">אירועים</a></li>
              <li><a href="#">שאלות ותשובות</a></li>
              <li><a href="#">צור קשר</a></li>
            </ul>
          </div>
          <div>
            <h5>הקונדיטוריה</h5>
            <ul>
              <li><a href="#story">הסיפור</a></li>
              <li><a href="#">חומרי גלם</a></li>
              <li><a href="#contact">הזמנות מיוחדות</a></li>
              <li><a href="#">עיתונאים</a></li>
              <li><a href="#">מדיניות פרטיות</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Salon Cr&egrave;me · כל הזכויות שמורות</span>
          <span>ראשון לציון · במשלוח לכל הארץ</span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Hero: window.Hero, Categories: window.Categories, Shop: window.Shop, Story: window.Story, Spotlight: window.Spotlight, Tape: window.Tape, Visit: window.Visit, News: window.News, Footer: window.Footer });