/* global React */
// ============================================================
// About + Why UD CDN, merged editorial section
//   what-is lede → 4 fact cells → why-choose-UD (3 cards)
// ============================================================
const ABOUT_CSS = `.ABT-stage{position:relative;background:#fff;font-family:'Inter','Noto Sans HK','Noto Sans TC',sans-serif;color:#0F2A47;overflow:hidden;border-bottom:1px solid rgba(15,42,71,0.08);padding:var(--section-pad-y-d) 0}
.ABT-head{max-width:820px;margin-bottom:56px}
.ABT-h2{font-size:clamp(38px,4.6vw,64px);line-height:1.05;font-weight:700;letter-spacing:-2px;color:#0F2A47;text-wrap:balance;margin:0 0 20px}
.ABT-h2 .accent{color:#A855F7}
.ABT-lede{max-width:760px;font-size:18px;line-height:1.7;color:#475569;margin:0;text-wrap:pretty}
.ABT-cells{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(15,42,71,0.12);margin-top:48px}
.ABT-cell{padding:36px 0 32px;display:flex;flex-direction:column;gap:14px;position:relative;border-bottom:1px solid rgba(15,42,71,0.12)}
.ABT-cell:not(:nth-child(4n+1)){padding-left:36px}
.ABT-cell:not(:nth-child(4n+1))::before{content:'';position:absolute;left:0;top:24px;bottom:24px;width:1px;background:rgba(15,42,71,0.10)}
.ABT-v{font-family:'Inter','Noto Sans HK',sans-serif;font-size:44px;font-weight:600;letter-spacing:-1.6px;color:#0F2A47;line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:2px;margin:0;min-height:44px}
.ABT-v .unit{font-size:17px;font-weight:500;color:#64748b;margin-left:4px}
.ABT-v .lt{font-size:32px;font-weight:500;color:#94a3b8;margin-right:3px}
.ABT-v.text{font-size:30px;letter-spacing:-.6px}
.ABT-v.text .unit{font-size:15px}
.ABT-name{font-size:16px;font-weight:700;color:#A855F7;letter-spacing:-.2px;line-height:1.4;margin:6px 0 0}
.ABT-sub{font-size:13.5px;line-height:1.6;color:#64748b;margin:-4px 0 0;text-wrap:pretty}
.ABT-link{font-weight:600;color:#A855F7;text-decoration:none;white-space:nowrap}
.ABT-link:hover{text-decoration:underline}
.ABT-why{margin-top:56px}
.ABT-why-h{font-size:clamp(24px,2.4vw,32px);font-weight:700;letter-spacing:-.8px;margin:0 0 28px;line-height:1.15;color:#0F2A47}
.ABT-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ABT-pillar{background:#F8F7FC;border:1px solid rgba(139,92,246,0.14);border-radius:16px;padding:28px 26px}
.ABT-pillar h4{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:700;letter-spacing:-.3px;line-height:1.3;margin:0 0 12px;color:#0F2A47}
.ABT-pillar h4::before{content:'';width:22px;height:3px;border-radius:2px;background:linear-gradient(135deg,#A855F7,#7C3AED);flex:none}
.ABT-pillar p{font-size:14.5px;line-height:1.75;color:#64748b;margin:0;text-wrap:pretty}
@media (max-width:1180px){.ABT-v{font-size:38px;min-height:38px}}
@media (max-width:1024px){.ABT-stage{padding:var(--section-pad-y-t) 0}.ABT-cell{padding:30px 0 28px}.ABT-cell:not(:nth-child(4n+1)){padding-left:24px}}
@media (max-width:900px){.ABT-h2{font-size:34px;letter-spacing:-1px;line-height:1.1}.ABT-lede{font-size:16px}.ABT-cells{grid-template-columns:repeat(2,1fr)}.ABT-cell:not(:nth-child(4n+1)){padding-left:0}.ABT-cell:not(:nth-child(4n+1))::before{display:none}.ABT-cell:not(:nth-child(2n+1)){padding-left:20px}.ABT-cell:not(:nth-child(2n+1))::before{content:'';position:absolute;left:0;top:24px;bottom:24px;width:1px;background:rgba(15,42,71,0.10);display:block}.ABT-cell{padding:28px 0 26px}.ABT-v{font-size:34px;min-height:34px}.ABT-v.text{font-size:24px}.ABT-pillars{grid-template-columns:1fr;gap:14px}}
@media (max-width:560px){.ABT-stage{padding:var(--section-pad-y-m) 0}.ABT-h2{font-size:28px}.ABT-cells{grid-template-columns:1fr}.ABT-cell:not(:nth-child(2n+1)){padding-left:0}.ABT-cell:not(:nth-child(2n+1))::before{display:none}.ABT-cell{padding:24px 0 22px}.ABT-v{font-size:32px;min-height:32px}}`;

