// v3 — Manifesto, sticky stacks, why, stats, markets, partners, CTA, footer

const renderHParts = (parts) => parts.map((p, i) => {
  if (typeof p === "string") return <span key={i}>{p} </span>;
  if (p.it) return <span key={i} className="it">{p.it} </span>;
  return null;
});

const V3Manifesto = () =>
<section className="v3-block cream-deep dotted">
    <div className="shell">
      <div className="v3-manifesto-grid">
        <div>
          <span className="v3-manifesto-eyebrow">{V3_MANIFESTO.eyebrow}</span>
          <h2 className="v3-manifesto-h">
            {renderHParts(V3_MANIFESTO.heading)}
          </h2>
        </div>
        <div className="v3-manifesto-body">
          {V3_MANIFESTO.body.map((p, i) => <p key={i}>{p}</p>)}
          <div className="v3-manifesto-pulls">
            {V3_MANIFESTO.pulls.map((p, i) =>
          <div className="v3-pull" key={i}>
                <div className="n">{p.n}</div>
                <div className="l">{p.l}</div>
              </div>
          )}
          </div>
        </div>
      </div>
    </div>
  </section>;


// Pick column count for balanced rows
const pickCols = (count) => {
  if (count <= 4) return count;
  if (count === 5) return 5;
  if (count === 6) return 3;
  if (count === 7 || count === 8) return 4;
  if (count === 9) return 3;
  return 4;
};

const V3RotatingCatalog = ({ categories }) => {
  const [active, setActive] = React.useState(0);
  const [auto, setAuto] = React.useState(true);

  React.useEffect(() => {
    if (!auto) return;
    const t = setInterval(() => {
      setActive((a) => (a + 1) % categories.length);
    }, 4500);
    return () => clearInterval(t);
  }, [auto, categories.length]);

  const cat = categories[active];
  return (
    <div className="v3-rot">
      <div className="v3-rot-tabs">
        {categories.map((c, i) =>
        <button
          key={c.name}
          className={`v3-rot-tab ${i === active ? "active" : ""}`}
          onClick={() => {setActive(i);setAuto(false);}}>
            {c.name}
            <span className="c" data-n={c.skus.length}>{String(c.skus.length).padStart(2, '0')}</span>
          </button>
        )}
      </div>
      <div className="v3-rot-stage">
        {categories.map((c, i) =>
        <div key={c.name} className={`v3-rot-layer ${i === active ? "active" : ""}`} style={{ "--cols": pickCols(c.skus.length) }}>
            {c.skus.map((sku) =>
          <div className="v3-rot-tile" key={sku.name}>
                <img src={sku.img} alt={sku.name} />
                <span className="tip">{sku.name}</span>
              </div>
          )}
          </div>
        )}
      </div>
      <div className="v3-rot-foot">
        <span>{cat.name} · {cat.skus.length} SKUs</span>
        <button className={`auto ${auto ? "" : "off"}`} onClick={() => setAuto((a) => !a)}>
          <span className="pip" />{auto ? "Auto-rotate" : "Paused"}
        </button>
      </div>
    </div>);

};

const V3StackCard = ({ brand, idx }) => {
  const isSugarless = brand.key === "sugarless";
  const sugarlessFull = isSugarless ? V2_BRANDS.find((b) => b.key === "sugarless") : null;
  return (
    <section className={`v3-stack-card ${brand.color}`}>
      <div className="v3-stack-inner">
        <div className="v3-stack-copy">
          <span className="v3-stack-num"><span className="bar" />Brand {brand.num} / 04</span>
          <h3 className="v3-stack-name">
            {brand.name.map((p, i) => {
              if (typeof p === "string") return <span key={i}>{p} </span>;
              if (p.it) return <span key={i} className="it">{p.it} </span>;
              return null;
            })}
          </h3>
          <p className="v3-stack-tag">{brand.tag}</p>
          <div className="v3-stack-meta">
            {brand.chips.map((c, i) => <span key={i} className="v3-stack-chip">{c}</span>)}
          </div>
          <a href="#contact" className="v3-stack-cta">{brand.cta} <Arrow size={13} /></a>
        </div>
        {isSugarless ?
        <V3RotatingCatalog categories={sugarlessFull.categories} /> :

        <div className="v3-stack-visual">
            {brand.tiles.slice(0, 6).map((src, i) =>
          <div className="tile" key={i}><img src={src} alt="" /></div>
          )}
          </div>
        }
      </div>
    </section>);

};

const V3StacksIntro = () =>
<div className="v3-stacks-intro">
    <div className="shell">
      <span className="kicker">Our brands</span>
      <h2>
        Three brands. <span className="it coral">One</span> shelf.
      </h2>
      <p>Each one earns its place. Scroll through — they stack as you go.</p>
    </div>
  </div>;


const V3Stacks = () =>
<div className="v3-stacks" id="brands">
    <V3StacksIntro />
    {V3_STACK_BRANDS.map((b, i) =>
  <V3StackCard key={b.key} brand={b} idx={i} />
  )}
    {/* Coming soon — Tutti */}
    <section className="v3-stack-card coming" style={{ backgroundColor: "rgba(6, 84, 0, 0.847)" }}>
      <div className="v3-stack-inner">
        <div className="v3-stack-copy">
          <span className="v3-stack-num"><span className="bar" />Brand 04 / 04</span>
          <h3 className="v3-stack-name">
            <span className="it">Tutti</span>
          </h3>
          <p className="v3-stack-tag">European-crafted chocolates and candies, curated for GCC palates. Bold, smooth, wrapped to last.</p>
          <div className="v3-stack-meta">
            <span className="v3-stack-chip">Coming soon</span>
            <span className="v3-stack-chip">European</span>
            <span className="v3-stack-chip">Premium</span>
          </div>
        </div>
        <div className="v3-stack-visual" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div className="v3-coming-block" style={{ width: '100%', maxWidth: 520 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(56px, 8vw, 120px)', lineHeight: 0.9, letterSpacing: '-0.03em' }}>
              <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 500 }}>Tutti</span>
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', marginTop: 18, opacity: 0.7 }}>Launching 2026</div>
          </div>
        </div>
      </div>
    </section>
  </div>;


