// === Trending Marquee + Categories + Featured Entry + Recent Entries ===

const TRENDING = [
  { cn: "显眼包", py: "xiǎnyǎn bāo", en: "the show-off" },
  { cn: "citywalk", py: "city · walk", en: "leisurely city wander" },
  { cn: "班味", py: "bān wèi", en: "office-stink" },
  { cn: "搭子", py: "dāzi", en: "activity buddy" },
  { cn: "哈基米", py: "hā jī mǐ", en: "hachimitsu / honey" },
  { cn: "鸡娃", py: "jī wá", en: "tiger-parented kid" },
  { cn: "摆烂", py: "bǎi làn", en: "let it rot" },
  { cn: "内卷", py: "nèi juǎn", en: "involution / rat race" },
  { cn: "躺平", py: "tǎng píng", en: "lying flat" },
  { cn: "emo了", py: "emo le", en: "I'm in my feels" },
  { cn: "上岸", py: "shàng àn", en: "landed it" },
  { cn: "老六", py: "lǎo liù", en: "sneaky teammate" },
];

const TrendingMarquee = () => {
  return (
    <section className="marquee-section" id="trending" data-screen-label="trending">
      <div style={{ position: "absolute", left: 24, top: 24, zIndex: 2 }} aria-hidden="true">
        <CrosshairMark style={{ width: 40, height: 40 }}/>
      </div>
      <div style={{ position: "absolute", right: 24, top: 24, zIndex: 2 }} aria-hidden="true">
        <DotGrid rows={5} cols={8} style={{ width: 110, height: 70 }}/>
      </div>
      <div className="marquee-head">
        <span className="cn">本周热词</span>
        <span className="en">Trending this week</span>
      </div>
      <div className="marquee-track-wrap">
        <div className="marquee-track">
          {[...TRENDING, ...TRENDING].map((t, i) => (
            <div className="marquee-item" key={i}>
              <span className="cn">{t.cn}</span>
              <div className="reveal">
                <div className="py">{t.py}</div>
                <div className="meaning">— {t.en}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const CATEGORIES = [
  { kind: "internet", name: "Gen-Z & Internet Slang", cn: "网络流行语", count: "1,840 entries", ex: "yyds · 绝绝子 · 666" },
  { kind: "gaming",   name: "Gaming & Esports Lingo", cn: "游戏术语",     count: "612 entries",   ex: "老六 · gg · 上分" },
  { kind: "work",     name: "Workplace & 内卷 Culture", cn: "职场用语",   count: "487 entries",   ex: "内卷 · 躺平 · 班味" },
  { kind: "love",     name: "Dating & Romance Slang",  cn: "恋爱用语",   count: "394 entries",   ex: "搭子 · CP · 上头" },
  { kind: "pop",      name: "Pop Culture & Memes",     cn: "流行文化",   count: "1,205 entries", ex: "退退退 · 哈基米" },
  { kind: "region",   name: "Regional & Dialect",      cn: "方言俚语",   count: "728 entries",   ex: "靓仔 · 巴适 · 阿拉" },
];

const Categories = () => (
  <section className="section section-with-decor" id="categories" data-screen-label="categories">
    <div className="diag-sweep-corner" aria-hidden="true"><DiagonalSweep color="#1A1A1A" style={{ width: "100%", height: "100%" }}/></div>
    <div className="container-wide">
      <div className="section-head" style={{ position: "relative" }}>
        <div className="big-num" aria-hidden="true">02</div>
        <ScrollFillHead variant="ink">
          <h2>Six worlds of <em className="inkwash" style={{ color: "var(--cinnabar)", fontStyle: "normal" }}>slang</em>.
          <span className="cn">六个语境 · 一本词典</span></h2>
        </ScrollFillHead>
        <div className="section-ribbon"><BrushRibbon color="#1A1A1A"/></div>
        <p style={{ fontFamily: "var(--serif)", fontSize: 19, color: "var(--ink-soft)", lineHeight: 1.5, marginTop: 28, maxWidth: "52ch" }}>
          From the trenches of Black Myth: Wukong streams to the group chats of Shanghai office workers —
          every dialect of contemporary Mandarin, cataloged.
        </p>
      </div>
    </div>
    <div className="cat-grid">
      {CATEGORIES.map((c, i) => (
        <div key={c.kind} className="cat-tile">
          <span className="cat-num">0{i + 1}</span>
          <div className="cat-icon"><CategoryIcon kind={c.kind}/></div>
          <div>
            <div className="cat-name">{c.name}<span className="cn">{c.cn}</span></div>
            <div className="cat-count">{c.count}</div>
          </div>
          <div className="cat-example">e.g. {c.ex}</div>
        </div>
      ))}
    </div>
  </section>
);

// Scroll-triggered fill heading
const ScrollFillHead = ({ children, variant = "cinnabar" }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const target = el.querySelector("h1,h2,h3") || el;
    target.classList.add(variant === "ink" ? "fill-head-ink" : "fill-head");
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          target.classList.add("in");
          obs.disconnect();
        }
      });
    }, { threshold: 0.3 });
    obs.observe(target);
    return () => obs.disconnect();
  }, [variant]);
  return <div ref={ref}>{children}</div>;
};

