// Marketing peak: Manifesto (huge type + scrolling industries) + Benefit pillars (4 cards).

const PinkManifesto = () => {
  const industries = ['F&B chuỗi', 'Bán lẻ đa kênh', 'B2B phân phối', 'Dịch vụ · Spa', 'Giáo dục', 'E-commerce', 'Enterprise', 'Healthcare', 'Real estate', 'Logistics'];
  const isMobile = (window.useIsMobile || (() => false))();
  return (
    <section style={{ background: NIGHT[1000], padding: '160px 48px 140px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(ellipse 1200px 800px at 50% 50%, ${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: 1400, margin: '0 auto', textAlign: 'center' }}>
        <PinkEyebrow style={{ marginBottom: 28 }}>THE CNV MANIFESTO</PinkEyebrow>
        <h2 style={{
          fontFamily: 'Inter, sans-serif', fontWeight: 800,
          fontSize: 'clamp(64px, 9vw, 128px)', lineHeight: 0.96, letterSpacing: '-0.045em',
          color: '#fff', margin: '0 auto',
        }}>
          Doanh nghiệp Việt<br/>
          <span style={{ color: 'rgba(255,255,255,0.35)' }}>không cần thêm một</span><br/>
          <PinkGradientText gradient={PINK_CYAN_GRAD}>tool nữa</PinkGradientText>.<br/>
          <span style={{ color: 'rgba(255,255,255,0.35)' }}>Cần một</span> <PinkGradientText>platform</PinkGradientText>.
        </h2>
        <p style={{
          fontFamily: 'Inter, sans-serif', fontSize: 20, lineHeight: 1.55, fontWeight: 500,
          color: 'rgba(255,255,255,0.7)', margin: '56px auto 0', maxWidth: 780,
        }}>
          CNV Work được xây dựng để thay thế 5-7 phần mềm rời rạc bạn đang dùng. Một đăng nhập, một dữ liệu, một bill.
        </p>
      </div>
      {isMobile ? (
        // Mobile: pill tĩnh wrap 2-3 col — không animation, gọn
        <div style={{ position: 'relative', marginTop: 48, display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center', maxWidth: 520, marginLeft: 'auto', marginRight: 'auto' }}>
          {industries.map((ind, i) => (
            <span key={i} style={{
              fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 600,
              padding: '8px 14px', borderRadius: 99,
              background: 'rgba(255,255,255,0.04)',
              border: `1px solid rgba(255,255,255,0.1)`,
              color: 'rgba(255,255,255,0.75)',
              whiteSpace: 'nowrap',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: 99, background: PINK[400] }}/>
              {ind}
            </span>
          ))}
        </div>
      ) : (
        // Desktop: marquee infinite scroll như cũ
        <div style={{ position: 'relative', marginTop: 100, overflow: 'hidden', maskImage: 'linear-gradient(90deg, transparent, black 15%, black 85%, transparent)', WebkitMaskImage: 'linear-gradient(90deg, transparent, black 15%, black 85%, transparent)' }}>
          <style>{`@keyframes scrollX { from { transform: translateX(0); } to { transform: translateX(-50%); } }`}</style>
          <div style={{ display: 'flex', gap: 48, whiteSpace: 'nowrap', width: 'max-content', animation: 'scrollX 36s linear infinite' }}>
            {[...industries, ...industries, ...industries].map((ind, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 48 }}>
                <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 48, fontWeight: 800, letterSpacing: '-0.025em', color: 'rgba(255,255,255,0.08)' }}>{ind}</span>
                <span style={{ width: 8, height: 8, borderRadius: 99, background: PINK[400], flexShrink: 0 }}/>
              </div>
            ))}
          </div>
        </div>
      )}
    </section>
  );
};

