// 威威知識分享 — top sections: Nav, Hero, Creds, Pillars, Learning.
(function () {
  const { Icon } = window.WWIcons;
  const W = window.WW;
  const pillIcon = { math: 'spark', english: 'globe', finance: 'coins' };
  const pageFor = (k) => k === 'math' ? '/math' : k === 'english' ? '/english' : '/blog#finance';

  function Nav() {
    const { useState } = React;
    const [mobileOpen, setMobileOpen] = useState(false);
    const [openDD, setOpenDD] = useState(null);
    const cta = W.navCta || { t: '免費領取教材', href: '/#freebie' };

    // 目前頁面（用於頂層項目底線高亮）。同時支援乾淨網址 /math 與 math.html。
    const seg = (typeof location !== 'undefined' ? location.pathname.split('/').pop() : '').replace(/\.html$/, '');
    const here = seg || 'index';
    const childSeg = (href) => (href.split('#')[0].split('/').pop() || '').replace(/\.html$/, '');
    const isActive = (n) =>
      (!!n.match && n.match === here) ||
      (!!n.children && n.children.some((c) => { const s = childSeg(c.href); return s && s === here; }));
    const isTouch = () => typeof window !== 'undefined' && window.matchMedia('(hover:none)').matches;

    function TopItem(n) {
      if (n.children) {
        const open = openDD === n.t;
        return (
          <div key={n.t}
            className={`ww-navdd ${open ? 'open' : ''}`}
            onMouseEnter={() => { if (!isTouch()) setOpenDD(n.t); }}
            onMouseLeave={() => { if (!isTouch()) setOpenDD(null); }}>
            <a className={`ww-navtop ${isActive(n) ? 'active' : ''}`} href={n.href}
               aria-haspopup="true" aria-expanded={open}
               onClick={(e) => { if (isTouch()) { e.preventDefault(); setOpenDD(open ? null : n.t); } }}>
              {n.t}<Icon name="arrowDown" size={13} stroke={2.4} />
            </a>
            <div className="ww-ddmenu" role="menu">
              <div className="ww-ddinner">
                {n.children.map((c) => (
                  <a key={c.t} href={c.href} role="menuitem"
                     onClick={() => { setOpenDD(null); setMobileOpen(false); }}>
                    <b>{c.t}</b>{c.d ? <span>{c.d}</span> : null}
                  </a>
                ))}
              </div>
            </div>
          </div>
        );
      }
      return (
        <a key={n.t} className={`ww-navtop ${isActive(n) ? 'active' : ''}`} href={n.href}
           onClick={() => setMobileOpen(false)}>{n.t}</a>
      );
    }

    return (
      <nav className="ww-nav">
        <div className="ww-navin">
          <a className="ww-brand" href="/">
            <img src="assets/mark-slate.png" alt="威威知識分享 logo" />
            <b>{W.brand}</b>
          </a>
          <div className={`ww-navlinks ${mobileOpen ? 'open' : ''}`}>
            {W.nav.map(TopItem)}
          </div>
          <div className="ww-navr">
            <a className="ww-navcta" href={cta.href}>{cta.t}</a>
            <button className="ww-navtoggle" aria-label="開關選單" aria-expanded={mobileOpen}
              onClick={() => setMobileOpen((o) => !o)}>
              <Icon name={mobileOpen ? 'close' : 'menu'} size={20} />
            </button>
          </div>
        </div>
      </nav>
    );
  }

  function Hero({ layout, tone }) {
    return (
      <header className={`ww-hero ${tone} ${layout}`}>
        <div className="ww-heroin">
          <div className="ww-herocontent">
            <div className="ww-kicker"><span className="dot"></span>{W.hero.kicker}</div>
            <h1 className="ww-h1">{W.hero.title}</h1>
            <p className="ww-lead">{W.hero.sub}</p>
            <div className="ww-ctarow">
              <a className="ww-btn" href="#freebie">{W.hero.ctaPrimary}<Icon name="arrow" size={18} /></a>
              <a className="ww-btn ghost" href="#contact">{W.hero.ctaSecondary}</a>
            </div>
          </div>
          <div className="ww-herophoto">
            <img className="ph" src="assets/willy-portrait.jpg" alt="威威 Willy 本人形象照，著深色西裝" />
            <div className="badge">
              <b>{W.hero.name}</b>
              <span>{W.hero.role}</span>
            </div>
          </div>
        </div>
      </header>
    );
  }

  function Creds() {
    return (
      <div className="ww-creds">
        <div className="ww-credsin">
          {W.creds.map((c, i) => (
            <div className="ww-cred" key={i}><Icon name="check" size={17} stroke={2.4} />{c}</div>
          ))}
        </div>
      </div>
    );
  }

  function Pillars() {
    return (
      <section className="ww-sec ww-wrap" id="pillars">
        <div className="ww-sechead ww-reveal">
          <div className="ww-eyebrow">三大內容領域</div>
          <h2 className="ww-h2">數學、英文，與看懂錢的腦袋</h2>
          <div className="ww-h2sub">三個看似不相干的主題，背後是同一種思考方式：把複雜的東西，拆成看得懂、學得會、用得上的步驟。</div>
        </div>
        <div className="ww-pillars">
          {W.pillars.map((p) => (
            <article className="ww-pillar ww-reveal" key={p.key} style={{ '--pc': p.accent }}>
              <div className="ww-pilltop">
                <div className="ww-pillicon"><Icon name={pillIcon[p.key]} size={24} /></div>
                <div>
                  <div className="ww-pillttl">{p.label}</div>
                  <div className="ww-pillen">{p.en}</div>
                </div>
              </div>
              <p className="ww-pillline">{p.line}</p>
              <div className="ww-pilltopics">{p.topics.map((t) => <span key={t}>{t}</span>)}</div>
              {p.articles.length > 0 ? (
                <div className="ww-pillarts">
                  {p.articles.slice(0, 6).map((a, i) => (
                    <a className="ww-pillart" key={i} href={pageFor(p.key)}>
                      <span className="tcat">{a.tag}</span>
                      <span className="ttitle">{a.t}</span>
                    </a>
                  ))}
                </div>
              ) : (
                <div className="ww-pillempty">{p.empty}</div>
              )}
              <a className="ww-pillmore" href={pageFor(p.key)}>{p.articles.length > 6 ? `看完整 ${p.articles.length} 篇${p.label}內容` : `進入${p.label}內容中心`}<Icon name="arrow" size={16} /></a>
            </article>
          ))}
        </div>
      </section>
    );
  }

  function Learning() {
    const L = W.learning;
    return (
      <section className="ww-learn">
        <div className="ww-learnin">
          <div className="ww-reveal">
            <div className="ww-eyebrow">{L.kicker}</div>
            <h3>{L.title}</h3>
            <p>{L.sub}</p>
            <a className="ww-learncta" href="/blog#learning">{L.cta}<Icon name="arrow" size={17} /></a>
          </div>
          <div className="ww-learnchips ww-reveal">
            {L.chips.map((c) => <span key={c}>{c}</span>)}
          </div>
        </div>
      </section>
    );
  }

  window.WWTop = { Nav, Hero, Creds, Pillars, Learning };
})();