const FeaturedEntry = () => (
  <section className="section section-with-decor" id="dictionary" data-screen-label="daily entry" style={{ borderTop: "1px solid rgba(26,26,26,0.08)" }}>
    <SealColumn chars={["典", "今", "日", "词"]} style={{ position: "absolute", right: 60, top: 130, zIndex: 1 }}/>
    <div className="container-wide">
      <div className="featured featured-wrap">
        <div className="featured-num" aria-hidden="true">03</div>
        <div style={{ position: "absolute", right: -60, bottom: -40, width: 320, height: 320, opacity: 0.08, zIndex: 0 }} aria-hidden="true">
          <InkSplash style={{ width: "100%", height: "100%" }}/>
        </div>
        <div style={{ position: "relative", zIndex: 1 }}>
          <div className="featured-stamp-row">
            <span className="seal" style={{ fontSize: 18, width: 48, height: 48 }}>每</span>
            <span className="featured-date">每日一词 / Daily entry · May 24, 2026</span>
          </div>
          <div className="featured-char">
            <div className="tone-marks">
              <ToneMark tone={3}/>
              <ToneMark tone={3}/>
              <ToneMark tone={1}/>
            </div>
            显眼包
          </div>
          <div className="featured-py">xiǎn yǎn bāo</div>
          <div className="featured-en">The show-off. The attention magnet. The friend who walks into a room and accidentally becomes the room.</div>
          <div className="featured-literal">LITERAL · "eye-catching bag"</div>
          <div className="featured-tags">
            <span className="tag-seal">#genz</span>
            <span className="tag-seal">#compliment</span>
            <span className="tag-seal">#social-media</span>
          </div>
          <div className="featured-actions">
            <button className="audio-btn" aria-label="Play pronunciation">
              <span className="audio-bars" aria-hidden="true"><span/><span/><span/><span/><span/></span>
              Listen
            </button>
            <button className="action-link">＋ Save to my list</button>
            <button className="action-link">↗ Share</button>
          </div>
        </div>

        <aside className="featured-side">
          <div className="quote-block">
            <p className="quote-cn">我妹妹是我们家的显眼包。</p>
            <p className="quote-py">Wǒ mèimei shì wǒmen jiā de xiǎnyǎn bāo.</p>
            <p className="quote-en">"My little sister is the show-off of our family."</p>
          </div>
          <div className="origin-note">
            <span className="label">Origin</span>
            Popularized on Douyin in late 2023. Originally describing pets or kids who steal the
            spotlight — now used affectionately for any attention-loving friend.
          </div>
        </aside>
      </div>
    </div>
  </section>
);

const RECENT = [
  { cn: "搭子",    py: "dāzi",      en: "activity buddy",                                        cat: "Gen-Z",     diff: 1, stamp: "搭" },
  { cn: "班味",    py: "bān wèi",   en: "office-stink — the look of someone fried by work",      cat: "Workplace", diff: 2, stamp: "班" },
  { cn: "city不city", py: "city bù city", en: "is it city-vibes or not?",                       cat: "Pop Culture", diff: 1, stamp: "城" },
  { cn: "鸡娃",    py: "jī wá",     en: "tiger-parented kid",                                    cat: "Workplace", diff: 2, stamp: "鸡" },
  { cn: "哈基米",  py: "hā jī mǐ",  en: "honey — cute interjection from a meme song",            cat: "Memes",     diff: 1, stamp: "蜜" },
  { cn: "老六",    py: "lǎo liù",   en: "sneaky / annoying teammate",                            cat: "Gaming",    diff: 2, stamp: "六" },
  { cn: "上头",    py: "shàng tóu", en: "hooked / obsessed",                                     cat: "Gen-Z",     diff: 1, stamp: "上" },
  { cn: "退退退",  py: "tuì tuì tuì", en: "begone! — from viral auntie video",                   cat: "Memes",     diff: 2, stamp: "退" },
];

const RecentEntries = () => (
  <section className="section" id="recent" data-screen-label="recent entries" style={{ paddingTop: 40 }}>
    <div className="container-wide">
      <div className="section-head" style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", maxWidth: "100%", gap: 40 }}>
        <div>
          <div className="eyebrow-ink">Recently added</div>
          <h2 style={{ fontFamily: "var(--serif)", fontWeight: 500, fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 1.02, letterSpacing: "-0.025em", margin: "18px 0 0" }}>
            Fresh from the feed.
          </h2>
        </div>
        <span style={{ fontFamily: "var(--sans)", fontSize: 14, fontWeight: 500, color: "var(--faded)" }}>
          8,420 total
        </span>
      </div>
      <div className="recent-grid">
        {RECENT.map((e, i) => (
          <div key={i} className="entry-card">
            <div className="stamp-hover">{e.stamp}</div>
            <div>
              <div className="entry-cn">{e.cn}</div>
              <div className="entry-py">{e.py}</div>
              <div className="entry-meaning">{e.en}</div>
            </div>
            <div className="entry-meta">
              <span className="entry-cat">{e.cat}</span>
              <span className="entry-diff" aria-label={`Difficulty ${e.diff} of 3`}>
                {[0,1,2].map((d) => <span key={d} className={`dot ${d < e.diff ? "on" : ""}`}/>)}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { TrendingMarquee, Categories, FeaturedEntry, RecentEntries, ScrollFillHead });