import H2 from "@/components/lib/layout/H2";
import Link from "@/components/lib/layout/Link";
import Row from "@/components/lib/layout/Row";
import Section from "@/components/lib/layout/Section";
import Span from "@/components/lib/layout/Span";
import Stack from "@/components/lib/layout/Stack";
import { UserRoundSearch } from "lucide-react";

export default function AboutSection() {
    return (
        <Section>
            <Stack className="w-full max-w-full xl:max-w-[50vw]">
                <H2 className="leading-snug">
                    I Build & Operate Production Systems
                </H2>
                <Span>
                    I'm Benjamin Toby. DevOps/Platform engineer and CTO at
                    Summit Lending. I design, deploy, and operate infrastructure
                    that supports real businesses:
                </Span>
                <ul className="space-y-4">
                    <li>Automated CI/CD pipelines (TurboCI)</li>
                    <li>Multi-cloud deployments (AWS, GCP, Azure, Hetzner)</li>
                    <li>NGINX hardening, TLS, caching, rate limiting</li>
                    <li>Full-stack delivery (Next.js, Bun, SQL)</li>
                </ul>
                <Span>
                    I focus on measurable outcomes: faster deployments, lower
                    costs, fewer incidents.
                </Span>

                <Link className="dotted-text" href="/about">
                    <Row>
                        <UserRoundSearch size={19} />
                        <Span>View Resume</Span>
                    </Row>
                </Link>
            </Stack>
        </Section>
    );
}