// CustomizeAndAPI — landing-hub section that pitches:
//   1) Tùy biến theo nghiệp vụ
//   2) Open API + Webhook đầy đủ
// NIGHT background to match Hero / FinalCTA rhythm.

const CustomizeAndAPI = () => {
  const _PINK = window.PINK; const _NIGHT = window.NIGHT;
  const _PinkEyebrow = window.PinkEyebrow; const _PinkGradientText = window.PinkGradientText;
  const _PinkBtn = window.PinkBtn; const _PinkOutlineBtn = window.PinkOutlineBtn;

  const capabilities = [
    {
      title: 'Custom field & object',
      desc: 'Khai báo trường dữ liệu, đối tượng (Contact, Order, Ticket…) đúng nghiệp vụ — không cần chờ vendor.',
      icon: (
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.7">
          <rect x="3" y="4" width="18" height="4" rx="1"/>
          <rect x="3" y="10" width="18" height="4" rx="1"/>
          <rect x="3" y="16" width="12" height="4" rx="1"/>
        </svg>
      ),
    },
    {
      title: 'Workflow & automation',
      desc: 'Kéo-thả luồng phê duyệt, gán việc, escalation, SLA — phù hợp F&B, bán lẻ, B2B.',
      icon: (
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.7">
          <circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="6" r="2.5"/>
          <circle cx="12" cy="18" r="2.5"/>
          <path d="M6 8.5v3a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-3M12 13.5v2"/>
        </svg>
      ),
    },
    {
      title: 'Open REST API · 120+ endpoints',
      desc: 'Đọc / ghi mọi tài nguyên: contact, deal, ticket, message, order. OAuth2 + API key.',
      icon: (
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.7">
          <path d="M9 4 5 8l4 4M15 12l4 4-4 4M14 4l-4 16"/>
        </svg>
      ),
    },
    {
      title: 'Webhook & SDK',
      desc: 'Nhận event real-time (<200ms). SDK chính chủ: Node.js, PHP, Python, Java.',
      icon: (
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.7">
          <path d="M11 7a4 4 0 0 1 7.5 2c0 1.5-.8 2.6-2 3.3M5 13a4 4 0 0 0 4 4h2M9 11l-4 4 4 4"/>
          <circle cx="13" cy="7" r="1.5"/>
        </svg>
      ),
    },
  ];

  // Code snippet — realistic POST to deals endpoint
  const codeLines = [
    { c: '#7280A8', t: '// Tạo deal mới khi khách hàng inbox Zalo OA' },
    { t: '' },
    {
      parts: [
        { c: '#FF688E', t: 'POST' },
        { c: '#FFFFFF', t: ' https://api.cnv.vn/' },
        { c: '#00D9FF', t: 'v1/deals' },
      ],
    },
    {
      parts: [
        { c: '#7280A8', t: 'Authorization: ' },
        { c: '#FFC4D3', t: 'Bearer cnv_live_••••' },
      ],
    },
    { t: '' },
    { c: '#FFFFFF', t: '{' },
    {
      parts: [
        { c: '#FFFFFF', t: '  "' },
        { c: '#FF688E', t: 'pipeline_id' },
        { c: '#FFFFFF', t: '": ' },
        { c: '#00D9FF', t: '"sales_b2b"' },
        { c: '#FFFFFF', t: ',' },
      ],
    },
    {
      parts: [
        { c: '#FFFFFF', t: '  "' },
        { c: '#FF688E', t: 'contact' },
        { c: '#FFFFFF', t: '": { "' },
        { c: '#FF688E', t: 'phone' },
        { c: '#FFFFFF', t: '": ' },
        { c: '#00D9FF', t: '"+84903···"' },
        { c: '#FFFFFF', t: ' },' },
      ],
    },
    {
      parts: [
        { c: '#FFFFFF', t: '  "' },
        { c: '#FF688E', t: 'amount' },
        { c: '#FFFFFF', t: '": ' },
        { c: '#FFC4D3', t: '12500000' },
        { c: '#FFFFFF', t: ',' },
      ],
    },
    {
      parts: [
        { c: '#FFFFFF', t: '  "' },
        { c: '#FF688E', t: 'custom' },
        { c: '#FFFFFF', t: '": { "' },
        { c: '#FF688E', t: 'don_vi_kd' },
        { c: '#FFFFFF', t: '": ' },
        { c: '#00D9FF', t: '"HCM-Q1"' },
        { c: '#FFFFFF', t: ' }' },
      ],
    },
    { c: '#FFFFFF', t: '}' },
    { t: '' },
    { c: '#7280A8', t: '// → 201 Created · webhook deal.created phát trong 180ms' },
  ];

  const renderLine = (line, i) => {
    if (line.parts) {
      return (
        <div key={i} style={{ minHeight: 22 }}>
          {line.parts.map((p, j) => (<span key={j} style={{ color: p.c }}>{p.t}</span>))}
        </div>
      );
    }
    return <div key={i} style={{ color: line.c || '#FFFFFF', minHeight: 22 }}>{line.t || '\u00A0'}</div>;
  };

  // Logo chips strip — show breadth of integrations
  const Logos = window;
  const logoSet = [
    { C: Logos.LogoZaloOA, label: 'Zalo OA' },
    { C: Logos.LogoFacebook, label: 'Facebook' },
    { C: Logos.LogoCallCenter, label: 'Call Center' },
    { C: Logos.LogoMattermost, label: 'Mattermost' },
    { C: Logos.LogoGDrive, label: 'Google Drive' },
    { C: Logos.LogoGDocs, label: 'Google Docs' },
    { C: Logos.LogoFireflies, label: 'Fireflies.ai' },
    { C: Logos.LogoCNVCdp, label: 'CNV CDP' },
  ];

  return (
    <section style={{
      background: _NIGHT[1000],
      padding: '128px 48px 112px',
      position: 'relative',
      overflow: 'hidden',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      {/* atmosphere */}
      <div style={{
        position: 'absolute', top: -200, right: -200, width: 700, height: 700,
        background: `radial-gradient(circle, ${_PINK[500]}22 0%, transparent 60%)`,
        pointerEvents: 'none',
      }}/>
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', opacity: .35,
        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: '72px 72px',
        maskImage: 'radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%)',
      }}/>

      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
        {/* heading */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'end', marginBottom: 64 }}>
          <div>
            <_PinkEyebrow style={{ marginBottom: 18 }}>TÙY BIẾN · OPEN API · WEBHOOK</_PinkEyebrow>
            <h2 style={{
              fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 56, lineHeight: 1.04,
              letterSpacing: '-0.035em', color: '#fff', margin: 0,
            }}>
              Tùy biến đúng <_PinkGradientText>nghiệp vụ</_PinkGradientText> của bạn —<br/>
              kết nối mọi hệ thống bằng API.
            </h2>
          </div>
          <div>
            <p style={{
              fontFamily: 'Inter, sans-serif', fontSize: 17, lineHeight: 1.65,
              color: 'rgba(255,255,255,0.66)', margin: 0,
            }}>
              CNV Work không phải SaaS đóng. Bạn khai báo custom field, dựng workflow theo phòng ban,
              đồng bộ ERP / kế toán / kho qua REST API và Webhook real-time. Đội IT của bạn không bị
              khóa cứng vào vendor.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 22, flexWrap: 'wrap' }}>
              <_PinkBtn>Xem tài liệu API →</_PinkBtn>
              <_PinkOutlineBtn>Đặt lịch tư vấn nghiệp vụ</_PinkOutlineBtn>
            </div>
          </div>
        </div>

        {/* main 2-column: capabilities | terminal */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 40, alignItems: 'start' }}>

          {/* LEFT — capability cards */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {capabilities.map((cap, i) => (
              <div key={i} style={{
                background: 'rgba(255,255,255,0.04)',
                border: '1px solid rgba(255,255,255,0.08)',
                borderRadius: 16, padding: '24px 22px',
                transition: 'all .2s',
              }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 10,
                  background: `linear-gradient(135deg, ${_PINK[500]}, ${_PINK[400]})`,
                  color: _NIGHT[950],
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 14,
                }}>{cap.icon}</div>
                <div style={{
                  fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 16,
                  color: '#fff', letterSpacing: '-0.01em', marginBottom: 6, lineHeight: 1.3,
                }}>{cap.title}</div>
                <div style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 13.5, lineHeight: 1.55,
                  color: 'rgba(255,255,255,0.6)',
                }}>{cap.desc}</div>
              </div>
            ))}
          </div>

          {/* RIGHT — terminal mock */}
          <div style={{ position: 'relative' }}>
            <div style={{
              background: 'linear-gradient(180deg, #0F1424 0%, #0A0E1A 100%)',
              border: '1px solid rgba(255,255,255,0.1)',
              borderRadius: 16, overflow: 'hidden',
              boxShadow: `0 30px 80px -20px ${_PINK[500]}30, 0 0 0 1px rgba(255,255,255,0.04)`,
            }}>
              {/* terminal chrome */}
              <div style={{
                display: 'flex', alignItems: 'center', gap: 8,
                padding: '12px 16px',
                borderBottom: '1px solid rgba(255,255,255,0.06)',
                background: 'rgba(255,255,255,0.02)',
              }}>
                <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FF5F57' }}/>
                <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FEBC2E' }}/>
                <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#28C840' }}/>
                <div style={{
                  marginLeft: 14, fontFamily: 'JetBrains Mono, ui-monospace, monospace',
                  fontSize: 12, color: 'rgba(255,255,255,0.5)',
                }}>POST · api.cnv.vn/v1/deals</div>
                <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#28C840', boxShadow: '0 0 8px #28C840' }}/>
                  <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>200 OK</span>
                </div>
              </div>
              {/* code body */}
              <div style={{
                padding: '22px 24px',
                fontFamily: 'JetBrains Mono, ui-monospace, monospace',
                fontSize: 13, lineHeight: 1.7,
              }}>
                {codeLines.map(renderLine)}
              </div>
            </div>

            {/* floating "webhook fired" badge */}
            <div style={{
              position: 'absolute', right: -14, bottom: -18,
              background: '#fff', color: _NIGHT[950],
              borderRadius: 12, padding: '12px 16px',
              boxShadow: '0 18px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.04)',
              display: 'flex', alignItems: 'center', gap: 12,
              fontFamily: 'Inter, sans-serif',
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 8,
                background: `linear-gradient(135deg, ${_PINK[500]}, ${_PINK[400]})`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff',
              }}>
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.2">
                  <path d="M5 13l4 4L19 7"/>
                </svg>
              </div>
              <div>
                <div style={{ fontSize: 11, color: '#7280A8', fontWeight: 500, letterSpacing: '0.04em' }}>WEBHOOK FIRED</div>
                <div style={{ fontSize: 13, fontWeight: 700, color: _NIGHT[950] }}>deal.created · 180ms</div>
              </div>
            </div>
          </div>
        </div>

        {/* logo strip — "kết nối sẵn với" */}
        <div style={{ marginTop: 88 }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20,
            fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 600,
            color: 'rgba(255,255,255,0.45)', letterSpacing: '0.14em', textTransform: 'uppercase',
          }}>
            <span>Kết nối sẵn với 60+ hệ thống</span>
            <span style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.08)' }}/>
            <a href="Tich Hop.html" style={{
              color: _PINK[400], textDecoration: 'none', letterSpacing: '0.01em',
              textTransform: 'none', fontSize: 13, fontWeight: 500,
            }}>Xem tất cả tích hợp →</a>
          </div>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 12,
          }}>
            {logoSet.map((l, i) => l.C && (
              <div key={i} style={{
                background: 'rgba(255,255,255,0.04)',
                border: '1px solid rgba(255,255,255,0.08)',
                borderRadius: 12, padding: '16px 14px',
                display: 'flex', alignItems: 'center', gap: 10,
                transition: 'all .2s',
              }}>
                <l.C size={28}/>
                <div style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 12.5, fontWeight: 600,
                  color: 'rgba(255,255,255,0.78)', letterSpacing: '-0.01em',
                  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                }}>{l.label}</div>
              </div>
            ))}
          </div>
        </div>

        {/* stats strip */}
        <div style={{
          marginTop: 56,
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          borderTop: '1px solid rgba(255,255,255,0.08)',
          borderBottom: '1px solid rgba(255,255,255,0.08)',
        }}>
          {[
            { n: '120+', l: 'API endpoints' },
            { n: '<200ms', l: 'Webhook latency' },
            { n: '60+', l: 'Hệ thống đã kết nối' },
            { n: '4', l: 'SDK ngôn ngữ chính chủ' },
          ].map((s, i) => (
            <div key={i} style={{
              padding: '32px 28px',
              borderLeft: i > 0 ? '1px solid rgba(255,255,255,0.08)' : 'none',
            }}>
              <div style={{
                fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 40,
                background: window.PINK_GRAD, WebkitBackgroundClip: 'text', backgroundClip: 'text',
                color: 'transparent', letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 8,
              }}>{s.n}</div>
              <div style={{
                fontFamily: 'Inter, sans-serif', fontSize: 14,
                color: 'rgba(255,255,255,0.6)',
              }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { CustomizeAndAPI });