// Pink-dark pricing components — matches CNV Work Landing Hub.html theme

const cloudTiers = [
  { users: 10,  allInOne: 150000, crmOnly: 70000 },
  { users: 15,  allInOne: 130000, crmOnly: 60000 },
  { users: 30,  allInOne: 100000, crmOnly: 50000 },
  { users: 50,  allInOne: 80000,  crmOnly: 40000 },
  { users: 100, allInOne: 50000,  crmOnly: 30000 },
];

// 6 tháng = perUser × users × 6 × 1.2 (cộng 20%); 1 năm = perUser × users × 12
const SIX_MONTH_MULTIPLIER = 6 * 1.2;
const calcTotal = (perUser, users, term) =>
  term === '6m' ? perUser * users * SIX_MONTH_MULTIPLIER : perUser * users * 12;

// Chat đa kênh — add-on On-Cloud, tính theo số Page
// Tháng: pricePerPage × pages (mua tối thiểu 3 tháng)
// Năm:   pricePerPage × pages × 12 × 0.8 (ưu đãi 20%)
const chatTiers = [
  { pages: 3,  pricePerPage: 80000 },
  { pages: 5,  pricePerPage: 70000 },
  { pages: 10, pricePerPage: 60000 },
  { pages: 20, pricePerPage: 50000 },
  { pages: 50, pricePerPage: 40000 },
];
const CHAT_YEAR_DISCOUNT = 0.8;
const CHAT_MIN_MONTHS = 3;

// Light surfaces for mid sections
const CREAM = '#FAF7F4';
const CREAM_LINE = 'rgba(6,7,11,0.08)';
const INK_TXT = '#0A0E1A';
const INK_MUTED = 'rgba(10,14,26,0.62)';
// brand.jsx already declares INK_FAINT in the bundled scope. Renamed to avoid
// the duplicate-const SyntaxError that blanked Bang Gia + Tich Hop pages.
const PINK_INK_FAINT = 'rgba(10,14,26,0.45)';

const fmtVND = (n) => new Intl.NumberFormat('vi-VN').format(n);

// Background scrolling industries — same DNA as PinkManifesto
const PinkPricingHero = () => (
  <div style={{
    position: 'relative', background: NIGHT[1000], color: '#fff',
    padding: '140px 64px 120px', overflow: 'hidden',
  }}>
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
      background: `radial-gradient(ellipse 1200px 800px at 50% 30%, ${PINK[400]}22 0%, transparent 60%)` }}/>
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: 'linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)',
      backgroundSize: '80px 80px',
      maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)',
      WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)' }}/>
    <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', textAlign: 'center' }}>
      <PinkEyebrow style={{ marginBottom: 22, justifyContent: 'center' }}>BẢNG GIÁ · MINH BẠCH</PinkEyebrow>
      <h1 style={{
        fontFamily: 'Inter, sans-serif', fontWeight: 800,
        fontSize: 'clamp(56px, 7vw, 92px)', lineHeight: 1.02, letterSpacing: '-0.04em',
        margin: '0 auto 28px', maxWidth: 1080,
      }}>
        Hai hình thức triển khai —<br/>
        <PinkGradientText gradient={PINK_CYAN_GRAD}>chọn theo quy mô</PinkGradientText>
      </h1>
      <p style={{
        fontFamily: 'Inter, sans-serif', fontSize: 19, lineHeight: 1.6,
        color: 'rgba(255,255,255,0.65)', maxWidth: 720, margin: '0 auto',
      }}>
        On-Cloud cho SMBs tối ưu chi phí ban đầu — Unlimited cho doanh nghiệp lớn,
        đầu tư một lần, không giới hạn user.
      </p>
    </div>
  </div>
);

const PinkModeSwitch = ({ mode, setMode }) => (
  // Section light bao quanh pill: pill overlap ~32px lên hero (nửa nổi), nửa dưới trong section CREAM, có 32px padding-bottom trước section tiếp theo.
  <div style={{
    background: CREAM, position: 'relative', zIndex: 5,
    display: 'flex', justifyContent: 'center',
    padding: '0 48px 32px',
  }}>
    <div style={{
      display: 'inline-flex', background: '#fff',
      padding: 6, borderRadius: 99, gap: 4,
      marginTop: -32,
      boxShadow: `0 24px 60px ${PINK[400]}30, 0 0 0 1px ${CREAM_LINE}`,
    }}>
      {[
        { id: 'cloud', label: 'On-Cloud', sub: 'Thuê theo năm' },
        { id: 'onprem', label: 'Unlimited', sub: 'Đầu tư 1 lần' },
      ].map(opt => {
        const active = mode === opt.id;
        return (
          <button key={opt.id} onClick={() => setMode(opt.id)} style={{
            border: 'none', cursor: 'pointer',
            padding: '14px 28px', borderRadius: 99,
            background: active ? PINK[400] : 'transparent',
            color: active ? '#fff' : INK_MUTED,
            fontFamily: 'Inter, sans-serif', fontWeight: 700,
            display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 2,
            transition: 'all .2s ease',
            boxShadow: active ? `0 6px 18px ${PINK[400]}50` : 'none',
          }}>
            <span style={{ fontSize: 15, letterSpacing: '-0.01em' }}>{opt.label}</span>
            <span style={{ fontSize: 11, fontWeight: 500, opacity: active ? 0.92 : 0.7, letterSpacing: '0.02em' }}>{opt.sub}</span>
          </button>
        );
      })}
    </div>
  </div>
);

