"use client";

import { motion } from "framer-motion";
import { ShieldCheck, Award, Zap, Heart } from "lucide-react";

export default function ValueProp() {
  const points = [
    {
      title: "Real Brands, Instant Codes",
      desc: "No points conversions or delays. Claim digital voucher codes instantly at Starbucks, Nike, Netflix, Spotify.",
      icon: <Award className="w-5 h-5 text-primary" />,
    },
    {
      title: "100% Free & Transparent",
      desc: "Zero fees, zero limits. Earn by living your active, healthy life. Your steps and plays are your only capital.",
      icon: <ShieldCheck className="w-5 h-5 text-accent-lime" />,
    },
    {
      title: "Gen Z Social Ecosystem",
      desc: "Form squad step goals, battle in real-time catcher leaderboards, and trade vouchers with friends in our app.",
      icon: <Zap className="w-5 h-5 text-accent-pink" />,
    },
    {
      title: "Health & Well-being Loop",
      desc: "Earn currency while prioritizing your physical health, mental focus, and social community connections.",
      icon: <Heart className="w-5 h-5 text-accent-purple" />,
    },
  ];

  return (
    <section className="py-24 bg-[#090909] relative overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Header */}
        <div className="text-center max-w-3xl mx-auto mb-16 space-y-4">
          <span className="text-accent-pink font-extrabold text-xs tracking-widest uppercase">
            Platform Benefits
          </span>
          <h2 className="text-3xl sm:text-5xl font-extrabold font-sora text-white leading-tight">
            Designed for the <span className="text-glow-yellow text-primary">Connected Generation</span>
          </h2>
          <p className="text-white/60 text-base sm:text-lg">
            LytsUp shifts the loyalty points equation. Discover why thousands of users sync daily.
          </p>
        </div>

        {/* Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {points.map((item, idx) => (
            <motion.div
              key={idx}
              initial={{ opacity: 0, x: idx % 2 === 0 ? -30 : 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5 }}
              className="glassmorphism rounded-3xl p-8 border border-white/5 flex gap-5 hover:border-white/10 transition-colors"
            >
              <div className="w-10 h-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center shrink-0">
                {item.icon}
              </div>
              <div className="space-y-2">
                <h3 className="text-lg font-bold font-sora text-white">{item.title}</h3>
                <p className="text-white/60 text-sm leading-relaxed">{item.desc}</p>
              </div>
            </motion.div>
          ))}
        </div>

      </div>
    </section>
  );
}
