"use client";

import { useState, type CSSProperties } from "react";
import {
  BadgeDollarSign,
  CalendarClock,
  ClipboardCheck,
  Eye,
  GraduationCap,
  HandHeart,
  HeartPulse,
  ShieldCheck,
  Smile,
  Stethoscope,
} from "lucide-react";

const benefitGroups = [
  {
    eyebrow: "Health Coverage",
    title: "Healthcare",
    image: "/images/comprehensive.jpg",
    benefits: [
      {
        title: "Comprehensive Medical Plans",
        copy:
          "We offer comprehensive medical coverage for eligible team members and their families, providing peace of mind and support when it matters most. We believe in taking care of our family. ",
        icon: HeartPulse,
      },
      {
        title: "Vision Plan",
        copy:
          "From annual eye exams to prescription eyewear, our vision plan helps eligible team members care for their eyesight and see their best every day.",
        icon: Eye,
      },
      {
        title: "Dental Plan",
        copy:
          "Our dental coverage helps eligible team members maintain healthy smiles with access to preventive care, routine cleanings, and a range of dental services.",
        icon: Smile,
      },
    ],
  },
  {
    eyebrow: "Financial Future",
    title: "Planning",
    image: "/images/planning.jpg",
    benefits: [
      {
        title: "Competitive Compensation",
        copy:
          "Singh values all of our outstanding team members. We show it with our competitive wages in salaries for every role on our excellent team.",
        icon: BadgeDollarSign,
      },
      {
        title: "Retirement Savings Plan (401k)",
        copy:
          "We help you plan for your retirement with our 401k and money management programs for eligible employees.",
        icon: ShieldCheck,
      },
      {
        title: "Training and Development",
        copy:
          "At Singh, we pride ourselves in the opportunities we offer all associates to advance their careers exactly as they choose. With mentorship programs, training opportunities, and flexible career-pathing, your journey with Singh will match your goals.",
        icon: GraduationCap,
      },
    ],
  },
  {
    eyebrow: "Beyond the Basics",
    title: "Life & Wellbeing",
    image: "/images/Living.jpeg",
    benefits: [
      {
        title: "Life Insurance",
        copy:
          "Your family becomes part of the Singh family when you join our team. Our life insurance program ensures that they are always taken care of.",
        icon: HandHeart,
      },
      {
        title: "Paid Time Off",
        copy:
          "Whether you're planning a vacation, celebrating a milestone, or simply taking time to unwind, our paid time off benefit helps eligible team members maintain balance both inside and outside of work. ",
        icon: CalendarClock,
      },
      {
        title: "Short-Term Disability",
        copy:
          "We offer short-term disability coverage to help eligible team members focus on their recovery with added financial peace of mind while recovering from a qualifying illness or injury.",
        icon: Stethoscope,
      },
      {
        title: "Employee Assistance Program",
        copy:
          "From mental wellness and family concerns to financial and legal guidance, our Employee Assistance Program provides eligible team members and their families with confidential support and resources to help navigate life's challenges with confidence.",
        icon: ClipboardCheck,
      },
      {
        title: "Employee Perks",
        copy:
          "In addition to our core benefits, eligible team members enjoy a range of valuable perks, including identity theft protection, discounted pet insurance, gym savings, exclusive discounts through AT&T and HPS programs, and a rental discount when living at a Singh property.",
        icon: ClipboardCheck,
      },
    ],
  },
];

export default function BenefitsTabs() {
  const [activeIndex, setActiveIndex] = useState(0);
  const active = benefitGroups[activeIndex];

  return (
    <section id="benefits" className="bg-white px-6 py-10 lg:py-16">
      <div className="mx-auto max-w-7xl">
        {/* Tab switcher */}
        <div className="mb-12 flex flex-wrap justify-center gap-2 sm:gap-3">
          {benefitGroups.map((group, index) => {
            const isActive = index === activeIndex;
            return (
              <button
                key={group.title}
                type="button"
                onClick={() => setActiveIndex(index)}
                className={`rounded-full px-5 py-2.5 text-xs cursor-pointer font-semibold uppercase tracking-[0.14em] transition-all duration-300 sm:px-7 sm:py-3 sm:text-sm ${
                  isActive
                    ? "bg-[#1D1D1D] text-[#F8F8F6] shadow-md"
                    : "bg-[#F8F8F6] text-[#5F5F5F] hover:bg-[#EDE8DE] hover:text-[#1D1D1D]"
                }`}
              >
                {group.title}
              </button>
            );
          })}
        </div>

        {/* Active panel */}
        <div className="grid gap-10 overflow-hidden rounded-3xl bg-[#F8F8F6] lg:grid-cols-[0.85fr_1.15fr] lg:gap-0">
          <div className="relative h-72 sm:h-96 lg:h-auto lg:min-h-135">
            <img
              key={active.image}
              src={active.image}
              alt={`${active.title} at Singh`}
              className="animate-soft-fade-in h-full w-full object-cover"
            />
            <div
              className="absolute inset-0 bg-linear-to-t from-[#1D1D1D]/80 via-[#1D1D1D]/10 to-transparent"
              aria-hidden="true"
            />
            <div className="absolute bottom-8 left-8 right-8">
              <p className="text-[11px] font-semibold uppercase tracking-[0.3em] text-[#C9B88A]">
                {active.eyebrow}
              </p>
              <h2 className="mt-2 text-3xl font-light leading-tight text-white md:text-4xl">
                {active.title}
              </h2>
            </div>
          </div>

          <div className="p-8 sm:p-12 lg:p-14">
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
              {active.benefits.map((benefit, index) => {
                const Icon = benefit.icon;
                return (
                  <div
                    key={benefit.title}
                    className="stagger-item flex gap-4 rounded-xl p-4 transition-colors duration-200 hover:bg-white"
                    style={{ "--stagger-delay": `${index * 70}ms` } as CSSProperties}
                  >
                    <div className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[#1D1D1D] text-[#B5A169]">
                      <Icon size={18} aria-hidden />
                    </div>
                    <div>
                      <h3 className="text-sm font-semibold uppercase tracking-[0.12em] leading-snug text-[#1D1D1D]">
                        {benefit.title}
                      </h3>
                      <p className="mt-1.5 text-sm font-light leading-6 text-[#5F5F5F]">
                        {benefit.copy}
                      </p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}