// === Nav + Hero ===

const Nav = () => {
  const [slim, setSlim] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setSlim(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <nav className={`nav ${slim ? "slim" : ""}`} aria-label="Primary">
      <div className="nav-inner">
        <a href="/" className="nav-logo" aria-label="chineseslangmeaning home">
          <ZhongLiMark/>
          <span className="wm">chineseslangmeaning</span>
        </a>
        <div className="nav-links">
          <a href="#dictionary">Dictionary</a>
          <a href="#trending">Trending</a>
          <a href="#categories">Categories</a>
          <a href="#learn">Learn</a>
          <a href="#submit">Submit</a>
          <a href="#about">About</a>
        </div>
        <div className="nav-right">
          <button className="icon-btn" aria-label="Search">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2">
              <circle cx="11" cy="11" r="7"/><path d="M16 16 L21 21" strokeLinecap="round"/>
            </svg>
          </button>
          <div className="lang-toggle"><span className="active">EN</span> · <span>中</span></div>
          <button className="btn btn-ghost">Sign in</button>
          <button className="btn btn-seal">
            <span style={{ fontFamily: "var(--cn-serif)", fontWeight: 700 }}>印</span>
            Get Pro
          </button>
        </div>
      </div>
    </nav>
  );
};

const Hero = () => {
  const [focused, setFocused] = React.useState(false);
  const [value, setValue] = React.useState("");
  const sectionRef = React.useRef(null);

  React.useEffect(() => {
    const el = sectionRef.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      el.style.setProperty("--spot-x", `${e.clientX - r.left}px`);
      el.style.setProperty("--spot-y", `${e.clientY - r.top}px`);
    };
    el.addEventListener("pointermove", onMove);
    return () => el.removeEventListener("pointermove", onMove);
  }, []);

  return (
    <section className="hero" ref={sectionRef}>
      <div className="hero-bg-char" aria-hidden="true">俚</div>
      <div className="ink-splash-hero" aria-hidden="true"><InkSplash color="#1A1A1A" style={{ width: "100%", height: "100%" }}/></div>
      <VerticalKanjiColumn text="當代 · 中文 · 詞典" style={{ position: "absolute", right: 40, top: 200, zIndex: 1 }}/>
      <div className="container">
        <div className="eyebrow hero-eyebrow">The living dictionary of Chinese internet culture</div>
        <h1 className="hero-headline">
          <span className="hero-line">Decode <span className="inkwash">what</span></span>
          <span className="hero-line"><span className="hero-circle-wrap">Chinese <span className="em">internet</span>
            <span className="annot-circle"><AnnotationCircle color="#C8392E" style={{ width: "100%", height: "100%" }}/></span>
          </span></span>
          <span className="hero-line">is <span className="inkwash">really</span> saying.</span>
        </h1>
        <p className="hero-sub">
          8,420+ slang entries. Updated daily by native speakers. From Weibo, Xiaohongshu,
          Bilibili, and the streets of Shanghai.
        </p>

        <div className={`search-wrap ${focused ? "focused" : ""}`}>
          <div className="search-icon" aria-hidden="true"><BrushSearchIcon/></div>
          <input
            className="search-bar"
            placeholder="Try typing 'yyds', '内卷', or 'sigma'…"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            onFocus={() => setFocused(true)}
            onBlur={() => setFocused(false)}
            aria-label="Search the dictionary"
          />
          <LivingBorder/>
        </div>

        <div className="suggest-row">
          <button className="chip">yyds <span className="cn">永远的神</span></button>
          <button className="chip">卷 <span className="cn">juǎn</span></button>
          <button className="chip">city不city</button>
        </div>

        <div className="stats-row">
          <div><span className="stat-num"><Counter value={8420}/></span> &nbsp; entries</div>
          <div><span className="stat-num"><Counter value={142}/></span> &nbsp; contributors</div>
          <div><span className="stat-num"><Counter value={1.2} suffix="M"/></span> &nbsp; monthly readers</div>
        </div>
      </div>
    </section>
  );
};

// Rolling counter
const Counter = ({ value, suffix = "" }) => {
  const [v, setV] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          const start = performance.now();
          const dur = 1600;
          const tick = (t) => {
            const p = Math.min(1, (t - start) / dur);
            const eased = 1 - Math.pow(1 - p, 3);
            setV(value * eased);
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
          obs.disconnect();
        }
      });
    }, { threshold: 0.4 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [value]);
  const display = value >= 100 ? Math.round(v).toLocaleString() : v.toFixed(1);
  return <span ref={ref}>{display}{suffix}</span>;
};

Object.assign(window, { Nav, Hero, Counter });