const POINTS = [
{ v: '50', unit: 'ms', lt: true, name: '免 ICP 直連內地', sub: 'CN2 GIA 專線，毋須內地備案' },
{ vText: '$0.28', unit: '/GB 起', name: '低價透明計價', sub: '按 GB 計費，即用即計' },
{ v: '30', unit: '秒', name: '自助開通', sub: '無需聯絡銷售', cta: '立即試用 →', href: 'https://passport.8338.hk/zh-hant/signup' },
{ vText: '24×7', name: '廣東話真人支援', sub: '本地工程團隊，平均 15 分鐘回應' }];

function AboutSection() {
  return (
    <>
      <style>{ABOUT_CSS}</style>
      <section className="ABT-stage" id="about" data-screen-label="02 What is + Why CDN">
        <div className="container">
          <div className="ABT-head">
            <h2 className="ABT-h2">什麼是 <span className="accent">UD CDN</span>？</h2>
            <p className="ABT-lede">內容傳遞網絡（CDN）把網站內容緩存到世界各地的節點，讓用戶就近存取，載入更快更穩。網站慢一毫秒都可能流失訪客，尤其金融、遊戲、網店、直播，CDN 幾乎是必需品。UD CDN 由本港電訊商自 1998 年營運，以 22 個節點、300Gb+ 國際頻寬，加速香港、中國到全球的網站。</p>
          </div>

          <div className="ABT-cells">
            {POINTS.map((p, i) =>
            <div className="ABT-cell" key={i}>
                {p.vText ?
                <div className="ABT-v text">{p.vText}{p.unit && <span className="unit">{p.unit}</span>}</div> :
                <div className="ABT-v">
                    {p.lt && <span className="lt">&lt;</span>}
                    {p.v}<span className="unit">{p.unit}</span>
                  </div>
              }
                <h4 className="ABT-name">{p.name}</h4>
                <p className="ABT-sub">{p.sub}{p.cta && <>{p.sep || '，'}<a className="ABT-link" href={p.href} target="_blank" rel="noopener">{p.cta}</a></>}</p>
              </div>
            )}
          </div>

          <div className="ABT-why">
            <h3 className="ABT-why-h">為什麼選 UD</h3>
            <div className="ABT-pillars">
            <div className="ABT-pillar">
              <h4>快而穩</h4>
              <p>節點遍及全球與中國周邊，300Gb+ 頻寬分散流量；自研平台簡單易用。</p>
            </div>
            <div className="ABT-pillar">
              <h4>低成本</h4>
              <p>按流量收費，無合約、無最低用量，分散節點減輕源頭壓力。</p>
            </div>
            <div className="ABT-pillar">
              <h4>更安全</h4>
              <p>節點轉折隱藏真實 IP，降低 DDoS 風險，配 24×7 三語支援。</p>
            </div>
            </div>
          </div>
        </div>
      </section>
    </>);

}

window.AboutSection = AboutSection;