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

<style>
    :root {
        --brand-red: #e6353f;
        --brand-red-dark: #d42b34;
        --text-dark: #2b2b2b;
        --border-red: #f4a9ad;
    }

    .fixed-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;
    }

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

    .fixed-products {
        max-width: 1300px;
        margin: 40px auto;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .product-card {
        border: 1px solid var(--border-red);
        border-radius: 4px;
        padding: 30px;
        display: flex;
        gap: 30px;
        align-items: flex-start;
    }

    .product-card__media {
        flex: 0 0 350px;
    }

    .product-card__media img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 2px;
    }

    .product-card__media-group {
        display: flex;
        gap: 8px;
    }

    .product-card__media-group img {
        flex: 1;
    }

    .product-card__content {
        flex: 1;
    }

    .product-card__content h2 {
        color: var(--brand-red);
        font-size: 22px;
        font-weight: 700;
        margin: 0 0 12px;
    }

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

    .product-card__actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin: 20px 0;
    }

    .btn-pill {
        display: inline-block;
        background: var(--brand-red);
        color: #fff;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 10px 22px;
        border-radius: 20px;
        transition: background 0.2s ease;
    }

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

    .product-card__features {
        margin: 16px 0 0;
        padding-left: 20px;
        color: var(--text-dark);
        font-size: 14px;
        line-height: 1.7;
    }

    .product-card__features--plain {
        list-style: none;
        padding-left: 0;
    }

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

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

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

