// About page — Pink theme matching CNV Work brand
// Loaded only on /about

const ABT_CREAM = '#FAF7F4';
const ABT_CREAM_LINE = 'rgba(6,7,11,0.08)';
const ABT_INK_TXT = '#0A0E1A';
const ABT_INK_MUTED = 'rgba(10,14,26,0.62)';
const ABT_INK_FAINT = 'rgba(10,14,26,0.45)';

// ─── HERO ───────────────────────────────────────────────────────────────
const PinkAboutHero = () => (
  <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' }}>VỀ CHÚNG TÔI</PinkEyebrow>
      <h1 style={{
        fontFamily: 'Inter, sans-serif', fontWeight: 800,
        fontSize: 'clamp(48px, 6.4vw, 84px)', lineHeight: 1.04, letterSpacing: '-0.04em',
        margin: '0 auto 28px', maxWidth: 1100,
      }}>
        Doanh nghiệp Việt làm <PinkGradientText gradient={PINK_CYAN_GRAD}>phần mềm Việt</PinkGradientText> —<br/>
        phục vụ doanh nghiệp Việt
      </h1>
      <p style={{
        fontFamily: 'Inter, sans-serif', fontSize: 19, lineHeight: 1.6,
        color: 'rgba(255,255,255,0.65)', maxWidth: 760, margin: '0 auto',
      }}>
        CNV Holdings thành lập năm 2020, nhận đầu tư từ Wavemaker Partners (Singapore) và NextTech.
        Đơn vị phát triển CNV Loyalty, CNV CDP và CNV Work — đồng hành cùng hơn 3,000 doanh nghiệp Việt.
      </p>
    </div>
  </div>
);

// ─── STATS GRID ──────────────────────────────────────────────────────────
const PinkAboutStats = () => {
  const stats = [
    { value: '5+', label: 'năm hoạt động', sub: 'thành lập 08/2020' },
    { value: '3,000+', label: 'khách hàng doanh nghiệp', sub: 'trải khắp 8 ngành' },
    { value: '$2.5M', label: 'vốn đầu tư đã gọi', sub: 'NextTech, Wavemaker — qua nhiều vòng' },
    { value: '100+', label: 'tính năng có sẵn', sub: 'platform CDP + Loyalty + Work' },
    { value: '$30M', label: 'GMV tạo ra cho khách', sub: 'năm 2023, qua Zalo Mini App' },
  ];
  return (
    <div style={{ background: ABT_CREAM, padding: '100px 64px', color: ABT_INK_TXT }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <PinkEyebrow style={{ marginBottom: 16, justifyContent: 'center' }}>SỐ LIỆU NỔI BẬT</PinkEyebrow>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 44, letterSpacing: '-0.03em', lineHeight: 1.05, margin: 0, color: ABT_INK_TXT }}>
            Tăng trưởng <PinkGradientText gradient={PINK_CYAN_GRAD}>bền vững</PinkGradientText> qua từng năm
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 20 }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              background: '#fff', borderRadius: 18,
              padding: '28px 24px',
              border: `1px solid ${ABT_CREAM_LINE}`,
              boxShadow: `0 1px 3px rgba(10,14,26,0.04)`,
              transition: 'transform .18s, box-shadow .18s',
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = `0 12px 28px ${PINK[400]}25`; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 1px 3px rgba(10,14,26,0.04)'; }}>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 36, fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1, marginBottom: 10 }}>
                <PinkGradientText gradient={PINK_CYAN_GRAD}>{s.value}</PinkGradientText>
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13.5, fontWeight: 700, color: ABT_INK_TXT, letterSpacing: '-0.005em', marginBottom: 4 }}>
                {s.label}
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: ABT_INK_MUTED, lineHeight: 1.4 }}>
                {s.sub}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─── PRODUCT TIMELINE — câu chuyện sản phẩm ──────────────────────────────
