import React, { useState, useCallback } from 'react';
import { motion } from 'framer-motion';
import { assetUrl } from '../lib/assetUrl';
import { Mail, Phone, Clock, ArrowUpRight, Check, ShieldCheck } from 'lucide-react';
import TurnstileCaptcha from './TurnstileCaptcha';

export default function ContactSection({ isMobile, onOpenStrategy }) {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    subject: '',
    message: ''
  });

  const [turnstileToken, setTurnstileToken] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [errorMsg, setErrorMsg] = useState('');

  const handleTurnstileVerify = useCallback((token) => {
    setTurnstileToken(token);
    if (errorMsg) setErrorMsg('');
  }, [errorMsg]);

  const handleTurnstileExpire = useCallback(() => {
    setTurnstileToken('');
  }, []);

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
    if (errorMsg) setErrorMsg('');
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!formData.name.trim() || !formData.email.trim() || !formData.message.trim()) {
      setErrorMsg('Please fill in your Name, Email, and Message.');
      return;
    }

    if (!turnstileToken) {
      setErrorMsg('Please complete the Cloudflare Turnstile security verification.');
      return;
    }

    setIsSubmitting(true);
    setErrorMsg('');

    try {
      let response = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          type: 'contact',
          name: formData.name,
          email: formData.email,
          phone: formData.phone,
          subject: formData.subject,
          message: formData.message,
          turnstileToken
        })
      });

      if (!response.ok) {
        response = await fetch('/api/send', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            type: 'contact',
            name: formData.name,
            email: formData.email,
            phone: formData.phone,
            subject: formData.subject,
            message: formData.message,
            turnstileToken
          })
        });
      }

      const resData = await response.json().catch(() => ({}));

      if (response.ok && resData.success) {
        setSubmitted(true);
        setFormData({ name: '', email: '', phone: '', subject: '', message: '' });
        setTurnstileToken('');
      } else {
        setErrorMsg(resData.error || resData.smtpError || 'Cloudflare Turnstile verification failed. Please try again.');
      }
    } catch (err) {
      console.error('Contact submit error:', err);
      setSubmitted(true);
      setFormData({ name: '', email: '', phone: '', subject: '', message: '' });
      setTurnstileToken('');
    } finally {
      setIsSubmitting(false);
    }
  };

  const sectionPadding = isMobile ? '3rem 1.25rem' : '5rem 4rem';

  return (
    <section 
      id="contactus" 
      style={{
        position: 'relative',
        backgroundColor: '#020710',
        color: '#ffffff',
        overflow: 'hidden',
        width: '100%',
        maxWidth: '100%',
        boxSizing: 'border-box',
        padding: sectionPadding,
        zIndex: 10
      }}
    >
      {/* Background World Map Vector Pattern */}
      <img 
        src={assetUrl('/assets/World Map Vector.svg')} 
        alt="" 
        style={{
          position: 'absolute',
          top: '-20px',
          left: '50%',
          transform: 'translateX(-50%)',
          width: '100%',
          maxWidth: '1400px',
          height: 'auto',
          maxHeight: '700px',
          objectFit: 'contain',
          opacity: 0.22,
          pointerEvents: 'none',
          zIndex: 0
        }} 
      />

      {/* Top Ambient Glow Effects */}
      <div style={{
        position: 'absolute',
        top: '10%',
        left: '50%',
        transform: 'translateX(-50%)',
        width: '60%',
        height: '400px',
        background: 'radial-gradient(ellipse at center, rgba(3, 135, 218, 0.12) 0%, rgba(236, 137, 34, 0.05) 50%, transparent 70%)',
        pointerEvents: 'none',
        zIndex: 0
      }} />

      <div style={{ position: 'relative', zIndex: 1, maxWidth: '1440px', margin: '0 auto', width: '100%' }}>
        
        {/* HERO HEADER AREA */}
        <div style={{ marginBottom: isMobile ? '3rem' : '5rem' }}>
          <motion.h1 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            style={{
              fontSize: 'clamp(2.5rem, 5vw, 4.5rem)',
              fontWeight: 700,
              lineHeight: 1.1,
              letterSpacing: '-0.02em',
              marginBottom: '1.25rem',
              color: '#ffffff'
            }}
          >
            Contact{' '}
            <span style={{
              background: 'linear-gradient(135deg, #EC8922 0%, #f97316 60%, #eab308 100%)',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              display: 'inline-block'
            }}>
              Us
            </span>
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.1 }}
            style={{
              fontSize: isMobile ? '0.98rem' : '1.1rem',
              color: '#cbd5e1',
              maxWidth: '560px',
              lineHeight: 1.6,
              marginBottom: '2rem',
              fontWeight: 400
            }}
          >
            We'd love to hear from you. Whether you have questions about our products and services, 
            need support, or would like to discuss a business opportunity, our team is here to help.
          </motion.p>
        </div>

        {/* SECTION: LET'S START THE CONVERSATION */}
        <div style={{ position: 'relative', marginBottom: isMobile ? '3rem' : '4.5rem' }}>
          
          {/* Wave Form Background Overlay behind Contact Us Form Card */}
          <img 
            src={assetUrl('/assets/Wave form.svg')} 
            alt="" 
            style={{
              position: 'absolute',
              bottom: '-100px',
              left: 0,
              right: 0,
              width: '100%',
              maxWidth: '100%',
              height: 'auto',
              maxHeight: '650px',
              objectFit: 'cover',
              pointerEvents: 'none',
              opacity: 0.85,
              zIndex: 0
            }}
          />

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            style={{ position: 'relative', zIndex: 1, marginBottom: '2.5rem' }}
          >
            <h2 style={{
              fontSize: 'clamp(1.8rem, 3.5vw, 2.8rem)',
              fontWeight: 700,
              color: '#ffffff',
              letterSpacing: '-0.02em',
              marginBottom: '0.75rem'
            }}>
              Let's Start The Conversation
            </h2>
            <p style={{
              fontSize: isMobile ? '0.9rem' : '1.02rem',
              color: '#94a3b8',
              maxWidth: '780px',
              lineHeight: 1.5
            }}>
              Tell Us About Your Goals, Challenges, Or Project Requirements. Our Team Will Get Back To You Within 24 Hours.
            </p>
          </motion.div>

          {/* MAIN CONTACT CARD CONTAINER */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7 }}
            style={{
              position: 'relative',
              zIndex: 1,
              borderRadius: '24px',
              border: '1px solid rgba(255, 255, 255, 0.1)',
              background: 'rgba(5, 11, 24, 0.85)',
              backdropFilter: 'blur(20px)',
              WebkitBackdropFilter: 'blur(20px)',
              overflow: 'hidden',
              boxShadow: '0 30px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08)',
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : '38% 62%',
              minHeight: '520px'
            }}
          >
            {/* Background SVG mesh overlay inside card */}
            <div 
              style={{
                position: 'absolute',
                inset: 0,
                backgroundImage: `url(${assetUrl('/assets/Lets start the conversation bg.svg')})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                opacity: 0.6,
                pointerEvents: 'none',
                zIndex: 0
              }} 
            />

            {/* LEFT SIDE: "How We Can Help?" */}
            <div 
              style={{
                position: 'relative',
                zIndex: 1,
                padding: isMobile ? '2.5rem 1.5rem' : '3.5rem 3rem',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'flex-start',
                background: 'radial-gradient(circle at top left, rgba(3, 135, 218, 0.25) 0%, rgba(2, 7, 16, 0.4) 100%)',
                borderRight: isMobile ? 'none' : '1px solid rgba(255, 255, 255, 0.08)',
                borderBottom: isMobile ? '1px solid rgba(255, 255, 255, 0.08)' : 'none',
                overflow: 'hidden'
              }}
            >
              {/* Blur asset overlay on left section */}
              <img 
                src={assetUrl('/assets/C0ntact form blur.svg')} 
                alt="" 
                style={{
                  position: 'absolute',
                  top: '-20%',
                  left: '-20%',
                  width: '140%',
                  height: '140%',
                  objectFit: 'cover',
                  opacity: 0.7,
                  pointerEvents: 'none',
                  zIndex: 0
                }}
              />

              <div style={{ position: 'relative', zIndex: 1 }}>
                <h3 style={{
                  fontSize: isMobile ? '1.5rem' : '1.85rem',
                  fontWeight: 700,
                  color: '#ffffff',
                  marginBottom: '2rem',
                  letterSpacing: '-0.01em'
                }}>
                  How We Can Help?
                </h3>

                <ul style={{
                  listStyle: 'none',
                  padding: 0,
                  margin: 0,
                  display: 'flex',
                  flexDirection: 'column',
                  gap: '1.25rem'
                }}>
                  {[
                    'Product Demonstrations',
                    'Technical Support',
                    'Partnership Opportunities',
                    'Project Consultations'
                  ].map((item, idx) => (
                    <li 
                      key={idx} 
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: '0.85rem',
                        color: '#e2e8f0',
                        fontSize: isMobile ? '0.95rem' : '1.05rem',
                        fontWeight: 500
                      }}
                    >
                      <span style={{
                        display: 'inline-flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        width: '20px',
                        height: '20px',
                        color: '#ffffff'
                      }}>
                        ✓
                      </span>
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            {/* RIGHT SIDE: Contact Form */}
            <div 
              style={{
                position: 'relative',
                zIndex: 1,
                padding: isMobile ? '2.5rem 1.5rem' : '3.5rem 3.5rem',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                background: 'rgba(2, 7, 16, 0.4)'
              }}
            >
              {submitted ? (
                <div style={{
                  padding: '2.5rem 1.5rem',
                  textAlign: 'center',
                  background: 'rgba(16, 185, 129, 0.1)',
                  border: '1px solid rgba(16, 185, 129, 0.3)',
                  borderRadius: '16px'
                }}>
                  <div style={{
                    width: '56px',
                    height: '56px',
                    borderRadius: '50%',
                    background: 'rgba(16, 185, 129, 0.2)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    margin: '0 auto 1.25rem auto',
                    color: '#34d399'
                  }}>
                    <Check size={28} />
                  </div>
                  <h4 style={{ fontSize: '1.4rem', fontWeight: 700, color: '#ffffff', marginBottom: '0.5rem' }}>
                    Message Sent Successfully!
                  </h4>
                  <p style={{ color: '#cbd5e1', fontSize: '0.95rem', lineHeight: 1.5, marginBottom: '1.5rem' }}>
                    Thank you for reaching out to Cavin Infotech. Our experts will review your details and respond within 24 hours.
                  </p>
                  <button
                    onClick={() => setSubmitted(false)}
                    style={{
                      background: 'transparent',
                      border: '1px solid rgba(255, 255, 255, 0.3)',
                      color: '#ffffff',
                      padding: '0.6rem 1.5rem',
                      borderRadius: '50px',
                      fontSize: '0.88rem',
                      fontWeight: 600,
                      cursor: 'pointer'
                    }}
                  >
                    Send Another Message
                  </button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
                  
                  {errorMsg && (
                    <div style={{
                      padding: '0.75rem 1rem',
                      background: 'rgba(239, 68, 68, 0.15)',
                      border: '1px solid rgba(239, 68, 68, 0.4)',
                      borderRadius: '8px',
                      color: '#fca5a5',
                      fontSize: '0.88rem'
                    }}>
                      {errorMsg}
                    </div>
                  )}

                  {/* Row 1: Name & Email */}
                  <div style={{
                    display: 'grid',
                    gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
                    gap: '2rem'
                  }}>
                    <div style={{ position: 'relative' }}>
                      <input 
                        type="text"
                        name="name"
                        value={formData.name}
                        onChange={handleChange}
                        placeholder="Name"
                        required
                        style={{
                          width: '100%',
                          background: 'transparent',
                          border: 'none',
                          borderBottom: '1px solid rgba(255, 255, 255, 0.25)',
                          color: '#ffffff',
                          fontSize: '0.98rem',
                          padding: '0.6rem 0',
                          outline: 'none',
                          transition: 'border-color 0.3s ease'
                        }}
                        onFocus={(e) => e.target.style.borderBottomColor = '#38bdf8'}
                        onBlur={(e) => e.target.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'}
                      />
                    </div>

                    <div style={{ position: 'relative' }}>
                      <input 
                        type="email"
                        name="email"
                        value={formData.email}
                        onChange={handleChange}
                        placeholder="Email"
                        required
                        style={{
                          width: '100%',
                          background: 'transparent',
                          border: 'none',
                          borderBottom: '1px solid rgba(255, 255, 255, 0.25)',
                          color: '#ffffff',
                          fontSize: '0.98rem',
                          padding: '0.6rem 0',
                          outline: 'none',
                          transition: 'border-color 0.3s ease'
                        }}
                        onFocus={(e) => e.target.style.borderBottomColor = '#38bdf8'}
                        onBlur={(e) => e.target.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'}
                      />
                    </div>
                  </div>

                  {/* Row 2: Phone No. (Optional) */}
                  <div style={{ position: 'relative' }}>
                    <input 
                      type="tel"
                      name="phone"
                      value={formData.phone}
                      onChange={handleChange}
                      placeholder="Phone No. (Optional)"
                      style={{
                        width: '100%',
                        background: 'transparent',
                        border: 'none',
                        borderBottom: '1px solid rgba(255, 255, 255, 0.25)',
                        color: '#ffffff',
                        fontSize: '0.98rem',
                        padding: '0.6rem 0',
                        outline: 'none',
                        transition: 'border-color 0.3s ease'
                      }}
                      onFocus={(e) => e.target.style.borderBottomColor = '#38bdf8'}
                      onBlur={(e) => e.target.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'}
                    />
                  </div>

                  {/* Row 3: Subject */}
                  <div style={{ position: 'relative' }}>
                    <input 
                      type="text"
                      name="subject"
                      value={formData.subject}
                      onChange={handleChange}
                      placeholder="Subject"
                      style={{
                        width: '100%',
                        background: 'transparent',
                        border: 'none',
                        borderBottom: '1px solid rgba(255, 255, 255, 0.25)',
                        color: '#ffffff',
                        fontSize: '0.98rem',
                        padding: '0.6rem 0',
                        outline: 'none',
                        transition: 'border-color 0.3s ease'
                      }}
                      onFocus={(e) => e.target.style.borderBottomColor = '#38bdf8'}
                      onBlur={(e) => e.target.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'}
                    />
                  </div>

                  {/* Row 4: Message */}
                  <div style={{ position: 'relative', marginTop: '0.5rem' }}>
                    <textarea 
                      name="message"
                      value={formData.message}
                      onChange={handleChange}
                      placeholder="Message"
                      rows={2}
                      required
                      style={{
                        width: '100%',
                        background: 'transparent',
                        border: 'none',
                        borderBottom: '1px solid rgba(255, 255, 255, 0.25)',
                        color: '#ffffff',
                        fontSize: '0.98rem',
                        padding: '0.6rem 0',
                        outline: 'none',
                        resize: 'none',
                        fontFamily: 'inherit',
                        transition: 'border-color 0.3s ease'
                      }}
                      onFocus={(e) => e.target.style.borderBottomColor = '#38bdf8'}
                      onBlur={(e) => e.target.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'}
                    />
                  </div>

                  {/* Cloudflare Turnstile Security Verification */}
                  <TurnstileCaptcha 
                    onVerify={handleTurnstileVerify}
                    onExpire={handleTurnstileExpire}
                  />

                  {/* Submit Button */}
                  <button
                    type="submit"
                    disabled={isSubmitting}
                    style={{
                      marginTop: '1rem',
                      width: '100%',
                      background: '#ffffff',
                      color: '#020710',
                      border: 'none',
                      padding: '0.95rem 1.5rem',
                      borderRadius: '50px',
                      fontSize: '1.05rem',
                      fontWeight: 700,
                      cursor: isSubmitting ? 'not-allowed' : 'pointer',
                      boxShadow: '0 10px 25px rgba(255, 255, 255, 0.15)',
                      transition: 'all 0.3s ease',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      gap: '0.5rem'
                    }}
                    onMouseEnter={(e) => {
                      if (!isSubmitting) {
                        e.currentTarget.style.transform = 'translateY(-2px)';
                        e.currentTarget.style.boxShadow = '0 15px 35px rgba(255, 255, 255, 0.3)';
                      }
                    }}
                    onMouseLeave={(e) => {
                      if (!isSubmitting) {
                        e.currentTarget.style.transform = 'translateY(0)';
                        e.currentTarget.style.boxShadow = '0 10px 25px rgba(255, 255, 255, 0.15)';
                      }
                    }}
                  >
                    {isSubmitting ? (
                      'Sending...'
                    ) : (
                      'Send Message'
                    )}
                  </button>

                </form>
              )}
            </div>

          </motion.div>
        </div>

        {/* BOTTOM CONTACT INFO CARDS ROW */}
        <div style={{ position: 'relative', zIndex: 1 }}>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.2 }}
            style={{
              position: 'relative',
              zIndex: 1,
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
              gap: '1.5rem'
            }}
          >
            {/* Card 1: Email */}
            <a 
              href="mailto:info@cavinfotech.com"
              style={{ textDecoration: 'none' }}
            >
              <div style={{
                background: 'rgba(8, 16, 32, 0.65)',
                border: '1px solid rgba(255, 255, 255, 0.12)',
                backdropFilter: 'blur(16px)',
                WebkitBackdropFilter: 'blur(16px)',
                borderRadius: '16px',
                padding: '1.2rem 1.4rem',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                transition: 'all 0.3s ease',
                cursor: 'pointer'
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.borderColor = 'rgba(236, 137, 34, 0.5)';
                e.currentTarget.style.transform = 'translateY(-3px)';
                e.currentTarget.style.background = 'rgba(12, 24, 48, 0.8)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.12)';
                e.currentTarget.style.transform = 'translateY(0)';
                e.currentTarget.style.background = 'rgba(8, 16, 32, 0.65)';
              }}
              >
                <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
                  <div style={{
                    width: '44px',
                    height: '44px',
                    borderRadius: '10px',
                    border: '1px solid rgba(255, 255, 255, 0.15)',
                    background: 'rgba(255, 255, 255, 0.05)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    color: '#ffffff'
                  }}>
                    <Mail size={20} />
                  </div>
                  <span style={{ color: '#ffffff', fontWeight: 600, fontSize: isMobile ? '0.9rem' : '0.98rem' }}>
                    info@cavinfotech.com
                  </span>
                </div>
                
                <div style={{
                  width: '36px',
                  height: '36px',
                  borderRadius: '50%',
                  border: '1px solid rgba(255, 255, 255, 0.2)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: '#ffffff'
                }}>
                  <ArrowUpRight size={18} />
                </div>
              </div>
            </a>

            {/* Card 2: Phone */}
            <a 
              href="tel:+919280233347"
              style={{ textDecoration: 'none' }}
            >
              <div style={{
                background: 'rgba(8, 16, 32, 0.65)',
                border: '1px solid rgba(255, 255, 255, 0.12)',
                backdropFilter: 'blur(16px)',
                WebkitBackdropFilter: 'blur(16px)',
                borderRadius: '16px',
                padding: '1.2rem 1.4rem',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                transition: 'all 0.3s ease',
                cursor: 'pointer'
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.borderColor = 'rgba(236, 137, 34, 0.5)';
                e.currentTarget.style.transform = 'translateY(-3px)';
                e.currentTarget.style.background = 'rgba(12, 24, 48, 0.8)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.12)';
                e.currentTarget.style.transform = 'translateY(0)';
                e.currentTarget.style.background = 'rgba(8, 16, 32, 0.65)';
              }}
              >
                <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
                  <div style={{
                    width: '44px',
                    height: '44px',
                    borderRadius: '10px',
                    border: '1px solid rgba(255, 255, 255, 0.15)',
                    background: 'rgba(255, 255, 255, 0.05)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    color: '#ffffff'
                  }}>
                    <Phone size={20} />
                  </div>
                  <span style={{ color: '#ffffff', fontWeight: 600, fontSize: isMobile ? '0.9rem' : '0.98rem' }}>
                    +91 9280233347
                  </span>
                </div>

                <div style={{
                  width: '36px',
                  height: '36px',
                  borderRadius: '50%',
                  border: '1px solid rgba(255, 255, 255, 0.2)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: '#ffffff'
                }}>
                  <ArrowUpRight size={18} />
                </div>
              </div>
            </a>

            {/* Card 3: Timings */}
            <div style={{
              background: 'rgba(8, 16, 32, 0.65)',
              border: '1px solid rgba(255, 255, 255, 0.12)',
              backdropFilter: 'blur(16px)',
              WebkitBackdropFilter: 'blur(16px)',
              borderRadius: '16px',
              padding: '1.2rem 1.4rem',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              transition: 'all 0.3s ease'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = 'rgba(236, 137, 34, 0.5)';
              e.currentTarget.style.transform = 'translateY(-3px)';
              e.currentTarget.style.background = 'rgba(12, 24, 48, 0.8)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.12)';
              e.currentTarget.style.transform = 'translateY(0)';
              e.currentTarget.style.background = 'rgba(8, 16, 32, 0.65)';
            }}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
                <div style={{
                  width: '44px',
                  height: '44px',
                  borderRadius: '10px',
                  border: '1px solid rgba(255, 255, 255, 0.15)',
                  background: 'rgba(255, 255, 255, 0.05)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: '#ffffff',
                  flexShrink: 0
                }}>
                  <Clock size={20} />
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.15rem' }}>
                  <span style={{ color: '#ffffff', fontWeight: 600, fontSize: isMobile ? '0.85rem' : '0.9rem' }}>
                    Mon - Fri: 9 am - 6 pm
                  </span>
                  <span style={{ color: '#cbd5e1', fontWeight: 500, fontSize: isMobile ? '0.82rem' : '0.86rem' }}>
                    Sat: 9 am - 1 pm
                  </span>
                </div>
              </div>

              <div style={{
                width: '36px',
                height: '36px',
                borderRadius: '50%',
                border: '1px solid rgba(255, 255, 255, 0.2)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: '#ffffff',
                flexShrink: 0
              }}>
                <ArrowUpRight size={18} />
              </div>
            </div>

          </motion.div>
        </div>

        {/* TRUSTED BY MANUFACTURING TEAMS SECTION */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, delay: 0.2 }}
          style={{
            marginTop: isMobile ? '3.5rem' : '5.5rem',
            textAlign: 'center',
            position: 'relative',
            zIndex: 2,
            width: '100%',
            overflow: 'hidden'
          }}
        >
          {/* Header matching "Let's Start The Conversation" typography */}
          <h2 style={{
            fontSize: 'clamp(1.8rem, 3.5vw, 2.8rem)',
            fontWeight: 700,
            color: '#ffffff',
            letterSpacing: '-0.02em',
            marginBottom: isMobile ? '2.2rem' : '3.5rem'
          }}>
            Trusted by Manufacturing Teams Across India
          </h2>

          {/* Marquee Infinite Track Container with Side Vignette Gradients */}
          <div style={{
            position: 'relative',
            width: '100%',
            overflow: 'hidden',
            padding: '1.2rem 0'
          }}>
            {/* Side Fade Mask Overlays */}
            <div style={{
              position: 'absolute', top: 0, left: 0, bottom: 0,
              width: isMobile ? '10%' : '16%',
              background: 'linear-gradient(to right, #020710 0%, transparent 100%)',
              zIndex: 5, pointerEvents: 'none'
            }} />
            <div style={{
              position: 'absolute', top: 0, right: 0, bottom: 0,
              width: isMobile ? '10%' : '16%',
              background: 'linear-gradient(to left, #020710 0%, transparent 100%)',
              zIndex: 5, pointerEvents: 'none'
            }} />

            {/* Continuous Infinite Left-to-Right Scrolling Marquee Track */}
            <motion.div
              animate={{ x: ['-50%', '0%'] }}
              transition={{
                x: {
                  repeat: Infinity,
                  repeatType: 'loop',
                  duration: isMobile ? 22 : 30,
                  ease: 'linear'
                }
              }}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: isMobile ? '3.5rem' : '6rem',
                width: 'max-content'
              }}
            >
              {[
                { name: 'CavinKare', image: '/assets/Frame 27.svg', height: 60 },
                { name: 'Chola MS', image: '/assets/Frame 34.svg', height: 54 },
                { name: 'Polyhose', image: '/assets/Frame 30.svg', height: 54 },
                { name: 'Dawn Pictures', image: '/assets/Frame 32.svg', height: 62 },
                { name: 'Hero', image: '/assets/Frame 35.svg', height: 56 },
                { name: 'MRF', image: '/assets/Frame 33.svg', height: 48 },
                { name: 'Valeo', image: '/assets/Frame 28.svg', height: 60 },
                { name: 'ACA Global', image: '/assets/Frame 31.svg', height: 54 }
              ].concat([
                { name: 'CavinKare', image: '/assets/Frame 27.svg', height: 60 },
                { name: 'Chola MS', image: '/assets/Frame 34.svg', height: 54 },
                { name: 'Polyhose', image: '/assets/Frame 30.svg', height: 54 },
                { name: 'Dawn Pictures', image: '/assets/Frame 32.svg', height: 62 },
                { name: 'Hero', image: '/assets/Frame 35.svg', height: 56 },
                { name: 'MRF', image: '/assets/Frame 33.svg', height: 48 },
                { name: 'Valeo', image: '/assets/Frame 28.svg', height: 60 },
                { name: 'ACA Global', image: '/assets/Frame 31.svg', height: 54 }
              ]).concat([
                { name: 'CavinKare', image: '/assets/Frame 27.svg', height: 60 },
                { name: 'Chola MS', image: '/assets/Frame 34.svg', height: 54 },
                { name: 'Polyhose', image: '/assets/Frame 30.svg', height: 54 },
                { name: 'Dawn Pictures', image: '/assets/Frame 32.svg', height: 62 },
                { name: 'Hero', image: '/assets/Frame 35.svg', height: 56 },
                { name: 'MRF', image: '/assets/Frame 33.svg', height: 48 },
                { name: 'Valeo', image: '/assets/Frame 28.svg', height: 60 },
                { name: 'ACA Global', image: '/assets/Frame 31.svg', height: 54 }
              ]).map((partner, index) => (
                <img
                  key={index}
                  src={assetUrl(partner.image)}
                  alt={`${partner.name} logo`}
                  style={{
                    height: isMobile ? `${Math.round(partner.height * 0.78)}px` : `${partner.height}px`,
                    width: 'auto',
                    objectFit: 'contain',
                    transition: 'transform 0.3s ease',
                    cursor: 'pointer'
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.transform = 'scale(1.1)';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.transform = 'scale(1)';
                  }}
                />
              ))}
            </motion.div>
          </div>
        </motion.div>

        {/* WORKPLACE & TEAM PHOTO MOSAIC GALLERY SECTION */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8, delay: 0.2 }}
          style={{
            position: 'relative',
            marginTop: isMobile ? '4rem' : '6rem',
            marginBottom: '2rem',
            width: '100%',
            maxWidth: '100%',
            boxSizing: 'border-box',
            overflow: 'hidden',
            borderRadius: '24px'
          }}
        >
          {/* Side Fade Vignette Masks matching reference design */}
          <div style={{
            position: 'absolute',
            top: 0,
            left: 0,
            bottom: 0,
            width: isMobile ? '12%' : '18%',
            background: 'linear-gradient(to right, #020710 0%, rgba(2, 7, 16, 0.8) 50%, transparent 100%)',
            zIndex: 10,
            pointerEvents: 'none'
          }} />
          <div style={{
            position: 'absolute',
            top: 0,
            right: 0,
            bottom: 0,
            width: isMobile ? '12%' : '18%',
            background: 'linear-gradient(to left, #020710 0%, rgba(2, 7, 16, 0.8) 50%, transparent 100%)',
            zIndex: 10,
            pointerEvents: 'none'
          }} />

          {/* Mosaic Grid Layout Container */}
          <div style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: isMobile ? '5px' : '14px',
            overflowX: 'hidden',
            padding: isMobile ? '0.5rem 0' : '1rem 0',
            width: '100%',
            scrollbarWidth: 'none'
          }}>
            
            {/* Column 1 (Far Left) */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? '5px' : '14px', flexShrink: 0 }}>
              <div style={{ width: isMobile ? '38px' : '150px', height: isMobile ? '68px' : '190px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
                <img 
                  src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=500&q=80" 
                  alt="" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </div>
              <div style={{ width: isMobile ? '38px' : '150px', height: isMobile ? '68px' : '190px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
                <img 
                  src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=500&q=80" 
                  alt="" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </div>
            </div>

            {/* Column 2 */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? '5px' : '14px', flexShrink: 0 }}>
              <div style={{ width: isMobile ? '40px' : '155px', height: isMobile ? '44px' : '122px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
                <img 
                  src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=500&q=80" 
                  alt="" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </div>
              <div style={{ width: isMobile ? '40px' : '155px', height: isMobile ? '44px' : '122px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
                <img 
                  src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?auto=format&fit=crop&w=500&q=80" 
                  alt="" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </div>
              <div style={{ width: isMobile ? '40px' : '155px', height: isMobile ? '44px' : '122px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
                <img 
                  src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=500&q=80" 
                  alt="" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </div>
            </div>

            {/* Column 3 (Tall Vertical Chair/Plant) */}
            <div style={{ flexShrink: 0 }}>
              <div style={{ width: isMobile ? '38px' : '150px', height: isMobile ? '142px' : '394px', borderRadius: isMobile ? '8px' : '20px', overflow: 'hidden' }}>
                <img 
                  src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=500&q=80" 
                  alt="" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </div>
            </div>

            {/* Column 4 (Tall Vertical Cubicles Aerial) */}
            <div style={{ flexShrink: 0 }}>
              <div style={{ width: isMobile ? '40px' : '155px', height: isMobile ? '142px' : '394px', borderRadius: isMobile ? '8px' : '20px', overflow: 'hidden' }}>
                <img 
                  src="https://images.unsplash.com/photo-1527192491265-7e15c55b1ed2?auto=format&fit=crop&w=500&q=80" 
                  alt="" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </div>
            </div>

            {/* Column 5 (Tall Vertical Teamwork Board) */}
            <div style={{ flexShrink: 0 }}>
              <div style={{ width: isMobile ? '40px' : '155px', height: isMobile ? '142px' : '394px', borderRadius: isMobile ? '8px' : '20px', overflow: 'hidden' }}>
                <img 
                  src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=500&q=80" 
                  alt="" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </div>
            </div>

            {/* Column 6 (Tall Vertical Coffee Hand) */}
            <div style={{ flexShrink: 0 }}>
              <div style={{ width: isMobile ? '38px' : '150px', height: isMobile ? '142px' : '394px', borderRadius: isMobile ? '8px' : '20px', overflow: 'hidden' }}>
                <img 
                  src="https://images.unsplash.com/photo-1517842645767-c639042777db?auto=format&fit=crop&w=500&q=80" 
                  alt="" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </div>
            </div>

            {/* Column 7 */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? '5px' : '14px', flexShrink: 0 }}>
              <div style={{ width: isMobile ? '40px' : '155px', height: isMobile ? '44px' : '122px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
                <img 
                  src="https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&w=500&q=80" 
                  alt="" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </div>
              <div style={{ width: isMobile ? '40px' : '155px', height: isMobile ? '44px' : '122px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
                <img 
                  src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=500&q=80" 
                  alt="" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </div>
              <div style={{ width: isMobile ? '40px' : '155px', height: isMobile ? '44px' : '122px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
                <img 
                  src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&w=500&q=80" 
                  alt="" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </div>
            </div>

            {/* Column 8 (Far Right) */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? '5px' : '14px', flexShrink: 0 }}>
              <div style={{ width: isMobile ? '38px' : '150px', height: isMobile ? '68px' : '190px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
                <img 
                  src="https://images.unsplash.com/photo-1542744836-561732845500?auto=format&fit=crop&w=500&q=80" 
                  alt="" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </div>
              <div style={{ width: isMobile ? '38px' : '150px', height: isMobile ? '68px' : '190px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
                <img 
                  src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=500&q=80" 
                  alt="" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </div>
            </div>

          </div>
        </motion.div>

        {/* DROP BY OUR OFFICE SECTION */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8, delay: 0.2 }}
          style={{
            position: 'relative',
            marginTop: isMobile ? '4rem' : '7rem',
            marginBottom: '3rem',
            width: '100%',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center'
          }}
        >
          {/* Watermark Background Title: "Drop By Our Office" */}
          <div style={{
            position: 'relative',
            width: '100%',
            textAlign: 'center',
            zIndex: 1,
            marginBottom: isMobile ? '0.75rem' : '-2.5rem'
          }}>
            <h2 style={{
              fontSize: isMobile ? 'clamp(1.3rem, 6vw, 2.2rem)' : 'clamp(2.5rem, 6.5vw, 5.5rem)',
              fontWeight: 800,
              letterSpacing: '-0.02em',
              color: 'rgba(255, 255, 255, 0.45)',
              margin: 0,
              lineHeight: 1.1,
              whiteSpace: 'nowrap'
            }}>
              Drop By Our Office
            </h2>
          </div>

          {/* Building Photo Container with Gradient Edge Vignettes */}
          <div style={{
            position: 'relative',
            width: '100%',
            maxWidth: '1100px',
            borderRadius: '24px',
            overflow: 'hidden',
            boxShadow: '0 30px 60px rgba(0, 0, 0, 0.7)',
            zIndex: 2
          }}>
            <img 
              src={assetUrl('/assets/Office photo.png')} 
              alt="Cavin Infotech Chennai Office Building"
              style={{
                width: '100%',
                height: isMobile ? '380px' : '540px',
                objectFit: 'cover',
                display: 'block'
              }}
            />

            {/* Dark Vignette Overlays matching exact design screenshot */}
            <div style={{
              position: 'absolute',
              inset: 0,
              background: `
                linear-gradient(to top, #020710 0%, rgba(2, 7, 16, 0.85) 40%, transparent 75%),
                linear-gradient(to right, rgba(2, 7, 16, 0.8) 0%, transparent 20%),
                linear-gradient(to left, rgba(2, 7, 16, 0.8) 0%, transparent 20%),
                linear-gradient(to bottom, rgba(2, 7, 16, 0.6) 0%, transparent 20%)
              `,
              pointerEvents: 'none',
              zIndex: 1
            }} />

            {/* Address & Contact Info Overlay at Bottom Left */}
            <div style={{
              position: 'absolute',
              bottom: 0,
              left: 0,
              right: 0,
              padding: isMobile ? '1.8rem 1.5rem' : '3.5rem 3.5rem',
              zIndex: 2,
              display: 'flex',
              flexDirection: 'column',
              gap: '0.85rem'
            }}>
              <h3 style={{
                fontSize: 'clamp(1.6rem, 3.2vw, 2.7rem)',
                fontWeight: 700,
                color: '#ffffff',
                margin: 0,
                letterSpacing: '-0.01em'
              }}>
                Cavin Infotech - Chennai
              </h3>

              <p style={{
                margin: 0,
                fontSize: isMobile ? '0.88rem' : '1.02rem',
                color: '#e2e8f0',
                lineHeight: 1.5,
                fontWeight: 400
              }}>
                <strong style={{ color: '#d6802e', fontWeight: 700 }}>Address: </strong>
                1st Floor, Cavin Ville, 12/1, Cenotaph Rd, Rathna Nagar, Alwarpet, Chennai, Tamil Nadu 600018
              </p>

              <div style={{
                display: 'flex',
                flexWrap: 'wrap',
                gap: isMobile ? '0.5rem 1.5rem' : '0rem 2rem',
                fontSize: isMobile ? '0.88rem' : '1.02rem',
                color: '#e2e8f0',
                lineHeight: 1.5
              }}>
                <span>
                  <strong style={{ color: '#d6802e', fontWeight: 700 }}>Email: </strong>
                  info@cavinfotech.com
                </span>
                <span>
                  <strong style={{ color: '#d6802e', fontWeight: 700 }}>Phone: </strong>
                  +91 9280233347
                </span>
              </div>
            </div>
          </div>
        </motion.div>

      </div>
    </section>
  );
}
