"use client";

import { CheckCircle2, Star } from "lucide-react";

import { FadeInUp, StaggerContainer, StaggerItem } from "@/components/ui/motion";

export function MembershipSection() {
  const memberPortalUrl = "https://ranata-membership.vercel.app/#beranda";

  const plans = [
    {
      name: "SILVER",
      badgeColor: "bg-[#9ba3af] text-gray-900",
      price: "Rp 2.500.000",
      period: "/tahun",
      bonus: "Termasuk 500 poin welcome bonus",
      features: [
        "Sewa Transportasi ke Bandara",
        "Layanan 24/7 via Chat",
        "Poin setiap transaksi",
        "Akses dashboard member",
      ],
      isPopular: false,
      buttonText: "Pilih Tier Silver",
      buttonVariant: "light",
    },
    {
      name: "GOLD",
      badgeColor: "bg-[#d4a017] text-gray-900",
      price: "Rp 5.000.000",
      period: "/tahun",
      bonus: "Termasuk 1.200 poin welcome bonus",
      features: [
        "Semua benefit Silver",
        "Handling di Bandara (check-in & boarding)",
        "Jemput di bandara tujuan",
        "Diskon 10% semua layanan",
      ],
      isPopular: false,
      buttonText: "Pilih Tier Gold",
      buttonVariant: "light",
    },
    {
      name: "PLATINUM",
      badgeColor: "bg-[#8a9cb0] text-gray-900",
      price: "Rp 10.000.000",
      period: "/tahun",
      bonus: "Termasuk 3.000 poin welcome bonus",
      features: [
        "Semua benefit Gold",
        "Penjemputan dari rumah",
        "Handling penuh bandara + hotel",
        "Check-in hotel diurus tim",
        "Personal consultant",
        "Diskon 15% semua layanan",
      ],
      isPopular: true,
      buttonText: "Pilih Tier Platinum",
      buttonVariant: "dark",
    },
  ];

  return (
    <section id="membership-tiers" className="bg-[#f7f8f9] py-24 relative overflow-hidden">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Header */}
        <FadeInUp className="text-center max-w-2xl mx-auto mb-16">
          <h2 className="text-3xl md:text-5xl font-extrabold text-[#7a0f0f] mb-4">
            Tier & Harga Membership
          </h2>
          <p className="text-base md:text-lg text-slate-500">
            Pilih tier yang sesuai dengan kebutuhan perjalanan Anda
          </p>
        </FadeInUp>

        {/* Mobile: Horizontal scroll (snap-x), Desktop: Grid */}
        <StaggerContainer className="flex overflow-x-auto lg:overflow-visible lg:grid lg:grid-cols-3 gap-8 pt-4 pb-8 md:pb-0 snap-x snap-mandatory hide-scrollbar">
          {plans.map((plan, index) => (
            <StaggerItem
              key={index}
              className={`min-w-[90vw] sm:min-w-[350px] lg:min-w-0 snap-center flex flex-col rounded-[24px] p-8 relative bg-white transition-all duration-500 hover:-translate-y-2 ${
                plan.isPopular
                  ? "border-2 border-[#7a0f0f] shadow-2xl shadow-[#7a0f0f]/10 z-10"
                  : "border border-gray-100 shadow-sm hover:shadow-xl z-0"
              }`}
            >
              {plan.isPopular && (
                <div className="absolute -top-[14px] left-1/2 -translate-x-1/2 bg-[#7a0f0f] text-white text-[11px] font-bold px-6 py-1.5 rounded-full uppercase tracking-wider shadow-md">
                  TERPOPULER
                </div>
              )}

              {/* Tier Badge */}
              <div className="mb-8">
                <span className={`inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full text-xs font-bold ${plan.badgeColor}`}>
                  <Star className="w-3.5 h-3.5 fill-current" />
                  {plan.name}
                </span>
              </div>

              {/* Price & Bonus */}
              <div className="mb-8">
                <div className="flex items-baseline gap-1 text-gray-900 mb-2">
                  <span className="text-3xl sm:text-4xl font-black tracking-tight">{plan.price}</span>
                  <span className="text-sm text-gray-500 font-medium">{plan.period}</span>
                </div>
                <p className="text-sm text-gray-500 font-medium">
                  {plan.bonus.split(/(\d+ poin)/).map((part, i) => 
                    part.includes("poin") ? <strong key={i} className="text-gray-700">{part}</strong> : part
                  )}
                </p>
              </div>

              {/* Features List */}
              <div className="flex-1 mb-10">
                <ul className="space-y-4">
                  {plan.features.map((feature, idx) => (
                    <li key={idx} className="flex items-start gap-3">
                      <CheckCircle2 className="w-5 h-5 text-[#7a0f0f] shrink-0 stroke-[2.5]" />
                      <span className="text-[15px] text-gray-600 font-medium leading-tight pt-0.5">{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Button */}
              <div>
                <a
                  href={memberPortalUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className={`block w-full text-center py-3.5 rounded-[14px] text-[15px] font-bold transition-all ${
                    plan.buttonVariant === "dark"
                      ? "bg-[#7a0f0f] text-white hover:bg-[#5a0b0b] shadow-lg shadow-[#7a0f0f]/20"
                      : "bg-[#f5e6e6] text-[#7a0f0f] hover:bg-[#ecdada]"
                  }`}
                >
                  {plan.buttonText}
                </a>
              </div>
            </StaggerItem>
          ))}
        </StaggerContainer>
        
        {/* Helper text untuk mobile */}
        <div className="lg:hidden text-center mt-2 text-xs text-gray-400">
          Geser untuk melihat paket lainnya 
        </div>
      </div>
      
      {/* CSS untuk menyembunyikan scrollbar di mobile tapi tetap bisa di scroll */}
      <style dangerouslySetInnerHTML={{__html: `
        .hide-scrollbar::-webkit-scrollbar {
          display: none;
        }
        .hide-scrollbar {
          -ms-overflow-style: none;
          scrollbar-width: none;
        }
      `}} />
    </section>
  );
}