const PinkProductTimeline = () => {
  const items = [
    {
      year: '2020',
      product: 'CNV Loyalty',
      tagline: 'Khởi nguyên — App loyalty trên Zalo',
      body: 'CNV Holdings ra đời tại TP.HCM, ra mắt CNV Loyalty — nền tảng tạo app chăm sóc khách hàng riêng cho doanh nghiệp Việt. NextTech Group đầu tư vòng seed.',
    },
    {
      year: '2022 – 2023',
      product: 'CNV CDP',
      tagline: 'Mở rộng — Customer Data Platform',
      body: 'CNV phát triển CDP để doanh nghiệp gom dữ liệu từ Zalo, app, web, POS… vào hồ sơ 360°. Đoạt giải Sao Khuê 2023 cho hạng mục Loyalty Platform.',
    },
    {
      year: '2024',
      product: 'Tăng tốc',
      tagline: 'Wavemaker dẫn vòng — mở rộng đội ngũ',
      body: 'Wavemaker Partners (Singapore) dẫn vòng Seed Extension. CNV vào Top 3 I-STAR và 2 hạng mục Zalo Partner Recognition. 96,000 đơn hàng qua Mini App.',
    },
    {
      year: '2024 – nay',
      product: 'CNV Work',
      tagline: 'CRM + HRM all-in-one cho doanh nghiệp Việt',
      body: 'Trên nền tảng dữ liệu khách hàng, CNV xây CNV Work — bộ công cụ vận hành tổng thể: CRM, HRM, Chat AI, Task, Approval. Đồng hành cùng SMB lẫn doanh nghiệp lớn.',
    },
  ];

  return (
    <div style={{ background: '#fff', padding: '100px 64px', color: ABT_INK_TXT }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <PinkEyebrow style={{ marginBottom: 16, justifyContent: 'center' }}>HÀNH TRÌNH SẢN PHẨM</PinkEyebrow>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 44, letterSpacing: '-0.03em', lineHeight: 1.05, margin: '0 0 14px', color: ABT_INK_TXT }}>
            Từ Loyalty App → CDP → <PinkGradientText gradient={PINK_CYAN_GRAD}>CNV Work</PinkGradientText>
          </h2>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, color: ABT_INK_MUTED, maxWidth: 720, margin: '0 auto', lineHeight: 1.55 }}>
            5 năm đi từ 1 app loyalty trên Zalo đến nền tảng vận hành kinh doanh all-in-one — câu chuyện gắn với hành trình số hoá doanh nghiệp Việt.
          </p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          {items.map((it, i) => (
            <div key={i} style={{
              position: 'relative',
              padding: '24px 26px 24px 28px',
              borderRadius: 16,
              background: ABT_CREAM,
              border: `1px solid ${ABT_CREAM_LINE}`,
              borderLeft: `4px solid ${PINK[400]}`,
            }}>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: PINK[600], marginBottom: 6 }}>
                {it.year}
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap', marginBottom: 8 }}>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', color: ABT_INK_TXT, lineHeight: 1.15 }}>{it.product}</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: PINK[600], fontWeight: 600 }}>{it.tagline}</div>
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 15, color: ABT_INK_MUTED, lineHeight: 1.6 }}>
                {it.body}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─── FOUNDERS ────────────────────────────────────────────────────────────
