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

export default function Main() {
    return (
        <Section>
            <Stack className="w-full max-w-full xl:max-w-[50vw]">
                <H1 className="leading-snug">Contact Me</H1>
                <Span>
                    Need help with CI/CD, cost optimization, or production
                    reliability? Book a call or send a message.
                </Span>

                <Link
                    href={`mailto:${process.env.NEXT_PUBLIC_EMAIL_ADDRESS}`}
                    className="border-none"
                >
                    <Row className="items-center">
                        <Mail size={20} className="mt-1" />
                        <Span className="text-2xl">
                            {process.env.NEXT_PUBLIC_EMAIL_ADDRESS}
                        </Span>
                    </Row>
                </Link>
            </Stack>
        </Section>
    );
}