/* global React */

// ============================================================
// China CDN, Use Cases + How (3 steps)
// ============================================================
const CH_UC_CSS = `
.CH-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}
.CH-uc-head{max-width:780px;margin-bottom:56px}

.CH-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}
.CH-uc-h2 .accent{background:linear-gradient(100deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.CH-uc-lede{margin-top:22px;font-size:17px;line-height:1.75;color:#475569;max-width:620px;text-wrap:pretty}

.CH-uc-list{margin-top:4px;border-top:1px solid rgba(15,42,71,0.14)}
.CH-uc-row{display:grid;grid-template-columns:64px minmax(200px,1fr) 1.5fr;gap:32px;align-items:center;padding:30px 6px;border-bottom:1px solid rgba(15,42,71,0.14);transition:background .18s}
.CH-uc-row:hover{background:#FAFAFE}
.CH-uc-ic{width:60px;height:60px;border-radius:50%;background:#F3EEFE;color:#A855F7;display:flex;align-items:center;justify-content:center}
.CH-uc-ic svg{width:34px;height:34px}
.CH-uc-rt{margin:0;font-size:21px;font-weight:700;letter-spacing:-.3px;line-height:1.3;color:#0F2A47;text-wrap:balance}
.CH-uc-rp{margin:0;font-size:15.5px;line-height:1.7;color:#475569;text-wrap:pretty}
.CH-uc-rp b{color:#0F2A47;font-weight:600}

@media (max-width: 1024px){
  .CH-uc{padding:var(--section-pad-y-t) 0}
}
@media (max-width: 800px){
  .CH-uc-row{grid-template-columns:52px 1fr;gap:6px 18px;align-items:start;padding:24px 2px}
  .CH-uc-ic{width:48px;height:48px;grid-row:1 / span 2}
  .CH-uc-ic svg{width:28px;height:28px}
  .CH-uc-rt{grid-column:2;grid-row:1;font-size:18px;align-self:center}
  .CH-uc-rp{grid-column:2;grid-row:2;font-size:14.5px;margin-top:6px}
}
@media (max-width: 640px){
  .CH-uc{padding:var(--section-pad-y-m) 0}
  .CH-uc-head{margin-bottom:40px}
  .CH-uc-h2{font-size:32px;letter-spacing:-1px}
}

/* ---------- How, 3 steps ---------- */
.CH-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}
.CH-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}
.CH-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}
.CH-how-inner{position:relative}

.CH-how-head{max-width:780px;margin-bottom:64px}
.CH-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}
.CH-how-h2 .accent{color:#c4b5fd}
.CH-how-sub{margin-top:18px;font-size:17px;line-height:1.7;color:rgba(255,255,255,0.72);max-width:560px}

.CH-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
/* connecting line behind step numbers */
.CH-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}

.CH-step{position:relative;display:flex;flex-direction:column;gap:20px;padding-top:8px}
.CH-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}
.CH-step-num .arrow{position:absolute;right:-26px;top:50%;transform:translateY(-50%);font-size:18px;color:rgba(196,181,253,0.75)}
.CH-step:last-child .CH-step-num .arrow{display:none}

.CH-step-h3{margin:8px 0 0;font-size:22px;font-weight:700;letter-spacing:-.3px;line-height:1.3;color:#fff;text-wrap:balance}
.CH-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){
  .CH-how{padding:var(--section-pad-y-t) 0}
  .CH-steps{grid-template-columns:1fr;gap:32px}
  .CH-steps::before{display:none}
  .CH-step{flex-direction:row;align-items:flex-start;gap:22px}
  .CH-step-num{width:56px;height:56px;font-size:20px;flex-shrink:0}
  .CH-step-num .arrow{display:none}
  .CH-step-body{flex:1;min-width:0}
  .CH-step-h3{margin-top:14px}
}
@media (max-width: 640px){
  .CH-how{padding:var(--section-pad-y-m) 0}
  .CH-how-head{margin-bottom:48px}
  .CH-how-h2{font-size:32px;letter-spacing:-1px}
}
`;

