"use client"

import { useState } from "react"
import type { VitalMilestoneData } from "@/lib/strapi/types"

export default function VitalMilestone({ data }: { data: VitalMilestoneData }) {
  const [activeIndex, setActiveIndex] = useState(0)

  if (data.tabs.length === 0) return null
  const active = data.tabs[activeIndex]

  return (
    <section className="w-full max-w-[1296px] mx-auto px-4 md:px-6 py-8">
      <div className="relative">
        <div className="hidden lg:flex items-center justify-between">
          <div className="bg-[#ebebeb] rounded-[66px] px-6 py-3 flex gap-2 items-center">
            <img
              src={data.badgeIcon}
              alt=""
              className="w-[17px] h-[16px]"
            />
            <span className="font-heading text-black text-[16px] leading-none uppercase">
              {data.badge}
            </span>
          </div>
          <div className="flex gap-4 items-center">
            {data.tabs.map((tab, i) => (
              <button
                key={i}
                onClick={() => setActiveIndex(i)}
                className={`rounded-[44px] px-6 py-3 text-[16px] leading-[22px] tracking-[0.32px] uppercase border-2 transition-all duration-300 text-[#1c2023] ${activeIndex === i ? "border-[#d20010]" : "border-[#c8c8c8]"
                  }`}
              >
                {tab.tabName}
              </button>
            ))}
          </div>
        </div>

        <div className="flex flex-col gap-5 lg:hidden">
          <div className="bg-[#ebebeb] rounded-[66px] px-6 py-3 flex gap-2 items-center w-fit">
            <img
              src={data.badgeIcon}
              alt=""
              className="w-[17px] h-[16px]"
            />
            <span className="font-heading text-black text-[16px] leading-none uppercase">
              {data.badge}
            </span>
          </div>
          <div className="flex flex-col gap-4">
            <div className="flex flex-wrap gap-2 items-center">
              {data.tabs.map((tab, i) => (
                <button
                  key={i}
                  onClick={() => setActiveIndex(i)}
                  className={`rounded-[44px] px-6 py-3 text-[12px] leading-[22px] tracking-[0.24px] uppercase border-2 transition-all duration-300 text-[#1c2023] font-semibold ${activeIndex === i ? "border-[#d20010]" : "border-[#c8c8c8]"
                    }`}
                >
                  {tab.tabName}
                </button>
              ))}
            </div>
          </div>
        </div>

        <p
          className="font-heading font-bold relative mt-10 pointer-events-none select-none lg:hidden text-[rgba(16,36,67,0.13)] text-[55px] leading-[0.75] tracking-[-1.83px] w-full max-w-[353px] break-words"
          aria-hidden="true"
        >
          {data.watermarkText}
        </p>
        <p
          className="font-heading font-bold absolute top-[80px] left-0 pointer-events-none select-none hidden lg:block text-[rgba(16,36,67,0.13)] text-[140px] leading-[0.75] tracking-[-4px] w-[1178px]"
          style={{ zIndex: 0 }}
          aria-hidden="true"
        >
          {data.watermarkText}
        </p>

        <div className="relative hidden lg:block mt-[260px]">
          <div className="relative z-20 ">
            <div
              className="rounded-[16px] p-10 w-[40.6%] min-w-[420px]"
              style={{
                background:
                  "radial-gradient(at 42% 84%, rgba(244, 247, 251, 0) 0%, rgb(221 228 238) 100%)",
                backgroundColor: "#f4f7fb",
              }}
            >
              <div className="flex flex-col gap-4 relative">
                {active.bullets.map((bullet, i) => (
                  <div key={i} className="flex gap-6 items-center">
                    <img
                      src="/assets/vital-industries/vector-badge-red.svg"
                      alt=""
                      className="w-[17px] h-[16px] shrink-0"
                    />
                    <p className="text-[#4a5565] text-[16px] leading-[24px]">{bullet}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="absolute right-0 top-0 bottom-0 w-[57.4%] rounded-[16px] overflow-hidden z-10">
            <img
              src={active.image}
              alt={active.tabName}
              loading="lazy"
              className="w-full h-full object-cover"
            />
          </div>
        </div>

        <div className="relative mt-5 lg:hidden">
          <div className="w-full rounded-[15px] overflow-hidden mt-0 mb-5 relative z-20">
            <img
              src={active.image}
              alt={active.tabName}
              loading="lazy"
              className="w-full h-auto object-cover"
            />
          </div>

          <div
            className="relative rounded-[16px] overflow-hidden"
            style={{
              background:
                "radial-gradient(ellipse at 42% 84%, rgba(244,247,251,0) 0%, rgba(244,247,251,1) 100%), radial-gradient(ellipse at 42% 84%, rgba(255,232,233,0) 0%, rgba(255,232,233,1) 100%)",
            }}
          >
            <div
              className="absolute pointer-events-none"
              style={{ right: "-80px", top: "-82px" }}
              aria-hidden="true"
            >
              <img
                src="/assets/vital-industries/vector-decorative-light.svg"
                alt=""
                className="w-[343px] h-[311px] rotate-[25deg]"
              />
            </div>
            <div className="relative flex flex-col gap-6 max-w-[319px] mx-auto py-8 px-4">
              <p className="text-[#101828] text-[16px] leading-[24px] font-medium">
                {active.tabName}:
              </p>
              <div className="flex flex-col gap-4">
                {active.bullets.map((bullet, i) => (
                  <div key={i} className="flex gap-[15px] items-center">
                    <img
                      src="/assets/vital-industries/vector-badge-red.svg"
                      alt=""
                      className="w-[17px] h-[16px] shrink-0"
                    />
                    <p className="font-sans text-[#4a5565] text-[14px] leading-[24px]">
                      {bullet}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}