import BookingForm from "@/components/booking/BookingForm";
import Head from "next/head";

const BookingPage = () => {
  return (
    <>
      <Head>
        <title>Book a Visit | Badagry Museum</title>
        <meta
          name="description"
          content="Plan your journey through history with our easy booking system. Reserve your spot for a guided tour of Badagry Museum and learn about Nigeria's slavery history."
        />
        <meta
          name="keywords"
          content="Badagry Museum booking, museum tour reservation, Nigeria slavery history tour, visit Badagry Museum"
        />

        {/* Open Graph / Facebook */}
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://badagrymuseum.org/booking" />
        <meta property="og:title" content="Book a Visit | Badagry Museum" />
        <meta
          property="og:description"
          content="Plan your journey through history with our easy booking system. Reserve your spot for a guided tour of Badagry Museum."
        />
        <meta
          property="og:image"
          content="https://images.unsplash.com/photo-1574362848149-11496d93a7c7?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=800"
        />

        {/* Twitter */}
        <meta property="twitter:card" content="summary_large_image" />
        <meta
          property="twitter:url"
          content="https://badagrymuseum.org/booking"
        />
        <meta
          property="twitter:title"
          content="Book a Visit | Badagry Museum"
        />
        <meta
          property="twitter:description"
          content="Plan your journey through history with our easy booking system. Reserve your spot for a guided tour of Badagry Museum."
        />
        <meta
          property="twitter:image"
          content="https://images.unsplash.com/photo-1574362848149-11496d93a7c7?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=800"
        />
      </Head>
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h1 className="text-3xl font-bold tracking-tight text-primary sm:text-4xl lg:text-5xl font-heading">
              Book Your Visit
            </h1>
            <p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500">
              Plan your journey through history with our easy booking system.
            </p>
          </div>

          <div className="bg-secondary rounded-xl shadow-xl overflow-hidden">
            <div className="md:flex">
              <div className="md:w-1/2">
                <img
                  src="./images/IMG_0525_11zon.jpg"
                  alt="Welcoming entrance to the Badagry Museum"
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="p-8 md:w-1/2">
                <h2 className="text-2xl font-bold text-neutral-dark mb-6 font-heading">
                  Reservation Form
                </h2>
                <BookingForm />

                <div className="mt-6 text-center text-sm text-gray-500">
                  <p>
                    You will receive a confirmation email with your booking
                    details.
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-bold text-neutral-dark mb-4 font-heading">
                Opening Hours
              </h3>
              <ul className="space-y-2 text-gray-600">
                <li className="flex justify-between">
                  <span>Monday - Friday:</span>
                  <span>9:00 AM - 5:00 PM</span>
                </li>
                <li className="flex justify-between">
                  <span>Saturday:</span>
                  <span>9:00 AM - 5:00 PM</span>
                </li>
                <li className="flex justify-between">
                  <span>Sunday:</span>
                  <span>12:00 PM - 5:00 PM</span>
                </li>
              </ul>
            </div>

            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-bold text-neutral-dark mb-4 font-heading">
                Tour Options
              </h3>
              <ul className="space-y-2 text-gray-600">
                <li>
                  <span className="font-medium">Standard Tour:</span> A general
                  overview of the museum exhibits (1.5 hours)
                </li>
                <li>
                  <span className="font-medium">Educational Tour:</span>{" "}
                  In-depth historical tour designed for schools and students (2
                  hours)
                </li>
                <li>
                  <span className="font-medium">Private Tour:</span>{" "}
                  Personalized experience with a dedicated guide (2 hours)
                </li>
                <li>
                  <span className="font-medium">Interactive Workshop:</span>{" "}
                  Hands-on learning activities and guided tour (3 hours)
                </li>
              </ul>
            </div>

            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-bold text-neutral-dark mb-4 font-heading">
                Visitor Information
              </h3>
              <ul className="space-y-2 text-gray-600">
                <li>Photography is allowed in designated areas only</li>
                <li>The museum is wheelchair accessible</li>
                <li>
                  Audio guides are available in English, French, and Yoruba
                </li>
                <li>Group discounts available for parties of 10 or more</li>
                <li>Children under 6 years enter free of charge</li>
                <li>Free parking available on-site</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default BookingPage;