const founders = [
  {
    slug: 'phu',
    name: 'Nguyễn Tuấn Phú',
    title: 'Co-Founder · CEO',
    photo: '/img/team/phu.png',
    expertise: 'Tăng trưởng kinh doanh',
    bio: 'Dẫn dắt chiến lược tăng trưởng giúp CNV CDP đạt tốc độ 2x mỗi năm — kết nối năng lực kỹ thuật với kết quả kinh doanh thực tế.',
    pastLabel: 'Kinh nghiệm trước đây',
    past: 'Tư vấn & triển khai dự án quy mô tập đoàn, cơ quan nhà nước với yêu cầu bảo mật & hạ tầng cao.',
    yearsExp: '16+',
    yearsTagline: 'năm kinh nghiệm software outsourcing & scaling B2B solutions trên nhiều ngành',
  },
  {
    slug: 'khoa',
    name: 'Đỗ Đăng Khoa',
    title: 'Co-Founder · VP of Growth',
    photo: '/img/team/khoa.png',
    expertise: 'Tối ưu marketing',
    bio: 'Dẫn dắt chiến lược marketing đưa CNV CDP cán mốc 2,000+ khách hàng và duy trì tăng trưởng ARR 2x/năm.',
    pastLabel: 'Kinh nghiệm trước đây',
    past: 'Host hơn 100+ webinar và 10 chương trình training trang bị chiến lược triển khai cho khách hàng doanh nghiệp.',
    yearsExp: '9+',
    yearsTagline: 'năm kinh nghiệm crafting digital marketing campaign hiệu suất cao và scaling B2B',
  },
  {
    slug: 'khanh',
    name: 'Phan Thanh Khánh',
    title: 'Co-Founder · CTO',
    photo: '/img/team/khanh.png',
    expertise: 'Phát triển công nghệ',
    bio: 'Thiết kế và xây dựng hệ thống scalable đạt 99.9% uptime cho ngành giáo dục, tài chính, e-commerce — phục vụ hàng triệu user mỗi ngày.',
    pastLabel: 'Kinh nghiệm trước đây',
    past: 'Từng giữ vị trí Chief Project Engineer tại Vietlott, KYNA.VN, Vietbank — phụ trách hệ thống lõi.',
    yearsExp: '11+',
    yearsTagline: 'năm phát triển hệ thống tải lớn, bảo mật, scalable cho nhiều mô hình doanh nghiệp',
  },
];

const PhotoCircle = ({ src, name, size = 132 }) => {
  const [error, setError] = React.useState(false);
  const initials = name.trim().split(/\s+/).slice(-2).map(s => s[0]).join('');
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: error ? `linear-gradient(135deg, ${PINK[400]}, ${PINK[600]})` : '#000',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      overflow: 'hidden',
      border: `4px solid #fff`,
      boxShadow: `0 0 0 4px ${PINK[400]}45, 0 12px 32px ${PINK[400]}55`,
      flexShrink: 0,
    }}>
      {error ? (
        <span style={{ color: '#fff', fontFamily: 'Inter, sans-serif', fontSize: size * 0.36, fontWeight: 800, letterSpacing: '-0.02em' }}>{initials}</span>
      ) : (
        <img src={src} alt={name} onError={() => setError(true)}
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
      )}
    </div>
  );
};

const PinkFounders = () => (
  <div style={{ position: 'relative', background: NIGHT[1000], color: '#fff', padding: '120px 64px', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
      background: `radial-gradient(ellipse 900px 600px at 50% 0%, ${PINK[400]}22 0%, transparent 60%)` }}/>
    <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 64 }}>
        <PinkEyebrow style={{ marginBottom: 16, justifyContent: 'center' }}>ĐỘI NGŨ SÁNG LẬP</PinkEyebrow>
        <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 44, letterSpacing: '-0.03em', lineHeight: 1.05, margin: '0 0 14px' }}>
          Domain Experts + Tech Experts +<br/>
          <PinkGradientText gradient={PINK_CYAN_GRAD}>Great Executioners</PinkGradientText>
        </h2>
        <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, color: 'rgba(255,255,255,0.6)', maxWidth: 720, margin: '0 auto', lineHeight: 1.55 }}>
          Bộ ba sáng lập kết hợp chuyên môn ngành, năng lực kỹ thuật và khả năng triển khai — nền móng cho tăng trưởng bền vững của CNV.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {founders.map(f => (
          <div key={f.slug} style={{
            background: 'rgba(255,255,255,0.03)',
            border: `1px solid rgba(255,255,255,0.08)`,
            borderRadius: 20, padding: '36px 28px',
            display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: -120, left: '50%', transform: 'translateX(-50%)', width: 360, height: 360, borderRadius: '50%',
              background: `radial-gradient(circle, ${PINK[400]}22 0%, transparent 60%)`, filter: 'blur(40px)', pointerEvents: 'none' }}/>

            <div style={{ position: 'relative', marginBottom: 20 }}>
              <PhotoCircle src={f.photo} name={f.name}/>
            </div>

            <div style={{ position: 'relative', fontFamily: 'Inter, sans-serif', fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', marginBottom: 4 }}>
              <PinkGradientText gradient={PINK_CYAN_GRAD}>{f.name}</PinkGradientText>
            </div>
            <div style={{ position: 'relative', fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 600, letterSpacing: '0.04em', color: 'rgba(255,255,255,0.7)', marginBottom: 28 }}>
              {f.title}
            </div>

            {/* Expertise block */}
            <div style={{ position: 'relative', width: '100%', borderTop: `1px solid rgba(255,255,255,0.08)`, paddingTop: 20, marginBottom: 20 }}>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: PINK[300], marginBottom: 8, minHeight: 16 }}>{f.expertise}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, minHeight: 88 }}>{f.bio}</div>
            </div>

            <div style={{ position: 'relative', width: '100%', borderTop: `1px solid rgba(255,255,255,0.08)`, paddingTop: 20, marginBottom: 24 }}>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: PINK[300], marginBottom: 8, minHeight: 16 }}>{f.pastLabel}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, minHeight: 66 }}>{f.past}</div>
            </div>

            {/* Years exp pill — marginTop: auto đẩy xuống đáy card cho đồng đều */}
            <div style={{
              position: 'relative', marginTop: 'auto',
              padding: '12px 18px', borderRadius: 12,
              background: '#fff', color: ABT_INK_TXT,
              fontFamily: 'Inter, sans-serif', fontSize: 13, lineHeight: 1.5,
              width: '100%', textAlign: 'center',
            }}>
              <span style={{ fontWeight: 800, color: PINK[600], fontSize: 14 }}>{f.yearsExp} năm</span>
              <span style={{ color: ABT_INK_MUTED }}> · {f.yearsTagline}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// ─── AWARDS ──────────────────────────────────────────────────────────────
