// HubSpot-style product showcase: sticky tab selector + big product window mockups.

const HUB_PRODUCTS = [
  {
    id: 'sales', tag: 'SALES CRM', name: 'Sales Hub',
    title: 'Chốt deal nhanh hơn,',
    accent: 'không lạc dữ liệu',
    desc: 'Pipeline kanban, báo giá đa cấp, commission tự tính, renewal nhắc trước 30 ngày. Đội sales có mọi thứ cần ở một chỗ.',
    bullets: ['Pipeline kéo-thả đa giai đoạn', 'Báo giá · duyệt nhiều tầng', 'Commission theo rule', 'Renewal & alert tự động'],
    mock: 'sales',
    stats: [{ v: '×1.8', l: 'tốc độ chốt deal' }, { v: '−35%', l: 'data entry' }],
  },
  {
    id: 'mkt', tag: 'MARKETING', name: 'Marketing Hub',
    title: 'Thu lead & nuôi khách',
    accent: 'trên một platform',
    desc: 'Landing page, form, campaign, automation, ZNS/ZBS, loyalty Mini App — đo ROI thật trên từng nguồn, từng kịch bản.',
    bullets: ['Landing page · form builder', 'Flow automation không cần code', 'Zalo OA + ZNS + ZBS native', 'Loyalty Mini App trên Zalo'],
    mock: 'mkt',
    stats: [{ v: '×6.1', l: 'open rate ZNS' }, { v: '−45%', l: 'CAC leads' }],
  },
  {
    id: 'support', tag: 'SERVICE', name: 'Service Hub',
    title: 'Một inbox,',
    accent: 'mọi kênh khách hàng',
    desc: 'Zalo, Facebook, Email, Web widget — ticket auto-route, SLA cảnh báo, đội support không bị bỏ sót tin.',
    bullets: ['Inbox đa kênh hợp nhất', 'Ticket auto-route theo rule', 'SLA đa cấp · cảnh báo trước', 'Widget web nhúng custom'],
    mock: 'support',
    stats: [{ v: '98%', l: 'SLA đúng hẹn' }, { v: '−60%', l: 'chi phí CSKH' }],
  },
  {
    id: 'ops', tag: 'OPERATIONS', name: 'Operations Hub',
    title: 'Triển khai, HR & báo cáo',
    accent: 'chạy ngầm',
    desc: 'Đơn triển khai auto-assign, chấm công GPS, hợp đồng, bậc lương, 20+ dashboard real-time — loại bỏ 4-5 tool rời rạc.',
    bullets: ['Kanban triển khai đa team', 'Chấm công GPS · OT · nghỉ phép', 'Hợp đồng & bậc lương tự động', '20+ dashboard real-time'],
    mock: 'ops',
    stats: [{ v: '14 ngày', l: 'go-live trung bình' }, { v: '99.9%', l: 'uptime' }],
  },
];

