import { siteContent } from "@/data/content";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { Reveal } from "@/components/ui/Reveal";

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

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

        <div className="mt-14 mx-auto max-w-2xl space-y-8 text-center">
          {about.paragraphs.map((text, i) => (
            <Reveal key={i}>
              <p className="text-xl leading-relaxed text-neutral-600 dark:text-neutral-300 sm:text-2xl">
                {text}
              </p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}