"use client";

import React from "react";
import { motion } from "framer-motion";
import {
  ArrowUpRight,
  Sparkles,
  MapPin,
  CreditCard,
  BrainCircuit,
  Landmark,
  ShieldCheck,
  CalendarCheck,
  Users,
  FileCheck,
  Sprout,
} from "lucide-react";
import Link from "next/link";

const fadeUp = {
  hidden: { y: 30, opacity: 0 },
  visible: (i: number) => ({
    y: 0,
    opacity: 1,
    transition: { delay: i * 0.1, duration: 0.6, ease: [0.21, 0.45, 0.32, 0.9] as const },
  }),
};

const eligibility = [
  {
    icon: MapPin,
    title: "Target Regions",
    description:
      "Districts in Tashkent, Fergana, and Samarkand regions selected for initial rollout.",
  },
  {
    icon: Sprout,
    title: "Minimum Farmland",
    description: "Farmers operating at least 0.5 hectares of active agricultural land.",
  },
  {
    icon: FileCheck,
    title: "Valid National ID",
    description:
      "A valid Uzbekistan national identification document for eKYC verification.",
  },
];

const timeline = [
  {
    quarter: "Q3 2026",
    title: "Onboarding",
    description:
      "Farmer registration, eKYC, GIS parcel mapping, and digital farm profile creation across pilot districts.",
  },
  {
    quarter: "Q4 2026",
    title: "Credit Scoring",
    description:
      "ML-based credit scoring using farm data, satellite imagery, yield history, and alternative data signals.",
  },
  {
    quarter: "Q1 2027",
    title: "Disbursement",
    description:
      "First loan disbursements routed through partner banks and MFIs with SLA tracking and case management.",
  },
];

const benefits = [
  {
    icon: CreditCard,
    title: "Digital Farm Identity",
    description:
      "Verified profile with eKYC, GIS coordinates, land documentation, and crop history — your passport to formal finance.",
  },
  {
    icon: BrainCircuit,
    title: "ML Credit Scoring",
    description:
      "Get scored using satellite data, yield records, and alternative signals — no collateral-first gatekeeping.",
  },
  {
    icon: Landmark,
    title: "Bank Routing",
    description:
      "Your application is routed to the best-fit lender — banks, MFIs, cooperatives, or government schemes — automatically.",
  },
  {
    icon: ShieldCheck,
    title: "SLA Transparency",
    description:
      "Track your application status in real time with case IDs, SLA clocks, and escalation paths visible to you.",
  },
];

