/* global React */
const { useState: useDYPState } = React;

// ============================================================
// Dynamic CDN, Pricing (Video CDN format) + 3-step "How"
// 3 region tabs: HK / CN / Global · PAYG primary + Monthly secondary
// ============================================================
const DY_PRC_CSS = `
.DY-prc{position:relative;background:#fff;padding:var(--section-pad-y-d) 0;font-family:'Noto Sans HK','Noto Sans TC','Inter',sans-serif;color:#0F2A47}
.DY-prc-head{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:end;margin-bottom:36px}
.DY-prc-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:680px}
.DY-prc-h2 .accent{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.DY-prc-lede{margin:0;font-size:16.5px;line-height:1.7;color:#475569;max-width:520px;text-wrap:pretty}
.DY-prc-lede strong{color:#0F2A47;font-weight:600}

/* Region tabs */
.DY-prc-tabs{display:inline-flex;padding:6px;background:#F3EEFE;border-radius:999px;margin-bottom:36px;gap:4px;flex-wrap:wrap}
.DY-prc-tab{appearance:none;border:0;background:transparent;padding:12px 22px;font-family:'Noto Sans HK','Inter',sans-serif;font-size:15px;font-weight:600;color:#7C3AED;letter-spacing:-.1px;border-radius:999px;cursor:pointer;transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:10px}
.DY-prc-tab:hover{color:#0F2A47}
.DY-prc-tab.on{background:#fff;color:#0F2A47;box-shadow:0 4px 12px rgba(15,42,71,0.08)}
.DY-prc-tab svg{width:18px;height:18px;color:#7C3AED}

/* ---- PAYG (primary block) ---- */
.DY-payg-wrap{margin-bottom:64px}
.DY-payg-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.DY-payg-h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-.3px;color:#0F2A47;display:inline-flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.DY-payg-h3 .from{font-family:'Noto Sans HK','Inter',sans-serif;font-size:14px;font-weight:600;color:#7C3AED;letter-spacing:.2px}
.DY-payg-h3 .from b{font-family:'Inter',sans-serif;font-size:18px;letter-spacing:-.3px;font-variant-numeric:tabular-nums;margin:0 4px;font-weight:700}

.DY-payg{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start}
.DY-payg-tbl{background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:18px;overflow:hidden}
.DY-payg-row{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;align-items:center;gap:20px;padding:20px 28px;border-bottom:1px solid rgba(15,42,71,0.08)}
.DY-payg-row:last-child{border-bottom:0}
.DY-payg-row.head{background:#FAFAFE;padding:14px 28px}
.DY-payg-row.head div{font-size:13px;font-weight:600;color:#94a3b8;letter-spacing:0}
.DY-payg-tier{font-size:15.5px;font-weight:600;color:#0F2A47;letter-spacing:-.1px}
.DY-payg-price{font-family:'Inter',sans-serif;font-size:24px;font-weight:700;color:#0F2A47;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1}
.DY-payg-price small{font-size:13px;color:#94a3b8;font-weight:500;letter-spacing:0;margin-left:4px}
.DY-payg-bar{position:relative;height:8px;background:rgba(167,139,250,0.14);border-radius:99px;overflow:hidden}
.DY-payg-bar span{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(135deg,#A855F7,#7C3AED);border-radius:99px;transition:width .35s ease}
.DY-payg-row{grid-template-columns:1fr auto}
.DY-payg-row>*:nth-child(3){display:none}

.DY-payg-side{display:flex;flex-direction:column;gap:14px;padding:28px 26px;background:linear-gradient(180deg,#FAFAFE 0%,#F6F4FB 100%);border:1px solid rgba(124,58,237,0.16);border-radius:18px}
.DY-payg-side h4{margin:0;font-size:15px;font-weight:700;color:#0F2A47;letter-spacing:-.1px}
.DY-payg-side ul{margin:6px 0 auto;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.DY-payg-side li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.6;color:#475569;text-wrap:pretty}
.DY-payg-side li::before{content:'';position:absolute;left:0;top:7px;width:12px;height:7px;border-left:2px solid #7C3AED;border-bottom:2px solid #7C3AED;transform:rotate(-45deg)}
.DY-payg-side li b{color:#0F2A47;font-weight:600;font-variant-numeric:tabular-nums}
.DY-payg-side .start{appearance:none;border:0;cursor:pointer;margin-top:8px;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 18px;border-radius:10px;font-family:'Noto Sans HK','Inter',sans-serif;font-size:14.5px;font-weight:700;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);color:#fff;text-decoration:none;box-shadow:0 8px 20px rgba(124,58,237,0.25);transition:all .15s;box-sizing:border-box}
.DY-payg-side .start:hover{background:linear-gradient(135deg,#9333EA 0%,#6D28D9 100%);transform:translateY(-1px);box-shadow:0 12px 26px rgba(124,58,237,0.36)}

.DY-icp{margin-top:14px;padding:10px 14px;font-size:13.5px;line-height:1.6;color:#475569;background:#FAFAFC;border:1px dashed rgba(15,42,71,0.14);border-radius:10px}
.DY-icp b{color:#7C3AED;font-weight:700}

/* ---- Monthly (secondary block) ---- */
.DY-mon-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:18px;padding-top:32px;border-top:1px dashed rgba(15,42,71,0.16)}
.DY-mon-h3{margin:0;font-size:18px;font-weight:700;color:#0F2A47;letter-spacing:-.2px;display:inline-flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.DY-mon-h3 .from{font-family:'Noto Sans HK','Inter',sans-serif;font-size:13.5px;font-weight:600;color:#64748b;letter-spacing:.2px}
.DY-mon-h3 .from b{font-family:'Inter',sans-serif;font-size:16px;letter-spacing:-.3px;font-variant-numeric:tabular-nums;color:#7C3AED;margin:0 4px;font-weight:700}

.DY-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.DY-plan{background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:12px;transition:all .2s;position:relative}
.DY-plan:hover{border-color:#7C3AED;box-shadow:0 12px 28px rgba(15,42,71,0.08);transform:translateY(-2px)}
.DY-plan.featured{background:#0F2A47;color:#fff;border-color:#0F2A47}
.DY-plan.featured:hover{box-shadow:0 14px 32px rgba(15,42,71,0.30)}
.DY-plan-rec{position:absolute;top:-10px;left:18px;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);color:#fff;padding:4px 12px;font-size:13px;font-weight:700;letter-spacing:.2px;border-radius:99px;box-shadow:0 4px 12px rgba(124,58,237,0.30)}
.DY-plan-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.DY-plan-name{margin:0;font-size:16px;font-weight:700;letter-spacing:-.2px;color:#0F2A47}
.DY-plan.featured .DY-plan-name{color:#fff}
.DY-plan-tb{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#7C3AED;letter-spacing:-.2px;font-variant-numeric:tabular-nums}
.DY-plan.featured .DY-plan-tb{color:#C4B5FD}
.DY-plan-price{font-family:'Inter',sans-serif;font-size:26px;font-weight:700;color:#0F2A47;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1;display:flex;align-items:baseline;gap:5px}
.DY-plan.featured .DY-plan-price{color:#fff}
.DY-plan-price .u{font-size:13px;color:#94a3b8;font-weight:500;letter-spacing:0}
.DY-plan.featured .DY-plan-price .u{color:rgba(255,255,255,0.6)}
.DY-plan.enterprise{background:linear-gradient(135deg,#0F2A47 0%,#1e3a5f 100%);color:#fff;border-color:transparent}
.DY-plan.enterprise .DY-plan-name{color:#fff}
.DY-plan.enterprise .DY-plan-tb{color:#C4B5FD}
.DY-plan.enterprise .DY-plan-price{color:#fff;font-size:18px}
.DY-plan-cta{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:11px 16px;border-radius:9px;font-family:'Noto Sans HK','Inter',sans-serif;font-size:13.5px;font-weight:700;letter-spacing:-.1px;text-decoration:none;transition:all .18s;box-sizing:border-box;background:#F3EEFE;color:#7C3AED;margin-top:auto}
.DY-plan-cta:hover{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);color:#fff}
.DY-plan.featured .DY-plan-cta{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);color:#fff}
.DY-plan.featured .DY-plan-cta:hover{background:linear-gradient(135deg,#9333EA 0%,#6D28D9 100%);color:#fff}
.DY-plan.enterprise .DY-plan-cta{background:#fff;color:#7c3aed}
.DY-plan.enterprise .DY-plan-cta:hover{background:#F3EEFE;color:#7c3aed}

@media (max-width: 1024px){
  .DY-prc{padding:var(--section-pad-y-t) 0}
  .DY-prc-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .DY-payg{grid-template-columns:1fr}
  .DY-plans{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .DY-prc{padding:var(--section-pad-y-m) 0}
  .DY-prc-h2{font-size:32px;letter-spacing:-1px}
  .DY-prc-tabs{padding:5px;gap:2px;display:flex;width:100%;flex-wrap:nowrap}
  .DY-prc-tab{padding:10px 12px;font-size:13px;gap:6px;flex:1;justify-content:center}
  .DY-prc-tab svg{width:15px;height:15px}
  .DY-payg-row{grid-template-columns:1fr auto;padding:16px 20px}
  .DY-payg-row > div:nth-child(3){display:none}
  .DY-plans{grid-template-columns:1fr}
}

/* ============================================================
   3-Step "How", dark continuation under pricing
   ============================================================ */
.DY-how{position:relative;background:#0F2A47;color:#fff;padding:var(--section-pad-y-d) 0;font-family:'Noto Sans HK','Noto Sans TC','Inter',sans-serif;overflow:hidden}
.DY-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}
.DY-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}
.DY-how-inner{position:relative}
.DY-how-head{max-width:780px;margin-bottom:60px}
.DY-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}
.DY-how-h2 .accent{background:linear-gradient(135deg,#C4B5FD 0%,#A855F7 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.DY-how-sub{margin-top:18px;font-size:17px;line-height:1.7;color:rgba(255,255,255,0.72);max-width:560px}

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

// ----- Region datasets -----
const DY_REGIONS = {
  hk: {
    label: '香港用戶',
    icon: <svg viewBox="0 0 18 18" fill="none" aria-hidden="true"><path d="M2 14h14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /><rect x="3.5" y="9" width="2.2" height="5" fill="currentColor" /><rect x="6.5" y="6" width="2.2" height="8" fill="currentColor" /><rect x="9.5" y="3" width="2.2" height="11" fill="currentColor" /><rect x="12.5" y="7.5" width="2.2" height="6.5" fill="currentColor" /></svg>,
    paygFrom: '0.28', monthlyFrom: '378',
    payg: [
      { tier: '首 5 TB',     price: '0.60', pct: 100 },
      { tier: '5 – 10 TB',    price: '0.50', pct: 84 },
      { tier: '10 – 50 TB',   price: '0.40', pct: 67 },
      { tier: '50 – 100 TB',  price: '0.35', pct: 58 },
      { tier: '100 TB 以上',  price: '0.28', pct: 47 },
    ],
    plans: [
      { name: '基本型', tb: '1 TB',  monthly: '378' },
      { name: '經濟型', tb: '5 TB',  monthly: '1,688', featured: true },
      { name: '標準型', tb: '20 TB', monthly: '5,628' },
      { name: '專業型', tb: '50 TB', monthly: '12,500' },
      { name: '進階型', tb: '100 TB',monthly: '20,000' },
      { name: '企業型', tb: '> 100 TB', monthly: '聯絡銷售', enterprise: true },
    ],
  },
  cn: {
    label: '中國內地用戶',
    icon: <svg viewBox="0 0 18 18" fill="none" aria-hidden="true"><path d="M4 4 Q 9 2 14 4 Q 16 9 14 14 Q 9 16 4 14 Q 2 9 4 4 Z" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinejoin="round" /><circle cx="6.5" cy="6.5" r="1" fill="currentColor" /><circle cx="11" cy="6.8" r="0.8" fill="currentColor" /><circle cx="8.5" cy="9.2" r="0.8" fill="currentColor" /><circle cx="11.5" cy="10" r="0.8" fill="currentColor" /></svg>,
    paygFrom: '0.90', monthlyFrom: '1,000',
    payg: [
      { tier: '首 5 TB',     price: '1.80', pct: 100 },
      { tier: '5 – 10 TB',    price: '1.60', pct: 89 },
      { tier: '10 – 50 TB',   price: '1.30', pct: 72 },
      { tier: '50 – 100 TB',  price: '1.10', pct: 61 },
      { tier: '100 TB 以上',  price: '0.90', pct: 50 },
    ],
    plans: [
      { name: '基本型', tb: '1 TB',  monthly: '1,000' },
      { name: '經濟型', tb: '5 TB',  monthly: '4,500', featured: true },
      { name: '標準型', tb: '20 TB', monthly: '15,000' },
      { name: '專業型', tb: '50 TB', monthly: '33,750' },
      { name: '進階型', tb: '100 TB',monthly: '60,750' },
      { name: '企業型', tb: '> 100 TB', monthly: '聯絡銷售', enterprise: true },
    ],
  },
  global: {
    label: '全球用戶',
    icon: <svg viewBox="0 0 18 18" fill="none" aria-hidden="true"><circle cx="9" cy="9" r="6.5" stroke="currentColor" strokeWidth="1.5" /><ellipse cx="9" cy="9" rx="3" ry="6.5" stroke="currentColor" strokeWidth="1.5" /><line x1="2.5" y1="9" x2="15.5" y2="9" stroke="currentColor" strokeWidth="1.5" /></svg>,
    paygFrom: '0.40', monthlyFrom: '628',
    payg: [
      { tier: '首 5 TB',     price: '0.80', pct: 100 },
      { tier: '5 – 10 TB',    price: '0.70', pct: 88 },
      { tier: '10 – 50 TB',   price: '0.60', pct: 75 },
      { tier: '50 – 100 TB',  price: '0.50', pct: 63 },
      { tier: '100 TB 以上',  price: '0.40', pct: 50 },
    ],
    plans: [
      { name: '基本型', tb: '1 TB',  monthly: '628' },
      { name: '經濟型', tb: '5 TB',  monthly: '2,878', featured: true },
      { name: '標準型', tb: '20 TB', monthly: '10,000' },
      { name: '專業型', tb: '50 TB', monthly: '22,500' },
      { name: '進階型', tb: '100 TB',monthly: '37,500' },
      { name: '企業型', tb: '> 100 TB', monthly: '聯絡銷售', enterprise: true },
    ],
  },
};

const Arrow = () => <svg width="13" height="13" viewBox="0 0 12 12" aria-hidden="true"><path d="M2 6h7M6 3l3 3-3 3" stroke="currentColor" strokeWidth="1.7" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>;

function DynamicPricing() {
  const [region, setRegion] = useDYPState('hk');
  const r = DY_REGIONS[region];

  return (
    <>
      <style>{DY_PRC_CSS}</style>
      <section className="DY-prc" id="pricing" data-screen-label="04 Pricing">
        <div className="container">
          <div className="DY-prc-head">
            <h2 className="DY-prc-h2">按<span className="accent">目標用戶地區</span>選擇計劃</h2>
            <p className="DY-prc-lede">
              所有方案內建<strong>免費 SSL 證書、WAF 與 DDoS 防護</strong>，港幣計價、先用後付，月度發票清楚列出實際用量。
            </p>
          </div>

          {/* Region tabs */}
          <div className="DY-prc-tabs" role="tablist">
            {['hk', 'cn', 'global'].map((k) =>
              <button
                key={k}
                className={`DY-prc-tab ${region === k ? 'on' : ''}`}
                onClick={() => setRegion(k)}
                role="tab"
                aria-selected={region === k}>
                {DY_REGIONS[k].icon}
                {DY_REGIONS[k].label}
              </button>
            )}
          </div>

          {/* ---------- PAYG (primary) ---------- */}
          <div className="DY-payg-wrap">
            <div className="DY-payg-head">
              <h3 className="DY-payg-h3">
                按用量計費
                <span className="from">由 <b>HK${r.paygFrom}</b> / GB 起</span>
              </h3>
            </div>
            <div className="DY-payg">
              <div>
                <div className="DY-payg-tbl">
                  <div className="DY-payg-row head">
                    <div>月度流量級別</div>
                    <div>單價 / GB</div>
                    <div>相對成本</div>
                  </div>
                  {r.payg.map((t, i) =>
                    <div className="DY-payg-row" key={i}>
                      <div className="DY-payg-tier">{t.tier}</div>
                      <div className="DY-payg-price">HK${t.price}<small>/ GB</small></div>
                      <div className="DY-payg-bar"><span style={{ width: `${t.pct}%` }} /></div>
                    </div>
                  )}
                </div>
                {region === 'cn' && (
                  <div className="DY-icp">
                    <b>※ 毋須 ICP 備案</b>　·　採用 CN2 GIA 專線連接中國周邊節點，即開即用、毋須等候審批。
                  </div>
                )}
              </div>
              <div className="DY-payg-side">
                <h4>請求數計費</h4>
                <ul>
                  <li>HTTP / HTTPS 請求 <b>首 2,000,000 次免費</b></li>
                  <li>其後 <b>HK$0.065 / 10,000 次</b></li>
                  <li>支援 WebSocket、REST、GraphQL、gRPC 全協定</li>
                  <li>毋須長期合約、毋須最低用量承諾</li>
                </ul>
                <a className="start" href="https://passport.8338.hk/zh-hant/signup" data-cta="start-trial">
                  以按用量方案開始 <Arrow />
                </a>
              </div>
            </div>
          </div>

          {/* ---------- Monthly (secondary) ---------- */}
          <div>
            <div className="DY-mon-head">
              <h3 className="DY-mon-h3">
                月費計劃
                <span className="from">由 <b>HK${r.monthlyFrom}</b> / 月起</span>
              </h3>
            </div>

            <div className="DY-plans">
              {r.plans.map((p, i) =>
                <div key={i} className={`DY-plan ${p.featured ? 'featured' : ''} ${p.enterprise ? 'enterprise' : ''}`}>
                  {p.featured && <span className="DY-plan-rec">最受歡迎</span>}
                  <div className="DY-plan-top">
                    <h4 className="DY-plan-name">{p.name}</h4>
                    <span className="DY-plan-tb">{p.tb}</span>
                  </div>
                  <div className="DY-plan-price">
                    {p.enterprise ? <span>{p.monthly}</span> : <><span>HK${p.monthly}</span><span className="u">/ 月</span></>}
                  </div>
                  {p.enterprise
                    ? <a className="DY-plan-cta" href={`#enquiry`}>聯絡銷售 <Arrow /></a>
                    : <a className="DY-plan-cta" href="https://passport.8338.hk/zh-hant/signup" data-cta="start-trial">馬上申請 <Arrow /></a>
                  }
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ----- 3-step "How" -----
const DY_STEPS = [
  { n: '01', title: '加入網域', body: '登入 UD CDN 控制台，輸入需要加速的動態網域並驗證擁有權。' },
  { n: '02', title: '設定動態加速規則', body: '針對 WebSocket、API 或實時數據選擇對應規則；毋須變更現有後端、API gateway 或應用架構。' },
  { n: '03', title: '切換指向並監察', body: '將網域指向 UD CDN 即時生效。控制台即時監察流量、延遲、連接數與用量。' },
];

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

window.DynamicPricing = DynamicPricing;
window.DynamicHow = DynamicHow;
