---
import ContactImage from "../../assets/img/contact.jpg";
import { Picture } from "astro:assets";
import ArrowUpRight from "../icons/ArrowUpRight.astro";
---

<div class="contact" aria-label="Contact section">
    <Picture
        class="image"
        src={ContactImage}
        alt="An abstract image of a black and gold background"
    />

    <div class="content">
        <h2 class="heading-gradient">Building the Web on Your Terms.</h2>

        <p>
            Enough about us, let's talk about you. Every project is individual
            and comes with its own challenges and specific needs. Get in touch
            with us now and let's talk about it in a short call.
        </p>
    </div>

    <a class="link" href="mailto:office@tideshiftdigital.com">
        <span class="heading-gradient">Contact us</span>
        <ArrowUpRight />
    </a>
</div>

<style>
    .contact {
        display: grid;
        grid-template-columns: var(--base-grid);
        max-width: var(--max-content-width);
        margin-inline: auto;
        padding-block: 8rem 5.5rem;
        padding-inline: 5rem;
    }

    picture {
        display: block;
        width: calc(100% + 5rem);
        grid-column: 1 / 5;
        /* TODO substitute horizontal spacing with var */
        transform: translate3d(-5rem, 0, 0);
        z-index: -1;
    }

    .image {
        max-width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .content {
        grid-column: 6 / -1;
        align-content: center;
    }

    h2 {
        max-width: 13ch;
        font-size: 3rem;
        line-height: var(--leading-subtitle);
        letter-spacing: var(--tracking-narrow);
    }

    p {
        max-width: 38ch;
        margin-top: 2rem;
        font-size: 1.5rem;
        line-height: var(--leading-paragraph);
    }

    .link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        grid-column: 1 / -1;
        width: max-content;
        margin-inline: auto;

        margin-top: 15rem; 
        padding-bottom: 5rem;

        font-size: 6.25rem;
        font-weight: 600;
        text-transform: uppercase;

        span {
            line-height: var(--leading-tightest);
        }
    }
</style>