// About.jsx — core values triad + vision/mission + stats band. Nội dung từ window.SITE.
const ABOUT_VALUE_STYLE = [
  { icon: 'zap', t: 't-blue' }, { icon: 'target', t: 't-cyan' }, { icon: 'check', t: 't-ink' },
];
function About() {
  const C = (window.SITE || SITE_DEFAULTS).about;
  return (
    <Section id="about" tone="soft">
      <Reveal><Eyebrow>{C.eyebrow}</Eyebrow></Reveal>
      <Reveal delay={60}><h2 className="swk-h2">{C.heading}</h2></Reveal>
      <Reveal delay={120}><p className="swk-lead">{C.lead}</p></Reveal>

      <div className="swk-triad">
        {(C.values || []).map((v, i) => {
          const st = ABOUT_VALUE_STYLE[i % ABOUT_VALUE_STYLE.length];
          return (
            <Reveal key={i} delay={i * 90}>
              <div className="swk-vcard">
                <div className={'swk-itile ' + st.t}><Icon name={st.icon} size={26} /></div>
                <div className="en">{v.en}</div>
                <h3>{v.vi}</h3>
                <p>{v.d}</p>
              </div>
            </Reveal>
          );
        })}
      </div>

      <div className="swk-vm">
        <Reveal>
          <div className="swk-vmcard is-vision">
            <div className="k">Tầm nhìn</div>
            <h3>{C.visionTitle}</h3>
            <p>{C.vision}</p>
          </div>
        </Reveal>
        <Reveal delay={90}>
          <div className="swk-vmcard is-mission">
            <div className="k">Sứ mệnh</div>
            <h3>{C.missionTitle}</h3>
            <p>{C.mission}</p>
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

function StatsBand() {
  const C = (window.SITE || SITE_DEFAULTS).band;
  return (
    <Section tone="light">
      <Reveal><Eyebrow>{C.eyebrow}</Eyebrow></Reveal>
      <Reveal delay={60}><h2 className="swk-h2">{C.heading}</h2></Reveal>
      <div className="swk-stats" style={{ marginTop: 40 }}>
        {(C.stats || []).map((s, i) => (
          <Reveal key={s.l} delay={i * 80}>
            <div className="swk-statcell"><div className="n">{s.n}</div><div className="l">{s.l}</div></div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}
Object.assign(window, { About, StatsBand });