"use client";

import Image from "next/image";
import { Star, Award, GraduationCap, Shield } from "lucide-react";
import { Button } from "@/components/ui/button";
import type { SunatRacingContent } from "@/services/sunat-racing.service";

const BADGES = [
  {
    icon: Star,
    text: "Best Circumcision Expert Award 2024",
  },
  {
    icon: Award,
    text: "Rekor MURI – Khitan Tanpa Jahit Terbanyak (2021)",
  },
  {
    icon: GraduationCap,
    text: "Trainer Workshop Hands-On Khitan Sealer",
  },
  {
    icon: Shield,
    text: "ASDOKI Certified",
  },
];

interface SunatRacingDokterSectionProps {
  doctors: SunatRacingContent["doctors"];
  sectionTitle: string;
  sectionSubtitle: string;
}

const SunatRacingDokterSection = ({
  doctors,
  sectionTitle,
  sectionSubtitle,
}: SunatRacingDokterSectionProps) => {
  const doctor = doctors?.[0];

  if (!doctor) {
    return null;
  }

  return (
    <section className="py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        {/* Main Card */}
        <div
          className="relative rounded-[20px] border border-white p-6 md:p-8 overflow-hidden"
          style={{
            background:
              "linear-gradient(113.383deg, #FF6600 0.24671%, #FFB700 46.108%, #FFDC84 91.969%)",
            boxShadow: "0px 4px 0px 0px #B76100",
          }}
        >
          <div className="flex flex-col lg:flex-row items-end gap-8">
            {/* Left Content */}
            <div className="flex-1 space-y-6 pb-4">
              {/* Header */}
              <h2 className="text-3xl md:text-4xl font-medium text-white tracking-tight max-w-lg leading-tight">
                {sectionTitle || "Dokter Sunat Berpengalaman & Bersertifikasi Nasional"}
              </h2>

              {/* Description */}
              <p className="text-lg md:text-xl text-white/90 leading-relaxed max-w-lg">
                {sectionSubtitle || `Ditangani langsung oleh ${doctor?.name || "dr. Imam Khoirul Fajri, M.M"} operator sunat berpengalaman dengan >13.000 pasien, bersertifikat nasional, dan diakui berbagai lembaga profesional.`}
              </p>

              {/* Badges */}
              <div className="flex flex-wrap gap-2">
                {BADGES.map((badge, index) => (
                  <div
                    key={index}
                    className="bg-[#3F7BFF] text-white px-4 py-2 rounded-[18px] flex items-center gap-2"
                  >
                    <badge.icon className="w-4 h-4" />
                    <span className="text-sm font-bold">{badge.text}</span>
                  </div>
                ))}
                <div className="bg-white text-[#003DD8] px-4 py-2 rounded-[18px] font-bold text-sm">
                  +2
                </div>
              </div>

              {/* CTA Button */}
              <Button
                variant="secondary"
                className="bg-white hover:bg-white/90 text-[#FE6701] font-bold text-lg rounded-full px-8 py-6 h-auto shadow-[0px_1px_11px_0px_rgba(255,212,102,0.32)]"
              >
                Lihat Profil Dokter
              </Button>
            </div>

            {/* Right Image with Decorations */}
            <div className="relative w-full lg:w-[561px] h-[400px] lg:h-[603px]">
              {/* Doctor Image */}
              <div className="absolute inset-0">
                <Image
                  src={doctor?.imageUrl || "/assets/sunat-racing/dokter-person.png"}
                  alt={doctor?.name || "Dr. Imam Khoirul Fajri"}
                  fill
                  className="object-cover object-top"
                />
              </div>

              {/* Decoration 1 - ASDOKI Badge (top right) */}
              <div className="absolute top-[15%] right-[5%] w-32 h-32 rotate-[-8deg]">
                <Image
                  src="/assets/sunat-racing/dokter-decoration-1.svg"
                  alt="ASDOKI Certified"
                  fill
                  className="object-contain"
                />
              </div>

              {/* Decoration 2 - Award (left middle) */}
              <div className="absolute top-[35%] left-0 w-24 h-36 rotate-[6deg]">
                <Image
                  src="/assets/sunat-racing/dokter-decoration-2.svg"
                  alt="Best Circumcision Award"
                  fill
                  className="object-contain"
                />
              </div>

              {/* Decoration 3 - MURI Record (right lower) */}
              <div className="absolute bottom-[15%] right-[15%] w-36 h-32 rotate-[10deg]">
                <Image
                  src="/assets/sunat-racing/dokter-decoration-3.svg"
                  alt="Rekor MURI"
                  fill
                  className="object-contain"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default SunatRacingDokterSection;