/* global React */

// ============================================================
// Video CDN, How (3 steps to go live)
// Mirrors Hong Kong CDN's "How" pattern. Tailored to video.
// ============================================================
const VD_HOW_CSS = `
.VD-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}
.VD-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}
.VD-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}
.VD-how-inner{position:relative}
.VD-how-head{max-width:780px;margin-bottom:60px}
.VD-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}
.VD-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}
.VD-how-sub{margin-top:18px;font-size:17px;line-height:1.7;color:rgba(255,255,255,0.72);max-width:560px}

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

const VD_STEPS = [
  { n: '01', title: '接入影片來源', body: '登入 UD CDN 控制台，加入直播推流地址或點播檔案來源（HLS / MPEG-DASH / MP4），完成網域驗證。' },
  { n: '02', title: '設定協定與防護', body: '選擇串流協定、自適應位元率、簽名連結與防盜鏈規則；亦可透過 API 程式化管理，毋須改動既有播放器。' },
  { n: '03', title: '切換指向並監察', body: '將播放網域指向 UD 影片 CDN 即時生效，控制台即時觀察並發觀眾、卡頓率、頻寬與節點分佈。' },
];

function VideoHow() {
  return (
    <>
      <style>{VD_HOW_CSS}</style>
      <section className="VD-how" data-screen-label="06 How, 3 steps">
        <div className="container VD-how-inner">
          <div className="VD-how-head">
            <h2 className="VD-how-h2">一鍵設定，<span className="accent">三步啟動</span></h2>
            <p className="VD-how-sub">無需重建播放器或推流流程，整個直播 / 點播部署可於同一個工作天內完成。</p>
          </div>
          <div className="VD-steps">
            {VD_STEPS.map((s) => (
              <div className="VD-step" key={s.n}>
                <div className="VD-step-num">{s.n}</div>
                <div className="VD-step-body">
                  <h3 className="VD-step-h3">{s.title}</h3>
                  <p className="VD-step-p">{s.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

window.VideoHow = VideoHow;