import React from "react";
import {
  Users,
  Heart,
  Zap,
  Globe,
  Shield,
  Cpu,
  Cloud,
  Rocket,
  Code,
} from "lucide-react";
import { Helmet } from "react-helmet";

const team = [
  {
    name: "26BZ",
    role: "CEO",
    image:
      "https://cdn.discordapp.com/avatars/999168396904120412/585a62c39845040211f411d14acbbf17",
    bio: "10+ years in game server infrastructure",
    links: {
      twitter: "https://twitter.com/example",
    },
  },
];

const milestones = [
  {
    year: "2024",
    title: "Company Founded",
    description: "Started with a vision to revolutionize game hosting",
  },
  {
    year: "2024",
    title: "First Data Center",
    description: "Launched our first data center in Los Angeles",
  },
];

const roadmap = [
  {
    quarter: "Q2 2025",
    title: "Next-Gen Infrastructure",
    description: "Rolling out AMD Ryzen 9 processors across all locations",
    icon: Cpu,
  },
  {
    quarter: "Q3 2025",
    title: "AI-Powered Management",
    description: "Introducing AI-driven scaling",
    icon: Code,
  },
  {
    quarter: "Q4 2025",
    title: "Global Edge Network",
    description: "Launching edge locations for reduced latency",
    icon: Globe,
  },
  {
    quarter: "Q1 2026",
    title: "Enterprise Platform",
    description: "New platform for Game Panel",
    icon: Cloud,
  },
];

const values = [
  {
    icon: Heart,
    title: "Customer First",
    description: "Every decision we make starts with our customers' needs",
  },
  {
    icon: Zap,
    title: "Performance Obsessed",
    description: "Constantly pushing the boundaries of server performance",
  },
  {
    icon: Shield,
    title: "Security Focused",
    description: "Enterprise-grade security at every level",
  },
  {
    icon: Users,
    title: "Community Driven",
    description: "Building and supporting gaming communities worldwide",
  },
];

const AboutPage = () => {
  return (
    <div className="min-h-screen bg-gray-900">
      <Helmet>
        <title>About Us | GameZone</title>
      </Helmet>
      {/* Hero */}
      <section className="py-12 md:py-24">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="max-w-3xl">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
              Building the Future of
              <br />
              <span className="text-blue-500">Game Hosting</span>
            </h1>
            <p className="text-xl text-gray-300 mb-8">
              Since 2020, GameZone has been revolutionizing game hosting with
              cutting-edge infrastructure and unparalleled support. We're on a
              mission to make game hosting accessible, powerful, and reliable
              for everyone.
            </p>
            <div className="flex flex-wrap gap-4">
              <a
                href="/careers"
                className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200"
              >
                <Rocket className="w-5 h-5" />
                Join Our Team
              </a>
              <a
                href="/contact"
                className="inline-flex items-center gap-2 bg-slate-950 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 border border-gray-900"
              >
                Contact Us
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-12 md:py-24 bg-slate-950">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-8">
            {[
              { value: "50K+", label: "Active Servers" },
              { value: "15+", label: "Global Locations" },
              { value: "99.99%", label: "Uptime" },
              { value: "24/7", label: "Support" },
            ].map((stat, index) => (
              <div
                key={index}
                className="bg-gray-900 p-5 rounded-md text-center"
              >
                <div className="text-3xl font-bold text-white mb-2">
                  {stat.value}
                </div>
                <div className="text-gray-400">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Values Section */}
      <section className="py-12 md:py-24 bg-gray-900">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="text-center max-w-2xl mx-auto mb-6">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              Our Values
            </h2>
            <p className="text-xl text-gray-300">
              The core principles that drive everything we do
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-8">
            {values.map((value, index) => (
              <div key={index} className="bg-slate-950 p-5 rounded-md">
                <value.icon className="w-12 h-12 text-blue-500 mb-4" />
                <h3 className="text-xl font-semibold text-white mb-2">
                  {value.title}
                </h3>
                <p className="text-gray-400">{value.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team Section */}
      <section className="py-12 md:py-24 bg-slate-950">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="text-center max-w-2xl mx-auto mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              Meet Our Team
            </h2>
            <p className="text-xl text-gray-300">
              The passionate people behind GameZone
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-8">
            {team.map((member, index) => (
              <div
                key={index}
                className="bg-gray-900 rounded-md overflow-hidden border border-gray-900"
              >
                <img
                  src={member.image}
                  alt={member.name}
                  className="w-full aspect-square object-cover"
                />
                <div className="p-5">
                  <h3 className="text-xl font-semibold text-white mb-1">
                    {member.name}
                  </h3>
                  <div className="text-blue-500 mb-2">{member.role}</div>
                  <p className="text-gray-400 text-sm mb-4">{member.bio}</p>
                  <div className="flex gap-4">
                    {Object.entries(member.links).map(([platform, url]) => (
                      <a
                        key={platform}
                        href={url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-gray-400 hover:text-blue-500 transition-colors duration-200"
                      >
                        {platform}
                      </a>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Milestones Section */}
      <section className="py-12 md:py-24 bg-gray-900">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="text-center max-w-2xl mx-auto mb-6">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              Our Journey
            </h2>
            <p className="text-xl text-gray-300">
              Key milestones in our mission to revolutionize game hosting
            </p>
          </div>
          <div className="max-w-4xl mx-auto">
            {milestones.map((milestone, index) => (
              <div key={index} className="relative pl-8 pb-12 last:pb-0">
                <div className="absolute left-0 top-0 w-px h-full bg-gray-800"></div>
                <div className="absolute left-[-4px] top-0 w-2 h-2 rounded-full bg-blue-500"></div>
                <div className="text-blue-500 mb-2">{milestone.year}</div>
                <h3 className="text-xl font-semibold text-white mb-2">
                  {milestone.title}
                </h3>
                <p className="text-gray-400">{milestone.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Roadmap Section */}
      <section className="py-12 md:py-24 bg-slate-950">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="text-center max-w-2xl mx-auto mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              Product Roadmap
            </h2>
            <p className="text-xl text-gray-300">
              Our vision for the future of GameZone
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-8">
            {roadmap.map((item, index) => (
              <div key={index} className="bg-gray-900 p-5 rounded-md">
                <div className="bg-slate-950 p-3 rounded-md w-fit mb-4">
                  <item.icon className="w-6 h-6 text-blue-500" />
                </div>
                <div className="text-blue-500 mb-2">{item.quarter}</div>
                <h3 className="text-xl font-semibold text-white mb-2">
                  {item.title}
                </h3>
                <p className="text-gray-400">{item.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-12 md:py-24 bg-gray-900">
        <div className="container mx-auto px-4 max-w-screen-xl text-center">
          <div className="max-w-2xl mx-auto">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              Join Our Journey
            </h2>
            <p className="text-xl text-gray-300 mb-8">
              We're always looking for talented people to join our team and help
              shape the future of game hosting
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <a
                href="/careers"
                className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200"
              >
                <Users className="w-5 h-5" />
                View Open Positions
              </a>
              <a
                href="/culture"
                className="inline-flex items-center gap-2 bg-slate-950 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 border border-gray-900"
              >
                Learn About Our Culture
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default AboutPage;
