import { siteContent } from "@/data/content";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { Reveal } from "@/components/ui/Reveal";
import { Heart } from "lucide-react";

export function About() {
  const { about } = siteContent;

  return (
    <section id="about" className="relative section-padding bg-neutral-100 dark:bg-[#0a0a0a]">
      <div className="section-divider absolute top-0 left-0 right-0" />
      <div className="section-container">
        <Reveal>
          <SectionHeading>{about.title}</SectionHeading>
        </Reveal>

        <div className="mt-10 max-w-3xl space-y-6">
          {about.paragraphs.map((text, i) => (
            <Reveal key={i}>
              <div className="flex gap-4">
                <Heart
                  size={20}
                  className="mt-1 shrink-0 fill-rose-500/20 text-rose-500 dark:fill-rose-500/10 dark:text-rose-400"
                />
                <p className="body-text text-lg leading-relaxed">{text}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