const PinkCloudCalculator = () => {
  const [users, setUsers] = React.useState(30);
  const [plan, setPlan] = React.useState('allInOne');
  const [term, setTerm] = React.useState('1y'); // '6m' | '1y'

  const tier = React.useMemo(() => {
    const sorted = [...cloudTiers].sort((a, b) => b.users - a.users);
    return sorted.find(t => users >= t.users) || cloudTiers[0];
  }, [users]);

  const perUser = tier[plan];
  const totalSelected = calcTotal(perUser, users, term);
  const addonSelected = calcTotal(perUser, 1, term);
  const termLabel = term === '6m' ? '6 tháng' : '1 năm';

  return (
    <div style={{ background: CREAM, padding: '120px 64px 80px', color: INK_TXT }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <PinkEyebrow style={{ marginBottom: 16, justifyContent: 'center' }}>GÓI ON-CLOUD · THUÊ NĂM</PinkEyebrow>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 48, letterSpacing: '-0.03em', lineHeight: 1.05, margin: '0 0 16px', color: INK_TXT }}>
            Càng nhiều user, <PinkGradientText gradient={PINK_CYAN_GRAD}>chi phí/user càng giảm</PinkGradientText>
          </h2>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, color: INK_MUTED, maxWidth: 620, margin: '0 auto', lineHeight: 1.55 }}>
            Phù hợp với doanh nghiệp vừa và nhỏ tối ưu chi phí đầu tư ban đầu — hạ tầng do CNV vận hành.
          </p>
        </div>

        {/* CALCULATOR CARD */}
        <div style={{
          background: '#fff',
          borderRadius: 28, padding: 48,
          position: 'relative', overflow: 'hidden',
          boxShadow: `0 30px 80px ${PINK[400]}25, 0 0 0 1px ${CREAM_LINE}`,
          marginBottom: 64,
        }}>
          <div style={{ position: 'absolute', top: -200, right: -100, width: 600, height: 600, borderRadius: '50%',
            background: `radial-gradient(circle, ${PINK[400]}18 0%, transparent 65%)`, filter: 'blur(60px)' }}/>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'center' }}>
            <div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: PINK[500], marginBottom: 14 }}>Tính chi phí cho team của bạn</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 28, color: INK_TXT }}>
                Chọn số người dùng
              </div>

              {/* Plan toggle */}
              <div style={{ display: 'inline-flex', gap: 4, padding: 4, background: CREAM, borderRadius: 12, marginBottom: 20, border: `1px solid ${CREAM_LINE}` }}>
                {[
                  { id: 'allInOne', label: 'All-in-one', sub: 'CRM + HRM + Chat AI + Task + Approval' },
                  { id: 'crmOnly', label: 'CRM Only', sub: 'Chỉ module bán hàng' },
                ].map(p => (
                  <button key={p.id} onClick={() => setPlan(p.id)} style={{
                    border: 'none', cursor: 'pointer',
                    padding: '10px 18px', borderRadius: 8,
                    background: plan === p.id ? PINK[400] : 'transparent',
                    color: plan === p.id ? '#fff' : INK_TXT,
                    textAlign: 'left',
                    fontFamily: 'Inter, sans-serif',
                    transition: 'all .18s',
                  }}>
                    <div style={{ fontSize: 14, fontWeight: 700 }}>{p.label}</div>
                    <div style={{ fontSize: 11, opacity: plan === p.id ? 0.92 : 0.7, marginTop: 1, fontWeight: plan === p.id ? 500 : 400 }}>{p.sub}</div>
                  </button>
                ))}
              </div>

              {/* Term toggle (kỳ hạn thuê) */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28, flexWrap: 'wrap' }}>
                <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: INK_MUTED, fontWeight: 500 }}>Kỳ hạn thuê</span>
                <div style={{ display: 'inline-flex', gap: 4, padding: 4, background: CREAM, borderRadius: 10, border: `1px solid ${CREAM_LINE}` }}>
                  {[
                    { id: '6m', label: '6 tháng', badge: '+20%' },
                    { id: '1y', label: '1 năm', badge: 'Tốt nhất' },
                  ].map(t => {
                    const active = term === t.id;
                    return (
                      <button key={t.id} onClick={() => setTerm(t.id)} style={{
                        border: 'none', cursor: 'pointer',
                        padding: '8px 14px', borderRadius: 7,
                        background: active ? PINK[400] : 'transparent',
                        color: active ? '#fff' : INK_TXT,
                        fontFamily: 'Inter, sans-serif',
                        display: 'inline-flex', alignItems: 'center', gap: 8,
                        transition: 'all .15s',
                      }}>
                        <span style={{ fontSize: 13, fontWeight: 700 }}>{t.label}</span>
                        <span style={{
                          fontSize: 10, fontWeight: 700, padding: '2px 7px', borderRadius: 99,
                          background: active ? 'rgba(255,255,255,0.22)' : `${PINK[400]}22`,
                          color: active ? '#fff' : PINK[600],
                          letterSpacing: '0.04em',
                        }}>{t.badge}</span>
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* Slider */}
              <div style={{ marginBottom: 16 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
                  <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: INK_MUTED }}>Số user</span>
                  <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 32, fontWeight: 800, letterSpacing: '-0.02em' }}>
                    <PinkGradientText>{users}</PinkGradientText>
                    <span style={{ fontSize: 14, color: INK_MUTED, fontWeight: 500, marginLeft: 8 }}>người</span>
                  </span>
                </div>
                <style>{`
                  .pink-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: rgba(10,14,26,0.10); border-radius: 99px; outline: none; }
                  .pink-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: ${PINK[400]}; cursor: pointer; border: 3px solid #fff; box-shadow: 0 4px 14px ${PINK[400]}80; }
                  .pink-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: ${PINK[400]}; cursor: pointer; border: 3px solid #fff; }
                `}</style>
                <input type="range" min="5" max="200" value={users} onChange={e => setUsers(+e.target.value)} className="pink-slider"/>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontFamily: 'Inter, sans-serif', fontSize: 11, color: PINK_INK_FAINT }}>
                  <span>5</span><span>50</span><span>100</span><span>150</span><span>200+</span>
                </div>
              </div>

              {/* Quick-pick chips */}
              <div style={{ display: 'flex', gap: 8, marginTop: 22, flexWrap: 'wrap' }}>
                {[10, 15, 30, 50, 100].map(n => (
                  <button key={n} onClick={() => setUsers(n)} style={{
                    padding: '7px 14px', borderRadius: 99, cursor: 'pointer',
                    border: users === n ? `1px solid ${PINK[400]}` : `1px solid ${CREAM_LINE}`,
                    background: users === n ? `${PINK[400]}20` : '#fff',
                    color: INK_TXT, fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 600,
                    transition: 'all .15s',
                  }}>{n} user</button>
                ))}
              </div>
            </div>

            {/* RIGHT: price readout */}
            <div style={{
              padding: 36, borderRadius: 20,
              background: NIGHT[1000],
              color: '#fff',
              border: `1px solid ${PINK[400]}40`,
            }}>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 8 }}>Bậc giá đang áp dụng</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, fontWeight: 600, marginBottom: 28 }}>
                Từ {tier.users} user · {plan === 'allInOne' ? 'All-in-one' : 'CRM Only'}
              </div>

              <div style={{ paddingBottom: 24, borderBottom: '1px solid rgba(255,255,255,0.08)', marginBottom: 24 }}>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: 'rgba(255,255,255,0.5)', marginBottom: 4 }}>Giá / user / tháng</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 52, fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1 }}>
                  <PinkGradientText gradient={PINK_CYAN_GRAD}>{fmtVND(perUser)}</PinkGradientText>
                  <span style={{ fontSize: 18, fontWeight: 600, color: 'rgba(255,255,255,0.5)', marginLeft: 6 }}>₫</span>
                </div>
                {plan === 'allInOne' && (
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: 'rgba(255,255,255,0.45)', marginTop: 8 }}>
                    Chưa bao gồm chat đa kênh
                  </div>
                )}
              </div>

              <div style={{ marginBottom: 20 }}>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: 'rgba(255,255,255,0.5)', marginBottom: 6 }}>Tổng cho {users} user · {termLabel}</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 32, fontWeight: 800, letterSpacing: '-0.025em', color: PINK[300] }}>
                  {fmtVND(totalSelected)}<span style={{ fontSize: 15, fontWeight: 500, opacity: 0.6, marginLeft: 4 }}>₫</span>
                </div>
              </div>

              <div style={{
                padding: '14px 16px', borderRadius: 12, marginBottom: 24,
                background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12,
              }}>
                <div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: 'rgba(255,255,255,0.55)', fontWeight: 500 }}>Mua lẻ thêm 1 user</div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, color: 'rgba(255,255,255,0.4)', marginTop: 2 }}>Theo kỳ hạn {termLabel}</div>
                </div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em' }}>
                  {fmtVND(addonSelected)}<span style={{ fontSize: 12, fontWeight: 500, opacity: 0.55, marginLeft: 3 }}>₫</span>
                </div>
              </div>

              <PinkBtn size="lg" style={{ width: '100%' }}>Yêu cầu báo giá chi tiết</PinkBtn>
            </div>
          </div>
        </div>

        {/* TIER TABLE — 5 cột giá theo plan đang chọn */}
        <div className="cnv-mobile-scroll">
        <div style={{ background: '#fff', border: `1px solid ${CREAM_LINE}`, borderRadius: 20, overflow: 'hidden', boxShadow: '0 1px 3px rgba(10,14,26,0.04)', minWidth: 560 }}>
          <div style={{ padding: '24px 32px', borderBottom: `1px solid ${CREAM_LINE}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
            <div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 16, color: INK_TXT }}>
                Gói thuê năm On Cloud · {plan === 'allInOne' ? 'All-in-one' : 'CRM Only'}
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: INK_MUTED, marginTop: 4 }}>
                {plan === 'allInOne'
                  ? 'Đơn giá chưa bao gồm chat đa kênh. Gói 6 tháng cộng thêm 20%.'
                  : 'Chỉ module bán hàng (Sales/CRM). Gói 6 tháng cộng thêm 20%.'}
              </div>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '0.7fr 1.2fr 1.3fr 1.3fr', padding: '14px 32px', borderBottom: `1px solid ${CREAM_LINE}`, background: CREAM, gap: 16 }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: INK_MUTED }}>User</div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: INK_MUTED, textAlign: 'right' }}>Giá / user / tháng</div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: INK_MUTED, textAlign: 'right' }}>Giá 6 tháng <span style={{ color: PINK[600] }}>(+20%)</span></div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: INK_MUTED, textAlign: 'right' }}>Giá 1 năm</div>
          </div>
          {cloudTiers.map((t, i) => {
            const p = t[plan];
            const total6m = calcTotal(p, t.users, '6m');
            const total1y = calcTotal(p, t.users, '1y');
            const active = users >= t.users && (i === cloudTiers.length - 1 || users < cloudTiers[i+1].users);
            const isLast = i === cloudTiers.length - 1;
            return (
              <div key={t.users} style={{
                display: 'grid', gridTemplateColumns: '0.7fr 1.2fr 1.3fr 1.3fr',
                padding: '18px 32px', alignItems: 'center', gap: 16,
                borderBottom: isLast ? 'none' : `1px solid ${CREAM_LINE}`,
                background: active ? `linear-gradient(90deg, ${PINK[400]}18, transparent)` : 'transparent',
                transition: 'background .15s',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 20, fontWeight: 800, letterSpacing: '-0.02em', color: INK_TXT }}>{t.users}</div>
                  {active && (
                    <span style={{
                      padding: '3px 9px', borderRadius: 99,
                      background: PINK[400], color: '#fff',
                      fontFamily: 'Inter, sans-serif', fontSize: 9, fontWeight: 800, letterSpacing: '0.08em',
                      boxShadow: `0 2px 8px ${PINK[400]}55`,
                    }}>ĐANG CHỌN</span>
                  )}
                </div>
                <div style={{ textAlign: 'right' }}>
                  <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, fontWeight: 700, letterSpacing: '-0.01em', color: INK_TXT }}>{fmtVND(p)}<span style={{ fontSize: 11, fontWeight: 500, color: INK_MUTED, marginLeft: 2 }}>₫</span></span>
                </div>
                <div style={{ textAlign: 'right', fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 600, color: INK_MUTED, letterSpacing: '-0.01em' }}>
                  {fmtVND(total6m)}<span style={{ fontSize: 11, fontWeight: 500, marginLeft: 2 }}>₫</span>
                </div>
                <div style={{ textAlign: 'right', fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 700, color: PINK[600], letterSpacing: '-0.01em' }}>
                  {fmtVND(total1y)}<span style={{ fontSize: 11, fontWeight: 500, marginLeft: 2, color: INK_MUTED }}>₫</span>
                </div>
              </div>
            );
          })}
        </div>
        </div>

        {/* ADD-ON 1 USER BLOCK — gắn với bậc đang chọn */}
        <div style={{
          marginTop: 16, padding: '20px 24px',
          background: '#fff', border: `1px solid ${CREAM_LINE}`,
          borderRadius: 14,
          boxShadow: `0 4px 12px ${PINK[400]}10`,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 16,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
            <div style={{
              width: 44, height: 44, borderRadius: 12,
              background: `${PINK[400]}18`, border: `1px solid ${PINK[400]}35`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'Inter, sans-serif', fontSize: 22, fontWeight: 700, color: PINK[600],
              flexShrink: 0,
            }}>＋</div>
            <div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: PINK[600], marginBottom: 4 }}>
                Mua thêm 1 user · bậc {tier.users}-user
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: INK_MUTED }}>
                Đơn giá theo bậc đang chọn ({fmtVND(perUser)} ₫/user/tháng)
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 28, alignItems: 'baseline', flexWrap: 'wrap' }}>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: PINK_INK_FAINT, marginBottom: 2 }}>6 tháng</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em', color: INK_TXT }}>
                {fmtVND(calcTotal(perUser, 1, '6m'))}<span style={{ fontSize: 12, fontWeight: 500, color: INK_MUTED, marginLeft: 2 }}>₫</span>
              </div>
            </div>
            <div style={{ width: 1, alignSelf: 'stretch', background: CREAM_LINE }}/>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: PINK_INK_FAINT, marginBottom: 2 }}>1 năm</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', color: PINK[600] }}>
                {fmtVND(calcTotal(perUser, 1, '1y'))}<span style={{ fontSize: 12, fontWeight: 500, color: INK_MUTED, marginLeft: 2 }}>₫</span>
              </div>
            </div>
          </div>
        </div>

        <div style={{
          marginTop: 24, padding: '20px 24px',
          background: `${PINK[400]}12`, borderLeft: `3px solid ${PINK[400]}`,
          borderRadius: 8,
          fontFamily: 'Inter, sans-serif', fontSize: 14, color: INK_MUTED, lineHeight: 1.6,
        }}>
          <strong style={{ color: INK_TXT }}>Phù hợp với:</strong> doanh nghiệp vừa và nhỏ muốn tối ưu chi phí đầu tư ban đầu, không cần đội IT vận hành hạ tầng. Có thể nâng cấp bậc bất cứ lúc nào.
        </div>
      </div>
    </div>
  );
};


// ─── ADD-ON: CHAT ĐA KÊNH (bán chung mọi gói On-Cloud) ──────────────────────
const PinkChatAddon = () => {
  const [pages, setPages] = React.useState(10);
  const tier = chatTiers.find(t => t.pages === pages) || chatTiers[2];

  const monthly = tier.pricePerPage * tier.pages;
  const yearly = monthly * 12 * CHAT_YEAR_DISCOUNT;
  const yearlySaved = monthly * 12 - yearly;

  return (
    <div style={{ background: CREAM, padding: '0 64px 100px', color: INK_TXT }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <PinkEyebrow style={{ marginBottom: 16, justifyContent: 'center' }}>ADD-ON · CHAT ĐA KÊNH</PinkEyebrow>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 40, letterSpacing: '-0.03em', lineHeight: 1.05, margin: '0 0 14px', color: INK_TXT }}>
            Chat đa kênh — <PinkGradientText gradient={PINK_CYAN_GRAD}>bán theo số Page</PinkGradientText>
          </h2>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, color: INK_MUTED, maxWidth: 720, margin: '0 auto', lineHeight: 1.55 }}>
            Add-on cho gói On-Cloud (All-in-one & CRM Only). Mỗi Page = 1 fanpage / kênh chat.
          </p>
        </div>

        {/* PICKER CARD — chips trên, timeline dưới */}
        <div style={{
          background: '#fff', borderRadius: 24, padding: '40px 48px',
          position: 'relative', overflow: 'hidden',
          boxShadow: `0 24px 60px ${PINK[400]}20, 0 0 0 1px ${CREAM_LINE}`,
          marginBottom: 40,
        }}>
          <div style={{ position: 'absolute', top: -150, right: -80, width: 500, height: 500, borderRadius: '50%',
            background: `radial-gradient(circle, ${PINK[400]}14 0%, transparent 65%)`, filter: 'blur(50px)' }}/>

          <div style={{ position: 'relative' }}>
            {/* PICKER */}
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, marginBottom: 14 }}>
              <div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: PINK[500], marginBottom: 8 }}>Chọn số Page chat</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em', color: INK_TXT }}>
                  Bao nhiêu Page bạn cần chat?
                </div>
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: INK_MUTED }}>
                Đơn giá bậc đang chọn: <strong style={{ color: PINK[600], fontWeight: 700 }}>{fmtVND(tier.pricePerPage)} ₫</strong> /page/tháng
              </div>
            </div>

            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 36 }}>
              {chatTiers.map(t => (
                <button key={t.pages} onClick={() => setPages(t.pages)} style={{
                  padding: '14px 24px', borderRadius: 14, cursor: 'pointer',
                  border: pages === t.pages ? `2px solid ${PINK[400]}` : `1px solid ${CREAM_LINE}`,
                  background: pages === t.pages ? `${PINK[400]}18` : '#fff',
                  color: INK_TXT, fontFamily: 'Inter, sans-serif',
                  transition: 'all .15s',
                  minWidth: 100, textAlign: 'center',
                  boxShadow: pages === t.pages ? `0 4px 14px ${PINK[400]}30` : 'none',
                }}>
                  <div style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1 }}>{t.pages}</div>
                  <div style={{ fontSize: 11, color: INK_MUTED, marginTop: 4 }}>page</div>
                </button>
              ))}
            </div>

            {/* TIMELINE — đổ ra theo từng mốc thời gian */}
            <div style={{ marginBottom: 8 }}>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: INK_MUTED, marginBottom: 4 }}>Chi phí tích luỹ theo thời gian</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: INK_MUTED }}>
                <strong style={{ color: INK_TXT, fontWeight: 700 }}>{tier.pages} Page</strong> · {fmtVND(monthly)} ₫/tháng
              </div>
            </div>

            {(() => {
              const milestones = [
                { month: CHAT_MIN_MONTHS, label: `Tháng ${CHAT_MIN_MONTHS}`, sub: 'Mua tối thiểu', total: monthly * CHAT_MIN_MONTHS },
                { month: 6, label: 'Tháng 6', sub: 'Nửa năm', total: monthly * 6 },
                { month: 12, label: 'Tháng 12', sub: 'Đóng năm · ưu đãi 20%', total: yearly, best: true, savings: yearlySaved },
              ];
              return (
                <div style={{ position: 'relative', padding: '32px 0 8px' }}>
                  {/* Track */}
                  <div style={{
                    position: 'absolute', left: '8.33%', right: '8.33%', top: 'calc(32px + 56px)',
                    height: 3, borderRadius: 99,
                    background: `linear-gradient(90deg, ${PINK[400]}30 0%, ${PINK[400]} 100%)`,
                  }}/>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', position: 'relative' }}>
                    {milestones.map((m, idx) => (
                      <div key={m.month} style={{
                        display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
                        padding: '0 8px',
                      }}>
                        {/* Top label */}
                        <div style={{
                          fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700,
                          letterSpacing: '0.1em', textTransform: 'uppercase',
                          color: m.best ? PINK[600] : INK_MUTED,
                          marginBottom: 4,
                        }}>{m.label}</div>
                        <div style={{
                          fontFamily: 'Inter, sans-serif', fontSize: 11, color: PINK_INK_FAINT,
                          marginBottom: 18, minHeight: 14,
                        }}>{m.sub}</div>

                        {/* Dot */}
                        <div style={{
                          width: m.best ? 22 : 16, height: m.best ? 22 : 16, borderRadius: '50%',
                          background: m.best ? PINK[400] : '#fff',
                          border: m.best ? `4px solid #fff` : `3px solid ${PINK[400]}`,
                          boxShadow: m.best
                            ? `0 0 0 4px ${PINK[400]}40, 0 6px 16px ${PINK[400]}55`
                            : `0 2px 6px ${PINK[400]}30`,
                          marginBottom: 18, zIndex: 2, position: 'relative',
                          transition: 'all .25s',
                        }}/>

                        {/* Total */}
                        <div style={{
                          fontFamily: 'Inter, sans-serif',
                          fontSize: m.best ? 26 : 22, fontWeight: 800,
                          letterSpacing: '-0.025em', lineHeight: 1.05,
                          color: m.best ? PINK[600] : INK_TXT,
                          marginBottom: 6,
                          transition: 'color .2s',
                        }}>
                          {fmtVND(m.total)}<span style={{ fontSize: m.best ? 14 : 12, fontWeight: 500, color: INK_MUTED, marginLeft: 3 }}>₫</span>
                        </div>

                        {/* Savings badge — chỉ trên mốc M12 */}
                        {m.best && (
                          <div style={{
                            display: 'inline-flex', alignItems: 'center', gap: 4,
                            padding: '4px 10px', borderRadius: 99,
                            background: `${PINK[400]}18`, border: `1px solid ${PINK[400]}40`,
                            fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, color: PINK[600],
                            letterSpacing: '0.02em',
                          }}>
                            <span>★</span>
                            <span>Tiết kiệm {fmtVND(m.savings)} ₫</span>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              );
            })()}

            {/* Note dưới timeline */}
            <div style={{
              marginTop: 28,
              padding: '14px 18px', borderRadius: 10,
              background: `${PINK[400]}10`, border: `1px solid ${PINK[400]}25`,
              fontFamily: 'Inter, sans-serif', fontSize: 13, color: INK_MUTED, lineHeight: 1.55,
            }}>
              <strong style={{ color: INK_TXT }}>Lưu ý:</strong> Mua tối thiểu {CHAT_MIN_MONTHS} tháng. Mua thêm Page lẻ tính theo đơn giá bậc đang dùng ({fmtVND(tier.pricePerPage)} ₫/page/tháng).
            </div>
          </div>
        </div>

        {/* CHAT REFERENCE TABLE */}
        <div className="cnv-mobile-scroll">
        <div style={{ background: '#fff', border: `1px solid ${CREAM_LINE}`, borderRadius: 20, overflow: 'hidden', boxShadow: '0 1px 3px rgba(10,14,26,0.04)', minWidth: 560 }}>
          <div style={{ padding: '20px 28px', borderBottom: `1px solid ${CREAM_LINE}` }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 16, color: INK_TXT }}>
              Gói thuê năm Chat đa kênh
            </div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: INK_MUTED, marginTop: 4 }}>
              Đơn giá ₫ / page / tháng · Mua tối thiểu {CHAT_MIN_MONTHS} tháng · Đóng năm ưu đãi 20%.
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '0.6fr 1.2fr 1.1fr 1.1fr', padding: '14px 28px', borderBottom: `1px solid ${CREAM_LINE}`, background: CREAM, gap: 12 }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: INK_MUTED }}>Page</div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: INK_MUTED, textAlign: 'right' }}>Giá / page / tháng</div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: INK_MUTED, textAlign: 'right' }}>Tổng / tháng</div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: INK_MUTED, textAlign: 'right' }}>Tổng / năm <span style={{ color: PINK[600] }}>(−20%)</span></div>
          </div>
          {chatTiers.map((t, i) => {
            const m = t.pricePerPage * t.pages;
            const y = m * 12 * CHAT_YEAR_DISCOUNT;
            const active = pages === t.pages;
            const isLast = i === chatTiers.length - 1;
            return (
              <div key={t.pages} style={{
                display: 'grid', gridTemplateColumns: '0.6fr 1.2fr 1.1fr 1.1fr',
                padding: '16px 28px', alignItems: 'center', gap: 12,
                borderBottom: isLast ? 'none' : `1px solid ${CREAM_LINE}`,
                background: active ? `linear-gradient(90deg, ${PINK[400]}18, transparent)` : 'transparent',
                transition: 'background .15s',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 18, fontWeight: 800, letterSpacing: '-0.02em', color: INK_TXT }}>{t.pages}</div>
                  {active && (
                    <span style={{
                      padding: '2px 8px', borderRadius: 99,
                      background: PINK[400], color: '#fff',
                      fontFamily: 'Inter, sans-serif', fontSize: 9, fontWeight: 800, letterSpacing: '0.08em',
                    }}>ĐANG CHỌN</span>
                  )}
                </div>
                <div style={{ textAlign: 'right' }}>
                  <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, fontWeight: 700, letterSpacing: '-0.01em', color: INK_TXT }}>{fmtVND(t.pricePerPage)}<span style={{ fontSize: 11, fontWeight: 500, color: INK_MUTED, marginLeft: 2 }}>₫</span></span>
                </div>
                <div style={{ textAlign: 'right', fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 600, color: INK_MUTED, letterSpacing: '-0.01em' }}>
                  {fmtVND(m)}<span style={{ fontSize: 11, fontWeight: 500, marginLeft: 2 }}>₫</span>
                </div>
                <div style={{ textAlign: 'right', fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 700, color: PINK[600], letterSpacing: '-0.01em' }}>
                  {fmtVND(y)}<span style={{ fontSize: 11, fontWeight: 500, marginLeft: 2, color: INK_MUTED }}>₫</span>
                </div>
              </div>
            );
          })}
        </div>
        </div>

        <div style={{
          marginTop: 20, padding: '16px 22px',
          background: `${PINK[400]}10`, borderLeft: `3px solid ${PINK[400]}`,
          borderRadius: 8,
          fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: INK_MUTED, lineHeight: 1.6,
        }}>
          <strong style={{ color: INK_TXT }}>Tích hợp AI:</strong> CNV cung cấp model AI sẵn có hoặc cho phép gắn API key từ các nền tảng AI lớn (OpenAI, Gemini, Claude…) để dùng cho nghiệp vụ chat. Liên hệ tư vấn để biết thêm chi tiết.
        </div>
      </div>
    </div>
  );
};