// ────── Mock content per product ──────
const SalesHubMock = () => (
  <div style={{ padding: 22, background: '#F6F8FB', minHeight: 440 }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
      <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 700, color: NIGHT[1000] }}>Pipeline Q1 2026</div>
      <div style={{ display: 'flex', gap: 6 }}>
        {['Tất cả', 'Tôi'].map((t, i) => (
          <span key={t} style={{ padding: '4px 10px', fontSize: 11, borderRadius: 6, fontFamily: 'Inter, sans-serif',
            background: i === 0 ? PINK[400] : '#fff', color: i === 0 ? '#fff' : INK_SOFT, border: `1px solid ${i === 0 ? PINK[400] : LINE}`, fontWeight: 600 }}>{t}</span>
        ))}
      </div>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
      {[
        { stage: 'Lead mới', count: 24, sum: '₫480M', color: CYAN[500], deals: [['Chuỗi F&B', '₫38M'], ['E-com', '₫62M'], ['Tiện lợi', '₫58M']] },
        { stage: 'Qualified', count: 12, sum: '₫640M', color: PINK[400], deals: [['Saigon Co.op', '₫92M'], ['Galaxy Play', '₫75M'], ['An Nam', '₫48M']] },
        { stage: 'Proposal', count: 6, sum: '₫820M', color: '#F59E0B', deals: [['F&B chuỗi A', '₫220M'], ['Brewery B', '₫180M'], ['IT corp C', '₫140M']] },
        { stage: 'Closed-won', count: 3, sum: '₫340M', color: GREEN[500], deals: [['Cà phê', '₫120M'], ['Nhà thuốc', '₫140M'], ['Mỹ phẩm', '₫80M']] },
      ].map(col => (
        <div key={col.stage} style={{ background: '#fff', border: `1px solid ${LINE}`, borderRadius: 10, padding: 10 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: 99, background: col.color }}/>
              <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, color: NIGHT[1000] }}>{col.stage}</span>
              <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, color: INK_FAINT }}>{col.count}</span>
            </div>
            <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, fontWeight: 700, color: INK_SOFT }}>{col.sum}</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {col.deals.map(([n, v], i) => (
              <div key={i} style={{ padding: 8, background: '#F6F8FB', borderRadius: 6, borderLeft: `2px solid ${col.color}` }}>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600, color: NIGHT[1000], marginBottom: 2 }}>{n}</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, color: INK_SOFT, display: 'flex', justifyContent: 'space-between' }}>
                  <span>{v}</span><span style={{ color: PINK[400], fontWeight: 700 }}>{70 - i * 15}%</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  </div>
);

const MarketingHubMock = () => (
  <div style={{ padding: 22, background: '#F6F8FB', minHeight: 440 }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
      <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 700, color: NIGHT[1000] }}>Flow: Khách hàng mới F&B</div>
      <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, padding: '3px 9px', background: GREEN[50], color: GREEN[700], borderRadius: 5, fontWeight: 600 }}>● Đang chạy · 2,384 khách</span>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
      <div style={{ background: '#fff', padding: 16, borderRadius: 10, border: `1px solid ${LINE}` }}>
        <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, color: INK_FAINT, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10 }}>Flow</div>
        {[
          { t: 'Trigger', l: 'Khách điền form Mini App', c: PINK[400], icon: '◎' },
          { t: 'Condition', l: 'Nếu: tag = F&B chuỗi', c: '#F59E0B', icon: '?' },
          { t: 'Action', l: 'Gửi ZNS chào mừng', c: GREEN[500], icon: '→' },
          { t: 'Delay', l: 'Đợi 2 giờ', c: INK_FAINT, icon: '⏱' },
          { t: 'Action', l: 'Gán deal cho Sales F&B', c: GREEN[500], icon: '→' },
        ].map((n, i, a) => (
          <React.Fragment key={i}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', background: '#F6F8FB', borderRadius: 8, borderLeft: `3px solid ${n.c}` }}>
              <span style={{ width: 22, height: 22, borderRadius: 6, background: n.c, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700 }}>{n.icon}</span>
              <div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 9.5, color: INK_FAINT, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{n.t}</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 600, color: NIGHT[1000] }}>{n.l}</div>
              </div>
            </div>
            {i < a.length - 1 && <div style={{ height: 10, width: 1, background: LINE, marginLeft: 22 }}/>}
          </React.Fragment>
        ))}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div style={{ background: '#fff', padding: 14, borderRadius: 10, border: `1px solid ${LINE}` }}>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, color: INK_FAINT, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>ZNS hiệu suất 7 ngày</div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 80 }}>
            {[45, 62, 58, 78, 70, 88, 92].map((h, i) => (
              <div key={i} style={{ flex: 1, height: `${h}%`, background: `linear-gradient(180deg, ${PINK[400]}, ${PINK[200]})`, borderRadius: '4px 4px 0 0' }}/>
            ))}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontFamily: 'Inter, sans-serif', fontSize: 9, color: INK_FAINT }}>
            <span>T2</span><span>T3</span><span>T4</span><span>T5</span><span>T6</span><span>T7</span><span>CN</span>
          </div>
        </div>
        <div style={{ background: '#fff', padding: 14, borderRadius: 10, border: `1px solid ${LINE}` }}>
          {[['Open rate', '78.4%', PINK[400]], ['Click rate', '34.2%', CYAN[500]], ['Convert', '12.8%', GREEN[500]]].map(([k, v, c]) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '7px 0', borderBottom: `1px solid ${LINE}` }}>
              <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: INK_SOFT }}>{k}</span>
              <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 700, color: c }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>
);