// ----- Use case glyphs -----
const GlyphCart = () => (
  <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" fill="none" />
    <circle cx="14" cy="30" r="2.2" fill="currentColor" />
    <circle cx="26" cy="30" r="2.2" fill="currentColor" />
  </svg>
);
const GlyphAPI = () => (
  <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" fill="none" />
    <path d="M 10 15 L 13 18 L 10 21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    <path d="M 26 15 L 23 18 L 26 21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    <line x1="15" y1="23" x2="21" y2="13" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
  </svg>
);
const GlyphPulse = () => (
  <svg viewBox="0 0 36 36" fill="none" aria-hidden="true">
    <path d="M 3 18 L 10 18 L 13 10 L 18 26 L 22 14 L 26 22 L 33 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
  </svg>
);
const GlyphPlay2 = () => (
  <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" fill="none" />
    <path d="M 15 13 L 24 18 L 15 23 Z" fill="currentColor" />
  </svg>
);
const GlyphMegaphone = () => (
  <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 USE_CASES = [
  {
    icon: <GlyphCart />,
    title: '跨境電商與品牌官網',
    body: '減少內地用戶在產品頁與結算流失，每延遲 <b>100ms，轉換率降約 7%</b>。',
  },
  {
    icon: <GlyphAPI />,
    title: 'SaaS 與 API 平台',
    body: '為內地用戶提供穩定 API 回應與動態內容，減少跨境協作摩擦。',
  },
  {
    icon: <GlyphPulse />,
    title: '金融科技與外匯平台',
    body: '加速 WebSocket 與動態內容，實時報價以 <b>毫秒級延遲</b>直送內地客戶端。',
  },
  {
    icon: <GlyphPlay2 />,
    title: '影音媒體與線上遊戲',
    body: '支援 MP4、HLS、MPEG-DASH 等串流協定，內地觀眾保持流暢高畫質。',
  },
  {
    icon: <GlyphMegaphone />,
    title: '面向內地的廣告投放與市場推廣',
    body: '小紅書、微信、抖音導流着陸頁快速載入，每個點擊都順利轉換。',
  },
];

function ChinaUseCases() {
  return (
    <>
      <style>{CH_UC_CSS}</style>
      <section className="CH-uc" data-screen-label="04 Use Cases">
        <div className="container">
          <div className="CH-uc-head">
            <h2 className="CH-uc-h2">哪些業務需要 <span className="accent">中國 CDN？</span></h2>
            <p className="CH-uc-lede">
              只要客戶、員工或合作夥伴身處中國內地，又無法承擔 ICP 備案的時間與資金成本，中國 CDN 就是有效的選擇。
            </p>
          </div>
          <div className="CH-uc-list">
            {USE_CASES.map((u, i) => (
              <div key={i} className="CH-uc-row">
                <div className="CH-uc-ic">{u.icon}</div>
                <h3 className="CH-uc-rt">{u.title}</h3>
                <p className="CH-uc-rp" dangerouslySetInnerHTML={{ __html: u.body }} />
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

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

function ChinaHow() {
  return (
    <section className="CH-how" data-screen-label="05 How, 3 steps">
      <div className="container CH-how-inner">
        <div className="CH-how-head">
          <h2 className="CH-how-h2">一鍵設定，<span className="accent">三步啟動</span></h2>
          <p className="CH-how-sub">無需修改現有伺服器架構，整個流程可於同一個工作天內完成。</p>
        </div>

        <div className="CH-steps">
          {STEPS.map((s, i) => (
            <div className="CH-step" key={s.n}>
              <div className="CH-step-num">{s.n}<span className="arrow">→</span></div>
              <div className="CH-step-body">
                <h3 className="CH-step-h3">{s.title}</h3>
                <p className="CH-step-p">{s.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.ChinaUseCases = ChinaUseCases;
window.ChinaHow = ChinaHow;