const PinkAwards = () => {
  const awards = [
    { year: '2023', title: 'Sao Khuê 2023', sub: 'Nền tảng kiến tạo khách hàng trung thành' },
    { year: '2024', title: 'Top 3 I-STAR 2024', sub: 'Đổi mới sáng tạo TP.HCM' },
    { year: '2024', title: 'TOP Growth Partner', sub: 'Zalo Partner Recognition 2024' },
    { year: '2024', title: 'Best Ecosystem Utilization', sub: 'Zalo Partner Recognition 2024' },
  ];
  return (
    <div style={{ background: ABT_CREAM, padding: '100px 64px', color: ABT_INK_TXT }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <PinkEyebrow style={{ marginBottom: 16, justifyContent: 'center' }}>GIẢI THƯỞNG & GHI NHẬN</PinkEyebrow>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 44, letterSpacing: '-0.03em', lineHeight: 1.05, margin: 0, color: ABT_INK_TXT }}>
            Được công nhận bởi <PinkGradientText gradient={PINK_CYAN_GRAD}>cộng đồng & đối tác</PinkGradientText>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {awards.map((a, i) => (
            <div key={i} style={{
              background: '#fff', borderRadius: 18, padding: '28px 24px',
              border: `1px solid ${ABT_CREAM_LINE}`,
              display: 'flex', flexDirection: 'column', alignItems: 'flex-start',
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                width: 48, height: 48, borderRadius: 12,
                background: `${PINK[400]}18`, border: `1px solid ${PINK[400]}40`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 16,
              }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path d="M12 2l2.6 5.5 6 .9-4.3 4.3 1 6L12 16.1l-5.3 2.6 1-6L3.4 8.4l6-.9L12 2z" stroke={PINK[600]} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill={`${PINK[400]}30`}/>
                </svg>
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: PINK[600], marginBottom: 8 }}>{a.year}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, fontWeight: 800, letterSpacing: '-0.015em', color: ABT_INK_TXT, marginBottom: 6, lineHeight: 1.25 }}>{a.title}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: ABT_INK_MUTED, lineHeight: 1.5 }}>{a.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─── BOOK / ẤN PHẨM ──────────────────────────────────────────────────────
const PinkBook = () => {
  const [imgError, setImgError] = React.useState(false);
  return (
    <div style={{ position: 'relative', background: NIGHT[1000], color: '#fff', padding: '110px 64px', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(ellipse 1100px 700px at 30% 50%, ${PINK[400]}1f 0%, transparent 60%)` }}/>
      <div style={{ position: 'relative', maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 64, alignItems: 'center' }}>
          {/* LEFT: book cover */}
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            {imgError ? (
              <div style={{
                width: 360, aspectRatio: '3/4',
                borderRadius: 16, padding: 32,
                background: `linear-gradient(135deg, ${PINK[500]}, ${PINK[700] || '#B91C5C'})`,
                boxShadow: `0 30px 80px ${PINK[400]}55, 0 0 0 1px ${PINK[400]}40`,
                display: 'flex', flexDirection: 'column', justifyContent: 'center', textAlign: 'center',
                transform: 'rotate(-2deg)',
              }}>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)', marginBottom: 14 }}>Đỗ Đăng Khoa & Nguyễn Tuấn Phú</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 28, fontWeight: 800, color: '#fff', lineHeight: 1.15, letterSpacing: '-0.02em', marginBottom: 12 }}>Tăng Trưởng Lợi Nhuận</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'rgba(255,255,255,0.85)', lineHeight: 1.5 }}>với <span style={{ fontStyle: 'italic' }}>Private Domain Traffic System</span> trên hệ sinh thái Zalo</div>
              </div>
            ) : (
              <div style={{
                width: '100%', maxWidth: 420,
                aspectRatio: '0.92 / 1',
                overflow: 'hidden', borderRadius: 10,
                boxShadow: `0 30px 70px ${PINK[400]}55`,
                transform: 'rotate(-2deg)',
                transition: 'transform .3s',
              }}
                onMouseEnter={e => e.currentTarget.style.transform = 'rotate(0deg) scale(1.02)'}
                onMouseLeave={e => e.currentTarget.style.transform = 'rotate(-2deg) scale(1)'}>
                <img src="/img/book/sach.jpeg" alt="Tăng trưởng lợi nhuận với Private Domain Traffic System trên hệ sinh thái Zalo"
                  onError={() => setImgError(true)}
                  style={{
                    width: '108%', height: '108%',
                    marginLeft: '-4%', marginTop: '-4%',
                    objectFit: 'cover', display: 'block',
                  }}/>
              </div>
            )}
          </div>

          {/* RIGHT: book details */}
          <div>
            <PinkEyebrow style={{ marginBottom: 16 }}>SÁCH · ẤN PHẨM</PinkEyebrow>
            <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(32px, 4vw, 48px)', letterSpacing: '-0.03em', lineHeight: 1.08, margin: '0 0 18px', color: '#fff' }}>
              Tăng trưởng lợi nhuận với{' '}
              <PinkGradientText gradient={PINK_CYAN_GRAD}>Private Domain Traffic System</PinkGradientText>{' '}
              trên hệ sinh thái Zalo
            </h2>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'rgba(255,255,255,0.55)', marginBottom: 24, display: 'flex', flexWrap: 'wrap', gap: 18 }}>
              <span><span style={{ color: 'rgba(255,255,255,0.4)' }}>Tác giả:</span> Đỗ Đăng Khoa &amp; Nguyễn Tuấn Phú</span>
              <span><span style={{ color: 'rgba(255,255,255,0.4)' }}>NXB:</span> Thế Giới · GIVER</span>
            </div>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, color: 'rgba(255,255,255,0.7)', lineHeight: 1.7, marginBottom: 24 }}>
              Cuốn sách đầu tiên tại Việt Nam đặt nền móng cho khái niệm <strong style={{ color: '#fff' }}>Private Domain Traffic System</strong> —
              hệ thống traffic riêng do doanh nghiệp tự sở hữu, vận hành trên hệ sinh thái Zalo. Đúc kết từ 5 năm
              triển khai cho 3,000+ khách hàng của CNV.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10, marginBottom: 28 }}>
              {[
                'Khung tư duy chuyển từ Public Traffic (Facebook/Google Ads) sang Private Domain',
                'Lộ trình triển khai cụ thể qua Zalo OA, Mini App, ZNS, CDP',
                'Case study thực tế từ khách hàng CNV — bán lẻ, F&B, giáo dục, healthcare',
              ].map((p, i) => (
                <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontFamily: 'Inter, sans-serif', fontSize: 14.5, color: 'rgba(255,255,255,0.75)', lineHeight: 1.55 }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ marginTop: 2, flexShrink: 0 }}>
                    <path d="M5 12l5 5 9-10" stroke={PINK[400]} strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span>{p}</span>
                </li>
              ))}
            </ul>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <PinkBtn size="md">Tìm hiểu thêm</PinkBtn>
              <PinkOutlineBtn size="md" dark>Liên hệ nhận sách</PinkOutlineBtn>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ─── INVESTORS ───────────────────────────────────────────────────────────
const PinkInvestors = () => {
  const investors = [
    {
      name: 'NextTech Group',
      logo: '/img/vc/nextpay.png',
      role: 'Đầu tư khởi đầu',
      tagline: 'Đặt nền móng phát triển CNV Loyalty và đội ngũ core ban đầu từ 2020.',
    },
    {
      name: 'Wavemaker Partners',
      logo: '/img/vc/wavemaker.png',
      role: 'Đầu tư chiến lược',
      tagline: 'Quỹ đầu tư mạo hiểm tại Singapore — đồng hành mở rộng đội ngũ và sản phẩm.',
    },
  ];
  return (
    <div style={{ background: '#fff', padding: '100px 64px', color: ABT_INK_TXT }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <PinkEyebrow style={{ marginBottom: 16, justifyContent: 'center' }}>NHÀ ĐẦU TƯ</PinkEyebrow>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 40, letterSpacing: '-0.03em', lineHeight: 1.05, margin: '0 0 14px', color: ABT_INK_TXT }}>
            Được tin cậy bởi <PinkGradientText gradient={PINK_CYAN_GRAD}>quỹ đầu tư khu vực</PinkGradientText>
          </h2>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, color: ABT_INK_MUTED, maxWidth: 720, margin: '0 auto', lineHeight: 1.55 }}>
            Đồng hành cùng CNV qua nhiều vòng đầu tư từ 2020 — phát triển sản phẩm và mở rộng đội ngũ phục vụ doanh nghiệp Việt.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {investors.map((inv, i) => (
            <div key={i} style={{
              padding: '48px 36px', borderRadius: 20,
              background: '#fff', color: ABT_INK_TXT,
              border: `1px solid ${ABT_CREAM_LINE}`,
              boxShadow: `0 8px 24px ${PINK[400]}12`,
              display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
            }}>
              <div style={{
                height: 64, display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 24,
              }}>
                <img src={inv.logo} alt={inv.name}
                  style={{ maxHeight: 56, maxWidth: 220, objectFit: 'contain', display: 'block' }}/>
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: PINK[600], marginBottom: 6 }}>{inv.role}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 20, fontWeight: 800, letterSpacing: '-0.02em', color: ABT_INK_TXT, marginBottom: 12 }}>{inv.name}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: ABT_INK_MUTED, lineHeight: 1.6, maxWidth: 360 }}>{inv.tagline}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─── SUPPORTED BY (Google Cloud / AWS / GitLab — for Startups) ────────
const PinkSupportedBy = () => {
  const partners = [
    { name: 'Google Cloud', program: 'for Startups', logo: '/img/vc/google-cloud.svg',  height: 28 },
    { name: 'AWS',          program: 'for Startups', logo: '/img/vc/aws-smile.svg',     height: 44 },
    { name: 'Microsoft',    program: 'for Startups', logo: '/img/vc/microsoft.svg',     height: 50 },
    { name: 'GitLab',       program: 'for Startups', logo: '/img/vc/gitlab-tanuki.svg', height: 56 },
  ];
  return (
    <div style={{ background: ABT_CREAM, padding: '80px 64px', color: ABT_INK_TXT }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
        <PinkEyebrow style={{ marginBottom: 14, justifyContent: 'center' }}>ĐƯỢC HỖ TRỢ BỞI</PinkEyebrow>
        <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 32, letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 36px', color: ABT_INK_TXT }}>
          Đối tác công nghệ <PinkGradientText gradient={PINK_CYAN_GRAD}>toàn cầu</PinkGradientText>
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
          {partners.map(p => (
            <div key={p.name} style={{
              background: '#fff', borderRadius: 16,
              border: `1px solid ${ABT_CREAM_LINE}`,
              padding: '36px 24px',
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
              minHeight: 160,
              gap: 14,
            }}>
              <img src={p.logo} alt={`${p.name} ${p.program}`}
                style={{ height: p.height, maxWidth: '80%', objectFit: 'contain', display: 'block' }}/>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 500, color: ABT_INK_MUTED, letterSpacing: '0.01em' }}>
                {p.program}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─── OFFICES ─────────────────────────────────────────────────────────────
const PinkOffices = () => {
  const offices = [
    { city: 'Singapore', label: 'Văn phòng Global', addr: 'CNV Global PTE. LTD.\n20A Tanjong Pagar Road,\nSingapore 088443' },
    { city: 'TP.HCM', label: 'Trụ sở Miền Nam', addr: '42/2 Nguyễn Văn Trỗi,\nPhường Cầu Kiệu,\nTP. Hồ Chí Minh' },
    { city: 'Hà Nội', label: 'Văn phòng Miền Bắc', addr: '4/48 Nguyễn Chánh,\nPhường Yên Hoà,\nTP. Hà Nội' },
  ];
  return (
    <div style={{ background: ABT_CREAM, padding: '100px 64px', color: ABT_INK_TXT }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <PinkEyebrow style={{ marginBottom: 16, justifyContent: 'center' }}>VĂN PHÒNG</PinkEyebrow>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 40, letterSpacing: '-0.03em', lineHeight: 1.05, margin: 0, color: ABT_INK_TXT }}>
            3 thành phố — <PinkGradientText gradient={PINK_CYAN_GRAD}>cùng một sứ mệnh</PinkGradientText>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {offices.map((o, i) => (
            <div key={i} style={{
              background: '#fff', borderRadius: 18, padding: '32px 28px',
              border: `1px solid ${ABT_CREAM_LINE}`,
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: `${PINK[400]}18`, border: `1px solid ${PINK[400]}40`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 18,
              }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                  <path d="M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z" stroke={PINK[600]} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
                  <circle cx="12" cy="10" r="2.5" stroke={PINK[600]} strokeWidth="1.7"/>
                </svg>
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: PINK[600], marginBottom: 6 }}>{o.label}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', color: ABT_INK_TXT, marginBottom: 14 }}>{o.city}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: ABT_INK_MUTED, lineHeight: 1.7, whiteSpace: 'pre-line' }}>{o.addr}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─── CTA ─────────────────────────────────────────────────────────────────
const PinkAboutCTA = () => (
  <div style={{ background: NIGHT[1000], padding: '100px 64px', color: '#fff', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
      background: `radial-gradient(ellipse 1100px 700px at 50% 50%, ${PINK[400]}22 0%, transparent 60%)` }}/>
    <div style={{ position: 'relative', maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
      <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(36px, 5vw, 56px)', letterSpacing: '-0.03em', lineHeight: 1.08, margin: '0 0 18px' }}>
        Bạn muốn <PinkGradientText gradient={PINK_CYAN_GRAD}>đồng hành cùng CNV?</PinkGradientText>
      </h2>
      <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 18, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, marginBottom: 32, maxWidth: 640, marginLeft: 'auto', marginRight: 'auto' }}>
        Đặt lịch demo CNV Work với đội ngũ sales — tư vấn lộ trình triển khai phù hợp quy mô doanh nghiệp.
      </p>
      <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
        <PinkBtn size="lg">Đặt lịch demo</PinkBtn>
        <PinkOutlineBtn size="lg" dark>Xem bảng giá</PinkOutlineBtn>
      </div>
    </div>
  </div>
);

Object.assign(window, {
  PinkAboutHero, PinkAboutStats, PinkProductTimeline, PinkFounders,
  PinkAwards, PinkBook, PinkInvestors, PinkSupportedBy, PinkOffices, PinkAboutCTA,
});