"use client";

import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { HandCoins, MapPinned, ShoppingBasket, Sparkles, Sprout, type LucideIcon } from "lucide-react";
import DashboardFeatureCard from "@/components/farmer/DashboardFeatureCard";

export default function OriginaFinsycFeature({ className }: { className?: string }) {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setIsMounted(true), 0);
    return () => clearTimeout(timer);
  }, []);

  const cards: Array<{ title: string; description: string; icon: LucideIcon; uiSrc: string; width: string }> = [
    {
      title: "AGNET Finance",
      description: "Route farmer loan requests to banks, MFIs, cooperatives, and government schemes with case IDs, SLA clocks, and escalation.",
      icon: HandCoins,
      uiSrc: "/agnet-assets/agnet-finance-dashboard.png",
      width: "676px"
    },
    {
      title: "AGNET Trade",
      description: "Connect farms to vetted buyers, export-ready documentation, price benchmarking, contracts, and logistics coordination.",
      icon: ShoppingBasket,
      uiSrc: "/agnet-assets/agnet-trade-dashboard.png",
      width: "548px"
    },
    {
      title: "AGNET Identity",
      description: "Create trusted farm profiles with eKYC, GIS parcels, land evidence, yield history, and compliance records.",
      icon: MapPinned,
      uiSrc: "/agnet-assets/agnet-identity-dashboard.png",
      width: "548px"
    },
    {
      title: "AGNET Inputs",
      description: "Give farmers transparent seed, fertiliser, equipment, supplier ratings, and digital procurement support.",
      icon: Sprout,
      uiSrc: "/agnet-assets/agnet-inputs-dashboard.png",
      width: "676px"
    }
  ];

  return (
    <>
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Onest:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap" rel="stylesheet" crossOrigin="anonymous" />

      <section className={"w-full bg-[#FFFFFF] py-20 lg:py-32 overflow-hidden " + (className || "")}>
        <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col items-center">

            <div className="flex flex-col items-center">
              <motion.div
                initial={{ y: 20, opacity: 0 }}
                whileInView={{ y: 0, opacity: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
                className="flex items-center gap-2 px-4 py-1.5 rounded-full border border-[#198F38]/10 bg-[#198F38]/5 whitespace-nowrap"
              >
                <Sparkles className="w-4 h-4 text-[#198F38]" />
                <span className="text-[#198F38] text-center font-inter text-base font-normal leading-6 tracking-[-0.3px]">
                  AGNET Platform Modules
                </span>
              </motion.div>

              <motion.h2
                initial={{ y: 24, opacity: 0 }}
                whileInView={{ y: 0, opacity: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 0.8, delay: 0.2 }}
                className="mt-6 w-full max-w-[686px] text-[#042718] text-center font-onest text-[32px] sm:text-[40px] lg:text-[52px] font-semibold leading-tight lg:leading-[58px] tracking-[-1.2px] sm:tracking-[-1.8px]"
              >
                One platform for farmer finance, trade, and digital
                <br className="block sm:hidden" />
                {" "}
                <span className="text-black/40 font-playfair italic font-semibold">
                  inclusion
                </span>
              </motion.h2>

              <motion.p
                initial={{ y: 20, opacity: 0 }}
                whileInView={{ y: 0, opacity: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 0.8, delay: 0.3 }}
                className="mt-3 w-full max-w-[514px] text-[#042718] text-center font-inter text-base sm:text-lg font-normal leading-relaxed sm:leading-7 opacity-80"
              >
                AGNET replaces fragmented brokers, invisible loan queues, and paper farm records with a connected operating layer for Uzbekistan agriculture.
              </motion.p>
            </div>

            <div className="mt-12 lg:mt-16 grid grid-cols-1 lg:grid-cols-2 gap-6 w-full">
              {cards.map((card, idx) => (
                <DashboardFeatureCard
                  key={idx}
                  title={card.title}
                  description={card.description}
                  icon={card.icon}
                  uiSrc={card.uiSrc}
                  isMounted={isMounted}
                  delay={0.2 + idx * 0.1}
                  className="w-full"
                />
              ))}
            </div>

          </div>
        </div>
      </section>
    </>
  );
}