/* global React */

// ============================================================
// Smart CDN, Merged "Benefits + Capabilities"
// Header: 一個附加 · 全部齊備
// Layout: header (left) + breakout HERO card (right, pops up via -translateY)
//         + 6-card bento below
// ============================================================
const SM_STK_CSS = `
.SM-stk{position:relative;background:linear-gradient(180deg,#F6F4FB 0%,#FAFAFE 100%);padding:var(--section-pad-y-d) 0;font-family:'Inter','Noto Sans HK','Noto Sans TC',sans-serif;color:#0F2A47;border-top:1px solid rgba(15,42,71,0.06);border-bottom:1px solid rgba(15,42,71,0.06);overflow:visible}

/* === Top row: header (left, narrow) + breakout hero (right, wider) === */
.SM-stk-top{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;margin-bottom:48px}

.SM-stk-head{position:sticky;top:160px;padding-top:8px}
.SM-stk-h2{margin:0;font-size:clamp(36px,4.2vw,56px);line-height:1.05;font-weight:700;letter-spacing:-1.6px;color:#0F2A47;text-wrap:balance}
.SM-stk-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-stk-h2 .div{display:block;margin:8px 0;width:48px;height:2px;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);border-radius:99px}
.SM-stk-lede{margin-top:22px;font-size:16.5px;line-height:1.75;color:#475569;max-width:380px;text-wrap:pretty}
.SM-stk-lede strong{color:#0F2A47;font-weight:600}

/* === Breakout hero card, pops up out of the section top === */
.SM-pop{position:relative;background:radial-gradient(120% 120% at 88% 0%,#33215e 0%,#1a2347 45%,#0F2A47 100%);color:#fff;border-radius:24px;padding:38px 40px 36px;overflow:hidden;transform:translateY(-56px);box-shadow:0 32px 60px -16px rgba(15,42,71,0.34),0 0 0 1px rgba(167,139,250,0.18)}
.SM-pop::before{content:'';position:absolute;top:-120px;right:-100px;width:340px;height:340px;background:radial-gradient(circle,rgba(167,139,250,0.42) 0%,transparent 70%);pointer-events:none}
.SM-pop-top{position:relative;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:end;margin-bottom:24px}
.SM-pop-num{display:flex;align-items:baseline;gap:8px;font-family:'Inter',sans-serif;font-weight:700;line-height:1;letter-spacing:-2.4px;font-variant-numeric:tabular-nums}
.SM-pop-num .v{font-size:92px;background:linear-gradient(135deg,#C4B5FD 0%,#A855F7 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.SM-pop-num .u{font-size:24px;color:#C4B5FD;font-weight:600;letter-spacing:-.3px}
.SM-pop-h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-.3px;line-height:1.35;color:#fff;text-wrap:balance;padding-bottom:8px}

.SM-pop-region{position:relative;padding:18px 18px;background:rgba(0,0,0,0.22);border:1px solid rgba(196,181,253,0.18);border-radius:12px;display:flex;flex-direction:column;gap:12px}
.SM-pop-region-cap{display:flex;justify-content:space-between;align-items:center;font-family:'Chakra Petch',monospace;font-size:13px;color:rgba(196,181,253,0.75);letter-spacing:1.2px;text-transform:uppercase;padding-bottom:2px;border-bottom:1px dashed rgba(196,181,253,0.20)}
.SM-pop-region-cap .live{display:inline-flex;align-items:center;gap:6px;color:#C4B5FD;font-weight:700}
.SM-pop-region-cap .live::before{content:'';width:6px;height:6px;border-radius:50%;background:#5EEAD4;animation:smPulse 1.6s ease-in-out infinite}
@keyframes smPulse{0%,100%{opacity:1}50%{opacity:.35}}
.SM-region-row{display:grid;grid-template-columns:84px 1fr 52px;gap:14px;align-items:center;font-family:'Chakra Petch','Inter',sans-serif;font-size:13px;color:rgba(196,181,253,0.78);font-variant-numeric:tabular-nums}
.SM-region-row .lbl{color:rgba(255,255,255,0.92);font-weight:700;letter-spacing:.2px}
.SM-region-bar{height:6px;background:rgba(196,181,253,0.14);border-radius:99px;position:relative;overflow:hidden}
.SM-region-bar span{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#C4B5FD,#7C3AED);border-radius:99px}
.SM-region-row .ms{text-align:right;font-weight:700;color:#fff}

.SM-pop-foot{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.SM-pop-foot-p{margin:0;font-size:14px;line-height:1.65;color:rgba(255,255,255,0.74);max-width:420px;text-wrap:pretty}
.SM-pop-foot-p b{color:#fff;font-weight:600}
.SM-pop-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;font-size:14px;font-weight:700;color:#0F2A47;background:#fff;border-radius:999px;text-decoration:none;transition:all .15s;white-space:nowrap}
.SM-pop-btn:hover{background:#C4B5FD;transform:translateY(-1px)}

/* === Bento grid (6 items) === */
.SM-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:-32px}
.SM-bx{position:relative;background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:18px;padding:28px 28px 26px;display:flex;flex-direction:column;gap:14px;transition:all .2s;overflow:hidden}
.SM-bx:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(124,58,237,0.10);border-color:rgba(124,58,237,0.30)}
.SM-bx-num{position:absolute;top:20px;right:24px;font-family:'Chakra Petch',ui-monospace,monospace;font-size:13px;font-weight:700;letter-spacing:1.2px;color:rgba(124,58,237,0.75);font-variant-numeric:tabular-nums}
.SM-bx-icon{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#F3EEFE 0%,#E7DEFB 100%);color:#7C3AED;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(124,58,237,0.10)}
.SM-bx-icon svg{width:24px;height:24px}
.SM-bx-h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.2px;line-height:1.35;color:#0F2A47;text-wrap:balance}
.SM-bx-p{margin:0;font-size:14.5px;line-height:1.65;color:#475569;text-wrap:pretty}
.SM-bx-p b{color:#0F2A47;font-weight:600}

/* Card 2 (rules) is wider, spans 2 cols on desktop */
.SM-bx-wide{grid-column:span 2;background:linear-gradient(180deg,#FAFAFE 0%,#F4F0FE 100%)}
.SM-rules{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.SM-rule{display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:center;padding:10px 14px;background:#fff;border:1px solid rgba(124,58,237,0.18);border-radius:8px;font-size:13px}
.SM-rule .k{font-family:'Chakra Petch',monospace;font-size:13px;font-weight:700;color:#A855F7;letter-spacing:.8px;text-transform:uppercase}
.SM-rule .cond{color:#475569;font-weight:600;letter-spacing:-.1px}
.SM-rule .arrow{justify-self:start;color:#A855F7;font-family:'Chakra Petch',monospace;font-weight:700;padding:0 4px}
.SM-rule .act{color:#6D28D9;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.SM-rule .act::before{content:'';width:5px;height:5px;border-radius:50%;background:#7C3AED}

@media (max-width: 1024px){
  .SM-stk{padding:var(--section-pad-y-t) 0}
  .SM-stk-top{grid-template-columns:1fr;gap:36px}
  .SM-stk-head{position:static}
  .SM-pop{transform:none}
  .SM-bento{margin-top:0;grid-template-columns:repeat(2,1fr)}
  .SM-bx-wide{grid-column:span 2}
}
@media (max-width: 640px){
  .SM-stk{padding:var(--section-pad-y-m) 0}
  .SM-stk-h2{font-size:32px;letter-spacing:-1px}
  .SM-pop{padding:30px 24px 26px;border-radius:20px}
  .SM-pop-top{grid-template-columns:1fr;gap:8px;align-items:start}
  .SM-pop-num .v{font-size:64px}
  .SM-pop-num .u{font-size:20px}
  .SM-pop-h3{font-size:19px}
  .SM-region-row{grid-template-columns:64px 1fr 44px;font-size:13px;gap:10px}
  .SM-bento{grid-template-columns:1fr}
  .SM-bx,.SM-bx-wide{grid-column:auto;padding:24px 22px}
  .SM-rule{grid-template-columns:1fr;gap:4px}
  .SM-rule .arrow{display:none}
}
`;