const PinkOnPremise = () => {
  const [withChat, setWithChat] = React.useState(false);
  const setupTr = withChat ? 180 : 150;
  const maintainTr = withChat ? 50 : 30;
  const highlights = withChat ? [
    { icon: '∞', title: 'Không giới hạn user', body: 'Tạo bao nhiêu tài khoản tuỳ ý — không phụ thuộc seat.' },
    { icon: '💬', title: 'Không giới hạn Page/Kênh chat', body: 'Add bao nhiêu fanpage/kênh chat tuỳ ý — không tính theo Page.' },
    { icon: '◇', title: 'Đầu tư 1 lần', body: 'Không phát sinh chi phí tính năng hay license về sau.' },
  ] : [
    { icon: '∞', title: 'Không giới hạn user', body: 'Tạo bao nhiêu tài khoản tuỳ ý — không phụ thuộc seat.' },
    { icon: '◇', title: 'Đầu tư 1 lần', body: 'Không phát sinh chi phí tính năng hay license về sau.' },
    { icon: '◈', title: 'Dữ liệu nội bộ', body: 'Server đặt tại hạ tầng riêng, full quyền kiểm soát.' },
  ];

  return (
  <div style={{ background: CREAM, padding: '120px 64px 80px', color: INK_TXT }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 56 }}>
        <PinkEyebrow style={{ marginBottom: 16, justifyContent: 'center' }}>GÓI UNLIMITED · ĐẦU TƯ 1 LẦN</PinkEyebrow>
        <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 48, letterSpacing: '-0.03em', lineHeight: 1.05, margin: '0 0 16px', color: INK_TXT }}>
          Triển khai trên hạ tầng riêng — <PinkGradientText gradient={PINK_CYAN_GRAD}>không giới hạn user</PinkGradientText>
        </h2>
        <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, color: INK_MUTED, maxWidth: 640, margin: '0 auto', lineHeight: 1.55 }}>
          Phù hợp với doanh nghiệp lớn nhiều nhân sự, đầu tư một lần và không phát sinh chi phí tính năng về sau.
        </p>
      </div>

      <div style={{
        position: 'relative', overflow: 'hidden',
        background: '#fff',
        borderRadius: 28, padding: 56,
        boxShadow: `0 30px 80px ${PINK[400]}25, 0 0 0 1px ${CREAM_LINE}`,
      }}>
        <div style={{ position: 'absolute', top: -200, left: -100, width: 600, height: 600, borderRadius: '50%',
          background: `radial-gradient(circle, ${PINK[400]}20 0%, transparent 65%)`, filter: 'blur(70px)' }}/>
        <div style={{ position: 'relative' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 48, gap: 24, flexWrap: 'wrap' }}>
            <div>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                padding: '6px 14px', borderRadius: 99,
                background: `${PINK[400]}15`, border: `1px solid ${PINK[400]}40`,
                fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase',
                color: PINK[600], marginBottom: 16,
              }}>
                <span style={{ width: 6, height: 6, borderRadius: 99, background: PINK[400] }}/>
                Enterprise tier
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.1, color: INK_TXT }}>
                CNV Work <PinkGradientText gradient={PINK_CYAN_GRAD}>Unlimited{withChat ? ' + Chat' : ''}</PinkGradientText>
              </div>
            </div>
            <PinkBtn size="lg">Đặt lịch tư vấn</PinkBtn>
          </div>

          {/* VARIANT TOGGLE */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap',
            gap: 16, padding: '14px 18px', borderRadius: 14,
            background: CREAM, border: `1px solid ${CREAM_LINE}`,
            marginBottom: 28,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: INK_MUTED, fontWeight: 500 }}>Phiên bản:</span>
              <div style={{ display: 'inline-flex', gap: 4, padding: 4, background: '#fff', borderRadius: 10, border: `1px solid ${CREAM_LINE}` }}>
                {[
                  { id: false, label: 'Gói tiêu chuẩn', sub: '150tr · 30tr/năm' },
                  { id: true,  label: 'Có Chat đa kênh', sub: '180tr · 50tr/năm' },
                ].map(v => {
                  const active = withChat === v.id;
                  return (
                    <button key={String(v.id)} onClick={() => setWithChat(v.id)} style={{
                      border: 'none', cursor: 'pointer',
                      padding: '8px 14px', borderRadius: 7,
                      background: active ? PINK[400] : 'transparent',
                      color: active ? '#fff' : INK_TXT,
                      fontFamily: 'Inter, sans-serif', textAlign: 'left',
                      transition: 'all .15s',
                    }}>
                      <div style={{ fontSize: 13, fontWeight: 700 }}>{v.label}</div>
                      <div style={{ fontSize: 10.5, opacity: active ? 0.92 : 0.7, marginTop: 1, fontWeight: 500 }}>{v.sub}</div>
                    </button>
                  );
                })}
              </div>
            </div>
            {withChat && (
              <span style={{
                fontFamily: 'Inter, sans-serif', fontSize: 12, color: PINK[600], fontWeight: 600,
                display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>
                <span>★</span>
                <span>Bao gồm Chat đa kênh không giới hạn — không phát sinh chi phí Page riêng.</span>
              </span>
            )}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 40 }}>
            <div style={{
              padding: 36, borderRadius: 20,
              background: NIGHT[1000], color: '#fff',
              border: `1px solid ${PINK[400]}40`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                  <path d="M3 9l9-6 9 6v10a2 2 0 01-2 2h-4v-7H10v7H6a2 2 0 01-2-2V9z" stroke={PINK[400]} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)' }}>Chi phí triển khai</span>
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 64, fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1, marginBottom: 8 }}>
                <PinkGradientText gradient={PINK_CYAN_GRAD}>{setupTr}tr</PinkGradientText>
                <span style={{ fontSize: 18, fontWeight: 500, color: 'rgba(255,255,255,0.55)', marginLeft: 8 }}>₫</span>
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'rgba(255,255,255,0.5)', marginBottom: 16 }}>
                Thanh toán 1 lần · License vĩnh viễn{withChat ? ' · Bao gồm chat đa kênh' : ''}
              </div>
              <div style={{ paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.08)', fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: 'rgba(255,255,255,0.65)', lineHeight: 1.6 }}>
                Bao gồm cài đặt hạ tầng, training nội bộ, customize quy trình theo doanh nghiệp.
              </div>
            </div>

            <div style={{
              padding: 36, borderRadius: 20,
              background: NIGHT[1000], color: '#fff',
              border: `1px solid ${PINK[400]}40`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                  <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" stroke={PINK[400]} strokeWidth="1.6" strokeLinecap="round"/>
                </svg>
                <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)' }}>Duy trì hạ tầng</span>
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 64, fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1, marginBottom: 8 }}>
                <PinkGradientText gradient={PINK_CYAN_GRAD}>{maintainTr}tr</PinkGradientText>
                <span style={{ fontSize: 18, fontWeight: 500, color: 'rgba(255,255,255,0.55)', marginLeft: 8 }}>₫/năm</span>
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'rgba(255,255,255,0.5)', marginBottom: 16 }}>
                Hỗ trợ kỹ thuật · Cập nhật phiên bản
              </div>
              <div style={{ paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.08)', fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: 'rgba(255,255,255,0.65)', lineHeight: 1.6 }}>
                Hot-fix bảo mật, nâng cấp tính năng mới, support 24/7 cho admin nội bộ.
              </div>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {highlights.map((h, i) => (
              <div key={i} style={{
                padding: '24px 26px', borderRadius: 16,
                background: CREAM,
                border: `1px solid ${CREAM_LINE}`,
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: `${PINK[400]}25`,
                  border: `1px solid ${PINK[400]}40`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'Inter, sans-serif', fontSize: 20, fontWeight: 700,
                  color: PINK[600],
                  marginBottom: 14,
                }}>{h.icon}</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, fontWeight: 700, marginBottom: 6, letterSpacing: '-0.01em', color: INK_TXT }}>{h.title}</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: INK_MUTED, lineHeight: 1.55 }}>{h.body}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{
        marginTop: 32, padding: '24px 28px',
        background: `${PINK[400]}12`, borderLeft: `3px solid ${PINK[400]}`,
        borderRadius: 8,
        fontFamily: 'Inter, sans-serif', fontSize: 14, color: INK_MUTED, lineHeight: 1.7,
      }}>
        <strong style={{ color: INK_TXT, display: 'block', marginBottom: 4 }}>Phù hợp với:</strong>
        Tập đoàn, ngân hàng, retail chuỗi quy mô 200+ nhân viên — yêu cầu dữ liệu lưu trữ nội bộ, tích hợp sâu với hệ thống ERP/SAP hiện tại,
        và cần tính năng custom theo quy trình đặc thù.
      </div>
    </div>
  </div>
  );
};

