/* global React */

// ============================================================
// Smart CDN, What is
// Editorial split: lede left + DIY-vs-UD comparison right
// Key narrative: 不是獨立 CDN，是「為現有 CDN 加上多線路調度」嘅附加服務
// ============================================================
const SM_WHAT_CSS = `
.SM-what{position:relative;background:#fff;padding:var(--section-pad-y-d) 0;font-family:'Noto Sans HK','Noto Sans TC','Inter',sans-serif;color:#0F2A47}
.SM-what-inner{position:relative;display:grid;grid-template-columns:0.95fr 1.05fr;gap:80px;align-items:start}

.SM-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;max-width:780px}
.SM-h2 .accent{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

.SM-lede{margin-top:24px;font-size:17px;line-height:1.8;color:#475569;max-width:520px;text-wrap:pretty}
.SM-lede strong{color:#0F2A47;font-weight:600}
.SM-lede + .SM-lede{margin-top:18px}
.SM-lede.SM-lede-hl{position:relative;margin-top:22px;padding:22px 26px;background:linear-gradient(120deg,rgba(167,139,250,0.10) 0%,rgba(124,58,237,0.07) 100%);border-radius:14px;color:#3b2d59}
.SM-lede.SM-lede-hl::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:99px;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%)}
.SM-lede.SM-lede-hl strong{color:#6D28D9}

/* Inline footnote with combo regions */
.SM-combo{margin-top:30px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13.5px;color:#64748b}
.SM-combo .lbl{font-family:'Chakra Petch',monospace;font-size:13px;font-weight:700;color:#7C3AED;letter-spacing:1px;text-transform:uppercase}
.SM-combo-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#F3EEFE;border-radius:999px;color:#6D28D9;font-weight:600;font-size:13px}
.SM-combo-plus{font-family:'Chakra Petch',monospace;color:#A855F7;font-weight:700}

/* Comparison, two stacked panels */
.SM-comp{display:flex;flex-direction:column;gap:18px}
.SM-comp-row{position:relative;background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:18px;padding:26px 28px 28px;display:flex;flex-direction:column;gap:16px;transition:all .2s}
.SM-comp-row.bad{background:linear-gradient(180deg,#FAFAFC 0%,#F4F4F7 100%)}
.SM-comp-row.good{background:linear-gradient(180deg,#FAFAFE 0%,#F6F4FB 100%);border-color:rgba(124,58,237,0.30);box-shadow:0 12px 28px rgba(124,58,237,0.10)}
.SM-comp-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.SM-comp-t{margin:0;font-size:19px;font-weight:700;color:#0F2A47;letter-spacing:-.2px;line-height:1.3}
.SM-comp-tag{font-size:13px;font-weight:700;color:#94a3b8;font-family:'Chakra Petch',monospace;letter-spacing:.5px;text-transform:uppercase}
.SM-comp-row.good .SM-comp-tag{color:#7C3AED}

.SM-comp-svg{width:100%;height:auto;display:block;max-height:150px}
.SM-comp-p{margin:0;font-size:14.5px;line-height:1.65;color:#64748b;text-wrap:pretty}
.SM-comp-p b{color:#0F2A47;font-weight:600}
.SM-comp-row.good .SM-comp-p b{color:#6D28D9}

@media (max-width: 1024px){
  .SM-what{padding:var(--section-pad-y-t) 0}
  .SM-what-inner{grid-template-columns:1fr;gap:52px}
}
@media (max-width: 640px){
  .SM-what{padding:var(--section-pad-y-m) 0}
  .SM-h2{font-size:32px;letter-spacing:-1px}
  .SM-lede{font-size:15.5px}
  .SM-comp-row{padding:22px 20px}
}
`;

// --- Comparison diagrams, minimal, no labels in graph ---
// DIY: client touches 3 separate vendor stacks (visually crowded)
function DiyDiag() {
  return (
    <svg className="SM-comp-svg" viewBox="0 0 480 120" aria-hidden="true">
      {/* client dot */}
      <circle cx="40" cy="60" r="10" fill="#0F2A47" />

      {/* 3 separate vendor blocks, different shades, slightly offset, dashed connector */}
      {[
        { y: 18, c: '#cbd5e1' },
        { y: 52, c: '#94a3b8' },
        { y: 86, c: '#64748b' },
      ].map((v, i) => (
        <g key={i}>
          <line x1="54" y1="60" x2="180" y2={v.y + 12} stroke="#cbd5e1" strokeWidth="1.4" strokeDasharray="4 4" />
          <rect x="180" y={v.y} width="140" height="24" rx="4" fill={v.c} opacity=".25" />
          <rect x="180" y={v.y} width="6" height="24" fill={v.c} />
          <text x="196" y={v.y + 16} fontFamily="'Chakra Petch',monospace" fontSize="12" fontWeight="700" fill="#475569">CDN {String.fromCharCode(65 + i)}</text>
        </g>
      ))}

      {/* 3 invoice receipts stacked */}
      <g transform="translate(346,28)">
        {[0, 8, 16].map((o, i) => (
          <g key={i}>
            <rect x={o} y={o} width="56" height="56" rx="3" fill="#fff" stroke="#94a3b8" strokeWidth="1.2" />
            <line x1={o + 8} y1={o + 14} x2={o + 48} y2={o + 14} stroke="#94a3b8" strokeWidth="1" />
            <line x1={o + 8} y1={o + 22} x2={o + 40} y2={o + 22} stroke="#cbd5e1" strokeWidth="1" />
            <line x1={o + 8} y1={o + 30} x2={o + 44} y2={o + 30} stroke="#cbd5e1" strokeWidth="1" />
          </g>
        ))}
      </g>
    </svg>
  );
}

