// Home — AI Agent section
// Showcasing AI integration in business operations: chat 24/7, lead screening,
// meeting summarization, data analysis, auto QC. Dark bg, pink+cyan accents.

const HomeAIAgent = () => {
  const useCases = [
    {
      icon: 'inbox',
      title: 'Chat 24/7 đa kênh',
      body: 'AI tự trả lời 70% câu hỏi cơ bản trên Zalo OA, Facebook, Web widget. Multi-provider auto-fallback Claude → ChatGPT. Knowledge Base sync Google Docs.',
      stat: '70%',
      statLabel: 'TỰ XỬ LÝ',
    },
    {
      icon: 'target',
      title: 'Lọc & chấm điểm lead',
      body: 'AI đọc hành vi lead (mở email, click ZNS, ghé form) + thông tin công ty → score 0-100, gán cho sales đúng người, ưu tiên hot lead.',
      stat: '3.2x',
      statLabel: 'TỈ LỆ CHỐT',
    },
    {
      icon: 'phone',
      title: 'Tóm tắt cuộc họp',
      body: 'Fireflies bot tự join Google Meet/Zoom → transcript đầy đủ + tóm tắt + action item gán vào task CNV Work. Khỏi note tay.',
      stat: '40h',
      statLabel: 'TIẾT KIỆM/THÁNG',
    },
    {
      icon: 'bar-chart-3',
      title: 'Phân tích bằng tiếng Việt',
      body: 'Data Warehouse + AI Chat: gõ "doanh thu sales Linh tháng 4 so với Q1", AI tự sinh SQL, trả biểu đồ + insight. Không cần BI tool ngoài.',
      stat: '0',
      statLabel: 'CÚ CLICK SQL',
    },
    {
      icon: 'scale',
      title: 'Auto QC chất lượng',
      body: 'Claude Haiku review chat ngẫu nhiên mỗi 30 phút — flag inconsistency, sai chính sách, tone không phù hợp. Leader xem báo cáo per agent.',
      stat: '24/7',
      statLabel: 'GIÁM SÁT',
    },
    {
      icon: 'zap',
      title: 'Workflow trigger',
      body: 'AI đọc context để chọn action: lead VIP → escalate manager, ticket angry → flag urgent, deal sắp chốt → nhắc owner gọi lại. Không phải set rule cứng.',
      stat: '30+',
      statLabel: 'TRIGGER EVENT',
    },
  ];

  return (
    <section style={{ position: 'relative', background: NIGHT[1000], color: '#fff', padding: '120px 64px', overflow: 'hidden' }}>
      {/* Ambient glow */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(ellipse 1100px 600px at 80% 30%, ${PINK[400]}26 0%, transparent 60%), radial-gradient(ellipse 900px 500px at 20% 70%, ${CYAN[500]}1f 0%, transparent 60%)` }}/>

      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
        {/* Hero block */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'center', marginBottom: 80 }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 99,
                background: `${PINK[400]}18`, border: `1px solid ${PINK[400]}40`, marginBottom: 22 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: PINK[400], boxShadow: `0 0 12px ${PINK[400]}` }}/>
              <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: PINK[300] }}>AI AGENT · VẬN HÀNH 24/7</span>
            </div>
            <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(32px, 4.5vw, 52px)', letterSpacing: '-0.03em', lineHeight: 1.06, margin: '0 0 20px' }}>
              AI làm việc cùng team — <PinkGradientText gradient={PINK_CYAN_GRAD}>không thay thế</PinkGradientText>
            </h2>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 18, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, margin: '0 0 28px' }}>
              CNV Work nhúng AI Agent vào mọi module — chat hỗ trợ khách, lọc lead, tóm tắt meeting, phân tích dữ liệu, auto QC chat. Team tập trung vào việc cần judgment; AI lo những việc lặp lại.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <PinkBtn size="lg">Đặt lịch demo AI Agent</PinkBtn>
              <PinkOutlineBtn size="lg" dark onClick={() => window.location.href='/products/inbox-support'}>
                Xem AI làm việc
              </PinkOutlineBtn>
            </div>
          </div>

          {/* Chat mockup */}
          <div style={{
            background: NIGHT[900], border: `1px solid ${PINK[400]}30`,
            borderRadius: 18, overflow: 'hidden',
            boxShadow: `0 30px 80px ${PINK[400]}22, 0 0 0 1px ${PINK[400]}30`,
          }}>
            {/* Header */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 18px', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
              <div style={{ display: 'flex', gap: 6 }}>
                <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#FF5F56' }}/>
                <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#FFBD2E' }}/>
                <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#27C93F' }}/>
              </div>
              <div style={{ marginLeft: 8, display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'Inter, sans-serif', fontSize: 11, color: 'rgba(255,255,255,0.55)' }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#10B981' }}/>
                AI Agent đang online · KB synced 4 docs
              </div>
            </div>

            {/* Conversation */}
            <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 12, background: NIGHT[1000] }}>
              {/* User message */}
              <div style={{ alignSelf: 'flex-start', maxWidth: '80%', background: 'rgba(255,255,255,0.06)', padding: '10px 14px', borderRadius: '12px 12px 12px 4px' }}>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: '#fff', lineHeight: 1.5 }}>
                  Mình có team 28 người, ngân sách CRM ~30tr/tháng. Tư vấn gói nào hợp lý nhất ạ?
                </div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, color: 'rgba(255,255,255,0.4)', marginTop: 4 }}>Khách hàng · 14:32</div>
              </div>

              {/* AI thinking */}
              <div style={{ alignSelf: 'flex-end', maxWidth: '85%' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6, fontFamily: 'Inter, sans-serif', fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: PINK[300] }}>
                  <Icon name="bot" size={12}/> CNV AGENT · TRA KB
                </div>
                <div style={{
                  background: `linear-gradient(135deg, ${PINK[400]}22, ${CYAN[500]}22)`,
                  border: `1px solid ${PINK[400]}40`,
                  padding: '12px 14px', borderRadius: '12px 12px 4px 12px',
                  fontFamily: 'Inter, sans-serif', fontSize: 13, color: '#fff', lineHeight: 1.55,
                }}>
                  Với 28 user + budget 30tr/tháng, mình recommend <strong style={{ color: PINK[300] }}>Gói All-in-one On-Cloud</strong> — 60.000đ/user/tháng × 28 = <strong>1.68tr/tháng</strong> (gói 1 năm còn 19.5tr/tháng cả năm sau giảm 20%).
                  <br/><br/>
                  Còn dư budget — mình gợi ý thêm <strong style={{ color: CYAN[500] }}>add-on Chat đa kênh</strong> 5 page = +1.75tr/tháng. Bạn muốn book demo 30 phút với đội sales không?
                </div>
                <div style={{ display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
                  {['📅 Book demo', '💬 Hỏi tiếp', '📞 Gọi tôi'].map((b, i) => (
                    <button key={i} disabled style={{
                      background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.12)',
                      color: '#fff', padding: '6px 12px', borderRadius: 99,
                      fontFamily: 'Inter, sans-serif', fontSize: 11.5, fontWeight: 600, cursor: 'pointer',
                    }}>{b}</button>
                  ))}
                </div>
              </div>

              {/* Typing indicator */}
              <div style={{ alignSelf: 'flex-start', padding: '8px 12px', background: 'rgba(255,255,255,0.04)', borderRadius: 99, display: 'inline-flex', alignItems: 'center', gap: 4, width: 'fit-content' }}>
                {[0, 1, 2].map(i => (
                  <span key={i} style={{
                    width: 5, height: 5, borderRadius: '50%', background: 'rgba(255,255,255,0.5)',
                    animation: `cnvTyping 1.4s ease-in-out ${i * 0.2}s infinite`,
                  }}/>
                ))}
              </div>
              <style>{`@keyframes cnvTyping { 0%,80%,100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }`}</style>
            </div>
          </div>
        </div>

        {/* Section header */}
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: PINK[300], marginBottom: 12 }}>6 USE CASE PHỔ BIẾN</div>
          <h3 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(24px, 3.2vw, 36px)', letterSpacing: '-0.025em', lineHeight: 1.1, margin: 0 }}>
            AI Agent giúp bạn <PinkGradientText gradient={PINK_CYAN_GRAD}>vận hành tự động</PinkGradientText> ở đâu?
          </h3>
        </div>

        {/* Use case grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {useCases.map((u, i) => (
            <div key={i} style={{
              background: 'rgba(255,255,255,0.03)',
              border: '1px solid rgba(255,255,255,0.08)',
              borderRadius: 16,
              padding: '26px 24px',
              display: 'flex', flexDirection: 'column', gap: 12,
              transition: 'transform .2s, border-color .2s, background .2s',
            }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-4px)';
                e.currentTarget.style.borderColor = `${PINK[400]}55`;
                e.currentTarget.style.background = `${PINK[400]}0d`;
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0)';
                e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
                e.currentTarget.style.background = 'rgba(255,255,255,0.03)';
              }}>
              {/* Top row: icon + stat */}
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{
                  width: 42, height: 42, borderRadius: 11,
                  background: `${PINK[400]}20`, color: PINK[300],
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  border: `1px solid ${PINK[400]}40`,
                }}>
                  <Icon name={u.icon} size={20}/>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em',
                    background: PINK_CYAN_GRAD, WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent',
                    lineHeight: 1 }}>{u.stat}</div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.12em', color: 'rgba(255,255,255,0.5)', marginTop: 4 }}>{u.statLabel}</div>
                </div>
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, fontWeight: 800, letterSpacing: '-0.015em', color: '#fff' }}>{u.title}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'rgba(255,255,255,0.62)', lineHeight: 1.55 }}>{u.body}</div>
            </div>
          ))}
        </div>

        {/* Bottom callout */}
        <div style={{
          marginTop: 56, padding: '24px 32px',
          background: `linear-gradient(135deg, ${PINK[400]}15, ${CYAN[500]}10)`,
          border: `1px solid ${PINK[400]}40`,
          borderRadius: 16,
          display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap', justifyContent: 'space-between',
        }}>
          <div style={{ flex: 1, minWidth: 280 }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 18, fontWeight: 800, color: '#fff', marginBottom: 4 }}>
              Multi-provider auto-fallback · prompt caching giảm 70% chi phí AI
            </div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'rgba(255,255,255,0.65)', lineHeight: 1.5 }}>
              Claude Opus → ChatGPT → Claude API → OpenAI — không bao giờ down. Tự gắn API key của bạn hoặc dùng pool CNV.
            </div>
          </div>
          <PinkBtn size="md" onClick={() => window.location.href='/products/inbox-support'}>Tìm hiểu AI Agent →</PinkBtn>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { HomeAIAgent });