---
import CTA from "./CTA.astro";
---

<style>
    section {
        background-color: color-mix(in oklch, var(--color-primary), var(--color-base-content) 20%);
        color: var(--color-primary-content);
        /* Faint diagonal weave, matching the design's textured red band. */
        background-image: repeating-linear-gradient(145deg, rgb(255 255 255 / 0.03) 0 16px, transparent 16px 32px);
    }

    .content {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 2rem 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 4rem;
    }

    h2 {
        font-size: 42px;
        font-weight: 400;
        line-height: 1.1;
        max-width: 18ch;
        text-transform: uppercase;
    }

    .action {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    p {
        line-height: 1.6;
        max-width: 34ch;
    }

    @media (max-width: 900px) {
        .content {
            flex-direction: column;
            align-items: flex-start;
            gap: 2rem;
        }

        h2 {
            font-size: 32px;
        }
    }
</style>

<section>
    <div class="content">
        <h2>Siap Membangun Solusi yang Lebih Baik Bersama?</h2>
        <div class="action">
            <p>Mari diskusikan proyek Anda dan ciptakan solusi yang tepat untuk industri Anda.</p>
            <CTA text="DAPATKAN KONSULTASI" href="/contact" variant="inverse" unimplemented />
        </div>
    </div>
</section>