import React, { useState, useEffect, useRef } from 'react';
import { 
  ArrowRight, Brain, Zap, Globe, Target, Layout, 
  BarChart3, Cpu, Layers, MousePointer2, ChevronRight,
  TrendingUp, Workflow, Search, PenTool, Code
} from 'lucide-react';

// Injecting essential custom CSS for advanced glassmorphism and animations that are hard to do with raw Tailwind
const GlobalStyles = () => (
  <style>{`
    :root {
      --bg-color: #030305;
      --card-bg: rgba(20, 20, 25, 0.4);
      --card-border: rgba(255, 255, 255, 0.05);
      --spotlight-color: rgba(59, 130, 246, 0.15);
    }
    
    body {
      background-color: var(--bg-color);
      color: #ffffff;
      overflow-x: hidden;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }

    /* Ambient Background Grid */
    .bg-grid {
      background-size: 50px 50px;
      background-image: 
        linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
      mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
    }

    /* Hide Scrollbar */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--bg-color); }
    ::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #374151; }

    /* Animated Gradient Text */
    .text-gradient-electric {
      background: linear-gradient(to right, #3b82f6, #06b6d4, #8b5cf6, #3b82f6);
      background-size: 200% auto;
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      animation: gradientText 5s linear infinite;
    }

    @keyframes gradientText {
      0% { background-position: 0% center; }
      100% { background-position: 200% center; }
    }

    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-15px); }
    }
    
    .animate-float { animation: float 6s ease-in-out infinite; }
    .animate-float-delayed { animation: float 6s ease-in-out 3s infinite; }

    /* Glow blobs */
    .glow-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
      opacity: 0.4;
      pointer-events: none;
    }
  `}</style>
);

// 1. Magnetic Button Component
const MagneticElement = ({ children, className = "", padding = 20 }) => {
  const ref = useRef(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouse = (e) => {
    const { clientX, clientY } = e;
    const { height, width, left, top } = ref.current.getBoundingClientRect();
    const middleX = clientX - (left + width / 2);
    const middleY = clientY - (top + height / 2);
    setPosition({ x: middleX * 0.2, y: middleY * 0.2 });
  };

  const reset = () => setPosition({ x: 0, y: 0 });

  return (
    <div
      ref={ref}
      onMouseMove={handleMouse}
      onMouseLeave={reset}
      style={{
        transform: `translate(${position.x}px, ${position.y}px)`,
        transition: position.x === 0 ? 'transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1)' : 'none'
      }}
      className={`inline-block ${className}`}
    >
      {children}
    </div>
  );
};

// 2. Spotlight Glass Card Component
const SpotlightCard = ({ children, className = "", spotColor = "rgba(59, 130, 246, 0.15)" }) => {
  const divRef = useRef(null);
  const [isFocused, setIsFocused] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [opacity, setOpacity] = useState(0);

  const handleMouseMove = (e) => {
    if (!divRef.current || isFocused) return;
    const div = divRef.current;
    const rect = div.getBoundingClientRect();
    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
  };

  const handleFocus = () => { setIsFocused(true); setOpacity(1); };
  const handleBlur = () => { setIsFocused(false); setOpacity(0); };
  const handleMouseEnter = () => { setOpacity(1); };
  const handleMouseLeave = () => { setOpacity(0); };

  return (
    <div
      ref={divRef}
      onMouseMove={handleMouseMove}
      onFocus={handleFocus}
      onBlur={handleBlur}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      className={`relative overflow-hidden rounded-3xl bg-[#0a0a0f]/80 backdrop-blur-2xl border border-white/[0.05] shadow-2xl transition-all duration-300 ${className}`}
    >
      <div
        className="pointer-events-none absolute -inset-px opacity-0 transition-opacity duration-300"
        style={{
          opacity,
          background: `radial-gradient(600px circle at ${position.x}px ${position.y}px, ${spotColor}, transparent 40%)`,
        }}
      />
      {children}
    </div>
  );
};

// 3. Scroll Reveal Component
const Reveal = ({ children, delay = 0, className = "" }) => {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.unobserve(entry.target);
        }
      },
      { threshold: 0.1, rootMargin: "0px 0px -50px 0px" }
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  return (
    <div
      ref={ref}
      style={{
        opacity: isVisible ? 1 : 0,
        transform: isVisible ? 'translateY(0)' : 'translateY(30px)',
        transition: `all 0.8s cubic-bezier(0.16, 1, 0.3, 1) ${delay}ms`
      }}
      className={className}
    >
      {children}
    </div>
  );
};

