import Button from "@/components/lib/layout/Button";
import H2 from "@/components/lib/layout/H2";
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, Mail } from "lucide-react";

export default function FooterCTASection() {
    return (
        <Section>
            <Stack className="w-full max-w-full xl:max-w-[50vw] gap-8">
                <H2 className="leading-snug">Need Help With Infrastructure?</H2>
                <Span>
                    Whether it's CI/CD, cost optimization, or production
                    hardening, I can help.
                </Span>

                <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"
                    >
                        Schedule a Call
                    </Button>
                    <Button
                        title="View My Work"
                        beforeIcon={<Mail size={17} className="font-normal" />}
                        href={`mailto:${process.env.NEXT_PUBLIC_EMAIL_ADDRESS}`}
                        className="grow w-full bg-transparent!"
                        variant="outlined"
                    >
                        Email Me
                    </Button>
                    {/* <Button
                        beforeIcon={
                            <ScrollText size={17} className="font-normal" />
                        }
                        href="/contact"
                        variant="outlined"
                        className="grow w-full"
                    >
                        Resume
                    </Button> */}
                </Row>
            </Stack>
        </Section>
    );
}