const compareRows = [
  { label: 'Mô hình chi phí',     cloud: 'Thuê theo năm, theo user', onprem: 'Đầu tư 1 lần + duy trì/năm' },
  { label: 'Chi phí khởi đầu',    cloud: 'Thấp', onprem: 'Cao' },
  { label: 'TCO 3 năm (50 user)', cloud: '48tr/năm × 3 = 144tr',  onprem: '150tr + 90tr = 240tr', highlight: 'cloud' },
  { label: 'TCO 3 năm (200 user)', cloud: '120tr/năm × 3 = 360tr', onprem: '150tr + 90tr = 240tr', highlight: 'onprem' },
  { label: 'Số user tối đa',      cloud: 'Theo bậc đã mua', onprem: 'Không giới hạn', highlight: 'onprem' },
  { label: 'Hạ tầng vận hành',    cloud: 'CNV chịu trách nhiệm', onprem: 'IT nội bộ chịu trách nhiệm', highlight: 'cloud' },
  { label: 'Thời gian triển khai', cloud: '1–7 ngày', onprem: '4–8 tuần', highlight: 'cloud' },
  { label: 'Cập nhật phiên bản',  cloud: 'Tự động · liên tục', onprem: 'Theo chu kỳ · admin chủ động' },
  { label: 'Custom tính năng',    cloud: 'Theo roadmap CNV', onprem: 'Custom sâu theo doanh nghiệp', highlight: 'onprem' },
  { label: 'Chat đa kênh',        cloud: 'Add-on theo Page', onprem: 'Bao gồm không giới hạn (gói 180tr)', highlight: 'onprem' },
];

