/* ============================================================
   CHAINUS — Showcase (sticky scroll story), Education, How
   ============================================================ */

function InterfaceLayers({ t }) {
  const layers = t.dir === 'zh'
    ? ['社区层', '资产层', '行情层']
    : ['Community layer', 'Asset layer', 'Market layer'];
  return (
    <div className="interface-layers" aria-hidden="true">
      {layers.map((l, i) => <span key={l} style={{ '--i': i }}>{l}</span>)}
    </div>
  );
}

function Showcase({ t }) {
  const [active, setActive] = useState(0);
  const panelRefs = useRef([]);
  useEffect(() => {
    const pickNearestPanel = () => {
      const center = window.innerHeight / 2;
      let next = 0;
      let best = Infinity;
      panelRefs.current.forEach((el, idx) => {
        if (!el) return;
        const rect = el.getBoundingClientRect();
        if (rect.bottom < 0 || rect.top > window.innerHeight) return;
        const dist = Math.abs(rect.top + rect.height / 2 - center);
        if (dist < best) {
          best = dist;
          next = idx;
        }
      });
      setActive(next);
    };
    const io = new IntersectionObserver(pickNearestPanel, { threshold: [0, 0.25, 0.55, 0.8], rootMargin: '-18% 0px -18% 0px' });
    panelRefs.current.forEach((el) => el && io.observe(el));
    pickNearestPanel();
    return () => io.disconnect();
  }, []);
  return (
    <section className="section showcase" id="showcase">
      <div className="wrap">
        <SectionHead eyebrow={t.showcase.eyebrow} title={t.showcase.title} sub={t.showcase.sub} max={640} />
      </div>
      <div className="wrap showcase-grid">
        <div className="showcase-sticky">
          <div className="aurora" style={{ opacity: 0.4 }}></div>
          <InterfaceLayers t={t} />
          <div className="showcase-phones">
            {t.showcase.slides.map((s, i) => (
              <div key={i} className={`showcase-phone ${active === i ? 'on' : ''}`}>
                <PhoneFrame slotId={s.slot} placeholder={s.title} width={268} glow />
              </div>
            ))}
            <div className="showcase-dots">
              {t.showcase.slides.map((s, i) => <span key={i} className={active === i ? 'on' : ''}></span>)}
            </div>
          </div>
        </div>
        <div className="showcase-panels">
          {t.showcase.slides.map((s, i) => (
            <div key={i} data-idx={i} ref={(el) => (panelRefs.current[i] = el)} className={`showcase-panel ${active === i ? 'on' : ''}`}>
              <span className="showcase-n tnum">{String(i + 1).padStart(2, '0')} / {String(t.showcase.slides.length).padStart(2, '0')}</span>
              <h3 className="h2">{s.title}</h3>
              <p className="lead">{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- Education / onboarding ---- */
function Education({ t }) {
  const e = t.education;
  const [i, setI] = useState(0);
  return (
    <section className="section education" id="education">
      <div className="wrap">
        <div className="edu-grid">
          <div className="edu-copy">
            <Reveal as="h2" className="h2" delay={70} style={{ marginTop: 16 }}>{e.title[0]} <span className="brand-text">{e.title[1]}</span></Reveal>
            <Reveal className="lead" delay={130} style={{ marginTop: 16 }}>{e.sub}</Reveal>
            <Reveal delay={190} className="edu-points">
              {e.points.map((p, idx) => (
                <div key={idx} className="edu-point">
                  <span className="edu-check"><svg viewBox="0 0 24 24" width="13" height="13" fill="none"><path d="M5 12l4 4 10-10" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                  {p}
                </div>
              ))}
            </Reveal>
          </div>
          <Reveal scale delay={120} className="edu-card card card-hi">
            <span className="tag">{e.translateLabel}</span>
            <div className="edu-map" aria-hidden="true">
              <span>Gas</span>
              <span>Mint</span>
              <b>{t.dir === 'zh' ? '人话层' : 'Plain layer'}</b>
              <span>RWA</span>
              <span>Wallet</span>
            </div>
            <div className="edu-terms">
              {e.terms.map((term, idx) => (
                <button key={idx} className={`edu-term ${i === idx ? 'on' : ''}`} onMouseEnter={() => setI(idx)} onClick={() => setI(idx)}>{term.term}</button>
              ))}
            </div>
            <div className="edu-explain well">
              <div className="edu-explain-top"><span className="edu-jargon">{e.terms[i].term}</span><span className="edu-arrow">→</span><span className="edu-human">{e.humanLabel}</span></div>
              <p className="edu-plain">{e.terms[i].plain}</p>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function HowItWorks({ t }) {
  const loop = t.dir === 'zh'
    ? ['发现', '理解', '上链', '交流', '追踪']
    : ['Discover', 'Understand', 'Tokenize', 'Discuss', 'Track'];
  return (
    <section className="section how" id="how">
      <div className="wrap">
        <SectionHead eyebrow={t.how.eyebrow} title={t.how.title} max={560} />
        <Reveal scale className="how-loop">
          <div className="how-loop-core">ChainUs</div>
          {loop.map((l, i) => <span key={l} className={`loop-node ln-${i}`}>{l}</span>)}
        </Reveal>
        <div className="how-grid">
          <div className="how-line reveal"></div>
          {t.how.steps.map((s, i) => (
            <Reveal key={i} className="how-step" delay={i * 120} scale>
              <div className="how-n tnum">{s.n}</div>
              <h3 className="h3 how-title">{s.title}</h3>
              <p className="muted">{s.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { InterfaceLayers, Showcase, Education, HowItWorks });