// 威威知識分享 — 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.html' : k === 'english' ? 'english.html' : 'blog.html#finance';

  function Nav() {
    return (
      <nav className="ww-nav">
        <div className="ww-navin">
          <a className="ww-brand" href="index.html">
            <img src="assets/mark-slate.png" alt="威威知識分享 logo" />
            <b>{W.brand}</b>
          </a>
          <div className="ww-navlinks">
            {W.nav.map((n) => <a key={n.t} href={n.href}>{n.t}</a>)}
          </div>
          <div className="ww-navr">
            <button className="ww-iconbtn" aria-label="搜尋"><Icon name="search" size={18} /></button>
            <a className="ww-navcta" href="#freebie">免費領取教材</a>
          </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.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.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.html#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 };
})();