const SmStkIc = {
  best: () => <svg viewBox="0 0 28 28" fill="none" aria-hidden="true">
    <path d="M 4 14 Q 14 4 24 14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" fill="none" />
    <path d="M 4 14 Q 14 24 24 14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" fill="none" strokeDasharray="3 3" opacity=".55" />
    <circle cx="4" cy="14" r="2" fill="currentColor" />
    <circle cx="24" cy="14" r="2" fill="currentColor" />
  </svg>,
  fail: () => <svg viewBox="0 0 28 28" fill="none" aria-hidden="true">
    <path d="M 3 9 L 9 9 L 11 5 L 15 13 L 17 9 L 25 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    <path d="M 3 20 Q 14 20 25 20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" fill="none" />
    <path d="M 21 17 L 25 20 L 21 23" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
  </svg>,
  rules: () => <svg viewBox="0 0 28 28" fill="none" aria-hidden="true">
    <rect x="4" y="5" width="20" height="5" rx="1.5" stroke="currentColor" strokeWidth="1.8" />
    <rect x="4" y="12" width="20" height="5" rx="1.5" stroke="currentColor" strokeWidth="1.8" />
    <rect x="4" y="19" width="20" height="5" rx="1.5" stroke="currentColor" strokeWidth="1.8" />
    <circle cx="8" cy="7.5" r="1.2" fill="currentColor" />
    <circle cx="8" cy="14.5" r="1.2" fill="currentColor" />
    <circle cx="8" cy="21.5" r="1.2" fill="currentColor" />
  </svg>,
  console: () => <svg viewBox="0 0 28 28" fill="none" aria-hidden="true">
    <rect x="3" y="5" width="22" height="18" rx="2.5" stroke="currentColor" strokeWidth="1.8" />
    <line x1="3" y1="10" x2="25" y2="10" stroke="currentColor" strokeWidth="1.8" />
    <circle cx="6.5" cy="7.5" r="0.8" fill="currentColor" />
    <circle cx="9" cy="7.5" r="0.8" fill="currentColor" />
    <path d="M 7 16 L 10 19 L 14 13 L 18 17 L 21 14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none" />
  </svg>,
  shield: () => <svg viewBox="0 0 28 28" fill="none" aria-hidden="true">
    <path d="M 14 3 L 24 7 L 24 14 Q 24 21 14 25 Q 4 21 4 14 L 4 7 Z" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round" />
    <path d="M 9.5 14 L 12.5 17 L 18.5 11" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none" />
  </svg>,
  chat: () => <svg viewBox="0 0 28 28" fill="none" aria-hidden="true">
    <path d="M 4 7 L 4 19 Q 4 22 7 22 L 15 22 L 20 26 L 20 22 L 21 22 Q 24 22 24 19 L 24 7 Q 24 4 21 4 L 7 4 Q 4 4 4 7 Z" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round" />
    <circle cx="10" cy="13" r="1.4" fill="currentColor" />
    <circle cx="14" cy="13" r="1.4" fill="currentColor" />
    <circle cx="18" cy="13" r="1.4" fill="currentColor" />
  </svg>
};

