// HubSpot-style feature showcase for the pink/black landing option.
// Tabbed product tour + platform hub diagram + customer carousel.

// Mobile breakpoint hook — used by PinkHero + PlatformHub
const useIsMobile = (bp = 760) => {
  const [m, setM] = React.useState(typeof window !== 'undefined' && window.innerWidth < bp);
  React.useEffect(() => {
    const fn = () => setM(window.innerWidth < bp);
    window.addEventListener('resize', fn);
    return () => window.removeEventListener('resize', fn);
  }, [bp]);
  return m;
};

// ───────────── PINK HERO ─────────────
const PinkAurora = () => (
  <>
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      background: `radial-gradient(ellipse 900px 600px at 70% 30%, ${PINK[400]}33 0%, transparent 60%),
                   radial-gradient(ellipse 700px 500px at 15% 80%, ${CYAN[500]}22 0%, transparent 60%)`,
    }}/>
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: 'linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px)',
      backgroundSize: '56px 56px',
      maskImage: 'radial-gradient(ellipse at center, black 40%, transparent 85%)',
      WebkitMaskImage: 'radial-gradient(ellipse at center, black 40%, transparent 85%)',
    }}/>
  </>
);

// Orb-style hero visual: pink/black planet with connected product chips
const HubOrb = ({ isMobile }) => {
  const size = isMobile ? 300 : 540;
  // Desktop: 4 product chips. Mobile: 3 stats chip (đè lên orb thay vì xếp riêng).
  const desktopChips = [
    { label: 'Sales', sub: '+32 deals', color: PINK[400], top: -20, left: 40 },
    { label: 'Marketing', sub: '×6.1 open', color: CYAN[500], top: 120, right: -40 },
    { label: 'Support', sub: 'SLA 98%', color: '#FFC4D3', bottom: 100, left: -40 },
    { label: 'HR', sub: '142 on-time', color: GREEN[400], bottom: -20, right: 70 },
  ];
  const mobileStats = [
    { label: 'Đang vận hành', sub: '500+ DN', color: PINK[400], top: -16, left: -8 },
    { label: 'Khách cuối',    sub: '2M+',     color: CYAN[500], top: 110, right: -10 },
    { label: 'Go-live',       sub: '14 ngày', color: '#FFC4D3', bottom: -10, left: 30 },
  ];
  const visibleChips = isMobile ? mobileStats : desktopChips;
  return (
    <div style={{ position: 'relative', width: size, height: size, margin: '0 auto' }}>
      <div style={{ position: 'absolute', inset: -80, background: `radial-gradient(circle, ${PINK[400]}40 0%, transparent 60%)`, filter: 'blur(40px)' }}/>
      <div style={{
        position: 'absolute', inset: isMobile ? 30 : 60, borderRadius: '50%',
        background: `radial-gradient(circle at 35% 28%, ${PINK[200]} 0%, ${PINK[400]} 22%, ${PINK[900]} 55%, ${NIGHT[950]} 82%, #000 100%)`,
        boxShadow: `inset -50px -50px 140px rgba(0,0,0,0.7), inset 30px 30px 80px ${PINK[200]}55, 0 50px 100px ${PINK[400]}35`,
      }}/>
      <div style={{
        position: 'absolute', top: size * 0.22, right: size * 0.22, width: size * 0.18, height: size * 0.18, borderRadius: '50%',
        background: `radial-gradient(circle, ${CYAN[500]}80 0%, transparent 70%)`, filter: 'blur(18px)',
      }}/>
      {!isMobile && (
        <svg width={size} height={size} style={{ position: 'absolute', inset: 0 }}>
          <defs>
            <linearGradient id="hubRing" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0" stopColor={PINK[400]} stopOpacity="0.9"/>
              <stop offset="0.5" stopColor={PINK[200]} stopOpacity="0.6"/>
              <stop offset="1" stopColor={CYAN[500]} stopOpacity="0.9"/>
            </linearGradient>
          </defs>
          <ellipse cx="270" cy="270" rx="235" ry="72" fill="none" stroke="url(#hubRing)" strokeWidth="1.5" transform="rotate(-22 270 270)" opacity="0.75"/>
          <ellipse cx="270" cy="270" rx="250" ry="94" fill="none" stroke="url(#hubRing)" strokeWidth="1" transform="rotate(28 270 270)" opacity="0.45"/>
        </svg>
      )}
      {visibleChips.map(c => (
        <div key={c.label} style={{
          position: 'absolute', ...(c.top !== undefined && { top: c.top }), ...(c.bottom !== undefined && { bottom: c.bottom }),
          ...(c.left !== undefined && { left: c.left }), ...(c.right !== undefined && { right: c.right }),
          padding: isMobile ? '8px 12px' : '11px 16px', borderRadius: 14,
          background: 'rgba(20,16,32,0.6)', backdropFilter: 'blur(16px)',
          border: `1px solid ${c.color}40`,
          fontFamily: 'Inter, sans-serif', color: '#fff',
          display: 'flex', alignItems: 'center', gap: 10, whiteSpace: 'nowrap',
          boxShadow: `0 10px 30px rgba(0,0,0,0.35)`,
        }}>
          <span style={{ width: 8, height: 8, borderRadius: 99, background: c.color, boxShadow: `0 0 10px ${c.color}` }}/>
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.15 }}>
            <div style={{ fontSize: 10, opacity: 0.55, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{c.label}</div>
            <div style={{ fontWeight: 700, fontSize: isMobile ? 12 : 14 }}>{c.sub}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

const PinkHero = () => {
  const isMobile = useIsMobile();
  return (
    <section style={{
      position: 'relative', minHeight: isMobile ? 'auto' : 780, overflow: 'hidden',
      background: NIGHT[1000],
      padding: isMobile ? '48px 20px 64px' : '96px 48px',
      display: 'flex', alignItems: 'center',
    }}>
      <PinkAurora/>
      <div style={{
        position: 'relative', width: '100%', maxWidth: 1312, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.2fr 1fr',
        gap: isMobile ? 40 : 64,
        alignItems: 'center',
      }}>
        <div style={{ textAlign: isMobile ? 'center' : 'left' }}>
          <PinkEyebrow style={{ marginBottom: 22, justifyContent: isMobile ? 'center' : 'flex-start' }}>Nền tảng CRM + vận hành · ALL-IN-ONE</PinkEyebrow>
          <h1 style={{
            fontFamily: 'Inter, sans-serif', fontWeight: 800,
            fontSize: isMobile ? 'clamp(34px, 9vw, 48px)' : 80,
            lineHeight: 1.05, letterSpacing: '-0.035em',
            color: '#fff', margin: '0 0 20px 0',
          }}>
            Sáu đội chuyên môn.<br/>
            <PinkGradientText>Một workspace</PinkGradientText>.<br/>
            Một dữ liệu,<br/>
            <PinkGradientText gradient={PINK_CYAN_GRAD}>toàn công ty</PinkGradientText>.
          </h1>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: isMobile ? 16 : 20,
            lineHeight: 1.55, fontWeight: 400,
            color: 'rgba(255,255,255,0.72)', margin: isMobile ? '0 auto 28px' : '0 0 36px 0',
            maxWidth: 560,
          }}>
            Sales, marketing, chăm sóc, triển khai, HR, báo cáo — tất cả trên một nền tảng kết nối. Dữ liệu chung, quy trình chung, đội vận hành tăng tốc 2-3× nhờ dùng chung dataset.
          </p>
          <div style={{ display: 'flex', gap: 12, marginBottom: isMobile ? 16 : 32, flexWrap: 'wrap', justifyContent: isMobile ? 'center' : 'flex-start' }}>
            <PinkBtn size={isMobile ? 'md' : 'lg'}>Đăng ký demo miễn phí</PinkBtn>
            <PinkOutlineBtn size={isMobile ? 'md' : 'lg'}>Xem bảng giá</PinkOutlineBtn>
          </div>
          {/* Stats row — chỉ hiện desktop. Mobile đã đè 3 stats lên HubOrb thay thế. */}
          {!isMobile && (
            <div style={{
              display: 'flex', gap: 36, fontFamily: 'Inter, sans-serif',
              fontSize: 13, color: 'rgba(255,255,255,0.55)', flexWrap: 'wrap',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 6, height: 6, borderRadius: 99, background: PINK[400] }}/>
                <b style={{ color: '#fff', fontWeight: 600 }}>500+ DN</b>&nbsp;đang vận hành
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 6, height: 6, borderRadius: 99, background: CYAN[500] }}/>
                <b style={{ color: '#fff', fontWeight: 600 }}>2M+</b>&nbsp;khách hàng cuối
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 6, height: 6, borderRadius: 99, background: '#FFC4D3' }}/>
                <b style={{ color: '#fff', fontWeight: 600 }}>14 ngày</b>&nbsp;go-live
              </div>
            </div>
          )}
        </div>
        <div><HubOrb isMobile={isMobile}/></div>
      </div>
    </section>
  );
};