const V3Why = () =>
<section className="v3-why" id="why">
    <div className="shell">
      <div className="v3-why-head">
        <h2>What we <span className="it">actually</span> do.</h2>
        <p>End-to-end FMCG distribution, regulatory and shelf strategy across the GCC + Levant. One accountable partner.</p>
      </div>
      <div className="v3-why-grid">
        <div className="v3-why-card">
          <div className="icon"><IconNetwork /></div>
          <div className="n">01</div>
          <h3>Six-Market Network</h3>
          <p>Retail, HoReCa, and e-commerce coverage across GCC + Levant with a single accountable partner.</p>
        </div>
        <div className="v3-why-card">
          <div className="icon"><IconWarehouse /></div>
          <div className="n">02</div>
          <h3>Cold + Dry Warehousing</h3>
          <p>Temperature-controlled facilities. FIFO, full batch traceability, halal-certified throughout.</p>
        </div>
        <div className="v3-why-card">
          <div className="icon"><IconLocalize /></div>
          <div className="n">03</div>
          <h3>Brand Localization</h3>
          <p>Arabic packaging, regulatory filings, shelf strategy, category insight. We do the heavy lifting.</p>
        </div>
      </div>
    </div>
  </section>;


const V3Stats = () =>
<section className="v3-stats">
    <div className="shell">
      <h2 className="v3-stats-h">Receipts, <span className="it">not</span> promises.</h2>
      <div className="v3-stats-grid">
        {V2_STATS.map((s, i) =>
      <div className="v3-stat" key={i}>
            <div className="n">{s.n}</div>
            <div className="l">{s.l}</div>
          </div>
      )}
      </div>
    </div>
  </section>;


const V3Markets = () =>
<section className="v3-markets" id="markets">
    <div className="shell">
      <div className="v3-markets-head">
        <h2><span className="purple">Six</span> markets. <span className="it">One</span> phone call.</h2>
        <p>Tuleen ships from Kuwait into the GCC + Levant. One contract, one partner, one accountable team — across every shelf.</p>
      </div>
      <div className="v3-market-list">
        {V2_MARKETS.map((m, i) =>
      <div className="v3-market-row" key={i}>
            <span className="num">0{i + 1}</span>
            <span className="name">{m.name}</span>
            <span className="role">{m.role}</span>
            <span className="ar"><Arrow size={16} /></span>
          </div>
      )}
      </div>
    </div>
  </section>;


const V3Partners = () =>
<section className="v3-partners" id="partners" style={{ backgroundColor: "rgba(245, 61, 61, 0)" }}>
    <div className="shell" style={{ color: "rgba(0, 0, 0, 0.62)" }}>
      <div className="v3-partners-head">
        <span className="kicker">Sourced globally</span>
        <h2>The brands we carry, <span className="it">come from everywhere.</span></h2>
      </div>
      <div className="v3-partners-grid">
        {V2_PARTNERS.map((p, i) =>
      <div className="v3-partner-tile" key={i}>
            <div className="flag">{p.flag}</div>
            <div className="country">{p.country}</div>
          </div>
      )}
      </div>
    </div>
  </section>;


const V3CTA = () =>
<section id="contact" className="v3-cta" style={{ backgroundColor: "rgb(92, 0, 184)" }}>
    <div className="shell">
      <h2>
        Put your brand <br />
        <span className="it">on our </span>
        <span className="coral">shelves.</span>
      </h2>
      <p>Whether you're a producer looking for a GCC partner, or a retailer looking for the next hit — we'd love to hear from you.</p>
      <a href="mailto:info@tuleenco.com" className="v3-cta-btn">Get in touch <Arrow size={16} /></a>
    </div>
  </section>;


const V3Footer = () =>
<footer className="v3-footer">
    <div className="shell">
      <div className="v3-footer-inner">
        <div>
          <img src="assets/tuleen-logo.png" alt="Tuleen" className="logo" />
          <p className="blurb">Tuleen Co. — Kuwait-based FMCG distributor specializing in confectionary and snacks across the GCC and Levant.</p>
        </div>
        <div>
          <h4>Explore</h4>
          <ul>
            <li><a href="#brands">Brands</a></li>
            <li><a href="#why">Why us</a></li>
            <li><a href="#markets">Markets</a></li>
            <li><a href="#partners">Partners</a></li>
          </ul>
        </div>
        <div>
          <h4>Partner</h4>
          <ul>
            <li><a href="#contact">Become a partner</a></li>
            <li><a href="#contact">Retail inquiries</a></li>
            <li><a href="#contact">Press</a></li>
          </ul>
        </div>
        <div>
          <h4>Contact</h4>
          <ul>
            <li>info@tuleenco.com</li>
            <li>+965 6690 9121</li>
            <li>Kuwait City</li>
          </ul>
        </div>
      </div>
      <div className="v3-footer-bottom">
        <div>© 2026 Tuleen Co.</div>
        <div>Made in Kuwait.</div>
      </div>
    </div>
  </footer>;


Object.assign(window, {
  V3Manifesto, V3Stacks, V3Why, V3Stats, V3Markets, V3Partners, V3CTA, V3Footer
});