@use '../../../styles/variables' as *;
@use '../../../styles/mixins' as *;

.awt-child-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: var(--awt-hero-pt, 6rem);
    padding-bottom: var(--awt-hero-pb, 8rem);
    background-color: var(--awt-hero-bg, rgba(0, 198, 255, 0.1));
    box-sizing: border-box;

    *,
    *::before,
    *::after {
        box-sizing: inherit;
    }

    &__wave {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        line-height: 0;
        z-index: 1;
        pointer-events: none;

        svg {
            display: block;
            width: 100%;
            height: auto;
        }
    }

    &__container {
        @include awt-container;
        position: relative;
        z-index: 10;
    }

    &__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        align-items: center;

        @include md {
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
        }
    }

    &__content {
        text-align: center;

        @include md {
            text-align: left;
        }
    }

    &__title {
        line-height: 1.1;
        margin: 0 0 1.5rem 0;
    }

    &__description {
        margin: 0 0 2.5rem 0;
    }

    &__actions {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        justify-content: center;
        align-items: center;

        @include sm {
            flex-direction: row;
        }

        @include md {
            justify-content: flex-start;
            align-items: flex-start;
        }
    }

    &__btn-wrapper {
        display: inline-block;
    }

    &__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        cursor: pointer;
        transition: transform $awt-transition-fast, background-color $awt-transition-fast, color $awt-transition-fast, box-shadow $awt-transition-fast, border-color $awt-transition-fast;
        white-space: nowrap;
    }

    &__media {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &__media-wrap {
        position: relative;
        display: inline-block;
    }

    // --- FUN VARIANT STYLES ---
    &--fun {
        background-color: var(--awt-hero-bg, rgba(0, 198, 255, 0.1));

        .awt-child-hero__title {
            font-family: $awt-font-sans;
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            font-weight: 900;
            color: var(--awt-hero-title-color, $awt-color-navy);
            letter-spacing: -0.02em;
        }

        .awt-child-hero__description {
            font-size: 1.25rem;
            color: var(--awt-hero-desc-color, rgba(38, 70, 83, 0.8));
            line-height: 1.6;
            max-width: 32rem;
            margin-left: auto;
            margin-right: auto;

            @include md {
                margin-left: 0;
                margin-right: 0;
            }
        }

        .awt-child-hero__btn--primary {
            padding: 1rem 2rem;
            font-size: 1.125rem;
            font-weight: 900;
            border-radius: $awt-radius-full;
            border: 2px solid $awt-color-navy;
            background-color: var(--awt-hero-btn1-bg, $awt-color-yellow-sun);
            color: var(--awt-hero-btn1-text, $awt-color-navy);
            box-shadow: 0 4px 0 $awt-color-navy;

            &:hover {
                background-color: var(--awt-hero-btn1-hover-bg, #facc15);
                color: var(--awt-hero-btn1-hover-text, $awt-color-navy);
                transform: translateY(-2px);
                box-shadow: 0 6px 0 $awt-color-navy;
            }

            &:active {
                transform: translateY(2px);
                box-shadow: 0 2px 0 $awt-color-navy;
            }
        }

        .awt-child-hero__btn--secondary {
            padding: 1rem 2rem;
            font-size: 1.125rem;
            font-weight: 900;
            border-radius: $awt-radius-full;
            border: 2px solid $awt-color-navy;
            background-color: var(--awt-hero-btn2-bg, #ffffff);
            color: var(--awt-hero-btn2-text, $awt-color-navy);
            box-shadow: 0 4px 0 $awt-color-navy;

            &:hover {
                background-color: var(--awt-hero-btn2-hover-bg, #f8fafc);
                color: var(--awt-hero-btn2-hover-text, $awt-color-navy);
                transform: translateY(-2px);
                box-shadow: 0 6px 0 $awt-color-navy;
            }

            &:active {
                transform: translateY(2px);
                box-shadow: 0 2px 0 $awt-color-navy;
            }
        }

        .awt-child-hero__illustration {
            margin: 0;
            border-radius: $awt-radius-lg;
            box-shadow: $awt-shadow-xl;
            max-width: 32rem;
            width: 100%;
            transform: rotate(2deg);
            overflow: hidden;

            img {
                display: block;
                width: 100%;
                height: auto;
            }
        }

        .awt-child-hero__author-avatar {
            position: absolute;
            bottom: -3rem;
            right: -3rem;
            width: 8rem;
            height: 8rem;
            margin: 0;
            border-radius: $awt-radius-full;
            border: 8px solid #ffffff;
            box-shadow: $awt-shadow-2xl;
            transform: rotate(-6deg);
            overflow: hidden;
            z-index: 20;

            @include md {
                width: 10rem;
                height: 10rem;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }
        }
    }

    // --- ELEGANT VARIANT STYLES ---
    &--elegant {
        background-color: var(--awt-hero-bg, #f8fafc);

        .awt-child-hero__title {
            font-family: $awt-font-serif;
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            font-weight: 700;
            color: var(--awt-hero-title-color, #1e293b);
            letter-spacing: -0.01em;
        }

        .awt-child-hero__description {
            font-family: $awt-font-sans;
            font-size: 1.25rem;
            font-weight: 300;
            color: var(--awt-hero-desc-color, #64748b);
            line-height: 1.7;
            max-width: 32rem;
            margin-left: auto;
            margin-right: auto;

            @include md {
                margin-left: 0;
                margin-right: 0;
            }
        }

        .awt-child-hero__btn--primary {
            padding: 0.875rem 2rem;
            font-size: 1rem;
            font-weight: 500;
            border-radius: $awt-radius-sm;
            border: 1px solid transparent;
            background-color: var(--awt-hero-btn1-bg, #0f172a);
            color: var(--awt-hero-btn1-text, #ffffff);
            box-shadow: $awt-shadow-sm;

            &:hover {
                background-color: var(--awt-hero-btn1-hover-bg, #1e293b);
                color: var(--awt-hero-btn1-hover-text, #ffffff);
                box-shadow: $awt-shadow-md;
            }
        }

        .awt-child-hero__btn--secondary {
            padding: 0.875rem 2rem;
            font-size: 1rem;
            font-weight: 500;
            border-radius: $awt-radius-sm;
            border: 1px solid var(--awt-hero-btn2-bg, #0f172a);
            background-color: var(--awt-hero-btn2-bg, transparent);
            color: var(--awt-hero-btn2-text, #0f172a);

            &:hover {
                background-color: var(--awt-hero-btn2-hover-bg, #f1f5f9);
                color: var(--awt-hero-btn2-hover-text, #0f172a);
            }
        }

        .awt-child-hero__media-wrap {
            width: 100%;
            max-width: 26rem;
        }

        .awt-child-hero__media-backdrop {
            position: absolute;
            inset: 0;
            transform: translate(1rem, 1rem);
            background-color: rgba(15, 23, 42, 0.08);
            border-radius: $awt-radius-lg;
            z-index: 0;
        }

        .awt-child-hero__illustration {
            position: relative;
            z-index: 10;
            margin: 0;
            width: 100%;
            aspect-ratio: 4 / 5;
            background-color: #e2e8f0;
            border-radius: $awt-radius-lg;
            overflow: hidden;
            box-shadow: $awt-shadow-xl;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }
        }
    }
}