"use client";

import { motion } from "framer-motion";
import { Heart, MessageCircle, Share, Star } from "lucide-react";

export default function SocialWall() {
  const posts = [
    {
      user: "@charlie_walks",
      content: "Just cleared my daily step goal and claimed a $10 Starbucks gift card. Literally paid to walk to class! ☕🚶‍♂️",
      likes: 242,
      comments: 18,
      brand: "Starbucks",
      bgGlow: "rgba(16, 185, 129, 0.08)",
    },
    {
      user: "@kicks_n_lyts",
      content: "Redeemed my LYTs for a 20% discount code at Nike. Ripped these Air Max 90s for absolute dirt. Walk simulator goes crazy! 🔥👟",
      likes: 512,
      comments: 44,
      brand: "Nike",
      bgGlow: "rgba(255, 255, 255, 0.08)",
    },
    {
      user: "@gamer_earn",
      content: "Hit score 75 on the Coin Catcher mini-game, converted it directly and unlocked Spotify Premium. This app is essential. 🎧✨",
      likes: 189,
      comments: 12,
      brand: "Spotify",
      bgGlow: "rgba(34, 197, 94, 0.08)",
    },
  ];

  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-20 space-y-4">
          <span className="text-accent-purple font-extrabold text-xs tracking-widest uppercase">
            Gen Z Social Wall
          </span>
          <h2 className="text-3xl sm:text-5xl font-extrabold font-sora text-white leading-tight">
            Hear it from the <span className="text-transparent bg-clip-text bg-gradient-to-r from-accent-pink via-accent-purple to-accent-lime">Squad</span>
          </h2>
          <p className="text-white/60 text-base sm:text-lg">
            See how real users are converting their daily distance and plays into social currency vouchers.
          </p>
        </div>

        {/* Social Cards Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {posts.map((post, idx) => (
            <motion.div
              key={idx}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: idx * 0.15 }}
              style={{ boxShadow: `0 10px 30px -15px ${post.bgGlow}` }}
              className="glassmorphism rounded-3xl p-6 border border-white/5 flex flex-col justify-between hover:border-white/10 transition-colors"
            >
              <div className="space-y-4">
                <div className="flex justify-between items-center border-b border-white/5 pb-3">
                  <span className="font-bold text-sm text-white">{post.user}</span>
                  <span className="text-[10px] font-bold text-accent-lime uppercase bg-white/5 px-2 py-0.5 rounded border border-white/10">
                    Redeemed {post.brand}
                  </span>
                </div>
                <p className="text-white/80 text-sm leading-relaxed font-medium">
                  "{post.content}"
                </p>
              </div>

              {/* Feed Actions Mock */}
              <div className="flex items-center space-x-6 text-white/40 mt-6 pt-3 border-t border-white/5 text-xs font-semibold">
                <button className="flex items-center space-x-1.5 hover:text-accent-pink transition-colors">
                  <Heart className="w-4 h-4" />
                  <span>{post.likes}</span>
                </button>
                <button className="flex items-center space-x-1.5 hover:text-accent-purple transition-colors">
                  <MessageCircle className="w-4 h-4" />
                  <span>{post.comments}</span>
                </button>
                <button className="flex items-center space-x-1.5 hover:text-primary transition-colors ml-auto">
                  <Share className="w-4 h-4" />
                </button>
              </div>
            </motion.div>
          ))}
        </div>

      </div>
    </section>
  );
}
