import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { DollarSign, Settings, CreditCard, RefreshCw, UserCheck, LayoutDashboard, Zap, Globe, Award, Percent } from "lucide-react";

const cardVariants = {
  hidden: { opacity: 0, y: 40 },
  visible: (i: number) => ({
    opacity: 1,
    y: 0,
    transition: { delay: i * 0.08, duration: 0.5, ease: [0.25, 0.46, 0.45, 0.94] as const },
  }),
};

const FeaturesSection = () => {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  const metaFeatures = [
    { icon: <DollarSign className="w-5 h-5 text-meta" />, title: "Biaya Topup 3%", description: "Biaya topup flat hanya 3% tanpa tambahan biaya pendaftaran lainnya." },
    { icon: <Settings className="w-5 h-5 text-meta" />, title: "Self Manage 11%", description: "Kelola kewajiban perpajakan secara mandiri dengan tarif default pajak 0%." },
    { icon: <CreditCard className="w-5 h-5 text-meta" />, title: "Shared BM Resmi", description: "Bebas menggunakan Business Manager pribadi atau bergabung dengan shared BM kami." },
    { icon: <RefreshCw className="w-5 h-5 text-meta" />, title: "Pengelolaan akun", description: "Kelola kebutuhan akun iklan dari dashboard yang tersedia." },
  ];

  const tiktokFeatures = [
    { icon: <DollarSign className="w-5 h-5 text-tiktok" />, title: "Biaya Topup 5%", description: "Biaya topup hemat hanya 5% tanpa biaya pendaftaran maupun bulanan." },
    { icon: <UserCheck className="w-5 h-5 text-tiktok" />, title: "Dukungan AM", description: "Didukung Account Manager profesional untuk membantu proses banding dan optimasi." },
    { icon: <LayoutDashboard className="w-5 h-5 text-tiktok" />, title: "Dashboard Canggih", description: "Dashboard mandiri modern untuk topup instan 24/7 otomatis tanpa delay." },
    { icon: <Zap className="w-5 h-5 text-tiktok" />, title: "Alur pengajuan", description: "Ikuti proses pengajuan dan pantau statusnya dari dashboard." },
  ];

  const googleFeatures = [
    { icon: <DollarSign className="w-5 h-5 text-google" />, title: "Topup Fee 7%", description: "Biaya topup flat 7% dengan biaya langganan bulanan 100rb/bulan (termurah se-Indonesia)." },
    { icon: <Percent className="w-5 h-5 text-google" />, title: "Hemat 11%", description: "Gunakan fitur Self Tax Manage 11% untuk efisiensi alokasi budget iklan." },
    { icon: <Globe className="w-5 h-5 text-google" />, title: "Dukungan platform", description: "Informasi layanan Google tersedia di jalur pengajuan khusus." },
    { icon: <Award className="w-5 h-5 text-google" />, title: "Rincian biaya", description: "Lihat komponen biaya sebelum melanjutkan pengajuan." },
  ];

  return (
    <section id="layanan" className="py-16 sm:py-20 lg:py-28 relative" ref={ref}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <motion.div
          className="text-center mb-12 sm:mb-16"
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
        >
          <span className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-medium border border-primary/30 bg-primary/10 text-primary mb-4">
            Layanan Kami
          </span>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold font-heading text-foreground mb-4">
            3 Platform, <span className="text-primary">satu alur pengajuan</span>
          </h2>
          <p className="text-sm sm:text-base lg:text-lg text-muted-foreground max-w-2xl mx-auto">
            Bandingkan pilihan layanan META Ads, TikTok Ads, dan Google Ads berdasarkan biaya serta alur pengajuannya.
          </p>
        </motion.div>

        {/* Meta Ads */}
        <div className="mb-16 sm:mb-20">
          <motion.div
            className="flex items-center justify-center gap-3 mb-8"
            initial={{ opacity: 0 }}
            animate={isInView ? { opacity: 1 } : {}}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            <div className="h-px w-16 bg-meta/50" />
            <div className="flex items-center gap-2">
              <img src="/meta-icon.webp" alt="" className="w-5 h-5 object-contain" />
              <h3 className="text-xl sm:text-2xl font-bold font-heading text-meta">META Ads Whitelist</h3>
            </div>
            <div className="h-px w-16 bg-meta/50" />
          </motion.div>
          
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
            {metaFeatures.map((feature, index) => (
              <motion.div
                key={index}
                variants={cardVariants}
                initial="hidden"
                animate={isInView ? "visible" : "hidden"}
                custom={index}
                whileHover={{ y: -6, transition: { duration: 0.2 } }}
                className="bg-card rounded-xl p-6 border border-meta/10 hover:border-meta/30 transition-colors duration-300 group"
              >
                <div className="w-10 h-10 rounded-lg bg-meta/10 border border-meta/20 flex items-center justify-center mb-4 group-hover:bg-meta/20 transition-colors">
                  {feature.icon}
                </div>
                <h4 className="text-sm sm:text-base font-semibold text-foreground mb-2 font-heading">{feature.title}</h4>
                <p className="text-muted-foreground text-xs sm:text-sm leading-relaxed">{feature.description}</p>
              </motion.div>
            ))}
          </div>

          <div className="text-center mt-8">
            <button
              onClick={() => window.open('https://app.akunroket.com', '_blank')}
              className="inline-flex items-center gap-2 bg-meta hover:bg-meta/90 text-white font-bold px-6 py-3 rounded-xl transition-colors duration-300 text-sm focus-visible:ring-2 focus-visible:ring-meta"
            >
              <img src="/meta-icon.webp" alt="" className="w-4 h-4 object-contain brightness-0 invert" />
              Sewa Akun Whitelist META
            </button>
          </div>
        </div>

        {/* TikTok Ads */}
        <div className="mb-16 sm:mb-20">
          <motion.div
            className="flex items-center justify-center gap-3 mb-8"
            initial={{ opacity: 0 }}
            animate={isInView ? { opacity: 1 } : {}}
            transition={{ duration: 0.5, delay: 0.4 }}
          >
            <div className="h-px w-16 bg-tiktok/50" />
            <div className="flex items-center gap-2">
              <img src="/tiktok-icon.webp" alt="" className="w-5 h-5 object-contain" />
              <h3 className="text-xl sm:text-2xl font-bold font-heading text-tiktok">TikTok Ads Whitelist</h3>
            </div>
            <div className="h-px w-16 bg-tiktok/50" />
          </motion.div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
            {tiktokFeatures.map((feature, index) => (
              <motion.div
                key={index}
                variants={cardVariants}
                initial="hidden"
                animate={isInView ? "visible" : "hidden"}
                custom={index + 4}
                whileHover={{ y: -6, transition: { duration: 0.2 } }}
                className="bg-card rounded-xl p-6 border border-tiktok/10 hover:border-tiktok/30 transition-colors duration-300 group"
              >
                <div className="w-10 h-10 rounded-lg bg-tiktok/10 border border-tiktok/20 flex items-center justify-center mb-4 group-hover:bg-tiktok/20 transition-colors">
                  {feature.icon}
                </div>
                <h4 className="text-sm sm:text-base font-semibold text-foreground mb-2 font-heading">{feature.title}</h4>
                <p className="text-muted-foreground text-xs sm:text-sm leading-relaxed">{feature.description}</p>
              </motion.div>
            ))}
          </div>

          <div className="text-center mt-8">
            <button
              onClick={() => window.open('https://app.akunroket.com', '_blank')}
              className="inline-flex items-center gap-2 bg-[#010101] hover:bg-[#010101]/80 text-white border border-border hover:border-tiktok/30 font-bold px-6 py-3 rounded-xl transition-colors duration-300 text-sm focus-visible:ring-2 focus-visible:ring-tiktok"
            >
              <img src="/tiktok-icon.webp" alt="" className="w-4 h-4 object-contain" />
              Sewa Akun Whitelist TikTok
            </button>
          </div>
        </div>

        {/* Google Ads */}
        <div>
          <motion.div
            className="flex items-center justify-center gap-3 mb-8"
            initial={{ opacity: 0 }}
            animate={isInView ? { opacity: 1 } : {}}
            transition={{ duration: 0.5, delay: 0.6 }}
          >
            <div className="h-px w-16 bg-google/50" />
            <div className="flex items-center gap-2">
              <img src="/google-icon.webp" alt="" className="w-5 h-5 object-contain" />
              <h3 className="text-xl sm:text-2xl font-bold font-heading text-google">Google Ads Whitelist</h3>
            </div>
            <div className="h-px w-16 bg-google/50" />
          </motion.div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
            {googleFeatures.map((feature, index) => (
              <motion.div
                key={index}
                variants={cardVariants}
                initial="hidden"
                animate={isInView ? "visible" : "hidden"}
                custom={index + 8}
                whileHover={{ y: -6, transition: { duration: 0.2 } }}
                className="bg-card rounded-xl p-6 border border-google/10 hover:border-google/30 transition-colors duration-300 group"
              >
                <div className="w-10 h-10 rounded-lg bg-google/10 border border-google/20 flex items-center justify-center mb-4 group-hover:bg-google/20 transition-colors">
                  {feature.icon}
                </div>
                <h4 className="text-sm sm:text-base font-semibold text-foreground mb-2 font-heading">{feature.title}</h4>
                <p className="text-muted-foreground text-xs sm:text-sm leading-relaxed">{feature.description}</p>
              </motion.div>
            ))}
          </div>

          <div className="text-center mt-8">
            <button
              onClick={() => window.open('https://google.akunroket.com', '_blank')}
              className="inline-flex items-center gap-2 bg-google hover:bg-google/90 text-white font-bold px-6 py-3 rounded-xl transition-colors duration-300 text-sm focus-visible:ring-2 focus-visible:ring-google"
            >
              <img src="/google-icon.webp" alt="" className="w-4 h-4 object-contain" />
              Sewa Akun Whitelist Google
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default FeaturesSection;