import { Link } from 'react-router-dom';
import { Shield, Phone, ArrowRight, CheckCircle2, Sparkles } from 'lucide-react';

const Hero = () => {
  return (
    <section
      id="home"
      className="relative overflow-hidden bg-[#0F172A] pt-24 text-white"
    >
      <div className="absolute inset-0 opacity-20" style={{ backgroundImage: 'linear-gradient(rgba(148,163,184,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.12) 1px, transparent 1px)', backgroundSize: '48px 48px' }} />
      <div className="absolute -right-32 top-20 h-96 w-96 rounded-full bg-[#1E3A8A]/45 blur-3xl" />
      <div className="absolute -left-32 bottom-0 h-80 w-80 rounded-full bg-sky-500/10 blur-3xl" />

      <div className="relative mx-auto grid max-w-7xl items-center gap-16 px-4 py-20 sm:px-6 lg:grid-cols-[1.02fr_.98fr] lg:gap-20 lg:px-8 lg:py-32">
        <div className="min-w-0 fade-in-left lg:pb-4">
          <div className="mb-8 inline-flex items-center gap-2 rounded-full border border-sky-300/25 bg-sky-300/10 px-4 py-2 text-sm font-semibold text-sky-200 shadow-[0_0_24px_rgba(56,189,248,0.08)]">
            <Sparkles size={16} /> Trusted guidance since 2012
          </div>
          <h1 className="max-w-3xl font-[Plus_Jakarta_Sans] text-5xl font-extrabold leading-[1.04] tracking-tight text-white sm:text-6xl lg:text-7xl">
            Coverage that makes <span className="bg-gradient-to-r from-[#38BDF8] to-[#60A5FA] bg-clip-text text-transparent">life feel lighter.</span>
          </h1>
          <p className="mt-8 max-w-xl text-lg leading-relaxed text-slate-300 sm:text-xl">
            Compare practical Medicare, ACA, auto, and family protection options with a licensed specialist who makes the next step clear.
          </p>
          <div className="mt-9 grid max-w-2xl gap-3 sm:grid-cols-2">
            {['Personalized options', 'No-pressure guidance', 'Licensed specialists', 'Fast, free quotes'].map((item) => (
              <div key={item} className="inline-flex min-h-10 items-center gap-2.5 rounded-full border border-white/10 bg-white/[0.06] px-3.5 py-2 text-sm font-semibold text-slate-200">
                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-400 text-[#0F172A]"><CheckCircle2 size={14} strokeWidth={3} /></span>
                <span>{item}</span>
              </div>
            ))}
          </div>
          <div className="mt-10 flex flex-col gap-3 sm:flex-row">
            <Link to="/services" className="group inline-flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[#0EA5E9] to-[#0284C7] px-6 py-3.5 font-bold text-white shadow-[0_10px_30px_-8px_rgba(14,165,233,0.9)] transition duration-200 hover:-translate-y-0.5 hover:shadow-[0_14px_34px_-8px_rgba(56,189,248,0.95)] sm:w-auto">
              Explore coverage <ArrowRight size={18} />
            </Link>
            <a href="tel:+1-659-220-0667" className="inline-flex w-full items-center justify-center gap-3 rounded-xl border border-white/25 bg-white/[0.04] px-6 py-3.5 font-bold text-white backdrop-blur transition hover:border-sky-300/60 hover:bg-white/[0.1] sm:w-auto">
              <span className="flex h-7 w-7 items-center justify-center rounded-full border border-white/20 bg-white/10"><Phone size={15} /></span> (659) 220-0667
            </a>
          </div>
        </div>

        <div className="relative mx-auto min-w-0 w-full max-w-xl fade-in-right lg:pl-8">
          <div className="absolute -inset-6 rounded-[2.5rem] bg-sky-400/10 blur-3xl" />
          <div className="relative overflow-hidden rounded-[2rem] border border-white/10 bg-white/[0.07] p-2 shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)] backdrop-blur-xl">
            <div className="relative overflow-hidden rounded-[1.5rem] border border-white/10 bg-[#1E3A8A]/30">
              <img src="/micheile-henderson-PpZasS086os-unsplash.jpg" alt="Family reviewing their coverage options" className="h-[28rem] w-full object-cover sm:h-[32rem]" loading="eager" decoding="async" />
              <div className="absolute inset-0 bg-gradient-to-t from-[#0F172A] via-[#0F172A]/10 to-transparent" />
              <div className="absolute inset-x-5 bottom-5 rounded-2xl border border-white/10 bg-[#0F172A]/75 p-5 backdrop-blur-md sm:inset-x-7 sm:bottom-7 sm:p-6">
                <p className="text-xs font-semibold uppercase tracking-[.18em] text-sky-300">Your coverage, clarified</p>
                <p className="mt-2 max-w-sm text-xl font-bold leading-snug text-white sm:text-2xl">One conversation can change how prepared you feel.</p>
              </div>
            </div>
          </div>
          <div className="absolute -bottom-7 left-2 max-w-[calc(100%-0.5rem)] flex items-center gap-3 rounded-2xl border border-white/10 bg-[#0F172A]/80 p-3.5 text-white shadow-[0_20px_35px_-12px_rgba(0,0,0,0.65)] backdrop-blur-xl sm:-left-8 sm:p-4">
            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-sky-400/15 text-sky-300"><Shield size={21} /></div>
            <div><p className="text-lg font-extrabold leading-none">100k+</p><p className="mt-1 text-xs font-semibold text-slate-300">families protected</p></div>
          </div>
          <div className="absolute right-2 top-6 max-w-[calc(100%-0.5rem)] rounded-2xl border border-white/10 bg-[#0F172A]/80 px-4 py-3 text-white shadow-[0_20px_35px_-12px_rgba(0,0,0,0.65)] backdrop-blur-xl sm:-right-8">
            <div className="flex items-center gap-1 text-amber-300" aria-label="5-star rating">★★★★★</div>
            <p className="mt-1 text-xs font-bold text-slate-200">Trusted support, nationwide</p>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Hero;