"use client";

import { motion } from "framer-motion";
import Link from "next/link";
import { ArrowRight, Building2 } from "lucide-react";

export default function Hero() {
  return (
    <section className="relative min-h-[90vh] flex items-center overflow-hidden bg-gradient-to-br from-[#0f172a] via-[#1e293b] to-[#0f172a] bg-grid-pattern">
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(37,99,235,0.25),transparent)]" />
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_40%_at_80%_60%,rgba(37,99,235,0.12),transparent)]" />

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-24">
        <div className="grid lg:grid-cols-2 gap-10 lg:gap-14 items-center">
          <div>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
              className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-dark text-[#94a3b8] text-sm font-medium mb-5"
            >
              <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
              Smart Transport Technology
            </motion.div>
            <motion.h1
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.1 }}
              className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight tracking-tight"
            >
              <span className="text-[#2563eb]">Smart Ticketing Solutions for </span>
              <span className="bg-gradient-to-r from-[#60a5fa] to-[#93c5fd] bg-clip-text text-transparent">
                Public Transport
              </span>
            </motion.h1>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.2 }}
              className="mt-6 rounded-xl bg-slate-800/95 border border-slate-600/80 px-5 py-4 shadow-xl max-w-xl"
            >
              <p className="text-base sm:text-lg text-slate-100 leading-relaxed">
                Sasium builds next-generation ticketing systems using Android POS
                devices, CNIC verification, and smart analytics.
              </p>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.3 }}
              className="mt-10 flex flex-col sm:flex-row gap-4"
            >
              <Link
                href="#contact"
                className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-[#2563eb] text-white font-semibold rounded-xl hover:bg-[#1d4ed8] transition-all shadow-xl shadow-[#2563eb]/30 hover:shadow-[#2563eb]/40"
              >
                Request Demo
                <ArrowRight size={20} />
              </Link>
              <Link
                href="#contact"
                className="inline-flex items-center justify-center gap-2 px-8 py-4 glass border border-white/20 text-white font-semibold rounded-xl hover:bg-white/10 transition-all"
              >
                <Building2 size={20} />
                Contact Government Partnerships
              </Link>
            </motion.div>
          </div>

          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="relative flex justify-center lg:justify-end"
          >
            <div className="relative">
              <div className="absolute -inset-4 bg-gradient-to-r from-[#2563eb]/30 to-[#3b82f6]/20 rounded-3xl blur-2xl" />
              <div className="relative bg-gradient-to-b from-slate-800 to-slate-900 rounded-2xl p-8 shadow-2xl border border-slate-700/50">
                <div className="w-64 h-80 sm:w-72 sm:h-96 rounded-xl bg-slate-800/80 border-2 border-slate-600/50 flex flex-col overflow-hidden shadow-inner">
                  <div className="h-10 bg-slate-700 flex items-center justify-center border-b border-slate-600">
                    <span className="text-slate-300 text-xs font-medium">Sasium POS</span>
                  </div>
                  <div className="flex-1 flex items-center justify-center p-4 bg-slate-900/50">
                    <div className="w-full aspect-[3/4] max-h-56 rounded-lg bg-gradient-to-br from-slate-700 to-slate-800 border border-slate-600 flex items-center justify-center">
                      <div className="text-center text-slate-400">
                        <div className="w-16 h-16 mx-auto mb-2 rounded-full border-2 border-dashed border-slate-500 flex items-center justify-center">
                          <span className="text-2xl">📱</span>
                        </div>
                        <p className="text-xs">Android Handheld</p>
                        <p className="text-xs font-semibold text-[#60a5fa]">80mm Printer</p>
                      </div>
                    </div>
                  </div>
                  <div className="h-12 bg-slate-700 flex items-center justify-center gap-2 border-t border-slate-600">
                    <div className="w-8 h-6 rounded bg-slate-600" />
                    <span className="text-[10px] text-slate-400">MH93 · Sasium</span>
                  </div>
                </div>
                <p className="text-center text-slate-400 text-sm mt-4 font-medium">Sasium · Smart Ticketing</p>
              </div>
            </div>
          </motion.div>
        </div>
      </div>

      <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-[#f8fafc] to-transparent pointer-events-none" />
    </section>
  );
}
