import React, { useState } from "react";
import {
  Users,
  Gamepad2,
  Trophy,
  Twitch,
  Youtube,
  ChevronRight,
  Heart,
  ExternalLink,
} from "lucide-react";
import { Helmet } from "react-helmet";

const partners = {
  streamers: [
    {
      name: "26BZ",
      logo: "https://cdn.discordapp.com/avatars/999168396904120412/585a62c39845040211f411d14acbbf17",
      description: "Creator",
      type: "Creator",
      benefits: ["Website Maintainence"],
      website: "https://26bz.online/",
    },
  ],
  competitiveTeams: [],
  communityGroups: [],
};

const PartnerCard = ({ partner }) => {
  return (
    <div className="bg-slate-950 rounded-md border border-gray-900 transition-all duration-200 p-5">
      {/* Logo and Type */}
      <div className="flex items-start justify-between mb-6">
        <img
          src={partner.logo}
          alt={`${partner.name} logo`}
          className="h-14 w-auto object-contain"
        />
        <span className="text-sm text-blue-500 bg-slate-900 px-3 py-1 rounded-md">
          {partner.type}
        </span>
      </div>

      {/* Content */}
      <div className="space-y-4">
        <h3 className="text-xl font-semibold text-white">{partner.name}</h3>
        <p className="text-gray-400">{partner.description}</p>

        {/* Benefits */}
        <ul className="space-y-2">
          {partner.benefits.map((benefit, index) => (
            <li key={index} className="flex items-center text-gray-300">
              <ChevronRight className="w-4 h-4 text-blue-500 mr-2" />
              {benefit}
            </li>
          ))}
        </ul>

        {/* Website Link */}
        <a
          href={partner.website}
          target="_blank"
          rel="noopener noreferrer"
          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"
        >
          Visit Website
          <ExternalLink className="w-4 h-4" />
        </a>
      </div>
    </div>
  );
};

const PartnerStats = () => {
  const stats = [
    { icon: Users, value: "500K+", label: "Community Members" },
    { icon: Gamepad2, value: "200+", label: "Gaming Communities" },
    { icon: Trophy, value: "50+", label: "Tournaments Hosted" },
    { icon: Heart, value: "10K+", label: "Charity Raised" },
  ];

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-8">
      {stats.map((stat, index) => {
        const Icon = stat.icon;
        return (
          <div key={index} className="bg-slate-900 p-5 rounded-md">
            <div className="flex flex-col items-center text-center">
              <div className="bg-gray-900 p-3 rounded-md mb-4">
                <Icon className="w-6 h-6 text-blue-500" />
              </div>
              <div className="text-2xl font-bold text-white">{stat.value}</div>
              <div className="text-gray-400 text-sm">{stat.label}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export const PartnersPage = () => {
  const [activeTab, setActiveTab] = useState("all");

  const tabs = [
    { id: "all", label: "All Partners" },
    { id: "streamers", label: "Streamers" },
    { id: "competitiveTeams", label: "Competitive Teams" },
    { id: "communityGroups", label: "Community Groups" },
  ];

  const filteredPartners =
    activeTab === "all"
      ? [
          ...partners.streamers,
          ...partners.competitiveTeams,
          ...partners.communityGroups,
        ]
      : partners[activeTab];

  return (
    <div className="min-h-screen bg-slate-900">
      <Helmet>
        <title>Partners | GameZone</title>
      </Helmet>
      {/* Hero */}
      <section className="py-12 md:py-24">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="text-center max-w-3xl mx-auto mb-6">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
              Our Community <span className="text-blue-500">Partners</span>
            </h1>
            <p className="text-xl text-gray-300">
              We believe in the power of gaming communities. Our partnerships
              support content creators, competitive teams, and inclusive gaming
              initiatives that bring players together.
            </p>
          </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">
          <PartnerStats />
        </div>
      </section>

      <section className="py-12 md:py-24 bg-slate-900">
        <div className="container mx-auto px-4 max-w-screen-xl">
          {/* Tabs */}
          <div className="flex justify-center mb-12">
            <div className="flex flex-wrap justify-center gap-2 bg-slate-950 p-2 rounded-lg border border-gray-900 w-full max-w-3xl">
              {tabs.map((tab) => (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`
              px-6 py-2.5 rounded-md font-medium transition-all duration-200 whitespace-nowrap text-sm md:text-base
              ${
                activeTab === tab.id
                  ? "bg-blue-600 text-white"
                  : "text-gray-400 hover:text-white hover:bg-slate-900"
              }
            `}
                >
                  {tab.label}
                </button>
              ))}
            </div>
          </div>

          {/* Partners Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-8">
            {filteredPartners.map((partner, index) => (
              <PartnerCard key={index} partner={partner} />
            ))}
          </div>
        </div>
      </section>
      {/* CTA Section */}
      <section className="py-12 md:py-24 bg-slate-950">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="bg-slate-900 rounded-md border border-gray-900 transition-all duration-200 p-8">
            <div className="max-w-2xl mx-auto text-center">
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
                Want to Become a Partner?
              </h2>
              <p className="text-xl text-gray-300 mb-8">
                Are you a content creator, team, or community leader passionate
                about gaming? We'd love to hear from you and explore partnership
                opportunities.
              </p>
              <a
                href="/contact"
                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"
              >
                Connect With Us
                <ChevronRight className="w-5 h-5" />
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default PartnersPage;
