/* Enfito — Home Page (2 variants) */

const HomeV1 = ({ onNav, onAdd, onFav, favs }) => {
  const products = window.ENFITO_PRODUCTS;
  const featured = products.slice(0, 8);
  const recovery = products.filter((p) => p.cat === 'therabody').slice(0, 4);

  return (
    <div className="fade-up">
      {/* Editorial Hero */}
      <section className="hero-v1">
        <div className="hero-v1-grid">
          <div className="hero-v1-content">
            <div className="container" style={{ maxWidth: 600, marginLeft: 'auto', marginRight: 0, padding: 0 }}>
              <div className="hero-eyebrow">Therabody · ახალი კოლექცია</div>
              <h1 className="hero-title" style={{ fontSize: "70px" }}>
                ჯანმრთელობა,<br />
                როგორც <em style={{ fontSize: "70px" }}>ხელოვნება</em>.
              </h1>
              <p className="hero-sub">
                პროფესიონალური ფიტნეს მოწყობილობები, აღდგენისა და სილამაზის ტექნოლოგია — ერთ ადგილზე, ოფიციალურად საქართველოში.
              </p>
              <div className="hero-ctas">
                <button className="btn btn-primary btn-lg" onClick={() => onNav({ page: 'listing', cat: 'therabody' })}>
                  აღმოაჩინე კოლექცია <Icon.ArrowRight />
                </button>
                <button className="btn btn-ghost btn-lg" onClick={() => onNav({ page: 'listing' })}>
                  ყველა პროდუქტი
                </button>
              </div>
              <div className="hero-meta">
                <div className="hero-meta-item">
                  <div className="lbl">ბრენდები</div>
                  <div className="val">40+</div>
                </div>
                <div className="hero-meta-item">
                  <div className="lbl">პროდუქტი</div>
                  <div className="val">1 200+</div>
                </div>
                <div className="hero-meta-item">
                  <div className="lbl">კმაყოფილი მომხმარებელი</div>
                  <div className="val">35 000+</div>
                </div>
              </div>
            </div>
          </div>
          <div className="hero-v1-image">
            <img src="https://images.unsplash.com/photo-1571902943202-507ec2618e8f?w=1200&auto=format&fit=crop&q=85" alt="" />
            <div className="hero-v1-badge">
              <span className="dot" />
              Therabody · ახალი
            </div>
          </div>
        </div>
      </section>

      {/* Category Tiles */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-eyebrow">დაათვალიერე</div>
              <h2 className="section-title">კატეგორიები<em>.</em></h2>
            </div>
            <div className="section-actions">
              <button className="btn btn-outline btn-sm" onClick={() => onNav({ page: 'listing' })}>
                ყველა <Icon.ArrowRight />
              </button>
            </div>
          </div>
          <div className="cat-grid">
            {[
            { id: 'fitnes', label: 'ფიტნესი', icon: <Icon.Dumbbell />, count: 142, bg: '#efe9dd', img: 'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=600&auto=format&fit=crop&q=80' },
            { id: 'ioga', label: 'იოგა & პილატესი', icon: <Icon.Yoga />, count: 86, bg: '#f1ece4', img: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=600&auto=format&fit=crop&q=80' },
            { id: 'trx', label: 'TRX სისტემები', icon: <Icon.Award />, count: 24, bg: '#e8e2d2', img: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=600&auto=format&fit=crop&q=80' },
            { id: 'therabody', label: 'Therabody', icon: <Icon.Recover />, count: 38, bg: '#f3eee2', img: 'https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=600&auto=format&fit=crop&q=80' },
            { id: 'aksesuari', label: 'აქსესუარები', icon: <Icon.Heartbeat />, count: 95, bg: '#ece6d8', img: 'https://images.unsplash.com/photo-1521093470119-a3acdc43374a?w=600&auto=format&fit=crop&q=80' },
            { id: 'distsount', label: 'ფასდაკლება', icon: <Icon.Tag />, count: 47, bg: '#1a1a1a', fg: '#fff', dark: true, img: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=600&auto=format&fit=crop&q=80' }].
            map((c) =>
            <div key={c.id}
              className={"cat-tile" + (c.dark ? ' dark-cat' : '')}
              style={{ '--tile-bg': c.bg, color: c.fg || 'inherit' }}
              onClick={() => onNav({ page: 'listing', cat: c.id })}>
                {c.img && <img className="cat-img" src={c.img} alt="" />}
                <div className="cat-veil" />
                <div className="cat-icon">{c.icon}</div>
                <div>
                  <div className="cat-label">{c.label}</div>
                  <div className="cat-count">{c.count} პროდუქტი</div>
                </div>
                <div className="cat-arrow"><Icon.ArrowUpRight /></div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Featured products */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-eyebrow">გამორჩეული</div>
              <h2 className="section-title">ბესტსელერები<em>.</em></h2>
            </div>
            <div className="section-actions">
              <button className="btn btn-outline btn-sm" onClick={() => onNav({ page: 'listing' })}>
                ყველა <Icon.ArrowRight />
              </button>
            </div>
          </div>
          <div className="product-grid">
            {featured.map((p) =>
            <ProductCard key={p.id} p={p} onNav={onNav} onAdd={onAdd} onFav={onFav} faved={favs.has(p.id)} />
            )}
          </div>
        </div>
      </section>

      {/* Brand strip */}
      <section className="brand-strip">
        <div className="container brand-strip-row">
          <div className="b-label">ოფიციალური წარმომადგენელი</div>
          <div className="brand-strip-items">
            {window.ENFITO_BRANDS.map((b) => <span className="b" key={b}>{b}</span>)}
          </div>
        </div>
      </section>

      {/* Dual editorial banner */}
      <section className="section">
        <div className="container">
          <div className="dual-banner">
            <div className="dual-card" style={{ background: '#f0ebe1' }}>
              <img className="bg-img" src="https://images.unsplash.com/photo-1620188467120-5042ed1eb5da?w=1200&auto=format&fit=crop&q=80" alt="" />
              <div>
                <div className="hero-v2-eyebrow"><span className="dot" />პროგრამა</div>
                <h3 className="dual-title">აღდგენა,<br />როგორც <em>რიტუალი</em></h3>
                <p className="dual-sub">Therabody-ის სრული აღდგენის ეკოსისტემა: მასაჟი, კომპრესია, ცივი თერაპია, ძილი.</p>
                <button className="btn btn-primary" onClick={() => onNav({ page: 'listing', cat: 'therabody' })}>
                  იხილე Therabody <Icon.ArrowRight />
                </button>
              </div>
              <div className="dual-numbers">01</div>
            </div>
            <div className="dual-card dark">
              <img className="bg-img" src="https://images.unsplash.com/photo-1517344884509-a0c97ec11bcc?w=1200&auto=format&fit=crop&q=80" alt="" />
              <div>
                <div className="hero-v2-eyebrow"><span className="dot" />საქართველოს ლიდერი</div>
                <h3 className="dual-title">პროფესიონალური<br />დარბაზებისთვის</h3>
                <p className="dual-sub">Life Fitness, Hammer Strength — სრული აღჭურვა კომერციული სივრცეებისთვის. B2B პირობები.</p>
                <button className="btn btn-accent">
                  დაგვიკავშირდი <Icon.ArrowRight />
                </button>
              </div>
              <div className="dual-numbers">02</div>
            </div>
          </div>
        </div>
      </section>

      {/* Recovery section */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-eyebrow">აღდგენა</div>
              <h2 className="section-title">Therabody — სხეულის <em>ენაზე</em>.</h2>
            </div>
            <div className="section-actions">
              <button className="btn btn-outline btn-sm" onClick={() => onNav({ page: 'listing', cat: 'therabody' })}>
                მთლიანი კოლექცია <Icon.ArrowRight />
              </button>
            </div>
          </div>
          <div className="product-grid">
            {recovery.map((p) =>
            <ProductCard key={p.id} p={p} onNav={onNav} onAdd={onAdd} onFav={onFav} faved={favs.has(p.id)} />
            )}
          </div>
        </div>
      </section>

      {/* Service Promise */}
      <section className="section sm" style={{ background: 'var(--bg-soft)' }}>
        <div className="container">
          <div className="hero-v2-features">
            {[
            { ic: <Icon.Truck />, lbl: 'უფასო მიწოდება', desc: '₾200+ შეკვეთაზე საქართველოს ნებისმიერ წერტილში', img: 'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=400&auto=format&fit=crop&q=70' },
            { ic: <Icon.Return />, lbl: '30 დღე დასაბრუნებლად', desc: 'უპირობოდ, ნებისმიერი მიზეზის გარეშე', img: 'https://images.unsplash.com/photo-1591291621164-2c6367723315?w=400&auto=format&fit=crop&q=70' },
            { ic: <Icon.Shield />, lbl: 'ოფიციალური გარანტია', desc: 'ყველა ბრენდი — პირდაპირი წარმომადგენელი', img: 'https://images.unsplash.com/photo-1517344884509-a0c97ec11bcc?w=400&auto=format&fit=crop&q=70' },
            { ic: <Icon.Card />, lbl: 'განვადება 0%', desc: '24 თვემდე ყველა ბანკიდან', img: 'https://images.unsplash.com/photo-1571902943202-507ec2618e8f?w=400&auto=format&fit=crop&q=70' }].
            map((f, i) =>
            <div className="feature-card" key={i}>
                {f.img && <img className="fc-img" src={f.img} alt="" />}
                <div className="icon">{f.ic}</div>
                <div className="lbl">{f.lbl}</div>
                <div className="desc">{f.desc}</div>
              </div>
            )}
          </div>
        </div>
      </section>
    </div>);

};

/* ============ HOME V2 ============ */
const HomeV2 = ({ onNav, onAdd, onFav, favs }) => {
  const products = window.ENFITO_PRODUCTS;
  const newArrivals = products.filter((p) => p.tag === 'ახალი').slice(0, 4);
  const popular = products.slice(0, 8);

  return (
    <div className="fade-up">
      {/* Split Hero */}
      <section className="hero-v2">
        <div className="container">
          <div className="hero-v2-main">
            <div className="hero-v2-card primary">
              <img className="bg-img" src="https://images.unsplash.com/photo-1571902943202-507ec2618e8f?w=1200&auto=format&fit=crop&q=85" alt="" />
              <div className="content">
                <div className="hero-v2-eyebrow"><span className="dot" />Therabody · ჰიტი</div>
                <h2 className="hero-v2-title">
                  შეშუპების მოშორება <em>წამებში</em>.
                </h2>
                <p className="hero-v2-sub">TheraFace Depuffing Wand — ცივი თერაპია, ვიბრაცია, აღდგენა ერთ მოწყობილობაში.</p>
              </div>
              <div style={{ position: 'relative', zIndex: 2 }}>
                <button className="btn btn-primary" onClick={() => onNav({ page: 'pdp', id: 'p06' })}>
                  აღმოაჩინე <Icon.ArrowRight />
                </button>
              </div>
            </div>
            <div className="hero-v2-card dark">
              <img className="bg-img" src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1200&auto=format&fit=crop&q=80" alt="" />
              <div className="content">
                <div className="hero-v2-eyebrow"><span className="dot" />ფასდაკლება -20%</div>
                <h2 className="hero-v2-title">
                  ფიტნეს<br />ფესტივალი<em>.</em>
                </h2>
                <p className="hero-v2-sub">წლის ყველაზე დიდი ფასდაკლება ფიტნეს ტრენაჟორებზე, ჰანტელებზე და აქსესუარებზე.</p>
              </div>
              <div>
                <button className="btn btn-accent" onClick={() => onNav({ page: 'listing', cat: 'distsount' })}>
                  ფასდაკლება <Icon.ArrowRight />
                </button>
              </div>
            </div>
          </div>
          <div className="hero-v2-features" style={{ marginBottom: 32 }}>
            {[
            { ic: <Icon.Dumbbell />, lbl: 'ფიტნესი', desc: '142 პროდუქტი', cat: 'fitnes', img: 'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=400&auto=format&fit=crop&q=70' },
            { ic: <Icon.Yoga />, lbl: 'იოგა & პილატესი', desc: '86 პროდუქტი', cat: 'ioga', img: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=400&auto=format&fit=crop&q=70' },
            { ic: <Icon.Award />, lbl: 'TRX სისტემები', desc: '24 პროდუქტი', cat: 'trx', img: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&auto=format&fit=crop&q=70' },
            { ic: <Icon.Recover />, lbl: 'Therabody', desc: '38 პროდუქტი', cat: 'therabody', img: 'https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=400&auto=format&fit=crop&q=70' }].
            map((f, i) =>
            <div className="feature-card" key={i} onClick={() => onNav({ page: 'listing', cat: f.cat })}>
                {f.img && <img className="fc-img" src={f.img} alt="" />}
                <div className="icon">{f.ic}</div>
                <div className="lbl">{f.lbl}</div>
                <div className="desc">{f.desc}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* New Arrivals strip */}
      <section className="section sm">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-eyebrow">ახალი ჩამოსვლა</div>
              <h2 className="section-title">ახალი <em>კოლექცია</em></h2>
            </div>
            <div className="section-actions">
              <button className="btn btn-outline btn-sm">ყველა ახალი <Icon.ArrowRight /></button>
            </div>
          </div>
          <div className="product-grid">
            {newArrivals.map((p) =>
            <ProductCard key={p.id} p={p} onNav={onNav} onAdd={onAdd} onFav={onFav} faved={favs.has(p.id)} />
            )}
          </div>
        </div>
      </section>

      {/* Brand Strip */}
      <section className="brand-strip">
        <div className="container brand-strip-row">
          <div className="b-label">ჩვენი ბრენდები</div>
          <div className="brand-strip-items">
            {window.ENFITO_BRANDS.map((b) => <span className="b" key={b}>{b}</span>)}
          </div>
        </div>
      </section>

      {/* Popular */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-eyebrow">პოპულარული</div>
              <h2 className="section-title">ბესტსელერები<em>.</em></h2>
            </div>
            <div className="section-actions">
              <button className="btn btn-outline btn-sm" onClick={() => onNav({ page: 'listing' })}>
                ყველა <Icon.ArrowRight />
              </button>
            </div>
          </div>
          <div className="product-grid">
            {popular.map((p) =>
            <ProductCard key={p.id} p={p} onNav={onNav} onAdd={onAdd} onFav={onFav} faved={favs.has(p.id)} />
            )}
          </div>
        </div>
      </section>

      {/* Dual editorial banner */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="dual-banner">
            <div className="dual-card" style={{ background: '#f0ebe1' }}>
              <img className="bg-img" src="https://images.unsplash.com/photo-1620188467120-5042ed1eb5da?w=1200&auto=format&fit=crop&q=80" alt="" />
              <div>
                <div className="hero-v2-eyebrow"><span className="dot" />პროგრამა</div>
                <h3 className="dual-title">აღდგენა,<br />როგორც <em>რიტუალი</em></h3>
                <p className="dual-sub">Therabody-ის სრული აღდგენის ეკოსისტემა: მასაჟი, კომპრესია, ცივი თერაპია, ძილი.</p>
                <button className="btn btn-primary" onClick={() => onNav({ page: 'listing', cat: 'therabody' })}>
                  იხილე Therabody <Icon.ArrowRight />
                </button>
              </div>
              <div className="dual-numbers">01</div>
            </div>
            <div className="dual-card dark">
              <img className="bg-img" src="https://images.unsplash.com/photo-1517344884509-a0c97ec11bcc?w=1200&auto=format&fit=crop&q=80" alt="" />
              <div>
                <div className="hero-v2-eyebrow"><span className="dot" />B2B</div>
                <h3 className="dual-title">პროფესიონალური<br />დარბაზებისთვის</h3>
                <p className="dual-sub">Life Fitness, Hammer Strength — სრული აღჭურვა კომერციული სივრცეებისთვის.</p>
                <button className="btn btn-accent">
                  დაგვიკავშირდი <Icon.ArrowRight />
                </button>
              </div>
              <div className="dual-numbers">02</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section sm" style={{ background: 'var(--bg-soft)' }}>
        <div className="container">
          <div className="hero-v2-features">
            {[
            { ic: <Icon.Truck />, lbl: 'უფასო მიწოდება', desc: '₾200+ შეკვეთაზე', img: 'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=400&auto=format&fit=crop&q=70' },
            { ic: <Icon.Return />, lbl: '30 დღე დაბრუნება', desc: 'უპირობოდ', img: 'https://images.unsplash.com/photo-1591291621164-2c6367723315?w=400&auto=format&fit=crop&q=70' },
            { ic: <Icon.Shield />, lbl: 'ოფიციალური გარანტია', desc: 'პირდაპირი წარმომადგენელი', img: 'https://images.unsplash.com/photo-1517344884509-a0c97ec11bcc?w=400&auto=format&fit=crop&q=70' },
            { ic: <Icon.Card />, lbl: 'განვადება 0%', desc: '24 თვემდე', img: 'https://images.unsplash.com/photo-1571902943202-507ec2618e8f?w=400&auto=format&fit=crop&q=70' }].
            map((f, i) =>
            <div className="feature-card" key={i}>
                {f.img && <img className="fc-img" src={f.img} alt="" />}
                <div className="icon">{f.ic}</div>
                <div className="lbl">{f.lbl}</div>
                <div className="desc">{f.desc}</div>
              </div>
            )}
          </div>
        </div>
      </section>
    </div>);

};

Object.assign(window, { HomeV1, HomeV2 });