/* global React */

// ============================================================
// Smart CDN, How (3 steps to enable)
// Mirrors Video CDN's "How" pattern (dark navy bg, numbered steps,
// horizontal connector line). Tailored to Smart CDN add-on flow.
// ============================================================
const SM_HOW_CSS = `
.SM-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}
.SM-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}
.SM-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}
.SM-how-inner{position:relative}
.SM-how-head{max-width:780px;margin-bottom:60px}
.SM-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}
.SM-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}
.SM-how-sub{margin-top:18px;font-size:17px;line-height:1.7;color:rgba(255,255,255,0.72);max-width:560px;text-wrap:pretty}

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

const SM_STEPS = [
  { n: '01', title: '選擇底層 CDN', body: '於 UD CDN 控制台已有或新增本港、中國、海外 CDN 任何一個或組合計劃，作為智能調度的線路池。' },
  { n: '02', title: '一鍵啟用附加', body: '在現有 CDN 網域加上智能 CDN 附加服務，HK$20 / 月即時生效，現有配置全數繼承。' },
  { n: '03', title: '自動調度即跑', body: '系統實時偵測各線路延遲與健康狀況，自動為每位用戶選最佳路徑；故障時毫秒級切換。' },
];

function SmartHow() {
  return (
    <>
      <style>{SM_HOW_CSS}</style>
      <section className="SM-how" data-screen-label="05 How, 3 steps">
        <div className="container SM-how-inner">
          <div className="SM-how-head">
            <h2 className="SM-how-h2">三步啟用，<span className="accent">即時智能調度</span></h2>
            <p className="SM-how-sub">毋須變更網域、伺服器或應用架構，整個啟用流程可於同一個工作天內完成。</p>
          </div>
          <div className="SM-steps">
            {SM_STEPS.map((s) => (
              <div className="SM-step" key={s.n}>
                <div className="SM-step-num">{s.n}</div>
                <div className="SM-step-body">
                  <h3 className="SM-step-h3">{s.title}</h3>
                  <p className="SM-step-p">{s.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

window.SmartHow = SmartHow;