import {
  BookOpen,
  Mic,
  Users,
  ChevronRight,
} from "lucide-react";


const icons = {
  book: BookOpen,
  mic: Mic,
  users: Users,
};

export default function MasterclassSection({
  data,
}) {
  const isStepCards = data.cardVariant === "steps";

  return (
    <section id={data.id} className="py-20 bg-gradient-to-br from-[#F6EFE9] to-white">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="text-center mb-12">
          <p className="text-xs font-black text-[#8B1C1C] uppercase tracking-widest mb-2">
            {data.badge}
          </p>

          <h2 className="text-3xl md:text-4xl font-black text-[#4A141E]">
            {data.title}
          </h2>

          {data.showDescription !== false && data.description ? (
            <p className="text-[#4A141E]/70 mt-3 max-w-xl mx-auto">
              {data.description}
            </p>
          ) : null}
        </div>

        {/* Cards */}
        <div
          className={
            isStepCards
              ? "grid md:grid-cols-3 gap-6"
              : "grid md:grid-cols-2 lg:grid-cols-4 gap-5"
          }
        >
          {data.sections.map((section, index) => {
            const Icon = icons[section.icon];

            return (
              <div
                key={section.title}
                className={
                  isStepCards
                    ? "group relative flex h-full flex-col overflow-hidden rounded-3xl border-2 border-[#E6D3B1]/60 bg-white p-7 shadow-lg transition-all duration-300 hover:-translate-y-1 hover:border-[#D4AF37] hover:shadow-2xl"
                    : "p-7 rounded-2xl bg-white border-2 border-[#E6D3B1]/40 hover:border-[#D4AF37] transition-all duration-300 shadow-lg"
                }
              >
                {isStepCards ? (
                  <>
                    <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-[#8B1C1C] via-[#D4AF37] to-[#8B1C1C]" />

                    <div className="mb-6 flex items-center justify-between">
                      <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-[#4A141E] to-[#3B0F18] shadow-md transition-transform duration-300 group-hover:scale-105">
                        <Icon className="h-7 w-7 text-[#D4AF37]" />
                      </div>

                      <div className="flex h-10 w-10 items-center justify-center rounded-full border border-[#D4AF37]/50 bg-[#F6EFE9] text-lg font-black text-[#8B1C1C]">
                        {index + 1}
                      </div>
                    </div>

                    <h3 className="mb-4 text-xl font-black leading-tight text-[#4A141E]">
                      {section.title}
                    </h3>

                    <div className="flex-1 space-y-3">
                      {section.items.map((item) => (
                        <p
                          key={item}
                          className="text-base leading-relaxed text-[#4A141E]/70"
                        >
                          {item}
                        </p>
                      ))}
                    </div>
                  </>
                ) : (
                  <>
                    {data.showStepNumbers === true ? (
                      <div className="mb-3 text-xl font-black text-[#8B1C1C]">
                        {index + 1}
                      </div>
                    ) : null}

                    <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-[#4A141E] to-[#3B0F18] flex items-center justify-center mb-4">
                      <Icon className="w-6 h-6 text-[#D4AF37]" />
                    </div>

                    <h3 className="font-black text-[#4A141E] mb-3">
                      {section.title}
                    </h3>

                    <ul className="space-y-1.5">
                      {section.items.map((item) => (
                        <li
                          key={item}
                          className="flex items-start gap-2 text-sm text-[#4A141E]/70"
                        >
                          <ChevronRight className="w-4 h-4 text-[#8B1C1C] flex-shrink-0 mt-0.5" />
                          <span>{item}</span>
                        </li>
                      ))}
                    </ul>
                  </>
                )}
              </div>
            );
          })}
        </div>

        {/* Bottom Highlight */}
        {data.showHighlight !== false ? (
          <div className="mt-8 p-6 rounded-2xl bg-gradient-to-r from-[#4A141E] to-[#3B0F18] border-2 border-[#D4AF37] text-center">
          <p className="text-base md:text-lg font-bold text-[#E6D3B1]">
            {data.highlight.prefix}{" "}
            <span className="text-[#D4AF37]">
              {data.highlight.title}
            </span>{" "}
            — {data.highlight.description}
          </p>
          </div>
        ) : null}
      </div>
    </section>
  );
}