// Sections 1-7: Header, Hero, Vintage Banner, Product Family, Archive, Deep News, Discover

const { useState, useEffect, useRef } = React;

// ─────────── HEADER ───────────
function SiteHeader({ lang, setLang }) {
  const t = window.COPY[lang];
  const menu = window.SERVE_MENU;
  const [megaOpen, setMegaOpen] = useState(false);
  const [activeCat, setActiveCat] = useState(0);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [mobProducts, setMobProducts] = useState(false);
  const headerRef = useRef(null);
  const triggerRef = useRef(null);
  const catRefs = useRef([]);
  const sheetRef = useRef(null);
  const hamburgerRef = useRef(null);

  useEffect(() => {
    if (!megaOpen) return;
    // klavye: Esc kapatır ve odağı tetikleyiciye iade eder
    const onKey = (e) => { if (e.key === "Escape") { setMegaOpen(false); triggerRef.current && triggerRef.current.focus(); } };
    const onScroll = () => setMegaOpen(false);
    const onDown = (e) => { if (headerRef.current && !headerRef.current.contains(e.target)) setMegaOpen(false); };
    window.addEventListener("keydown", onKey);
    window.addEventListener("scroll", onScroll, { passive: true });
    document.addEventListener("mousedown", onDown);
    return () => {
      window.removeEventListener("keydown", onKey);
      window.removeEventListener("scroll", onScroll);
      document.removeEventListener("mousedown", onDown);
    };
  }, [megaOpen]);

  // mega açılınca odak aktif kategoriye taşınır (klavye kullanıcısı panele ulaşır).
  // Çift rAF şart: panel aynı karede henüz visibility:hidden — focus() tutmaz.
  useEffect(() => {
    if (!megaOpen) return;
    let raf1, raf2;
    raf1 = requestAnimationFrame(() => {
      raf2 = requestAnimationFrame(() => {
        catRefs.current[activeCat] && catRefs.current[activeCat].focus();
      });
    });
    return () => { cancelAnimationFrame(raf1); cancelAnimationFrame(raf2); };
  }, [megaOpen]);

  // kategori listesinde ok tuşlarıyla gezinme (roving tabindex)
  const onCatsKeyDown = (e) => {
    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
    e.preventDefault();
    const n = window.SERVE_MENU.cats.length;
    const next = e.key === "ArrowDown" ? (activeCat + 1) % n : (activeCat - 1 + n) % n;
    setActiveCat(next);
    catRefs.current[next] && catRefs.current[next].focus();
  };

  // mobil sheet: scroll kilidi + Esc + focus-trap (odak sheet içinde döner)
  useEffect(() => {
    document.body.style.overflow = mobileOpen ? "hidden" : "";
    if (!mobileOpen) return () => { document.body.style.overflow = ""; };
    const closeBtn = sheetRef.current && sheetRef.current.querySelector(".ms-close");
    if (closeBtn) closeBtn.focus();
    const onKey = (e) => {
      if (e.key === "Escape") {
        setMobileOpen(false);
        hamburgerRef.current && hamburgerRef.current.focus();
        return;
      }
      if (e.key !== "Tab" || !sheetRef.current) return;
      const focusables = sheetRef.current.querySelectorAll("a[href], button:not([disabled])");
      if (!focusables.length) return;
      const first = focusables[0], last = focusables[focusables.length - 1];
      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
    };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", onKey);
    };
  }, [mobileOpen]);

  const closeMobile = () => setMobileOpen(false);
  const cat = menu.cats[activeCat];

  return (
    <header
      ref={headerRef}
      className={`site-header ${megaOpen ? "mega-active" : ""}`}
      data-screen-label="01 Header"
    >
      <nav className="nav" aria-label="Primary">
        <div className="nav-group left">
          <a href="#/hikayemiz" className="nav-link">{t.nav.ourstory}</a>
          <button
            ref={triggerRef}
            className={`nav-link nav-trigger ${megaOpen ? "open" : ""}`}
            aria-expanded={megaOpen}
            aria-haspopup="true"
            onClick={() => setMegaOpen((o) => !o)}
          >
            {t.nav.products}
            <svg className="nav-chevron" width="9" height="9" viewBox="0 0 10 10" aria-hidden="true">
              <path d="M1 3l4 4 4-4" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          <a href="#/serve-campus" className="nav-link">{t.nav.community}</a>
        </div>
        <a href="#/" className="logo-mark" aria-label="Serve">
          <span style={{display:"inline-block"}}>Serve</span><sup>®</sup>
        </a>
        <div className="nav-group right">
          <a href="#/blog" className="nav-link">{t.nav.blog}</a>
          <a href="#/global" className="nav-link">{t.nav.world}</a>
          <a href="#/bize-ulasin" className="nav-link">{t.nav.contact}</a>
          <span className="lang-switch">
            <button className={lang === "tr" ? "on" : ""} aria-pressed={lang === "tr"} onClick={() => setLang("tr")}>TR</button>
            <button className={lang === "en" ? "on" : ""} aria-pressed={lang === "en"} onClick={() => setLang("en")}>EN</button>
          </span>
          {/* Sepet kaldırıldı (satış yok — yanlış vaat); Arama gerçek arama gelene kadar gizli */}
        </div>
        <div className="nav-group right mobile">
          <button
            ref={hamburgerRef}
            className="icon-btn hamburger"
            aria-label="Menü"
            aria-expanded={mobileOpen}
            onClick={() => setMobileOpen(true)}
          ><Icon.Menu size={22}/></button>
        </div>
      </nav>

      {/* mobil tam-ekran menü — portal şart: header'daki backdrop-filter,
          fixed elemanın containing block'unu 88px'lik header'a hapsediyor */}
      {ReactDOM.createPortal(<div
        ref={sheetRef}
        className={`mobile-sheet ${mobileOpen ? "open" : ""}`}
        role="dialog"
        aria-modal="true"
        aria-label="Menü"
        aria-hidden={!mobileOpen}
      >
        <div className="ms-top">
          <span className="logo-mark" aria-hidden="true"><span style={{display:"inline-block"}}>Serve</span><sup>®</sup></span>
          <button className="icon-btn ms-close" aria-label="Kapat" onClick={closeMobile}><Icon.Close size={22}/></button>
        </div>
        <nav className="ms-nav" aria-label="Mobil menü">
          <a className="ms-link" href="#/hikayemiz" onClick={closeMobile}>{t.nav.ourstory}</a>
          <button
            className={`ms-link ms-acc ${mobProducts ? "open" : ""}`}
            aria-expanded={mobProducts}
            onClick={() => setMobProducts((o) => !o)}
          >
            {t.nav.products}
            <svg className="ms-chevron" width="14" height="14" viewBox="0 0 10 10" aria-hidden="true">
              <path d="M1 3l4 4 4-4" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          {mobProducts && (
            <div className="ms-cats">
              {menu.cats.map((c) => (
                <div className="ms-cat" key={c.key}>
                  <span className="ms-cat-label">{c.label[lang]}</span>
                  <div className="ms-groups">
                    {c.groups.map((g, gi) => (
                      <a href={`#/urunler/${c.key}`} key={gi} onClick={closeMobile}>{g.name}</a>
                    ))}
                  </div>
                </div>
              ))}
              <a className="ms-all" href="#/urunler" onClick={closeMobile}>{menu.more[lang]}</a>
            </div>
          )}
          <a className="ms-link" href="#/serve-campus" onClick={closeMobile}>{t.nav.community}</a>
          <a className="ms-link" href="#/blog" onClick={closeMobile}>{t.nav.blog}</a>
          <a className="ms-link" href="#/global" onClick={closeMobile}>{t.nav.world}</a>
          <a className="ms-link" href="#/bize-ulasin" onClick={closeMobile}>{t.nav.contact}</a>
        </nav>
        <div className="ms-lang">
          <span className="lang-switch">
            <button className={lang === "tr" ? "on" : ""} aria-pressed={lang === "tr"} onClick={() => setLang("tr")}>TR</button>
            <button className={lang === "en" ? "on" : ""} aria-pressed={lang === "en"} onClick={() => setLang("en")}>EN</button>
          </span>
        </div>
      </div>, document.body)}

      <div
        className="mega"
        role="region"
        aria-label={t.nav.products}
        aria-hidden={!megaOpen}
        onClick={(e) => { if (e.target.closest("a")) setMegaOpen(false); }}
      >
        <div className="mega-inner shell">
          <div className="mega-cats" onKeyDown={onCatsKeyDown}>
            {menu.cats.map((c, i) => (
              <button
                key={c.key}
                ref={(el) => { catRefs.current[i] = el; }}
                tabIndex={i === activeCat ? 0 : -1}
                className={`mega-cat ${i === activeCat ? "active" : ""}`}
                onMouseEnter={() => setActiveCat(i)}
                onFocus={() => setActiveCat(i)}
              >
                <span className="mega-cat-label">{c.label[lang]}</span>
                <span className="mega-cat-tag">{c.tagline[lang]}</span>
              </button>
            ))}
          </div>

          <div className="mega-groups" key={activeCat}>
            {cat.groups.map((g, gi) => (
              <div className="mega-group" key={gi}>
                <a href={`#/urunler/${cat.key}`} className="mega-group-name">{g.name}</a>
                {g.items.length > 0 && (
                  <ul className="mega-items">
                    {g.items.map((it, ii) => (
                      <li key={ii}><a href={`#/urunler/${cat.key}`}>{it}</a></li>
                    ))}
                  </ul>
                )}
              </div>
            ))}
          </div>

          <div className="mega-preview">
            <div className="mega-preview-grid" key={"p" + activeCat}>
              {cat.preview.map((p, pi) => (
                <a href={`#/urunler/${cat.key}`} className="mega-card" key={pi}>
                  <div className="mega-card-img" style={p.img ? null : { background: p.tint || "var(--light-blue)" }}>
                    {p.img
                      ? <img src={p.img} alt={p.title} loading="lazy" decoding="async"/>
                      : <span className="mega-card-ph">{p.title}</span>}
                    {p.award && <span className="mega-award">iF</span>}
                  </div>
                  <div className="mega-card-meta">
                    <span className="mega-card-cat">{p.cat}</span>
                    <span className="mega-card-title">{p.title}</span>
                  </div>
                </a>
              ))}
            </div>
            <a href="#/urunler" className="mega-more">{menu.more[lang]} <Icon.Arrow size={14}/></a>
          </div>
        </div>
      </div>

      <div className="mega-dim" aria-hidden="true"></div>
    </header>
  );
}

