import React, { useState, useEffect, useRef } from 'react';

import { assetUrl } from './lib/assetUrl';
import { motion, useScroll, useTransform, useMotionValueEvent, useReducedMotion } from 'framer-motion';
import { useContent } from './context/ContentContext';
import { usePreviewMode } from './context/PreviewContext';
import ServiceDial from './components/ServiceDial';
import FeaturedGallery from './components/FeaturedGallery';
import ProductCard from './components/ProductCard';
import ContactSection from './components/ContactSection';
import AboutUsPage from './components/AboutUsPage';

// Reusable Scroll Reveal Wrapper with Reduced Motion Support
function Reveal({ children, delay = 0, style }) {
  const shouldReduceMotion = useReducedMotion();
  const previewMode = usePreviewMode();
  if (shouldReduceMotion && !previewMode) return <div style={style}>{children}</div>;
  return (
    <motion.div
      initial={{ opacity: 0, y: 40 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0.1 }}
      transition={{
        duration: 0.8,
        ease: [0.22, 1, 0.36, 1],
        delay: delay
      }}
      style={style}
    >
      {children}
    </motion.div>
  );
}
import { 
  ArrowRight, 
  Sparkles, 
  Database, 
  Cpu, 
  LineChart, 
  Layers, 
  Activity, 
  Settings, 
  Shield, 
  TrendingUp, 
  Globe, 
  ChevronRight, 
  ChevronLeft,
  Mail,
  CheckCircle,
  Clock,
  Compass,
  Zap,
  Layout,
  ExternalLink,
  ChevronDown,
  BrainCircuit,
  Factory,
  Network,
  UsersRound,
  ShieldCheck,
  Code2,
  CloudCog,
  Glasses,
  Menu,
  X
} from 'lucide-react';

const iconMap = {
  BrainCircuit,
  Factory,
  Network,
  UsersRound,
  ShieldCheck,
  Code2,
  CloudCog,
  Glasses,
  Sparkles
};

// Reusable Orbital Logo Component for animated paths around header text
const OrbitalLogo = ({ src, alt, radiusX, radiusY, startAngle, duration, clockwise = true, size = 120 }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  
  useEffect(() => {
    const speed = (2 * Math.PI) / (duration * 1000); // radians per millisecond
    const direction = clockwise ? 1 : -1;
    const startRad = (startAngle * Math.PI) / 180;
    
    let animFrame;
    const update = () => {
      const elapsed = performance.now();
      const angle = startRad + direction * speed * elapsed;
      
      const x = radiusX * Math.cos(angle);
      const y = radiusY * Math.sin(angle);
      
      setPosition({ x, y });
      animFrame = requestAnimationFrame(update);
    };
    
    animFrame = requestAnimationFrame(update);
    return () => cancelAnimationFrame(animFrame);
  }, [radiusX, radiusY, startAngle, duration, clockwise]);

  return (
    <motion.div
      whileHover={{ scale: 1.1 }}
      transition={{ type: 'spring', stiffness: 300, damping: 15 }}
      style={{
        position: 'absolute',
        top: '50%',
        left: '50%',
        x: `calc(-50% + ${position.x}px)`,
        y: `calc(-50% + ${position.y}px)`,
        width: `${size}px`,
        height: '80px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        cursor: 'pointer',
        zIndex: 10,
        pointerEvents: 'auto',
      }}
    >
      <img src={src} alt={alt} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
    </motion.div>
  );
};

function ServiceCard({ service, isMobile, index = 0 }) {
  const shouldReduceMotion = useReducedMotion();

  const service3dImages = [
    '/assets/image 179.png',
    '/assets/image 180.png',
    '/assets/image 181.png',
    '/assets/image 182.png',
    '/assets/image 184.png'
  ];

  const cardBackgrounds = [
    'radial-gradient(circle at 85% 15%, rgba(150, 45, 30, 0.45) 0%, rgba(22, 10, 11, 0.98) 55%)',
    'radial-gradient(circle at 85% 15%, rgba(20, 100, 140, 0.45) 0%, rgba(10, 18, 25, 0.98) 55%)',
    'radial-gradient(circle at 85% 15%, rgba(140, 50, 30, 0.4) 0%, rgba(20, 12, 12, 0.98) 55%)',
    'radial-gradient(circle at 85% 15%, rgba(15, 115, 140, 0.45) 0%, rgba(10, 19, 26, 0.98) 55%)',
    'radial-gradient(circle at 85% 15%, rgba(30, 90, 140, 0.45) 0%, rgba(12, 18, 28, 0.98) 55%)'
  ];

  const formatTitle = (title) => {
    if (title.includes('AI & Data')) return <>AI & Data<br/>Services</>;
    if (title.includes('Enterprise')) return <>Enterprise<br/>Software</>;
    if (title.includes('SAP')) return <>SAP Managed<br/>Services</>;
    if (title.includes('Smart')) return <>Smart<br/>Factory</>;
    if (title.includes('AR/VR')) return <>AR/VR &<br/>Immersive<br/>Technologies</>;
    return title;
  };

  const revealProps = shouldReduceMotion ? {} : {
    initial: { opacity: 0, y: 40 },
    whileInView: { opacity: 1, y: 0 },
    viewport: { once: true, amount: 0.15 },
    transition: {
      y: { type: 'tween', duration: 0.8, ease: [0.22, 1, 0.36, 1], delay: index * 0.1 },
      opacity: { duration: 0.8, ease: 'easeOut', delay: index * 0.1 }
    }
  };

  const current3dImg = service.image || service3dImages[index % service3dImages.length];

  return (
    <motion.div
      whileHover={isMobile ? {} : { y: -6, borderColor: 'rgba(255, 255, 255, 0.25)', boxShadow: '0 20px 40px rgba(0, 0, 0, 0.6)' }}
      {...revealProps}
      style={{
        flex: '0 0 auto',
        scrollSnapAlign: 'start',
        width: isMobile ? '300px' : '390px',
        minHeight: isMobile ? '560px' : '630px',
        background: cardBackgrounds[index % cardBackgrounds.length],
        backdropFilter: 'blur(16px)',
        borderRadius: '16px',
        border: '1px solid rgba(255, 255, 255, 0.12)',
        padding: isMobile ? '1.8rem 1.4rem' : '2.2rem 2rem',
        position: 'relative',
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        boxShadow: '0 10px 30px rgba(0, 0, 0, 0.4)',
        transition: 'all 0.3s ease'
      }}
    >
      {/* Background Watermark Number */}
      <div style={{
        position: 'absolute',
        bottom: '-25px',
        right: '15px',
        fontSize: isMobile ? '130px' : '170px',
        fontWeight: 900,
        color: 'rgba(255, 255, 255, 0.025)',
        lineHeight: '1',
        pointerEvents: 'none',
        userSelect: 'none',
        zIndex: 0
      }}>
        {service.number}
      </div>

      <div style={{ position: 'relative', zIndex: 2 }}>
        {/* Top Header Row with Title and 3D Graphic */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '1.8rem', minHeight: '120px' }}>
          <h3 style={{
            fontSize: isMobile ? '1.6rem' : '2.1rem',
            fontWeight: 500,
            color: '#ffffff',
            letterSpacing: '-0.02em',
            lineHeight: '1.18',
            margin: 0,
            maxWidth: '220px'
          }}>
            {formatTitle(service.title)}
          </h3>

          {/* 3D Graphic Image */}
          <div style={{
            width: isMobile ? '140px' : '185px',
            height: isMobile ? '140px' : '185px',
            flexShrink: 0,
            position: 'absolute',
            top: '-15px',
            right: '-15px',
            pointerEvents: 'none',
          }}>
            <img 
              src={assetUrl(current3dImg)} 
              alt={`${service.title} 3D Illustration`}
              style={{
                width: '100%',
                height: '100%',
                objectFit: 'contain',
                filter: 'drop-shadow(0 12px 25px rgba(0, 0, 0, 0.6))'
              }}
            />
          </div>
        </div>

        {/* Sub-text Section: Bold Statement + Description with Left Vertical Line */}
        <div style={{
          display: 'flex',
          gap: '0.85rem',
          marginBottom: '1.6rem'
        }}>
          <div style={{
            width: '3px',
            background: '#ffffff',
            borderRadius: '2px',
            flexShrink: 0
          }} />
          <div>
            <h4 style={{
              fontSize: isMobile ? '0.88rem' : '0.94rem',
              fontWeight: 700,
              color: '#ffffff',
              lineHeight: '1.4',
              margin: '0 0 0.5rem 0'
            }}>
              {service.boldStatement}
            </h4>
            <p style={{
              color: '#94a3b8',
              fontSize: isMobile ? '0.8rem' : '0.85rem',
              lineHeight: '1.5',
              margin: 0,
              fontWeight: 400
            }}>
              {service.description}
            </p>
          </div>
        </div>

        {/* Capabilities Bullet List */}
        <ul style={{
          listStyle: 'none',
          padding: 0,
          margin: 0,
          display: 'flex',
          flexDirection: 'column',
          gap: '0.7rem'
        }}>
          {service.capabilities.map((capability, idx) => {
            const parts = capability.split(/\s[–-]\s/);
            const boldText = parts.length > 1 ? parts[0] : null;
            const restText = parts.length > 1 ? parts.slice(1).join(' - ') : capability;

            return (
              <li key={idx} style={{
                display: 'flex',
                alignItems: 'flex-start',
                gap: '0.55rem',
                fontSize: isMobile ? '0.8rem' : '0.85rem',
                fontWeight: 400,
                color: '#94a3b8',
                lineHeight: '1.45'
              }}>
                <span style={{ color: '#ffffff', opacity: 0.9, fontSize: '0.95rem', marginTop: '0.05rem', fontWeight: 'bold' }}>»</span>
                <div>
                  {boldText ? <><strong style={{ color: '#ffffff', fontWeight: 600 }}>{boldText}</strong> – {restText}</> : restText}
                </div>
              </li>
            );
          })}
        </ul>
      </div>

      {/* Bottom Link CTA - commented out per user request
      <div style={{ position: 'relative', zIndex: 2, marginTop: '2rem' }}>
        <button
          type="button"
          onClick={() => {
            const footer = document.getElementById('contactus');
            if (footer) {
              footer.scrollIntoView({ behavior: 'smooth' });
            }
          }}
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: '0.4rem',
            color: '#ffffff',
            fontSize: isMobile ? '0.85rem' : '0.9rem',
            fontWeight: 600,
            background: 'none',
            border: 'none',
            padding: 0,
            cursor: 'pointer',
            transition: 'all 0.25s ease',
            opacity: 0.95
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.gap = '0.7rem';
            e.currentTarget.style.opacity = '1';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.gap = '0.4rem';
            e.currentTarget.style.opacity = '0.95';
          }}
        >
          <span>{service.cta || 'Explore Solutions'}</span>
          <ArrowRight size={16} />
        </button>
      </div>
      */}
    </motion.div>
  );
}