const Navbar = () => {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <nav className={`fixed w-full z-50 transition-all duration-500 ${scrolled ? 'py-4' : 'py-6'}`}>
      <div className={`absolute inset-0 transition-all duration-500 ${scrolled ? 'bg-black/40 backdrop-blur-md border-b border-white/5' : 'opacity-0'}`} />
      <div className="max-w-7xl mx-auto px-6 relative z-10 flex items-center justify-between">
        
        <MagneticElement>
          <div className="flex items-center gap-2 cursor-pointer group">
            <div className="w-10 h-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center group-hover:border-blue-500/50 transition-colors">
              <Cpu className="w-5 h-5 text-blue-400" />
            </div>
            <span className="font-bold text-xl tracking-tight text-white">Goshawk</span>
          </div>
        </MagneticElement>

        <div className="hidden md:flex items-center gap-8 px-6 py-2 rounded-full bg-white/[0.03] border border-white/[0.05] backdrop-blur-lg">
          {['Solutions', 'Ecosystem', 'Outcomes'].map((item) => (
            <a key={item} href={`#${item.toLowerCase()}`} className="text-sm text-gray-400 hover:text-white transition-colors font-medium">
              {item}
            </a>
          ))}
        </div>

        <MagneticElement>
          <button className="hidden md:flex items-center gap-2 px-6 py-2.5 rounded-full bg-white text-black text-sm font-semibold hover:bg-gray-200 transition-colors">
            Talk to Team
          </button>
        </MagneticElement>

      </div>
    </nav>
  );
};

