import Image from "next/image";
import type { Metadata } from "next";
import Header from "../components/Header";
import Footer from "../components/Footer";
import ContactForm from "../components/ContactForm";

export const metadata: Metadata = {
  title: "Contact Us",
  description:
    "Talk to Vido International Home School. Reach our admissions team by phone, email, or send us a message and we'll get back within 1 - 2 working days.",
};

export default function ContactPage() {
  return (
    <div className="min-h-screen bg-white font-sans text-[#222]">
      <Header />

      <main className="site-container py-2 md:py-3 pb-14">
        {/* Hero — image with text overlay */}
        <section className="relative overflow-hidden rounded-2xl">
          <Image
            src="/vido_galary/learning.jpg"
            alt="Vido learners and tutors"
            width={1600}
            height={760}
            className="h-60 sm:h-75 md:h-105 w-full object-cover"
            priority
          />
          <div
            aria-hidden="true"
            className="absolute inset-0 bg-linear-to-t from-black/65 via-black/45 to-black/20"
          />
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="px-4 sm:px-6 md:px-10 max-w-2xl text-center">
              <h1 className="text-xl sm:text-2xl md:text-4xl font-bold tracking-tight text-white leading-tight drop-shadow-sm">
                Let&apos;s start a conversation.
              </h1>
              <p className="mt-4 sm:mt-6 text-sm sm:text-base md:text-lg text-white/90 leading-relaxed max-w-xl mx-auto">
                Questions about admissions, programs, or visiting our center?
                We&apos;d love to hear from you.
              </p>
            </div>
          </div>
        </section>

        {/* Message form */}
        <section id="message" className="mt-8 md:mt-10">
          <div className="max-w-3xl">
            <span className="text-[11px] font-semibold uppercase tracking-[0.22em] text-[#1f3fb8]">
              Send a message
            </span>
          </div>

          <div className="mt-6 md:mt-8">
            <ContactForm />
          </div>
        </section>
      </main>

      <Footer />
    </div>
  );
}