// Contact page — /contact
// Sections: Hero · Channels (hotline/email/FB) · Offices (3 cities) · CTA
// Reuses PINK, NIGHT, PinkBtn, PinkOutlineBtn, PinkEyebrow, PinkGradientText from pink-brand.jsx.

const CT_CREAM = '#FAF7F4';
const CT_LINE = 'rgba(6,7,11,0.08)';
const CT_INK = '#0A0E1A';
const CT_MUTED = 'rgba(10,14,26,0.62)';

// ─── HERO ────────────────────────────────────────────────────────────────
const ContactHero = () => (
  <div style={{ position: 'relative', background: NIGHT[1000], color: '#fff', padding: '120px 64px 80px', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
      background: `radial-gradient(ellipse 1100px 600px at 50% 0%, ${PINK[400]}28 0%, transparent 60%)` }}/>
    <div style={{ position: 'relative', maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
      <PinkEyebrow style={{ marginBottom: 18, justifyContent: 'center' }}>LIÊN HỆ</PinkEyebrow>
      <h1 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(36px, 5vw, 56px)', letterSpacing: '-0.03em', lineHeight: 1.05, margin: '0 0 18px' }}>
        Nói chuyện với <PinkGradientText gradient={PINK_CYAN_GRAD}>đội ngũ CNV</PinkGradientText>
      </h1>
      <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 18, color: 'rgba(255,255,255,0.65)', lineHeight: 1.6, margin: 0 }}>
        Hotline, email, văn phòng — chọn cách phù hợp với bạn. Đội sales tư vấn lộ trình triển khai, đội support hỗ trợ kỹ thuật trong giờ hành chính.
      </p>
    </div>
  </div>
);

