import React, { useState, useEffect, useRef } from 'react';
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';

// 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 IconComponent = iconMap[service.icon] || Sparkles;
  const shouldReduceMotion = useReducedMotion();

  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 }
    }
  };
  
  return (
    <motion.div
      whileHover={isMobile ? {} : { y: -8, borderColor: 'rgba(255, 255, 255, 0.2)', boxShadow: '0 20px 40px rgba(0, 0, 0, 0.6)' }}
      {...revealProps}
      style={{
        flex: '0 0 auto',
        scrollSnapAlign: 'start',
        width: isMobile ? '290px' : 'calc(40% - 19.2px)',
        minHeight: isMobile ? '450px' : '520px',
        background: 'linear-gradient(135deg, rgba(15, 23, 42, 0.55) 0%, rgba(9, 14, 26, 0.85) 100%)',
        backdropFilter: 'blur(16px)',
        borderRadius: '24px',
        border: '1px solid rgba(255, 255, 255, 0.08)',
        padding: isMobile ? '2rem 1.5rem' : '3rem 2.5rem',
        position: 'relative',
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        boxShadow: '0 12px 30px rgba(0, 0, 0, 0.4)',
        transition: 'border-color 0.3s ease, box-shadow 0.3s ease'
      }}
    >
      {/* Subtle bottom-right color mood radial gradient glow */}
      <div style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        background: service.glowColor,
        pointerEvents: 'none',
        zIndex: 0
      }} />

      {/* Background Watermark Number */}
      <div style={{
        position: 'absolute',
        bottom: '-25px',
        right: '15px',
        fontSize: isMobile ? '130px' : '180px',
        fontWeight: 900,
        color: 'rgba(255, 255, 255, 0.012)',
        lineHeight: '1',
        pointerEvents: 'none',
        userSelect: 'none',
        zIndex: 0
      }}>
        {service.number}
      </div>

      <div style={{ position: 'relative', zIndex: 1 }}>
        {/* Title */}
        <h3 style={{
          fontSize: isMobile ? '1.5rem' : '1.9rem',
          fontWeight: 700,
          color: '#ffffff',
          marginBottom: isMobile ? '1rem' : '1.5rem',
          letterSpacing: '-0.02em',
          lineHeight: '1.2'
        }}>
          {service.title}
        </h3>

        {/* Bold Statement with left border/line */}
        <div style={{
          display: 'flex',
          gap: '0.8rem',
          marginBottom: '1rem'
        }}>
          <div style={{
            width: '4px',
            background: '#ffffff',
            borderRadius: '2px',
            flexShrink: 0
          }} />
          <h4 style={{
            fontSize: isMobile ? '0.95rem' : '1.05rem',
            fontWeight: 700,
            color: '#e2e8f0',
            lineHeight: '1.4',
            margin: 0
          }}>
            {service.boldStatement}
          </h4>
        </div>

        {/* Description */}
        <p style={{
          color: '#94a3b8',
          fontSize: isMobile ? '0.85rem' : '0.9rem',
          lineHeight: '1.6',
          marginBottom: isMobile ? '1.2rem' : '1.8rem',
          fontWeight: 400
        }}>
          {service.description}
        </p>

        {/* Capabilities bullet list */}
        <ul style={{
          listStyle: 'none',
          padding: 0,
          margin: 0,
          display: 'flex',
          flexDirection: 'column',
          gap: '0.65rem'
        }}>
          {service.capabilities.map((capability, idx) => (
            <li key={idx} style={{
              display: 'flex',
              alignItems: 'center',
              gap: '0.6rem',
              fontSize: isMobile ? '0.85rem' : '0.9rem',
              fontWeight: 500,
              color: '#cbd5e1'
            }}>
              <span style={{ color: '#ffffff', opacity: 0.5, fontSize: '0.85rem' }}>»</span>
              {capability}
            </li>
          ))}
        </ul>
      </div>

      {/* CTA link at bottom */}
      <div style={{ position: 'relative', zIndex: 1, marginTop: isMobile ? '1.5rem' : '2.5rem' }}>
        <a 
          href="#contact" 
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: '0.5rem',
            color: '#ffffff',
            textDecoration: 'none',
            fontSize: isMobile ? '0.85rem' : '0.92rem',
            fontWeight: 600,
            transition: 'color 0.2s'
          }}
          onMouseEnter={(e) => e.target.style.color = '#ffaa00'}
          onMouseLeave={(e) => e.target.style.color = '#ffffff'}
        >
          {service.cta} <span>→</span>
        </a>
      </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 [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) 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 = () => {
    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' : '8%';
  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;
    }
    const sectionMap = {
      Home: 'home',
      'About Us': 'aboutus',
      Products: 'products',
      'Contact Us': 'contactus',
    };
    const id = sectionMap[item];
    if (!id) return;
    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' }}>
      
      {/* Main Content Wrapper with solid background and higher z-index */}
      <div style={{ position: 'relative', zIndex: 10, backgroundColor: '#020710', width: '100%' }}>
        
        {/* 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,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: isMobile ? '0.85rem 1.25rem' : '1.2rem 8%', 
        borderBottom: activeSection === 'products' ? '1px solid rgba(15, 23, 42, 0.08)' : '1px solid rgba(255, 255, 255, 0.05)'
      }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <img src="/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="/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>
        )}
      </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>
      )}

      {/* Hero Section */}
      <section id="home" style={{ 
        padding: isMobile ? '6rem 1.25rem 3.5rem' : '9rem 8% 6rem 8%', 
        textAlign: 'center', 
        position: 'relative', 
        zIndex: 10,
        minHeight: isMobile ? '70vh' : '85vh',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        overflow: 'hidden'
      }}>
        {/* 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={`${hero.video}?v=2`} type="video/mp4" />
          Your browser does not support the video tag.
        </video>



        <Reveal style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: '0.5rem',
            backgroundColor: 'rgba(255, 170, 0, 0.08)', border: '1px solid rgba(255, 170, 0, 0.2)',
            borderRadius: '9999px', padding: '0.4rem 1.2rem', marginBottom: '2.5rem',
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)'
          }}>
            <span style={{ color: '#ffaa00', fontSize: '0.85rem', fontWeight: 600 }}>
              {hero.badge}
            </span>
          </div>

          <h1 style={{
            fontSize: 'clamp(2rem, 4.8vw, 4.4rem)', fontWeight: 800, lineHeight: 1.15,
            maxWidth: '1200px', margin: isMobile ? '0 auto 3rem auto' : '0 auto 8rem auto', letterSpacing: '-0.03em',
            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: '#94a3b8', display: 'block', fontSize: 'clamp(1.5rem, 3.8vw, 3.2rem)', marginBottom: '0.5rem', fontWeight: 500 }}>{hero.headline}</span>
            {hero.subheadline?.includes('Technology Partner') ? (
              <>{hero.subheadline.replace('Technology Partner', '').trim()} <span className="gradient-text-gold">Technology Partner</span></>
            ) : hero.subheadline}
          </h1>
        </Reveal>
      </section>


      {/* Metrics Section */}
      <section style={{ 
        padding: isMobile ? '3rem 1.5rem' : '4rem 8% 2rem 8%', 
        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 8% 5.5rem 8%',
        backgroundColor: '#020710',
        backgroundImage: `url('${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'
      }}>
        <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={about.badgeImage} 
              alt={about.badgeAlt} 
              style={{ 
                height: isMobile ? '40px' : '54px', 
                display: 'block', 
                maxWidth: '100%', 
                objectFit: 'contain' 
              }} 
            />
          </div>
        </Reveal>
      </section>


      {/* Redesigned Trusted Brands Section */}
      <section style={{
        padding: isMobile ? '4rem 8%' : '2rem 0',
        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,
        }} />

        <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="/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={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="/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="/assets/Frame 33.svg" alt="MRF Logo" radiusX={520} radiusY={320} startAngle={0} duration={60} clockwise={true} size={170} />
              <OrbitalLogo src="/assets/Frame 31.svg" alt="ACA Global Logo" radiusX={520} radiusY={320} startAngle={78} duration={60} clockwise={true} size={175} />
              <OrbitalLogo src="/assets/Frame 30.svg" alt="Polyhose Logo" radiusX={520} radiusY={320} startAngle={144} duration={60} clockwise={true} size={170} />
              <OrbitalLogo src="/assets/Frame 32.svg" alt="Dawn Pictures Logo" radiusX={520} radiusY={320} startAngle={216} duration={60} clockwise={true} size={180} />
              <OrbitalLogo src="/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="/assets/Frame 28.svg" alt="Valeo Logo" radiusX={360} radiusY={225} startAngle={36} duration={40} clockwise={false} size={170} />
              <OrbitalLogo src="/assets/Frame 36.svg" alt="BorgWarner Logo" radiusX={360} radiusY={225} startAngle={108} duration={40} clockwise={false} size={170} />
              <OrbitalLogo src="/assets/kone.png" alt="KONE Logo" radiusX={360} radiusY={225} startAngle={180} duration={40} clockwise={false} size={160} />
              <OrbitalLogo src="/assets/Frame 34.svg" alt="Chola MS Logo" radiusX={360} radiusY={225} startAngle={252} duration={40} clockwise={false} size={170} />
              <OrbitalLogo src="/assets/Frame 27.svg" alt="CavinKare Logo" radiusX={360} radiusY={225} startAngle={324} duration={40} clockwise={false} size={180} />

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


      {/* Certifications Section */}
      <section id="certifications" style={{
        padding: isMobile ? '3rem 1.25rem' : '5rem 8%',
        backgroundColor: '#020710',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        textAlign: 'center',
        borderBottom: '1px solid rgba(255, 255, 255, 0.03)'
      }}>
        <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} delay={idx * 0.1}>
              <div style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                height: idx === 4 ? '110px' : '90px',
                transition: 'all 0.3s ease'
              }}>
                <img 
                  src={cert.image} 
                  alt={cert.alt} 
                  style={{
                    height: idx === 0 ? '85%' : idx === 3 ? '55%' : idx === 4 ? '100%' : '80%',
                    objectFit: 'contain'
                  }} 
                />
              </div>
            </Reveal>
          ))}
        </div>
      </section>
      {/* Services Section */}
      <section id="services" style={{ 
        padding: isMobile ? '4rem 0' : '96px 0', 
        backgroundColor: '#020710', 
        position: 'relative',
        overflow: 'hidden',
        borderBottom: '1px solid rgba(255, 255, 255, 0.03)'
      }}>
        {/* Background Ambient Glows */}
        <div style={{
          position: 'absolute',
          top: '20%',
          right: '-10%',
          width: '500px',
          height: '500px',
          background: 'radial-gradient(circle, rgba(0, 240, 255, 0.03) 0%, transparent 70%)',
          pointerEvents: 'none',
          zIndex: 0
        }} />
        <div style={{
          position: 'absolute',
          bottom: '10%',
          left: '-10%',
          width: '500px',
          height: '500px',
          background: 'radial-gradient(circle, rgba(255, 170, 0, 0.02) 0%, transparent 70%)',
          pointerEvents: 'none',
          zIndex: 0
        }} />

        <div style={{
          maxWidth: '1440px',
          margin: '0 auto',
          padding: isMobile ? '0 1.5rem' : '0 4rem',
          display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          alignItems: 'stretch',
          gap: isMobile ? '2.5rem' : '64px',
          position: 'relative',
          zIndex: 1
        }}>
          {/* Left Column - Intro Panel */}
          <Reveal style={{
            flex: isMobile ? '1' : '0 0 300px',
            width: isMobile ? '100%' : '300px',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            position: 'relative'
          }}>
            <div>
              <span style={{
                color: '#ffaa00',
                fontSize: '0.85rem',
                fontWeight: 700,
                textTransform: 'uppercase',
                letterSpacing: '0.15em',
                display: 'block',
                marginBottom: '1rem',
                lineHeight: '1.4'
              }}>
                {content.services.eyebrow}
              </span>
              <h2 style={{
                color: '#e2e8f0',
                fontSize: isMobile ? '2.2rem' : '3.2rem',
                fontWeight: 300,
                letterSpacing: '-0.02em',
                margin: '0 0 1.5rem 0',
                lineHeight: '1.1'
              }}>
                {content.services.title}
              </h2>
              <p style={{
                color: '#94a3b8',
                fontSize: isMobile ? '0.9rem' : '0.95rem',
                lineHeight: '1.65',
                margin: '0 0 2rem 0',
                fontWeight: 400
              }}>
                {content.services.intro}
              </p>
            </div>

            {/* Navigation buttons at the bottom */}
            <div style={{
              display: 'flex',
              gap: '0.75rem',
              marginTop: isMobile ? '0rem' : 'auto'
            }}>
              <button 
                onClick={() => scrollServices('left')}
                style={{
                  width: '46px',
                  height: '46px',
                  borderRadius: '8px',
                  border: '1px solid rgba(255, 255, 255, 0.1)',
                  background: 'rgba(255, 255, 255, 0.02)',
                  color: '#ffffff',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  cursor: 'pointer',
                  transition: 'all 0.2s',
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.3)';
                  e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.1)';
                  e.currentTarget.style.background = 'rgba(255, 255, 255, 0.02)';
                }}
                aria-label="Scroll left"
              >
                <ChevronLeft size={20} />
              </button>
              <button 
                onClick={() => scrollServices('right')}
                style={{
                  width: '46px',
                  height: '46px',
                  borderRadius: '8px',
                  border: '1px solid #ffffff',
                  background: '#ffffff',
                  color: '#020710',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  cursor: 'pointer',
                  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={20} />
              </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',
                  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 8%', background: 'rgba(5, 16, 34, 0.3)', position: 'relative' }}>
        <div style={{ maxWidth: '1400px', margin: '0 auto', position: 'relative', zIndex: 10 }}>
          <div style={{ textAlign: 'center', marginBottom: '4rem' }}>
            <Reveal>
              <span style={{ color: '#ffaa00', fontSize: '0.9rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em' }}>{whyUs.eyebrow}</span>
              <h2 style={{ fontSize: 'clamp(2rem, 3vw, 2.5rem)', fontWeight: 800, marginTop: '0.5rem', color: '#ffffff' }}>{whyUs.title}</h2>
            </Reveal>
          </div>

        {isMobile ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', position: 'relative', zIndex: 10 }}>
            {/* Innovation Driven */}
            <Reveal delay={0}>
              <div className="glass-card" style={{
                padding: '2rem 1.8rem',
                borderRadius: '20px',
                background: 'linear-gradient(135deg, rgba(30, 80, 180, 0.2) 0%, rgba(9, 14, 26, 0.95) 100%)',
                border: '1px solid rgba(255, 255, 255, 0.06)',
                position: 'relative',
                overflow: 'hidden'
              }}>
                <h3 style={{ fontSize: '1.6rem', fontWeight: 700, color: '#ffffff', margin: 0 }}>Innovation Driven</h3>
                <div style={{ width: '100%', height: '1px', backgroundColor: 'rgba(255, 255, 255, 0.08)', margin: '1rem 0' }} />
                <p style={{ color: '#cbd5e1', fontSize: '0.9rem', lineHeight: '1.55', margin: 0 }}>
                  We deliver future-ready solutions powered by Gen AI, Agentic AI, automation, IoT, and emerging tech that keep you ahead of the curve.
                </p>
              </div>
            </Reveal>

            {/* Industry Expertise */}
            <Reveal delay={0.1}>
              <div className="glass-card" style={{
                padding: '2rem 1.8rem',
                borderRadius: '20px',
                background: 'radial-gradient(circle at 10% 70%, rgba(255, 170, 0, 0.12) 0%, transparent 60%), rgba(9, 14, 26, 0.95)',
                border: '1px solid rgba(255, 255, 255, 0.06)',
                position: 'relative',
                overflow: 'hidden'
              }}>
                <h3 style={{ fontSize: '1.6rem', fontWeight: 700, color: '#ffffff', margin: 0 }}>Industry Expertise</h3>
                <div style={{ width: '100%', height: '1px', backgroundColor: 'rgba(255, 255, 255, 0.08)', margin: '1rem 0' }} />
                <p style={{ color: '#cbd5e1', fontSize: '0.9rem', lineHeight: '1.55', margin: 0 }}>
                  Deep domain knowledge across manufacturing, enterprise tech, smart manufacturing, and digital operations built from years of real-world implementation.
                </p>
              </div>
            </Reveal>

            {/* Secure & Reliable */}
            <Reveal delay={0.2}>
              <div className="glass-card" style={{
                padding: '2rem 1.8rem',
                borderRadius: '20px',
                background: 'radial-gradient(circle at 10% 70%, rgba(255, 170, 0, 0.12) 0%, transparent 60%), rgba(9, 14, 26, 0.95)',
                border: '1px solid rgba(255, 255, 255, 0.06)',
                position: 'relative',
                overflow: 'hidden'
              }}>
                <h3 style={{ fontSize: '1.6rem', fontWeight: 700, color: '#ffffff', margin: 0 }}>Secure & Reliable</h3>
                <div style={{ width: '100%', height: '1px', backgroundColor: 'rgba(255, 255, 255, 0.08)', margin: '1rem 0' }} />
                <p style={{ color: '#cbd5e1', fontSize: '0.9rem', lineHeight: '1.55', margin: 0 }}>
                  Every solution is built on globally recognized standards with uncompromising focus on security, compliance, and operational excellence.
                </p>
              </div>
            </Reveal>

            {/* Outcome Focused */}
            <Reveal delay={0.3}>
              <div className="glass-card" style={{
                padding: '2rem 1.8rem',
                borderRadius: '20px',
                background: 'linear-gradient(to bottom, rgba(2, 7, 16, 0.95) 0%, rgba(2, 7, 16, 0.6) 45%, rgba(2, 7, 16, 0) 85%), url(/assets/whyus_hologram.jpg)',
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                border: '1px solid rgba(255, 255, 255, 0.06)',
                position: 'relative',
                overflow: 'hidden'
              }}>
                <h3 style={{ fontSize: '1.6rem', fontWeight: 700, color: '#ffffff', margin: 0 }}>Outcome Focused</h3>
                <div style={{ width: '100%', height: '1px', backgroundColor: 'rgba(255, 255, 255, 0.08)', margin: '1rem 0' }} />
                <p style={{ color: '#cbd5e1', fontSize: '0.9rem', lineHeight: '1.55', margin: 0 }}>
                  We don't just implement technology we design every solution to reduce complexity, boost efficiency, and deliver clear, measurable business impact.
                </p>
              </div>
            </Reveal>
          </div>
        ) : (
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1.15fr 0.65fr 1.2fr',
            gridTemplateRows: 'auto minmax(260px, auto)',
            gap: '1.5rem',
            alignItems: 'stretch',
            position: 'relative',
            zIndex: 10
          }}>
            {/* Innovation Driven Card (Col 1, Row 1) */}
            <Reveal delay={0} style={{ height: '100%', gridColumn: '1', gridRow: '1' }}>
              <div className="glass-card" style={{
                padding: '2.5rem',
                borderRadius: '24px',
                background: 'linear-gradient(135deg, rgba(30, 80, 180, 0.25) 0%, rgba(9, 14, 26, 0.95) 100%)',
                border: '1px solid rgba(255, 255, 255, 0.06)',
                position: 'relative',
                overflow: 'hidden',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'flex-start',
                height: '100%'
              }}>
                {/* Concentric rings */}
                <div style={{ position: 'absolute', top: '-15%', right: '-15%', width: '180px', height: '180px', borderRadius: '50%', border: '1px solid rgba(255, 255, 255, 0.03)', pointerEvents: 'none' }} />
                <div style={{ position: 'absolute', top: '-25%', right: '-25%', width: '240px', height: '240px', borderRadius: '50%', border: '1px solid rgba(255, 255, 255, 0.02)', pointerEvents: 'none' }} />
                
                <h3 style={{ fontSize: '1.6rem', fontWeight: 700, color: '#ffffff', lineHeight: '1.2', margin: 0 }}>
                  Innovation Driven
                </h3>
                <div style={{ width: '100%', height: '1px', backgroundColor: 'rgba(255, 255, 255, 0.08)', margin: '1rem 0' }} />
                <p style={{ color: '#cbd5e1', fontSize: '0.92rem', lineHeight: '1.6', margin: 0, fontWeight: 400 }}>
                  We deliver future-ready solutions powered by Gen AI, Agentic AI, automation, IoT, and emerging tech that keep you ahead of the curve.
                </p>
              </div>
            </Reveal>

            {/* Collaboration Image (Col 1, Row 2) */}
            <Reveal delay={0.1} style={{ height: '100%', gridColumn: '1', gridRow: '2' }}>
              <div style={{
                borderRadius: '24px',
                overflow: 'hidden',
                border: '1px solid rgba(255, 255, 255, 0.06)',
                height: '100%'
              }}>
                <img 
                  src="/assets/whyus_arab_meeting.jpg" 
                  alt="Corporate collaboration" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                />
              </div>
            </Reveal>

            {/* Industry Expertise Card (Col 2 & 3, Row 1) */}
            <Reveal delay={0.2} style={{ height: '100%', gridColumn: '2 / 4', gridRow: '1' }}>
              <div className="glass-card" style={{
                padding: '2.5rem',
                borderRadius: '24px',
                background: 'radial-gradient(circle at 10% 70%, rgba(255, 170, 0, 0.12) 0%, transparent 60%), linear-gradient(135deg, rgba(9, 14, 26, 0.95) 0%, rgba(2, 5, 12, 0.98) 100%)',
                border: '1px solid rgba(255, 255, 255, 0.06)',
                position: 'relative',
                overflow: 'hidden',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'flex-start',
                height: '100%'
              }}>
                <div style={{ position: 'absolute', top: '-15%', right: '-15%', width: '180px', height: '180px', borderRadius: '50%', border: '1px solid rgba(255, 255, 255, 0.03)', pointerEvents: 'none' }} />
                <div style={{ position: 'absolute', top: '-25%', right: '-25%', width: '240px', height: '240px', borderRadius: '50%', border: '1px solid rgba(255, 255, 255, 0.02)', pointerEvents: 'none' }} />
                
                <h3 style={{ fontSize: '1.6rem', fontWeight: 700, color: '#ffffff', lineHeight: '1.2', margin: 0 }}>
                  Industry Expertise
                </h3>
                <div style={{ width: '100%', height: '1px', backgroundColor: 'rgba(255, 255, 255, 0.08)', margin: '1rem 0' }} />
                <p style={{ color: '#cbd5e1', fontSize: '0.92rem', lineHeight: '1.6', margin: 0, fontWeight: 400 }}>
                  Deep domain knowledge across manufacturing, enterprise tech, smart manufacturing, and digital operations built from years of real-world implementation.
                </p>
              </div>
            </Reveal>

            {/* Secure & Reliable Card (Col 2, Row 2) */}
            <Reveal delay={0.3} style={{ height: '100%', gridColumn: '2', gridRow: '2' }}>
              <div className="glass-card" style={{
                padding: '2.5rem',
                borderRadius: '24px',
                background: 'radial-gradient(circle at 10% 70%, rgba(255, 170, 0, 0.12) 0%, transparent 60%), linear-gradient(135deg, rgba(9, 14, 26, 0.95) 0%, rgba(2, 5, 12, 0.98) 100%)',
                border: '1px solid rgba(255, 255, 255, 0.06)',
                position: 'relative',
                overflow: 'hidden',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'flex-start',
                height: '100%'
              }}>
                <div style={{ position: 'absolute', top: '-15%', right: '-15%', width: '180px', height: '180px', borderRadius: '50%', border: '1px solid rgba(255, 255, 255, 0.03)', pointerEvents: 'none' }} />
                <div style={{ position: 'absolute', top: '-25%', right: '-25%', width: '240px', height: '240px', borderRadius: '50%', border: '1px solid rgba(255, 255, 255, 0.02)', pointerEvents: 'none' }} />
                
                <h3 style={{ fontSize: '1.6rem', fontWeight: 700, color: '#ffffff', lineHeight: '1.2', margin: 0 }}>
                  Secure & Reliable
                </h3>
                <div style={{ width: '100%', height: '1px', backgroundColor: 'rgba(255, 255, 255, 0.08)', margin: '1rem 0' }} />
                <p style={{ color: '#cbd5e1', fontSize: '0.92rem', lineHeight: '1.6', margin: 0, fontWeight: 400 }}>
                  Every solution is built on globally recognized standards with uncompromising focus on security, compliance, and operational excellence.
                </p>
              </div>
            </Reveal>

            {/* Conference Room Image (Col 3, Row 2) */}
            <Reveal delay={0.4} style={{ height: '100%', gridColumn: '3', gridRow: '2' }}>
              <div style={{
                borderRadius: '24px',
                overflow: 'hidden',
                border: '1px solid rgba(255, 255, 255, 0.06)',
                height: '100%'
              }}>
                <img 
                  src="/assets/whyus_vr_man.jpg" 
                  alt="Sunset boardroom" 
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                />
              </div>
            </Reveal>

            {/* Outcome Focused Tall Card (Col 4, Row 1/2) */}
            <Reveal delay={0.5} style={{ height: '100%', gridColumn: '4', gridRow: '1 / 3' }}>
              <div className="glass-card" style={{
                borderRadius: '24px',
                border: '1px solid rgba(255, 255, 255, 0.06)',
                position: 'relative',
                overflow: 'hidden',
                backgroundImage: 'linear-gradient(to bottom, rgba(2, 7, 16, 0.95) 0%, rgba(2, 7, 16, 0.6) 45%, rgba(2, 7, 16, 0) 85%), url(/assets/whyus_hologram.jpg)',
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'flex-start',
                padding: '2.5rem',
                height: '100%'
              }}>
                <div>
                  <h3 style={{ fontSize: '1.6rem', fontWeight: 700, color: '#ffffff', lineHeight: '1.2', margin: '0 0 1rem 0' }}>
                    Outcome Focused
                  </h3>
                  <div style={{ width: '100%', height: '1px', backgroundColor: 'rgba(255, 255, 255, 0.08)', margin: '1rem 0 1.5rem 0' }} />
                  <p style={{ color: '#cbd5e1', fontSize: '0.95rem', lineHeight: '1.65', margin: 0, fontWeight: 400, maxWidth: '95%' }}>
                    We don't just implement technology we design every solution to reduce complexity, boost efficiency, and deliver clear, measurable business impact.
                  </p>
                </div>
                <div style={{ flex: 1, minHeight: '120px' }} /> {/* Flex spacer to push text up and reveal team background */}
              </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 8%', background: '#f8fafc', position: 'relative', overflow: 'hidden' }}>
        {/* Header */}
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: '4rem', position: 'relative', zIndex: 10 }}>
            <span style={{ color: '#ffaa00', fontSize: '0.9rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em' }}>
              {products.eyebrow}
            </span>
            <h2 style={{ fontSize: 'clamp(2rem, 3vw, 2.5rem)', fontWeight: 800, marginTop: '0.5rem', color: '#0f172a' }}>
              {products.title}
            </h2>
            <p style={{ color: '#475569', fontSize: '1.05rem', marginTop: '0.75rem', maxWidth: '650px', marginLeft: 'auto', marginRight: 'auto', lineHeight: '1.5' }}>
              {products.subtitle}
            </p>
          </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: '4rem'
        }}>
          {products.items.map((item, index) => (
            <ProductCard
              key={item.name || index}
              product={item}
              isMobile={isMobile}
              delay={index * 0.1}
              index={index}
            />
          ))}
        </div>
      </section>

      {/* Insights Section */}
      <section id="insights" style={{ padding: isMobile ? '3.5rem 0 4rem' : '5rem 0 6rem 0', background: '#020c1e' }}>
        {/* Header */}
        <Reveal style={{
          padding: isMobile ? '0 1.25rem' : '0 8%',
          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',
              scrollSnapType: 'x mandatory',
              scrollPaddingLeft: isMobile ? '1.25rem' : '8%',
              paddingLeft: isMobile ? '1.25rem' : '8%',
              paddingRight: isMobile ? '1.25rem' : '8%',
              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={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>
      </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="/assets/citp_footer_design.png" 
          alt="Cavin Infotech Logo Divider" 
          style={{
            width: '100%',
            height: 'auto',
            display: 'block',
          }}
        />
      </section>
      </div> {/* Close Content Wrapper */}

      <footer id="contactus" style={{
        background: 'linear-gradient(180deg, #ffffff 0%, #dde6f5 100%)',
        padding: isMobile ? '3rem 0' : '4rem 0',
        color: '#1e293b',
        position: 'relative',
        width: '100%',
        scrollMarginTop: `${NAV_OFFSET}px`,
      }}>

        {/* Footer Container Padded Content */}
        <div style={{ padding: `0 ${sectionX}` }}>
          
          {/* CTA Banner Section */}
          {isMobile ? (
            <Reveal>
              <div style={{
                background: 'linear-gradient(135deg, #0f2044 0%, #0a1a38 60%, #112252 100%)',
                borderRadius: '20px',
                padding: '2.5rem 2rem',
                display: 'flex',
                flexDirection: 'column',
                gap: '2rem',
                marginBottom: '3rem',
                position: 'relative',
                overflow: 'hidden',
              }}>
                <div>
                  <h2 style={{ fontSize: '1.8rem', fontWeight: 800, color: '#ffffff', lineHeight: 1.25, marginBottom: '0.8rem' }}>
                    {footer.cta.headline}
                  </h2>
                  <p style={{ fontSize: '0.72rem', fontWeight: 500, lineHeight: 1.4, color: '#94a3b8', marginBottom: '1.5rem' }}>
                    {footer.cta.body}
                  </p>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
                    <button style={{
                      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.4)',
                      color: '#ffffff',
                      padding: '0.8rem 1.6rem',
                      borderRadius: '50px',
                      fontSize: '0.85rem',
                      fontWeight: 600,
                      cursor: 'pointer',
                    }}>
                      {footer.cta.primaryButton}
                    </button>
                    <button style={{
                      background: 'rgba(255, 255, 255, 0.05)',
                      border: '1.5px solid rgba(255, 255, 255, 0.2)',
                      color: '#ffffff',
                      padding: '0.8rem 1.6rem',
                      borderRadius: '50px',
                      fontSize: '0.85rem',
                      fontWeight: 600,
                      cursor: 'pointer',
                    }}>
                      {footer.cta.secondaryButton}
                    </button>
                  </div>
                </div>
                
                {/* Phone mockup container on mobile */}
                <div style={{ width: '100%', height: '180px', position: 'relative', overflow: 'hidden', borderRadius: '12px' }}>
                  <img
                    src={footer.cta.image}
                    alt="Phone preview"
                    style={{
                      position: 'absolute',
                      right: '-20px',
                      top: '-90px',
                      width: '280px',
                      height: 'auto',
                      maxWidth: 'none',
                    }}
                  />
                </div>
              </div>
            </Reveal>
          ) : (
            /* Desktop Banner */
            <Reveal>
              <div style={{ position: 'relative', width: '100%', marginBottom: '3rem' }}>
                <img
                  src={footer.cta.image}
                  alt="CTA Banner"
                  style={{
                    width: '100%',
                    height: 'auto',
                    display: 'block',
                  }}
                />
                {/* Overlay text and buttons */}
                <div style={{
                  position: 'absolute',
                  left: '6%',
                  top: '52%',
                  transform: 'translateY(-50%)',
                  width: '54%',
                  zIndex: 2,
                }}>
                  <h2 style={{
                    fontSize: 'clamp(1.3rem, 2.4vw, 2.2rem)',
                    fontWeight: 800,
                    color: '#ffffff',
                    lineHeight: 1.25,
                    marginBottom: '0.8rem',
                  }}>
                    {footer.cta.headline}
                  </h2>
                  <p style={{
                    fontSize: 'clamp(0.55rem, 0.9vw, 0.72rem)',
                    fontWeight: 500,
                    lineHeight: 1.4,
                    color: '#94a3b8',
                    marginBottom: '1.5rem',
                  }}>
                    {footer.cta.body}
                  </p>
                  <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
                    <button
                      style={{
                        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.4)',
                        color: '#ffffff',
                        padding: '0.75rem 1.6rem',
                        borderRadius: '50px',
                        fontSize: 'clamp(0.75rem, 1vw, 0.88rem)',
                        fontWeight: 600,
                        cursor: 'pointer',
                        transition: 'all 0.25s ease',
                      }}
                      onMouseEnter={e => {
                        e.currentTarget.style.background = '#ffaa00';
                        e.currentTarget.style.color = '#000000';
                        e.currentTarget.style.boxShadow = '0 0 25px rgba(255, 170, 0, 0.8)';
                      }}
                      onMouseLeave={e => {
                        e.currentTarget.style.background = 'rgba(255, 170, 0, 0.1)';
                        e.currentTarget.style.color = '#ffffff';
                        e.currentTarget.style.boxShadow = '0 0 15px rgba(255, 170, 0, 0.4)';
                      }}
                    >
                      {footer.cta.primaryButton}
                    </button>
                    <button
                      style={{
                        background: 'rgba(255, 255, 255, 0.05)',
                        border: '1.5px solid rgba(255, 255, 255, 0.25)',
                        color: '#ffffff',
                        padding: '0.75rem 1.6rem',
                        borderRadius: '50px',
                        fontSize: 'clamp(0.75rem, 1vw, 0.88rem)',
                        fontWeight: 600,
                        cursor: 'pointer',
                        transition: 'all 0.25s ease',
                      }}
                      onMouseEnter={e => {
                        e.currentTarget.style.background = 'rgba(255, 255, 255, 0.15)';
                        e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.5)';
                      }}
                      onMouseLeave={e => {
                        e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)';
                        e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.25)';
                      }}
                    >
                      {footer.cta.secondaryButton}
                    </button>
                  </div>
                </div>
              </div>
            </Reveal>
          )}

          {/* Links Grid */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr 1fr' : '180px 180px 1fr',
            gap: isMobile ? '1.5rem' : '1.25rem',
            paddingBottom: '2.5rem',
            borderBottom: '1px solid rgba(30,41,59,0.12)',
            marginBottom: '1.5rem',
          }}>
            {/* Quick Links */}
            <div>
              <h5 style={{ fontSize: '0.7rem', fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#1e293b', marginBottom: '1rem' }}>Quick Links</h5>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '0.35rem', padding: 0, margin: 0 }}>
                <li>
                  <a href="#home" onClick={e => {
                    e.preventDefault();
                    scrollToSection('home');
                  }} style={{ color: '#475569', textDecoration: 'none', fontSize: '0.84rem', 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.84rem', 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.84rem', 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.7rem', fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#1e293b', marginBottom: '1rem' }}>Products</h5>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '0.35rem', padding: 0, margin: 0 }}>
                {['PRODMAX', 'Budgie HRMS', 'EVIDO'].map(l => (
                  <li key={l}><a href="#products" onClick={e => {
                    e.preventDefault();
                    scrollToSection('products');
                  }} style={{ color: '#475569', textDecoration: 'none', fontSize: '0.84rem', 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.7rem', 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' }}>
                {[
                  { label: 'Facebook', d: 'M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z' },
                  { label: 'Instagram', d: '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' },
                  { label: 'LinkedIn', d: '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' },
                  { label: 'Telegram', d: 'M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5.562 8.161c-.18.717-.962 4.084-1.362 5.462-.168.58-.506.772-.712.791-.45.041-.79-.297-1.225-.583-.681-.447-1.066-.723-1.727-1.158-.764-.502-.269-.778.167-1.23.114-.118 2.096-1.922 2.134-2.083.005-.02.009-.095-.036-.135-.045-.04-.112-.026-.16-.015-.069.016-1.171.745-3.305 2.186-.313.215-.596.321-.85.315-.281-.006-.822-.153-1.225-.284-.494-.16-.887-.246-.853-.518.178-.142.716-.291 1.6-.447 5.485-2.385 9.143-3.957 10.973-4.717.868-.362 1.8-.425 2.39-.425.13 0 .42.03.606.18.156.126.2.296.21.425.013.167.013.435-.008.685z' },
                  { label: 'WhatsApp', d: 'M12.008 22c-1.948 0-3.855-.522-5.504-1.508l-.395-.235-4.093 1.073 1.092-3.993-.257-.408C1.815 15.222 1.25 13.064 12.008 12c5.514 0 10.008 4.486 10.008 10S17.522 22 12.008 22zm8.487-18.49C18.232 1.257 15.258 0 12.008 0 5.394 0 .02 5.373.017 11.99c0 2.115.553 4.18 1.603 5.996L0 24l6.155-1.615c1.768.964 3.753 1.472 5.845 1.474v-.002c6.611 0 11.986-5.375 11.99-11.994.002-3.206-1.242-6.22-3.497-8.48zM17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.063 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.715 2.006-1.404.248-.69.248-1.278.173-1.402-.074-.125-.272-.199-.57-.348z' },
                  { label: 'X', d: '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' },
                  { label: 'YouTube', d: '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' },
                ].map(({ label, d }) => (
                  <a key={label} href="#" aria-label={label}
                    style={{
                      width: '34px', height: '34px', 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 style={{
                display: 'flex',
                alignItems: 'center',
                flexWrap: 'wrap',
                gap: '1rem',
                marginTop: '1.5rem',
                fontSize: '0.82rem',
                color: '#475569',
              }}>
                <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>
                <span style={{ color: '#cbd5e1' }}>&bull;</span>
                <span style={{ fontSize: '0.78rem', color: '#334155' }}>
                  Copyrights reserved to CAVIN INFOTECH
                </span>
              </div>
            </div>
          </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>
  );
}
