import LucideIcon from "@/src/components/lib/elements/lucide-icon";
import Button from "@/src/components/lib/layout/Button";
import H1 from "@/src/components/lib/layout/H1";
import Row from "@/src/components/lib/layout/Row";
import Section from "@/src/components/lib/layout/Section";
import Span from "@/src/components/lib/layout/Span";
import Stack from "@/src/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!">
                    CTO, 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>
                    <Row>
                        <LucideIcon name="CheckCircle2" size={20} />
                        <Span>~10 deployments/week</Span>
                    </Row>
                    <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"
                        variant="outlined"
                    >
                        View My Work
                    </Button>
                    {/* <Button
                        title="View My Work"
                        beforeIcon={
                            <Terminal size={17} className="font-normal" />
                        }
                        href="/work"
                        className="grow w-full"
                    >
                        Learn More
                    </Button> */}
                    <Button
                        title="Benjamin Toby Resume"
                        beforeIcon={
                            <ScrollText size={17} className="font-normal" />
                        }
                        href="https://docs.google.com/document/d/1SQ5ERYmGs39LMo03GqL_Hs5kz1Ir8via-mPPByi6jyk/edit?usp=sharing"
                        variant="outlined"
                        className="grow w-full"
                        target="_blank"
                    >
                        Resume
                    </Button>
                </Row>
            </Stack>
        </Section>
    );
}
