import { cn } from "@/lib/utils";

interface About19Props {
  className?: string;
}

const About19 = ({ className }: About19Props) => {
  return (
    <section className={cn("px-4 py-20 sm:px-6 lg:px-8 lg:py-28", className)}>
      <div className="mx-auto max-w-6xl">
        <div className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,0.88fr)] lg:items-start lg:gap-14">
          <div className="overflow-hidden rounded-lg border border-border bg-card">
            <img
              src="/about.jpg"
              alt="Matthias Meister bei der Webentwicklung"
              className="h-[20rem] w-full object-cover sm:h-[28rem] lg:h-[34rem]"
            />
          </div>

          <div className="max-w-xl">
            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">
              Über die Zusammenarbeit
            </p>
            <h2 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
              Hallo, ich bin Matthias. Zurück in der Region und hier, um zu
              bleiben.
            </h2>
            <div className="mt-8 space-y-5 text-base leading-8 text-muted-foreground">
              <p>
                Ich bin in der Region aufgewachsen, war durch die Bundeswehr
                viele Jahre weg und bin jetzt zurück.
              </p>
              <p>
                Seit über 15 Jahren beschäftige ich mich mit Webentwicklung und
                Software. Einen Großteil davon intern für die Bundeswehr:
                Projekte, die ich Ihnen leider nicht zeigen kann. Was ich Ihnen
                zeigen kann: wie ich arbeite. Zuverlässig, präzise und ohne
                unnötigen Schnickschnack.
              </p>
              <p>
                Neben Websites für regionale Unternehmen entwickle ich eigene
                Software und Apps. Wenn Ihre Anforderungen irgendwann über eine
                einfache Website hinausgehen, bleibt der Ansprechpartner also
                derselbe.
              </p>
            </div>
            <p className="mt-8 rounded-lg border border-border bg-card p-5 text-base font-medium leading-7 text-foreground">
              Mein Ziel: Unternehmen aus der Region mit einer Website
              ausstatten, die funktioniert, gefunden wird und Ihnen keine
              Kopfschmerzen macht.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export { About19 };