---
import { Image } from "astro:assets";
import CTA from "./CTA.astro";
import Hero from "../assets/hero.png";
---

<style>
    section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
    }

    .content {
        max-width: clamp(336px, 37.5vw, 552px);
        margin: 2rem 0;
    }

    h1 {
        font-size: clamp(48px, 5vw, 80px);
        line-height: 1.1;
        margin-bottom: 1rem;
        font-weight: 900;
        letter-spacing: -0.05em;
    }

    h1 span {
        color: var(--color-primary);
    }

    .sub-title {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 1rem;
    }

    .actions {
        display: flex;
        gap: 1.5rem;
        margin-top: 1rem;
    }

    .hero-image {
        position: absolute;
        inset: 0;
        z-index: -1;
        overflow: hidden;
    }

    .hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right center;
        transform: translateX(20rem);
    }

    .overlay {
        --overlay-white-stop: 60%;
        --overlay-transparent-step-2: 45%;
        --overlay-transparent-step-1: 30%;
        --overlay-transparent: 20%;
        --overlay-position: 80% 70%;

        position: absolute;
        inset: 0;
        background: radial-gradient(
            circle at var(--overlay-position),
            transparent var(--overlay-transparent),
            rgba(255, 255, 255, 0.3) var(--overlay-transparent-step-1),
            rgba(255, 255, 255, 0.85) var(--overlay-transparent-step-2),
            white var(--overlay-white-stop)
        );
        pointer-events: none;
    }

    .wrapper {
        max-width: var(--max-width);
        margin: 0 auto;
        width: 100%;
        padding: 129px 0 3rem;
    }

    @media (max-width: 1279px) {
        .overlay {
            --overlay-white-stop: 50%;
        }
    }

    @media (max-width: 1023px) {
        .hero-image img {
            object-position: center;
            transform: translateX(12rem);
        }

        .overlay {
            --overlay-transparent-step-1: 30%;
            --overlay-transparent-step-2: 40%;
            --overlay-transparent: 15%;
            --overlay-position: 80% 60%;
        }
    }

    @media (max-width: 767px) {
        .overlay {
            --overlay-transparent-step-1: 25%;
        }
    }

    @media (max-width: 639px) {
        .hero-image img {
            transform: translateX(0);
        }

        .overlay {
            background: rgba(255, 255, 255, 0.5);
        }

        .wrapper {
            padding-bottom: 7rem;
        }
    }
</style>

<section>
    <div class="hero-image">
        <Image width="1653" height="1607" src={Hero} alt="" loading="eager" />
        <div class="overlay"></div>
    </div>
    <div class="wrapper">
        <div class="content">
            <h1>TEKNOLOGI YANG MENDORONG <span>KEMAJUAN INDUSTRI</span></h1>
            <p class="sub-title">Tindakan Cepat, Respons Cepat, Hasil yang Dapat Diandalkan</p>
            <p class="description">
                Menyediakan solusi teknik terpadu dan otomatisasi industri yang andal untuk memastikan operasi Anda
                tetap efisien, aman, dan selangkah lebih maju dari masa depan
            </p>
            <div class="actions">
                <CTA text="JELAJAHI PROYEK" href="/#projects" />
                <CTA text="PROFIL PERUSAHAAN" variant="outline" href="/#about" />
            </div>
        </div>
    </div>
</section>