// Sections 8-14: Blog wide, Smarter, Storefront, Our Story, World, Top10, Footer

// ─────────── BLOG WIDE ───────────
function BlogWide({ t }) {
  return (
    <section style={{padding: "clamp(40px, 6vw, 80px) 0"}} data-screen-label="08 Blog wide" id="blog">
      <a href="#" className="blog-wide">
        <img src="assets/blog-lifestyle-wide.webp" alt="Bench coffee lifestyle" loading="lazy" decoding="async"/>
        <span className="section-tag corner-tag" style={{background:"#fff", borderColor:"#fff"}}>{t.blogWide.tag}</span>
        <div className="read">
          <h3>{t.blogWide.title}</h3>
          <span className="meta"><Icon.Star/> {t.blogWide.meta}</span>
        </div>
      </a>
    </section>
  );
}

// ─────────── SMARTER FEATURE ───────────
function Smarter({ t }) {
  return (
    <section className="smarter section-pad" data-screen-label="09 Smarter">
      <div className="shell">
        <div className="sm-grid">
          <div>
            <div className="sm-tag">
              <span style={{fontWeight:600}}>{t.smarter.tag}</span>
              <em>{t.smarter.tagSub}</em>
            </div>
            <h2 className="display h-lg sm-title">
              {t.smarter.title1}<br/><em>{t.smarter.title2}</em>
            </h2>
            <p className="sm-body">{t.smarter.body}</p>
            <ul style={{listStyle:"none", padding:0, margin:"0 0 32px", display:"grid", gap:10, maxWidth:420}}>
              {t.smarter.bullets.map((b, i) => (
                <li key={i} style={{display:"flex", gap:12, alignItems:"center", fontSize:14, color:"var(--ink)"}}>
                  <span style={{width:6, height:6, borderRadius:"50%", background:"var(--serve-blue)", flexShrink:0}}/>
                  {b}
                </li>
              ))}
            </ul>
            <a href="#/urunler/yaz" className="cta-pill">{t.smarter.cta} <span className="arrow"><Icon.Arrow/></span></a>
          </div>
          <div className="sm-figure">
            {/* beyaz kutu emekli — şeffaf kesim doğrudan pastel sahnede */}
            <img src="assets/serve-deep-cut.webp" alt="Serve Deep Premium Min tüpü" loading="lazy" decoding="async"/>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────── STOREFRONT ───────────
function Storefront({ t }) {
  // Tipografik fuar daveti — eski fotoğrafın içinde 'CNR EXPO 2015' rozeti vardı
  // (2026 Frankfurt davetiyle çelişiyordu). Gerçek Ambiente görseli gelince dönebilir.
  return (
    <section className="storefront full-bleed" data-screen-label="10 Storefront">
      <a href="#/global" className="sf-inner">
        <span className="sf-tag">
          <span style={{width:6, height:6, borderRadius:"50%", background:"var(--serve-pink)"}}/>
          {t.storefront.tag} <Icon.ArrowUR size={14}/>
        </span>
        <h2 className="display h-xl sf-title">
          {t.storefront.title1} <em>{t.storefront.title2}</em> {t.storefront.title3}
        </h2>
        <span className="sf-date">{t.storefront.sub}</span>
        <span className="sf-star" aria-hidden="true"><Icon.Star size={34}/></span>
        <img className="sf-pen" src="assets/axium-cut.webp" alt="" aria-hidden="true"/>
      </a>
    </section>
  );
}

// ─────────── OUR STORY (Golden Circle) ───────────
function OurStory({ t }) {
  return (
    <section className="our-story section-pad" data-screen-label="11 Our Story" id="story">
      <div className="shell">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t.ourStory.eyebrow}</span>
            <h2 className="display h-xl section-title" style={{marginTop:8}}>
              {t.ourStory.title1}<br/><em>{t.ourStory.title2}</em>
            </h2>
          </div>
        </div>
        <div className="os-grid">
          <div>
            <div className="nazar" role="img" aria-label="Nazar boncuğu — Altın Çember (Why · How · What)">
              <div className="nz-bead">
                <div className="nz-white"></div>
                <div className="nz-mid"></div>
                <div className="nz-pupil"></div>
                <div className="nz-glint"></div>
              </div>
              <span className="nz-label nz-l-what">{t.ourStory.ringWhat}</span>
              <span className="nz-label nz-l-how">{t.ourStory.ringHow}</span>
              <span className="nz-label nz-l-why">{t.ourStory.ringWhy}</span>
            </div>
            <div className="os-figcap">{t.ourStory.figcap}</div>
          </div>
          <div className="os-text-col">
            <div className="os-bubble b1"><span className="os-bubble-tag">{t.ourStory.bubbleTopTag}</span>{t.ourStory.bubbleTop}</div>
            <div className="os-bubble b2"><span className="os-bubble-tag">{t.ourStory.bubbleMidTag}</span>{t.ourStory.bubbleMid}</div>
            <div className="os-bubble b3"><span className="os-bubble-tag">{t.ourStory.bubbleBotTag}</span>{t.ourStory.bubbleBot}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────── WORLD ───────────
function World({ t }) {
  const globeRef = React.useRef(null);
  React.useEffect(() => {
    // Küre dokuları (~1MB) ilk yüklemeye girmesin: bölüm görünüme yaklaşınca kur.
    // Yakınlık her denemede rect'ten hesaplanır (bayrak state'i yarış durumuna açıktı);
    // IO + scroll + serveglobe-ready üç kanaldan hangisi önce yakalarsa kurar.
    let dispose, io;
    const el = globeRef.current;
    const isNear = () => {
      const r = el.getBoundingClientRect();
      return r.top < window.innerHeight + 900 && r.bottom > -900;
    };
    const tryMount = () => {
      if (dispose || !el || !window.mountServeGlobe || !isNear()) return;
      dispose = window.mountServeGlobe(el);
      if (io) io.disconnect();
      window.removeEventListener("scroll", tryMount);
    };
    window.addEventListener("serveglobe-ready", tryMount);
    window.addEventListener("scroll", tryMount, { passive: true });
    if ("IntersectionObserver" in window) {
      io = new IntersectionObserver(tryMount, { rootMargin: "900px 0px" });
      io.observe(el);
    }
    tryMount();
    // Nabız: modül-hazır eventi efektten önce ateşlenir + tarayıcı scroll'u erken
    // restore ederse üç sinyal de kaçıyor — mount olana dek 600ms'de bir dene.
    const pulse = setInterval(() => { tryMount(); if (dispose) clearInterval(pulse); }, 600);
    return () => {
      clearInterval(pulse);
      if (io) io.disconnect();
      if (dispose) dispose();
      window.removeEventListener("serveglobe-ready", tryMount);
      window.removeEventListener("scroll", tryMount);
    };
  }, []);

  return (
    <section className="world" data-screen-label="12 World" id="world">
      {/* sahne: küre + yıldızlar bölümün tamamını kaplar, içerik üstünde süzülür */}
      <div className="world-bg" aria-hidden="true"></div>
      <div className="world-stage" ref={globeRef} aria-label="Serve global pazarlar — sinematik 3B dünya"></div>
      <div className="world-fx" aria-hidden="true"></div>

      <div className="shell section-pad world-content">
        <div className="world-head">
          <div>
            {/* GLOBAL pili kaldırıldı — küre kendini anlatıyor; sahne soğuk açılsın */}
            <h2 className="display h-xl section-title">
              {t.world.title1}<br/><em>{t.world.title2}</em>
            </h2>
          </div>
          <p className="meta">{t.world.sub}</p>
        </div>

        <div className="world-breather" aria-hidden="true"></div>

        <div className="world-stats">
          {t.world.stats.map((s, i) => (
            <div key={i}>
              <div className="stat-num">{s.num}</div>
              <div className="stat-label">{s.label}</div>
            </div>
          ))}
        </div>

        <div className="world-cta">
          <p className="text"><Icon.Lock size={14}/> &nbsp;{t.world.ctaText}</p>
          <a href="#" className="cta-pill light">
            <Icon.Plus size={14}/> {t.world.cta}
          </a>
        </div>
      </div>
    </section>
  );
}

// ─────────── TOP 10 BLOG ───────────
function Top10Blog({ t }) {
  return (
    <section className="top10 section-pad" data-screen-label="13 Top10 Blog">
      <div className="shell">
        <div className="top10-grid">
          <div className="top10-text">
            <div>
              <span className="eyebrow">{t.top10.eyebrow}</span>
              <h2 className="display h-lg" style={{margin:"16px 0 16px"}}>
                {t.top10.title}
              </h2>
              <p style={{color:"var(--ink-2)", fontSize:15, maxWidth:480}}>{t.top10.sub}</p>
            </div>
            <div className="post-list">
              {t.top10.posts.map((p, i) => (
                <a href="#" key={i} className="post-item">
                  <div className="post-num">{p.num}</div>
                  <div className="post-meta">
                    <div className="cat">{p.cat}</div>
                    <div>{p.title}</div>
                  </div>
                  <div className="post-arrow"><Icon.Arrow/></div>
                </a>
              ))}
            </div>
          </div>
          <a href="#" className="top10-poster">
            <img src="assets/top10-poster.webp" alt="Top 10 Stationery" loading="lazy" decoding="async"/>
          </a>
        </div>
      </div>
    </section>
  );
}

// ─────────── FOOTER ───────────
function SiteFooter({ t }) {
  const socialIcons = {
    "Instagram": Icon.Instagram, "Youtube": Icon.Youtube, "TikTok": Icon.TikTok, "Pinterest": Icon.Pinterest,
  };
  return (
    <footer className="site-footer" data-screen-label="14 Footer" id="contact">
      <div className="shell">
        <div style={{marginBottom:32}}>
          <span className="ft-meta-tag">{t.footer.tag}</span>
        </div>
        <div className="ft-top">
          <div className="ft-brand">
            <div className="ft-logo">Serve<sup style={{fontSize:14, fontStyle:"normal"}}>®</sup></div>
            <p>{t.footer.tagline}</p>
          </div>
          {t.footer.cols.map((col, i) => {
            // gezinme linkleri gerçek rotalara; sosyal/yasal hedefler içerik gelince bağlanır
            const routeMap = {
              "Keşfet": "#/", "Hikayemiz": "#/hikayemiz", "Etki": "#/serve-campus", "İletişim": "#/bize-ulasin",
              "Discover": "#/", "Our Story": "#/hikayemiz", "Impact": "#/serve-campus", "Contact": "#/bize-ulasin",
            };
            return (
              <div key={i} className="ft-col">
                <h4>{col.title}</h4>
                <ul>
                  {col.links.map((link, li) => {
                    const Ico = col.icons ? socialIcons[link] : null;
                    return (
                      <li key={li}>
                        <a href={routeMap[link] || "#"}>
                          {Ico && <Ico size={14}/>} {link}
                        </a>
                      </li>
                    );
                  })}
                </ul>
              </div>
            );
          })}
        </div>
        <div className="ft-bottom">
          <span>{t.footer.copyright}</span>
          <span className="ft-meta-tag">{t.footer.meta}</span>
        </div>
        <div className="ft-mega" aria-hidden="true">
          <span className="ftm ftm-1">Ser</span><span className="ftm ftm-2">ve</span><span className="ftm ftm-dot">.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  BlogWide, Smarter, Storefront, OurStory, World, Top10Blog, SiteFooter
});