'use client'

import { motion } from 'framer-motion'
import {
  Sparkles,
  Sun,
  Orbit,
  Moon,
  Music2,
  type LucideIcon,
} from 'lucide-react'

type Card = {
  icon: LucideIcon
  title: string
  accent: string
  big: string
  sub: string
  foot?: string
}

const CARDS: Card[] = [
  {
    icon: Sparkles,
    title: 'NEXT BRAHMA MUHURTA',
    accent: '#00E5FF',
    big: '13h 42m',
    sub: 'Starts at',
    foot: '04:00 AM',
  },
  {
    icon: Sun,
    title: 'ABHIJIT MUHURTA',
    accent: '#FFD700',
    big: '11:48 AM – 12:32 PM',
    sub: 'In',
    foot: '1h 18m',
  },
  {
    icon: Orbit,
    title: 'RAHU KAAL',
    accent: '#EF4444',
    big: '12:30 PM – 02:00 PM',
    sub: 'Starts in',
    foot: '1h 59m',
  },
  {
    icon: Moon,
    title: 'CHANDRA RASHI',
    accent: '#7C3AED',
    big: 'Vrishabha',
    sub: 'Taurus',
  },
  {
    icon: Music2,
    title: 'SUGGESTED RAGA',
    accent: '#10B981',
    big: 'BILAWAL',
    sub: 'Best for productivity & mental clarity',
  },
]

export default function InfoCards() {
  return (
    <div className="grid w-full grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
      {CARDS.map((c, i) => {
        const Icon = c.icon
        return (
          <motion.div
            key={c.title}
            initial={{ opacity: 0, y: 24 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1 + i * 0.08 }}
            className="glass glass-hover group relative flex flex-col overflow-hidden rounded-2xl p-4"
          >
            <span
              className="absolute inset-x-0 top-0 h-px opacity-70"
              style={{ background: `linear-gradient(90deg, transparent, ${c.accent}, transparent)` }}
            />
            <div className="mb-3 flex items-center gap-2">
              <Icon className="h-4 w-4 shrink-0" style={{ color: c.accent, filter: `drop-shadow(0 0 6px ${c.accent}80)` }} />
              <h3 className="font-display text-[0.6rem] leading-tight tracking-widest text-muted-foreground">
                {c.title}
              </h3>
            </div>
            <p
              className="font-display text-lg font-bold leading-tight text-white"
              style={{ color: c.title === 'SUGGESTED RAGA' ? c.accent : undefined }}
            >
              {c.big}
            </p>
            <p className="mt-2 text-xs text-slate-400">{c.sub}</p>
            {c.foot && (
              <p className="mt-0.5 font-display text-sm font-semibold text-slate-200">
                {c.foot}
              </p>
            )}
          </motion.div>
        )
      })}
    </div>
  )
}