src/components/landing/about.tsx

import Image from "next/image";
import { PlaceHolderImages } from "@/lib/placeholder-images";
import { aboutMe } from "@/lib/data";

export function About() {
  const profileImage = PlaceHolderImages.find(
    (img) => img.id === "profile-picture"
  );

  return (
    <section id="about" className="w-full py-12 md:py-24 lg:py-32 bg-background">
      <div className="container px-4 md:px-6">
        <div className="grid gap-10 lg:grid-cols-2 lg:gap-16 items-center">
          <div className="space-y-4">
            <h2 className="text-3xl font-headline font-bold tracking-tighter sm:text-4xl md:text-5xl text-primary">
              About Me
            </h2>
            <p className="max-w-[600px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
              {aboutMe.bio}
            </p>
          </div>
          <div className="flex justify-center">
            {profileImage && (
              <Image
                src={profileImage.imageUrl}
                alt={profileImage.description}
                data-ai-hint={profileImage.imageHint}
                width={432}
                height={592}
                className="rounded-lg object-contain shadow-lg border-4 border-accent"
              />
            )}
          </div>
        </div>
      </div>
    </section>
  );
}