'use client';

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

const SUBJECTS = [
  { name: 'বর্ণমালা', emoji: '🔤', pct: 80, bg: 'bg-mango-100', bar: 'bg-mango-500' },
  { name: 'গণিত', emoji: '🔢', pct: 55, bg: 'bg-leaf-100', bar: 'bg-leaf-500' },
  { name: 'বিজ্ঞান', emoji: '🔬', pct: 35, bg: 'bg-sun-100', bar: 'bg-sun-600' },
  { name: 'গল্প পড়া', emoji: '📖', pct: 60, bg: 'bg-mango-100', bar: 'bg-mango-500' },
];

/**
 * A real (miniature) render of the app home screen inside a phone frame.
 * Not a fake screenshot: it's built from the same UI language as the app.
 */
export default function PhonePreview() {
  return (
    <div className="relative mx-auto w-[280px] max-w-full">
      {/* phone frame */}
      <div className="relative rounded-[2.5rem] border-[5px] border-ink bg-cream p-3 shadow-hard-lg">
        {/* notch */}
        <div className="absolute left-1/2 top-1.5 h-1.5 w-16 -translate-x-1/2 rounded-full bg-ink/30" />

        {/* header */}
        <div className="mt-3 flex items-center justify-between">
          <div className="flex items-center gap-1.5">
            <Mascot mood="happy" size={28} />
            <span className="font-heading text-xs font-bold text-ink">হ্যালো!</span>
          </div>
          <div className="flex items-center gap-1">
            <span className="flex items-center gap-0.5 rounded-full bg-sun-100 px-1.5 py-0.5 text-[10px] font-bold text-sun-600">
              <Star className="h-2.5 w-2.5 fill-sun-500 text-sun-500" />১২
            </span>
            <span className="flex items-center gap-0.5 rounded-full bg-leaf-100 px-1.5 py-0.5 text-[10px] font-bold text-leaf-600">
              <Coins className="h-2.5 w-2.5" />৪০
            </span>
            <span className="flex items-center gap-0.5 rounded-full bg-mango-100 px-1.5 py-0.5 text-[10px] font-bold text-mango-600">
              <Flame className="h-2.5 w-2.5 fill-mango-500 text-mango-500" />৩
            </span>
          </div>
        </div>

        {/* subject grid */}
        <div className="mt-3 grid grid-cols-2 gap-2">
          {SUBJECTS.map((s, i) => (
            <motion.div
              key={s.name}
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.2 + i * 0.08 }}
              className={`rounded-2xl border-2 border-ink ${s.bg} p-2.5`}
            >
              <div className="text-lg" aria-hidden>{s.emoji}</div>
              <p className="mt-1 text-[11px] font-bold text-ink">{s.name}</p>
              <div className="mt-1.5 h-2 w-full overflow-hidden rounded-full border border-ink/20 bg-white">
                <div className={`h-full rounded-full ${s.bar}`} style={{ width: `${s.pct}%` }} />
              </div>
            </motion.div>
          ))}
        </div>

        {/* AI banner */}
        <div className="mt-2 flex items-center gap-2 rounded-2xl border-2 border-ink bg-mango-500 p-2.5 text-white">
          <div className="flex h-7 w-7 items-center justify-center rounded-xl bg-white/20">
            <Sparkles className="h-4 w-4" />
          </div>
          <div className="flex-1">
            <p className="text-[11px] font-extrabold leading-tight">AI বন্ধু তারা</p>
            <p className="text-[9px] text-mango-50">গল্প শোনো, প্রশ্ন করো</p>
          </div>
          <ArrowRight className="h-4 w-4" />
        </div>
      </div>
    </div>
  );
}