'use client';

import { motion } from 'framer-motion';
import { Frown, Clock, ArrowRight, Star, Sparkles } from 'lucide-react';
import Mascot from '../Mascot';

export default function BeforeAfter() {
  return (
    <div className="grid items-center gap-4 sm:grid-cols-[1fr_auto_1fr]">
      {/* before */}
      <motion.div
        initial={{ opacity: 0, x: -20 }}
        whileInView={{ opacity: 1, x: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5 }}
        className="-rotate-1 rounded-3xl border-[3px] border-ink bg-cream-100 p-6"
      >
        <div className="flex items-center gap-2 text-ink-faint">
          <Clock className="h-5 w-5" />
          <span className="text-sm font-bold uppercase tracking-wide">আগে</span>
        </div>
        <div className="mt-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-cream-200 text-ink-faint">
          <Frown className="h-8 w-8" />
        </div>
        <h3 className="mt-4 font-heading text-xl font-bold text-ink-soft">শুধু কার্টুন ও গেম</h3>
        <p className="mt-1 text-sm text-ink-faint">ঘণ্টার পর ঘণ্টা ফোনে, শেষে কিছুই শেখা হয় না।</p>
      </motion.div>

      {/* arrow */}
      <motion.div
        initial={{ opacity: 0, scale: 0.5 }}
        whileInView={{ opacity: 1, scale: 1 }}
        viewport={{ once: true }}
        transition={{ delay: 0.2 }}
        className="mx-auto flex h-12 w-12 items-center justify-center rounded-full border-[3px] border-ink bg-mango-500 text-white shadow-hard-sm sm:rotate-0"
      >
        <ArrowRight className="h-6 w-6" />
      </motion.div>

      {/* after */}
      <motion.div
        initial={{ opacity: 0, x: 20 }}
        whileInView={{ opacity: 1, x: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5, delay: 0.1 }}
        className="rotate-1 rounded-3xl border-[3px] border-ink bg-white p-6 shadow-hard"
      >
        <div className="flex items-center gap-2 text-leaf-600">
          <Sparkles className="h-5 w-5" />
          <span className="text-sm font-bold uppercase tracking-wide">এখন</span>
        </div>
        <div className="mt-4">
          <Mascot mood="happy" size={64} />
        </div>
        <h3 className="mt-4 font-heading text-xl font-bold text-ink">খেলতে খেলতে শেখা</h3>
        <p className="mt-1 flex items-center gap-1 text-sm text-ink-soft">
          <Star className="h-4 w-4 fill-sun-500 text-sun-500" /> স্টার জমছে, রোজ কিছু শিখছে।
        </p>
      </motion.div>
    </div>
  );
}