const PinkComparison = () => (
  <div style={{ background: NIGHT[900], padding: '100px 64px', color: '#fff' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 48 }}>
        <PinkEyebrow style={{ marginBottom: 16, justifyContent: 'center' }}>SO SÁNH HÌNH THỨC</PinkEyebrow>
        <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 44, letterSpacing: '-0.03em', lineHeight: 1.05, margin: 0 }}>
          On-Cloud hay <PinkGradientText gradient={PINK_CYAN_GRAD}>Unlimited</PinkGradientText> — đâu là lựa chọn của bạn?
        </h2>
      </div>

      <div className="cnv-mobile-scroll">
      <div style={{ background: NIGHT[1000], borderRadius: 20, overflow: 'hidden', border: `1px solid rgba(255,255,255,0.06)`, minWidth: 600 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', padding: '24px 32px', borderBottom: `1px solid rgba(255,255,255,0.06)` }}>
          <div/>
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 18, letterSpacing: '-0.01em' }}>On-Cloud</div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: 'rgba(255,255,255,0.4)', marginTop: 2 }}>SMB · linh hoạt</div>
          </div>
          <div style={{ textAlign: 'center' }}>
            <div style={{
              display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              padding: '4px 14px', borderRadius: 8,
              background: `${PINK[400]}20`, border: `1px solid ${PINK[400]}50`,
            }}>
              <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 18, letterSpacing: '-0.01em' }}>Unlimited</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>Enterprise · tối ưu lâu dài</div>
            </div>
          </div>
        </div>

        {compareRows.map((r, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr',
            padding: '20px 32px', alignItems: 'center',
            borderBottom: i === compareRows.length - 1 ? 'none' : `1px solid rgba(255,255,255,0.04)`,
          }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 600 }}>{r.label}</div>
            <div style={{
              textAlign: 'center', fontFamily: 'Inter, sans-serif', fontSize: 14,
              color: r.highlight === 'cloud' ? PINK[300] : 'rgba(255,255,255,0.65)',
              fontWeight: r.highlight === 'cloud' ? 700 : 500,
            }}>{r.cloud}</div>
            <div style={{
              textAlign: 'center', fontFamily: 'Inter, sans-serif', fontSize: 14,
              color: r.highlight === 'onprem' ? PINK[300] : 'rgba(255,255,255,0.65)',
              fontWeight: r.highlight === 'onprem' ? 700 : 500,
              background: r.highlight === 'onprem' ? `${PINK[400]}15` : 'transparent',
              padding: r.highlight === 'onprem' ? '8px 12px' : 0,
              borderRadius: 8,
              margin: r.highlight === 'onprem' ? '0 12px' : 0,
            }}>{r.onprem}</div>
          </div>
        ))}
      </div>
      </div>
    </div>
  </div>
);