// ─────────── HERO ───────────
function Hero({ t, marqueeItems }) {
  return (
    <section className="hero" data-screen-label="02 Hero">
      <div className="shell hero-grid">
        <div className="hero-text">
          <div className="hero-eyebrow-row">
            {/* tek kicker: çift etiket AI-vitrin gramerine kayıyordu; 1996 hikayesi OurStory'de anlatılıyor */}
            <span className="section-tag"><span className="dot"/>{t.hero.tag}</span>
          </div>
          <h1 className="display h-jumbo hero-title">
            <span className="line-mask"><span>{t.hero.title1}</span></span>
            <span className="line-mask"><span><em>{t.hero.title2}</em></span></span>
          </h1>
          <p className="hero-sub">{t.hero.sub}</p>
          <div className="hero-cta-row" style={{display:"flex", gap:12, flexWrap:"wrap"}}>
            <a href="#products" className="cta-pill">
              {t.hero.cta} <span className="arrow"><Icon.Arrow/></span>
            </a>
            <a href="#archive" className="cta-ghost">{t.hero.ctaSecondary}</a>
          </div>
        </div>
        <div className="hero-stage">
          {/* ürün ailesi üçlüsü: şeffaf kesimler — beyaz kutu/glow yok */}
          <img className="hp hp-2" src="assets/serve-cliptic-cut.webp" alt="" aria-hidden="true"/>
          <img className="hp hp-1" src="assets/axium-cut.webp" alt="" aria-hidden="true"/>
          <img className="hp hp-3" src="assets/serve-deep-cut.webp" alt="" aria-hidden="true"/>
          <div className="hero-meta">
            {t.hero.meta}
            <strong>{t.hero.metaCount}</strong>
          </div>
        </div>
      </div>
      <div className="hero-marquee">
        <div className="marquee-track">
          {[...marqueeItems, ...marqueeItems, ...marqueeItems].map((item, i) => (
            <span key={i}>{item}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────── VINTAGE BANNER ───────────
function VintageBanner() {
  return (
    <div className="vintage-banner" role="img" aria-label="Serve Farmers Market" data-screen-label="03 Vintage banner"/>
  );
}

// ─────────── PRODUCT FAMILY ───────────
function ProductFamily({ t }) {
  const cards = t.pf.cards;
  const cardClasses = ["pf-card-1","pf-card-2","pf-card-3","pf-card-4","pf-card-5","pf-card-6"];
  // thumbs map
  const thumbs = {
    "the set": "assets/double.jpg",
    "deep": "assets/serve-deep-cut.webp",
    "notes": "assets/axium.webp",
    "highlight": "assets/hp-likit-highlighters.webp",
    "erase": "assets/burgo.jpg",
    "carry": "assets/shake-it.jpg",
  };
  return (
    <section className="section-pad" data-screen-label="04 Product family" id="products">
      <div className="shell">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t.pf.eyebrow}</span>
            <h2 className="display h-xl section-title" style={{marginTop:8}}>
              {t.pf.title1}<br/><em>{t.pf.title2}</em>
            </h2>
          </div>
          <p className="section-sub">{t.pf.sub}</p>
        </div>
        <div className="pf-grid">
          {cards.map((c, i) => {
            const dark = i === 1;
            return (
              <a href="#" key={c.name} className={`pf-card ${cardClasses[i]}`}>
                <span className="pf-label" style={{color: dark ? "#fff" : undefined}}>{c.name}</span>
                <span className="pf-meta" style={{color: dark ? "rgba(255,255,255,.7)" : undefined}}>{c.meta}</span>
                {thumbs[c.name] ? (
                  <span className="pf-thumb" style={{backgroundImage: `url(${thumbs[c.name]})`}}/>
                ) : (
                  <span className="pf-placeholder">{c.name.toUpperCase()}<br/>GÖRSEL YAKINDA</span>
                )}
                <span className="pf-arrow"><Icon.ArrowUR/></span>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─────────── ARCHIVE ───────────
function Archive({ t }) {
  const [tab, setTab] = useState(0);
  const products = t.archive.products;
  const tabsRef = useRef(null);

  // mürekkep çizgisi aktif sekmenin altına kayar (100px taban genişliği scaleX ile ölçeklenir)
  useEffect(() => {
    const el = tabsRef.current;
    if (!el) return;
    const active = el.querySelector(".archive-tab.active");
    const ink = el.querySelector(".tab-ink");
    if (active && ink) {
      ink.style.transform = `translateX(${active.offsetLeft}px) scaleX(${active.offsetWidth / 100})`;
    }
  }, [tab, t]);
  return (
    <section className="archive section-pad" data-screen-label="05 Archive" id="archive">
      <div className="shell">
        <div className="head-row">
          <div>
            {/* eyebrow yok: sekmeler zaten etiket görevi görüyor; başlık tek satır h-lg — ölçek çeşitlemesi */}
            <h2 className="display h-lg section-title">
              {t.archive.title1} <em>{t.archive.title2}</em>
            </h2>
          </div>
          <p className="section-sub">{t.archive.sub}</p>
        </div>
        <div className="archive-tabs" role="tablist" ref={tabsRef}>
          <span className="tab-ink" aria-hidden="true"/>
          {t.archive.tabs.map((tabName, i) => (
            <button
              key={tabName}
              role="tab"
              aria-selected={tab === i}
              className={`archive-tab ${tab === i ? "active" : ""}`}
              onClick={() => setTab(i)}
            >
              {tabName}
            </button>
          ))}
        </div>
        <div className="archive-grid">
          {products.map((p, i) => (
            <a href="#" key={i} className="product-card">
              <div className="product-img">
                <img src={p.img} alt={p.title} loading="lazy" decoding="async"/>
                <div className="product-color-strip">
                  {p.colors.map((c, ci) => (
                    <span key={ci} className="swatch" style={{background: c}}/>
                  ))}
                </div>
              </div>
              <div className="product-body">
                <span className="product-cat">{p.cat}</span>
                <span className="product-title">{p.title}</span>
                <span className="more">{t.archive.more} <Icon.Arrow size={14}/></span>
              </div>
            </a>
          ))}
        </div>
        <div className="archive-foot">
          <a href="#" className="cta-pill">
            {t.archive.more} <span className="arrow"><Icon.Arrow/></span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ─────────── DEEP NEWS ───────────
function DeepNews({ t }) {
  return (
    <section className="deep-news section-pad" data-screen-label="06 Deep News">
      <div className="shell">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t.deepNews.eyebrow}</span>
            <h2 className="display h-xl section-title" style={{marginTop:8}}>
              {t.deepNews.title1}<br/><em>{t.deepNews.title2}</em>
            </h2>
          </div>
          <p className="section-sub">{t.deepNews.sub}</p>
        </div>
        <div className="dn-grid">
          {t.deepNews.cards.map((card, i) => (
            <a href="#/urunler" key={i} className="dn-card">
              {card.badge && <span className="dn-badge">{card.badge}</span>}
              {card.cut ? (
                /* beyaz stüdyo fotoğrafı yerine renk zemini + şeffaf kesim */
                <div className="dn-cut-ground" style={{background: card.tint || "var(--butter)"}}>
                  <img src={card.cut} alt="" aria-hidden="true"/>
                </div>
              ) : card.img ? (
                <div className="dn-cover" style={{backgroundImage: `url(${card.img})`}}/>
              ) : (
                <div className="dn-cover" style={{
                  background: "linear-gradient(135deg, var(--serve-blue-2) 0%, var(--serve-blue) 100%)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  color: "#fff",
                  fontFamily: "Fraunces, serif", fontStyle: "italic", fontWeight: 600,
                  fontSize: "clamp(40px, 5vw, 72px)", letterSpacing: "-0.02em",
                  textAlign: "center"
                }}>
                  Sketch.
                </div>
              )}
              <div className="dn-overlay">
                <h3>{card.name}</h3>
                <span style={{fontSize:11, letterSpacing:"0.2em", textTransform:"uppercase", fontWeight:600}}>{card.date}</span>
              </div>
            </a>
          ))}
        </div>
        <div className="dn-foot">
          <a href="#/urunler" className="cta-pill">
            {t.deepNews.more} <span className="arrow"><Icon.Arrow/></span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ─────────── DISCOVER / COMMUNITY ───────────
function Discover({ t }) {
  // Topluluk panosu: sahte UGC kolajı yerine markanın kendi malzemesi —
  // ürün kesimleri pastel karolarda + Caveat el notları. Gerçek fotoğraflar
  // gelince karolara oturur; sahte kullanıcı/etkileşim uydurulmaz.
  const b = t.discover.board;
  return (
    <section className="discover section-pad" data-screen-label="07 Discover Community" id="community">
      <div className="shell">
        <div className="disc-grid">
          <div className="disc-side">
            <div>
              <span className="handnote" style={{marginBottom: 16}}>{t.discover.tag}</span>
              <h2 className="display h-xl section-title" style={{marginTop:16}}>
                {t.discover.title1}<br/><em>{t.discover.title2}</em>
              </h2>
            </div>
            <div className="disc-tagline">
              {t.discover.tagline}<span className="at">{t.discover.taglineAt}</span>{t.discover.taglineRest}
            </div>
            <div style={{display:"flex", alignItems:"center", gap:12, color:"var(--ink-2)"}}>
              <Icon.Instagram/> <span style={{fontWeight:600, letterSpacing:"0.04em"}}>{t.discover.hashtag}</span>
            </div>
          </div>
          <div className="camp-board">
            <span className="camp-star" aria-hidden="true"><Icon.Star size={38}/></span>
            <div className="camp camp-1">
              <img className="camp-img" src="assets/serve-cliptic-cut.webp" alt="" aria-hidden="true"/>
              <span className="camp-pill"><Icon.Instagram size={14}/> {b.pill}</span>
            </div>
            <div className="camp camp-2">
              <span className="camp-tag">{b.tag}</span>
            </div>
            <a className="camp camp-3" href="#/serve-campus">
              <span className="camp-q">{b.q}</span>
              <span className="camp-cta">{b.cta} <Icon.Arrow size={13}/></span>
            </a>
            <div className="camp camp-4">
              <span className="camp-friends">{b.friends}</span>
              <img className="camp-img" src="assets/burgo-cut.webp" alt="" aria-hidden="true"/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  SiteHeader, Hero, VintageBanner, ProductFamily, Archive, DeepNews, Discover
});