/* global React */

// ============================================================
// Hong Kong CDN, How (3 steps to go live)
// Mirrors Overseas CDN's "How" pattern. Sits under Pricing.
// ============================================================
const HK_HOW_CSS = `
.HK-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}
.HK-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}
.HK-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}
.HK-how-inner{position:relative}
.HK-how-head{max-width:780px;margin-bottom:60px}
.HK-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}
.HK-how-h2 .accent{background:linear-gradient(135deg,#C4B5FD 0%,#A855F7 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.HK-how-sub{margin-top:18px;font-size:17px;line-height:1.7;color:rgba(255,255,255,0.72);max-width:560px}

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

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

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

window.HongKongHow = HongKongHow;