export default function PilotPage() {
  return (
    <main className="min-h-screen bg-white">
      {/* Hero */}
      <section className="relative w-full overflow-hidden bg-gradient-to-b from-[#f0f9f4] to-white pt-24 pb-20 lg:pt-32 lg:pb-28">
        <div className="absolute inset-0 pointer-events-none opacity-30">
          <div className="absolute top-0 left-1/4 w-[500px] h-[500px] rounded-full bg-[#198F38]/10 blur-[120px]" />
          <div className="absolute bottom-0 right-1/4 w-[400px] h-[400px] rounded-full bg-[#198F38]/5 blur-[100px]" />
        </div>

        <div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <motion.div
            initial="hidden"
            animate="visible"
            custom={0}
            variants={fadeUp}
            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-[#198F38]/15 bg-[#198F38]/5 mb-6"
          >
            <Sparkles className="w-4 h-4 text-[#198F38]" />
            <span className="font-inter text-sm font-medium text-[#198F38]">
              District Pilot Program
            </span>
          </motion.div>

          <motion.h1
            initial="hidden"
            animate="visible"
            custom={1}
            variants={fadeUp}
            className="font-onest text-4xl sm:text-5xl lg:text-6xl font-semibold leading-tight tracking-tight text-[#042718]"
          >
            Join the AGNET{" "}
            <span className="font-playfair italic text-[#042718]/40">
              Pilot
            </span>{" "}
            Program
          </motion.h1>

          <motion.p
            initial="hidden"
            animate="visible"
            custom={2}
            variants={fadeUp}
            className="mt-5 max-w-2xl mx-auto font-inter text-lg lg:text-xl text-[#042718]/70 leading-relaxed"
          >
            We&apos;re connecting Uzbekistan&apos;s smallholder farmers to formal
            finance through digital identity, ML credit scoring, and transparent
            loan routing — starting with three pilot regions.
          </motion.p>

          <motion.div
            initial="hidden"
            animate="visible"
            custom={3}
            variants={fadeUp}
          >
            <Link
              href="/farmers/apply"
              className="inline-flex items-center gap-3 mt-8 px-6 py-3.5 rounded-full bg-[#042718] text-white font-inter font-medium text-base hover:bg-[#042718]/90 transition-colors"
            >
              Apply for the Pilot
              <ArrowUpRight className="w-4 h-4" />
            </Link>
          </motion.div>
        </div>
      </section>

      {/* Eligibility */}
      <section className="w-full py-20 lg:py-28 bg-white">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            custom={0}
            variants={fadeUp}
            className="text-center"
          >
            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-[#198F38]/15 bg-[#198F38]/5 mb-4">
              <Users className="w-4 h-4 text-[#198F38]" />
              <span className="font-inter text-sm font-medium text-[#198F38]">
                Who Can Participate
              </span>
            </div>
            <h2 className="font-onest text-3xl sm:text-4xl lg:text-[44px] font-semibold tracking-tight text-[#042718]">
              Eligibility Criteria
            </h2>
          </motion.div>

          <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
            {eligibility.map((item, idx) => (
              <motion.div
                key={item.title}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                custom={idx + 1}
                variants={fadeUp}
                className="rounded-2xl border border-[#042718]/8 bg-white p-6 lg:p-8 hover:border-[#198F38]/20 hover:shadow-lg transition-all duration-300"
              >
                <div className="w-11 h-11 rounded-xl bg-[#198F38]/5 border border-[#198F38]/15 flex items-center justify-center mb-5">
                  <item.icon className="w-5 h-5 text-[#198F38]" />
                </div>
                <h3 className="font-onest text-lg font-semibold text-[#042718]">
                  {item.title}
                </h3>
                <p className="mt-2 font-inter text-[15px] leading-relaxed text-[#042718]/65">
                  {item.description}
                </p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="w-full py-20 lg:py-28 bg-[#FAFCFB]">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            custom={0}
            variants={fadeUp}
            className="text-center mb-14"
          >
            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-[#198F38]/15 bg-[#198F38]/5 mb-4">
              <CalendarCheck className="w-4 h-4 text-[#198F38]" />
              <span className="font-inter text-sm font-medium text-[#198F38]">
                Pilot Phases
              </span>
            </div>
            <h2 className="font-onest text-3xl sm:text-4xl lg:text-[44px] font-semibold tracking-tight text-[#042718]">
              Program Timeline
            </h2>
          </motion.div>

          <div className="relative">
            <div className="hidden md:block absolute left-1/2 top-0 bottom-0 w-px bg-gradient-to-b from-[#198F38]/30 via-[#198F38]/15 to-transparent" />

            <div className="space-y-10 md:space-y-16">
              {timeline.map((phase, idx) => (
                <motion.div
                  key={phase.quarter}
                  initial="hidden"
                  whileInView="visible"
                  viewport={{ once: true }}
                  custom={idx}
                  variants={fadeUp}
                  className={`relative flex flex-col md:flex-row items-start gap-6 md:gap-12 ${
                    idx % 2 === 1 ? "md:flex-row-reverse" : ""
                  }`}
                >
                  <div className="md:w-1/2 md:text-right">
                    {idx % 2 === 0 && (
                      <div className="rounded-2xl border border-[#042718]/8 bg-white p-6 lg:p-8 hover:shadow-lg transition-shadow duration-300">
                        <span className="inline-block px-3 py-1 rounded-full bg-[#198F38]/8 text-[#198F38] font-inter text-sm font-semibold mb-3">
                          {phase.quarter}
                        </span>
                        <h3 className="font-onest text-xl font-semibold text-[#042718]">
                          {phase.title}
                        </h3>
                        <p className="mt-2 font-inter text-[15px] leading-relaxed text-[#042718]/65">
                          {phase.description}
                        </p>
                      </div>
                    )}
                  </div>

                  <div className="hidden md:flex absolute left-1/2 -translate-x-1/2 w-4 h-4 rounded-full bg-[#198F38] border-4 border-white shadow-md z-10" />

                  <div className="md:w-1/2">
                    {idx % 2 === 1 && (
                      <div className="rounded-2xl border border-[#042718]/8 bg-white p-6 lg:p-8 hover:shadow-lg transition-shadow duration-300">
                        <span className="inline-block px-3 py-1 rounded-full bg-[#198F38]/8 text-[#198F38] font-inter text-sm font-semibold mb-3">
                          {phase.quarter}
                        </span>
                        <h3 className="font-onest text-xl font-semibold text-[#042718]">
                          {phase.title}
                        </h3>
                        <p className="mt-2 font-inter text-[15px] leading-relaxed text-[#042718]/65">
                          {phase.description}
                        </p>
                      </div>
                    )}
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Benefits */}
      <section className="w-full py-20 lg:py-28 bg-white">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            custom={0}
            variants={fadeUp}
            className="text-center mb-14"
          >
            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-[#198F38]/15 bg-[#198F38]/5 mb-4">
              <Sparkles className="w-4 h-4 text-[#198F38]" />
              <span className="font-inter text-sm font-medium text-[#198F38]">
                What You Get
              </span>
            </div>
            <h2 className="font-onest text-3xl sm:text-4xl lg:text-[44px] font-semibold tracking-tight text-[#042718]">
              Pilot Benefits
            </h2>
          </motion.div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
            {benefits.map((item, idx) => (
              <motion.div
                key={item.title}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                custom={idx + 1}
                variants={fadeUp}
                className="group rounded-2xl border border-[#042718]/8 bg-white p-6 lg:p-8 hover:border-[#198F38]/20 hover:shadow-lg transition-all duration-300"
              >
                <div className="w-11 h-11 rounded-xl bg-[#198F38]/5 border border-[#198F38]/15 flex items-center justify-center mb-5 group-hover:bg-[#198F38]/10 transition-colors">
                  <item.icon className="w-5 h-5 text-[#198F38]" />
                </div>
                <h3 className="font-onest text-lg font-semibold text-[#042718]">
                  {item.title}
                </h3>
                <p className="mt-2 font-inter text-[15px] leading-relaxed text-[#042718]/65">
                  {item.description}
                </p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="w-full py-20 lg:py-28 bg-gradient-to-t from-[#f0f9f4] to-white">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            custom={0}
            variants={fadeUp}
          >
            <h2 className="font-onest text-3xl sm:text-4xl lg:text-5xl font-semibold tracking-tight text-[#042718]">
              Ready to join the{" "}
              <span className="font-playfair italic text-[#042718]/40">
                pilot
              </span>
              ?
            </h2>
            <p className="mt-4 font-inter text-lg text-[#042718]/65 leading-relaxed">
              Secure your spot in the AGNET district pilot. Registration is
              open for farmers in Tashkent, Fergana, and Samarkand regions.
            </p>
            <Link
              href="/farmers/apply"
              className="inline-flex items-center gap-3 mt-8 px-7 py-4 rounded-full bg-[#042718] text-white font-inter font-medium text-base hover:bg-[#042718]/90 transition-colors"
            >
              Apply for the Pilot
              <ArrowUpRight className="w-4 h-4" />
            </Link>
          </motion.div>
        </div>
      </section>
    </main>
  );
}