/* global React */

// ============================================================
// Overseas CDN, Who needs this (use cases) + How (3 steps)
// ============================================================
const OV_UC_CSS = `
.OV-uc{position:relative;background:#fff;padding:var(--section-pad-y-d) 0;font-family:'Inter','Noto Sans HK','Noto Sans TC',sans-serif;color:#0F2A47}
.OV-uc-head{max-width:820px;margin-bottom:52px}
.OV-uc-h2{margin:0;font-size:clamp(36px,4.2vw,56px);line-height:1.08;font-weight:700;letter-spacing:-1.6px;color:#0F2A47;text-wrap:balance}
.OV-uc-h2 .accent{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.OV-uc-lede{margin-top:22px;font-size:17px;line-height:1.75;color:#475569;max-width:660px;text-wrap:pretty}

.OV-uc-list{margin-top:8px;border-top:1px solid rgba(15,42,71,0.12)}
.OV-uc-row{display:grid;grid-template-columns:56px 1.05fr 1.55fr;grid-template-areas:"ic title desc";align-items:center;gap:14px 30px;padding:28px 10px;border-bottom:1px solid rgba(15,42,71,0.12);transition:background .18s}
.OV-uc-row:hover{background:linear-gradient(90deg,rgba(167,139,250,0.08) 0%,rgba(167,139,250,0) 60%)}
.OV-uc-ic{grid-area:ic;width:54px;height:54px;border-radius:15px;background:linear-gradient(135deg,#F3EEFE 0%,#E7DEFB 100%);color:#7C3AED;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(124,58,237,0.10)}
.OV-uc-ic svg{width:28px;height:28px}
.OV-uc-t{grid-area:title;margin:0;font-size:19px;font-weight:700;letter-spacing:-.3px;line-height:1.35;color:#0F2A47;text-wrap:balance}
.OV-uc-d{grid-area:desc;margin:0;font-size:15px;line-height:1.65;color:#475569;text-wrap:pretty}
.OV-uc-d b{color:#0F2A47;font-weight:600}

@media (max-width: 1024px){
  .OV-uc{padding:var(--section-pad-y-t) 0}
}
@media (max-width: 640px){
  .OV-uc{padding:var(--section-pad-y-m) 0}
  .OV-uc-head{margin-bottom:40px}
  .OV-uc-h2{font-size:32px;letter-spacing:-1px}
  .OV-uc-row{grid-template-columns:48px 1fr;grid-template-areas:"ic title" ". desc";gap:10px 18px;padding:24px 4px}
  .OV-uc-ic{width:46px;height:46px;border-radius:13px}
  .OV-uc-ic svg{width:24px;height:24px}
  .OV-uc-t{font-size:17px}
  .OV-uc-d{font-size:14.5px}
}

/* ---------- How, 3 steps ---------- */
.OV-how{position:relative;background:#0F2A47;color:#fff;padding:var(--section-pad-y-d) 0;font-family:'Inter','Noto Sans HK','Noto Sans TC',sans-serif;overflow:hidden}
.OV-how::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(139,92,246,0.20) 0%,transparent 70%);pointer-events:none}
.OV-how::after{content:'';position:absolute;bottom:-200px;left:-200px;width:500px;height:500px;background:radial-gradient(circle,rgba(139,92,246,0.10) 0%,transparent 70%);pointer-events:none}
.OV-how-inner{position:relative}
.OV-how-head{max-width:780px;margin-bottom:60px}
.OV-how-h2{margin:0;font-size:clamp(36px,4.2vw,56px);line-height:1.08;font-weight:700;letter-spacing:-1.6px;color:#fff;text-wrap:balance}
.OV-how-h2 .accent{color:#c4b5fd}
.OV-how-sub{margin-top:18px;font-size:17px;line-height:1.7;color:rgba(255,255,255,0.72);max-width:560px}

.OV-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.OV-steps::before{content:'';position:absolute;top:34px;left:8%;right:8%;height:1px;background:linear-gradient(90deg,rgba(196,181,253,0) 0%,rgba(196,181,253,0.45) 15%,rgba(196,181,253,0.45) 85%,rgba(196,181,253,0) 100%);pointer-events:none}
.OV-step{position:relative;display:flex;flex-direction:column;gap:18px;padding-top:8px}
.OV-step-num{position:relative;z-index:1;width:68px;height:68px;border-radius:50%;background:#0F2A47;border:1.5px solid rgba(196,181,253,0.40);color:#c4b5fd;display:flex;align-items:center;justify-content:center;font-family:'Chakra Petch','Inter',sans-serif;font-size:24px;font-weight:600;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.OV-step-h3{margin:8px 0 0;font-size:22px;font-weight:700;letter-spacing:-.3px;line-height:1.3;color:#fff;text-wrap:balance}
.OV-step-p{margin:0;font-size:15px;line-height:1.7;color:rgba(255,255,255,0.72);text-wrap:pretty;max-width:340px}

@media (max-width: 900px){
  .OV-how{padding:var(--section-pad-y-t) 0}
  .OV-steps{grid-template-columns:1fr;gap:32px}
  .OV-steps::before{display:none}
  .OV-step{flex-direction:row;align-items:flex-start;gap:22px}
  .OV-step-num{width:56px;height:56px;font-size:20px;flex-shrink:0}
  .OV-step-body{flex:1;min-width:0}
  .OV-step-h3{margin-top:12px}
}
@media (max-width: 640px){
  .OV-how{padding:var(--section-pad-y-m) 0}
  .OV-how-head{margin-bottom:48px}
  .OV-how-h2{font-size:32px;letter-spacing:-1px}
}
`;

