// src/hero.jsx — HOME hero + preview wall

function Hero({ onBook }) {
  const d = window.DATA.hero;
  const announcement = window.DATA.announcement || {};
  const titleRef = React.useRef(null);
  // Subtle 1–2px parallax on hero title
  React.useEffect(() => {
    if (window.matchMedia("(pointer: coarse)").matches) return undefined;
    const onMove = (e) => {
      if (!titleRef.current) return;
      const cx = window.innerWidth / 2;
      const cy = window.innerHeight / 2;
      const dx = (e.clientX - cx) / cx;
      const dy = (e.clientY - cy) / cy;
      titleRef.current.style.transform = `translate(${dx * 1.6}px, ${dy * 1.2}px)`;
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);

  return (
    <section id="home" className="hero">
      <div className="wrap">
        <div className="hero-grid">
          <div>
            {announcement.enabled !== false && announcement.text && (
              <Reveal>
                <a className="hero-eyebrow" href={announcement.href || "#thinking"}>
                  <span className="pulse" />
                  <span>{announcement.text}</span>
                </a>
              </Reveal>
            )}

            <h1 className="hero-title" ref={titleRef}>
              <RichTitle parts={d.title} />
            </h1>

            <Reveal delay={200}>
              <p className="hero-sub">
                <span className="role">{d.role}</span>
                <span className="role">{d.company}</span>
                <br /><br />
                {d.bio}<br />
                把战略翻译成 AI 能听懂的语言，把 AI 翻译成生意能用上的能力。
              </p>
            </Reveal>

            <Reveal delay={350}>
              <Stagger step={120}>
                <div className="hero-stats">
                  {d.stats.map((s, i) =>
                    <div className="hero-stat" key={i}>
                      <div className="num">
                        <Counter target={s.v} unit={s.unit} display={s.display} />
                      </div>
                      <div className="lbl">{s.lbl}</div>
                    </div>
                  )}
                </div>
              </Stagger>
            </Reveal>

            <Reveal delay={500}>
              <div className="hero-cta-row">
                <a href="#services" className="btn btn-primary"
                  onClick={(e) => { e.preventDefault(); const el = document.getElementById("services"); window.scrollTo({ top: el.offsetTop - 30, behavior: "smooth" }); }}>
                  查看服务 <span className="arr">→</span>
                </a>
                <a href="#thinking" className="btn btn-ghost"
                  onClick={(e) => { e.preventDefault(); const el = document.getElementById("thinking"); window.scrollTo({ top: el.offsetTop - 30, behavior: "smooth" }); }}>
                  阅读观点 <span className="arr">↓</span>
                </a>
              </div>
            </Reveal>
          </div>

          <Reveal delay={300}>
            <div className="hero-portrait">
              <img src={d.avatar || "assets/avatar.jpg"} alt={d.avatarAlt || "Sober阿铭"} />
              <div className="frame-marks" />
              <div className="caption">
                <span>SOBER · MING · 2026</span>
                <span className="corner"><i /><i /></span>
              </div>
            </div>
          </Reveal>
        </div>
      </div>

      <div className="scroll-hint">
        <span>SCROLL</span>
        <span className="line" />
        <span>↓</span>
      </div>
    </section>
  );
}

function PreviewWall({ onBook, onJump, onOpenCase }) {
  const { servicesStrip, clients } = window.DATA;
  const visibility = window.DATA.moduleVisibility || {};
  const show = (key) => visibility[key] !== false;
  const latestEssays = publicItems(window.DATA.latestEssays);
  const nowDoing = publicItems(window.DATA.nowDoing);
  return (
    <section className="preview-wall">
      <div className="wrap">
        <Reveal>
          <div className="pw-header">§ 01 · 当下</div>
          <div className="pw-title">
            我同时在做的几件事，<br />都指向同一个问题：怎样让 AI 真正变成生意。
          </div>
        </Reveal>

        {(show("latestEssays") || show("nowDoing")) && <div className="pw-row">
          {show("latestEssays") && <div>
            <Reveal>
              <h3>最新观点 <span className="pin">· 思考</span></h3>
              <Stagger step={80}>
                <div>
                  {latestEssays.map((e) =>
                    <a className="essay-mini" key={e.id} href={`article.html?id=${encodeURIComponent(e.articleId || e.id)}`}>
                      <span className="num">{e.num}</span>
                      <span className="ttl">
                        <span className="tag">{e.tag}</span>
                        {e.ttl}
                      </span>
                      <span className="meta">{e.date}<br />{e.reads} reads</span>
                    </a>
                  )}
                </div>
              </Stagger>
            </Reveal>
          </div>}
          {show("nowDoing") && <div>
            <Reveal delay={150}>
              <h3>正在做的事 <span className="pin">· 行动</span></h3>
              <Stagger step={100} initial={100}>
                <div className="now-list">
                  {nowDoing.map((n, i) =>
                    <a className="now-item" key={n.id || i} href={`article.html?id=${encodeURIComponent(n.articleId || n.id || `doing-${i + 1}`)}`}>
                      <div className="status"><i />{n.status}</div>
                      <div className="ttl">{n.ttl}</div>
                      <div className="desc">{n.desc}</div>
                    </a>
                  )}
                </div>
              </Stagger>
            </Reveal>
          </div>}
        </div>}

        {show("servicesStrip") && <Reveal>
          <h3 className="pw-row-title">
            服务一览
            <span className="pin">· 四个核心档位</span>
          </h3>
          <Stagger step={90}>
            <div className="svc-strip">
              {servicesStrip.map((s, i) =>
                <div className="svc-card" key={i} onClick={() => onJump("services")}>
                  <div className="num">{s.num}</div>
                  <div className="ttl">{s.ttl}</div>
                  <div className="price">{s.price}</div>
                  <div className="desc">{s.desc}</div>
                  <div className="arr">↗</div>
                </div>
              )}
            </div>
          </Stagger>
        </Reveal>}

        {show("clients") && <Reveal>
          <div className="client-strip">
            <span className="lbl">服务过的客户 · 脱敏</span>
            {clients.map((c, i) =>
              <span className="item" key={i}>
                <span className="dot" />{c}
              </span>
            )}
          </div>
        </Reveal>}
      </div>
    </section>
  );
}

Object.assign(window, { Hero, PreviewWall });