"use client"; import React, { useEffect, useRef, useState } from "react"; import { motion, useSpring, useTransform, useInView } from "framer-motion"; import { Sparkles, ArrowLeft, ArrowRight, Star } from "lucide-react"; // --- Counter Component --- interface CounterProps { value: number; suffix: string; } function Counter({ value, suffix }: CounterProps) { const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-100px" }); const spring = useSpring(0, { stiffness: 100, damping: 30, restDelta: 0.001, }); const display = useTransform(spring, (current: number) => Math.floor(current).toString()); useEffect(() => { if (isInView) { spring.set(value); } }, [isInView, spring, value]); return (
{display} {suffix}
); } // --- MetricCard Component --- function MetricCard({ number, suffix, title, description, delay, }: { number: number; suffix: string; title: string; description: string; delay: number; }) { return (

{title}

{description}

); } // --- Testimonial Data --- interface Testimonial { id: number; text: string; name: string; role: string; avatar: string; } const testimonials: Testimonial[] = [ { id: 1, text: "AGNET gives farmers a case ID and a response clock instead of another informal promise. That changes trust immediately.", name: "Pilot Partner", role: "Rural finance institution", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop", }, { id: 2, text: "Verified farm profiles and harvest data make it easier to find supply, prepare documents, and negotiate transparently.", name: "Export Buyer", role: "Produce sourcing team", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop", }, { id: 3, text: "The field-agent workflow is critical because many farmers need support with documents, eligibility, and follow-up.", name: "Regional Coordinator", role: "Ferghana Valley operations", avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop", }, { id: 4, text: "A shared dashboard for cases, subsidies, and district demand gives institutions the visibility they are missing.", name: "Policy Advisor", role: "Agriculture development program", avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop", }, { id: 5, text: "AGNET's model connects finance, input procurement, and buyer access in one platform instead of another isolated app.", name: "Strategic Advisor", role: "AgriTech and finance", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150&h=150&fit=crop", }, ]; const displayTestimonials: Testimonial[] = [...testimonials, ...testimonials, ...testimonials]; // --- Main Component --- export default function MetricAndTestimonials({ className }: { className?: string }) { const metrics = [ { number: 4, suffix: ".7M+", title: "Underserved farms", description: "Smallholder and dehkan farms need connected finance, identity, input, and market infrastructure.", }, { number: 83, suffix: "%", title: "Without formal finance", description: "AGNET creates traceable applications, eligibility checks, and accountable institution routing.", }, { number: 3, suffix: ".8B", title: "Agriculture TAM", description: "Uzbekistan's financeable agri opportunity spans credit, inputs, equipment, and verified trade.", }, ]; const [currentIndex, setCurrentIndex] = useState(testimonials.length); const [isAutoPlaying, setIsAutoPlaying] = useState(true); const [isTransitioning, setIsTransitioning] = useState(true); const timeoutRef = useRef(null); const [isMounted, setIsMounted] = useState(false); const [carouselWidth, setCarouselWidth] = useState(0); const carouselTrackRef = useRef(null); const [cardWidth, setCardWidth] = useState(660); const gap = 24; const resetTimeout = () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } }; useEffect(() => { const timer = setTimeout(() => { setIsMounted(true); }, 0); return () => clearTimeout(timer); }, []); useEffect(() => { if (!carouselTrackRef.current) return; const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => { if (entries[0]) { setCarouselWidth(entries[0].contentRect.width); } }); observer.observe(carouselTrackRef.current); return () => observer.disconnect(); }, [isMounted]); useEffect(() => { if (isAutoPlaying && isMounted) { resetTimeout(); timeoutRef.current = setTimeout(() => { setIsTransitioning(true); setCurrentIndex((prevIndex) => prevIndex + 1); }, 5000); } return () => resetTimeout(); }, [currentIndex, isAutoPlaying, isMounted]); useEffect(() => { if (currentIndex >= testimonials.length * 2) { const timer = setTimeout(() => { setIsTransitioning(false); setCurrentIndex(currentIndex % testimonials.length + testimonials.length); }, 500); return () => clearTimeout(timer); } if (currentIndex < testimonials.length) { const timer = setTimeout(() => { setIsTransitioning(false); setCurrentIndex(currentIndex + testimonials.length); }, 500); return () => clearTimeout(timer); } }, [currentIndex]); useEffect(() => { const handleResizeWidth = () => { const width = window.innerWidth; if (width < 640) { setCardWidth(width - 48); } else if (width < 1024) { setCardWidth(500); } else { setCardWidth(660); } }; handleResizeWidth(); window.addEventListener("resize", handleResizeWidth); return () => window.removeEventListener("resize", handleResizeWidth); }, []); const handleNext = () => { setIsAutoPlaying(false); setIsTransitioning(true); setCurrentIndex((prev) => prev + 1); }; const handlePrev = () => { setIsAutoPlaying(false); setIsTransitioning(true); setCurrentIndex((prev) => prev - 1); }; return ( <>
{/* Metrics Section */}
Key Metrics {"Connecting farmers, banks, buyers, suppliers, and government programs through one accountable AgriTech operating layer." .split("") .map((char: string, index: number) => ( {char} ))}
{metrics.map((metric, index: number) => ( ))}
{/* Testimonial Section */}
Testimonials

Trusted by partners building rural finance access

AGNET is designed for the institutions, agents, buyers, and farmers needed to modernize agriculture in Uzbekistan.

{displayTestimonials.map((item: Testimonial, idx: number) => { const isActive = idx === currentIndex; return (
{isActive && isMounted && (
)} {isActive && (
)}

{"\u201c" + item.text + "\u201d"}

{item.name}

{item.name}

{item.role}

); })}
); }