import { aboutContent } from '../data/content';

export function AboutSection() {
  return (
    <section id="over" className="scroll-mt-16 py-[88px]">
      <div className="mx-auto max-w-[1080px] px-6">
        <div className="grid grid-cols-1 items-start gap-6 sm:grid-cols-[1.2fr_0.8fr] sm:grid-rows-[auto_1fr] sm:gap-12">
          <div className="order-1 mb-2 sm:col-start-1 sm:row-start-1 sm:mb-0">
            <span className="font-mono block text-sm uppercase tracking-wider text-accent">
              // over
            </span>
            <h2 className="font-display mt-3.5 text-3xl font-bold sm:text-4xl">
              Eén ontwikkelaar, korte lijnen
            </h2>
          </div>
          <div className="font-mono order-2 flex aspect-[4/5] w-full flex-col items-center justify-center gap-2 rounded border border-dashed border-line bg-surface p-6 text-center text-[0.8rem] uppercase tracking-wider text-muted sm:order-3 sm:col-start-2 sm:row-start-1 sm:row-span-2">
            <span>foto</span>
            <span>Bryan Slop</span>
          </div>
          <div className="order-3 sm:order-2 sm:col-start-1 sm:row-start-2">
            {aboutContent.paragraphs.map((paragraph) => (
              <p key={paragraph} className="mb-4 text-muted">
                {paragraph}
              </p>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}