import type { Metadata } from "next";
import { home, pages } from "@/lib/content";
import { pageMetadata } from "@/lib/seo";
import { CheckBadge } from "@/components/ui/Icons";
import { Button } from "@/components/ui/Button";
import { VaseScene } from "@/components/graphics/Placeholders";
import Image from "next/image";

export const metadata: Metadata = pageMetadata({
  title: pages.about.title,
  description: pages.about.seoDescription,
  path: "/a-propos",
});

export default function AboutPage() {
  const { about } = home;
  return (
    <>
      <section className="section-y bg-ivory-100">
        <div className="container-site">
          <p className="overtitle">{about.overtitle}</p>
          <h1 className="text-h2 mt-3 max-w-[40rem]">{pages.about.intro}</h1>
        </div>
      </section>
      <section className="section-y bg-ivory-50">
        <div className="container-site grid items-start gap-10 lg:grid-cols-[minmax(0,0.4fr)_minmax(0,0.6fr)]">
          <div className="relative aspect-[4/5] overflow-hidden rounded-[var(--radius-xl)]">
            {about.image.src ? (
              <Image
                src={about.image.src}
                alt={about.image.alt}
                fill
                sizes="(min-width:1024px) 40vw, 100vw"
                className="object-cover"
              />
            ) : (
              <VaseScene className="absolute inset-0 h-full w-full" />
            )}
          </div>
          <div>
            {pages.about.body.map((p, i) => (
              <p key={i} className="text-lead text-ink-700 mt-0 mb-5">
                {p}
              </p>
            ))}
            <h2 className="text-h4 mt-8">Nos engagements</h2>
            <ul className="mt-4 flex flex-col gap-3">
              {about.benefits.map((b) => (
                <li key={b} className="text-ink-900 flex items-start gap-3">
                  <CheckBadge className="mt-0.5 h-5 w-5 shrink-0" />
                  <span>{b}</span>
                </li>
              ))}
            </ul>
            <div className="mt-8">
              <Button href="/nous-joindre" size="lg">
                Nous joindre
              </Button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}