@extends('layouts.main')
@section('content')

<style>
    :root {
        --brand-red: #e6353f;
        --text-dark: #2b2b2b;
        --card-bg: #f2f2f2;
    }

    .products-hero {
        background: linear-gradient(rgba(0,0,0,0.70), rgba(0,0,0,0.70)), url('{{ URL::to('/').'/public/assets/images/product_images/shutterstock_414749530.png' }}') center center / cover no-repeat;
        padding: 70px 20px;
        text-align: center;
    }

    .products-hero h1 {
        color: #fff;
        font-size: 34px;
        font-weight: 700;
        margin: 0;
    }

    .aligners {
        max-width: 1300px;
        margin: 50px auto;
        padding: 0 20px;
    }

    .aligners__title {
        text-align: center;
        color: var(--text-dark);
        font-size: 26px;
        font-weight: 700;
        margin: 0 0 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .aligners__logo {
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
        font-weight: 800;
        font-size: 26px;
        line-height: 1;
    }

    .aligners__logo-illusion {
        color: var(--brand-red);
    }

    .aligners__logo-aligners {
        color: #8a8a8a;
        font-weight: 400;
    }

    .aligner-card {
        background: var(--card-bg);
        border-radius: 4px;
        padding: 40px;
        display: flex;
        align-items: center;
        gap: 40px;
    }

    .aligner-card__content {
        flex: 1;
    }

    .aligner-card__content h3 {
        color: var(--brand-red);
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 12px;
    }

    .aligner-card__content p {
        color: var(--text-dark);
        font-size: 14px;
        line-height: 1.6;
        margin: 0 0 12px;
        text-align: justify;
    }

    .aligner-card__content ul {
        margin: 0 0 20px;
        padding-left: 20px;
        color: var(--text-dark);
        font-size: 14px;
        line-height: 1.8;
    }

    .btn-outline {
        display: inline-block;
        background: transparent;
        color: var(--brand-red);
        border: 3px solid var(--brand-red);
        text-decoration: none;
        font-size: 16px;
        font-weight: 600;
        padding: 7px 10px;
        border-radius: 2px;
        transition: all 0.2s ease;
    }

    .btn-outline:hover {
        background: var(--brand-red);
        color: #fff;
    }

    .aligner-card__media {
        flex: 0 0 400px;
    }

    .aligner-card__media img {
        width: 100%;
        height: auto;
        display: block;
    }

    @media (max-width: 767px) {
        .aligners__title {
            flex-direction: column;
        }

        .aligner-card {
            flex-direction: column;
        }

        .aligner-card__media {
            flex: none;
            width: 100%;
            order: -1;
        }
    }
</style>

<section class="products-hero">
    <h1>{{ __('messages.aligners_our_products') }}</h1>
</section>

<section class="aligners">
    <h2 class="aligners__title">
        {{ __('messages.aligners_title') }}
        <span class="aligners__logo">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/download.png' }}" alt="Illusion Aligners">
        </span>
    </h2>

    <div class="aligner-card">
        <div class="aligner-card__content">
            <h3>{{ __('messages.aligners_heading') }}</h3>
            <p>{{ __('messages.aligners_description') }}</p>
            <ul>
                <li>{{ __('messages.aligners_high_quality_materials') }}</li>
                <li>{{ __('messages.aligners_quick_turnaround_time') }}</li>
                <li>{{ __('messages.aligners_user_friendly_customer_portal') }}</li>
                <li>{{ __('messages.aligners_clinician_controlled_treatment') }}</li>
            </ul>
            <a href="https://www.illusionaligners.com/usa/" class="btn-outline">{{ __('messages.aligners_learn_more') }}</a>
        </div>
        <div class="aligner-card__media">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/aligner_image.png' }}" alt="Illusion Aligners">
        </div>
    </div>

</section>

@endsection