// ───────────── PLATFORM DIAGRAM ─────────────
const PlatformHub = () => {
  const isMobile = useIsMobile();
  const spokes = [
    { id: 'sales', label: 'Sales CRM', desc: 'Pipeline · báo giá đa cấp · commission · 120+ API endpoint' },
    { id: 'mkt', label: 'Marketing', desc: 'Campaign · automation · Zalo Mini App · ZNS native' },
    { id: 'support', label: 'Support', desc: 'Inbox đa kênh · SLA timer · ticket auto-route · widget' },
    { id: 'fulfill', label: 'Fulfillment', desc: 'Kanban triển khai · auto-assign · giao hàng · tài sản' },
    { id: 'hr', label: 'Nhân sự', desc: 'Chấm công GPS · hợp đồng · bậc lương · OT · nghỉ phép' },
    { id: 'report', label: 'Báo cáo', desc: '20+ dashboard real-time · drill-down theo chi nhánh / SKU' },
  ];
  return (
    <section style={{ background: '#fff', padding: isMobile ? '64px 20px' : '112px 48px', position: 'relative' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', textAlign: 'center' }}>
        <PinkEyebrow style={{ marginBottom: 18, justifyContent: 'center' }}>CNV WORK PLATFORM</PinkEyebrow>
        <h2 style={{
          fontFamily: 'Inter, sans-serif', fontWeight: 800,
          fontSize: isMobile ? 'clamp(28px, 7vw, 40px)' : 56,
          lineHeight: 1.1, letterSpacing: '-0.03em',
          color: NIGHT[1000], margin: '0 auto 20px', maxWidth: 860,
        }}>
          6 module. Một <PinkGradientText gradient={`linear-gradient(90deg, ${PINK[500]}, ${PINK[700]})`}>dữ liệu chung</PinkGradientText>.<br/>Một trải nghiệm khách hàng.
        </h2>
        <p style={{
          fontFamily: 'Inter, sans-serif', fontSize: isMobile ? 15 : 18,
          lineHeight: 1.6, color: INK_SOFT,
          margin: isMobile ? '0 auto 40px' : '0 auto 72px', maxWidth: 640,
        }}>
          Không còn tool rời rạc. Dữ liệu chảy tự nhiên giữa các đội — mỗi đội vẫn dùng công cụ chuyên dụng của mình.
        </p>

        {isMobile ? (
          // Mobile: stack 6 cards 1 col, không vẽ hub diagram
          <div>
            {/* Center logo trên top */}
            <div style={{
              width: 140, height: 140, borderRadius: '50%', margin: '0 auto 32px',
              background: `radial-gradient(circle at 35% 30%, ${PINK[200]} 0%, ${PINK[400]} 35%, ${PINK[700]} 75%, ${NIGHT[950]} 100%)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: `0 30px 80px ${PINK[400]}50, inset -20px -20px 40px rgba(0,0,0,0.4)`,
              color: '#fff',
            }}>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 9, letterSpacing: '0.2em', opacity: 0.7, textTransform: 'uppercase' }}>CNV</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.1 }}>Work</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 9, letterSpacing: '0.15em', opacity: 0.7, marginTop: 4, textTransform: 'uppercase' }}>Platform</div>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              {spokes.map(sp => (
                <div key={sp.id} style={{
                  background: '#fff', border: `1px solid ${LINE}`, borderRadius: 12,
                  padding: '14px 16px', boxShadow: '0 6px 20px rgba(12,26,52,0.06)',
                  textAlign: 'left',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                    <span style={{ width: 8, height: 8, borderRadius: 99, background: PINK[400] }}/>
                    <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 700, color: NIGHT[1000] }}>{sp.label}</div>
                  </div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11.5, color: INK_SOFT, lineHeight: 1.4 }}>{sp.desc}</div>
                </div>
              ))}
            </div>
          </div>
        ) : (
          // Desktop: hub diagram 900x560 absolute spokes
          <div style={{ position: 'relative', height: 560, maxWidth: 900, margin: '0 auto' }}>
            <svg width="900" height="560" style={{ position: 'absolute', inset: 0 }} viewBox="0 0 900 560">
              <defs>
                <linearGradient id="spokeLine" x1="0" x2="1">
                  <stop offset="0" stopColor={PINK[400]} stopOpacity="0.7"/>
                  <stop offset="1" stopColor={PINK[400]} stopOpacity="0.1"/>
                </linearGradient>
              </defs>
              {[
                { x2: 170, y2: 140 }, { x2: 730, y2: 140 },
                { x2: 120, y2: 330 }, { x2: 780, y2: 330 },
                { x2: 230, y2: 490 }, { x2: 670, y2: 490 },
              ].map((s, i) => (
                <line key={i} x1="450" y1="280" x2={s.x2} y2={s.y2} stroke="url(#spokeLine)" strokeWidth="1.5" strokeDasharray="5 5"/>
              ))}
            </svg>
            <div style={{
              position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
              width: 180, height: 180, borderRadius: '50%',
              background: `radial-gradient(circle at 35% 30%, ${PINK[200]} 0%, ${PINK[400]} 35%, ${PINK[700]} 75%, ${NIGHT[950]} 100%)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: `0 30px 80px ${PINK[400]}50, inset -20px -20px 40px rgba(0,0,0,0.4)`,
              color: '#fff',
            }}>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, letterSpacing: '0.2em', opacity: 0.7, textTransform: 'uppercase' }}>CNV</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 28, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.1 }}>Work</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, letterSpacing: '0.15em', opacity: 0.7, marginTop: 4, textTransform: 'uppercase' }}>Platform</div>
              </div>
            </div>
            {[
              { top: 60, left: 20 }, { top: 60, right: 20 },
              { top: 260, left: -40 }, { top: 260, right: -40 },
              { bottom: 20, left: 120 }, { bottom: 20, right: 120 },
            ].map((pos, i) => (
              <div key={spokes[i].id} style={{
                position: 'absolute', ...pos, width: 220,
                background: '#fff', border: `1px solid ${LINE}`, borderRadius: 14,
                padding: '18px 20px', boxShadow: '0 16px 40px rgba(12,26,52,0.08)',
                textAlign: 'left',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                  <span style={{ width: 10, height: 10, borderRadius: 99, background: PINK[400] }}/>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 700, color: NIGHT[1000], letterSpacing: '-0.015em' }}>{spokes[i].label}</div>
                </div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12.5, color: INK_SOFT, lineHeight: 1.45 }}>{spokes[i].desc}</div>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
};

Object.assign(window, { PinkHero, PlatformHub, useIsMobile });