// ─── CHANNELS ────────────────────────────────────────────────────────────
const ContactChannels = () => {
  const channels = [
    {
      key: 'hotline',
      label: 'HOTLINE',
      title: '1900 636 400',
      sub: 'Tổng đài tư vấn — Thứ 2 đến Thứ 7, 8:30 → 17:30',
      href: 'tel:1900636400',
      cta: 'Gọi ngay',
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" stroke={PINK[600]} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
    },
    {
      key: 'email',
      label: 'EMAIL',
      title: 'contact@cnvwork.com',
      sub: 'Gửi yêu cầu tư vấn, hợp tác hay hỗ trợ — phản hồi trong 24 giờ làm việc.',
      href: 'mailto:contact@cnvwork.com',
      cta: 'Soạn email',
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <rect x="3" y="5" width="18" height="14" rx="2.5" stroke={PINK[600]} strokeWidth="1.7"/>
          <path d="M4 7l8 6 8-6" stroke={PINK[600]} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
    },
    {
      key: 'facebook',
      label: 'FACEBOOK',
      title: 'fb.com/cnvworkplatform',
      sub: 'Theo dõi fanpage CNV Work — case study khách hàng, webinar, cập nhật sản phẩm.',
      href: 'https://www.facebook.com/cnvworkplatform',
      cta: 'Mở fanpage',
      external: true,
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <path d="M14 8h2.5V5.5h-2.6c-1.9 0-3.4 1.5-3.4 3.4V11H8v2.6h2.5V20H13v-6.4h2.4l.5-2.6H13V9c0-.6.4-1 1-1z" stroke={PINK[600]} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
    },
  ];

  return (
    <div style={{ background: '#fff', padding: '90px 64px', color: CT_INK }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {channels.map(c => (
            <a key={c.key} href={c.href}
              {...(c.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
              data-cnv-lead-handled="1"
              style={{
                background: CT_CREAM, borderRadius: 18, padding: '32px 28px',
                border: `1px solid ${CT_LINE}`,
                display: 'flex', flexDirection: 'column',
                textDecoration: 'none', color: 'inherit',
                transition: 'transform .2s, box-shadow .2s, border-color .2s',
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-3px)';
                e.currentTarget.style.boxShadow = `0 18px 40px ${PINK[400]}22`;
                e.currentTarget.style.borderColor = `${PINK[400]}66`;
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0)';
                e.currentTarget.style.boxShadow = 'none';
                e.currentTarget.style.borderColor = CT_LINE;
              }}>
              <div style={{
                width: 48, height: 48, borderRadius: 12,
                background: `${PINK[400]}18`, border: `1px solid ${PINK[400]}40`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 18,
              }}>{c.icon}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', color: PINK[600], marginBottom: 8 }}>{c.label}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', color: CT_INK, marginBottom: 10, lineHeight: 1.15, wordBreak: 'break-word' }}>{c.title}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: CT_MUTED, lineHeight: 1.55, marginBottom: 18 }}>{c.sub}</div>
              <div style={{ marginTop: 'auto', fontFamily: 'Inter, sans-serif', fontSize: 13.5, fontWeight: 600, color: PINK[600], display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                {c.cta}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14m-6-6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─── OFFICES ─────────────────────────────────────────────────────────────
const ContactOffices = () => {
  const offices = [
    { city: 'TP.HCM',    label: 'Trụ sở Miền Nam',  addr: '42/2 Nguyễn Văn Trỗi,\nPhường Cầu Kiệu,\nTP. Hồ Chí Minh' },
    { city: 'Hà Nội',    label: 'Văn phòng Miền Bắc', addr: '4/48 Nguyễn Chánh,\nPhường Yên Hoà,\nTP. Hà Nội' },
    { city: 'Singapore', label: 'Văn phòng Global',  addr: 'CNV Global PTE. LTD.\n20A Tanjong Pagar Road,\nSingapore 088443' },
  ];

  return (
    <div style={{ background: CT_CREAM, padding: '100px 64px', color: CT_INK }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <PinkEyebrow style={{ marginBottom: 16, justifyContent: 'center' }}>VĂN PHÒNG</PinkEyebrow>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 40, letterSpacing: '-0.03em', lineHeight: 1.05, margin: 0, color: CT_INK }}>
            Ghé thăm <PinkGradientText gradient={PINK_CYAN_GRAD}>văn phòng CNV</PinkGradientText>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {offices.map((o, i) => (
            <div key={i} style={{
              background: '#fff', borderRadius: 18, padding: '32px 28px',
              border: `1px solid ${CT_LINE}`,
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: `${PINK[400]}18`, border: `1px solid ${PINK[400]}40`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 18,
              }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                  <path d="M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z" stroke={PINK[600]} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
                  <circle cx="12" cy="10" r="2.5" stroke={PINK[600]} strokeWidth="1.7"/>
                </svg>
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: PINK[600], marginBottom: 6 }}>{o.label}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', color: CT_INK, marginBottom: 14 }}>{o.city}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: CT_MUTED, lineHeight: 1.7, whiteSpace: 'pre-line' }}>{o.addr}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─── LEGAL ENTITY ────────────────────────────────────────────────────────
const ContactLegal = () => (
  <div style={{ background: '#fff', padding: '48px 64px', color: CT_INK, borderTop: `1px solid ${CT_LINE}` }}>
    <div style={{ maxWidth: 1180, margin: '0 auto' }}>
      <div style={{
        background: CT_CREAM, borderRadius: 14, padding: '24px 28px',
        border: `1px solid ${CT_LINE}`,
        display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap',
      }}>
        <div style={{
          width: 44, height: 44, borderRadius: 10,
          background: `${PINK[400]}18`, border: `1px solid ${PINK[400]}40`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <path d="M3 21h18M5 21V7l7-4 7 4v14M9 9h2m2 0h2M9 13h2m2 0h2M9 17h6" stroke={PINK[600]} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div style={{ flex: 1, minWidth: 220 }}>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: PINK[600], marginBottom: 4 }}>Pháp nhân</div>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, fontWeight: 800, letterSpacing: '-0.01em', color: CT_INK }}>Công Ty TNHH CNV Holdings</div>
        </div>
        <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: CT_MUTED, lineHeight: 1.6, maxWidth: 460 }}>
          CNV Work là sản phẩm thuộc CNV Holdings — vận hành tại Việt Nam, dữ liệu lưu tại VN.
        </div>
      </div>
    </div>
  </div>
);

// ─── CTA ─────────────────────────────────────────────────────────────────
const ContactCTA = () => (
  <div style={{ background: NIGHT[1000], padding: '100px 64px', color: '#fff', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
      background: `radial-gradient(ellipse 1100px 700px at 50% 50%, ${PINK[400]}22 0%, transparent 60%)` }}/>
    <div style={{ position: 'relative', maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
      <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(32px, 4.4vw, 48px)', letterSpacing: '-0.03em', lineHeight: 1.08, margin: '0 0 18px' }}>
        Cần demo hoặc tư vấn cụ thể?
      </h2>
      <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, marginBottom: 32 }}>
        Để lại thông tin — đội sales chủ động gọi tư vấn lộ trình triển khai phù hợp quy mô doanh nghiệp.
      </p>
      <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
        <PinkBtn size="lg">Đặt lịch demo</PinkBtn>
        <PinkOutlineBtn size="lg" dark
          onClick={() => { window.location.href = 'tel:1900636400'; }}>
          Gọi 1900 636 400
        </PinkOutlineBtn>
      </div>
    </div>
  </div>
);

Object.assign(window, {
  ContactHero, ContactChannels, ContactOffices, ContactLegal, ContactCTA,
});