const OvCart = () => (<svg viewBox="0 0 36 36" fill="none" aria-hidden="true"><path d="M 4 7 L 8 7 L 11 24 L 28 24 L 31 12 L 11 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /><circle cx="14" cy="30" r="2.2" fill="currentColor" /><circle cx="26" cy="30" r="2.2" fill="currentColor" /></svg>);
const OvAPI = () => (<svg viewBox="0 0 36 36" fill="none" aria-hidden="true"><rect x="4" y="6" width="28" height="24" rx="3" stroke="currentColor" strokeWidth="2" /><path d="M 10 15 L 13 18 L 10 21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /><path d="M 26 15 L 23 18 L 26 21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /><line x1="15" y1="23" x2="21" y2="13" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>);
const OvPlay = () => (<svg viewBox="0 0 36 36" fill="none" aria-hidden="true"><rect x="4" y="7" width="28" height="22" rx="3" stroke="currentColor" strokeWidth="2" /><path d="M 15 13 L 24 18 L 15 23 Z" fill="currentColor" /></svg>);
const OvGame = () => (<svg viewBox="0 0 36 36" fill="none" aria-hidden="true"><rect x="3" y="11" width="30" height="16" rx="8" stroke="currentColor" strokeWidth="2" /><line x1="10" y1="16" x2="10" y2="22" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /><line x1="7" y1="19" x2="13" y2="19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /><circle cx="24" cy="17.5" r="1.8" fill="currentColor" /><circle cx="27.5" cy="21" r="1.8" fill="currentColor" /></svg>);
const OvBuilding = () => (<svg viewBox="0 0 36 36" fill="none" aria-hidden="true"><rect x="7" y="5" width="22" height="27" rx="2" stroke="currentColor" strokeWidth="2" /><line x1="12" y1="11" x2="16" y2="11" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /><line x1="20" y1="11" x2="24" y2="11" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /><line x1="12" y1="17" x2="16" y2="17" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /><line x1="20" y1="17" x2="24" y2="17" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /><line x1="15" y1="32" x2="21" y2="32" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg>);
const OvMega = () => (<svg viewBox="0 0 36 36" fill="none" aria-hidden="true"><path d="M 6 13 L 6 23 L 13 23 L 26 30 L 26 6 L 13 13 Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" fill="none" /><path d="M 26 14 Q 31 18 26 22" stroke="currentColor" strokeWidth="2" strokeLinecap="round" fill="none" /></svg>);

const OV_USE_CASES = [
  { icon: <OvCart />, title: '跨境電商與直銷品牌', body: '減少海外用戶於結算流失，每延遲 <b>1 秒，轉換率下降 7%</b>。' },
  { icon: <OvAPI />, title: '出海雲端軟體與 API 平台', body: '為全球用戶提供穩定回應與動態內容，避免跨境請求拖慢生產力。' },
  { icon: <OvPlay />, title: '串流影音媒體與直播', body: '支援主流串流協定，大型賽事與全球直播維持高畫質低緩衝。' },
  { icon: <OvGame />, title: '出海手遊與線上服務', body: '更新檔、登入認證與動態內容就近送達玩家，縮短首次連線等候。' },
  { icon: <OvBuilding />, title: '跨國企業內網與員工門戶', body: '內網系統、文件協作與培訓影片，讓各國辦事處員工以本地速度載入。' },
  { icon: <OvMega />, title: '面向海外市場的廣告着陸頁', body: '別讓買回來的每個點擊，敗在 <b>3 秒以上的等待</b>。' },
];

function OverseasUseCases() {
  return (
    <>
      <style>{OV_UC_CSS}</style>
      <section className="OV-uc" data-screen-label="04 Use Cases">
        <div className="container">
          <div className="OV-uc-head">
            <h2 className="OV-uc-h2">哪些業務需要 <span className="accent">海外 CDN？</span></h2>
            <p className="OV-uc-lede">
              只要客戶、員工或合作夥伴身處香港以外，又希望以可預測成本提供本地級體驗，海外 CDN 都是有效選擇。
            </p>
          </div>
          <div className="OV-uc-list">
            {OV_USE_CASES.map((u, i) => (
              <div key={i} className="OV-uc-row">
                <div className="OV-uc-ic">{u.icon}</div>
                <h3 className="OV-uc-t">{u.title}</h3>
                <p className="OV-uc-d" dangerouslySetInnerHTML={{ __html: u.body }} />
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

const OV_STEPS = [
  { n: '01', title: '加入網域', body: '登入 UD CDN 控制台，輸入需要加速的網站網域並驗證擁有權。' },
  { n: '02', title: '設定快取', body: '以基本或進階模式設定快取規則，亦可透過開發者介面程式化管理；毋須變更現有應用架構。' },
  { n: '03', title: '切換指向並監察', body: '將網域指向 UD CDN 即時生效。控制台即時監察流量、延遲、命中率與用量。' },
];

function OverseasHow() {
  return (
    <section className="OV-how" data-screen-label="05 How, 3 steps">
      <div className="container OV-how-inner">
        <div className="OV-how-head">
          <h2 className="OV-how-h2">一鍵設定，<span className="accent">三步啟動</span></h2>
          <p className="OV-how-sub">無需修改現有伺服器架構，整個流程可於同一個工作天內完成。</p>
        </div>
        <div className="OV-steps">
          {OV_STEPS.map((s) => (
            <div className="OV-step" key={s.n}>
              <div className="OV-step-num">{s.n}</div>
              <div className="OV-step-body">
                <h3 className="OV-step-h3">{s.title}</h3>
                <p className="OV-step-p">{s.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.OverseasUseCases = OverseasUseCases;
window.OverseasHow = OverseasHow;