import { BookDemoForm } from "@/components/sections/book-demo-form";
import type { Metadata } from "next";
import Image from "next/image";

export const metadata: Metadata = {
  title: "Book a Demo | TIAR",
  description:
    "Schedule a personalized TIAR demo and discover how our EV charging platform can support your business.",
};

export default function BookDemoPage() {
  return (
    <section className="w-full bg-gray-50 py-12 sm:py-16 lg:py-20">
      <div className="mx-auto w-full max-w-7xl px-6 sm:px-10">
        <div className="mx-auto max-w-3xl text-center">
          <h1 className="text-4xl font-bold tracking-tight text-gray-950 sm:text-5xl">
            Schedule Your TIAR Demo
          </h1>
          <p className="mx-auto mt-4 max-w-2xl text-base leading-relaxed text-gray-600 sm:text-lg">
            Tell us about your business and see how TIAR can help you launch,
            manage, and scale your EV charging operations.
          </p>
        </div>

        <div className="mt-10 grid overflow-hidden rounded-3xl border border-gray-200 bg-white shadow-xl shadow-gray-950/5 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
          <div className="p-6 sm:p-10 lg:p-12">
            <h2 className="text-2xl font-bold tracking-tight text-gray-950 sm:text-3xl">
              Tell us about your business
            </h2>
            <p className="mt-3 leading-relaxed text-gray-600">
              Complete the form and our team will help you explore the right
              TIAR solution for your needs.
            </p>

            <BookDemoForm />
          </div>

          <div className="flex min-h-80 items-center justify-center bg-green-50 p-6 sm:p-10 lg:min-h-full lg:p-12">
            <Image
              src="/images/tiar-mockup.png"
              alt="TIAR EV charging dashboard displayed on a laptop and mobile application"
              width={1447}
              height={1087}
              priority
              sizes="(max-width: 1023px) 90vw, 55vw"
              className="h-auto w-full max-w-2xl object-contain"
            />
          </div>
        </div>
      </div>
    </section>
  );
}