"use client";

import { useRef, useState } from "react";
import Link from "next/link";
import { Sprout, Grape, Beef, Egg, Hotel, Footprints, ChevronDown, Rabbit, Bird } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { motion, useScroll, useTransform } from "framer-motion";
import { OptimizedImage } from "@/components/optimized-image";
import type { LucideIcon } from "lucide-react";

interface Step {
  image: string;
  number: number;
  title: string;
  description: string;
  icon: LucideIcon;
  bgColor: string;
  borderColor: string;
  iconColor: string;
}

const steps: Step[] = [
  {
    number: 1,
    title: "Greenhouse Facilities",
    image: '/greenhouse.png',
    description:
      "We have modern greenhouses poised to produce fresh vegetables all year round, including tomatoes, peppers, coriander, lettuce, cabbage, kale, and cummins. Guests and the general public enjoy access to fresh vegetables and spices throughout the year.",
    icon: Sprout,
    bgColor: "bg-green-50",
    borderColor: "border-green-100",
    iconColor: "text-green-400",
  },

  // {
  //   number: 2,
  //   title: "Grapevine Orchard",
  //   image: '/placeholder.svg',
  //   description:
  //     "Nestled on our farm grounds is a grapevine and fruit orchard with exotic fruits offering sweet freshness to both guests and the general public.",
  //   icon: Grape,
  //   bgColor: "bg-purple-50",
  //   borderColor: "border-purple-100",
  //   iconColor: "text-purple-400",
  // },
  {
    number: 2,
    title: "Livestock",
    image: '/livestock.jpg',
    description:
      "We have one of the largest herds of exotic dairy cows in Northern Nigeria, with over 160 cows providing fresh milk. Our livestock also includes exotic rams, sheep, and goats for guests and public consumption.",
    icon: Rabbit,
    bgColor: "bg-amber-50",
    borderColor: "border-amber-100",
    iconColor: "text-amber-400",
  },
  {
    number: 3,
    title: "Poultry",
    image: '/poultry.jpg',
    description:
      "Our large flock of laying birds thrives in eco-friendly, modern facilities with an automated battery cage system, ensuring farm-fresh eggs for our customers.",
    icon: Egg,
    bgColor: "bg-yellow-50",
    borderColor: "border-yellow-100",
    iconColor: "text-yellow-400",
  },
  {
    number: 4,
    title: "Hospitality",
    image: '/room3.jpg',
    description:
      "We offer comfortable accommodations and recreational facilities, providing guests with a unique opportunity to connect with nature and enjoy a relaxing stay in our specially designed chalets.",
    icon: Hotel,
    bgColor: "bg-blue-50",
    borderColor: "border-blue-100",
    iconColor: "text-blue-400",
  },
  {
    number: 5,
    title: "Exotic Animals",
    image: '/exotic.jpg',
    description:
      "Our wildlife section includes a wide array of exotic animals such as ostriches, white peacocks, Indian and Chinese geese, caracats, monkeys, antelopes, camels, and horses, perfect for nature lovers.",
    icon: Bird,
    bgColor: "bg-rose-50",
    borderColor: "border-rose-100",
    iconColor: "text-rose-400",
  },
];


export default function BusinessUnit() {

     const containerRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start center", "end center"],
  });

  // Transform vertical scroll to horizontal movement
  // Each step is 50vw wide, so we need to move by 50% per step
  const x = useTransform(
    scrollYProgress,
    [0, 0.15, 0.85, 1],
    ["0%", "0%", `-${(steps.length - 2) * 80}%`, `-${(steps.length - 2) * 80}%`]
  );

  // Progress line animation (0 to 100% of total line width)
  const lineProgress = useTransform(scrollYProgress, [0.15, 0.85], ["0%", "100%"]);

  return (
    <div className="mx-auto max-w-6xl">
          <div
            ref={containerRef}
            className="relative hidden md:block"
            style={{ height: `${steps.length * 70}vh` }}
          >
            <div className="sticky top-0 h-screen flex items-center overflow-hidden">
              <div className="w-full px-4 md:px-16">
                <h2 className="mb-8 text-left text-4xl font-bold text-[#202D57]">
                  Our Business Units
                </h2>

                {/* Container for steps and lines */}
                <div className="relative">
                  {/* Static connecting line (background) */}
                  <div className="absolute top-8 left-8 right-0 h-0.5 bg-primary/20 z-0"
                       style={{ width: `calc(${(steps.length - 1) * 50}vw - 8rem)` }} />

                  {/* Animated progress line */}
                  <motion.div
                    className="absolute top-8 left-8 h-0.5 bg-primary z-0"
                    style={{
                      width: lineProgress,
                      maxWidth: `calc(${(steps.length - 1) * 50}vw - 8rem)`
                    }}
                  />

                  {/* Steps */}
                  <motion.div style={{ x }} className="flex">
                    {steps.map((step, index) => {
                      const Icon = step.icon;
                      return (
                        <div
                          key={step.number}
                          className="flex items-start justify-start relative"
                          style={{ minWidth: '50vw', maxWidth: '50vw' }}
                        >
                          <div className="w-full pr-8">
                            <div className="flex flex-col items-start text-left space-y-6">
                              {/* Step Icon */}
                              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary relative z-10 shadow-lg">
                                <Icon strokeWidth={1.5} className="w-8 h-8 text-white" />
                              </div>

                              {/* Step Content */}
                              <div className="max-w-md h-[280px] flex flex-col">
                                <div>
                                  <h3 className="mb-2 text-2xl font-bold">{step.title}</h3>
                                  <p className="text-sm text-muted-foreground leading-relaxed">
                                    {step.description}
                                  </p>
                                </div>

                                <div className="relative mt-4 w-full flex-1 rounded-md overflow-hidden">
                                  <OptimizedImage
                                    src={step.image || "/placeholder.svg"}
                                    alt={step.title}
                                    fill
                                    className="object-cover"
                                  />
                                </div>
                              </div>

                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </motion.div>
                </div>
              </div>
            </div>
          </div>


          <div className="block max-w-6xl px-4 md:px-16 md:hidden mb-12">
            <h2 className="mb-10 text-left text-4xl font-bold">
              Our Business Units
            </h2>

            <Accordion type="single" collapsible defaultValue="item-1" className="space-y-4">
              {steps.map((step, index) => {
                const Icon = step.icon;
                return (
                  <Card key={step.number} className={`border bg-white border-gray-100 shadow-none p-1`}>
                    <AccordionItem value={`item-${step.number}`} className="border-none p-0">
                      <AccordionTrigger className="px-4 h-auto hover:no-underline p-2">
                        <div className="flex items-center gap-3 flex-1">
                          <div className={`flex h-10 w-10 items-center justify-center rounded-full ${step.bgColor} border-2 ${step.borderColor}`}>
                            <Icon className={`w-5 h-5 ${step.iconColor}`} />
                          </div>
                          <h1 className="text-sm font-semibold text-left">{step.title}</h1>
                        </div>
                      </AccordionTrigger>
                      <AccordionContent className="px-3 pb-3">
                        <div className="space-y-4">
                          <p className="text-sm text-muted-foreground leading-relaxed">
                            {step.description}
                          </p>
                          <div className="relative w-full h-48 rounded-md overflow-hidden">
                            <OptimizedImage
                              src={step.image || "/placeholder.svg"}
                              alt={step.title}
                              fill
                              className="object-cover"
                            />
                          </div>
                        </div>
                      </AccordionContent>
                    </AccordionItem>
                  </Card>
                );
              })}
            </Accordion>
          </div>

      
    </div>
  )
}