// UD: client → one hub → fan out (clean, single block)
function UDDiag() {
  return (
    <svg className="SM-comp-svg" viewBox="0 0 480 120" aria-hidden="true">
      <defs>
        <radialGradient id="sm-w-hub" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#7C3AED" />
          <stop offset="100%" stopColor="#4C1D95" />
        </radialGradient>
      </defs>

      {/* client dot */}
      <circle cx="40" cy="60" r="10" fill="#0F2A47" />
      <line x1="54" y1="60" x2="154" y2="60" stroke="#7C3AED" strokeWidth="2" />

      {/* single smart hub */}
      <g transform="translate(184,60)">
        <circle r="32" fill="url(#sm-w-hub)" />
        <g stroke="#C4B5FD" strokeWidth="2" strokeLinecap="round" fill="none">
          <path d="M -10 -10 L 10 -10" />
          <path d="M -10 0 L 10 0" />
          <path d="M -10 10 L 10 10" />
        </g>
        {[-10, 0, 10].map((y, i) => (
          <g key={i}>
            <circle cx="-10" cy={y} r="2" fill="#fff" />
            <circle cx="10"  cy={y} r="2" fill="#fff" />
          </g>
        ))}
      </g>

      {/* 3 routes fan out → user pool, with one highlighted */}
      {[
        { y: 22, w: 1.6, o: 0.5 },
        { y: 60, w: 2.4, o: 1, best: true },
        { y: 98, w: 1.6, o: 0.5 },
      ].map((r, i) => (
        <g key={i}>
          <path d={`M 216 60 Q 290 ${r.y} 360 ${r.y}`} fill="none" stroke={r.best ? '#7C3AED' : '#A855F7'} strokeWidth={r.w} opacity={r.o} strokeLinecap="round" />
          <circle cx="360" cy={r.y} r={r.best ? 6 : 4} fill={r.best ? '#7C3AED' : '#C4B5FD'} opacity={r.o} />
        </g>
      ))}
      {/* single invoice, one bill */}
      <g transform="translate(400,32)">
        <rect x="0" y="0" width="56" height="56" rx="4" fill="#fff" stroke="#7C3AED" strokeWidth="1.6" />
        <line x1="8" y1="14" x2="48" y2="14" stroke="#7C3AED" strokeWidth="1" />
        <line x1="8" y1="22" x2="40" y2="22" stroke="#A855F7" strokeWidth="1" />
        <line x1="8" y1="30" x2="44" y2="30" stroke="#A855F7" strokeWidth="1" />
      </g>
    </svg>
  );
}

function SmartWhat() {
  return (
    <>
      <style>{SM_WHAT_CSS}</style>
      <section className="SM-what" data-screen-label="02 What is Smart CDN">
        <div className="container SM-what-inner">
          <div>
            <h2 className="SM-h2">甚麼是<br /><span className="accent">智能 CDN？</span></h2>
            <p className="SM-lede">
              智能 CDN 是 CDN 的<strong>附加服務</strong>。背後維持多條線路與節點，按用戶位置與實時網絡狀況選擇最佳路徑，
              並在任一線路出現異常時自動切換。
            </p>
            <p className="SM-lede SM-lede-hl">
              <strong>它不是獨立 CDN。</strong>而是附加於本港、中國、海外 CDN 任何一個或組合之上，
              將「單線路」即時升級為「多線路智能調度」。
            </p>
            <div className="SM-combo">
              <span className="lbl">可附加組合</span>
              <span className="SM-combo-chip">香港 CDN</span>
              <span className="SM-combo-plus">+</span>
              <span className="SM-combo-chip">中國 CDN</span>
              <span className="SM-combo-plus">+</span>
              <span className="SM-combo-chip">海外 CDN</span>
            </div>
          </div>

          <div className="SM-comp">
            <div className="SM-comp-row bad">
              <div className="SM-comp-head">
                <h3 className="SM-comp-t">自建 multi-CDN</h3>
                <span className="SM-comp-tag">DIY · 高成本</span>
              </div>
              <DiyDiag />
              <p className="SM-comp-p">
                客戶自行整合<b>多家供應商</b>、自建 DNS 切換、計費整合與監察工具。技術門檻與營運成本俱高。
              </p>
            </div>

            <div className="SM-comp-row good">
              <div className="SM-comp-head">
                <h3 className="SM-comp-t">UD 智能 CDN</h3>
                <span className="SM-comp-tag">啟用即運行</span>
              </div>
              <UDDiag />
              <p className="SM-comp-p">
                多線路調度、故障切換、統一監察與計費由 UD 內部完成。
                啟用即<b>無需額外整合工作</b>，按 <b>HK$20 / 月</b>附加收費。
              </p>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

window.SmartWhat = SmartWhat;