import { motion, useInView } from "framer-motion";
import { useRef } from "react";

const cardVariants = {
  hidden: { opacity: 0, y: 40 },
  visible: (i: number) => ({
    opacity: 1,
    y: 0,
    transition: { delay: i * 0.1, 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: "💰", title: "Biaya Topup 3%", description: "Biaya topup hanya 3% tanpa biaya tambahan lainnya" },
    { icon: "⚙️", title: "Self Manage 11%", description: "Kelola sendiri laporan pajak dengan default pajak 0%" },
    { icon: "💳", title: "Shared BM Sendiri", description: "Buat Business Manager sendiri atau gabung shared BM" },
    { icon: "🔄", title: "Unlimited Akun", description: "Akses unlimited akun sesuai kebutuhan campaign" },
  ];

  const tiktokFeatures = [
    { icon: "💰", title: "Biaya Topup 5%", description: "Biaya topup hanya 5% tanpa biaya tambahan lainnya" },
    { icon: "🛡️", title: "Dukungan AM", description: "Didukung Account Manager profesional untuk bantu optimasi iklan Anda" },
    { icon: "📊", title: "Dashboard Canggih", description: "Dashboard modern untuk topup 24/7 anti delay" },
    { icon: "💰", title: "Unlimited Spend", description: "Spend budget iklan tanpa limit untuk hasil maksimal" },
  ];

  const googleFeatures = [
    { icon: "💰", title: "Topup Fee 7%", description: "Biaya topup hanya 7% dengan biaya bulanan 100rb/bulan (termurah se-Indonesia)" },
    { icon: "📈", title: "Hemat 11%", description: "Self tax Manage 11% untuk efisiensi budget iklan Anda secara maksimal" },
    { icon: "🇸🇬", title: "Official Support", description: "Dukungan teknis langsung dari Google Official Singapore" },
    { icon: "🛡️", title: "Termurah se-Indonesia", description: "Tarif sewa bulanan dan topup termurah di pasar Indonesia" },
  ];

  return (
    <section id="layanan" className="py-16 sm:py-20 lg:py-28 relative" ref={ref}>
      <div className="absolute inset-0 opacity-[0.02]">
        <div className="w-full h-full bg-[radial-gradient(circle_at_center,hsl(0_0%_100%)_1px,transparent_1px)] bg-[length:40px_40px]" />
      </div>

      <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-gradient">Keunggulan Maksimal</span>
          </h2>
          <p className="text-sm sm:text-base lg:text-lg text-muted-foreground max-w-2xl mx-auto">
            Akun whitelist resmi META Ads, TikTok Ads, dan Google Ads dengan berbagai keunggulan eksklusif untuk bisnis Anda.
          </p>
        </motion.div>

        {/* Meta Ads */}
        <div className="mb-12 sm:mb-16">
          <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-gradient-to-r from-transparent to-meta" />
            <h3 className="text-xl sm:text-2xl font-bold font-heading text-meta">META Ads Whitelist</h3>
            <div className="h-px w-16 bg-gradient-to-l from-transparent to-meta" />
          </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: -8, transition: { duration: 0.2 } }}
                className="glass rounded-xl p-6 hover:glow-meta transition-all duration-500 group"
              >
                <div className="w-12 h-12 rounded-xl bg-meta/10 border border-meta/20 flex items-center justify-center mb-4 group-hover:bg-meta/20 transition-colors">
                  <span className="text-2xl">{feature.icon}</span>
                </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>

        {/* TikTok Ads */}
        <div className="mb-12 sm:mb-16">
          <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.5 }}
          >
            <div className="h-px w-16 bg-gradient-to-r from-transparent to-tiktok" />
            <h3 className="text-xl sm:text-2xl font-bold font-heading text-tiktok">TikTok Ads Whitelist</h3>
            <div className="h-px w-16 bg-gradient-to-l from-transparent to-tiktok" />
          </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: -8, transition: { duration: 0.2 } }}
                className="glass rounded-xl p-6 hover:glow-tiktok transition-all duration-500 group"
              >
                <div className="w-12 h-12 rounded-xl bg-tiktok/10 border border-tiktok/20 flex items-center justify-center mb-4 group-hover:bg-tiktok/20 transition-colors">
                  <span className="text-2xl">{feature.icon}</span>
                </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>

        {/* 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.8 }}
          >
            <div className="h-px w-16 bg-gradient-to-r from-transparent to-google" />
            <h3 className="text-xl sm:text-2xl font-bold font-heading text-google">Google Ads Whitelist</h3>
            <div className="h-px w-16 bg-gradient-to-l from-transparent to-google" />
          </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: -8, transition: { duration: 0.2 } }}
                className="glass rounded-xl p-6 hover:glow-google border border-google/10 hover:border-google/30 transition-all duration-500 group"
              >
                <div className="w-12 h-12 rounded-xl bg-google/10 border border-google/20 flex items-center justify-center mb-4 group-hover:bg-google/20 transition-colors">
                  <span className="text-2xl">{feature.icon}</span>
                </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-10">
            <button
              onClick={() => window.open('https://google.akunroket.com', '_blank')}
              className="inline-flex items-center gap-2 bg-google hover:bg-google/90 text-black font-bold px-6 py-3.5 rounded-xl glow-google hover:scale-105 transition-all duration-300 text-sm"
            >
              🔍 Mulai Beriklan Google Whitelist Sekarang
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default FeaturesSection;