// Light surface tokens — match Bang Gia
const CREAM_BG = '#FAF7F4';
const LINE_LIGHT = 'rgba(10,14,26,0.08)';
const INK_DARK = '#0A0E1A';
const INK_MID = 'rgba(10,14,26,0.62)';
const INK_LOW = 'rgba(10,14,26,0.45)';

// ─── HERO (dark) ───
const TichHopHero = () => (
  <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' }}>10 TÍCH HỢP · KHÔNG CẦN CODE</PinkEyebrow>
      <h1 style={{
        fontFamily: 'Inter, sans-serif', fontWeight: 800,
        fontSize: 'clamp(56px, 7vw, 92px)', lineHeight: 1.02, letterSpacing: '-0.04em',
        margin: '0 auto 28px', maxWidth: 1080,
      }}>
        Kết nối những công cụ <br/>
        <PinkGradientText gradient={PINK_CYAN_GRAD}>doanh nghiệp Việt</PinkGradientText> đang dùng
      </h1>
      <p style={{
        fontFamily: 'Inter, sans-serif', fontSize: 19, lineHeight: 1.6,
        color: 'rgba(255,255,255,0.65)', maxWidth: 720, margin: '0 auto 40px',
      }}>
        Zalo, Google Workspace, Facebook, tổng đài VOIP, Mattermost, Mini App — sẵn sàng dùng ngay
        trong CNV Work, không cần đội kỹ thuật.
      </p>

      {/* Logo strip */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 14, flexWrap: 'wrap', maxWidth: 720, margin: '0 auto' }}>
        {INTEGRATIONS.map(it => {
          const Logo = it.Logo;
          return (
            <div key={it.id} style={{
              padding: 8, borderRadius: 12,
              background: 'rgba(255,255,255,0.04)',
              border: '1px solid rgba(255,255,255,0.08)',
              backdropFilter: 'blur(10px)',
            }}>
              <Logo size={40}/>
            </div>
          );
        })}
      </div>
    </div>
  </div>
);

