import { Link } from "react-router-dom";
import { ArrowRight, Search, CheckCircle2, BookOpen, Bell, ShieldCheck, Sparkles, Users, GraduationCap, IndianRupee, Globe } from "lucide-react";
import { SiteLayout } from "@/components/layout/SiteLayout";
import { Button } from "@/components/ui/button";
import { SEO } from "@/components/SEO";
import { ScholarshipCard } from "@/components/ScholarshipCard";
import { scholarships } from "@/data/scholarships";

const Home = () => {
  const featured = scholarships.filter((s) => s.highlight).slice(0, 3);

  return (
    <SiteLayout>
      <SEO
        title="ScholarMate – NSP Scholarship Assistant 2026 for Indian Students"
        description="Discover NSP scholarships you qualify for, check eligibility instantly, follow a step-by-step guide, and never miss a deadline. Built for Indian students, 2026."
        jsonLd={{
          "@context": "https://schema.org",
          "@type": "WebApplication",
          name: "ScholarMate",
          applicationCategory: "EducationalApplication",
          operatingSystem: "Web",
          offers: { "@type": "Offer", price: "0", priceCurrency: "INR" },
        }}
      />

      {/* HERO */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-mesh" />
        <div className="container relative pt-12 pb-20 md:pt-20 md:pb-28">
          <div className="mx-auto max-w-3xl text-center space-y-6">
            <div className="inline-flex items-center gap-2 rounded-full border border-border bg-background/80 backdrop-blur px-4 py-1.5 text-xs font-medium animate-fade-up">
              <span className="flex h-2 w-2 rounded-full bg-success animate-pulse" />
              NSP 2026 applications now open • Deadlines extended for many schemes
            </div>
            <h1 className="font-display text-4xl md:text-6xl font-extrabold tracking-tight text-balance animate-fade-up [animation-delay:60ms]">
              Your scholarship journey,
              <span className="block bg-gradient-to-r from-accent to-primary-glow bg-clip-text text-transparent">made simple.</span>
            </h1>
            <p className="mx-auto max-w-2xl text-base md:text-lg text-muted-foreground text-balance animate-fade-up [animation-delay:120ms]">
              ScholarMate helps Indian students discover NSP scholarships, check eligibility in seconds, follow a clear step-by-step guide, and stay ahead of every deadline.
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-3 pt-2 animate-fade-up [animation-delay:180ms]">
              <Button variant="hero" size="xl" asChild>
                <Link to="/finder">Find my scholarships <ArrowRight className="h-4 w-4" /></Link>
              </Button>
              <Button variant="outline" size="xl" asChild>
                <Link to="/guide">See the NSP Guide</Link>
              </Button>
            </div>
            <div className="flex flex-wrap items-center justify-center gap-x-8 gap-y-3 pt-6 text-xs text-muted-foreground animate-fade-up [animation-delay:240ms]">
              <span className="flex items-center gap-1.5"><ShieldCheck className="h-4 w-4 text-success" /> No NSP password ever</span>
              <span className="flex items-center gap-1.5"><Globe className="h-4 w-4 text-primary" /> English • हिंदी • اردو</span>
              <span className="flex items-center gap-1.5"><Users className="h-4 w-4 text-accent" /> Free for students</span>
            </div>
          </div>
        </div>
      </section>

      {/* BENTO FEATURES */}
      <section className="container -mt-8 relative z-10">
        <div className="grid gap-4 md:grid-cols-3 md:auto-rows-[180px]">
          <Link to="/finder" className="group md:row-span-2 rounded-3xl bg-hero p-6 md:p-8 text-primary-foreground shadow-navy relative overflow-hidden">
            <div className="absolute -right-10 -top-10 h-48 w-48 rounded-full bg-accent/20 blur-3xl group-hover:bg-accent/30 transition-colors" />
            <div className="relative h-full flex flex-col">
              <Search className="h-8 w-8 text-accent mb-4" />
              <h3 className="font-display text-2xl font-bold mb-2">Scholarship Finder</h3>
              <p className="text-sm opacity-80 mb-6">Tell us about you. We'll show every NSP scheme you qualify for, ranked by match.</p>
              <span className="mt-auto inline-flex items-center gap-1 text-sm font-semibold text-accent group-hover:gap-2 transition-all">Open finder <ArrowRight className="h-4 w-4" /></span>
            </div>
          </Link>

          <Link to="/eligibility" className="group rounded-3xl border border-border bg-card-grad p-6 shadow-soft hover:shadow-elevated transition-all">
            <CheckCircle2 className="h-7 w-7 text-success mb-3" />
            <h3 className="font-display text-lg font-bold mb-1">Eligibility Checker</h3>
            <p className="text-sm text-muted-foreground">Get a clear eligible / likely / not eligible answer with reasons.</p>
          </Link>

          <Link to="/guide" className="group rounded-3xl border border-border bg-card-grad p-6 shadow-soft hover:shadow-elevated transition-all">
            <BookOpen className="h-7 w-7 text-primary mb-3" />
            <h3 className="font-display text-lg font-bold mb-1">8-Step NSP Guide</h3>
            <p className="text-sm text-muted-foreground">From OTR to payment — every step with checklists and common mistakes.</p>
          </Link>

          <Link to="/alerts" className="group rounded-3xl border border-border bg-accent-soft p-6 shadow-soft hover:shadow-elevated transition-all">
            <Bell className="h-7 w-7 text-accent mb-3" />
            <h3 className="font-display text-lg font-bold mb-1">Alerts Center</h3>
            <p className="text-sm text-muted-foreground">Deadlines, extensions, payment cycles, renewal windows.</p>
          </Link>

          <Link to="/faq" className="group rounded-3xl border border-border bg-card-grad p-6 shadow-soft hover:shadow-elevated transition-all">
            <Sparkles className="h-7 w-7 text-primary-glow mb-3" />
            <h3 className="font-display text-lg font-bold mb-1">FAQ & Knowledge</h3>
            <p className="text-sm text-muted-foreground">Why payments fail, fixing rejections, OTR doubts — answered plainly.</p>
          </Link>
        </div>
      </section>

      {/* STATS */}
      <section className="container py-16 md:py-24">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
          {[
            { icon: GraduationCap, k: "100+", v: "NSP schemes tracked" },
            { icon: IndianRupee, k: "₹2L+", v: "Max annual benefit" },
            { icon: Users, k: "All", v: "States & UTs" },
            { icon: ShieldCheck, k: "100%", v: "Free, no password" },
          ].map(({ icon: Icon, k, v }) => (
            <div key={k} className="rounded-2xl border border-border bg-card p-5 text-center">
              <Icon className="h-6 w-6 mx-auto mb-2 text-accent" />
              <div className="font-display text-2xl md:text-3xl font-bold">{k}</div>
              <div className="text-xs text-muted-foreground mt-1">{v}</div>
            </div>
          ))}
        </div>
      </section>

      {/* FEATURED SCHEMES */}
      <section className="container py-12">
        <div className="flex items-end justify-between mb-8">
          <div>
            <p className="text-xs font-semibold uppercase tracking-wider text-accent mb-2">Popular this season</p>
            <h2 className="font-display text-3xl md:text-4xl font-bold">Scholarships students apply for most</h2>
          </div>
          <Button variant="ghost" asChild className="hidden md:flex">
            <Link to="/finder">View all <ArrowRight className="h-4 w-4" /></Link>
          </Button>
        </div>
        <div className="grid gap-5 md:grid-cols-3">
          {featured.map((s) => <ScholarshipCard key={s.id} s={s} />)}
        </div>
      </section>

      {/* CTA */}
      <section className="container py-16">
        <div className="rounded-3xl bg-hero p-8 md:p-14 text-center text-primary-foreground relative overflow-hidden">
          <div className="absolute inset-0 bg-mesh opacity-50" />
          <div className="relative max-w-2xl mx-auto space-y-5">
            <h2 className="font-display text-3xl md:text-4xl font-bold text-balance">Don't lose a scholarship to a small mistake.</h2>
            <p className="opacity-80 text-balance">Get a personalized list of schemes, a clear application checklist, and reminders for every deadline.</p>
            <Button variant="hero" size="xl" asChild>
              <Link to="/finder">Start now — it's free <ArrowRight className="h-4 w-4" /></Link>
            </Button>
          </div>
        </div>
      </section>
    </SiteLayout>
  );
};

export default Home;