// Social proof, stats band, integrations, and final CTA for the HubSpot-style landing.

const PinkStatsBand = () => (
  <section style={{ background: '#fff', padding: '80px 48px', position: 'relative' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 48,
        padding: '64px 56px', borderRadius: 22,
        background: `linear-gradient(135deg, ${NIGHT[1000]} 0%, ${NIGHT[900]} 55%, ${PINK[900]} 100%)`,
        boxShadow: `0 40px 120px ${PINK[400]}30`,
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
          background: `radial-gradient(circle at 85% 50%, ${PINK[400]}30 0%, transparent 50%)` }}/>
        {[
          ['500+', 'doanh nghiệp vận hành'],
          ['2M+', 'khách hàng cuối quản lý'],
          ['15M+', 'ZNS gửi mỗi tháng'],
          ['99.9%', 'uptime SLA'],
        ].map(([v, l]) => (
          <div key={l} style={{ position: 'relative' }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 52, letterSpacing: '-0.03em', lineHeight: 1 }}>
              <PinkGradientText>{v}</PinkGradientText>
            </div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'rgba(255,255,255,0.7)', marginTop: 10, lineHeight: 1.4 }}>{l}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const PinkTestimonials = () => {
  const items = [
    {
      brand: 'Một chuỗi cà phê 700+ cửa hàng', brandSub: '700+ cửa hàng · F&B',
      quote: 'Từ 5 tool rời rạc về 1 platform. Repeat rate tăng ×2.3 trong 6 tháng — data team marketing và ops cuối cùng cũng nói chung một ngôn ngữ.',
      person: 'Head of CRM, chuỗi F&B 700+ cửa hàng',
      stats: [{ v: '×2.3', l: 'repeat rate' }, { v: '−60%', l: 'CSKH cost' }],
    },
    {
      brand: 'Một thương hiệu bia top 3 VN', brandSub: '3,000+ điểm bán · B2B',
      quote: 'Onboard 3000 điểm bán trong 14 ngày. Trước đây cần 4 tool khác nhau — giờ chỉ một CNV Work là đủ cho toàn bộ chuỗi phân phối.',
      person: 'Trade Marketing Director, brewery top 3',
      stats: [{ v: '14 ngày', l: 'go-live' }, { v: '×2.1', l: 'đơn B2B' }],
    },
    {
      brand: 'Một chuỗi F&B 600+ cửa hàng', brandSub: '640+ cửa hàng · Loyalty',
      quote: 'Zalo Mini App + automation ZNS đã thay thế toàn bộ email marketing cũ. Open rate gấp 6 lần, chi phí trên mỗi lead giảm gần một nửa.',
      person: 'Marketing Director, chuỗi cà phê 600+ cửa hàng',
      stats: [{ v: '×6.1', l: 'open rate' }, { v: '−45%', l: 'CPC leads' }],
    },
  ];
  return (
    <section style={{ background: '#fff', padding: '120px 48px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 60 }}>
          <PinkEyebrow style={{ marginBottom: 18 }}>KHÁCH HÀNG</PinkEyebrow>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 52, lineHeight: 1.1, letterSpacing: '-0.03em', color: NIGHT[1000], margin: '0 auto 14px', maxWidth: 760 }}>
            500+ doanh nghiệp Việt <PinkGradientText gradient={`linear-gradient(90deg, ${PINK[500]}, ${PINK[700]})`}>đã chuyển</PinkGradientText> sang CNV Work
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {items.map((t, i) => (
            <div key={i} style={{
              padding: 32, borderRadius: 18,
              background: i === 1 ? NIGHT[1000] : '#fff',
              border: i === 1 ? 'none' : `1px solid ${LINE}`,
              color: i === 1 ? '#fff' : NIGHT[1000],
              boxShadow: i === 1 ? `0 30px 80px ${PINK[400]}30` : '0 6px 20px rgba(12,26,52,0.04)',
              position: 'relative', overflow: 'hidden',
            }}>
              {i === 1 && <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
                background: `radial-gradient(ellipse 400px 300px at 100% 0%, ${PINK[400]}25 0%, transparent 60%)` }}/>}
              <div style={{ position: 'relative' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
                  <div>
                    <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, fontWeight: 800, letterSpacing: '-0.015em' }}>{t.brand}</div>
                    <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11.5, opacity: 0.6, marginTop: 3 }}>{t.brandSub}</div>
                  </div>
                  <svg width="22" height="18" viewBox="0 0 22 18" style={{ opacity: i === 1 ? 0.6 : 0.2 }}>
                    <path d="M0 18V11c0-6 4-10 10-11v4c-3.5 1-6 4-6 7h6v7H0zm12 0V11c0-6 4-10 10-11v4c-3.5 1-6 4-6 7h6v7H12z" fill={i === 1 ? PINK[400] : NIGHT[1000]}/>
                  </svg>
                </div>
                <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 15.5, lineHeight: 1.6, fontWeight: 500, marginBottom: 24, opacity: i === 1 ? 0.92 : 1 }}>"{t.quote}"</p>
                <div style={{ display: 'flex', gap: 24, paddingTop: 20, borderTop: `1px solid ${i === 1 ? 'rgba(255,255,255,0.12)' : LINE}`, marginBottom: 16 }}>
                  {t.stats.map(s => (
                    <div key={s.l}>
                      <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 22, letterSpacing: '-0.02em', color: i === 1 ? '#fff' : PINK[500] }}>{s.v}</div>
                      <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, opacity: 0.55, marginTop: 2 }}>{s.l}</div>
                    </div>
                  ))}
                </div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12.5, opacity: 0.7 }}>{t.person}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const PinkIntegrations = () => {
  // Customer logos — single horizontal row, wordmark-only
  const logos = [
    { name: 'F&B chuỗi', sub: 'CAFÉ 600+ STORES', italic: true },
    { name: 'Trà & cà phê', sub: 'TOP 5 VN', italic: false },
    { name: 'Brewery', sub: 'TOP 3 VN', italic: false },
    { name: 'Siêu thị', sub: 'TOP CHAIN', italic: false },
    { name: 'Nhà thuốc', sub: 'CHAIN', italic: false },
    { name: 'Mỹ phẩm', sub: 'CHAIN', italic: false },
    { name: 'Tiện lợi', sub: 'CHAIN', italic: false },
    { name: 'F&B chuỗi', sub: 'GLOBAL', italic: true },
  ];
  return (
    <section style={{ background: '#F6F8FB', padding: '96px 48px', position: 'relative' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', textAlign: 'center' }}>
        <PinkEyebrow style={{ marginBottom: 18 }}>KHÁCH HÀNG</PinkEyebrow>
        <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 48, lineHeight: 1.1, letterSpacing: '-0.03em', color: NIGHT[1000], margin: '0 auto 14px', maxWidth: 820 }}>
          <PinkGradientText gradient={`linear-gradient(90deg, ${PINK[500]}, ${PINK[700]})`}>500+ doanh nghiệp Việt</PinkGradientText> tin dùng CNV Work
        </h2>
        <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, color: INK_SOFT, maxWidth: 640, margin: '0 auto 48px', lineHeight: 1.6 }}>
          Từ chuỗi F&B, bán lẻ đến B2B phân phối — các thương hiệu hàng đầu đang vận hành sales, marketing và CSKH trên CNV Work.
        </p>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 8, flexWrap: 'nowrap',
          borderTop: `1px solid ${LINE}`, borderBottom: `1px solid ${LINE}`,
          padding: '32px 0',
        }}>
          {logos.map((l, i) => (
            <div key={l.name} style={{
              flex: 1, display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center',
              fontFamily: 'Inter, sans-serif',
              color: '#3A4A6E', opacity: 0.72,
              transition: 'opacity .2s, color .2s', cursor: 'default',
              borderLeft: i > 0 ? `1px solid ${LINE}` : 'none',
              padding: '4px 12px',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.opacity = 1; e.currentTarget.style.color = NIGHT[1000]; }}
              onMouseLeave={(e) => { e.currentTarget.style.opacity = 0.72; e.currentTarget.style.color = '#3A4A6E'; }}
            >
              <div style={{
                fontWeight: 800, fontSize: 22, letterSpacing: '-0.02em',
                fontStyle: l.italic ? 'italic' : 'normal',
                lineHeight: 1.1, whiteSpace: 'nowrap',
              }}>{l.name}</div>
              {l.sub && (
                <div style={{
                  fontWeight: 600, fontSize: 9, letterSpacing: '0.18em',
                  marginTop: 4, opacity: 0.7,
                }}>{l.sub}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const PinkFinalCTA = () => (
  <section style={{ background: NIGHT[1000], padding: '140px 48px', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
      background: `radial-gradient(ellipse 1100px 600px at 50% 50%, ${PINK[400]}30 0%, transparent 60%)` }}/>
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: 'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
      backgroundSize: '64px 64px',
      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: 900, margin: '0 auto', textAlign: 'center' }}>
      <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 72, lineHeight: 1.04, letterSpacing: '-0.035em', color: '#fff', margin: '0 0 22px 0' }}>
        Sẵn sàng <PinkGradientText>tăng trưởng</PinkGradientText><br/>với một platform?
      </h2>
      <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 20, color: 'rgba(255,255,255,0.72)', lineHeight: 1.55, margin: '0 auto 40px', maxWidth: 620 }}>
        Demo 30 phút — cho team bạn xem cách CNV Work hoạt động trên dữ liệu thật của chính bạn.
      </p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
        <PinkBtn size="lg">Đặt lịch demo</PinkBtn>
        <PinkOutlineBtn size="lg">Tìm hiểu bảng giá</PinkOutlineBtn>
      </div>
      <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: 'rgba(255,255,255,0.4)', marginTop: 32 }}>
        Doanh nghiệp trên 50 người — liên hệ để được triển khai dùng thử 3 tháng
      </div>
    </div>
  </section>
);

Object.assign(window, { PinkStatsBand, PinkTestimonials, PinkIntegrations, PinkFinalCTA });