const SupportHubMock = () => (
  <div style={{ padding: 22, background: '#F6F8FB', minHeight: 440, display: 'grid', gridTemplateColumns: '240px 1fr', gap: 14 }}>
    <div style={{ background: '#fff', borderRadius: 10, border: `1px solid ${LINE}`, padding: 10 }}>
      <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, color: INK_FAINT, letterSpacing: '0.1em', marginBottom: 10, textTransform: 'uppercase' }}>Inbox (12)</div>
      {[
        { ch: 'Zalo', n: 'Nguyễn Thuỳ Linh', m: 'Mình muốn hỏi về gói...', t: '2m', sla: 'high', unread: true },
        { ch: 'FB', n: 'Trần Minh', m: 'Đơn #4829 chưa nhận...', t: '14m', sla: 'med', unread: true },
        { ch: 'Email', n: 'Support · E-commerce', m: 'Re: API webhook 403', t: '1h', sla: 'low', unread: false },
        { ch: 'Web', n: 'Anonymous', m: 'Cho tôi hỏi demo...', t: '2h', sla: 'low', unread: false },
      ].map((t, i) => (
        <div key={i} style={{ padding: 8, background: t.unread ? PINK[50] : 'transparent', borderRadius: 6, marginBottom: 4, borderLeft: `2px solid ${t.sla === 'high' ? PINK[500] : t.sla === 'med' ? '#F59E0B' : LINE}` }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 2 }}>
            <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
              <span style={{ padding: '1px 5px', fontSize: 8.5, fontWeight: 700, borderRadius: 3, letterSpacing: '0.06em', background: t.ch === 'Zalo' ? '#0068FF' : t.ch === 'FB' ? '#1877F2' : t.ch === 'Email' ? NIGHT[1000] : GREEN[600], color: '#fff' }}>{t.ch}</span>
              <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: t.unread ? 700 : 500, color: NIGHT[1000] }}>{t.n}</span>
            </div>
            <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 9, color: INK_FAINT }}>{t.t}</span>
          </div>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 10.5, color: INK_SOFT, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.m}</div>
        </div>
      ))}
    </div>
    <div style={{ background: '#fff', borderRadius: 10, border: `1px solid ${LINE}`, display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '12px 14px', borderBottom: `1px solid ${LINE}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 700, color: NIGHT[1000] }}>Nguyễn Thuỳ Linh · Zalo</div>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 10.5, color: INK_SOFT, marginTop: 2 }}>Khách hàng mới · F&B chuỗi · Gán: Phương Thảo</div>
        </div>
        <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, padding: '3px 8px', background: PINK[50], color: PINK[600], borderRadius: 4, fontWeight: 700, letterSpacing: '0.06em' }}>SLA · 28 PHÚT</span>
      </div>
      <div style={{ padding: 14, flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ alignSelf: 'flex-start', maxWidth: '70%', padding: 10, background: '#F6F8FB', borderRadius: 10, fontFamily: 'Inter, sans-serif', fontSize: 12, color: NIGHT[1000], lineHeight: 1.45 }}>
          Mình muốn hỏi về gói Business — có hỗ trợ thêm chi nhánh sau không ạ?
        </div>
        <div style={{ alignSelf: 'center', padding: '6px 12px', fontFamily: 'Inter, sans-serif', fontSize: 10, color: INK_FAINT, background: '#F6F8FB', borderRadius: 99, border: `1px dashed ${LINE}` }}>
          Auto-route · gán cho team Sales F&B · 2m trước
        </div>
        <div style={{ alignSelf: 'flex-end', maxWidth: '70%', padding: 10, background: PINK[400], color: '#fff', borderRadius: 10, fontFamily: 'Inter, sans-serif', fontSize: 12, lineHeight: 1.45 }}>
          Dạ chị, gói Business hỗ trợ unlimited branches. Em gửi chị báo giá chi tiết qua Zalo nhé.
        </div>
        <div style={{ alignSelf: 'flex-end', fontFamily: 'Inter, sans-serif', fontSize: 10, color: INK_FAINT }}>Phương Thảo · 1m trước</div>
      </div>
    </div>
  </div>
);

const OpsHubMock = () => (
  <div style={{ padding: 22, background: '#F6F8FB', minHeight: 440, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
    <div style={{ background: '#fff', borderRadius: 10, border: `1px solid ${LINE}`, padding: 14 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
        <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 700, color: NIGHT[1000] }}>Dashboard — 7 ngày</div>
        <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, color: GREEN[600], fontWeight: 700 }}>● Live</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 12 }}>
        {[['Doanh thu', '₫2.84B', '+18%', PINK[400]], ['Deals mới', '142', '+24%', CYAN[500]], ['SLA support', '98.2%', '+2pp', GREEN[500]], ['Churn', '1.4%', '−0.3pp', '#F59E0B']].map(([k, v, d, c]) => (
          <div key={k} style={{ padding: 10, background: '#F6F8FB', borderRadius: 8 }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, color: INK_FAINT, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{k}</div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 18, fontWeight: 800, color: NIGHT[1000], marginTop: 4, letterSpacing: '-0.015em' }}>{v}</div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, fontWeight: 700, color: c, marginTop: 2 }}>{d}</div>
          </div>
        ))}
      </div>
      <div style={{ padding: 10, background: '#F6F8FB', borderRadius: 8 }}>
        <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, color: INK_FAINT, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>Forecast doanh thu</div>
        <svg width="100%" height="70" viewBox="0 0 260 70">
          <defs>
            <linearGradient id="fc" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0" stopColor={PINK[400]} stopOpacity="0.5"/>
              <stop offset="1" stopColor={PINK[400]} stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d="M0 50 L40 42 L80 45 L120 30 L160 35 L200 20 L240 15 L260 10 L260 70 L0 70 Z" fill="url(#fc)"/>
          <path d="M0 50 L40 42 L80 45 L120 30 L160 35 L200 20 L240 15 L260 10" stroke={PINK[400]} strokeWidth="2" fill="none"/>
        </svg>
      </div>
    </div>
    <div style={{ background: '#fff', borderRadius: 10, border: `1px solid ${LINE}`, padding: 14 }}>
      <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 700, color: NIGHT[1000], marginBottom: 12 }}>Triển khai — 160 đơn đang chạy</div>
      {[
        { c: 'Chuỗi F&B · HCM', stage: 'Setup workspace', owner: 'Phúc Hưng', pct: 65, st: 'active' },
        { c: 'Cà phê chuỗi · HN', stage: 'Training team', owner: 'Ngọc Anh', pct: 82, st: 'active' },
        { c: 'Một thương hiệu bia top 3 VN', stage: 'Go-live prep', owner: 'Minh Khôi', pct: 94, st: 'active' },
        { c: 'Chuỗi tiện lợi VN', stage: 'Kick-off', owner: 'Phúc Hưng', pct: 15, st: 'active' },
      ].map((r, i) => (
        <div key={i} style={{ padding: '10px 0', borderBottom: i < 3 ? `1px solid ${LINE}` : 'none' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
            <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 700, color: NIGHT[1000] }}>{r.c}</span>
            <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, color: PINK[500], fontWeight: 700 }}>{r.pct}%</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
            <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 10.5, color: INK_SOFT }}>{r.stage}</span>
            <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 10.5, color: INK_FAINT }}>{r.owner}</span>
          </div>
          <div style={{ height: 4, background: '#F6F8FB', borderRadius: 99 }}>
            <div style={{ width: `${r.pct}%`, height: '100%', background: PINK_GRAD, borderRadius: 99 }}/>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const MOCK_RENDERS = { sales: <SalesHubMock/>, mkt: <MarketingHubMock/>, support: <SupportHubMock/>, ops: <OpsHubMock/> };

const ProductShowcase = () => {
  const [active, setActive] = React.useState('sales');
  const p = HUB_PRODUCTS.find(x => x.id === active);
  return (
    <section style={{ background: NIGHT[1000], padding: '120px 48px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(ellipse 1000px 500px at 50% 0%, ${PINK[400]}18 0%, transparent 60%)` }}/>
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <PinkEyebrow style={{ marginBottom: 18 }}>SẢN PHẨM</PinkEyebrow>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 56, lineHeight: 1.08, letterSpacing: '-0.03em', color: '#fff', margin: '0 auto 16px', maxWidth: 820 }}>
            Bốn hub. Một <PinkGradientText>platform</PinkGradientText>. Vô hạn use-case.
          </h2>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, color: 'rgba(255,255,255,0.65)', maxWidth: 600, margin: '0 auto' }}>
            Chọn hub để xem chi tiết — tất cả hubs kết nối dữ liệu tự động.
          </p>
        </div>

        {/* Tab selector */}
        <div style={{
          display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 44,
          padding: 7, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)',
          borderRadius: 14, maxWidth: 820, margin: '0 auto 44px',
        }}>
          {HUB_PRODUCTS.map(h => (
            <button key={h.id} onClick={() => setActive(h.id)} style={{
              flex: '1 1 180px', padding: '13px 18px',
              background: active === h.id ? PINK[400] : 'transparent',
              color: active === h.id ? NIGHT[1000] : 'rgba(255,255,255,0.75)',
              border: 'none', borderRadius: 9,
              fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 14,
              cursor: 'pointer', transition: 'all .18s ease', letterSpacing: '-0.005em',
              display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 3,
            }}>
              <span style={{ fontSize: 10, letterSpacing: '0.14em', opacity: 0.7 }}>{h.tag}</span>
              <span style={{ fontSize: 15, fontWeight: 700 }}>{h.name}</span>
            </button>
          ))}
        </div>

        {/* Showcase */}
        <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, color: PINK[400], fontWeight: 700, letterSpacing: '0.16em', marginBottom: 14 }}>{p.tag}</div>
            <h3 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 44, lineHeight: 1.1, letterSpacing: '-0.028em', color: '#fff', margin: '0 0 18px 0' }}>
              {p.title} <PinkGradientText gradient={PINK_CYAN_GRAD}>{p.accent}</PinkGradientText>
            </h3>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.62, color: 'rgba(255,255,255,0.7)', margin: '0 0 26px 0' }}>{p.desc}</p>
            <div style={{ display: 'grid', gap: 10, marginBottom: 28 }}>
              {p.bullets.map((b, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 11 }}>
                  <span style={{ flexShrink: 0, marginTop: 4, width: 16, height: 16, borderRadius: 99, background: `${PINK[400]}25`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg width="9" height="9" viewBox="0 0 9 9"><path d="M1.5 4.5l2 2 4-5" stroke={PINK[400]} strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </span>
                  <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 14.5, color: 'rgba(255,255,255,0.88)' }}>{b}</span>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 28, marginBottom: 28 }}>
              {p.stats.map(s => (
                <div key={s.l}>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 32, letterSpacing: '-0.02em', color: '#fff' }}>
                    <PinkGradientText>{s.v}</PinkGradientText>
                  </div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 2 }}>{s.l}</div>
                </div>
              ))}
            </div>
            <PinkBtn>Khám phá {p.name}</PinkBtn>
          </div>

          {/* Product window */}
          <div style={{
            background: '#fff', borderRadius: 16,
            boxShadow: `0 40px 120px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,104,142,0.15)`,
            overflow: 'hidden',
          }}>
            <div style={{ padding: '11px 14px', background: '#F6F8FB', borderBottom: `1px solid ${LINE}`, display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ display: 'flex', gap: 5 }}>
                {['#FF5F57', '#FFBD2E', '#28C840'].map(c => <span key={c} style={{ width: 10, height: 10, borderRadius: 99, background: c }}/>)}
              </div>
              <div style={{ flex: 1, textAlign: 'center', fontFamily: 'Inter, sans-serif', fontSize: 11, color: INK_SOFT }}>app.cnv.vn/{active}</div>
            </div>
            {MOCK_RENDERS[active]}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ProductShowcase });