import Link from "next/link";
import Image from "next/image";
import { prisma } from "@/lib/prisma";
import { formatMoney, formatDuration } from "@/lib/format";

export const dynamic = "force-dynamic";

export default async function HomePage() {
  const services = await prisma.service.findMany({
    where: { active: true },
    orderBy: { createdAt: "asc" },
    take: 3,
  });

  return (
    <div>
      <section className="relative overflow-hidden bg-cream">
        <div className="mx-auto grid max-w-6xl items-center gap-8 px-6 py-16 md:grid-cols-2 md:py-10">
          <div className="text-center md:text-left">
            <p className="text-xs uppercase tracking-wide-plus text-rose-dark">
              Est. Hair Salon &middot; Color &middot; Style
            </p>
            <h1 className="mt-6 font-display text-5xl uppercase tracking-wide-plus text-rosewood sm:text-6xl">
              Hair by Nyasia
            </h1>
            <p className="mx-auto mt-6 max-w-md text-balance text-ink/70 md:mx-0">
              A calm, elevated salon experience &mdash; precision cuts, dimensional
              color, and styling that feels like you, only better.
            </p>
            <div className="mt-10 flex flex-wrap justify-center gap-4 md:justify-start">
              <Link
                href="/book"
                className="rounded-full bg-rosewood px-8 py-3 text-xs uppercase tracking-wide-plus text-cream transition hover:bg-rose-dark"
              >
                Book an Appointment
              </Link>
              <Link
                href="/services"
                className="rounded-full border border-rosewood/40 px-8 py-3 text-xs uppercase tracking-wide-plus text-rosewood transition hover:bg-rosewood/10"
              >
                View Services
              </Link>
            </div>
          </div>
          <div className="relative mx-auto h-[420px] w-full max-w-md md:h-[620px]">
            <Image
              src="/images/girlhair-cutout.png"
              alt="Woman with beautiful long, flowing hair"
              fill
              priority
              sizes="(min-width: 768px) 480px, 90vw"
              className="object-contain object-bottom"
            />
          </div>
        </div>
      </section>

      <section className="bg-blush px-6 py-20">
        <div className="mx-auto max-w-6xl">
          <div className="text-center">
            <p className="text-xs uppercase tracking-wide-plus text-rose-dark">
              What We Offer
            </p>
            <h2 className="mt-3 font-display text-3xl text-rosewood">
              Signature Services
            </h2>
          </div>
          <div className="mt-12 grid gap-8 md:grid-cols-3">
            {services.map((service) => (
              <div
                key={service.id}
                className="rounded-2xl bg-cream p-8 text-center shadow-sm shadow-rosewood/5"
              >
                <h3 className="font-display text-xl text-rosewood">{service.name}</h3>
                <p className="mt-3 text-sm text-ink/70">{service.description}</p>
                <p className="mt-4 text-xs uppercase tracking-wide-plus text-rose-dark">
                  {formatMoney(service.priceCents)} &middot; {formatDuration(service.durationMinutes)}
                </p>
              </div>
            ))}
          </div>
          <div className="mt-12 text-center">
            <Link
              href="/services"
              className="text-xs uppercase tracking-wide-plus text-rosewood underline underline-offset-4"
            >
              See all services
            </Link>
          </div>
        </div>
      </section>

      <section className="relative overflow-hidden bg-cream px-6 py-20">
        <div className="mx-auto grid max-w-6xl items-center gap-8 md:grid-cols-2">
          <div className="text-center md:text-left">
            <p className="text-xs uppercase tracking-wide-plus text-rose-dark">
              About the Studio
            </p>
            <h2 className="mt-3 font-display text-3xl text-rosewood">
              Where craft meets comfort
            </h2>
            <p className="mx-auto mt-5 max-w-md text-sm leading-relaxed text-ink/70 md:mx-0">
              Every appointment is unhurried and personal. We take the time to
              understand your hair, your lifestyle, and the look you&apos;re after
              &mdash; then bring it to life with technique honed over years behind
              the chair.
            </p>
            <Link
              href="/about"
              className="mt-6 inline-block text-xs uppercase tracking-wide-plus text-rosewood underline underline-offset-4"
            >
              Learn more about us
            </Link>
          </div>
          <div className="relative mx-auto h-[380px] w-full max-w-md md:h-[520px]">
            <Image
              src="/images/34-cutout.png"
              alt="Stylist and client in the studio"
              fill
              sizes="(min-width: 768px) 480px, 90vw"
              className="object-contain object-bottom"
            />
          </div>
        </div>
      </section>
    </div>
  );
}