<section class="fixed-products">

    {{-- BruxZir --}}
    <div class="product-card">
        <div class="product-card__media">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/4ea9b402-1b0f-4ab6-ad68-10284714f8a9.jpg' }}" alt="BruxZir">
        </div>
        <div class="product-card__content">
            <h2>{{ __('messages.fixed_bruxzir_title') }}</h2>
            <p>{{ __('messages.fixed_bruxzir_description_1') }}</p>
            <p>{{ __('messages.fixed_bruxzir_description_2') }}</p>
            <div class="product-card__actions">
                <a href="#" class="btn-pill">{{ __('messages.fixed_indications') }}</a>
                <a href="#" class="btn-pill">{{ __('messages.fixed_prep_guidelines') }}</a>
                <a href="#" class="btn-pill">{{ __('messages.fixed_cementation') }}</a>
            </div>
            <ul class="product-card__features">
                <li>{{ __('messages.fixed_bruxzir_feature_1') }}</li>
                <li>{{ __('messages.fixed_bruxzir_feature_2') }}</li>
                <li>{{ __('messages.fixed_bruxzir_feature_3') }}</li>
            </ul>
        </div>
    </div>

    {{-- 3D Multilithic Zirconia --}}
    <div class="product-card">
        <div class="product-card__media">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/WhatsApp-Image-2021-05-03-at-3.08.31-PM.jpeg' }}" alt="3D Multilithic Zirconia">
        </div>
        <div class="product-card__content">
            <h2>{{ __('messages.fixed_3d_multilithic_title') }}</h2>
            <p>{{ __('messages.fixed_3d_multilithic_description') }}</p>
            <div class="product-card__actions">
                <a href="#" class="btn-pill">{{ __('messages.fixed_indications') }}</a>
                <a href="#" class="btn-pill">{{ __('messages.fixed_prep_guidelines') }}</a>
                <a href="#" class="btn-pill">{{ __('messages.fixed_cementation') }}</a>
            </div>
            <ul class="product-card__features product-card__features--plain">
                <li>{{ __('messages.fixed_3d_multilithic_feature_1') }}</li>
            </ul>
        </div>
    </div>

    {{-- E.Z layered Zirconia --}}
    <div class="product-card">
        <div class="product-card__media">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/WhatsApp-Image-2021-05-03-at-3.07.48-PM.jpeg' }}" alt="E.Z layered Zirconia">
        </div>
        <div class="product-card__content">
            <h2>{{ __('messages.fixed_ez_layered_title') }}</h2>
            <p>{{ __('messages.fixed_ez_layered_description') }}</p>
            <div class="product-card__actions">
                <a href="#" class="btn-pill">{{ __('messages.fixed_indications') }}</a>
                <a href="#" class="btn-pill">{{ __('messages.fixed_prep_guidelines') }}</a>
                <a href="#" class="btn-pill">{{ __('messages.fixed_cementation') }}</a>
            </div>
            <ul class="product-card__features">
                <li>{{ __('messages.fixed_ez_layered_feature_1') }}</li>
                <li>{{ __('messages.fixed_ez_layered_feature_2') }}</li>
                <li>{{ __('messages.fixed_ez_layered_feature_3') }}</li>
            </ul>
        </div>
    </div>

    {{-- IPS E.Max --}}
    <div class="product-card">
        <div class="product-card__media">
            <div class="product-card__media-group">
                <img src="{{ URL::to('/').'/public/assets/images/product_images/shutterstock_1933826033.png' }}" alt="IPS E.Max">
            </div>
        </div>
        <div class="product-card__content">
            <h2>{{ __('messages.fixed_ips_emax_title') }}</h2>
            <p>{{ __('messages.fixed_ips_emax_description') }}</p>
            <div class="product-card__actions">
                <a href="#" class="btn-pill">{{ __('messages.fixed_indications') }}</a>
                <a href="#" class="btn-pill">{{ __('messages.fixed_prep_guidelines') }}</a>
                <a href="#" class="btn-pill">{{ __('messages.fixed_cementation') }}</a>
            </div>
            <ul class="product-card__features">
                <li>{{ __('messages.fixed_ips_emax_feature_1') }}</li>
                <li>{{ __('messages.fixed_ips_emax_feature_2') }}</li>
                <li>{{ __('messages.fixed_ips_emax_feature_3') }}</li>
                <li>{{ __('messages.fixed_ips_emax_feature_4') }}</li>
                <li>{{ __('messages.fixed_ips_emax_feature_5') }}</li>
                <li>{{ __('messages.fixed_ips_emax_feature_6') }}</li>
            </ul>
        </div>
    </div>

    {{-- SoReal Premium Zirconia --}}
    <div class="product-card">
        <div class="product-card__media">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/shutterstock_1218119983.png' }}" alt="SoReal Premium Zirconia">
        </div>
        <div class="product-card__content">
            <h2>{{ __('messages.fixed_soreal_premium_title') }}</h2>
            <p>{{ __('messages.fixed_soreal_premium_description') }}</p>
            <div class="product-card__actions">
                <a href="#" class="btn-pill">{{ __('messages.fixed_indications') }}</a>
                <a href="#" class="btn-pill">{{ __('messages.fixed_prep_guidelines') }}</a>
            </div>
            <ul class="product-card__features">
                <li>{{ __('messages.fixed_soreal_premium_feature_1') }}</li>
                <li>{{ __('messages.fixed_soreal_premium_feature_2') }}</li>
                <li>{{ __('messages.fixed_soreal_premium_feature_3') }}</li>
            </ul>
        </div>
    </div>

    {{-- PFM – Porcelain Fused to Metal --}}
    <div class="product-card">
        <div class="product-card__media">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/768-1-scaled.jpg' }}" alt="PFM - Porcelain Fused to Metal">
        </div>
        <div class="product-card__content">
            <h2>{{ __('messages.fixed_pfm_title') }}</h2>
            <p>{{ __('messages.fixed_pfm_description') }}</p>
            <div class="product-card__actions">
                <a href="#" class="btn-pill">{{ __('messages.fixed_indications') }}</a>
                <a href="#" class="btn-pill">{{ __('messages.fixed_prep_guidelines') }}</a>
                <a href="#" class="btn-pill">{{ __('messages.fixed_cementation') }}</a>
            </div>
            <ul class="product-card__features">
                <li>{{ __('messages.fixed_pfm_feature_1') }}</li>
                <li>{{ __('messages.fixed_pfm_feature_2') }}</li>
            </ul>
        </div>
    </div>

    {{-- Full Cast Gold --}}
    <div class="product-card">
        <div class="product-card__media">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/3D-Multilithic-1-scaled.jpg' }}" alt="Full Cast Gold">
        </div>
        <div class="product-card__content">
            <h2>{{ __('messages.fixed_full_cast_gold_title') }}</h2>
            <p>{{ __('messages.fixed_full_cast_gold_description') }}</p>
            <div class="product-card__actions">
                <a href="#" class="btn-pill">{{ __('messages.fixed_indications') }}</a>
                <a href="#" class="btn-pill">{{ __('messages.fixed_prep_guidelines') }}</a>
                <a href="#" class="btn-pill">{{ __('messages.fixed_cementation') }}</a>
            </div>
            <ul class="product-card__features">
                <li>{{ __('messages.fixed_full_cast_gold_feature_1') }}</li>
                <li>{{ __('messages.fixed_full_cast_gold_feature_2') }}</li>
            </ul>
        </div>
    </div>

    {{-- SoReal CAD-CAM Temporaries --}}
    <div class="product-card">
        <div class="product-card__media">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/WhatsApp-Image-2021-05-07-at-7.25.04-PM.jpeg' }}" alt="SoReal CAD-CAM Temporaries">
        </div>
        <div class="product-card__content">
            <h2>{{ __('messages.fixed_soreal_temporaries_title') }}</h2>
            <p>{{ __('messages.fixed_soreal_temporaries_description') }}</p>
            <div class="product-card__actions">
                <a href="#" class="btn-pill">{{ __('messages.fixed_indications') }}</a>
                <a href="#" class="btn-pill">{{ __('messages.fixed_prep_guidelines') }}</a>
                <a href="#" class="btn-pill">{{ __('messages.fixed_cementation') }}</a>
            </div>
            <ul class="product-card__features">
                <li>{{ __('messages.fixed_soreal_temporaries_feature_1') }}</li>
                <li>{{ __('messages.fixed_soreal_temporaries_feature_2') }}</li>
                <li>{{ __('messages.fixed_soreal_temporaries_feature_3') }}</li>
            </ul>
        </div>
    </div>

</section>

@endsection