import type { Metadata } from "next";
import { Container, SectionHeader } from "@/src/components/site";
import { AvailabilityLine } from "@/src/components/book/AvailabilityLine";
import { BookingEmbed } from "@/src/components/book/BookingEmbed";

export const metadata: Metadata = {
  title: "Book a call",
  description:
    "Book a 20-minute intro call to talk about your project, team and timeline.",
  alternates: { canonical: "/book" },
};

const PREPARE: readonly string[] = [
  "What you are building",
  "Your team size",
  "A rough timeline",
];

export default function Page() {
  return (
    <Container className="py-16 md:py-24">
      <SectionHeader
        as="h1"
        kicker="/book"
        title="Book a call"
        lead="20 minutes to check whether we fit: your project, where it is stuck or unproven, and how a weekly capacity block would work."
      />
      <div className="mt-6 min-h-5">
        <AvailabilityLine />
      </div>

      <section className="mt-10 max-w-2xl" aria-labelledby="prepare">
        <h2 id="prepare" className="!mb-3 !mt-0 !text-xl">
          What to prepare
        </h2>
        <ul className="!m-0 space-y-2 !pl-5 text-muted">
          {PREPARE.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </section>

      <section className="mt-12" aria-label="Booking calendar">
        <BookingEmbed />
      </section>
    </Container>
  );
}