import React from 'react';
import { motion } from 'framer-motion';
import { Terminal, Cpu, Network, Shield, ChevronRight, Quote, Code, Database, Zap } from 'lucide-react';

const FadeIn = ({ children, delay = 0, direction = 'up' }) => {
  const directions = {
    up: { y: 40, opacity: 0 },
    down: { y: -40, opacity: 0 },
    left: { x: 40, opacity: 0 },
    right: { x: -40, opacity: 0 },
  };

  return (
    <motion.div
      initial={directions[direction]}
      whileInView={{ y: 0, x: 0, opacity: 1 }}
      viewport={{ once: true, margin: "-100px" }}
      transition={{ duration: 0.7, delay, ease: "easeOut" }}
    >
      {children}
    </motion.div>
  );
};

export default function BitBridgeWebsite() {
  const team = [
    {
      name: "Karl Whitehurst",
      role: "CEO & Founder",
      bio: "Visionary leader bridging the gap between raw technological potential and high-impact B2B business strategies. With 15+ years in the trenches, Karl drives our mission forward.",
      image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&q=80"
    },
    {
      name: "Elena Rostova",
      role: "Lead Architect",
      bio: "The mastermind behind our scalable infrastructures. Elena designs resilient, future-proof systems that never sleep, ensuring peak performance for our enterprise clients.",
      image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&q=80"
    },
    {
      name: "Marcus Thorne",
      role: "Head of Engineering",
      bio: "A full-stack veteran obsessed with clean architecture, microsecond performance, and deploying cutting-edge software solutions.",
      image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&q=80"
    },
    {
      name: "Sarah Jenkins",
      role: "Principal IT Consultant",
      bio: "Strategic thinker who excels at dissecting complex enterprise bottlenecks and transforming them into streamlined digital workflows.",
      image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&h=400&fit=crop&q=80"
    },
    {
      name: "David Chen",
      role: "Cybersecurity Lead",
      bio: "Former ethical hacker turned enterprise defender. David ensures every line of code and server node at BitBridge is fortified against modern threats.",
      image: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=400&h=400&fit=crop&q=80"
    }
  ];

  const testimonials = [
    {
      quote: "BitBridge completely overhauled our legacy architecture. Their insight into scalable B2B systems saved us countless hours and millions in operational costs.",
      author: "James T.",
      company: "CEO, Nexus Logistics"
    },
    {
      quote: "Working with Karl and the engineering team felt less like a vendor relationship and more like an extension of our own CTO office. Pure technical brilliance.",
      author: "Aisha R.",
      company: "Director of Tech, FinServe UK"
    },
    {
      quote: "In an industry full of buzzwords, BitBridge delivers actual, measurable results. Their software solutions are robust, secure, and incredibly fast.",
      author: "Michael O.",
      company: "Operations Head, OmniCorp"
    }
  ];

  return (
    <div className="min-h-screen bg-gray-950 text-gray-300 font-sans selection:bg-cyan-500 selection:text-white overflow-hidden">
      
      {/* Background Ambient Glows */}
      <div className="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-cyan-900/20 blur-[120px] rounded-full mix-blend-screen"></div>
        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-purple-900/20 blur-[120px] rounded-full mix-blend-screen"></div>
      </div>

      {/* Navigation */}
      <nav className="fixed w-full z-50 border-b border-white/5 bg-gray-950/80 backdrop-blur-md">
        <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Terminal className="w-8 h-8 text-cyan-400" />
            <span className="text-2xl font-bold tracking-tighter text-white">
              BIT<span className="text-cyan-400">BRIDGE</span>
            </span>
          </div>
          <div className="hidden md:flex gap-8 text-sm font-mono tracking-wider">
            <a href="#services" className="hover:text-cyan-400 transition-colors">// SERVICES</a>
            <a href="#insights" className="hover:text-cyan-400 transition-colors">// INSIGHTS</a>
            <a href="#team" className="hover:text-cyan-400 transition-colors">// TEAM</a>
          </div>
          <button className="px-6 py-2 bg-white/5 hover:bg-cyan-500 hover:text-white border border-white/10 hover:border-cyan-500 transition-all duration-300 font-mono text-sm">
            INITIATE_CONTACT
          </button>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="relative pt-40 pb-32 px-6 min-h-screen flex items-center">
        <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
          <div className="space-y-8">
            <FadeIn>
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-xs font-mono text-cyan-400 mb-4">
                <span className="w-2 h-2 rounded-full bg-cyan-400 animate-pulse"></span>
                UK-BASED B2B TECHNOLOGY PARTNER
              </div>
              <h1 className="text-5xl md:text-7xl font-bold text-white tracking-tight leading-[1.1]">
                Architecting the <br />
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500">
                  Digital Frontier.
                </span>
              </h1>
            </FadeIn>
            <FadeIn delay={0.2}>
              <p className="text-lg md:text-xl text-gray-400 max-w-xl leading-relaxed">
                We are a premier IT consultancy and software provider engineering high-performance, scalable solutions for modern B2B enterprises. We don't just write code; we build the bridge to your operational future.
              </p>
            </FadeIn>
            <FadeIn delay={0.4}>
              <div className="flex flex-wrap gap-4 pt-4">
                <button className="flex items-center gap-2 px-8 py-4 bg-cyan-500 text-gray-950 font-bold hover:bg-cyan-400 transition-colors">
                  EXPLORE SOLUTIONS <ChevronRight className="w-5 h-5" />
                </button>
                <button className="flex items-center gap-2 px-8 py-4 bg-transparent border border-white/20 text-white hover:bg-white/5 transition-colors">
                  VIEW ARCHITECTURE
                </button>
              </div>
            </FadeIn>
          </div>
          
          <FadeIn delay={0.3} direction="left">
            <div className="relative aspect-square max-w-md mx-auto">
              <div className="absolute inset-0 bg-gradient-to-tr from-cyan-500/20 to-purple-500/20 rounded-full blur-3xl"></div>
              <div className="relative h-full w-full border border-white/10 bg-gray-900/50 backdrop-blur-sm rounded-2xl p-8 flex flex-col justify-between overflow-hidden">
                <div className="absolute top-0 right-0 w-32 h-32 bg-cyan-500/10 blur-2xl"></div>
                <Code className="w-12 h-12 text-cyan-400 mb-8" />
                <div className="space-y-4 font-mono text-sm text-gray-400">
                  <p className="text-purple-400">const system = new BitBridge();</p>
                  <p>system.initialize(&#123;</p>
                  <p className="pl-4">mode: 'enterprise',</p>
                  <p className="pl-4">security: 'maximum',</p>
                  <p className="pl-4">scalability: true</p>
                  <p>&#125;);</p>
                  <p className="text-cyan-400 mt-4">&gt; System architecture optimized.</p>
                  <p className="text-cyan-400">&gt; Ready for deployment.</p>
                </div>
              </div>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* Services / Insights Section */}
      <section id="services" className="py-32 px-6 bg-black/50 border-y border-white/5">
        <div className="max-w-7xl mx-auto">
          <FadeIn>
            <h2 className="text-3xl md:text-5xl font-bold text-white mb-4">Core Capabilities</h2>
            <p className="text-gray-400 max-w-2xl mb-16 text-lg">
              Insight-driven IT consultancy meets rigorous software engineering. We solve complex B2B challenges through elegant, robust technology.
            </p>
          </FadeIn>

          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                icon: <Network className="w-8 h-8 text-cyan-400" />,
                title: "Strategic IT Consultancy",
                desc: "We analyze your enterprise architecture to identify bottlenecks, mitigate risks, and design a technology roadmap aligned with your business objectives."
              },
              {
                icon: <Database className="w-8 h-8 text-purple-400" />,
                title: "Custom Software Engineering",
                desc: "From bespoke internal tools to massive B2B SaaS platforms, we write clean, maintainable code that scales seamlessly with your user base."
              },
              {
                icon: <Shield className="w-8 h-8 text-emerald-400" />,
                title: "Infrastructure & Security",
                desc: "Zero-trust architectures and resilient cloud deployments. We ensure your data remains secure and your systems stay online, 24/7."
              }
            ].map((service, i) => (
              <FadeIn key={i} delay={i * 0.2}>
                <div className="group p-8 border border-white/10 bg-gray-900/30 hover:bg-gray-900/80 transition-all duration-500 h-full">
                  <div className="mb-6 p-4 bg-white/5 inline-block rounded-lg group-hover:scale-110 transition-transform duration-500">
                    {service.icon}
                  </div>
                  <h3 className="text-xl font-bold text-white mb-4">{service.title}</h3>
                  <p className="text-gray-400 leading-relaxed">{service.desc}</p>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section id="insights" className="py-32 px-6 relative">
        <div className="max-w-7xl mx-auto">
          <FadeIn>
            <div className="flex items-center gap-4 mb-16">
              <Zap className="w-8 h-8 text-cyan-400" />
              <h2 className="text-3xl md:text-5xl font-bold text-white">Client Intelligence</h2>
            </div>
          </FadeIn>

          <div className="grid md:grid-cols-3 gap-8">
            {testimonials.map((test, i) => (
              <FadeIn key={i} delay={i * 0.2}>
                <div className="p-8 border border-white/10 bg-gradient-to-b from-gray-900/50 to-transparent relative">
                  <Quote className="absolute top-6 right-6 w-12 h-12 text-white/5" />
                  <p className="text-gray-300 text-lg mb-8 relative z-10">"{test.quote}"</p>
                  <div>
                    <p className="text-white font-bold">{test.author}</p>
                    <p className="text-cyan-400 font-mono text-sm">{test.company}</p>
                  </div>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* Team Section */}
      <section id="team" className="py-32 px-6 bg-black/50 border-t border-white/5">
        <div className="max-w-7xl mx-auto">
          <FadeIn>
            <h2 className="text-3xl md:text-5xl font-bold text-white mb-4">The Architects</h2>
            <p className="text-gray-400 max-w-2xl mb-16 text-lg">
              A specialized unit of engineers, consultants, and strategists dedicated to pushing the boundaries of enterprise technology.
            </p>
          </FadeIn>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {team.map((member, i) => (
              <FadeIn key={i} delay={i * 0.1}>
                <div className="group relative overflow-hidden border border-white/10 bg-gray-900/50">
                  <div className="aspect-square overflow-hidden">
                    <img 
                      src={member.image} 
                      alt={member.name}
                      className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 scale-100 group-hover:scale-105"
                    />
                  </div>
                  <div className="p-6 relative bg-gray-950/90 backdrop-blur-sm border-t border-white/10">
                    <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-cyan-500 to-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-500"></div>
                    <h3 className="text-xl font-bold text-white">{member.name}</h3>
                    <p className="text-cyan-400 font-mono text-sm mb-4">{member.role}</p>
                    <p className="text-gray-400 text-sm leading-relaxed">{member.bio}</p>
                  </div>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 px-6 border-t border-white/10 bg-gray-950">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="flex items-center gap-2 text-white/50">
            <Terminal className="w-6 h-6" />
            <span className="font-bold tracking-tighter">BITBRIDGE LTD</span>
          </div>
          <div className="text-sm font-mono text-gray-500">
            &copy; {new Date().getFullYear()} BITBRIDGE LTD. ALL SYSTEMS OPERATIONAL.
          </div>
          <div className="flex gap-6 text-sm text-gray-500">
            <a href="#" className="hover:text-cyan-400 transition-colors">PRIVACY_POLICY</a>
            <a href="#" className="hover:text-cyan-400 transition-colors">TERMS_OF_SERVICE</a>
          </div>
        </div>
      </footer>
    </div>
  );
}