import Image from "next/image";
import { home } from "@/lib/content";
import { Button } from "@/components/ui/Button";
import { CheckBadge } from "@/components/ui/Icons";
import { VaseScene } from "@/components/graphics/Placeholders";

export function About() {
  const { about } = home;
  if (!about.visible) return null;
  return (
    <section aria-labelledby="about-title" className="bg-ivory-50 relative">
      <div className="grid lg:grid-cols-[minmax(0,0.34fr)_minmax(0,0.66fr)]">
        {/* Photo + courbe ivoire */}
        <div className="relative h-[18rem] overflow-hidden sm:h-[22rem] lg:h-auto lg:min-h-[26rem]">
          {about.image.src ? (
            <Image
              src={about.image.src}
              alt={about.image.alt}
              fill
              sizes="(min-width:1024px) 34vw, 100vw"
              className="object-cover"
            />
          ) : (
            <VaseScene className="absolute inset-0 h-full w-full" />
          )}
          <svg
            className="pointer-events-none absolute inset-y-0 right-0 hidden h-full w-[38%] lg:block"
            viewBox="0 0 100 300"
            preserveAspectRatio="none"
            aria-hidden="true"
          >
            <path
              d="M100 0 L100 300 L55 300 C 10 230, 100 160, 55 80 C 35 45, 60 15, 100 0 Z"
              fill="var(--color-ivory-50)"
            />
            <path
              d="M58 300 C 14 232, 103 160, 58 80 C 38 46, 62 16, 100 2"
              fill="none"
              stroke="var(--color-ivory-200)"
              strokeWidth="6"
              opacity="0.9"
            />
          </svg>
        </div>

        <div className="container-site grid gap-10 py-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,0.52fr)] lg:gap-6 lg:py-16 lg:pl-6 xl:pl-10">
          <div>
            <p className="overtitle">{about.overtitle}</p>
            <h2 id="about-title" className="text-h3 mt-3">
              {about.title}
            </h2>
            <p className="text-ink-700 mt-5 max-w-[32rem]">{about.paragraph}</p>
            <div className="mt-7">
              <Button href={about.cta.href} variant="outline" size="lg">
                {about.cta.label}
              </Button>
            </div>
          </div>

          <ul
            className="border-gold-500/60 flex flex-col gap-4 lg:border-l lg:py-2 lg:pl-7 xl:pl-10"
            aria-label="Nos engagements"
          >
            {about.benefits.map((b) => (
              <li
                key={b}
                className="text-ink-900 flex items-start gap-3 text-[0.9rem] leading-snug"
              >
                <CheckBadge className="mt-0.5 h-5 w-5 shrink-0" />
                <span>{b}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}