"use client"
import { Header } from "@/components/header";
import { Footer } from "@/components/footer";
import { ExperienceSection } from "@/components/experience-section";
import { StayInComfortSection } from "@/components/stay-in-comfort-section";
import { FAQSection } from "@/components/faq-section";
import { TestimonialsSection } from "@/components/testimonials-section";
import { OptimizedImage } from "@/components/optimized-image";
import BusinessUnit from "@/components/businessUnit";
import { CheckCircle2, CircleCheckBig } from "lucide-react";

export default function AboutPage() {
  const experiences = [
    {
      emoji: "/vision.png",
      title: "Vision",
      description:"To be a trail blazer in provision of leisure getaway center and modern commercial farming methods. ",
      color: "bg-green-50",
    },
    {
      emoji: "/mission.png",
      title: "Mission",
      description: "To operate a responsible, profitable, and customer-centric farm resort that focuses on the well-being of our guests, team members, and the environment, while driving growth and innovation in the agritourism industry ata global scale.",
      color: "bg-green-50",
    },
  ];

  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: "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: (
    <span>
      Reach us at{" "}
      <a href="mailto:alegrefarmresort@gmail.com" className="text-primary underline font-semibold">
        alegrefarmresort@gmail.com
      </a>{" "}
      or call{" "}
      <a href="tel:08135019543" className="text-primary underline font-semibold">
        08135019543
      </a>{" "}
      for inquiries.
    </span>
  ),
}

  ];

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

      {/* Hero Section */}
      <section className="relative h-[calc(100vh-2rem)] min-h-[500px] max-h-[700px] pt-8">
        <div className="absolute inset-0">
          <OptimizedImage
            src="/bannerimage2.png"
            alt="About Alegre Farms"
            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">
          <div className="text-center space-y-4 -mt-5">
            <h1
              className="text-4xl lg:text-5xl font-bold"
              style={{ color: "#0D8B4D" }}
            >
              Our Story
            </h1>
            <p className="text-sm text-gray-700 max-w-3xl mx-auto leading-relaxed">
              Alegre Integrated Farms is more than just a getaway – it's a
              community. Our farm and resort are designed to bring people
              together with the environment, to foster connections, and to
              create unforgettable memories.{" "}
            </p>

            <p className="text-sm text-gray-700 max-w-3xl mx-auto leading-relaxed">
              Whether you're looking for a romantic escape, a family vacation,
              or a corporate retreat, our resort offers the perfect blend of
              relaxation, adventure, and community spirit. At Alegre Integrated
              Farms and resort, we believe that sustainability and luxury go
              hand-in-hand. Our eco-friendly farm and resort are designed to not
              only provide a tranquil retreat for our guests but also to promote
              environmental stewardship and support local communities.
            </p>

            <p className="text-sm text-gray-700 max-w-3xl mx-auto leading-relaxed">
              Our farm and resort are dedicated to providing an unforgettable
              experience, where guests can reconnect with nature, themselves,
              and each other.
            </p>
          </div>
        </div>
      </section>

      {/* Experience Alegre Farms */}
      <section className="relative -mt-15 md:-mt-10 z-10 pb-6 md: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-5">
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-5 items-start">
        <div className="lg:col-span-1">
          <h2
            className="text-xl lg:text-2xl font-bold"
            style={{ color: "#0D8B4D" }}
          >
            Experience
            <br /> Alegre Farms
          </h2>
        </div>

        <div className="lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {experiences.map((experience, index) => {
            return (
              <div
                key={index}
                className={`flex flex-col items-start gap-3 p-3 rounded-lg ${
                  index === 1 ? "lg:col-span-2" : "lg:col-span-1"
                }`}
              >
                <OptimizedImage
                  src={experience.emoji}
                  alt={experience.title}
                  width={46}
                  height={46}
                />
                <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>

      {/* Our Core Values */}
      <section className="pb-6 md:pb-16">
        <div className="max-w-6xl mx-auto px-3 md:px-6">
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 justify-start md:justify-between md:gap-12 items-start p-4 lg:p-5">
  <div className="col-span-1">
    {/* 👇 Make this section flex so image and text sit side-by-side */}
    <div className="flex items-center gap-4 ">
      <OptimizedImage
        src="/coreimage.svg"
        alt="Core Values"
        width={84}
        height={84}
        className="shrink-0 hidden md:block"
      />
      <h2
        className="text-3xl lg:text-5xl font-bold leading-tight"
        style={{ color: "#202D57" }}
      >
        Our core values
      </h2>
    </div>
  </div>

  {/* Right section */}
  <div className="col-span-1 lg:col-span-2">
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
      {/* First Column */}
      <div className="lg:col-span-1">
        <div className="space-y-3">
          <div className="flex items-center gap-2">
            <CircleCheckBig className="w-5 h-5 shrink-0" style={{ color: "#0D8B4D" }} />
            <span className="text-sm text-gray-800">Sustainability</span>
          </div>
          <div className="flex items-center gap-2">
            <CircleCheckBig className="w-5 h-5 shrink-0" style={{ color: "#0D8B4D" }} />
            <span className="text-sm text-gray-800">Environmentally friendly</span>
          </div>
          <div className="flex items-center gap-2">
            <CircleCheckBig className="w-5 h-5 shrink-0" style={{ color: "#0D8B4D" }} />
            <span className="text-sm text-gray-800">Community engagement</span>
          </div>
          <div className="flex items-center gap-2">
            <CircleCheckBig className="w-5 h-5 shrink-0" style={{ color: "#0D8B4D" }} />
            <span className="text-sm text-gray-800">Innovative thinking</span>
          </div>
        </div>
      </div>

      {/* Second Column */}
      <div className="lg:col-span-2">
        <div className="space-y-3">
          <div className="flex items-center gap-2">
            <CircleCheckBig className="w-5 h-5 shrink-0" style={{ color: "#0D8B4D" }} />
            <span className="text-sm text-gray-800">Exceptional guest experiences</span>
          </div>
          <div className="flex items-center gap-2">
            <CircleCheckBig className="w-5 h-5 shrink-0" style={{ color: "#0D8B4D" }} />
            <span className="text-sm text-gray-800">Teamwork and collaboration</span>
          </div>
          <div className="flex items-center gap-2">
            <CircleCheckBig className="w-5 h-5 shrink-0" style={{ color: "#0D8B4D" }} />
            <span className="text-sm text-gray-800">Integrity and transparency</span>
          </div>
          <div className="flex items-center gap-2">
            <CircleCheckBig className="w-5 h-5 shrink-0" style={{ color: "#0D8B4D" }} />
            <span className="text-sm text-gray-800">Continuous learning and improvement</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

        </div>
      </section>

      {/* Stay in Comfort */}
      <StayInComfortSection />

      <BusinessUnit />

      {/* FAQ Section */}
      <FAQSection  />

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

      <Footer />
    </div>
  );
}