import Link from "next/link";
import Image from "next/image";

export default function AboutPage() {
  return (
    <div>
      <section className="bg-blush px-6 py-20 text-center">
        <p className="text-xs uppercase tracking-wide-plus text-rose-dark">Our Story</p>
        <h1 className="mt-3 font-display text-4xl text-rosewood">About Hair by Nyasia</h1>
      </section>

      <section className="relative overflow-hidden bg-cream px-6 py-16">
        <div className="mx-auto grid max-w-5xl items-center gap-8 md:grid-cols-2">
          <div className="relative mx-auto h-[380px] w-full max-w-md md:h-[520px]">
            <Image
              src="/images/35-cutout.png"
              alt="Stylist styling a client's hair"
              fill
              sizes="(min-width: 768px) 480px, 90vw"
              className="object-contain object-bottom"
            />
          </div>
          <div className="text-center md:text-left">
            <h2 className="font-display text-2xl text-rosewood">
              Hair, done thoughtfully
            </h2>
            <p className="mt-4 text-sm leading-relaxed text-ink/70">
              Hair by Nyasia was built around a simple idea: a salon visit
              should feel unhurried, personal, and genuinely restorative. From
              your first consultation to your final blowout, every step is
              tailored to your hair type, your routine, and the way you
              actually want to look and feel.
            </p>
            <p className="mt-4 text-sm leading-relaxed text-ink/70">
              We keep a small, dedicated client list so we can give every
              appointment the time it deserves &mdash; no rushing, no
              guesswork, just great hair.
            </p>
            <Link
              href="/book"
              className="mt-8 inline-block 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>
          </div>
        </div>
      </section>
    </div>
  );
}
