import LucideIcon from "@/components/lib/elements/lucide-icon";
import Button from "@/components/lib/layout/Button";
import Divider from "@/components/lib/layout/Divider";
import H1 from "@/components/lib/layout/H1";
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 { Contact, ScrollText, Terminal } from "lucide-react";

export default function Main() {
    return (
        <Section>
            <Stack className="w-full max-w-full xl:max-w-[50vw]">
                <Span>Benjamin Toby</Span>
                <H1 className="leading-snug m-0!">
                    DevOps & Platform Engineer
                </H1>
                <Span className="text-xl">
                    I help teams ship faster, cut infrastructure costs, and
                    achieve reliable production systems.
                </Span>
                <Row className="my-4 gap-6">
                    <Row>
                        <LucideIcon name="CheckCircle2" size={20} />
                        <Span>99.99% uptime targets</Span>
                    </Row>
                    <Divider vertical />
                    <Row>
                        <LucideIcon name="CheckCircle2" size={20} />
                        <Span>~10 deployments/week</Span>
                    </Row>
                    <Divider vertical />
                    <Row>
                        <LucideIcon name="CheckCircle2" size={20} />
                        <Span>Over 80% Operations cost reduction</Span>
                    </Row>
                </Row>
                <Row className="items-stretch flex-col md:flex-row w-full md:w-auto gap-4">
                    <Button
                        title="Contact Me"
                        beforeIcon={
                            <Contact size={17} className="font-normal" />
                        }
                        href="/contact"
                        className="grow w-full"
                    >
                        Book a Consultation
                    </Button>
                    <Button
                        title="View My Work"
                        beforeIcon={
                            <Terminal size={17} className="font-normal" />
                        }
                        href="/work"
                        className="grow w-full bg-transparent!"
                        variant="outlined"
                    >
                        View My Work
                    </Button>
                    {/* <Button
                        beforeIcon={
                            <ScrollText size={17} className="font-normal" />
                        }
                        href="/contact"
                        variant="outlined"
                        className="grow w-full"
                    >
                        Resume
                    </Button> */}
                </Row>
            </Stack>
        </Section>
    );
}