// ─── PINK CHROME (logo + nav + footer) ──────────────────────────
const PinkLogo = ({ size = 30, dark = true }) => {
  const textColor = dark ? '#fff' : NIGHT[1000];
  const tagColor = dark ? 'rgba(255,255,255,0.6)' : 'rgba(6,7,11,0.6)';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <img src="/img/cnv-logo.png" alt="CNV Work logo" width={size} height={size}
           style={{ display: 'block', objectFit: 'contain', flexShrink: 0 }}/>
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
        <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: size * 0.7, letterSpacing: '-0.025em', color: textColor }}>
          CNV <span style={{ fontWeight: 400 }}>Work</span>
        </div>
        <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 500, fontSize: 9, letterSpacing: '0.06em', textTransform: 'uppercase', color: tagColor, marginTop: 4 }}>
          CRM · Operations · AI Agent
        </div>
      </div>
    </div>
  );
};

const PinkNav = ({ current = 'Bảng giá' }) => {
  const items = [
    { label: 'Sản phẩm', href: '/' },
    { label: 'Tích hợp', href: '/integrations' },
    { label: 'Bảng giá', href: '/pricing' },
    { label: 'Khách hàng', href: '#' },
    { label: 'Tài liệu', href: '#' },
  ].map((item) => ({ ...item, current: item.label === current }));
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: '#000',
      borderBottom: '1px solid rgba(255,255,255,0.08)',
      boxShadow: '0 10px 30px rgba(0,0,0,0.28)',
    }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', height: 72, padding: '0 48px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="/" style={{ textDecoration: 'none' }}><PinkLogo size={30}/></a>
        <nav style={{ display: 'flex', gap: 4 }}>
          {items.map(it => (
            <a key={it.label} href={it.href} style={{
              padding: '9px 16px', borderRadius: 8, textDecoration: 'none',
              fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
              color: it.current ? PINK[300] : 'rgba(255,255,255,0.75)',
              background: it.current ? `${PINK[400]}15` : 'transparent',
              transition: 'all .15s',
            }}>{it.label}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <a href="#" style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'rgba(255,255,255,0.75)', textDecoration: 'none', padding: '9px 14px' }}>Đăng nhập</a>
          <PinkBtn size="sm">Đặt lịch demo</PinkBtn>
        </div>
      </div>
    </header>
  );
};

