"use client";

import { motion } from "framer-motion";
import { Zap, Coins, Gift } from "lucide-react";

export default function HowItWorks() {
  const steps = [
    {
      num: "01",
      title: "Walk, Play & Shop",
      description: "Keep doing your daily activities. Walk to school, play browser games, check-in, or scan shopping receipts.",
      icon: <Zap className="w-6 h-6 text-accent-pink" />,
      bg: "rgba(255, 46, 136, 0.05)",
      border: "border-accent-pink/15",
    },
    {
      num: "02",
      title: "Earn LYT Coins",
      description: "Earn LYTs directly into your wallet. Watch your points and account experience points (XP) scale as you walk.",
      icon: <Coins className="w-6 h-6 text-primary" />,
      bg: "rgba(255, 199, 44, 0.05)",
      border: "border-primary/15",
    },
    {
      num: "03",
      title: "Redeem Brand Vouchers",
      description: "Spend your earned LYTs on our checkout catalog for gift cards, subscription tokens, and exclusive brand discounts.",
      icon: <Gift className="w-6 h-6 text-accent-purple" />,
      bg: "rgba(139, 61, 255, 0.05)",
      border: "border-accent-purple/15",
    },
  ];

  return (
    <section className="py-24 bg-dark relative overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Section Header */}
        <div className="text-center max-w-3xl mx-auto mb-16 space-y-4">
          <span className="text-primary font-extrabold text-xs tracking-widest uppercase">
            Platform Workflow
          </span>
          <h2 className="text-3xl sm:text-5xl font-extrabold font-sora text-white leading-tight">
            The Social Currency <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-pink">Lifecycle</span>
          </h2>
          <p className="text-white/60 text-base sm:text-lg">
            A three-step gamified loop designed to reward you for living an active, social, and healthy lifestyle.
          </p>
        </div>

        {/* Step Cards Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {steps.map((step, idx) => (
            <motion.div
              key={step.num}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: idx * 0.15 }}
              style={{ backgroundColor: step.bg }}
              className={`glassmorphism rounded-3xl p-8 border ${step.border} relative flex flex-col justify-between group hover:scale-[1.02] transition-transform`}
            >
              <div className="space-y-6">
                <div className="flex justify-between items-center">
                  <div className="w-12 h-12 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center">
                    {step.icon}
                  </div>
                  <span className="text-3xl font-black font-sora text-white/10 group-hover:text-white/20 transition-colors">
                    {step.num}
                  </span>
                </div>

                <div className="space-y-2">
                  <h3 className="text-xl font-bold font-sora text-white">{step.title}</h3>
                  <p className="text-white/60 text-sm leading-relaxed">{step.description}</p>
                </div>
              </div>
            </motion.div>
          ))}
        </div>

      </div>
    </section>
  );
}
