import { useEffect, useRef, useState } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { 
  Menu, X, ArrowRight, Globe, Server, ShoppingCart, 
  Layout, Presentation, TrendingUp, MapPin, Mail, 
  Phone, MessageCircle, ChevronRight, CheckCircle2,
  Search, Share2, Truck, Sparkles, ExternalLink
} from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

function App() {
  const [menuOpen, setMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const headerRef = useRef<HTMLElement>(null);
  const heroRef = useRef<HTMLDivElement>(null);
  const solutionsRef = useRef<HTMLDivElement>(null);
  const growthRef = useRef<HTMLDivElement>(null);
  const portfolioRef = useRef<HTMLDivElement>(null);
  const infrastructureRef = useRef<HTMLDivElement>(null);
  const contactRef = useRef<HTMLDivElement>(null);

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

  useEffect(() => {
    const ctx = gsap.context(() => {
      // Hero entrance animation
      const heroTl = gsap.timeline({ delay: 0.3 });
      
      heroTl.fromTo('.hero-bg', 
        { opacity: 0, scale: 1.1 },
        { opacity: 1, scale: 1, duration: 1.2, ease: 'power2.out' }
      )
      .fromTo('.hero-frame', 
        { opacity: 0, scale: 1.04 },
        { opacity: 1, scale: 1, duration: 0.9, ease: 'power2.out' },
        '-=0.8'
      )
      .fromTo('.hero-headline span',
        { y: 50, opacity: 0 },
        { y: 0, opacity: 1, duration: 0.7, stagger: 0.08, ease: 'power2.out' },
        '-=0.5'
      )
      .fromTo('.hero-subtext',
        { y: 25, opacity: 0 },
        { y: 0, opacity: 1, duration: 0.6, ease: 'power2.out' },
        '-=0.3'
      )
      .fromTo('.hero-cta',
        { y: 20, opacity: 0 },
        { y: 0, opacity: 1, duration: 0.5, stagger: 0.1, ease: 'power2.out' },
        '-=0.3'
      )
      .fromTo('.hero-vertical',
        { opacity: 0 },
        { opacity: 1, duration: 0.4 },
        '-=0.2'
      );

      // Solutions section animation
      gsap.fromTo('.solutions-card',
        { y: 60, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: 0.7,
          stagger: 0.12,
          ease: 'power2.out',
          scrollTrigger: {
            trigger: solutionsRef.current,
            start: 'top 75%',
            toggleActions: 'play none none reverse'
          }
        }
      );

      // Growth section animation
      gsap.fromTo('.growth-item',
        { x: -40, opacity: 0 },
        {
          x: 0,
          opacity: 1,
          duration: 0.6,
          stagger: 0.1,
          ease: 'power2.out',
          scrollTrigger: {
            trigger: growthRef.current,
            start: 'top 70%',
            toggleActions: 'play none none reverse'
          }
        }
      );

      // Portfolio section animation
      gsap.fromTo('.portfolio-item',
        { y: 50, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: 0.7,
          stagger: 0.1,
          ease: 'power2.out',
          scrollTrigger: {
            trigger: portfolioRef.current,
            start: 'top 70%',
            toggleActions: 'play none none reverse'
          }
        }
      );

      // Infrastructure section animation
      gsap.fromTo('.infra-card',
        { y: 40, opacity: 0, scale: 0.95 },
        {
          y: 0,
          opacity: 1,
          scale: 1,
          duration: 0.6,
          stagger: 0.1,
          ease: 'power2.out',
          scrollTrigger: {
            trigger: infrastructureRef.current,
            start: 'top 70%',
            toggleActions: 'play none none reverse'
          }
        }
      );

      // Contact section animation
      gsap.fromTo('.contact-content',
        { x: -30, opacity: 0 },
        {
          x: 0,
          opacity: 1,
          duration: 0.7,
          ease: 'power2.out',
          scrollTrigger: {
            trigger: contactRef.current,
            start: 'top 70%',
            toggleActions: 'play none none reverse'
          }
        }
      );

      gsap.fromTo('.contact-form',
        { x: 30, opacity: 0 },
        {
          x: 0,
          opacity: 1,
          duration: 0.7,
          delay: 0.2,
          ease: 'power2.out',
          scrollTrigger: {
            trigger: contactRef.current,
            start: 'top 70%',
            toggleActions: 'play none none reverse'
          }
        }
      );
    });

    return () => ctx.revert();
  }, []);

  const scrollToSection = (ref: React.RefObject<HTMLDivElement | null>) => {
    ref.current?.scrollIntoView({ behavior: 'smooth' });
    setMenuOpen(false);
  };

  const navLinks = [
    { label: 'Solutions', ref: solutionsRef },
    { label: 'Growth', ref: growthRef },
    { label: 'Portfolio', ref: portfolioRef },
    { label: 'Infrastructure', ref: infrastructureRef },
    { label: 'Contact', ref: contactRef },
  ];

  const solutions = [
    {
      icon: Truck,
      title: 'Enterprise Logistics',
      description: 'Custom tracking and management portals designed for complex supply chain operations.',
      image: '/solution_logistics.jpg',
      link: '#contact'
    },
    {
      icon: ShoppingCart,
      title: 'E-Commerce Excellence',
      description: 'High-converting Shopify and WooCommerce stores that drive revenue growth.',
      image: '/solution_ecommerce.jpg',
      link: '#contact'
    },
    {
      icon: Layout,
      title: 'Corporate Web Design',
      description: 'Clean, crisp HTML/CSS/JS and WordPress builds for professional presence.',
      image: '/solution_corporate.jpg',
      link: '#contact'
    },
    {
      icon: Presentation,
      title: 'Executive Presentations',
      description: 'Professional decks for high-stakes meetings and investor pitches.',
      image: '/solution_presentation.jpg',
      link: '#contact'
    }
  ];

  const growthServices = [
    {
      icon: Search,
      title: 'SEO Ranking',
      description: 'Data-driven optimization strategies that elevate your search visibility and organic traffic.'
    },
    {
      icon: MapPin,
      title: 'GBP Optimization',
      description: 'Google Business Profile management that puts your brand on the local map.'
    },
    {
      icon: Share2,
      title: 'Social Media Management',
      description: 'Strategic content and community management across all major platforms.'
    }
  ];

  const portfolioItems = [
    {
      category: 'Healthcare',
      title: 'Secure Digital Portal',
      description: 'Clinical precision meets digital accessibility for a leading hospital network.',
      image: '/portfolio_healthcare.jpg',
      link: 'https://example.com/healthcare',
      client: 'Metro General Hospital'
    },
    {
      category: 'Social Impact',
      title: 'Childhood Cancer Foundation',
      description: 'Global platform optimized for advocacy and donation conversion.',
      image: '/portfolio_charity.jpg',
      link: 'https://example.com/charity',
      client: 'Hope for Children'
    },
    {
      category: 'Sustainability',
      title: 'Renewable Energy Platform',
      description: 'Showcasing green-tech infrastructure with immersive digital experience.',
      image: '/portfolio_energy.jpg',
      link: 'https://example.com/energy',
      client: 'GreenPower Solutions'
    },
    {
      category: 'Agriculture',
      title: 'Farm-to-Market System',
      description: 'Integrated supply chain solution modernizing agricultural commerce.',
      image: '/portfolio_agriculture.jpg',
      link: 'https://example.com/agriculture',
      client: 'AgriTech Networks'
    },
    {
      category: 'Fine Art',
      title: 'Immersive Art Gallery',
      description: 'Minimalist digital canvas for international curators and collectors.',
      image: '/portfolio_art.jpg',
      link: 'https://example.com/art',
      client: 'Contemporary Arts Center'
    },
    {
      category: 'Technology',
      title: 'SaaS Analytics Dashboard',
      description: 'Enterprise analytics platform with real-time data visualization.',
      image: '/portfolio_tech.jpg',
      link: 'https://example.com/tech',
      client: 'DataFlow Systems'
    }
  ];

  const infrastructureServices = [
    {
      icon: Globe,
      title: 'Domain Registration',
      description: 'Secure your digital identity with premium domain acquisition and management.'
    },
    {
      icon: Server,
      title: 'Premium Hosting',
      description: 'Enterprise-grade infrastructure with 99.9% uptime guarantee.'
    },
    {
      icon: Mail,
      title: 'Workspace Emails',
      description: 'Professional email solutions powered by Google Workspace and Microsoft 365.'
    }
  ];

  return (
    <div className="relative bg-[#14161B] min-h-screen">
      {/* Grain Overlay */}
      <div className="grain-overlay" />

      {/* Header */}
      <header 
        ref={headerRef}
        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
          scrolled ? 'glass-header py-4' : 'bg-transparent py-6'
        }`}
      >
        <div className="w-full px-6 lg:px-12 flex items-center justify-between">
          <a 
            href="#" 
            onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}
            className="font-serif text-xl lg:text-2xl text-[#C9A45C] tracking-wide hover:text-[#E5C88C] transition-colors"
          >
            Dan Web Development
          </a>
          
          <nav className="hidden lg:flex items-center gap-8">
            {navLinks.map((link) => (
              <button
                key={link.label}
                onClick={() => scrollToSection(link.ref)}
                className="text-sm text-[#B8B2AA] hover:text-[#C9A45C] transition-colors tracking-wider uppercase font-medium"
              >
                {link.label}
              </button>
            ))}
          </nav>

          <button
            onClick={() => setMenuOpen(true)}
            className="lg:hidden text-[#C9A45C] p-2"
          >
            <Menu size={24} />
          </button>
        </div>
      </header>

      {/* Mobile Menu */}
      <div className={`fixed inset-0 z-[60] bg-[#14161B]/98 backdrop-blur-xl transition-all duration-500 ${
        menuOpen ? 'opacity-100 visible' : 'opacity-0 invisible'
      }`}>
        <div className="flex flex-col h-full p-8">
          <div className="flex justify-between items-center mb-16">
            <span className="font-serif text-xl text-[#C9A45C]">Dan Web Development</span>
            <button onClick={() => setMenuOpen(false)} className="text-[#C9A45C] p-2">
              <X size={28} />
            </button>
          </div>
          <nav className="flex flex-col gap-6">
            {navLinks.map((link) => (
              <button
                key={link.label}
                onClick={() => scrollToSection(link.ref)}
                className="text-3xl font-sans font-bold text-white hover:text-[#C9A45C] transition-colors text-left"
              >
                {link.label}
              </button>
            ))}
          </nav>
          <div className="mt-auto">
            <button 
              onClick={() => scrollToSection(contactRef)}
              className="btn-primary w-full"
            >
              Request a Quote
            </button>
          </div>
        </div>
      </div>

      {/* Hero Section */}
      <section ref={heroRef} className="section-pinned relative min-h-screen">
        {/* Background Image */}
        <div className="hero-bg absolute inset-0">
          <img 
            src="/hero_bg.jpg" 
            alt="Digital Agency Workspace"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-[#14161B]/95 via-[#14161B]/80 to-[#14161B]/60" />
          <div className="absolute inset-0 bg-gradient-to-t from-[#14161B] via-transparent to-[#14161B]/30" />
        </div>

        <div className="hero-frame gold-frame" />
        
        <div className="relative z-10 min-h-screen flex flex-col justify-center px-8 lg:px-[7vw]">
          <div className="max-w-4xl">
            <h1 className="hero-headline headline-display text-white mb-8">
              <span className="block">Architecting</span>
              <span className="block text-[#C9A45C]">Digital Legacies.</span>
            </h1>
            
            <p className="hero-subtext body-text max-w-xl text-lg lg:text-xl mb-10 text-[#D0D0D0]">
              Bespoke Development, Global Logistics Systems, and Growth Strategies for the Modern Enterprise.
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4">
              <button 
                onClick={() => scrollToSection(contactRef)}
                className="hero-cta btn-primary flex items-center justify-center gap-2"
              >
                Request a Quote
                <ArrowRight size={18} />
              </button>
              <button 
                onClick={() => scrollToSection(portfolioRef)}
                className="hero-cta btn-secondary"
              >
                View Selected Work
              </button>
            </div>
          </div>
        </div>

        <div className="hero-vertical vertical-label hidden lg:block">
          Dan Web Development
        </div>

        {/* Decorative elements */}
        <div className="absolute bottom-12 right-12 hidden lg:flex items-center gap-4 text-[#B8B2AA]">
          <Globe size={18} />
          <span className="text-xs font-mono tracking-wider">NIGERIA • VIETNAM • GLOBAL</span>
        </div>
      </section>

      {/* Solutions Section */}
      <section ref={solutionsRef} className="relative py-24 lg:py-32 bg-[#1A1D24]">
        <div className="gold-frame" />
        
        <div className="relative z-10 px-8 lg:px-[7vw]">
          <div className="mb-16">
            <span className="text-[#C9A45C] text-xs font-mono tracking-[0.2em] uppercase mb-4 block">
              Our Solutions
            </span>
            <h2 className="headline-display text-white max-w-3xl">
              ENGINEERED FOR <span className="text-[#C9A45C]">EXCELLENCE</span>
            </h2>
          </div>

          <div className="grid md:grid-cols-2 gap-6 lg:gap-8">
            {solutions.map((solution, index) => (
              <a 
                key={index}
                href={solution.link}
                onClick={(e) => { e.preventDefault(); scrollToSection(contactRef); }}
                className="solutions-card group relative overflow-hidden rounded-2xl border border-[#C9A45C]/20 bg-[#14161B]/50 hover:border-[#C9A45C]/50 transition-all duration-500 card-hover"
              >
                <div className="absolute inset-0 opacity-30 group-hover:opacity-40 transition-opacity">
                  <img 
                    src={solution.image} 
                    alt={solution.title}
                    className="w-full h-full object-cover"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-[#14161B] via-[#14161B]/85 to-[#14161B]/60" />
                </div>
                
                <div className="relative p-8 lg:p-10">
                  <solution.icon className="text-[#C9A45C] mb-6" size={40} strokeWidth={1.5} />
                  <h3 className="font-sans font-bold text-2xl lg:text-3xl text-white mb-4">
                    {solution.title}
                  </h3>
                  <p className="body-text text-base text-[#D0D0D0]">
                    {solution.description}
                  </p>
                  <div className="mt-6 flex items-center gap-2 text-[#C9A45C]">
                    <span className="text-sm font-medium">Learn More</span>
                    <ChevronRight size={16} className="group-hover:translate-x-1 transition-transform" />
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Growth Suite Section */}
      <section ref={growthRef} className="relative py-24 lg:py-32 bg-[#14161B]">
        <div className="gold-frame" />
        
        <div className="relative z-10 px-8 lg:px-[7vw]">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div>
              <span className="text-[#C9A45C] text-xs font-mono tracking-[0.2em] uppercase mb-4 block">
                Growth Suite
              </span>
              <h2 className="headline-display text-white mb-6">
                AMPLIFY YOUR <span className="text-[#C9A45C]">REACH</span>
              </h2>
              <p className="body-text text-lg mb-10 text-[#D0D0D0]">
                Strategic digital marketing solutions that transform visibility into measurable business growth. 
                Our data-driven approach ensures every campaign delivers ROI.
              </p>
              
              <div className="flex items-center gap-4 text-[#B8B2AA]">
                <TrendingUp size={20} className="text-[#C9A45C]" />
                <span className="text-sm font-mono tracking-wider">AVERAGE 340% TRAFFIC INCREASE</span>
              </div>
            </div>

            <div className="space-y-6">
              {growthServices.map((service, index) => (
                <div 
                  key={index}
                  className="growth-item group p-6 lg:p-8 rounded-xl border border-[#C9A45C]/20 hover:border-[#C9A45C]/50 bg-[#1A1D24]/50 hover:bg-[#1A1D24] transition-all duration-300"
                >
                  <div className="flex items-start gap-5">
                    <div className="p-3 rounded-lg bg-[#C9A45C]/10 text-[#C9A45C] group-hover:bg-[#C9A45C] group-hover:text-[#14161B] transition-all">
                      <service.icon size={24} strokeWidth={1.5} />
                    </div>
                    <div>
                      <h3 className="font-sans font-bold text-xl text-white mb-2">
                        {service.title}
                      </h3>
                      <p className="body-text text-[#D0D0D0]">
                        {service.description}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Portfolio Section */}
      <section ref={portfolioRef} className="relative py-24 lg:py-32 bg-[#1A1D24]">
        <div className="gold-frame" />
        
        <div className="relative z-10 px-8 lg:px-[7vw]">
          <div className="mb-16">
            <span className="text-[#C9A45C] text-xs font-mono tracking-[0.2em] uppercase mb-4 block">
              The Success Stories
            </span>
            <h2 className="headline-display text-white max-w-3xl">
              WORK THAT <span className="text-[#C9A45C]">SPEAKS</span> FOR ITSELF
            </h2>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {portfolioItems.map((item, index) => (
              <a 
                key={index}
                href={item.link}
                target="_blank"
                rel="noopener noreferrer"
                className="portfolio-item group relative aspect-[4/5] overflow-hidden rounded-2xl cursor-pointer block"
              >
                <img 
                  src={item.image} 
                  alt={item.title}
                  className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-[#14161B] via-[#14161B]/50 to-transparent opacity-80 group-hover:opacity-90 transition-opacity" />
                
                <div className="absolute inset-0 p-6 flex flex-col justify-end">
                  <span className="text-[#C9A45C] text-xs font-mono tracking-[0.15em] uppercase mb-2">
                    {item.category}
                  </span>
                  <h3 className="font-sans font-bold text-xl text-white mb-1">
                    {item.title}
                  </h3>
                  <p className="text-sm text-[#B8B2AA] mb-3">{item.client}</p>
                  <p className="body-text text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 text-[#D0D0D0]">
                    {item.description}
                  </p>
                </div>

                <div className="absolute top-4 right-4 p-2 rounded-full bg-[#C9A45C]/0 group-hover:bg-[#C9A45C]/20 transition-colors">
                  <ExternalLink size={18} className="text-[#C9A45C] opacity-0 group-hover:opacity-100 transition-opacity" />
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Infrastructure Section */}
      <section ref={infrastructureRef} className="relative py-24 lg:py-32 bg-[#14161B]">
        <div className="gold-frame" />
        
        <div className="relative z-10 px-8 lg:px-[7vw]">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <span className="text-[#C9A45C] text-xs font-mono tracking-[0.2em] uppercase mb-4 block">
              Infrastructure
            </span>
            <h2 className="headline-display text-white mb-6">
              BULLETPROOF <span className="text-[#C9A45C]">FOUNDATIONS</span>
            </h2>
            <p className="body-text text-lg text-[#D0D0D0]">
              Enterprise-grade infrastructure services that keep your digital presence secure, fast, and always available.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {infrastructureServices.map((service, index) => (
              <div 
                key={index}
                className="infra-card text-center p-8 lg:p-10 rounded-2xl border border-[#C9A45C]/20 hover:border-[#C9A45C]/50 bg-[#1A1D24]/50 hover:bg-[#1A1D24] transition-all duration-300"
              >
                <div className="inline-flex p-4 rounded-full bg-[#C9A45C]/10 text-[#C9A45C] mb-6">
                  <service.icon size={32} strokeWidth={1.5} />
                </div>
                <h3 className="font-sans font-bold text-xl text-white mb-4">
                  {service.title}
                </h3>
                <p className="body-text text-[#D0D0D0]">
                  {service.description}
                </p>
              </div>
            ))}
          </div>

          <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            {[
              { value: '99.9%', label: 'Uptime Guarantee' },
              { value: '24/7', label: 'Expert Support' },
              { value: 'SSL', label: 'Security Included' },
              { value: 'Global', label: 'CDN Network' },
            ].map((stat, index) => (
              <div key={index} className="infra-card">
                <div className="text-3xl lg:text-4xl font-sans font-black text-[#C9A45C] mb-2">
                  {stat.value}
                </div>
                <div className="text-sm text-[#B8B2AA] font-mono tracking-wider uppercase">
                  {stat.label}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section ref={contactRef} className="relative py-24 lg:py-32 bg-[#1E2129]">
        <div className="gold-frame" />
        
        <div className="relative z-10 px-8 lg:px-[7vw]">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-16">
            <div className="contact-content">
              <span className="text-[#C9A45C] text-xs font-mono tracking-[0.2em] uppercase mb-4 block">
                Contact & Quote Gateway
              </span>
              <h2 className="headline-display text-white mb-6">
                LET'S BUILD <span className="text-[#C9A45C]">SOMETHING</span> SOLID
              </h2>
              <p className="body-text text-lg mb-10 text-[#D0D0D0]">
                Tailored Solutions for Unique Ambitions. We do not offer one-size-fits-all pricing. 
                Apply for a consultation below.
              </p>

              <div className="space-y-6">
                <div className="flex items-center gap-4">
                  <div className="p-3 rounded-lg bg-[#C9A45C]/10 text-[#C9A45C]">
                    <Phone size={20} />
                  </div>
                  <div>
                    <div className="text-xs text-[#B8B2AA] font-mono uppercase tracking-wider mb-1">Phone</div>
                    <a href="tel:+2348137011758" className="text-white hover:text-[#C9A45C] transition-colors">
                      +234 813 701 1758
                    </a>
                  </div>
                </div>

                <div className="flex items-center gap-4">
                  <div className="p-3 rounded-lg bg-[#C9A45C]/10 text-[#C9A45C]">
                    <MessageCircle size={20} />
                  </div>
                  <div>
                    <div className="text-xs text-[#B8B2AA] font-mono uppercase tracking-wider mb-1">WhatsApp</div>
                    <a 
                      href="https://wa.me/2348137011758" 
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-white hover:text-[#C9A45C] transition-colors"
                    >
                      +234 813 701 1758
                    </a>
                  </div>
                </div>

                <div className="flex items-center gap-4">
                  <div className="p-3 rounded-lg bg-[#C9A45C]/10 text-[#C9A45C]">
                    <Mail size={20} />
                  </div>
                  <div>
                    <div className="text-xs text-[#B8B2AA] font-mono uppercase tracking-wider mb-1">Email</div>
                    <a href="mailto:daniel@danwebdevelopment.com" className="text-white hover:text-[#C9A45C] transition-colors">
                      daniel@danwebdevelopment.com
                    </a>
                  </div>
                </div>

                <div className="flex items-center gap-4">
                  <div className="p-3 rounded-lg bg-[#C9A45C]/10 text-[#C9A45C]">
                    <Globe size={20} />
                  </div>
                  <div>
                    <div className="text-xs text-[#B8B2AA] font-mono uppercase tracking-wider mb-1">Location</div>
                    <span className="text-white">Nigeria • Vietnam • Global</span>
                  </div>
                </div>
              </div>
            </div>

            <div className="contact-form">
              <form className="p-8 lg:p-10 rounded-2xl bg-[#14161B]/80 border border-[#C9A45C]/40 shadow-form">
                <div className="space-y-6">
                  <div>
                    <label className="block text-xs font-mono uppercase tracking-wider text-[#B8B2AA] mb-2">
                      Full Name
                    </label>
                    <input 
                      type="text" 
                      placeholder="Your name"
                      className="form-input"
                    />
                  </div>

                  <div>
                    <label className="block text-xs font-mono uppercase tracking-wider text-[#B8B2AA] mb-2">
                      Email Address
                    </label>
                    <input 
                      type="email" 
                      placeholder="you@company.com"
                      className="form-input"
                    />
                  </div>

                  <div>
                    <label className="block text-xs font-mono uppercase tracking-wider text-[#B8B2AA] mb-2">
                      Company (Optional)
                    </label>
                    <input 
                      type="text" 
                      placeholder="Your company name"
                      className="form-input"
                    />
                  </div>

                  <div>
                    <label className="block text-xs font-mono uppercase tracking-wider text-[#B8B2AA] mb-2">
                      Project Budget
                    </label>
                    <select className="form-input">
                      <option value="">Select budget range</option>
                      <option value="500-1k">$500 - $1,000</option>
                      <option value="1k-5k">$1,000 - $5,000</option>
                      <option value="5k-10k">$5,000 - $10,000</option>
                      <option value="10k-25k">$10,000 - $25,000</option>
                      <option value="25k-50k">$25,000 - $50,000</option>
                      <option value="50k+">$50,000+</option>
                    </select>
                  </div>

                  <div>
                    <label className="block text-xs font-mono uppercase tracking-wider text-[#B8B2AA] mb-2">
                      Project Details
                    </label>
                    <textarea 
                      rows={4}
                      placeholder="Tell us about your project..."
                      className="form-input resize-none"
                    />
                  </div>

                  <button type="submit" className="btn-primary w-full flex items-center justify-center gap-2">
                    <Sparkles size={18} />
                    Send Request
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="relative py-12 bg-[#14161B] border-t border-[#C9A45C]/20">
        <div className="px-8 lg:px-[7vw]">
          <div className="flex flex-col lg:flex-row justify-between items-center gap-8">
            <div className="text-center lg:text-left">
              <a 
                href="#" 
                onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}
                className="font-serif text-2xl text-[#C9A45C] tracking-wide"
              >
                Dan Web Development
              </a>
              <p className="body-text mt-2 text-sm text-[#D0D0D0]">
                Architecting Digital Legacies Worldwide
              </p>
            </div>

            <div className="flex flex-wrap justify-center gap-6 text-sm text-[#B8B2AA]">
              <a href="tel:+2348137011758" className="hover:text-[#C9A45C] transition-colors flex items-center gap-2">
                <Phone size={14} />
                +234 813 701 1758
              </a>
              <a 
                href="https://wa.me/2348137011758" 
                target="_blank"
                rel="noopener noreferrer"
                className="hover:text-[#C9A45C] transition-colors flex items-center gap-2"
              >
                <MessageCircle size={14} />
                WhatsApp
              </a>
              <a href="mailto:daniel@danwebdevelopment.com" className="hover:text-[#C9A45C] transition-colors flex items-center gap-2">
                <Mail size={14} />
                daniel@danwebdevelopment.com
              </a>
            </div>

            <div className="flex items-center gap-2 text-[#B8B2AA] text-xs font-mono tracking-wider">
              <CheckCircle2 size={14} className="text-[#C9A45C]" />
              <span>© 2026 Dan Web Development. All rights reserved.</span>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}

export default App;