export default function App({ previewMode = false }) {
  const { content, loading } = useContent();
  const services = content.services?.items ?? [];
  const insights = content.insights?.items ?? [];
  const metrics = content.metrics ?? [];
  const hero = content.hero ?? {};
  const about = content.about ?? {};
  const partners = content.partners ?? { logos: [] };
  const certifications = content.certifications ?? { items: [] };
  const whyUs = content.whyUs ?? { cards: [], images: [] };
  const products = content.products ?? { items: [] };
  const footer = content.footer ?? { cta: {}, quickLinks: [], productLinks: [], social: [], legal: [] };

  // Tabs for Hero Section
  const [activeHeroTab, setActiveHeroTab] = useState('agile');
  // Carousel slide for Products
  const [activeProductIndex, setActiveProductIndex] = useState(0);
  // Active detail index in Services Section
  const [activeServiceIndex, setActiveServiceIndex] = useState(0);
  const [isMobile, setIsMobile] = useState(false);
  const [isCareersOpen, setIsCareersOpen] = useState(false);
  const [activeSection, setActiveSection] = useState('home');
  const [currentPage, setCurrentPage] = useState(() => {
    const hash = typeof window !== 'undefined' ? window.location.hash : '';
    if (hash === '#contact' || hash === '#contactus') return 'contact';
    if (hash === '#about' || hash === '#aboutus') return 'about';
    return 'home';
  });

  useEffect(() => {
    const syncPageFromHash = () => {
      const hash = window.location.hash;
      if (hash === '#contact' || hash === '#contactus') {
        setCurrentPage('contact');
        setActiveSection('contactus');
        window.scrollTo({ top: 0, behavior: 'smooth' });
      } else if (hash === '#about' || hash === '#aboutus') {
        setCurrentPage('about');
        setActiveSection('aboutus');
        window.scrollTo({ top: 0, behavior: 'smooth' });
      } else if (hash === '#home' || hash === '') {
        setCurrentPage('home');
      }
    };
    window.addEventListener('hashchange', syncPageFromHash);
    return () => window.removeEventListener('hashchange', syncPageFromHash);
  }, []);
  const [hoveredItem, setHoveredItem] = useState(null);
  const [showCareersAcknowledgement, setShowCareersAcknowledgement] = useState(false);
  const [isStrategyOpen, setIsStrategyOpen] = useState(false);
  const [showStrategyAcknowledgement, setShowStrategyAcknowledgement] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  // Careers Form Fields
  const [careersName, setCareersName] = useState('');
  const [careersEmail, setCareersEmail] = useState('');
  const [careersPhone, setCareersPhone] = useState('');
  const [careersFile, setCareersFile] = useState(null);

  // Strategy Form Fields
  const [strategyName, setStrategyName] = useState('');
  const [strategyEmail, setStrategyEmail] = useState('');
  const [strategyMobile, setStrategyMobile] = useState('');
  const [strategyDesignation, setStrategyDesignation] = useState('');
  const [strategyDateTime, setStrategyDateTime] = useState('');
  const [strategyInterests, setStrategyInterests] = useState({
    'AI & Analytics': false,
    'SAP Services': false,
    'XR Platforms': false,
    'Smart Factory': false,
    'Cloud Engineering': false,
    'Enterprise Software': false,
  });
  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 1024);
    };
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  const [flippingLogo, setFlippingLogo] = useState(null);

  useEffect(() => {
    const triggerRandomFlip = () => {
      const logoNumbers = [27, 28, 30, 31, 32, 33, 34, 35, 36];
      const randomNum = logoNumbers[Math.floor(Math.random() * logoNumbers.length)];
      setFlippingLogo(randomNum);
      
      // Clear flip after animation completes
      setTimeout(() => {
        setFlippingLogo(null);
      }, 1000);
    };

    // Trigger random flip every 3.5 seconds
    const interval = setInterval(triggerRandomFlip, 3500);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    if (previewMode || currentPage === 'contact') return;

    const handleScroll = () => {
      const sections = ['home', 'aboutus', 'services', 'whyus', 'products', 'insights', 'contactus'];
      const scrollPosition = window.scrollY + 120; // 120px offset for header height and visual center

      // Special case: if at the very bottom of the page, contactus is active
      if (window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 50) {
        setActiveSection('contactus');
        return;
      }

      for (const sectionId of sections) {
        const el = document.getElementById(sectionId);
        if (el) {
          const top = el.offsetTop;
          const height = el.offsetHeight;
          if (scrollPosition >= top && scrollPosition < top + height) {
            setActiveSection(sectionId);
            break;
          }
        }
      }
    };

    window.addEventListener('scroll', handleScroll);
    handleScroll(); // run once on mount
    return () => window.removeEventListener('scroll', handleScroll);
  }, [previewMode]);

  const getActiveNavItem = () => {
    if (currentPage === 'contact') return 'Contact Us';
    if (currentPage === 'about') return 'About Us';
    switch (activeSection) {
      case 'home':
        return 'Home';
      case 'aboutus':
      case 'services':
      case 'whyus':
        return 'About Us';
      case 'products':
      case 'insights':
        return 'Products';
      case 'contactus':
        return 'Contact Us';
      default:
        return 'Home';
    }
  };

  const servicesScrollRef = useRef(null);

  const scrollServices = (direction) => {
    if (servicesScrollRef.current) {
      const scrollAmount = isMobile ? 310 : 444; // card width + gap
      servicesScrollRef.current.scrollBy({
        left: direction === 'left' ? -scrollAmount : scrollAmount,
        behavior: 'smooth'
      });
    }
  };

  // Carousel for Insights
  const [insightIndex, setInsightIndex] = useState(0);
  const blogCarouselRef = useRef(null);

  const scrollBlogCarousel = (dir) => {
    if (blogCarouselRef.current) {
      const cardWidth = (isMobile ? window.innerWidth * 0.72 : 340) + 24;
      blogCarouselRef.current.scrollBy({ left: dir * cardWidth, behavior: 'smooth' });
    }
  };

  const sectionX = isMobile ? '1.25rem' : '4rem';
  const navItems = ['Home', 'About Us', 'Products', 'Careers', 'Contact Us'];
  const NAV_OFFSET = isMobile ? 72 : 88;

  const scrollToSection = (sectionId) => {
    if (sectionId === 'contactus') {
      const footer = document.getElementById('contactus');
      if (footer) {
        const top = footer.getBoundingClientRect().top + window.scrollY - NAV_OFFSET;
        window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
      } else {
        window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
      }
      setActiveSection('contactus');
      return;
    }

    const el = document.getElementById(sectionId);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - NAV_OFFSET;
    window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
    setActiveSection(sectionId);
  };

  const handleNavClick = (item) => {
    setMobileMenuOpen(false);
    if (item === 'Careers') {
      setIsCareersOpen(true);
      return;
    }

    if (item === 'Contact Us') {
      setCurrentPage('contact');
      setActiveSection('contactus');
      window.location.hash = 'contact';
      window.scrollTo({ top: 0, behavior: 'smooth' });
      return;
    }

    if (item === 'About Us') {
      setCurrentPage('about');
      setActiveSection('aboutus');
      window.location.hash = 'aboutus';
      window.scrollTo({ top: 0, behavior: 'smooth' });
      return;
    }

    const sectionMap = {
      Home: 'home',
      'About Us': 'aboutus',
      Products: 'products',
    };
    const id = sectionMap[item];

    if (currentPage !== 'home') {
      setCurrentPage('home');
      setActiveSection(id || 'home');
      window.location.hash = id || 'home';
      setTimeout(() => {
        if (id && id !== 'home') {
          scrollToSection(id);
        } else {
          window.scrollTo({ top: 0, behavior: 'smooth' });
        }
      }, 100);
      return;
    }

    if (!id) return;
    window.location.hash = id;
    setTimeout(() => scrollToSection(id), isMobile ? 150 : 0);
  };

  useEffect(() => {
    document.body.style.overflow = mobileMenuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileMenuOpen]);

  const heroTabs = [
    { id: 'agile', label: 'Agile Dev' },
    { id: 'fullstack', label: 'Full-Stack Tech' },
    { id: 'ai', label: 'AI & Analytics' },
    { id: 'devops', label: 'DevOps' }
  ];

  // Dummy contents for Hero tabs to make it feel alive
  const heroTabContent = {
    agile: { title: 'Rapid Iterative Delivery', desc: 'Accelerating release cycles through agile management and continuous deployment pipelines.' },
    fullstack: { title: 'Modern Core Architectures', desc: 'Scalable frontend, backend, and database infrastructures designed for ultimate reliability.' },
    ai: { title: 'Intelligent Automation', desc: 'Harnessing ML and LLM integrations to optimize workflows and drive business intelligence.' },
    devops: { title: 'Automated Operations', desc: 'Secure cloud hosting, zero-downtime deployments, and real-time environment monitoring.' }
  };

  const clients = [
    { name: 'TVS', logo: 'TVS' },
    { name: 'Hero', logo: 'Hero' },
    { name: 'V-Guard', logo: 'V-Guard' },
    { name: 'Muthoot', logo: 'Muthoot' },
    { name: 'MRF', logo: 'MRF' },
    { name: 'HDFC', logo: 'HDFC' }
  ];

  const whyChooseUs = [
    {
      title: 'Innovation Driven',
      desc: 'Integrating state-of-the-art technologies and custom automation architectures into your core workflows to future-proof business value.',
      icon: <Sparkles className="text-amber-500 w-8 h-8" />
    },
    {
      title: 'Industry Expertise',
      desc: 'Deep industry knowledge spanning insurance, fintech, operations, logistics, and highly regulated enterprise application suites.',
      icon: <Database className="text-blue-400 w-8 h-8" />
    },
    {
      title: 'Outcome Focused',
      desc: 'Committed to delivering measurable business impact, reduced infrastructure overhead, and highly optimized operational metrics.',
      icon: <TrendingUp className="text-cyan-400 w-8 h-8" />
    },
    {
      title: 'Customer Centric',
      desc: 'Collaborating hand-in-hand to build solutions tailored specifically to your unique workflow demands, users, and scaling plans.',
      icon: <Layers className="text-indigo-400 w-8 h-8" />
    }
  ];

  if (loading) {
    return (
      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#020710', color: '#94a3b8' }}>
        Loading...
      </div>
    );
  }

  return (
    <div style={{ backgroundColor: '#020710', color: '#ffffff', minHeight: '100vh', position: 'relative', display: 'flex', flexDirection: 'column', width: '100%' }}>
      
      {/* Main Content Wrapper with solid background and higher z-index for sticky footer parallax reveal */}
      <div style={{ position: 'relative', zIndex: 10, backgroundColor: '#020710', width: '100%', overflow: 'hidden' }}>
        
        {/* Background Glows */}
        <div style={{
          position: 'absolute', top: 0, left: '10%', right: '10%', height: '600px',
          background: 'radial-gradient(circle, rgba(0, 119, 255, 0.12) 0%, transparent 70%)',
          pointerEvents: 'none', zIndex: 0
        }} />
        <div style={{
          position: 'absolute', top: '1200px', right: '5%', width: '500px', height: '500px',
          background: 'radial-gradient(circle, rgba(255, 85, 0, 0.08) 0%, transparent 70%)',
          pointerEvents: 'none', zIndex: 0
        }} />
        <div style={{
          position: 'absolute', top: '2200px', left: '5%', width: '600px', height: '600px',
          background: 'radial-gradient(circle, rgba(0, 240, 255, 0.08) 0%, transparent 70%)',
          pointerEvents: 'none', zIndex: 0
        }} />

        {/* Navigation Bar */}
      <nav className="glass site-nav" style={{
        position: 'sticky', top: 0, zIndex: 50,
        padding: isMobile ? '0.85rem 1.25rem' : '1.2rem 4rem', 
        borderBottom: activeSection === 'products' ? '1px solid rgba(15, 23, 42, 0.08)' : '1px solid rgba(255, 255, 255, 0.05)'
      }}>
        <div style={{ maxWidth: '1440px', margin: '0 auto', width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div 
          style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}
          onClick={() => {
            setCurrentPage('home');
            setActiveSection('home');
            window.location.hash = 'home';
            window.scrollTo({ top: 0, behavior: 'smooth' });
          }}
        >
          <img src={assetUrl('/assets/cavin_logo.svg')} alt="Cavin Infotech Logo" style={{ height: isMobile ? '38px' : '50px', display: 'block' }} />
        </div>

        {!isMobile && (
        <div className="site-nav-links" style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>
          {navItems.map((item) => {
            const isLightSection = activeSection === 'products';
            const activeNavItem = getActiveNavItem();
            const isActive = activeNavItem === item;
            const isHovered = hoveredItem === item;
            
            let linkColor;
            if (isLightSection) {
              linkColor = (isActive || isHovered) ? '#b45309' : '#1e293b';
            } else {
              linkColor = (isActive || isHovered) ? '#ffaa00' : '#a0aec0';
            }

            return (
              <a 
                key={item} 
                href={item === 'Careers' ? undefined : `#${item.toLowerCase().replace(' ', '')}`} 
                onClick={(e) => {
                  e.preventDefault();
                  handleNavClick(item);
                }}
                style={{
                  color: linkColor, 
                  textDecoration: 'none', 
                  fontSize: '0.95rem', 
                  fontWeight: 500, 
                  transition: 'all 0.3s ease', 
                  cursor: 'pointer'
                }}
                onMouseEnter={() => setHoveredItem(item)}
                onMouseLeave={() => setHoveredItem(null)}
              >
                {item}
              </a>
            );
          })}
          <div className="btn-sparkle-wrapper">
            <img src={assetUrl('/assets/button_hover_effect.png')} className="btn-sparkles" alt="" />
            <button className="btn-talk" onClick={() => setIsStrategyOpen(true)}>
              Book a Strategy Call
            </button>
          </div>
        </div>
        )}

        {isMobile && (
          <button
            type="button"
            aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
            onClick={() => setMobileMenuOpen((open) => !open)}
            style={{
              background: 'rgba(255,255,255,0.06)',
              border: '1px solid rgba(255,255,255,0.12)',
              borderRadius: '8px',
              width: '42px',
              height: '42px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: activeSection === 'products' ? '#1e293b' : '#fff',
              cursor: 'pointer',
            }}
          >
            {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
          </button>
        )}
        </div>
      </nav>

      {isMobile && mobileMenuOpen && (
        <div
          className="mobile-menu-overlay"
          onClick={() => setMobileMenuOpen(false)}
          style={{
            position: 'fixed',
            inset: 0,
            background: 'rgba(2, 7, 16, 0.75)',
            backdropFilter: 'blur(6px)',
            zIndex: 60,
            display: 'flex',
            justifyContent: 'flex-end',
          }}
        >
          <div
            className="mobile-menu-panel"
            onClick={(e) => e.stopPropagation()}
            style={{
              width: 'min(85vw, 320px)',
              height: '100%',
              background: '#0a1628',
              borderLeft: '1px solid rgba(255,255,255,0.08)',
              padding: '1.5rem 1.25rem',
              display: 'flex',
              flexDirection: 'column',
              gap: '0.25rem',
            }}
          >
            {navItems.map((item) => (
              <button
                key={item}
                type="button"
                onClick={() => handleNavClick(item)}
                style={{
                  background: getActiveNavItem() === item ? 'rgba(255,170,0,0.12)' : 'transparent',
                  border: 'none',
                  color: getActiveNavItem() === item ? '#ffaa00' : '#e2e8f0',
                  textAlign: 'left',
                  padding: '0.85rem 1rem',
                  borderRadius: '8px',
                  fontSize: '1rem',
                  fontWeight: 500,
                  cursor: 'pointer',
                }}
              >
                {item}
              </button>
            ))}
            <button
              type="button"
              className="btn-talk"
              onClick={() => { setMobileMenuOpen(false); setIsStrategyOpen(true); }}
              style={{ marginTop: '1rem', width: '100%', minWidth: 'unset' }}
            >
              Book a Strategy Call
            </button>
          </div>
        </div>
      )}
      {currentPage === 'contact' ? (
        <ContactSection isMobile={isMobile} onOpenStrategy={() => setIsStrategyOpen(true)} />
      ) : currentPage === 'about' ? (
        <AboutUsPage isMobile={isMobile} onOpenStrategy={() => setIsStrategyOpen(true)} onNavigate={handleNavClick} />
      ) : (
        <>
          {/* Main Homepage Content */}
      <section id="home" style={{ 
        padding: isMobile ? '5.5rem 1.25rem 2rem' : '7.5rem 4rem 2.5rem 4rem', 
        textAlign: 'center', 
        position: 'relative', 
        zIndex: 10,
        height: '100vh',
        minHeight: '100vh',
        boxSizing: 'border-box',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'flex-start',
        overflow: 'hidden'
      }}>
        <div style={{ maxWidth: '1440px', margin: '0 auto', width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%' }}>

        {/* Background Video */}
        <video 
          autoPlay 
          loop 
          muted 
          playsInline 
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            zIndex: -1,
            pointerEvents: 'none'
          }}
        >
          <source src={assetUrl(hero.video)} type="video/mp4" />
          Your browser does not support the video tag.
        </video>



        <Reveal style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }}>
          {/* Badge */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: '0.5rem',
            backgroundColor: 'rgba(255, 255, 255, 0.05)', border: '1px solid rgba(255, 255, 255, 0.2)',
            borderRadius: '9999px', padding: '0.4rem 1.2rem', marginBottom: '1.2rem',
            backdropFilter: 'blur(10px)',
            boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4)'
          }}>
            <span style={{ color: '#ffffff', fontSize: '0.82rem', fontWeight: 500 }}>
              {(hero.badge || "Chennai & Dubai • Trusted by 100+ Clients").includes('100+ Clients') ? (
                <>
                  {(hero.badge || "Chennai & Dubai • Trusted by 100+ Clients").split('100+ Clients')[0]}
                  <span style={{ color: '#ffaa00', fontWeight: 700 }}>100+ Clients</span>
                  {(hero.badge || "Chennai & Dubai • Trusted by 100+ Clients").split('100+ Clients')[1]}
                </>
              ) : (
                hero.badge
              )}
            </span>
          </div>

          {/* Headline */}
          <h1 style={{
            fontSize: 'clamp(1.8rem, 3.6vw, 3.2rem)', fontWeight: 800, lineHeight: 1.15,
            maxWidth: '1000px', margin: '0 auto 1rem auto', letterSpacing: '-0.02em',
            filter: 'drop-shadow(0 8px 24px rgba(0, 0, 0, 0.8))',
            textShadow: '0 2px 10px rgba(0, 0, 0, 0.5)'
          }}>
            <span style={{ color: '#ffffff', display: 'block', fontSize: 'clamp(1.2rem, 2.5vw, 2.2rem)', marginBottom: '0.3rem', fontWeight: 600 }}>
              {hero.headline || "Engineering Intelligence"}
            </span>
            <span className="gradient-text-gold" style={{ display: 'block', fontSize: 'clamp(2rem, 4vw, 3.4rem)' }}>
              {hero.subheadline || "Delivering Impact"}
            </span>
          </h1>

          {/* Description */}
          <p style={{
            color: '#cbd5e1',
            fontSize: 'clamp(0.9rem, 1.1vw, 1.05rem)',
            lineHeight: 1.6,
            maxWidth: '760px',
            margin: '0 auto 1.8rem auto',
            fontWeight: 400,
            textAlign: 'center',
            textShadow: '0 2px 8px rgba(0, 0, 0, 0.7)'
          }}>
            {hero.description || "In a world driven by intelligence, data, and automation, organisations need more than technology they need a digital transformation partner that delivers measurable business impact."}
          </p>

          {/* CTA Buttons */}
          <div style={{
            display: 'flex',
            flexDirection: isMobile ? 'column' : 'row',
            gap: '1rem',
            alignItems: 'center',
            justify: 'center',
            width: isMobile ? '100%' : 'auto',
            marginBottom: '0'
          }}>
            <button
              type="button"
              className="btn-talk"
              onClick={() => scrollToSection('services')}
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                justify: 'center',
                gap: '0.5rem',
                padding: '0.8rem 1.75rem',
                borderRadius: '9999px',
                background: 'linear-gradient(135deg, #ffaa00 0%, #ff8800 100%)',
                color: '#000000',
                fontWeight: 700,
                fontSize: '0.95rem',
                border: 'none',
                cursor: 'pointer',
                boxShadow: '0 4px 20px rgba(255, 170, 0, 0.4)',
                transition: 'all 0.3s ease',
                width: isMobile ? '100%' : 'auto',
                minWidth: 'unset'
              }}
            >
              <span>{hero.primaryCta || "Power your next move"}</span>
              <ArrowRight size={18} />
            </button>

            <button
              type="button"
              onClick={() => setIsStrategyOpen(true)}
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                justify: 'center',
                gap: '0.5rem',
                padding: '0.8rem 1.75rem',
                borderRadius: '9999px',
                background: 'rgba(255, 255, 255, 0.06)',
                color: '#ffffff',
                fontWeight: 600,
                fontSize: '0.95rem',
                border: '1px solid rgba(255, 255, 255, 0.3)',
                cursor: 'pointer',
                backdropFilter: 'blur(10px)',
                transition: 'all 0.3s ease',
                width: isMobile ? '100%' : 'auto'
              }}
            >
              <span>{hero.secondaryCta || "Book a Strategy Call"}</span>
              <ArrowRight size={18} />
            </button>
          </div>
        </Reveal>
        </div>
      </section>


      {/* Metrics Section */}
      <section style={{ 
        padding: isMobile ? '3rem 1.25rem' : '4rem 4rem 2rem 4rem', 
        backgroundColor: '#020710', 
        position: 'relative', 
        zIndex: 10,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center'
      }}>
        {/* Statistics Panel */}
        <Reveal style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
          <div style={{
            background: 'rgba(25, 23, 21, 0.75)',
            padding: isMobile ? '1.5rem 1.2rem' : '1.2rem 3rem',
            display: 'flex',
            flexDirection: isMobile ? 'column' : 'row',
            gap: isMobile ? '1.2rem' : '2rem',
            justifyContent: isMobile ? 'center' : 'space-between',
            alignItems: 'center',
            width: '100%',
            maxWidth: '1100px',
            borderRadius: '16px',
            border: '1px solid rgba(255, 255, 255, 0.08)',
            backdropFilter: 'blur(20px)',
            marginTop: '0',
            marginBottom: '0',
            position: 'relative',
            zIndex: 20,
            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.8)'
          }}>
            {/* Metrics from CMS */}
            {metrics.map((metric, idx) => (
              <React.Fragment key={metric.label}>
                {idx > 0 && !isMobile && <div style={{ width: '1px', height: '30px', backgroundColor: 'rgba(255, 255, 255, 0.15)', flexShrink: 0 }} />}
                <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flex: '1 1 auto', minWidth: isMobile ? 'unset' : '150px', justifyContent: isMobile ? 'center' : 'flex-start' }}>
                  <div style={{
                    width: '42px', height: '42px', borderRadius: '50%', border: '1.5px solid rgba(255, 170, 0, 0.4)',
                    background: 'rgba(255, 170, 0, 0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0
                  }}>
                    {[<Zap key="z" size={18} style={{ color: '#ffaa00', flexShrink: 0 }} />, <Globe key="g" size={18} style={{ color: '#ffaa00', flexShrink: 0 }} />, <Layout key="l" size={18} style={{ color: '#ffaa00', flexShrink: 0 }} />, <Compass key="c" size={18} style={{ color: '#ffaa00', flexShrink: 0 }} />][idx % 4]}
                  </div>
                  <div style={{ textAlign: 'left' }}>
                    <span style={{ display: 'block', fontSize: '1.5rem', fontWeight: 800, color: '#ffffff', lineHeight: 1.1 }}>{metric.value}</span>
                    <span style={{ fontSize: '0.8rem', color: '#94a3b8' }}>{metric.label}</span>
                  </div>
                </div>
              </React.Fragment>
            ))}
          </div>
        </Reveal>
      </section>

      {/* Frost & Sullivan Alliance Section */}
      <section id="aboutus" style={{
        padding: isMobile ? '3.5rem 1.25rem' : '6.5rem 4rem 5.5rem 4rem',
        backgroundColor: '#020710',
        backgroundImage: `url('${assetUrl(about.backgroundImage)}')`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        textAlign: 'center',
        borderBottom: '1px solid rgba(255, 255, 255, 0.02)',
        position: 'relative'
      }}>
        <div style={{ maxWidth: '1440px', margin: '0 auto', width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <Reveal style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }}>
          {/* Subtle center spotlight lighting effect behind badge */}
          <div style={{
            position: 'absolute',
            bottom: '15%',
            left: '50%',
            transform: 'translateX(-50%)',
            width: '320px',
            height: '60px',
            background: 'radial-gradient(circle, rgba(255, 170, 0, 0.25) 0%, transparent 80%)',
            pointerEvents: 'none',
            zIndex: 0,
            filter: 'blur(10px)'
          }} />

          <h2 style={{
            fontSize: 'clamp(1.6rem, 2.8vw, 2.4rem)',
            fontWeight: 600,
            color: '#ffffff',
            marginBottom: '2.5rem',
            letterSpacing: '-0.02em',
            position: 'relative',
            zIndex: 1
          }}>
            {about.heading}
          </h2>
          
          {/* Frost & Sullivan Badge container */}
          <div style={{
            position: 'relative',
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            zIndex: 1,
            boxShadow: '0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(71, 115, 179, 0.15)',
            borderRadius: '4px',
            overflow: 'hidden'
          }}>
            <img 
              src={assetUrl(about.badgeImage)} 
              alt={about.badgeAlt} 
              style={{ 
                height: isMobile ? '40px' : '54px', 
                display: 'block', 
                maxWidth: '100%', 
                objectFit: 'contain' 
              }} 
            />
          </div>
        </Reveal>
        </div>
      </section>


      {/* Redesigned Trusted Brands Section */}
      <section style={{
        padding: isMobile ? '4rem 1.25rem' : '4rem 4rem',
        borderTop: '1px solid rgba(255, 255, 255, 0.03)',
        borderBottom: '1px solid rgba(255, 255, 255, 0.03)',
        background: '#020710',
        position: 'relative',
        overflow: 'hidden',
      }}>
        {/* Subtle grid background */}
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundImage: 'linear-gradient(rgba(255, 170, 0, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 170, 0, 0.02) 1px, transparent 1px)',
          backgroundSize: '50px 50px',
          opacity: 0.4,
          pointerEvents: 'none',
        }} />

        {/* Ambient Glows */}
        <div style={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          width: '500px',
          height: '500px',
          background: 'radial-gradient(circle, rgba(0, 119, 255, 0.05) 0%, transparent 70%)',
          pointerEvents: 'none',
          zIndex: 0,
        }} />

        <div style={{ maxWidth: '1440px', margin: '0 auto', width: '100%', position: 'relative', zIndex: 2 }}>
          <Reveal style={{ width: '100%' }}>
          {isMobile ? (
            /* Mobile Layout: Clean vertical hierarchy */
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '3rem', position: 'relative', zIndex: 2 }}>
              <div style={{ textAlign: 'center' }}>
                <h3 style={{ fontSize: '2rem', fontWeight: 800, marginBottom: '0.8rem', color: '#ffffff', letterSpacing: '-0.02em' }}>
                  {partners.heading}
                </h3>
                <h4 style={{ fontSize: '1.4rem', fontWeight: 700, color: '#a0aec0', marginBottom: '1rem' }}>
                  {partners.subheading}
                </h4>
                <p style={{ color: '#94a3b8', fontSize: '0.9rem', lineHeight: 1.5, maxWidth: '400px', margin: '0 auto' }}>
                  {partners.body}
                </p>
              </div>

              {/* Globe Visual */}
              <div style={{ position: 'relative', width: '280px', height: '280px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <img 
                  src={assetUrl('/assets/GlobeVector.svg')} 
                  alt="Globe Map" 
                  style={{ width: '100%', height: '100%', objectFit: 'contain', opacity: 0.3 }}
                />
              </div>

              {/* Grid of Logos */}
              <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(3, 1fr)',
                gap: '1.5rem 1rem',
                width: '100%',
                alignItems: 'center',
                justifyItems: 'center',
              }}>
                {partners.logos.map((logo, idx) => (
                  <div key={idx} style={{
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    height: '50px',
                    width: '100%',
                    padding: '0.2rem',
                  }}>
                    <img 
                      src={assetUrl(logo.image)} 
                      alt={logo.name} 
                      style={{ maxHeight: '100%', maxWidth: '100%', objectFit: 'contain' }}
                    />
                  </div>
                ))}
              </div>
            </div>
          ) : (
            /* Desktop Layout: Orbital Globe Layout as per reference image */
            <div style={{
              position: 'relative',
              width: '1100px',
              height: '800px',
              margin: '0 auto',
              zIndex: 2,
            }}>
              
              {/* Globe in background - Increased Size & Brightness */}
              <img 
                src={assetUrl('/assets/GlobeVector.svg')} 
                alt="Globe Map" 
                style={{
                  position: 'absolute',
                  width: '800px',
                  height: '800px',
                  top: '58%',
                  left: '50%',
                  transform: 'translate(-50%, -50%)',
                  objectFit: 'contain',
                  opacity: 0.55,
                  zIndex: 1,
                  pointerEvents: 'none',
                }}
              />

              {/* Center Text Panel */}
              <div style={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                zIndex: 5,
                textAlign: 'center',
                width: '420px',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
                <h3 style={{
                  fontSize: '2.2rem',
                  fontWeight: 800,
                  color: '#ffffff',
                  margin: '0 0 0.4rem 0',
                  letterSpacing: '-0.02em',
                  lineHeight: '1.2',
                }}>
                  {partners.heading}
                </h3>
                <span style={{
                  fontSize: '1.8rem',
                  fontWeight: 700,
                  color: '#cbd5e1',
                  margin: '0 0 1rem 0',
                  letterSpacing: '-0.02em',
                }}>
                  {partners.subheading}
                </span>
                <p style={{
                  color: '#94a3b8',
                  fontSize: '0.9rem',
                  lineHeight: '1.6',
                  margin: 0,
                  fontWeight: 500,
                  maxWidth: '340px',
                }}>
                  {partners.body}
                </p>
              </div>

              {/* orbital logos with smooth continuous motion in horizontally elongated oval paths - No Skewing */}
              {/* Outer Orbit - Increased size further to radiusX=520, radiusY=320 */}
              <OrbitalLogo src={assetUrl('/assets/Frame 33.svg')} alt="MRF Logo" radiusX={520} radiusY={320} startAngle={0} duration={60} clockwise={true} size={170} />
              <OrbitalLogo src={assetUrl('/assets/Frame 31.svg')} alt="ACA Global Logo" radiusX={520} radiusY={320} startAngle={78} duration={60} clockwise={true} size={175} />
              <OrbitalLogo src={assetUrl('/assets/Frame 30.svg')} alt="Polyhose Logo" radiusX={520} radiusY={320} startAngle={144} duration={60} clockwise={true} size={170} />
              <OrbitalLogo src={assetUrl('/assets/Frame 32.svg')} alt="Dawn Pictures Logo" radiusX={520} radiusY={320} startAngle={216} duration={60} clockwise={true} size={180} />
              <OrbitalLogo src={assetUrl('/assets/Frame 35.svg')} alt="Hero Logo" radiusX={520} radiusY={320} startAngle={282} duration={60} clockwise={true} size={170} />

              {/* Inner Orbit - Adjusted size to radiusX=360, radiusY=225 */}
              <OrbitalLogo src={assetUrl('/assets/Frame 28.svg')} alt="Valeo Logo" radiusX={360} radiusY={225} startAngle={36} duration={40} clockwise={false} size={170} />
              <OrbitalLogo src={assetUrl('/assets/Frame 36.svg')} alt="BorgWarner Logo" radiusX={360} radiusY={225} startAngle={108} duration={40} clockwise={false} size={170} />
              <OrbitalLogo src={assetUrl('/assets/kone.png')} alt="KONE Logo" radiusX={360} radiusY={225} startAngle={180} duration={40} clockwise={false} size={160} />
              <OrbitalLogo src={assetUrl('/assets/Frame 34.svg')} alt="Chola MS Logo" radiusX={360} radiusY={225} startAngle={252} duration={40} clockwise={false} size={170} />
              <OrbitalLogo src={assetUrl('/assets/Frame 27.svg')} alt="CavinKare Logo" radiusX={360} radiusY={225} startAngle={324} duration={40} clockwise={false} size={180} />

            </div>
          )}
        </Reveal>
        </div>
      </section>


      {/* Certifications Section */}
      <section id="certifications" style={{
        padding: isMobile ? '3rem 1.25rem' : '5rem 4rem',
        backgroundColor: '#020710',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        textAlign: 'center',
        borderBottom: '1px solid rgba(255, 255, 255, 0.03)'
      }}>
        <div style={{ maxWidth: '1440px', margin: '0 auto', width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <Reveal>
          <h2 style={{
            fontSize: 'clamp(1.8rem, 3.2vw, 2.5rem)',
            fontWeight: 600,
            color: '#e2e8f0',
            marginBottom: '3.5rem',
            letterSpacing: '-0.02em',
            opacity: 0.9
          }}>
            {certifications.heading}
          </h2>
        </Reveal>
        
        <div style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          gap: isMobile ? '1.5rem' : '5rem',
          flexWrap: 'wrap'
        }}>
          {certifications.items.map((cert, idx) => (
            <Reveal key={cert.alt || idx} delay={idx * 0.1}>
              <div style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                height: '110px',
                padding: '0 0.5rem',
                transition: 'all 0.3s ease'
              }}>
                <img 
                  src={assetUrl(cert.image)} 
                  alt={cert.alt} 
                  style={{
                    height: '100%',
                    maxHeight: '105px',
                    width: 'auto',
                    maxWidth: '260px',
                    objectFit: 'contain'
                  }} 
                />
              </div>
            </Reveal>
          ))}
        </div>
        </div>
      </section>
      {/* Services Section */}
      <section id="services" style={{ 
        padding: isMobile ? '4rem 0' : '96px 0', 
        backgroundColor: '#070d18', 
        position: 'relative',
        overflow: 'hidden',
        borderBottom: '1px solid rgba(255, 255, 255, 0.04)'
      }}>
        {/* Background Ambient Glow matching screenshot */}
        <div style={{
          position: 'absolute',
          top: '0%',
          right: '0%',
          width: '700px',
          height: '700px',
          background: 'radial-gradient(circle at 80% 20%, rgba(30, 85, 145, 0.22) 0%, transparent 60%)',
          pointerEvents: 'none',
          zIndex: 0
        }} />

        <div style={{
          maxWidth: '1440px',
          margin: '0 auto',
          padding: isMobile ? '0 1.25rem' : '0 4rem',
          display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          alignItems: 'stretch',
          gap: isMobile ? '2.5rem' : '40px',
          position: 'relative',
          zIndex: 1
        }}>
          {/* Left Column - Intro Panel */}
          <Reveal style={{
            flex: isMobile ? '1' : '0 0 260px',
            width: isMobile ? '100%' : '260px',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            position: 'relative'
          }}>
            <div>
              <h2 style={{
                color: '#ffffff',
                fontSize: isMobile ? '2.2rem' : '2.9rem',
                fontWeight: 400,
                letterSpacing: '-0.02em',
                margin: '0 0 1rem 0',
                lineHeight: '1.1'
              }}>
                Our Services
              </h2>
              <span style={{
                color: '#8c9ba5',
                fontSize: '0.78rem',
                fontWeight: 500,
                textTransform: 'uppercase',
                letterSpacing: '0.06em',
                display: 'block',
                marginBottom: '2rem',
                lineHeight: '1.4'
              }}>
                TECHNOLOGY THAT MOVES YOUR BUSINESS FORWARD.
              </span>
              <p style={{
                color: '#8c9ba5',
                fontSize: isMobile ? '0.88rem' : '0.92rem',
                lineHeight: '1.65',
                margin: '0 0 2rem 0',
                fontWeight: 400
              }}>
                From market leaders to high-growth innovators enterprises trust Cavin Infotech to deliver secure, scalable, and future-ready digital solutions that create measurable business value.
              </p>
            </div>

            {/* Navigation buttons at the bottom matching screenshot */}
            <div style={{
              display: 'flex',
              gap: '10px',
              marginTop: isMobile ? '1.5rem' : 'auto',
              justifyContent: 'flex-start'
            }}>
              {/* Left Button */}
              <button 
                onClick={() => scrollServices('left')}
                style={{
                  width: '42px',
                  height: '42px',
                  borderRadius: '4px',
                  background: 'rgba(255, 255, 255, 0.03)',
                  border: '1px solid rgba(255, 255, 255, 0.2)',
                  color: '#ffffff',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  cursor: 'pointer',
                  padding: 0,
                  transition: 'all 0.2s'
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = 'rgba(255, 255, 255, 0.03)';
                }}
                aria-label="Scroll left"
              >
                <ChevronLeft size={18} strokeWidth={2.5} />
              </button>

              {/* Right Button */}
              <button 
                onClick={() => scrollServices('right')}
                style={{
                  width: '42px',
                  height: '42px',
                  borderRadius: '4px',
                  background: '#ffffff',
                  border: '1px solid #ffffff',
                  color: '#070d18',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  cursor: 'pointer',
                  padding: 0,
                  transition: 'all 0.2s'
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.opacity = '0.9';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.opacity = '1';
                }}
                aria-label="Scroll right"
              >
                <ChevronRight size={18} strokeWidth={2.5} />
              </button>
            </div>
          </Reveal>

          {/* Right Column - Horizontal scroll container */}
          <div style={{
            flexGrow: 1,
            overflow: 'visible',
            width: isMobile ? '100%' : 'calc(100% - 364px)'
          }}>
            <Reveal style={{ width: '100%' }}>
              <div 
                ref={servicesScrollRef}
                className="services-carousel"
                style={{
                  display: 'flex',
                  gap: isMobile ? '1rem' : '24px',
                  overflowX: 'auto',
                  overflowY: 'hidden',
                  scrollSnapType: 'x mandatory',
                  paddingBottom: '2rem',
                  paddingTop: '0.5rem',
                  scrollbarWidth: 'none',
                  msOverflowStyle: 'none',
                  boxSizing: 'border-box'
                }}
              >
                {services.map((service, index) => (
                  <ServiceCard 
                    key={service.id}
                    service={service} 
                    isMobile={isMobile}
                    index={index}
                  />
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Why Cavin Infotech Section */}
      {/* Why Cavin Infotech Section */}
      <section id="whyus" style={{ padding: isMobile ? '4rem 1.25rem' : '6rem 4rem', background: 'rgba(5, 16, 34, 0.3)', position: 'relative' }}>
        <div style={{ maxWidth: '1440px', margin: '0 auto', position: 'relative', zIndex: 10 }}>
          {/* Section Header - Left Aligned */}
          <div style={{ textAlign: 'left', marginBottom: '3rem' }}>
            <Reveal>
              <h2 style={{ fontSize: 'clamp(2.2rem, 3.2vw, 2.8rem)', fontWeight: 400, marginTop: 0, color: '#ffffff', marginBottom: '0.4rem', letterSpacing: '-0.02em' }}>
                Why Organizations choose us
              </h2>
              <span style={{ color: '#8c9ba5', fontSize: '0.78rem', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
                BUILT ON ENTERPRISE EXPERIENCE, DRIVEN BY EXECUTION.
              </span>
            </Reveal>
          </div>

        {isMobile ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', position: 'relative', zIndex: 10 }}>
            {/* The Expertise Edge */}
            <Reveal delay={0}>
              <div className="glass-card" style={{
                padding: '2rem 1.8rem',
                borderRadius: '16px',
                background: 'linear-gradient(135deg, rgba(80, 105, 145, 0.4) 0%, rgba(9, 14, 24, 0.98) 100%)',
                border: '1px solid rgba(255, 255, 255, 0.12)',
                position: 'relative',
                overflow: 'hidden'
              }}>
                <h3 style={{ fontSize: '1.6rem', fontWeight: 500, color: '#ffffff', margin: 0 }}>The Expertise Edge</h3>
                <div style={{ width: '100%', height: '1px', backgroundColor: 'rgba(255, 255, 255, 0.12)', margin: '1.2rem 0' }} />
                <p style={{ color: '#8c9ba5', fontSize: '0.9rem', lineHeight: '1.6', margin: 0 }}>
                  Deep manufacturing domain expertise + certified SAP mastery + production-grade AI engineering. We don't just consult - we've lived your challenges.
                </p>
              </div>
            </Reveal>

            {/* Speed That Sets Us Apart */}
            <Reveal delay={0.1}>
              <div className="glass-card" style={{
                padding: '2rem 1.8rem',
                borderRadius: '16px',
                background: 'radial-gradient(ellipse at 25% 30%, rgba(210, 135, 25, 0.2) 0%, rgba(9, 14, 24, 0.98) 70%)',
                border: '1px solid rgba(255, 255, 255, 0.12)',
                position: 'relative',
                overflow: 'hidden'
              }}>
                <h3 style={{ fontSize: '1.6rem', fontWeight: 500, color: '#ffffff', margin: 0 }}>Speed That Sets Us Apart</h3>
                <div style={{ width: '100%', height: '1px', backgroundColor: 'rgba(255, 255, 255, 0.12)', margin: '1.2rem 0' }} />
                <p style={{ color: '#8c9ba5', fontSize: '0.9rem', lineHeight: '1.6', margin: 0 }}>
                  In just five years, we've delivered what takes most companies decades - with clean architecture, zero bureaucracy, and exceptional quality.
                </p>
              </div>
            </Reveal>

            {/* Proven Platforms, Real Impact */}
            <Reveal delay={0.2}>
              <div className="glass-card" style={{
                padding: '2rem 1.8rem',
                borderRadius: '16px',
                background: 'radial-gradient(ellipse at 25% 30%, rgba(210, 135, 25, 0.2) 0%, rgba(9, 14, 24, 0.98) 70%)',
                border: '1px solid rgba(255, 255, 255, 0.12)',
                position: 'relative',
                overflow: 'hidden'
              }}>
                <h3 style={{ fontSize: '1.6rem', fontWeight: 500, color: '#ffffff', margin: 0 }}>Proven Platforms, Real Impact</h3>
                <div style={{ width: '100%', height: '1px', backgroundColor: 'rgba(255, 255, 255, 0.12)', margin: '1.2rem 0' }} />
                <p style={{ color: '#8c9ba5', fontSize: '0.9rem', lineHeight: '1.6', margin: '0 0 1rem 0' }}>
                  PRODMAX and Nebula AI Platform are not pilots - they're delivering measurable gains in factories right now.
                </p>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, color: '#8c9ba5', fontSize: '0.86rem', lineHeight: '1.6' }}>
                  <li>• Up to 30% reduction in operational overheads</li>
                  <li>• Real-time visibility across 100+ connected machines</li>
                  <li>• End-to-end traceability from raw materials to dispatch</li>
                </ul>
              </div>
            </Reveal>

            {/* Results We Stand By */}
            <Reveal delay={0.3}>
              <div className="glass-card" style={{
                borderRadius: '16px',
                background: `linear-gradient(to bottom, rgba(9, 14, 24, 0.98) 0%, rgba(9, 14, 24, 0.92) 50%, rgba(9, 14, 24, 0.3) 70%), url(${assetUrl('/assets/whyus_teamwork_user.jpg')})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                border: '1px solid rgba(255, 255, 255, 0.12)',
                padding: '2rem 1.8rem',
                minHeight: '380px'
              }}>
                <h3 style={{ fontSize: '1.6rem', fontWeight: 500, color: '#ffffff', margin: 0 }}>Results We Stand By</h3>
                <div style={{ width: '100%', height: '1px', backgroundColor: 'rgba(255, 255, 255, 0.12)', margin: '1.2rem 0' }} />
                <p style={{ color: '#8c9ba5', fontSize: '0.9rem', lineHeight: '1.6', margin: 0 }}>
                  We track what matters: productivity, cost savings, OEE, ROI, and business impact. Transformation only counts when it shows in your numbers.
                </p>
              </div>
            </Reveal>
          </div>
        ) : (
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1.2fr 1.6fr 2.2fr 1.2fr 2.4fr',
            gridTemplateRows: 'auto auto',
            gap: '1.25rem',
            alignItems: 'stretch',
            position: 'relative',
            zIndex: 10
          }}>
            {/* The Expertise Edge (Col 1 to 3, Row 1) */}
            <Reveal delay={0} style={{ height: '100%', gridColumn: '1 / 3', gridRow: '1' }}>
              <div className="glass-card" style={{
                padding: '2.2rem',
                borderRadius: '16px',
                background: 'linear-gradient(135deg, rgba(80, 105, 145, 0.45) 0%, rgba(30, 45, 70, 0.7) 40%, rgba(9, 14, 24, 0.98) 100%)',
                border: '1px solid rgba(255, 255, 255, 0.12)',
                position: 'relative',
                overflow: 'hidden',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'flex-start',
                height: '100%',
                boxSizing: 'border-box'
              }}>
                {/* Arc overlay */}
                <div style={{ position: 'absolute', top: '-20%', right: '-20%', width: '220px', height: '220px', borderRadius: '50%', border: '1px solid rgba(255, 255, 255, 0.08)', pointerEvents: 'none' }} />
                <div style={{ position: 'absolute', top: '-35%', right: '-35%', width: '300px', height: '300px', borderRadius: '50%', border: '1px solid rgba(255, 255, 255, 0.05)', pointerEvents: 'none' }} />
                
                <h3 style={{ fontSize: '1.8rem', fontWeight: 500, color: '#ffffff', lineHeight: '1.2', margin: '0 0 2.5rem 0', maxWidth: '200px' }}>
                  The Expertise Edge
                </h3>
                <div style={{ width: '100%', height: '1px', backgroundColor: 'rgba(255, 255, 255, 0.15)', margin: '0 0 1.5rem 0' }} />
                <p style={{ color: '#8c9ba5', fontSize: '0.88rem', lineHeight: '1.6', margin: 0, fontWeight: 400 }}>
                  Deep manufacturing domain expertise + certified SAP mastery + production-grade AI engineering. We don't just consult - we've lived your challenges.
                </p>
              </div>
            </Reveal>

            {/* Speed That Sets Us Apart (Col 3 to 5, Row 1) */}
            <Reveal delay={0.1} style={{ height: '100%', gridColumn: '3 / 5', gridRow: '1' }}>
              <div className="glass-card" style={{
                padding: '2.2rem',
                borderRadius: '16px',
                background: 'radial-gradient(ellipse at 25% 30%, rgba(210, 135, 25, 0.22) 0%, rgba(9, 14, 24, 0.98) 70%)',
                border: '1px solid rgba(255, 255, 255, 0.12)',
                position: 'relative',
                overflow: 'hidden',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'flex-start',
                height: '100%',
                boxSizing: 'border-box'
              }}>
                <div style={{ position: 'absolute', top: '-20%', right: '-20%', width: '220px', height: '220px', borderRadius: '50%', border: '1px solid rgba(255, 255, 255, 0.05)', pointerEvents: 'none' }} />
                
                <h3 style={{ fontSize: '1.8rem', fontWeight: 500, color: '#ffffff', lineHeight: '1.25', margin: '0 0 2.5rem 0', maxWidth: '240px' }}>
                  Speed That Sets Us Apart
                </h3>
                <div style={{ width: '100%', height: '1px', backgroundColor: 'rgba(255, 255, 255, 0.15)', margin: '0 0 1.5rem 0' }} />
                <p style={{ color: '#8c9ba5', fontSize: '0.88rem', lineHeight: '1.6', margin: 0, fontWeight: 400, maxWidth: '95%' }}>
                  In just five years, we've delivered what takes most companies decades - with clean architecture, zero bureaucracy, and exceptional quality.
                </p>
              </div>
            </Reveal>

            {/* Results We Stand By Tall Card (Col 5, Row 1 & 2) */}
            <Reveal delay={0.2} style={{ height: '100%', gridColumn: '5', gridRow: '1 / 3' }}>
              <div className="glass-card" style={{
                borderRadius: '16px',
                border: '1px solid rgba(255, 255, 255, 0.12)',
                position: 'relative',
                overflow: 'hidden',
                backgroundImage: `linear-gradient(to bottom, rgba(9, 14, 24, 0.98) 0%, rgba(9, 14, 24, 0.92) 42%, rgba(9, 14, 24, 0.2) 58%, transparent 75%), url(${assetUrl('/assets/whyus_teamwork_user.jpg')})`,
                backgroundSize: 'cover',
                backgroundPosition: 'bottom center',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'flex-start',
                padding: '2.2rem',
                height: '100%',
                boxSizing: 'border-box'
              }}>
                <div>
                  <h3 style={{ fontSize: '1.8rem', fontWeight: 500, color: '#ffffff', lineHeight: '1.2', margin: '0 0 1.5rem 0' }}>
                    Results We Stand By
                  </h3>
                  <p style={{ color: '#8c9ba5', fontSize: '0.88rem', lineHeight: '1.6', margin: 0, fontWeight: 400 }}>
                    We track what matters: productivity, cost savings, OEE, ROI, and business impact. Transformation only counts when it shows in your numbers.
                  </p>
                </div>
              </div>
            </Reveal>

            {/* Image Card 1 (Col 1, Row 2) */}
            <Reveal delay={0.3} style={{ height: '100%', gridColumn: '1', gridRow: '2' }}>
              <div style={{
                borderRadius: '16px',
                overflow: 'hidden',
                border: '1px solid rgba(255, 255, 255, 0.12)',
                height: '100%',
                minHeight: '260px'
              }}>
                <img 
                  src={assetUrl('/assets/Indian Financial Advisers Stock Market Strategy.jpg')} 
                  alt="Financial Advisers & Strategy" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                />
              </div>
            </Reveal>

            {/* Proven Platforms, Real Impact (Col 2 to 4, Row 2) */}
            <Reveal delay={0.4} style={{ height: '100%', gridColumn: '2 / 4', gridRow: '2' }}>
              <div className="glass-card" style={{
                padding: '2.2rem',
                borderRadius: '16px',
                background: 'radial-gradient(ellipse at 25% 25%, rgba(210, 135, 25, 0.2) 0%, rgba(9, 14, 24, 0.98) 70%)',
                border: '1px solid rgba(255, 255, 255, 0.12)',
                position: 'relative',
                overflow: 'hidden',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'flex-start',
                height: '100%',
                boxSizing: 'border-box'
              }}>
                <div style={{ position: 'absolute', top: '-20%', right: '-20%', width: '220px', height: '220px', borderRadius: '50%', border: '1px solid rgba(255, 255, 255, 0.05)', pointerEvents: 'none' }} />
                
                <h3 style={{ fontSize: '1.7rem', fontWeight: 500, color: '#ffffff', lineHeight: '1.25', margin: '0 0 1.2rem 0', maxWidth: '240px' }}>
                  Proven Platforms, Real Impact
                </h3>
                <p style={{ color: '#8c9ba5', fontSize: '0.86rem', lineHeight: '1.55', margin: '0 0 1.2rem 0', fontWeight: 400 }}>
                  PRODMAX and Nebula AI Platform are not pilots - they're delivering measurable gains in factories right now.
                </p>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, color: '#8c9ba5', fontSize: '0.84rem', lineHeight: '1.6', display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
                  <li>• Up to 30% reduction in operational overheads</li>
                  <li>• Real-time visibility across 100+ connected machines</li>
                  <li>• End-to-end traceability from raw materials to dispatch</li>
                </ul>
              </div>
            </Reveal>

            {/* Image Card 2 (Col 4, Row 2) */}
            <Reveal delay={0.5} style={{ height: '100%', gridColumn: '4', gridRow: '2' }}>
              <div style={{
                borderRadius: '16px',
                overflow: 'hidden',
                border: '1px solid rgba(255, 255, 255, 0.12)',
                height: '100%',
                minHeight: '260px'
              }}>
                <img 
                  src={assetUrl('/assets/side-view-people-working-together.jpg')} 
                  alt="People working together" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                />
              </div>
            </Reveal>
          </div>
        )}
        </div>
      </section>

      {/* Featured Gallery Section */}
      <Reveal>
        <FeaturedGallery gallery={content.gallery} />
      </Reveal>

      {/* Products Suite */}
      <section id="products" style={{ 
        padding: isMobile ? '4rem 1.25rem' : '6rem 4rem', 
        background: 'linear-gradient(180deg, #2791a5 0%, #0f4652 35%, #020710 100%)',
        position: 'relative', 
        overflow: 'hidden' 
      }}>
        {/* Wave Pattern Overlay */}
        <img
          src={assetUrl('/assets/Wave Pattern 2.svg')}
          alt=""
          aria-hidden="true"
          style={{
            position: 'absolute',
            top: '-50%',
            left: 0,
            width: '100%',
            height: '180%',
            objectFit: 'cover',
            objectPosition: 'center top',
            opacity: 0.42,
            pointerEvents: 'none',
            zIndex: 1
          }}
        />
        <div style={{ maxWidth: '1440px', margin: '0 auto', width: '100%', position: 'relative', zIndex: 10 }}>
        {/* Header - Left Aligned matching screenshot */}
        <Reveal>
          <div style={{ textAlign: 'left', marginBottom: '3.5rem', position: 'relative', zIndex: 10 }}>
            <h2 style={{ fontSize: 'clamp(2.2rem, 3.2vw, 2.8rem)', fontWeight: 500, color: '#ffffff', margin: '0 0 0.4rem 0', letterSpacing: '-0.02em' }}>
              {products.title || 'Our Products Suite'}
            </h2>
            <span style={{ color: '#8c9ba5', fontSize: '0.78rem', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.08em', display: 'block' }}>
              {products.eyebrow || 'ONE ECOSYSTEM. EXPONENTIAL IMPACT.'}
            </span>
          </div>
        </Reveal>

        {/* Product Cards Grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fit, minmax(320px, 1fr))',
          gap: isMobile ? '1.5rem' : '2.5rem',
          alignItems: 'stretch',
          position: 'relative',
          zIndex: 10,
          marginBottom: '2.5rem'
        }}>
          {products.items.map((item, index) => (
            <ProductCard
              key={item.name || index}
              product={item}
              isMobile={isMobile}
              delay={index * 0.1}
              index={index}
            />
          ))}
        </div>

        {/* Sub-text below product cards */}
        <p style={{
          color: '#8c9ba5',
          fontSize: '0.88rem',
          textAlign: 'center',
          maxWidth: '850px',
          margin: '0 auto 1.8rem auto',
          lineHeight: '1.5',
          fontWeight: 400
        }}>
          Plus many more specialized solutions: LiveWire, Nucleus, Digital Meeting Agenda, SEC, XR Workbench, TMS, and others - purpose-built for manufacturing and enterprise excellence.
        </p>

        {/* Bottom CTA Button */}
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <button
            type="button"
            onClick={() => scrollToSection('contactus')}
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: '0.6rem',
              background: 'rgba(255, 255, 255, 0.05)',
              border: '1.5px solid rgba(255, 255, 255, 0.35)',
              boxShadow: '0 8px 25px rgba(0, 0, 0, 0.3)',
              borderRadius: '50px',
              color: '#ffffff',
              padding: '0.75rem 2rem',
              fontSize: '0.92rem',
              fontWeight: 600,
              cursor: 'pointer',
              transition: 'all 0.25s ease',
              backdropFilter: 'blur(10px)'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = 'rgba(255, 255, 255, 0.12)';
              e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.6)';
              e.currentTarget.style.transform = 'translateY(-2px)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)';
              e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.35)';
              e.currentTarget.style.transform = 'translateY(0)';
            }}
          >
            <span>Explore Our Full Product Suite</span>
            <ArrowRight size={16} />
          </button>
        </div>
        </div>
      </section>

      {/* Insights Section */}
      <section id="insights" style={{ padding: isMobile ? '3.5rem 0 4rem' : '5rem 0 6rem 0', background: '#020c1e' }}>
        <div style={{ maxWidth: '1440px', margin: '0 auto', width: '100%' }}>
        {/* Header */}
        <Reveal style={{
          padding: isMobile ? '0 1.25rem' : '0 4rem',
          display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          justifyContent: 'space-between',
          alignItems: isMobile ? 'stretch' : 'flex-start',
          gap: isMobile ? '1.25rem' : '0',
          marginBottom: isMobile ? '2rem' : '3rem',
        }}>
          <div style={{ maxWidth: '680px' }}>
            <h2 style={{ fontSize: 'clamp(1.8rem, 3vw, 2.6rem)', fontWeight: 700, color: '#ffffff', lineHeight: 1.25, marginBottom: '1rem', letterSpacing: '-0.02em' }}>
              {content.insights.title}
            </h2>
            <p style={{ color: '#64748b', fontSize: '0.82rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', lineHeight: 1.6, maxWidth: '540px' }}>
              {content.insights.subtitle}
            </p>
          </div>

          {/* Nav Arrows */}
          <div style={{ display: 'flex', gap: '0.6rem', alignItems: 'center', flexShrink: 0, marginTop: '0.5rem' }}>
            <button
              onClick={() => scrollBlogCarousel(-1)}
              style={{
                width: '42px', height: '42px', borderRadius: '8px',
                background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                cursor: 'pointer', color: '#ffffff', transition: 'all 0.2s ease'
              }}
              onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,170,0,0.15)'; e.currentTarget.style.borderColor = '#ffaa00'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)'; }}
            >
              <ArrowRight size={16} style={{ transform: 'rotate(180deg)' }} />
            </button>
            <button
              onClick={() => scrollBlogCarousel(1)}
              style={{
                width: '42px', height: '42px', borderRadius: '8px',
                background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                cursor: 'pointer', color: '#ffffff', transition: 'all 0.2s ease'
              }}
              onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,170,0,0.15)'; e.currentTarget.style.borderColor = '#ffaa00'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)'; }}
            >
              <ArrowRight size={16} />
            </button>
          </div>
        </Reveal>

        {/* Carousel Container */}
        <Reveal style={{ width: '100%' }}>
          <div
            ref={blogCarouselRef}
            style={{
              display: 'flex',
              gap: '1.5rem',
              overflowX: 'auto',
              overflowY: 'hidden',
              scrollSnapType: 'x mandatory',
              scrollPaddingLeft: isMobile ? '1.25rem' : '4rem',
              paddingLeft: isMobile ? '1.25rem' : '4rem',
              paddingRight: isMobile ? '1.25rem' : '4rem',
              paddingBottom: '1.5rem',
              paddingTop: '0.5rem',
              scrollbarWidth: 'none',
              msOverflowStyle: 'none',
              boxSizing: 'border-box',
            }}
            className="blog-carousel"
          >
            {insights.map((insight, idx) => (
              <Reveal
                key={idx}
                delay={idx * 0.1}
                style={{
                  flex: isMobile ? '0 0 72vw' : '0 0 340px',
                  minWidth: isMobile ? '72vw' : '340px',
                  height: '420px',
                  scrollSnapAlign: 'start',
                  flexShrink: 0,
                }}
              >
                <div
                  className="blog-card"
                  style={{
                    width: '100%',
                    height: '100%',
                    borderRadius: '14px',
                    overflow: 'hidden',
                    position: 'relative',
                    cursor: 'pointer',
                    border: '1px solid rgba(255,255,255,0.08)',
                    transition: 'all 0.35s cubic-bezier(0.4,0,0.2,1)',
                    boxShadow: '0 4px 30px rgba(0,0,0,0.5)',
                  }}
                  onMouseEnter={e => {
                    e.currentTarget.style.borderColor = 'rgba(255,170,0,0.35)';
                    e.currentTarget.style.boxShadow = '0 16px 48px rgba(255,170,0,0.12)';
                    e.currentTarget.style.transform = 'translateY(-5px)';
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
                    e.currentTarget.style.boxShadow = '0 4px 30px rgba(0,0,0,0.5)';
                    e.currentTarget.style.transform = 'translateY(0)';
                  }}
                >
                  {/* Full-bleed image */}
                  <img
                    src={assetUrl(insight.image)}
                    alt={insight.title}
                    className="blog-card-img"
                    style={{
                      position: 'absolute', inset: 0,
                      width: '100%', height: '100%',
                      objectFit: 'cover', objectPosition: 'center top',
                      display: 'block',
                      transition: 'transform 0.6s ease',
                    }}
                  />

                  {/* Subtle top gradient so image top isn't too harsh */}
                  <div style={{
                    position: 'absolute', inset: 0,
                    background: 'linear-gradient(to bottom, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.0) 100%)',
                    pointerEvents: 'none',
                  }} />

                  {/* Frosted glass panel — pinned to bottom */}
                  <div style={{
                    position: 'absolute', bottom: 0, left: 0, right: 0,
                    padding: '1.3rem 1.2rem 1.2rem 1.2rem',
                    display: 'flex', flexDirection: 'column', gap: '0.5rem',
                    background: 'rgba(8, 14, 32, 0.55)',
                    backdropFilter: 'blur(14px)',
                    WebkitBackdropFilter: 'blur(14px)',
                    borderTop: '1px solid rgba(255, 255, 255, 0.08)',
                  }}>
                    {/* Category */}
                    <span style={{
                      fontSize: '0.63rem', fontWeight: 700,
                      textTransform: 'uppercase', letterSpacing: '0.13em',
                      color: '#64748b',
                    }}>
                      {insight.category}
                    </span>

                    {/* Title */}
                    <h3 style={{
                      fontSize: '0.97rem', fontWeight: 700, color: '#f1f5f9',
                      lineHeight: 1.4, margin: 0,
                      display: '-webkit-box', WebkitLineClamp: 2,
                      WebkitBoxOrient: 'vertical', overflow: 'hidden',
                    }}>
                      {insight.title}
                    </h3>

                    {/* Read Blog */}
                    <div
                      className="blog-read-more"
                      style={{
                        marginTop: '0.2rem',
                        display: 'flex', alignItems: 'center', gap: '0.35rem',
                        color: '#cbd5e1', fontSize: '0.82rem', fontWeight: 600,
                        transition: 'color 0.2s ease',
                      }}
                    >
                      Read Blog <ArrowRight size={14} style={{ color: '#ffaa00' }} />
                    </div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </Reveal>
        </div>
      </section>
        </>
      )}

      {/* Brand Logo Divider Section */}
      <section style={{
        background: '#020c1e',
        position: 'relative',
        zIndex: 10,
        overflow: 'hidden',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'flex-end',
        padding: '4rem 0 0 0',
      }}>
        <img 
          src={assetUrl('/assets/Citpl footer.svg')} 
          alt="Cavin Infotech Logo Divider" 
          style={{
            width: '100%',
            height: 'auto',
            display: 'block',
          }}
        />
      </section>
      </div> {/* Close Content Wrapper */}

      {/* Sticky Parallax Reveal Footer */}
      <footer id="footer" style={{
        position: 'sticky',
        bottom: 0,
        zIndex: 1,
        background: 'linear-gradient(180deg, #ffffff 0%, #dde6f5 100%)',
        padding: isMobile ? '3rem 0' : '4rem 0',
        color: '#1e293b',
        width: '100%',
        scrollMarginTop: `${NAV_OFFSET}px`,
      }}>

        {/* Footer Container Padded Content */}
        <div style={{ maxWidth: '1440px', margin: '0 auto', width: '100%', padding: `0 ${sectionX}` }}>
          
          {/* CTA Banner Section */}
          {isMobile ? (
            <Reveal>
              <div style={{
                background: 'linear-gradient(135deg, #092244 0%, #05162d 100%)',
                borderRadius: '20px',
                padding: '2.2rem 1.6rem',
                display: 'flex',
                flexDirection: 'column',
                gap: '1.2rem',
                marginBottom: '2.5rem',
                position: 'relative',
                overflow: 'hidden',
                boxShadow: '0 20px 40px rgba(0,0,0,0.25)',
                border: '1px solid rgba(255, 255, 255, 0.08)'
              }}>
                <div>
                  <h2 style={{ fontSize: '1.65rem', fontWeight: 600, color: '#ffffff', lineHeight: 1.25, marginBottom: '0.8rem', letterSpacing: '-0.02em' }}>
                    Let's Build What's Next -<br/>Together.
                  </h2>
                  <p style={{ fontSize: '0.82rem', fontWeight: 500, lineHeight: 1.55, color: '#cbd5e1', marginBottom: '1.8rem', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                    {footer.cta.body}
                  </p>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.9rem' }}>
                    <button 
                      onClick={() => scrollToSection('contactus')}
                      style={{
                        background: 'linear-gradient(135deg, #d6802e 0%, #ba6a20 100%)',
                        border: 'none',
                        boxShadow: '0 8px 25px rgba(214, 128, 46, 0.35)',
                        color: '#ffffff',
                        padding: '0.85rem 1.6rem',
                        borderRadius: '50px',
                        fontSize: '0.88rem',
                        fontWeight: 600,
                        cursor: 'pointer',
                        width: '100%',
                        textAlign: 'center'
                      }}
                    >
                      {footer.cta.primaryButton}
                    </button>
                  </div>
                </div>
              </div>
            </Reveal>
          ) : (
            /* Desktop Banner */
            <Reveal>
              <div style={{ position: 'relative', width: '100%', marginBottom: '3.5rem' }}>
                <img
                  src={assetUrl(footer.cta.image)}
                  alt="CTA Banner"
                  style={{
                    width: '100%',
                    height: 'auto',
                    display: 'block',
                  }}
                />
                {/* Overlay text and buttons matching screenshot */}
                <div style={{
                  position: 'absolute',
                  left: '5.5%',
                  top: '50%',
                  transform: 'translateY(-50%)',
                  width: '56%',
                  zIndex: 2,
                }}>
                  <h2 style={{
                    fontSize: 'clamp(1.5rem, 2.5vw, 2.4rem)',
                    fontWeight: 500,
                    color: '#ffffff',
                    lineHeight: 1.2,
                    marginBottom: '1rem',
                    letterSpacing: '-0.02em'
                  }}>
                    Let's Build What's Next -<br/>Together.
                  </h2>
                  <p style={{
                    fontSize: 'clamp(0.72rem, 1vw, 0.9rem)',
                    fontWeight: 500,
                    lineHeight: 1.55,
                    color: '#cbd5e1',
                    marginBottom: '2.2rem',
                    textTransform: 'uppercase',
                    letterSpacing: '0.06em',
                    maxWidth: '92%'
                  }}>
                    {footer.cta.body}
                  </p>
                  <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
                    <button
                      onClick={() => scrollToSection('contactus')}
                      style={{
                        background: 'linear-gradient(135deg, #d6802e 0%, #ba6a20 100%)',
                        border: 'none',
                        boxShadow: '0 8px 25px rgba(214, 128, 46, 0.35)',
                        color: '#ffffff',
                        padding: '0.85rem 1.8rem',
                        borderRadius: '50px',
                        fontSize: 'clamp(0.75rem, 0.95vw, 0.88rem)',
                        fontWeight: 600,
                        cursor: 'pointer',
                        transition: 'all 0.25s ease',
                      }}
                      onMouseEnter={e => {
                        e.currentTarget.style.transform = 'translateY(-2px)';
                        e.currentTarget.style.boxShadow = '0 12px 30px rgba(214, 128, 46, 0.5)';
                      }}
                      onMouseLeave={e => {
                        e.currentTarget.style.transform = 'translateY(0)';
                        e.currentTarget.style.boxShadow = '0 8px 25px rgba(214, 128, 46, 0.35)';
                      }}
                    >
                      {footer.cta.primaryButton}
                    </button>
                  </div>
                </div>
              </div>
            </Reveal>
          )}

          {/* Links Grid */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr 1fr' : '180px 180px 1fr',
            gap: isMobile ? '2rem 1.5rem' : '1.25rem',
            paddingBottom: isMobile ? '2rem' : '2.5rem',
            borderBottom: '1px solid rgba(30,41,59,0.12)',
            marginBottom: '1.5rem',
          }}>
            {/* Quick Links */}
            <div>
              <h5 style={{ fontSize: '0.75rem', fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#1e293b', marginBottom: '1rem' }}>Quick Links</h5>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '0.45rem', padding: 0, margin: 0 }}>
                <li>
                  <a href="#home" onClick={e => {
                    e.preventDefault();
                    scrollToSection('home');
                  }} style={{ color: '#475569', textDecoration: 'none', fontSize: '0.85rem', transition: 'color 0.2s' }}
                    onMouseEnter={e => e.currentTarget.style.color = '#1e40af'}
                    onMouseLeave={e => e.currentTarget.style.color = '#475569'}>Home</a>
                </li>
                <li>
                  <a href="#certifications" onClick={e => {
                    e.preventDefault();
                    scrollToSection('certifications');
                  }} style={{ color: '#475569', textDecoration: 'none', fontSize: '0.85rem', transition: 'color 0.2s' }}
                    onMouseEnter={e => e.currentTarget.style.color = '#1e40af'}
                    onMouseLeave={e => e.currentTarget.style.color = '#475569'}>About Us</a>
                </li>
                <li>
                  <a href="#services" onClick={e => {
                    e.preventDefault();
                    scrollToSection('services');
                  }} style={{ color: '#475569', textDecoration: 'none', fontSize: '0.85rem', transition: 'color 0.2s' }}
                    onMouseEnter={e => e.currentTarget.style.color = '#1e40af'}
                    onMouseLeave={e => e.currentTarget.style.color = '#475569'}>Our Services</a>
                </li>
              </ul>
            </div>

            {/* Products */}
            <div>
              <h5 style={{ fontSize: '0.75rem', fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#1e293b', marginBottom: '1rem' }}>Products</h5>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '0.45rem', padding: 0, margin: 0 }}>
                {(footer.productLinks && footer.productLinks.length ? footer.productLinks.map(p => p.label) : ['Nebula AI platform', 'Prodmax', 'Budgie']).map(l => (
                  <li key={l}><a href="#products" onClick={e => {
                    e.preventDefault();
                    scrollToSection('products');
                  }} style={{ color: '#475569', textDecoration: 'none', fontSize: '0.85rem', transition: 'color 0.2s' }}
                    onMouseEnter={e => e.currentTarget.style.color = '#1e40af'}
                    onMouseLeave={e => e.currentTarget.style.color = '#475569'}>{l}</a></li>
                ))}
              </ul>
            </div>

            {/* Social Links Column */}
            <div style={{ gridColumn: isMobile ? 'span 2' : 'auto' }}>
              <h5 style={{ fontSize: '0.75rem', fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#1e40af', marginBottom: '1rem' }}>Social Links</h5>
              <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center', flexWrap: 'wrap' }}>
                {(footer.social && footer.social.length ? footer.social : [
                  { platform: 'Facebook', url: 'https://www.facebook.com/cavininfotech1' },
                  { platform: 'X', url: 'https://x.com/cavin_infotech' },
                  { platform: 'Instagram', url: 'https://www.instagram.com/cavin_infotech' },
                  { platform: 'LinkedIn', url: 'https://www.linkedin.com/company/cavin-infotech/' },
                  { platform: 'YouTube', url: 'https://youtube.com/@cavin_infotech' }
                ]).map(({ platform, url }) => {
                  const paths = {
                    Facebook: 'M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z',
                    Instagram: 'M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z',
                    LinkedIn: 'M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z',
                    X: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z',
                    YouTube: 'M23.498 6.163a3.003 3.003 0 0 0-2.11-2.11C19.53 3.545 12 3.545 12 3.545s-7.53 0-9.388.508a3.003 3.003 0 0 0-2.11 2.11C0 8.017 0 12 0 12s0 3.983.502 5.837a3.003 3.003 0 0 0 2.11 2.11c1.858.508 9.388.508 9.388.508s7.53 0 9.388-.508a3.003 3.003 0 0 0 2.11-2.11C24 15.983 24 12 24 12s0-3.983-.502-5.837zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'
                  };
                  const d = paths[platform] || paths.Facebook;

                  return (
                    <a key={platform} href={url || '#'} target="_blank" rel="noopener noreferrer" aria-label={platform}
                      style={{
                        width: '36px', height: '36px', borderRadius: '50%',
                        background: 'rgba(30,41,59,0.08)', border: '1px solid rgba(30,41,59,0.12)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        transition: 'all 0.2s ease', color: '#475569',
                      }}
                      onMouseEnter={e => { e.currentTarget.style.background = '#1e40af'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = '#1e40af'; }}
                      onMouseLeave={e => { e.currentTarget.style.background = 'rgba(30,41,59,0.08)'; e.currentTarget.style.color = '#475569'; e.currentTarget.style.borderColor = 'rgba(30,41,59,0.12)'; }}
                    >
                      <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" stroke="none">
                        <path d={d} />
                      </svg>
                    </a>
                  );
                })}
              </div>
            </div>
          </div>

          {/* Legal / Copyright Bottom Bar */}
          <div style={{
            display: 'flex',
            flexDirection: isMobile ? 'column' : 'row',
            alignItems: isMobile ? 'flex-start' : 'center',
            justifyContent: 'space-between',
            gap: isMobile ? '0.75rem' : '1.5rem',
            fontSize: '0.82rem',
            color: '#475569',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
              <a href="#" style={{ color: '#475569', textDecoration: 'none', fontWeight: 500, transition: 'color 0.2s' }}
                onMouseEnter={e => e.currentTarget.style.color = '#1e40af'}
                onMouseLeave={e => e.currentTarget.style.color = '#475569'}>Privacy Policy</a>
              <span style={{ color: '#cbd5e1' }}>&bull;</span>
              <a href="#" style={{ color: '#475569', textDecoration: 'none', fontWeight: 500, transition: 'color 0.2s' }}
                onMouseEnter={e => e.currentTarget.style.color = '#1e40af'}
                onMouseLeave={e => e.currentTarget.style.color = '#475569'}>Terms & Conditions</a>
            </div>
            <span style={{ fontSize: '0.78rem', color: '#64748b' }}>
              Copyrights reserved to CAVIN INFOTECH
            </span>
          </div>
        </div>
      </footer>

      {/* Careers Modal Popup */}
      {isCareersOpen && !previewMode && (
        <div style={{
          position: 'fixed',
          inset: 0,
          backgroundColor: 'rgba(2, 7, 16, 0.85)',
          backdropFilter: 'blur(10px)',
          zIndex: 100,
          display: 'flex',
          alignItems: isMobile ? 'flex-start' : 'center',
          justifyContent: 'center',
          padding: isMobile ? '1rem' : '1.5rem',
          overflowY: 'auto',
        }}>
          <div style={{
            background: 'rgba(5, 16, 34, 0.95)',
            border: '1px solid rgba(255, 170, 0, 0.25)',
            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 170, 0, 0.08)',
            borderRadius: '20px',
            width: '100%',
            maxWidth: '540px',
            maxHeight: isMobile ? 'none' : '90vh',
            overflowY: 'auto',
            padding: isMobile ? '1.5rem' : '2.5rem',
            position: 'relative',
            color: '#ffffff',
          }}>
            
            {/* Close Button */}
            <button 
              onClick={() => {
                setIsCareersOpen(false);
                setShowCareersAcknowledgement(false);
              }}
              style={{
                position: 'absolute',
                top: '1.25rem',
                right: '1.25rem',
                background: 'none',
                border: 'none',
                color: '#94a3b8',
                cursor: 'pointer',
                fontSize: '1.5rem',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                transition: 'color 0.2s',
              }}
              onMouseEnter={e => e.currentTarget.style.color = '#ffaa00'}
              onMouseLeave={e => e.currentTarget.style.color = '#94a3b8'}
            >
              &times;
            </button>

            {!showCareersAcknowledgement ? (
              <form onSubmit={async (e) => {
                e.preventDefault();
                try {
                  const serviceId = import.meta.env.VITE_EMAILJS_SERVICE_ID || 'vishva_cavintest';
                  const publicKey = import.meta.env.VITE_EMAILJS_PUBLIC_KEY || 'YOUR_EMAILJS_PUBLIC_KEY';
                  const templateId = import.meta.env.VITE_EMAILJS_TEMPLATE_ID_CAREERS || 'YOUR_EMAILJS_TEMPLATE_ID_CAREERS';
                  
                  if (publicKey === 'YOUR_EMAILJS_PUBLIC_KEY' || templateId === 'YOUR_EMAILJS_TEMPLATE_ID_CAREERS') {
                    console.warn('EmailJS Credentials not configured in .env. Please configure VITE_EMAILJS_PUBLIC_KEY and VITE_EMAILJS_TEMPLATE_ID_CAREERS');
                    alert('EmailJS credentials are not configured in your .env file.');
                    return;
                  }

                  const res = await fetch('https://api.emailjs.com/api/v1.0/email/send', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                      service_id: serviceId,
                      template_id: templateId,
                      user_id: publicKey,
                      template_params: {
                        type: 'careers',
                        name: careersName,
                        email: careersEmail,
                        phone: careersPhone,
                        mobile: '',
                        designation: 'N/A',
                        dateTime: 'N/A',
                        interests: 'N/A',
                        resumeName: careersFile ? careersFile.name : 'None',
                        from_name: careersName,
                        reply_to: careersEmail,
                        message: `New Careers Application:\nName: ${careersName}\nEmail: ${careersEmail}\nPhone: ${careersPhone}\nResume File: ${careersFile ? careersFile.name : 'None'}`
                      }
                    })
                  });

                  if (!res.ok) {
                    const errMsg = await res.text();
                    console.error('EmailJS Error:', errMsg);
                    alert(`Failed to send email: ${errMsg}`);
                    return;
                  }
                  
                  setShowCareersAcknowledgement(true);
                } catch (err) {
                  console.error('Error sending application:', err);
                  alert(`Error sending application: ${err.message}`);
                }
              }}>
                <h3 style={{
                  fontSize: '1.6rem',
                  fontWeight: 700,
                  marginBottom: '0.5rem',
                  color: '#ffffff',
                  letterSpacing: '-0.02em',
                }}>
                  Join Our Team
                </h3>
                <p style={{
                  fontSize: '0.88rem',
                  color: '#94a3b8',
                  marginBottom: '2rem',
                }}>
                  Submit your details and resume below. Our recruitment team will review your application.
                </p>

                <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
                  {/* Name Input */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
                    <label style={{ fontSize: '0.8rem', fontWeight: 600, color: '#e2e8f0', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Full Name</label>
                    <input 
                      type="text" 
                      required 
                      value={careersName}
                      onChange={e => setCareersName(e.target.value)}
                      placeholder="John Doe" 
                      style={{
                        background: 'rgba(255, 255, 255, 0.03)',
                        border: '1px solid rgba(255, 255, 255, 0.08)',
                        borderRadius: '8px',
                        padding: '0.75rem 1rem',
                        color: '#ffffff',
                        fontSize: '0.9rem',
                        outline: 'none',
                        transition: 'all 0.3s ease',
                      }}
                      onFocus={e => {
                        e.currentTarget.style.borderColor = '#ffaa00';
                        e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)';
                      }}
                      onBlur={e => {
                        e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)';
                        e.currentTarget.style.boxShadow = 'none';
                      }}
                    />
                  </div>

                  {/* Email Input */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
                    <label style={{ fontSize: '0.8rem', fontWeight: 600, color: '#e2e8f0', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Email Address</label>
                    <input 
                      type="email" 
                      required 
                      value={careersEmail}
                      onChange={e => setCareersEmail(e.target.value)}
                      placeholder="john@example.com" 
                      style={{
                        background: 'rgba(255, 255, 255, 0.03)',
                        border: '1px solid rgba(255, 255, 255, 0.08)',
                        borderRadius: '8px',
                        padding: '0.75rem 1rem',
                        color: '#ffffff',
                        fontSize: '0.9rem',
                        outline: 'none',
                        transition: 'all 0.3s ease',
                      }}
                      onFocus={e => {
                        e.currentTarget.style.borderColor = '#ffaa00';
                        e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)';
                      }}
                      onBlur={e => {
                        e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)';
                        e.currentTarget.style.boxShadow = 'none';
                      }}
                    />
                  </div>

                  {/* Phone Input */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
                    <label style={{ fontSize: '0.8rem', fontWeight: 600, color: '#e2e8f0', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Phone Number</label>
                    <input 
                      type="tel" 
                      required 
                      value={careersPhone}
                      onChange={e => setCareersPhone(e.target.value)}
                      placeholder="+91 00000 00000" 
                      style={{
                        background: 'rgba(255, 255, 255, 0.03)',
                        border: '1px solid rgba(255, 255, 255, 0.08)',
                        borderRadius: '8px',
                        padding: '0.75rem 1rem',
                        color: '#ffffff',
                        fontSize: '0.9rem',
                        outline: 'none',
                        transition: 'all 0.3s ease',
                      }}
                      onFocus={e => {
                        e.currentTarget.style.borderColor = '#ffaa00';
                        e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)';
                      }}
                      onBlur={e => {
                        e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)';
                        e.currentTarget.style.boxShadow = 'none';
                      }}
                    />
                  </div>

                  {/* File Attachment Input */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
                    <label style={{ fontSize: '0.8rem', fontWeight: 600, color: '#e2e8f0', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Resume / CV</label>
                    <div style={{
                      position: 'relative',
                      border: '2px dashed rgba(255, 170, 0, 0.3)',
                      borderRadius: '12px',
                      padding: '1.5rem',
                      textAlign: 'center',
                      background: 'rgba(255, 170, 0, 0.02)',
                      cursor: 'pointer',
                      transition: 'all 0.3s ease',
                    }}
                      onMouseEnter={e => {
                        e.currentTarget.style.borderColor = '#ffaa00';
                        e.currentTarget.style.background = 'rgba(255, 170, 0, 0.05)';
                      }}
                      onMouseLeave={e => {
                        e.currentTarget.style.borderColor = 'rgba(255, 170, 0, 0.3)';
                        e.currentTarget.style.background = 'rgba(255, 170, 0, 0.02)';
                      }}
                    >
                      <input 
                        type="file" 
                        required
                        accept=".pdf,.doc,.docx"
                        style={{
                          position: 'absolute',
                          inset: 0,
                          width: '100%',
                          height: '100%',
                          opacity: 0,
                          cursor: 'pointer',
                        }}
                        onChange={e => {
                          const file = e.target.files[0];
                          setCareersFile(file);
                          const fileName = file?.name;
                          const labelEl = document.getElementById('file-upload-label');
                          if (labelEl && fileName) {
                            labelEl.textContent = fileName;
                          }
                        }}
                      />
                      <span id="file-upload-label" style={{ fontSize: '0.85rem', color: '#cbd5e1', fontWeight: 500 }}>
                        Click to upload your Resume (.pdf, .doc, .docx)
                      </span>
                    </div>
                  </div>
                </div>

                {/* Submit Button */}
                <button 
                  type="submit"
                  style={{
                    width: '100%',
                    marginTop: '2rem',
                    background: 'rgba(255, 170, 0, 0.1)',
                    border: '1.5px solid rgba(255, 170, 0, 0.8)',
                    boxShadow: '0 0 15px rgba(255, 170, 0, 0.3)',
                    color: '#ffffff',
                    padding: '0.85rem',
                    borderRadius: '50px',
                    fontSize: '0.95rem',
                    fontWeight: 600,
                    cursor: 'pointer',
                    transition: 'all 0.3s ease',
                  }}
                  onMouseEnter={e => {
                    e.currentTarget.style.background = 'rgba(255, 170, 0, 0.2)';
                    e.currentTarget.style.boxShadow = '0 0 25px rgba(255, 170, 0, 0.5)';
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.background = 'rgba(255, 170, 0, 0.1)';
                    e.currentTarget.style.boxShadow = '0 0 15px rgba(255, 170, 0, 0.3)';
                  }}
                >
                  Submit Application
                </button>
              </form>
            ) : (
              /* Acknowledgement Panel */
              <div style={{ textAlign: 'center', padding: '1rem 0' }}>
                <div style={{
                  width: '60px',
                  height: '60px',
                  borderRadius: '50%',
                  backgroundColor: 'rgba(255, 170, 0, 0.1)',
                  border: '2px solid #ffaa00',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  margin: '0 auto 1.5rem auto',
                }}>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffaa00" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="20 6 9 17 4 12" />
                  </svg>
                </div>
                <h3 style={{
                  fontSize: '1.5rem',
                  fontWeight: 700,
                  marginBottom: '1rem',
                  color: '#ffffff',
                  letterSpacing: '-0.02em',
                }}>
                  Application Received!
                </h3>
                <p style={{
                  fontSize: '0.9rem',
                  color: '#cbd5e1',
                  lineHeight: '1.6',
                  marginBottom: '2rem',
                }}>
                  Thank you for applying to Cavin Infotech. We have received your resume and details successfully. Our recruitment team will review your application and contact you if your qualifications match our current needs.
                </p>
                <button 
                  onClick={() => {
                    setIsCareersOpen(false);
                    setShowCareersAcknowledgement(false);
                  }}
                  style={{
                    background: 'rgba(255, 255, 255, 0.05)',
                    border: '1.5px solid rgba(255, 255, 255, 0.2)',
                    color: '#ffffff',
                    padding: '0.75rem 2rem',
                    borderRadius: '50px',
                    fontSize: '0.95rem',
                    fontWeight: 600,
                    cursor: 'pointer',
                    transition: 'all 0.3s ease',
                  }}
                  onMouseEnter={e => {
                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)';
                    e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.4)';
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)';
                    e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.2)';
                  }}
                >
                  Close Window
                </button>
              </div>
            )}
          </div>
        </div>
      )}

      {/* Book a Strategy Call Modal Popup */}
      {isStrategyOpen && !previewMode && (
        <div style={{
          position: 'fixed',
          inset: 0,
          backgroundColor: 'rgba(2, 7, 16, 0.85)',
          backdropFilter: 'blur(10px)',
          zIndex: 100,
          display: 'flex',
          alignItems: isMobile ? 'flex-start' : 'center',
          justifyContent: 'center',
          padding: isMobile ? '1rem' : '1.5rem',
          overflowY: 'auto',
        }}>
          <div style={{
            background: 'rgba(5, 16, 34, 0.95)',
            border: '1px solid rgba(255, 170, 0, 0.25)',
            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 170, 0, 0.08)',
            borderRadius: '20px',
            width: '100%',
            maxWidth: '540px',
            maxHeight: isMobile ? 'none' : '90vh',
            overflowY: 'auto',
            padding: isMobile ? '1.5rem' : '2.5rem',
            position: 'relative',
            color: '#ffffff',
          }}>
            
            {/* Close Button */}
            <button 
              onClick={() => {
                setIsStrategyOpen(false);
                setShowStrategyAcknowledgement(false);
              }}
              style={{
                position: 'absolute',
                top: '1.25rem',
                right: '1.25rem',
                background: 'none',
                border: 'none',
                color: '#94a3b8',
                cursor: 'pointer',
                fontSize: '1.5rem',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                transition: 'color 0.2s',
              }}
              onMouseEnter={e => e.currentTarget.style.color = '#ffaa00'}
              onMouseLeave={e => e.currentTarget.style.color = '#94a3b8'}
            >
              &times;
            </button>

            {!showStrategyAcknowledgement ? (
              <form onSubmit={async (e) => {
                e.preventDefault();
                const selectedInterests = Object.keys(strategyInterests).filter(key => strategyInterests[key]).join(', ');
                try {
                  const serviceId = import.meta.env.VITE_EMAILJS_SERVICE_ID || 'vishva_cavintest';
                  const publicKey = import.meta.env.VITE_EMAILJS_PUBLIC_KEY || 'YOUR_EMAILJS_PUBLIC_KEY';
                  const templateId = import.meta.env.VITE_EMAILJS_TEMPLATE_ID_STRATEGY || 'YOUR_EMAILJS_TEMPLATE_ID_STRATEGY';
                  
                  if (publicKey === 'YOUR_EMAILJS_PUBLIC_KEY' || templateId === 'YOUR_EMAILJS_TEMPLATE_ID_STRATEGY') {
                    console.warn('EmailJS Credentials not configured in .env. Please configure VITE_EMAILJS_PUBLIC_KEY and VITE_EMAILJS_TEMPLATE_ID_STRATEGY');
                    alert('EmailJS credentials are not configured in your .env file.');
                    return;
                  }

                  const res = await fetch('https://api.emailjs.com/api/v1.0/email/send', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                      service_id: serviceId,
                      template_id: templateId,
                      user_id: publicKey,
                      template_params: {
                        type: 'strategy',
                        name: strategyName,
                        email: strategyEmail,
                        phone: strategyMobile,
                        mobile: strategyMobile,
                        designation: strategyDesignation,
                        dateTime: strategyDateTime,
                        interests: selectedInterests || 'None',
                        resumeName: 'None',
                        from_name: strategyName,
                        reply_to: strategyEmail,
                        message: `New Strategy Session Booking:\nName: ${strategyName}\nEmail: ${strategyEmail}\nMobile: ${strategyMobile}\nDesignation: ${strategyDesignation}\nPreferred Date & Time: ${strategyDateTime}\nAreas of Interest: ${selectedInterests || 'None'}`
                      }
                    })
                  });

                  if (!res.ok) {
                    const errMsg = await res.text();
                    console.error('EmailJS Error:', errMsg);
                    alert(`Failed to send email: ${errMsg}`);
                    return;
                  }

                  setShowStrategyAcknowledgement(true);
                } catch (err) {
                  console.error('Error scheduling strategy session:', err);
                  alert(`Error scheduling strategy session: ${err.message}`);
                }
              }}>
                <h3 style={{
                  fontSize: '1.6rem',
                  fontWeight: 700,
                  marginBottom: '0.5rem',
                  color: '#ffffff',
                  letterSpacing: '-0.02em',
                }}>
                  Book a Strategy Call
                </h3>
                <p style={{
                  fontSize: '0.88rem',
                  color: '#94a3b8',
                  marginBottom: '1.5rem',
                }}>
                  Fill in the details below to schedule a session with our experts.
                </p>

                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxHeight: '60vh', overflowY: 'auto', paddingRight: '0.5rem' }}>
                  {/* Name Input */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.3rem' }}>
                    <label style={{ fontSize: '0.78rem', fontWeight: 600, color: '#e2e8f0', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Full Name</label>
                    <input 
                      type="text" 
                      required 
                      value={strategyName}
                      onChange={e => setStrategyName(e.target.value)}
                      placeholder="John Doe" 
                      style={{
                        background: 'rgba(255, 255, 255, 0.03)',
                        border: '1px solid rgba(255, 255, 255, 0.08)',
                        borderRadius: '8px',
                        padding: '0.7rem 0.9rem',
                        color: '#ffffff',
                        fontSize: '0.88rem',
                        outline: 'none',
                        transition: 'all 0.3s ease',
                      }}
                      onFocus={e => {
                        e.currentTarget.style.borderColor = '#ffaa00';
                        e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)';
                      }}
                      onBlur={e => {
                        e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)';
                        e.currentTarget.style.boxShadow = 'none';
                      }}
                    />
                  </div>

                  {/* Email Input */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.3rem' }}>
                    <label style={{ fontSize: '0.78rem', fontWeight: 600, color: '#e2e8f0', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Email Address</label>
                    <input 
                      type="email" 
                      required 
                      value={strategyEmail}
                      onChange={e => setStrategyEmail(e.target.value)}
                      placeholder="john@example.com" 
                      style={{
                        background: 'rgba(255, 255, 255, 0.03)',
                        border: '1px solid rgba(255, 255, 255, 0.08)',
                        borderRadius: '8px',
                        padding: '0.7rem 0.9rem',
                        color: '#ffffff',
                        fontSize: '0.88rem',
                        outline: 'none',
                        transition: 'all 0.3s ease',
                      }}
                      onFocus={e => {
                        e.currentTarget.style.borderColor = '#ffaa00';
                        e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)';
                      }}
                      onBlur={e => {
                        e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)';
                        e.currentTarget.style.boxShadow = 'none';
                      }}
                    />
                  </div>

                  {/* Mobile Input */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.3rem' }}>
                    <label style={{ fontSize: '0.78rem', fontWeight: 600, color: '#e2e8f0', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Mobile Number</label>
                    <input 
                      type="tel" 
                      required 
                      value={strategyMobile}
                      onChange={e => setStrategyMobile(e.target.value)}
                      placeholder="+91 00000 00000" 
                      style={{
                        background: 'rgba(255, 255, 255, 0.03)',
                        border: '1px solid rgba(255, 255, 255, 0.08)',
                        borderRadius: '8px',
                        padding: '0.7rem 0.9rem',
                        color: '#ffffff',
                        fontSize: '0.88rem',
                        outline: 'none',
                        transition: 'all 0.3s ease',
                      }}
                      onFocus={e => {
                        e.currentTarget.style.borderColor = '#ffaa00';
                        e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)';
                      }}
                      onBlur={e => {
                        e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)';
                        e.currentTarget.style.boxShadow = 'none';
                      }}
                    />
                  </div>

                  {/* Designation Input */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.3rem' }}>
                    <label style={{ fontSize: '0.78rem', fontWeight: 600, color: '#e2e8f0', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Designation</label>
                    <input 
                      type="text" 
                      required 
                      value={strategyDesignation}
                      onChange={e => setStrategyDesignation(e.target.value)}
                      placeholder="e.g. Chief Technology Officer" 
                      style={{
                        background: 'rgba(255, 255, 255, 0.03)',
                        border: '1px solid rgba(255, 255, 255, 0.08)',
                        borderRadius: '8px',
                        padding: '0.7rem 0.9rem',
                        color: '#ffffff',
                        fontSize: '0.88rem',
                        outline: 'none',
                        transition: 'all 0.3s ease',
                      }}
                      onFocus={e => {
                        e.currentTarget.style.borderColor = '#ffaa00';
                        e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)';
                      }}
                      onBlur={e => {
                        e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)';
                        e.currentTarget.style.boxShadow = 'none';
                      }}
                    />
                  </div>

                  {/* Preferred Date & Time Input */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.3rem' }}>
                    <label style={{ fontSize: '0.78rem', fontWeight: 600, color: '#e2e8f0', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Preferred Date & Time</label>
                    <input 
                      type="datetime-local" 
                      required 
                      value={strategyDateTime}
                      onChange={e => setStrategyDateTime(e.target.value)}
                      style={{
                        background: 'rgba(255, 255, 255, 0.03)',
                        border: '1px solid rgba(255, 255, 255, 0.08)',
                        borderRadius: '8px',
                        padding: '0.7rem 0.9rem',
                        color: '#ffffff',
                        fontSize: '0.88rem',
                        outline: 'none',
                        transition: 'all 0.3s ease',
                      }}
                      onFocus={e => {
                        e.currentTarget.style.borderColor = '#ffaa00';
                        e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)';
                      }}
                      onBlur={e => {
                        e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)';
                        e.currentTarget.style.boxShadow = 'none';
                      }}
                    />
                  </div>

                  {/* Areas of Interest Checkboxes */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', marginTop: '0.5rem' }}>
                    <label style={{ fontSize: '0.78rem', fontWeight: 600, color: '#e2e8f0', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Areas of Interest</label>
                    <div style={{
                      display: 'grid',
                      gridTemplateColumns: '1fr 1fr',
                      gap: '0.75rem',
                      background: 'rgba(255, 255, 255, 0.01)',
                      border: '1px solid rgba(255, 255, 255, 0.05)',
                      borderRadius: '10px',
                      padding: '1rem',
                    }}>
                      {[
                        'AI & Analytics',
                        'SAP Services',
                        'XR Platforms',
                        'Smart Factory',
                        'Cloud Engineering',
                        'Enterprise Software'
                      ].map((interest) => (
                        <label key={interest} style={{
                          display: 'flex',
                          alignItems: 'center',
                          gap: '0.5rem',
                          fontSize: '0.82rem',
                          color: '#cbd5e1',
                          cursor: 'pointer',
                          userSelect: 'none',
                        }}>
                          <input 
                            type="checkbox" 
                            checked={strategyInterests[interest]}
                            onChange={e => setStrategyInterests(prev => ({ ...prev, [interest]: e.target.checked }))}
                            style={{
                              accentColor: '#ffaa00',
                              cursor: 'pointer',
                              width: '16px',
                              height: '16px',
                            }}
                          />
                          {interest}
                        </label>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Submit Button */}
                <button 
                  type="submit"
                  style={{
                    width: '100%',
                    marginTop: '1.5rem',
                    background: 'rgba(255, 170, 0, 0.1)',
                    border: '1.5px solid rgba(255, 170, 0, 0.8)',
                    boxShadow: '0 0 15px rgba(255, 170, 0, 0.3)',
                    color: '#ffffff',
                    padding: '0.85rem',
                    borderRadius: '50px',
                    fontSize: '0.95rem',
                    fontWeight: 600,
                    cursor: 'pointer',
                    transition: 'all 0.3s ease',
                  }}
                  onMouseEnter={e => {
                    e.currentTarget.style.background = 'rgba(255, 170, 0, 0.2)';
                    e.currentTarget.style.boxShadow = '0 0 25px rgba(255, 170, 0, 0.5)';
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.background = 'rgba(255, 170, 0, 0.1)';
                    e.currentTarget.style.boxShadow = '0 0 15px rgba(255, 170, 0, 0.3)';
                  }}
                >
                  Book Session
                </button>
              </form>
            ) : (
              /* Acknowledgement Panel */
              <div style={{ textAlign: 'center', padding: '1.5rem 0' }}>
                <div style={{
                  width: '60px',
                  height: '60px',
                  borderRadius: '50%',
                  backgroundColor: 'rgba(255, 170, 0, 0.1)',
                  border: '2px solid #ffaa00',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  margin: '0 auto 1.5rem auto',
                }}>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffaa00" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="20 6 9 17 4 12" />
                  </svg>
                </div>
                <h3 style={{
                  fontSize: '1.5rem',
                  fontWeight: 700,
                  marginBottom: '1rem',
                  color: '#ffffff',
                  letterSpacing: '-0.02em',
                }}>
                  Strategy Session Scheduled!
                </h3>
                <p style={{
                  fontSize: '0.9rem',
                  color: '#cbd5e1',
                  lineHeight: '1.6',
                  marginBottom: '2rem',
                }}>
                  Thank you for booking a Strategy Call. We have successfully received your information and areas of interest. A technology consultant from Cavin Infotech will reach out to you within 24 hours with an invitation link and slot confirmation.
                </p>
                <button 
                  onClick={() => {
                    setIsStrategyOpen(false);
                    setShowStrategyAcknowledgement(false);
                  }}
                  style={{
                    background: 'rgba(255, 255, 255, 0.05)',
                    border: '1.5px solid rgba(255, 255, 255, 0.2)',
                    color: '#ffffff',
                    padding: '0.75rem 2rem',
                    borderRadius: '50px',
                    fontSize: '0.95rem',
                    fontWeight: 600,
                    cursor: 'pointer',
                    transition: 'all 0.3s ease',
                  }}
                  onMouseEnter={e => {
                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)';
                    e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.4)';
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)';
                    e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.2)';
                  }}
                >
                  Close Window
                </button>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}