"use client";

import { Header } from "@/components/header";
import { Footer } from "@/components/footer";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { VideoPlayer } from "@/components/video-player";
import { TestimonialsSection } from "@/components/testimonials-section";
import {
  BedDouble,
  Users,
  Wifi,
} from "lucide-react";
import { OptimizedImage } from "@/components/optimized-image";
import Link from "next/link";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";

export default function HomepageClient() {
  const experiences = [
    {
      emoji: "/table.jpg",
      title: "Farm-to-Table Dining",
      description: "Enjoy fresh meals sourced directly from our farm",
      color: "bg-green-50",
    },
    {
      emoji: "/luxury.jpg",
      title: "Luxury Facilities",
      description: "Modern amenities, conference halls, and leisure activities",
      color: "bg-green-50",
    },
    {
      emoji: "/farm.png",
      title: "Farm Experiences",
      description: "Explore farm tours, horse riding, and fishing adventures",
      color: "bg-green-50",
    },
    {
      emoji: "/gateway.png",
      title: "Peaceful Getaway",
      description: "Relax, unwind, and explore in one serene place",
      color: "bg-green-50",
    },
  ];

  const rooms = [
    {
      name: "Deluxe Suite",
      description: "Spacious suites with modern amenities and comfort",
      amenities: [
        { icon: BedDouble, label: "King Bed" },
        { icon: Users, label: "Farm View" },
        { icon: Wifi, label: "WiFi" },
      ],
      image: "/luxury-hotel-suite.png",
    },
    {
      name: "Standard Room",
      description: "Cozy and affordable, ideal for individuals and couples",
      amenities: [
        { icon: BedDouble, label: "Queen Bed" },
        { icon: Users, label: "Farm View" },
        { icon: Wifi, label: "WiFi" },
      ],
      image: "/cozy-hotel-room-wooden-interior.jpg",
    },
    {
      name: "Family Apartment",
      description: "Perfect for families or group stays with multiple bedrooms",
      amenities: [
        { icon: BedDouble, label: "4 Bedrooms" },
        { icon: Users, label: "Farm View" },
        { icon: Wifi, label: "Max 8 pax" },
      ],
      image: "/modern-family-apartment-interior.jpg",
    },
  ];

  const testimonials = [
    {
      quote:
        "The rooms were clean and luxurious, but what really made our stay was the farm-to-table dining experience. Fresh food like I've had in ages.",
      author: "John, Lagos",
    },
    {
      quote:
        "Alegre Farms is the perfect weekend getaway. My kids loved the farm tour while I enjoyed relaxing by the pool. We'll definitely be back!",
      author: "Chioma, Abuja",
    },
    {
      quote:
        "I booked the conference hall for my company's retreat, and everything went smoothly. The booking process was easy, and the staff were amazing.",
      author: "Fatima, Kaduna",
    },
    {
      quote:
        "An amazing escape from the city! The farm activities were educational and fun, and the accommodations were top-notch.",
      author: "Tunde, Abuja",
    },
    {
      quote:
        "The perfect blend of nature and luxury. We enjoyed horseback riding in the morning and gourmet dining in the evening.",
      author: "Sarah, Lagos",
    },
    {
      quote:
        "Outstanding hospitality and beautiful surroundings. Our family anniversary celebration here was truly memorable.",
      author: "Ibrahim, Kano",
    },
  ];

  const faqs = [
    {
      question: "How do I make a booking?",
      answer:
        "You can book directly through our website. Select your preferred service, choose your dates, and complete payment via Paystack.",
    },
    {
      question: "Can I visit without staying overnight?",
      answer:
        "Yes! We offer day passes for those who want to experience our farm tours, dining, and activities without booking accommodation.",
    },
    {
      question: "Do you allow corporate retreats and events?",
      answer:
        "We have conference facilities and can accommodate corporate groups. Contact us for custom packages.",
    },
    {
      question: "Is food included in the room booking?",
      answer:
        "Breakfast is complimentary with all room bookings. Lunch and dinner can be added or ordered separately from our farm-to-table restaurant.",
    },
    {
      question: "Can children participate in farm activities?",
      answer:
        "Yes! Our farm experiences are family-friendly and children love interacting with animals and learning about farming.",
    },
    {
      question: "Do you offer discounts for groups?",
      answer:
        "Yes, we offer special rates for groups of 10 or more. Contact us directly for a custom quote.",
    },
    {
      question: "Contact Us",
      answer:
        "Reach us at info@alegreferms.com or call +234 XXX XXX XXXX for inquiries.",
    },
  ];

  return (
    <div className="min-h-screen">
      <Header />

      {/* Hero Section */}
      <section className="relative h-[calc(100vh-2rem)] min-h-[600px] max-h-[860px] pt-8">
        <div className="absolute inset-0">
          <OptimizedImage
            src="/bannerimage.png"
            alt="Farm Resort Landscape with barns"
            fill
            className="object-cover object-center"
            priority
          />
        </div>

        <div className="relative container mx-auto px-4 lg:px-8 h-full flex items-center justify-center pt-3">
          <div className="text-center max-w-6xl space-y-2">
            <h1
              className="text-4xl md:text-[2.9rem]  font-bold leading-tight text-balance -mt-32"
              style={{ color: "#0D8B4D" }}
            >
              Where Nature Meets Luxury — Experience <br />
              Farm Life with Resort Comfort.
            </h1>
            <p className="text-sm md:text-[0.82rem] font-medium text-gray-600 max-w-3xl mx-auto text-pretty leading-relaxed">
              A holiday destination in Bwari offering premium stays, dining, and
              unforgettable farm experiences.
            </p>
            <div className="flex flex-wrap items-center justify-center gap-4 pt-2">
              <Button
                asChild
                size="sm"
                className="rounded-full px-8 py-5 text-base font-semibold hover:opacity-90 transition-opacity"
                style={{
                  backgroundColor: "#0D8B4D",
                  color: "white",
                  borderWidth: "0.5px",
                }}
              >
                <Link href="/rooms" className="text-[0.8rem]">
                  Book A Room
                </Link>
              </Button>
              <Button
                asChild
                size="sm"
                className="rounded-full px-8 py-5 text-base font-semibold hover:opacity-90 transition-opacity"
                style={{
                  backgroundColor: "#F59E0B",
                  color: "white",
                  borderWidth: "0.5px",
                }}
              >
                <Link href="/facilities#experiences" className="text-[0.8rem]">
                  Book Experience
                </Link>
              </Button>
              <Button
                asChild
                size="sm"
                variant="outline"
                className="rounded-full px-8 py-5 text-base font-semibold border-2 bg-white/90 hover:bg-white transition-colors"
                style={{
                  borderColor: "#107823",
                  color: "#0D8B4D",
                  borderWidth: "0.5px",
                }}
              >
                <Link href="/facilities" className="text-[0.8rem]">
                  Explore Facilities
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Experience Alegre Farms - Floating Section */}
      <section className="relative -mt-25 md:-mt-10 z-10 pb-16">
        <div className="max-w-6xl mx-auto px-3 md:px-6">
          <div className="bg-white rounded-lg shadow-sm p-4 lg:p-6">
            <div className="grid grid-cols-1 lg:grid-cols-5 gap-8 items-start">
              <div className="lg:col-span-1">
                <h2
                  className="text-xl lg:text-2xl font-bold"
                  style={{ color: "#0D8B4D" }}
                >
                  Experience Alegre Farms
                </h2>
              </div>

              <div className="lg:col-span-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                {experiences.map((experience, index) => {
                  return (
                    <div
                      key={index}
                      className="flex flex-col items-start gap-3"
                    >
                      <OptimizedImage
                        src={experience.emoji}
                        alt={experience.title}
                        width={46}
                        height={46}
                      />
                      {/* <div className={`w-12 h-12 rounded-full ${experience.color} border border-green-200 flex items-center justify-center`}>
                        <span className="text-lg">{experience.emoji} </span>
                      </div> */}
                      <div>
                        <h2 className="font-semibold text-[#002E62] mb-1">
                          {experience.title}
                        </h2>
                        <p className="text-[0.77rem] text-gray-600 leading-snug">
                          {experience.description}
                        </p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Stay in Comfort */}
      <section className="py-12 lg:py-12 bg-white">
        <div className="max-w-6xl mx-auto px-4 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-16 items-center mb-16">
            <div className="space-y-4 col-span-1">
              <div>
                <h2
                  className="text-3xl lg:text-5xl font-bold leading-tight"
                  style={{ color: "#0D8B4D" }}
                >
                  Stay in Comfort
                </h2>
                <svg
                  width={265}
                  height={20}
                  viewBox="0 0 365 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="mt-2"
                >
                  <path
                    d="M0.400391 11.6951C4.32889 12.7831 221.788 12.1485 330.026 11.6951L150.174 18.4951L364.4 1.49512"
                    stroke="#F5A524"
                    strokeWidth={3}
                  />
                </svg>
              </div>
              <p
                className="text-sm leading-relaxed"
                style={{ color: "#6B7280" }}
              >
                Choose from our carefully designed rooms and serviced apartments
                that offer privacy, comfort, and a touch of nature.
              </p>
            </div>
            <div className="lg:col-span-2">
              <VideoPlayer src="/landingvd.mp4" />
            </div>
          </div>

          <div className="max-w-6xl mx-auto py-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {rooms.map((room, index) => (
              <Card
                key={index}
                className="border border-[#CCE3FD] overflow-hidden pt-0 pb-6 shadow-none rounded-md bg-white"
              >
                {/* Make sure the image sits flush to the top */}
                <div className="relative h-[220px] w-full">
                  <OptimizedImage
                    src={room.image || "/placeholder.svg"}
                    alt={room.name}
                    fill
                    className="object-cover absolute inset-0"
                  />
                </div>

                <CardContent className="p-0 px-3 space-y-2">
                  <div>
                    <h3 className="text-[0.9rem] font-semibold text-gray-900">
                      {room.name}
                    </h3>
                    <p className="text-[0.77rem] text-gray-500 leading-relaxed">
                      {room.description}
                    </p>
                  </div>

                  <div className="flex flex-wrap gap-2 pt-1">
                    {room.amenities.map((amenity, i) => {
                      const Icon = amenity.icon;
                      return (
                        <div
                          key={i}
                          className="flex items-center gap-1.5 px-2 py-1.5 rounded-sm bg-[#fbfbff] border border-[#E0DEF7]"
                        >
                          <Icon className="w-3.5 h-3.5 text-gray-600" />
                          <span className="text-[0.7rem] font-medium text-gray-700">
                            {amenity.label}
                          </span>
                        </div>
                      );
                    })}
                  </div>

                  <Button
                    asChild
                    size="sm"
                    className="w-full text-white font-semibold hover:opacity-90 transition-opacity rounded-full py-4 mt-4"
                    style={{ backgroundColor: "#0D8B4D" }}
                  >
                    <Link href="/booking/room" className="text-[0.7rem]">
                      Book Now
                    </Link>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Experience Farm Life CTA */}
      <section className="relative w-[90%] max-w-5xl p-2 rounded-md mx-auto h-[250px] overflow-hidden">
        <div className="absolute inset-0">
          <OptimizedImage
            src="/bannersection.png"
            alt="Farm Life Experience"
            fill
            className="object-cover"
          />

        </div>
        <div className="relative container mx-auto px-4 lg:px-8 h-full flex items-center">
          <div className="max-w-xl space-y-6">
            <h2
              className="text-3xl lg:text-3xl font-bold leading-tight"
              style={{ color: "#0D8B4D" }}
            >
              Experience Farm Life<br /> with Resort Comfort.
            </h2>
            <Button
              asChild
              size="sm"
              className="rounded-full px-4 py-2 text-base font-medium"
              style={{ backgroundColor: "#F59E0B", color: "white" }}
            >
              <Link href="/facilities#experiences" className="text-[0.77rem]">Book Experience</Link>
            </Button>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="max-w-6xl mx-auto py-24 bg-background">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16">
            <div className="space-y-6">
              <h2 className="text-3xl lg:text-4xl font-bold text-foreground">
                Frequently Asked Question
              </h2>
              <p className="text-base text-muted-foreground leading-relaxed">
                Have a lot of frequently asked questions. Kindly tap on any
                question to reveal its answer and gain more information.
              </p>
            </div>

            <div>
              <Accordion type="single" collapsible className="space-y-4 border border-border p-4 rounded-md">
                {faqs.map((faq, index) => (
                  <AccordionItem
                    key={index}
                    value={`item-${index}`}
                    className="rounded-md px-2 transition-colors
                 data-[state=open]:bg-[#F7F8FA]" 
                  >
                    <AccordionTrigger className="text-left font-medium text-foreground hover:no-underline">
                      {faq.question}
                    </AccordionTrigger>
                    <AccordionContent className="text-sm text-muted-foreground leading-relaxed">
                      {faq.answer}
                    </AccordionContent>
                  </AccordionItem>
                ))}
              </Accordion>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <TestimonialsSection testimonials={testimonials} />

      <Footer />
    </div>
  );
}