// ─── INTEGRATIONS GRID (light) ───
const TichHopGrid = () => {
  const groups = [
    { id: 'Communication', label: 'Giao tiếp · Inbox', desc: 'Hợp nhất kênh chat, gọi điện, mạng xã hội vào 1 inbox.' },
    { id: 'Productivity',  label: 'Productivity · Tài liệu', desc: 'Quản lý file, hợp đồng, ghi chú họp — đồng bộ ngược về CRM.' },
    { id: 'Marketing',     label: 'Marketing · Automation', desc: 'Phân nhóm, gửi tự động theo hành vi khách hàng.' },
  ];

  return (
    <div style={{ background: CREAM_BG, padding: '120px 64px 100px', color: INK_DARK }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        {groups.map(g => {
          const items = INTEGRATIONS.filter(i => i.group === g.id);
          return (
            <div key={g.id} style={{ marginBottom: 64 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 32, gap: 32 }}>
                <div>
                  <PinkEyebrow style={{ marginBottom: 10 }}>{g.label}</PinkEyebrow>
                  <h2 style={{
                    fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 36,
                    letterSpacing: '-0.025em', lineHeight: 1.1, margin: 0, color: INK_DARK,
                  }}>{g.desc}</h2>
                </div>
                <div style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 600,
                  color: INK_MID, whiteSpace: 'nowrap',
                }}>{items.length} tích hợp</div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
                {items.map(it => {
                  const Logo = it.Logo;
                  return <IntegrationCard key={it.id} it={it} Logo={Logo}/>;
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const IntegrationCard = ({ it, Logo }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative', overflow: 'hidden',
        background: '#fff',
        borderRadius: 20, padding: 28,
        border: `1px solid ${hover ? PINK[400] + '50' : LINE_LIGHT}`,
        boxShadow: hover
          ? `0 20px 50px ${PINK[400]}30, 0 0 0 1px ${PINK[400]}30`
          : '0 1px 3px rgba(10,14,26,0.04)',
        transition: 'all .2s ease',
        cursor: 'pointer',
        transform: hover ? 'translateY(-3px)' : 'none',
      }}>
      {/* glow */}
      <div style={{
        position: 'absolute', top: -100, right: -50, width: 300, height: 300, borderRadius: '50%',
        background: `radial-gradient(circle, ${PINK[400]}${hover ? '20' : '00'} 0%, transparent 65%)`,
        filter: 'blur(40px)', transition: 'opacity .25s', pointerEvents: 'none',
      }}/>
      <div style={{ position: 'relative', display: 'flex', gap: 18, alignItems: 'flex-start' }}>
        <div style={{ transform: 'scale(1.6)', transformOrigin: 'top left', marginRight: 16 }}>
          <Logo size={32}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
            <h3 style={{
              fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 19,
              letterSpacing: '-0.015em', color: INK_DARK, margin: 0,
            }}>{it.name}</h3>
            <span style={{
              padding: '2px 8px', borderRadius: 6,
              background: 'rgba(15,164,108,0.12)', color: '#0FA46C',
              fontFamily: 'Inter, sans-serif', fontSize: 10, fontWeight: 700, letterSpacing: '0.06em',
            }}>SẴN SÀNG</span>
          </div>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.6,
            color: INK_MID, margin: 0,
          }}>{it.desc}</p>
        </div>

        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{
          color: hover ? PINK[500] : INK_LOW,
          transition: 'all .2s', transform: hover ? 'translateX(4px)' : 'none',
          flexShrink: 0,
        }}>
          <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
    </div>
  );
};

// ─── DEEP-DIVE FEATURES (dark accent strip) ───
const TichHopFeatures = () => (
  <div style={{ background: NIGHT[900], padding: '100px 64px', color: '#fff' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 56 }}>
        <PinkEyebrow style={{ marginBottom: 16, justifyContent: 'center' }}>NỀN TẢNG MỞ</PinkEyebrow>
        <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 44, letterSpacing: '-0.03em', lineHeight: 1.05, margin: 0 }}>
          Không chỉ 10 — <PinkGradientText gradient={PINK_CYAN_GRAD}>kết nối được nhiều hơn nữa</PinkGradientText>
        </h2>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {[
          {
            title: 'Open REST API',
            body: 'Tài liệu Swagger đầy đủ — đội kỹ thuật doanh nghiệp tự kết nối ERP, kế toán, e-commerce.',
            stat: '120+', label: 'endpoints',
          },
          {
            title: 'Webhook real-time',
            body: 'Trigger event tới hệ thống của bạn khi có deal mới, ticket, đơn hàng — độ trễ < 200ms.',
            stat: '< 200', label: 'ms latency',
          },
          {
            title: 'Đội triển khai CNV',
            body: 'Hỗ trợ tích hợp tuỳ biến: SAP, Oracle, Misa, Haravan, Shopee, Lazada — không phát sinh phí dev.',
            stat: '60+', label: 'hệ thống đã kết nối',
          },
        ].map((f, i) => (
          <div key={i} style={{
            padding: 32, borderRadius: 20,
            background: NIGHT[1000],
            border: `1px solid rgba(255,255,255,0.08)`,
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              fontFamily: 'Inter, sans-serif', fontSize: 56, fontWeight: 800,
              letterSpacing: '-0.04em', lineHeight: 1, marginBottom: 6,
            }}>
              <PinkGradientText gradient={PINK_CYAN_GRAD}>{f.stat}</PinkGradientText>
            </div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 24 }}>
              {f.label}
            </div>
            <h3 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 20, letterSpacing: '-0.015em', marginBottom: 10 }}>
              {f.title}
            </h3>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.65)' }}>
              {f.body}
            </p>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// ─── CTA ───
const TichHopCTA = () => (
  <div style={{ background: NIGHT[1000], padding: '100px 64px', color: '#fff', textAlign: 'center' }}>
    <div style={{ maxWidth: 720, margin: '0 auto' }}>
      <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 48, letterSpacing: '-0.03em', lineHeight: 1.1, margin: '0 0 20px' }}>
        Cần tích hợp công cụ <PinkGradientText gradient={PINK_CYAN_GRAD}>chưa có trong danh sách?</PinkGradientText>
      </h2>
      <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, lineHeight: 1.6, color: 'rgba(255,255,255,0.65)', marginBottom: 36 }}>
        Đội triển khai CNV hỗ trợ kết nối SAP, Oracle, Misa, Haravan, Shopee, Lazada và mọi
        hệ thống có Open API — không phát sinh phí phát triển trong gói triển khai.
      </p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
        <PinkBtn size="lg">Đặt lịch tư vấn tích hợp</PinkBtn>
        <PinkOutlineBtn size="lg">Xem tài liệu API</PinkOutlineBtn>
      </div>
    </div>
  </div>
);

function App() {
  return (
    <div data-screen-label="Tich Hop">
      <MegaNav current="Tích hợp" dark/>
      <TichHopHero/>
      <TichHopGrid/>
      <TichHopFeatures/>
      <TichHopCTA/>
      <PinkFooter/>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);