function SmartStack() {
  return (
    <>
      <style>{SM_STK_CSS}</style>
      <section className="SM-stk" data-screen-label="06 一個附加 全部齊備">
        <div className="container">
          {/* Top row: header + breakout hero */}
          <div className="SM-stk-top">
            <div className="SM-stk-head">
              <h2 className="SM-stk-h2">
                智能CDN<span className="div"></span>
                <span className="accent">讓網絡常駐</span>
              </h2>
              <p className="SM-stk-lede">
                啟用後即刻運作： <strong>調度、切換、自定規則、監察、安全、支援</strong>一併內建，毋須額外整合。
              </p>
            </div>

            {/* Breakout hero card */}
            <article className="SM-pop">
              <div className="SM-pop-top">
                <div className="SM-pop-num">
                  <span className="v">99.99</span><span className="u">%</span>
                </div>
                <h3 className="SM-pop-h3">
                  最佳線路自動選擇 · 異常即時切換
                </h3>
              </div>

              <div className="SM-pop-region">
                <div className="SM-pop-region-cap">
                  <span>實時線路延遲 · 5 區</span>
                  <span className="live">LIVE</span>
                </div>
                {[
                { lbl: '香港', pct: 18, ms: '8ms' },
                { lbl: '中國內地', pct: 38, ms: '42ms' },
                { lbl: '亞太', pct: 44, ms: '56ms' },
                { lbl: '歐洲', pct: 72, ms: '118ms' },
                { lbl: '美洲', pct: 64, ms: '94ms' }].
                map((r, i) =>
                <div className="SM-region-row" key={i}>
                    <span className="lbl">{r.lbl}</span>
                    <div className="SM-region-bar"><span style={{ width: `${r.pct}%` }} /></div>
                    <span className="ms">{r.ms}</span>
                  </div>
                )}
              </div>

              <div className="SM-pop-foot">
                <p className="SM-pop-foot-p">
                  系統實時偵測各線路延遲與健康狀況：<b>按用戶位置選最快線路</b>，任一條異常即切換到下一條。
                </p>
                <a className="SM-pop-btn" href="https://passport.8338.hk/zh-hant/signup" data-cta="start-trial">免費試用 →</a>
              </div>
            </article>
          </div>

          {/* Bento grid, 3 supporting capabilities; “最佳線路 + 異常切換” 已在 hero card; 自定規則 不對外曝光 */}
          <div className="SM-bento">
            <article className="SM-bx">
              <div className="SM-bx-icon"><SmStkIc.console /></div>
              <h3 className="SM-bx-h3">統一監察介面</h3>
              <p className="SM-bx-p">
                所有線路狀態、命中率、流量分配於<b>同一控制台</b>，毋須切換多個儀錶板。
              </p>
            </article>

            <article className="SM-bx">
              <div className="SM-bx-icon"><SmStkIc.shield /></div>
              <h3 className="SM-bx-h3">邊緣安全免費內建</h3>
              <p className="SM-bx-p">
                自動隱藏源站位址，<b>免費 SSL、WAF 與 DDoS 防護</b>全部內建。
              </p>
            </article>

            <article className="SM-bx">
              <div className="SM-bx-icon"><SmStkIc.chat /></div>
              <h3 className="SM-bx-h3">24×7 香港中文支援</h3>
              <p className="SM-bx-p">
                電郵、電話與即時通訊全天候待命，線路異常有<b>真人中文</b>回應。
              </p>
            </article>
          </div>
        </div>
      </section>
    </>);

}

window.SmartStack = SmartStack;