"use client";

import { motion } from "framer-motion";
import { Ticket, DollarSign, Bus, Users, TrendingUp } from "lucide-react";

const stats = [
  { label: "Tickets sold today", value: "2,847", icon: Ticket, color: "text-emerald-500", bg: "bg-emerald-500/10" },
  { label: "Revenue", value: "₨ 142,350", icon: DollarSign, color: "text-[#2563eb]", bg: "bg-[#2563eb]/10" },
  { label: "Active vehicles", value: "48", icon: Bus, color: "text-violet-500", bg: "bg-violet-500/10" },
  { label: "Passenger count", value: "3,201", icon: Users, color: "text-amber-500", bg: "bg-amber-500/10" },
];

const routeData = [
  { route: "Route A - City Center", trips: 124, revenue: "₨ 45,200" },
  { route: "Route B - North", trips: 98, revenue: "₨ 38,100" },
  { route: "Route C - South", trips: 87, revenue: "₨ 32,400" },
  { route: "Route D - East", trips: 76, revenue: "₨ 26,650" },
];

export default function DashboardPreview() {
  return (
    <section className="py-16 lg:py-24 bg-[#f8fafc] relative overflow-hidden">
      <div className="bg-dots-pattern absolute inset-0 opacity-40" />
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-center mb-10"
        >
          <span className="text-[#2563eb] font-semibold text-sm uppercase tracking-wider">
            Analytics
          </span>
          <h2 className="mt-3 text-3xl sm:text-4xl lg:text-5xl font-bold text-[#0f172a]">
            Dashboard Preview
          </h2>
          <p className="mt-4 text-lg text-[#64748b] max-w-2xl mx-auto">
            Real-time overview of tickets, revenue, vehicles, and route
            analytics—like a SaaS admin dashboard.
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="rounded-2xl bg-white shadow-xl shadow-slate-200/50 border border-slate-200 overflow-hidden"
        >
          <div className="p-6 border-b border-slate-200 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 rounded-lg bg-[#2563eb] flex items-center justify-center">
                <TrendingUp className="text-white" size={18} />
              </div>
              <span className="font-semibold text-[#0f172a]">Sasium Dashboard</span>
            </div>
            <span className="text-sm text-[#64748b]">Live · Today</span>
          </div>
          <div className="p-6 grid grid-cols-2 lg:grid-cols-4 gap-4">
            {stats.map((stat) => (
              <div
                key={stat.label}
                className="rounded-xl bg-slate-50 border border-slate-100 p-4"
              >
                <div className={`w-10 h-10 rounded-lg ${stat.bg} flex items-center justify-center ${stat.color}`}>
                  <stat.icon size={20} />
                </div>
                <p className="mt-3 text-2xl font-bold text-[#0f172a]">{stat.value}</p>
                <p className="text-sm text-[#64748b]">{stat.label}</p>
              </div>
            ))}
          </div>
          <div className="p-6 pt-0">
            <h4 className="font-semibold text-[#0f172a] mb-4">Route analytics</h4>
            <div className="rounded-xl border border-slate-200 overflow-hidden">
              <table className="w-full text-sm">
                <thead>
                  <tr className="bg-slate-50 text-left">
                    <th className="px-4 py-3 font-medium text-[#64748b]">Route</th>
                    <th className="px-4 py-3 font-medium text-[#64748b]">Trips</th>
                    <th className="px-4 py-3 font-medium text-[#64748b]">Revenue</th>
                  </tr>
                </thead>
                <tbody>
                  {routeData.map((row) => (
                    <tr key={row.route} className="border-t border-slate-100 hover:bg-slate-50/50">
                      <td className="px-4 py-3 font-medium text-[#0f172a]">{row.route}</td>
                      <td className="px-4 py-3 text-[#64748b]">{row.trips}</td>
                      <td className="px-4 py-3 text-[#2563eb] font-medium">{row.revenue}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}