const BenefitPillars = () => {
  const pillars = [
    {
      tag: '01',
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <path d="M4 20l6-6 5 5 9-10" stroke="url(#pillarG1)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M18 9h6v6" stroke="url(#pillarG1)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          <defs><linearGradient id="pillarG1" x1="0" x2="1"><stop offset="0" stopColor="#FF4E7D"/><stop offset="1" stopColor="#FFC4D3"/></linearGradient></defs>
        </svg>
      ),
      title: 'Tăng doanh thu',
      accent: 'từ khách cũ',
      body: 'Loyalty, automation ZNS và CRM giúp khách hàng quay lại nhiều hơn. Mỗi đơn hàng sau chi phí gần bằng 0.',
      stat: '×2.3',
      statLabel: 'repeat rate trung bình',
      story: 'Một chuỗi cà phê 700+ cửa hàng tăng tỷ lệ khách quay lại ×2.3 trong 6 tháng.',
    },
    {
      tag: '02',
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <path d="M14 4v20M6 10c0-3 3-5 8-5s8 2 8 5c0 2-1 3-4 4l-8 2c-3 1-4 2-4 4 0 3 3 5 8 5s8-2 8-5" stroke="url(#pillarG2)" strokeWidth="2.2" strokeLinecap="round"/>
          <defs><linearGradient id="pillarG2" x1="0" x2="1"><stop offset="0" stopColor="#FF4E7D"/><stop offset="1" stopColor="#FFC4D3"/></linearGradient></defs>
        </svg>
      ),
      title: 'Giảm chi phí',
      accent: 'vận hành',
      body: 'Gộp 5-7 phần mềm về một nền tảng. Một bill, một đội support, một quy trình thống nhất cho toàn công ty.',
      stat: '₫280M',
      statLabel: 'tiết kiệm/năm (trung bình)',
      story: 'Khách hàng trung bình thay thế 4-6 công cụ khi chuyển sang CNV Work.',
    },
    {
      tag: '03',
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <circle cx="14" cy="14" r="10" stroke="url(#pillarG3)" strokeWidth="2.2"/>
          <path d="M14 8v6l4 2" stroke="url(#pillarG3)" strokeWidth="2.2" strokeLinecap="round"/>
          <defs><linearGradient id="pillarG3" x1="0" x2="1"><stop offset="0" stopColor="#FF4E7D"/><stop offset="1" stopColor="#FFC4D3"/></linearGradient></defs>
        </svg>
      ),
      title: 'Tiết kiệm',
      accent: 'thời gian đội',
      body: 'Không còn nhập liệu thủ công. Automation thay thế 60% thao tác lặp đi lặp lại của sales và CSKH.',
      stat: '−60%',
      statLabel: 'giờ vận hành mỗi tuần',
      story: 'Một thương hiệu bia top 3 VN onboard 3,000 điểm bán trong 14 ngày — trước đây cần 4 tháng.',
    },
    {
      tag: '04',
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <rect x="4" y="14" width="4" height="10" rx="1" stroke="url(#pillarG4)" strokeWidth="2.2"/>
          <rect x="12" y="8" width="4" height="16" rx="1" stroke="url(#pillarG4)" strokeWidth="2.2"/>
          <rect x="20" y="4" width="4" height="20" rx="1" stroke="url(#pillarG4)" strokeWidth="2.2"/>
          <defs><linearGradient id="pillarG4" x1="0" x2="1"><stop offset="0" stopColor="#FF4E7D"/><stop offset="1" stopColor="#FFC4D3"/></linearGradient></defs>
        </svg>
      ),
      title: 'Ra quyết định',
      accent: 'bằng dữ liệu',
      body: '20+ dashboard real-time — doanh thu, forecast, SLA, hiệu suất đội — cập nhật liên tục, không chờ cuối tháng.',
      stat: '−4 ngày',
      statLabel: 'chu kỳ báo cáo tuần',
      story: 'Một chuỗi F&B 200 cửa hàng giảm 4 ngày chu kỳ báo cáo — view 360° theo chi nhánh, SKU, khung giờ.',
    },
  ];
  return (
    <section style={{ background: '#fff', padding: '120px 48px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 72 }}>
          <PinkEyebrow style={{ marginBottom: 18 }}>GIÁ TRỊ THỰC</PinkEyebrow>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 56, lineHeight: 1.08, letterSpacing: '-0.03em', color: NIGHT[1000], margin: '0 auto 16px', maxWidth: 820 }}>
            Bốn lý do doanh nghiệp chọn <PinkGradientText gradient={`linear-gradient(90deg, ${PINK[500]}, ${PINK[700]})`}>CNV Work</PinkGradientText>
          </h2>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 18, color: INK_SOFT, maxWidth: 640, margin: '0 auto', lineHeight: 1.6 }}>
            Không phải một danh sách tính năng — đây là những kết quả cụ thể khách hàng đo được sau 3-6 tháng.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
          {pillars.map((p, i) => (
            <div key={i} style={{
              padding: 40, background: '#F6F8FB', border: `1px solid ${LINE}`, borderRadius: 20,
              position: 'relative', overflow: 'hidden',
              transition: 'all .25s ease',
            }}
            onMouseEnter={e => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.boxShadow = `0 30px 70px ${PINK[400]}18`; e.currentTarget.style.borderColor = `${PINK[400]}40`; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#F6F8FB'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = LINE; }}>
              <div style={{ position: 'absolute', top: 32, right: 40, fontFamily: 'Inter, sans-serif', fontSize: 56, fontWeight: 800, color: 'rgba(255,78,125,0.08)', letterSpacing: '-0.03em', lineHeight: 1 }}>{p.tag}</div>
              <div style={{ width: 56, height: 56, borderRadius: 14, background: `linear-gradient(135deg, ${PINK[100]}, ${PINK[50]})`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24 }}>
                {p.icon}
              </div>
              <h3 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 32, lineHeight: 1.15, letterSpacing: '-0.025em', color: NIGHT[1000], margin: '0 0 14px 0', maxWidth: 360 }}>
                {p.title} <PinkGradientText gradient={`linear-gradient(90deg, ${PINK[500]}, ${PINK[700]})`}>{p.accent}</PinkGradientText>
              </h3>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 15.5, lineHeight: 1.6, color: INK_SOFT, margin: '0 0 28px 0', maxWidth: 440 }}>{p.body}</p>
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 24, paddingTop: 24, borderTop: `1px solid ${LINE}` }}>
                <div style={{ flexShrink: 0 }}>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 40, letterSpacing: '-0.025em', lineHeight: 1 }}>
                    <PinkGradientText gradient={`linear-gradient(90deg, ${PINK[500]}, ${PINK[700]})`}>{p.stat}</PinkGradientText>
                  </div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11.5, color: INK_FAINT, marginTop: 6, letterSpacing: '0.02em' }}>{p.statLabel}</div>
                </div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, lineHeight: 1.5, color: INK_SOFT, fontStyle: 'italic', flex: 1, paddingLeft: 24, borderLeft: `1px solid ${LINE}` }}>
                  "{p.story}"
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { PinkManifesto, BenefitPillars });