@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;
    }

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

    .removables_title {
        text-align: center;
        color: var(--text-dark);
        font-size: 28px;
        font-weight: 700;
        margin: 0 0 30px;
    }

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

    .removable-card_content {
        flex: 1;
    }

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

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

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

    .removable-card_media {
        flex: 0 0 400px;
    }

    .removable-card_media img {
        width: 100%;
        height: auto;
        display: block;
    }

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

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

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

<section class="removables">
    <h2 class="removables_title">{{ __('messages.removables_section_title') }}</h2>

    <div class="removable-card">
        <div class="removable-card_content">
            <h3>{{ __('messages.removables_valplast_title') }}</h3>
            <p>{{ __('messages.removables_valplast_description') }}</p>
            <ul>
                <li>{{ __('messages.removables_valplast_feature_1') }}</li>
                <li>{{ __('messages.removables_valplast_feature_2') }}</li>
                <li>{{ __('messages.removables_valplast_feature_3') }}</li>
                <li>{{ __('messages.removables_valplast_feature_4') }}</li>
            </ul>
        </div>
        <div class="removable-card_media">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/Valplast3D-Partial-1-1-2-1.png' }}" alt="Valplast Dentures">
        </div>
    </div>

    <div class="removable-card">
        <div class="removable-card_content">
            <h3>{{ __('messages.removables_complete_dentures_title') }}</h3>
            <p>{{ __('messages.removables_complete_dentures_description') }}</p>
            <ul>
                <li>{{ __('messages.removables_complete_dentures_feature_1') }}</li>
                <li>{{ __('messages.removables_complete_dentures_feature_2') }}</li>
                <li>{{ __('messages.removables_complete_dentures_feature_3') }}</li>
                <li>{{ __('messages.removables_complete_dentures_feature_4') }}</li>
            </ul>
        </div>
        <div class="removable-card_media">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/shutterstock_121276786.png' }}" alt="Complete Dentures">
        </div>
    </div>

    <div class="removable-card">
        <div class="removable-card_content">
            <h3>{{ __('messages.removables_flexible_partials_title') }}</h3>
            <p>{{ __('messages.removables_flexible_partials_description') }}</p>
            <ul>
                <li>{{ __('messages.removables_flexible_partials_feature_1') }}</li>
                <li>{{ __('messages.removables_flexible_partials_feature_2') }}</li>
                <li>{{ __('messages.removables_flexible_partials_feature_3') }}</li>
            </ul>
        </div>
        <div class="removable-card_media">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/shutterstock_1375803749.png' }}" alt="Flexible Partials">
        </div>
    </div>

    <div class="removable-card">
        <div class="removable-card_content">
            <h3>{{ __('messages.removables_combination_crowns_partials_title') }}</h3>
            <p>{{ __('messages.removables_combination_crowns_partials_description') }}</p>
            <ul>
                <li>{{ __('messages.removables_combination_crowns_partials_feature_1') }}</li>
                <li>{{ __('messages.removables_combination_crowns_partials_feature_2') }}</li>
            </ul>
        </div>
        <div class="removable-card_media">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/shutterstock_24547414.png' }}" alt="Combination Crowns & Partials">
        </div>
    </div>

</section>

@endsection