const Hero = () => {
  return (
    <section className="relative min-h-screen flex items-center pt-32 pb-20 overflow-hidden">
      {/* Background Elements */}
      <div className="absolute inset-0 bg-grid z-0" />
      <div className="glow-blob bg-blue-600/20 w-[600px] h-[600px] top-[-10%] left-[-10%]" />
      <div className="glow-blob bg-indigo-600/20 w-[500px] h-[500px] bottom-[10%] right-[-5%]" />
      <div className="glow-blob bg-cyan-600/10 w-[400px] h-[400px] top-[40%] left-[40%] animate-pulse" />

      <div className="max-w-7xl mx-auto px-6 w-full relative z-10">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          
          {/* Text Content */}
          <div className="max-w-2xl">
            <Reveal>
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 mb-8">
                <span className="relative flex h-2 w-2">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
                </span>
                <span className="text-[11px] font-bold tracking-[0.2em] text-blue-400 uppercase">AI-Powered Growth Systems</span>
              </div>
            </Reveal>

            <Reveal delay={100}>
              <h1 className="text-5xl sm:text-6xl lg:text-7xl font-semibold tracking-tighter leading-[1.1] mb-6">
                Build.<br />
                Automate.<br />
                Advertise.<br />
                <span className="text-gradient-electric font-bold">Grow.</span>
              </h1>
            </Reveal>

            <Reveal delay={200}>
              <p className="text-lg text-gray-400 mb-10 max-w-xl leading-relaxed">
                We engineer intelligent ecosystems. AI-powered advertising, automated workflows, and high-performance digital experiences for businesses scaling beyond traditional limits.
              </p>
            </Reveal>

            <Reveal delay={300}>
              <div className="flex flex-col sm:flex-row gap-4">
                <MagneticElement>
                  <button className="w-full sm:w-auto px-8 py-4 rounded-full bg-blue-600 hover:bg-blue-500 text-white font-medium flex items-center justify-center gap-2 transition-all shadow-[0_0_30px_rgba(37,99,235,0.3)]">
                    Explore Solutions <ArrowRight className="w-4 h-4" />
                  </button>
                </MagneticElement>
                <MagneticElement>
                  <button className="w-full sm:w-auto px-8 py-4 rounded-full bg-white/5 border border-white/10 hover:bg-white/10 text-white font-medium flex items-center justify-center transition-all">
                    View Architecture
                  </button>
                </MagneticElement>
              </div>
            </Reveal>
          </div>

          {/* Abstract Interactive 3D Visual */}
          <Reveal delay={400} className="hidden lg:block relative h-[600px] perspective-[1000px]">
            <div className="absolute inset-0 flex items-center justify-center transform-style-3d animate-float">
              {/* Central Core */}
              <SpotlightCard className="w-48 h-48 rounded-full flex items-center justify-center z-30 border-blue-500/30">
                <div className="absolute inset-0 bg-blue-500/10 rounded-full animate-pulse" />
                <Brain className="w-16 h-16 text-blue-400 relative z-10" />
                <div className="absolute -inset-4 border border-dashed border-blue-400/20 rounded-full animate-[spin_20s_linear_infinite]" />
              </SpotlightCard>

              {/* Floating Panels */}
              <SpotlightCard className="absolute top-[10%] left-[5%] w-56 p-4 z-40 transform -rotate-6 animate-float" spotColor="rgba(6, 182, 212, 0.2)">
                <div className="flex items-center gap-3 mb-3">
                  <div className="w-8 h-8 rounded-lg bg-cyan-500/20 flex items-center justify-center"><Target className="w-4 h-4 text-cyan-400" /></div>
                  <span className="text-sm font-semibold text-white">AI Advertising</span>
                </div>
                <div className="space-y-2">
                  <div className="h-2 w-full bg-white/5 rounded overflow-hidden"><div className="h-full bg-cyan-400 w-[85%]" /></div>
                  <div className="flex justify-between text-xs text-gray-400"><span>ROAS</span><span className="text-cyan-400">+124%</span></div>
                </div>
              </SpotlightCard>

              <SpotlightCard className="absolute bottom-[20%] right-[5%] w-56 p-4 z-40 transform rotate-6 animate-float-delayed" spotColor="rgba(139, 92, 246, 0.2)">
                <div className="flex items-center gap-3 mb-3">
                  <div className="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center"><Zap className="w-4 h-4 text-purple-400" /></div>
                  <span className="text-sm font-semibold text-white">Automation</span>
                </div>
                <div className="flex gap-2">
                  {[1,2,3].map(i => <div key={i} className="w-8 h-8 rounded bg-white/5 flex items-center justify-center"><Workflow className="w-3 h-3 text-gray-500" /></div>)}
                </div>
              </SpotlightCard>
              
              {/* Connection Lines (SVG) */}
              <svg className="absolute inset-0 w-full h-full -z-10 pointer-events-none">
                <path d="M 200,150 Q 300,300 350,300" fill="none" stroke="rgba(6, 182, 212, 0.3)" strokeWidth="1" strokeDasharray="4 4" className="animate-[dash_20s_linear_infinite]" />
                <path d="M 450,300 Q 500,450 400,450" fill="none" stroke="rgba(139, 92, 246, 0.3)" strokeWidth="1" strokeDasharray="4 4" className="animate-[dash_20s_linear_infinite_reverse]" />
              </svg>
            </div>
          </Reveal>

        </div>
      </div>
    </section>
  );
};

