"use client";

import { useState } from "react";
import {
  ArrowRight,
  Award,
  CircleCheck,
  Lock,
  MessageCircle,
  Shield,
  TrendingUp,
  Trophy,
  Users,
} from "lucide-react";

import { enrollmentData } from "@/data/courses/certificates/advanced-fluency/enrollmentData";

const tierIcons = {
  users: Users,
  trending: TrendingUp,
  trophy: Trophy,
};

const trustIcons = [Shield, Lock, MessageCircle];

export default function EnrollmentSection({ data = enrollmentData }) {
  const [tab, setTab] = useState(data.tabs[0]?.id ?? "individual");
  const individualSecondaryButton = data.individual?.secondaryButton;
  const individualTrust = Array.isArray(data.individual?.trust)
    ? data.individual.trust
    : [];

  return (
    <section
      id="enrollment"
      className="py-10 md:py-14 bg-gradient-to-br from-[#F6EFE9] to-white border-t border-[#E6D3B1]/30"
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-7">
          <h2 className="text-2xl md:text-3xl font-black text-[#4A141E] mb-2">
            {data.title}
          </h2>
          <p className="text-base md:text-lg text-[#4A141E]/70">{data.subtitle}</p>
        </div>

        <div className="flex justify-center mb-6">
          <div className="inline-flex p-1 rounded-2xl bg-white border-2 border-[#E6D3B1]/40">
            {data.tabs.map((item) => {
              const active = tab === item.id;

              return (
                <button
                  key={item.id}
                  type="button"
                  onClick={() => setTab(item.id)}
                  className={`px-5 py-2.5 rounded-xl font-bold text-sm md:text-base transition-all duration-300 ${
                    active
                      ? "bg-gradient-to-r from-[#4A141E] to-[#3B0F18] text-white shadow-lg"
                      : "text-[#4A141E]"
                  }`}
                >
                  {item.label}
                </button>
              );
            })}
          </div>
        </div>

        {(data.renderAllTabsInSsr || tab === "individual") && (
          <div
            className={`max-w-2xl mx-auto ${
              tab === "individual" ? "" : "hidden"
            }`}
          >
            <div className="relative p-6 md:p-8 rounded-3xl bg-gradient-to-br from-white via-[#F6EFE9]/30 to-white border-2 border-[#D4AF37]/60 shadow-2xl overflow-hidden">
              <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-[#D4AF37]/5 to-transparent rounded-full blur-3xl" />
              <div className="absolute bottom-0 left-0 w-48 h-48 bg-gradient-to-tr from-[#8B1C1C]/5 to-transparent rounded-full blur-2xl" />

              <div className="relative z-10">
                <div className="text-center mb-5">
                  <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-gradient-to-r from-[#8B1C1C]/10 to-[#D4AF37]/10 border-2 border-[#D4AF37]/40 mb-4 shadow-sm">
                    <Award className="w-4 h-4 text-[#8B1C1C]" />
                    <span className="text-sm font-black text-[#8B1C1C] uppercase tracking-wider">
                      {data.individual.badge}
                    </span>
                  </div>

                  <div className="flex items-baseline justify-center gap-2 mb-3">
                    {data.individual.priceParts ? (
                      <>
                        <span className="text-3xl md:text-4xl font-black bg-gradient-to-r from-[#8B1C1C] to-[#4A141E] bg-clip-text text-transparent">
                          {data.individual.priceParts.value}
                        </span>
                        <span className="text-lg text-[#4A141E]/50 font-bold">
                          {data.individual.priceParts.suffix}
                        </span>
                      </>
                    ) : (
                      <span className="text-3xl md:text-4xl font-black bg-gradient-to-r from-[#8B1C1C] to-[#4A141E] bg-clip-text text-transparent">
                        {data.individual.price}
                      </span>
                    )}
                  </div>

                  <p className="text-sm text-[#4A141E]/60 font-semibold">
                    {data.individual.note}
                  </p>
                </div>

                <div className="grid grid-cols-1 gap-2 mb-6">
                  {data.individual.features.map((feature) => (
                    <div
                      key={feature}
                      className="flex items-center gap-2.5 p-2 rounded-xl hover:bg-white/50 transition-colors"
                    >
                      <div className="w-6 h-6 rounded-full bg-gradient-to-br from-[#8B1C1C] to-[#6B1010] flex items-center justify-center flex-shrink-0">
                        <CircleCheck className="w-4 h-4 text-white" />
                      </div>
                      <span className="text-[#4A141E] font-medium">
                        {feature}
                      </span>
                    </div>
                  ))}
                </div>

                <a
                  href={data.individual.button.href}
                  className="group relative w-full py-4 px-6 rounded-xl font-black text-base bg-[#8B1C1C] text-white shadow-xl hover:shadow-[#D4AF37]/60 hover:scale-[1.02] transition-all duration-300 flex items-center justify-center gap-2 border-2 border-[#8B1C1C] hover:border-[#D4AF37] overflow-hidden"
                >
                  <div className="absolute inset-0 bg-gradient-to-r from-[#D4AF37]/0 via-[#D4AF37]/20 to-[#D4AF37]/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000" />
                  <span className="relative">{data.individual.button.label}</span>
                  <ArrowRight className="w-4 h-4 relative group-hover:translate-x-1 transition-transform" />
                </a>

                {individualSecondaryButton ? (
                  <div className="mt-4">
                    <a
                      href={individualSecondaryButton.href}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="inline-flex w-full items-center justify-center gap-2 rounded-2xl border-2 border-[#D4AF37] bg-[#D4AF37] px-6 py-4 text-base font-black text-[#4A141E] shadow-xl transition-all duration-300 hover:scale-[1.02] hover:bg-[#E6D3B1]"
                    >
                      <MessageCircle className="w-5 h-5" />
                      <span>{individualSecondaryButton.label}</span>
                    </a>
                  </div>
                ) : null}

                {individualTrust.length > 0 ? (
                  <div className="mt-4 p-4 rounded-xl bg-gradient-to-r from-[#F6EFE9] to-white border border-[#D4AF37]/20 shadow-sm">
                  <div className="flex flex-wrap items-center justify-center gap-3 sm:gap-4 text-sm text-[#4A141E]/70 font-medium">
                    {individualTrust.map((item, index) => {
                      const Icon = trustIcons[index] ?? Shield;

                      return (
                        <div key={item} className="contents">
                          {index > 0 && (
                            <div className="hidden sm:block h-4 w-px bg-[#D4AF37]/30" />
                          )}
                          <div className="flex items-center gap-2">
                            <Icon className="w-4 h-4 text-[#8B1C1C]" />
                            <span>{item}</span>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                  </div>
                ) : null}
              </div>
            </div>
          </div>
        )}

        {(data.renderAllTabsInSsr || tab === "team") && (
          <div
            className={`max-w-2xl mx-auto ${tab === "team" ? "" : "hidden"}`}
          >
            <div className="relative p-6 md:p-8 rounded-3xl bg-gradient-to-br from-white via-[#F6EFE9]/30 to-white border-2 border-[#D4AF37]/60 shadow-2xl overflow-hidden">
              <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-[#D4AF37]/5 to-transparent rounded-full blur-3xl" />
              <div className="absolute bottom-0 left-0 w-48 h-48 bg-gradient-to-tr from-[#8B1C1C]/5 to-transparent rounded-full blur-2xl" />

              <div className="relative z-10">
                <div className="text-center mb-5">
                  <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-gradient-to-r from-[#8B1C1C]/10 to-[#D4AF37]/10 border-2 border-[#D4AF37]/40 mb-4 shadow-sm">
                    <Award className="w-4 h-4 text-[#8B1C1C]" />
                    <span className="text-sm font-black text-[#8B1C1C] uppercase tracking-wider">
                      {data.team.badge}
                    </span>
                  </div>

                  <h3 className="text-xl md:text-2xl font-black text-[#4A141E] mb-3">
                    {data.team.title}
                  </h3>
                  <p className="text-sm md:text-base text-[#4A141E]/70 font-medium max-w-xl mx-auto">
                    {data.team.description}
                  </p>
                </div>

                <div className="grid sm:grid-cols-3 gap-3 md:gap-4 mb-6">
                  {data.team.tiers.map((tier) => {
                    const Icon = tierIcons[tier.icon] ?? Users;

                    return (
                      <div
                        key={tier.members}
                        className="p-3 md:p-4 rounded-2xl bg-white border-2 border-[#E6D3B1]/40"
                      >
                        <Icon className="w-7 h-7 md:w-8 md:h-8 text-[#8B1C1C] mx-auto mb-2" />
                        <div className="font-bold text-[#4A141E] mb-1 text-center">
                          {tier.members}
                        </div>
                        <div className="text-xl font-black text-[#8B1C1C] text-center">
                          {tier.discount}
                        </div>
                      </div>
                    );
                  })}
                </div>

                <div className="flex flex-wrap gap-3 justify-center">
                  {data.team.buttons.map((button) => {
                    const isWhatsApp = button.variant === "whatsapp";

                    return (
                      <a
                        key={button.label}
                        href={button.href}
                        target="_blank"
                        rel="noopener noreferrer"
                        className={
                          isWhatsApp
                            ? "px-6 py-3 rounded-xl font-bold text-base leading-tight whitespace-nowrap bg-gradient-to-r from-[#25D366] to-[#128C7E] text-white hover:from-[#128C7E] hover:to-[#25D366] transition-all duration-300 flex items-center gap-2 shadow-lg"
                            : "px-6 py-3 rounded-xl font-bold text-base leading-tight whitespace-nowrap bg-white text-[#4A141E] hover:bg-[#E6D3B1] border-2 border-[#E6D3B1]/40 hover:border-[#D4AF37] transition-all duration-300 flex items-center gap-2"
                        }
                      >
                        {isWhatsApp && <MessageCircle className="w-5 h-5" />}
                        <span className="whitespace-nowrap">{button.label}</span>
                        {!isWhatsApp && <ArrowRight className="w-5 h-5" />}
                      </a>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}