const PinkFooter = () => (
  <footer style={{ background: NIGHT[1000], color: 'rgba(255,255,255,0.7)', padding: '64px 48px 40px', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr 1fr', gap: 32, marginBottom: 40 }}>
        <div>
          <PinkLogo size={30}/>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.75)', marginTop: 14 }}>
            Công Ty TNHH CNV Holdings
          </div>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 13.5, lineHeight: 1.6, color: 'rgba(255,255,255,0.5)', marginTop: 10, maxWidth: 300 }}>
            Nền tảng CRM + vận hành kinh doanh all-in-one cho doanh nghiệp Việt.
          </p>
        </div>
        {[
          { title: 'Sản phẩm', items: [
            { label: 'Sales & CRM', href: '/products/sales-crm' },
            { label: 'Fulfillment', href: '/products/fulfillment-marketing' },
            { label: 'Marketing', href: '/products/fulfillment-marketing' },
            { label: 'Hỗ trợ', href: '/products/inbox-support' },
            { label: 'Nhân sự', href: '/products/hr' },
            { label: 'Báo cáo', href: '/products/reports' },
          ]},
          { title: 'Tải ứng dụng', items: [
            { label: 'iOS · iPhone/iPad', href: '/download#mobile' },
            { label: 'Android', href: '/download#mobile' },
            { label: 'Windows', href: '/download#desktop' },
            { label: 'Mac (Apple Silicon)', href: '/download#desktop' },
            { label: 'Mac (Intel)', href: '/download#desktop' },
            { label: '→ Trang tải về', href: '/download' },
          ]},
          { title: 'Công ty', items: [
            { label: 'Về chúng tôi', href: '/about' },
            { label: 'Blog', href: '/blog' },
            { label: 'Bảng giá', href: '/pricing' },
            { label: 'Tích hợp', href: '/integrations' },
            { label: 'Liên hệ', href: '/contact' },
          ]},
          { title: 'Tài nguyên', items: [
            { label: 'Tài liệu', href: 'https://huongdan.cnvwork.com' },
            { label: 'Đăng nhập', href: 'https://connect.cnvwork.com' },
          ]},
          { title: 'Pháp lý', items: [
            { label: 'Chính sách bảo mật', href: '/privacy-policy' },
          ]},
        ].map(col => (
          <div key={col.title}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#fff', marginBottom: 16 }}>{col.title}</div>
            <div style={{ display: 'grid', gap: 10 }}>
              {col.items.map(it => (
                <a key={it.label} href={it.href} style={{ fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: 'rgba(255,255,255,0.55)', textDecoration: 'none' }}>{it.label}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.08)', display: 'flex', justifyContent: 'space-between', fontFamily: 'Inter, sans-serif', fontSize: 12.5, color: 'rgba(255,255,255,0.4)' }}>
        <span>© 2026 Công Ty TNHH CNV Holdings · CNV Work là sản phẩm thuộc CNV Holdings.</span>
        <span>Made in Vietnam · Dữ liệu lưu tại VN</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  PinkPricingHero, PinkModeSwitch, PinkCloudCalculator, PinkChatAddon, PinkOnPremise, PinkComparison,
  PinkLogo, PinkNav, PinkFooter,
});