const Services = () => {
  return (
    <section id="solutions" className="py-32 relative z-10">
      <div className="max-w-7xl mx-auto px-6">
        
        <Reveal>
          <div className="mb-16">
            <span className="text-blue-500 font-semibold tracking-widest text-xs uppercase mb-3 block">What We Build</span>
            <h2 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-6">Three capabilities.<br/>One growth engine.</h2>
          </div>
        </Reveal>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          
          {/* Card 1: Advertising */}
          <Reveal delay={100} className="md:col-span-2 md:row-span-2">
            <SpotlightCard className="h-full p-8 flex flex-col justify-between group cursor-pointer" spotColor="rgba(59, 130, 246, 0.1)">
              <div className="mb-12">
                <div className="w-12 h-12 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center mb-6">
                  <Target className="w-6 h-6 text-blue-400" />
                </div>
                <h3 className="text-3xl font-bold text-white mb-4">AI Advertising</h3>
                <p className="text-gray-400 max-w-md">Turn advertising into an intelligent growth system. AI-driven strategy, creative optimization, and predictive audience intelligence.</p>
              </div>
              
              <div className="relative h-64 rounded-2xl overflow-hidden bg-[#050508] border border-white/5 group-hover:border-blue-500/20 transition-colors">
                <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2000&auto=format&fit=crop')] bg-cover bg-center opacity-40 mix-blend-luminosity" />
                <div className="absolute inset-0 bg-gradient-to-t from-[#050508] to-transparent" />
                {/* Mock UI Overlay */}
                <div className="absolute bottom-4 left-4 right-4 p-4 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 flex items-center justify-between">
                  <div>
                    <div className="text-xs text-gray-400 mb-1">Campaign Optimization</div>
                    <div className="text-sm font-bold text-emerald-400 flex items-center gap-1"><TrendingUp className="w-3 h-3"/> Reallocating Budget</div>
                  </div>
                  <div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center">
                    <Brain className="w-4 h-4 text-blue-400" />
                  </div>
                </div>
              </div>
            </SpotlightCard>
          </Reveal>

          {/* Card 2: Automation */}
          <Reveal delay={200}>
            <SpotlightCard className="h-full p-8 flex flex-col group cursor-pointer" spotColor="rgba(168, 85, 247, 0.1)">
               <div className="w-12 h-12 rounded-xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center mb-6">
                  <Zap className="w-6 h-6 text-purple-400" />
                </div>
                <h3 className="text-2xl font-bold text-white mb-3">AI Automation</h3>
                <p className="text-gray-400 text-sm mb-8">Automate repetitive workflows and build intelligent processes that keep your business moving.</p>
                
                <div className="mt-auto relative h-40 rounded-xl bg-[#050508] border border-white/5 overflow-hidden flex items-center justify-center">
                  <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=800&auto=format&fit=crop')] bg-cover bg-center opacity-30 mix-blend-screen" />
                  <div className="flex items-center gap-2 z-10">
                    <div className="w-10 h-10 rounded-lg bg-white/10 backdrop-blur border border-white/20 flex items-center justify-center"><Layers className="w-4 h-4"/></div>
                    <div className="w-6 h-[1px] bg-purple-500/50" />
                    <div className="w-10 h-10 rounded-lg bg-purple-500/20 backdrop-blur border border-purple-500/30 flex items-center justify-center shadow-[0_0_15px_rgba(168,85,247,0.4)]"><Brain className="w-4 h-4 text-purple-400"/></div>
                    <div className="w-6 h-[1px] bg-purple-500/50" />
                    <div className="w-10 h-10 rounded-lg bg-white/10 backdrop-blur border border-white/20 flex items-center justify-center"><Globe className="w-4 h-4"/></div>
                  </div>
                </div>
            </SpotlightCard>
          </Reveal>

          {/* Card 3: Web Dev */}
          <Reveal delay={300}>
             <SpotlightCard className="h-full p-8 flex flex-col group cursor-pointer" spotColor="rgba(6, 182, 212, 0.1)">
               <div className="w-12 h-12 rounded-xl bg-cyan-500/10 border border-cyan-500/20 flex items-center justify-center mb-6">
                  <Layout className="w-6 h-6 text-cyan-400" />
                </div>
                <h3 className="text-2xl font-bold text-white mb-3">Web Development</h3>
                <p className="text-gray-400 text-sm mb-8">High-performance digital experiences engineered for conversion and scalability.</p>
                
                <div className="mt-auto relative h-40 rounded-xl bg-[#050508] border border-white/5 overflow-hidden p-4">
                  <div className="w-full h-4 flex gap-1.5 mb-3">
                    <div className="w-2 h-2 rounded-full bg-red-500/50" />
                    <div className="w-2 h-2 rounded-full bg-yellow-500/50" />
                    <div className="w-2 h-2 rounded-full bg-green-500/50" />
                  </div>
                  <div className="space-y-2">
                    <div className="w-3/4 h-2 bg-white/10 rounded" />
                    <div className="w-1/2 h-2 bg-white/10 rounded" />
                    <div className="w-full h-12 bg-gradient-to-r from-cyan-500/20 to-blue-500/20 rounded mt-4 border border-cyan-500/10" />
                  </div>
                </div>
            </SpotlightCard>
          </Reveal>

        </div>
      </div>
    </section>
  );
};

const Ecosystem = () => {
  return (
    <section id="ecosystem" className="py-32 relative">
      <div className="absolute inset-0 bg-blue-900/5 mask-image:linear-gradient(to_bottom,transparent,black,transparent)" />
      
      <div className="max-w-7xl mx-auto px-6 relative z-10">
        <Reveal className="text-center max-w-3xl mx-auto mb-20">
          <span className="text-blue-500 font-semibold tracking-widest text-xs uppercase mb-3 block">The AI Layer</span>
          <h2 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-6">What happens when your digital ecosystem starts thinking together?</h2>
        </Reveal>

        <Reveal delay={200}>
          <div className="relative h-[500px] w-full max-w-4xl mx-auto bg-[#0a0a0f]/50 rounded-[3rem] border border-white/5 backdrop-blur-sm overflow-hidden flex items-center justify-center">
            
            {/* Center Node */}
            <div className="relative z-20">
              <div className="absolute inset-0 bg-blue-500/20 rounded-full blur-xl animate-pulse" />
              <div className="w-24 h-24 rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-600 p-[1px] shadow-[0_0_40px_rgba(59,130,246,0.3)]">
                <div className="w-full h-full bg-[#0a0a0f] rounded-2xl flex flex-col items-center justify-center">
                  <Brain className="w-8 h-8 text-blue-400 mb-1" />
                  <span className="text-[10px] font-bold text-white tracking-widest">AI CORE</span>
                </div>
              </div>
            </div>

            {/* Orbiting Elements */}
            <div className="absolute w-[300px] h-[300px] border border-white/5 rounded-full animate-[spin_30s_linear_infinite]">
              <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-[#1a1a24] border border-white/10 px-3 py-1.5 rounded-full flex items-center gap-2 text-xs">
                <Target className="w-3 h-3 text-cyan-400"/> Ads
              </div>
              <div className="absolute -bottom-4 left-1/2 -translate-x-1/2 bg-[#1a1a24] border border-white/10 px-3 py-1.5 rounded-full flex items-center gap-2 text-xs transform rotate-180">
                <div className="transform rotate-180 flex items-center gap-2">
                  <Globe className="w-3 h-3 text-blue-400"/> Web
                </div>
              </div>
            </div>

            <div className="absolute w-[450px] h-[450px] border border-white/5 border-dashed rounded-full animate-[spin_40s_linear_infinite_reverse]">
               <div className="absolute top-1/2 -left-4 -translate-y-1/2 bg-[#1a1a24] border border-white/10 px-3 py-1.5 rounded-full flex items-center gap-2 text-xs transform -rotate-90">
                 <div className="transform rotate-90 flex items-center gap-2">
                    <Layers className="w-3 h-3 text-purple-400"/> Data
                 </div>
              </div>
              <div className="absolute top-1/2 -right-4 -translate-y-1/2 bg-[#1a1a24] border border-white/10 px-3 py-1.5 rounded-full flex items-center gap-2 text-xs transform rotate-90">
                <div className="transform -rotate-90 flex items-center gap-2">
                  <Zap className="w-3 h-3 text-emerald-400"/> CRM
                </div>
              </div>
            </div>
            
            {/* Background Image Mask */}
            <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2000&auto=format&fit=crop')] bg-cover bg-center opacity-10 mix-blend-screen pointer-events-none" />
          </div>
        </Reveal>
      </div>
    </section>
  );
};

const Outcomes = () => {
  const metrics = [
    { icon: <TrendingUp className="w-5 h-5 text-emerald-400"/>, title: "More Efficiency", desc: "Reduce repetitive manual processes across your organization." },
    { icon: <BarChart3 className="w-5 h-5 text-blue-400"/>, title: "Better Decisions", desc: "Turn fragmented business data into actionable intelligence." },
    { icon: <Target className="w-5 h-5 text-purple-400"/>, title: "Smarter Acquisition", desc: "Continuously improve customer acquisition costs via AI." },
    { icon: <Globe className="w-5 h-5 text-cyan-400"/>, title: "Digital Scale", desc: "Build technology foundations that grow seamlessly." },
  ];

  return (
    <section id="outcomes" className="py-32 border-t border-white/[0.02]">
      <div className="max-w-7xl mx-auto px-6">
        <div className="grid lg:grid-cols-3 gap-12">
          
          <div className="lg:col-span-1">
            <Reveal>
              <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-white mb-4">Built around outcomes.<br/>Not activity.</h2>
              <p className="text-gray-400 leading-relaxed mb-8">We measure success by efficiency gained, revenue generated, and systems scaled. Not just hours billed or impressions delivered.</p>
              <button className="flex items-center gap-2 text-sm font-semibold text-blue-400 hover:text-blue-300 transition-colors">
                Read our methodology <ArrowRight className="w-4 h-4"/>
              </button>
            </Reveal>
          </div>

          <div className="lg:col-span-2 grid sm:grid-cols-2 gap-4">
            {metrics.map((m, i) => (
              <Reveal key={i} delay={i * 100}>
                <SpotlightCard className="p-6 h-full bg-[#0a0a0f] border-white/5 hover:border-white/10 transition-colors">
                  <div className="w-10 h-10 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center mb-4">
                    {m.icon}
                  </div>
                  <h4 className="text-lg font-semibold text-white mb-2">{m.title}</h4>
                  <p className="text-sm text-gray-400">{m.desc}</p>
                </SpotlightCard>
              </Reveal>
            ))}
          </div>

        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  return (
    <footer className="relative pt-32 pb-10 overflow-hidden border-t border-white/[0.05]">
      <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop')] bg-cover bg-center opacity-10 mix-blend-screen" />
      <div className="absolute inset-0 bg-gradient-to-b from-transparent to-[#030305]" />
      
      <div className="max-w-7xl mx-auto px-6 relative z-10 text-center mb-32">
        <Reveal>
          <div className="w-16 h-16 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center mx-auto mb-8 shadow-[0_0_30px_rgba(255,255,255,0.05)]">
            <Cpu className="w-8 h-8 text-white" />
          </div>
          <h2 className="text-5xl md:text-7xl font-bold tracking-tight text-white mb-6">Ready to build a<br/>smarter business?</h2>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center mt-10">
            <MagneticElement>
              <button className="w-full sm:w-auto px-8 py-4 rounded-full bg-white text-black font-semibold hover:bg-gray-200 transition-colors">
                Start a Conversation
              </button>
            </MagneticElement>
          </div>
        </Reveal>
      </div>

      <div className="max-w-7xl mx-auto px-6 relative z-10">
        <div className="flex flex-col md:flex-row justify-between items-center gap-6 pt-8 border-t border-white/10 text-sm text-gray-500">
          <div className="flex items-center gap-2">
            <Cpu className="w-4 h-4 text-gray-400" />
            <span className="font-semibold text-gray-300">Goshawk Media</span>
          </div>
          <div className="flex gap-6">
            <a href="#" className="hover:text-white transition-colors">Solutions</a>
            <a href="#" className="hover:text-white transition-colors">Privacy Policy</a>
            <a href="#" className="hover:text-white transition-colors">Terms</a>
          </div>
          <p>© 2026 Goshawk Media. All rights reserved.</p>
        </div>
      </div>
    </footer>
  );
};

export default function App() {
  return (
    <div className="min-h-screen selection:bg-blue-500/30 selection:text-blue-200">
      <GlobalStyles />
      <Navbar />
      <main>
        <Hero />
        <Services />
        <Ecosystem />
        <Outcomes />
      </main>
      <Footer />
    </div>
  );
}