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

<style>
    :root {
        --brand-red: #e6353f;
        --brand-red-dark: #c92a33;
        --text-dark: #333;
        --text-grey: #777;
    }

    html {
        scroll-behavior: smooth;
    }

    /* ======= MAIN SECTION ======= */
    .main-section {
        display: flex;
        height: 80vh;
        position: relative;
        z-index: 1;
    }

    .step-box.active-step h4 {
        color: #fff;
    }

    .left-section {
        width: 50%;
        background: var(--brand-red);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 60px 40px 40px;
        position: relative;
        background-image: url('{{ asset('images/scanners/banner-bg.png') }}');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .content-box {
        background: #ffffff;
        padding: 60px;
        border-radius: 20px;
        max-width: 500px;
    }

    .content-box h1 {
        color: var(--brand-red);
        font-size: 35px;
        line-height: 1.3;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .content-box p {
        color: var(--text-grey);
        font-size: 16px;
        margin-bottom: 30px;
    }

    .btn {
        display: inline-block;
        background: var(--brand-red);
        color: #fff;
        padding: 12px 30px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 16px;
        transition: 0.3s ease;
    }

    .btn:hover {
        background: var(--brand-red-dark);
    }

    .right-section {
        width: 50%;
    }

    .right-section img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    @media (max-width: 768px) {
        .main-section {
            flex-direction: column-reverse;
            height: auto;
        }

        .left-section,
        .right-section {
            width: 100%;
        }

        .right-section img {
            height: 400px;
        }
    }
    /* ======= END MAIN SECTION ======= */

    /* ======= SCANNER SECTION ======= */
    .scanner-section {
        padding: 60px 40px;
        background: #fff;
    }

    .scanner-inner {
        max-width: 1200px;
        margin: auto;
    }

    /* STEPS */
    .steps-row {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 40px;
        min-width: 180px;
    }

    .step-box {
        background: #eee;
        padding: 20px 30px;
        border-radius: 10px;
        text-align: center;
        transition: 0.3s ease;
        flex: 1;
        min-width: 160px;
    }

    .step-box h4 {
        margin: 0 0 6px;
        font-size: 15px;
        font-weight: 700;
    }

    .step-box p {
        margin: 0;
        font-size: 13px;
        opacity: 0.7;
    }

    .step-box.active-step {
        background: var(--brand-red);
        color: #fff;
    }

    .step-box.active-step p {
        opacity: 0.9;
    }

    /* MAIN WRAPPER */
    .scan-wrapper {
        display: flex;
        gap: 60px;
        align-items: flex-start;
    }

    /* BRAND LIST (LEFT) */
    .brand-list {
        width: 38%;
    }

    .brand-item-wrap {
        border-bottom: 1px solid #e8e8e8;
    }

    .brand-name {
        padding: 16px 4px;
        cursor: pointer;
        font-size: 15px;
        color: var(--text-dark);
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: color 0.2s;
        user-select: none;
    }

    .brand-name:hover {
        color: var(--brand-red);
    }

    .brand-name.active {
        color: var(--brand-red);
        font-weight: 600;
    }

    /* Arrow icon: black by default, red on hover/active */
    .brand-arrow {
        font-size: 16px;
        color: var(--text-dark);
        opacity: 1;
        transition: transform 0.3s ease, color 0.2s ease;
    }

    .brand-name:hover .brand-arrow {
        color: var(--brand-red);
    }

    .brand-name.active .brand-arrow {
        color: var(--brand-red);
        transform: rotate(180deg);
    }

    /* Accordion */
    .brand-dropdown {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }

    .brand-dropdown.open {
        max-height: 600px;
    }

    .brand-dropdown-inner {
        padding: 14px 10px 18px;
        font-size: 14px;
        color: #666;
        line-height: 1.9;
        background: #fff9f9;
        border-left: 3px solid var(--brand-red);
        margin-bottom: 10px;
        border-radius: 0 6px 6px 0;
    }

    .brand-dropdown-inner ol,
    .brand-dropdown-inner ul {
        padding-left: 18px;
        margin: 6px 0;
    }

    .brand-dropdown-inner strong {
        color: #444;
    }

    .brand-dropdown-inner p {
        margin: 4px 0;
    }

    /* RIGHT IMAGE PANEL */
    .right-panel {
        flex: 1;
        position: sticky;
        top: 30px;
    }

    .preview-img {
        width: 100%;
        border-radius: 15px;
        border: 4px solid var(--brand-red);
        display: block;
        transition: opacity 0.3s;
    }

    @media (max-width: 768px) {
        .scan-wrapper {
            flex-direction: column;
        }

        .brand-list {
            width: 100%;
            text-align: center;
        }

        .right-panel {
            width: 100%;
            position: static;
        }

        .steps-row {
            flex-direction: column;
            max-width: 100%;
        }

        .scanner-section {
            padding: 40px 20px;
        }
    }
    /* ======= END MAIN SECTION ======= */
</style>

<section class="main-section">
    <!-- Left Section -->
    <div class="left-section">
        <div class="content-box">
            <h1>
                {{ __('messages.send_a_digital_case_title_line_1') }} <br>
                {{ __('messages.send_a_digital_case_title_line_2') }} <br>
                {{ __('messages.send_a_digital_case_title_line_3') }}
            </h1>
            <p>
                {{ __('messages.send_a_digital_case_description_line_1') }}
            </p>
            <div style="text-align: center;"><a href="#scannersection" class="btn">{{ __('messages.send_a_digital_case_connect_now') }}</a></div>
        </div>
    </div>

    <!-- Right Section -->
    <div class="right-section">
        <img src="{{ URL::to('/').'/public/assets/images/product_images/banner-image.jpg' }}" alt="Dental Machine">
    </div>
</section>

<!-- SCANNER SECTION -->
<div class="scanner-section" id="scannersection">
    <div class="scanner-inner">

        <div class="scan-wrapper">

            <!-- STEPS (LEFT COLUMN) -->
            <div class="steps-row">
                <div class="step-box active-step" id="step1">
                    <h4>{{ __('messages.send_a_digital_case_step_1') }}</h4>
                    <p>{{ __('messages.send_a_digital_case_step_1_title') }}</p>
                </div>
                <div class="step-box" id="step2">
                    <h4>{{ __('messages.send_a_digital_case_step_2') }}</h4>
                    <p>{{ __('messages.send_a_digital_case_step_2_title') }}</p>
                </div>
            </div>

            <!-- BRAND LIST (MIDDLE) -->
            <div class="brand-list">

                <div class="brand-item-wrap">
                    <div class="brand-name" data-key="carestream" data-image="01.jpg">
                        {{ __('messages.send_a_digital_case_carestream_scanner') }}
                        <i class="fa-solid fa-angle-down brand-arrow"></i>
                    </div>
                    <div class="brand-dropdown">
                        <div class="brand-dropdown-inner">
                            <p>{{ __('messages.send_a_digital_case_carestream_instruction_1') }} <strong>{{ __('messages.send_a_digital_case_carestream_instruction_12') }}</strong> {{ __('messages.send_a_digital_case_carestream_instruction_14') }} <strong>{{ __('messages.send_a_digital_case_carestream_instruction_13') }}</strong>.</p>
                            <p>{{ __('messages.send_a_digital_case_carestream_instruction_2') }}</p>
                            <p><strong>{{ __('messages.send_a_digital_case_carestream_lab_name_label') }}</strong> {{ __('messages.send_a_digital_case_carestream_lab_name') }}<br></p>
                        </div>
                    </div>
                </div>

                <div class="brand-item-wrap">
                    <div class="brand-name" data-key="cerec" data-image="02.jpg">
                        {{ __('messages.send_a_digital_case_cerec_scanner') }}
                        <i class="fa-solid fa-angle-down brand-arrow"></i>
                    </div>
                    <div class="brand-dropdown">
                        <div class="brand-dropdown-inner">
                            <ol>
                                <li>{{ __('messages.send_a_digital_case_cerec_instruction_1') }}</li>
                                <li>{{ __('messages.send_a_digital_case_cerec_instruction_2') }}<strong>{{ __('messages.send_a_digital_case_cerec_instruction_22') }}</strong>.</li>
                                <li>{{ __('messages.send_a_digital_case_cerec_instruction_3') }} <strong>{{ __('messages.send_a_digital_case_cerec_instruction_31') }}</strong> {{ __('messages.send_a_digital_case_carestream_instruction_14') }} <strong>{{ __('messages.send_a_digital_case_cerec_instruction_34') }}</strong>.</li>
                                <li>{{ __('messages.send_a_digital_case_cerec_instruction_4') }}
                                    <ul>
                                        <li>{{ __('messages.send_a_digital_case_cerec_lab_name_label') }} <strong>{{ __('messages.send_a_digital_case_cerec_lab_name') }}</strong></li>
                                        <li>{{ __('messages.send_a_digital_case_cerec_lab_email') }}</li>
                                    </ul>
                                </li>
                                <li>{{ __('messages.send_a_digital_case_cerec_instruction_5') }} <strong>{{ __('messages.send_a_digital_case_cerec_instruction_5') }}</strong>.</li>
                            </ol>
                        </div>
                    </div>
                </div>

                <div class="brand-item-wrap">
                    <div class="brand-name" data-key="heron" data-image="03.jpg">
                        {{ __('messages.send_a_digital_case_heron_scanner') }}
                        <i class="fa-solid fa-angle-down brand-arrow"></i>
                    </div>
                    <div class="brand-dropdown">
                        <div class="brand-dropdown-inner">
                            <ol>
                                <li>{{ __('messages.send_a_digital_case_heron_instruction_1') }} <strong>{{ __('messages.send_a_digital_case_heron_instruction_11') }}</strong> {{ __('messages.send_a_digital_case_heron_instruction_12') }} <strong>{{ __('messages.send_a_digital_case_heron_instruction_13') }}</strong>.</li>
                                <li>{{ __('messages.send_a_digital_case_heron_instruction_2') }}
                                    <ul>
                                        <li><strong>{{ __('messages.send_a_digital_case_heron_lab_name_label') }}</strong> {{ __('messages.send_a_digital_case_heron_lab_name') }}</li>
                                        <li><strong>{{ __('messages.send_a_digital_case_heron_email_label') }}</strong> {{ __('messages.send_a_digital_case_heron_email') }}</li>
                                    </ul>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>

                <div class="brand-item-wrap">
                    <div class="brand-name" data-key="itero" data-image="04.jpg">
                        {{ __('messages.send_a_digital_case_itero_scanner') }}
                        <i class="fa-solid fa-angle-down brand-arrow"></i>
                    </div>
                    <div class="brand-dropdown">
                        <div class="brand-dropdown-inner">
                            <ol>
                                <li>{{ __('messages.send_a_digital_case_itero_instruction_1') }} <strong>{{ __('messages.send_a_digital_case_itero_instruction_12') }}</strong> {{ __('messages.send_a_digital_case_itero_instruction_13') }} <strong>{{ __('messages.send_a_digital_case_itero_instruction_14') }}</strong>.</li>
                                <li>{{ __('messages.send_a_digital_case_itero_instruction_2') }} <strong>{{ __('messages.send_a_digital_case_itero_instruction_21') }}</strong>: {{ __('messages.send_a_digital_case_itero_lab_code') }}
                                    <ul>
                                        <li>{{ __('messages.send_a_digital_case_itero_alternative') }} <strong>{{ __('messages.send_a_digital_case_itero_lab_name') }}</strong></li>
                                    </ul>
                                </li>
                                <li>{{ __('messages.send_a_digital_case_itero_instruction_3') }}</li>
                            </ol>
                        </div>
                    </div>
                </div>

                <div class="brand-item-wrap">
                    <div class="brand-name" data-key="medit" data-image="05.jpg">
                        {{ __('messages.send_a_digital_case_medit_scanner') }}
                        <i class="fa-solid fa-angle-down brand-arrow"></i>
                    </div>
                    <div class="brand-dropdown">
                        <div class="brand-dropdown-inner">
                            <ol>
                                <li>{{ __('messages.send_a_digital_case_medit_instruction_1') }} <strong>{{ __('messages.send_a_digital_case_medit_instruction_11') }}</strong> {{ __('messages.send_a_digital_case_medit_instruction_12') }} <strong>{{ __('messages.send_a_digital_case_medit_instruction_13') }}</strong></li>
                                <li>{{ __('messages.send_a_digital_case_medit_instruction_2') }} <strong>{{ __('messages.send_a_digital_case_medit_instruction_21') }}</strong> {{ __('messages.send_a_digital_case_medit_instruction_22') }} <strong>{{ __('messages.send_a_digital_case_medit_instruction_23') }}</strong>.</li>
                                <li>{{ __('messages.send_a_digital_case_medit_instruction_3') }}
                                    <ul>
                                        <li><strong>{{ __('messages.send_a_digital_case_medit_lab_name_label') }}</strong> {{ __('messages.send_a_digital_case_medit_lab_name') }}</li>
                                        <li><strong>{{ __('messages.send_a_digital_case_medit_email_label') }}</strong> {{ __('messages.send_a_digital_case_medit_email') }}</li>
                                    </ul>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>

                <div class="brand-item-wrap">
                    <div class="brand-name" data-key="planmeca" data-image="06.jpg">
                        {{ __('messages.send_a_digital_case_planmeca_scanner') }}
                        <i class="fa-solid fa-angle-down brand-arrow"></i>
                    </div>
                    <div class="brand-dropdown">
                        <div class="brand-dropdown-inner">
                            <ol>
                                <li>{{ __('messages.send_a_digital_case_planmeca_instruction_1') }} <strong>{{ __('messages.send_a_digital_case_planmeca_instruction_11') }}</strong>.</li>
                                <li>{{ __('messages.send_a_digital_case_planmeca_instruction_2') }}
                                    <ul>
                                        <li><strong>{{ __('messages.send_a_digital_case_planmeca_lab_name_label') }}</strong> {{ __('messages.send_a_digital_case_planmeca_lab_name') }}</li>
                                    </ul>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>

                <div class="brand-item-wrap">
                    <div class="brand-name" data-key="trios" data-image="07.jpg">
                        {{ __('messages.send_a_digital_case_trios_scanner') }}
                        <i class="fa-solid fa-angle-down brand-arrow"></i>
                    </div>
                    <div class="brand-dropdown">
                        <div class="brand-dropdown-inner">
                            <ol>
                                <li>{{ __('messages.send_a_digital_case_trios_instruction_1') }} <strong>{{ __('messages.send_a_digital_case_trios_instruction_11') }}</strong> {{ __('messages.send_a_digital_case_trios_instruction_12') }} <strong>{{ __('messages.send_a_digital_case_trios_instruction_13') }}</strong>.</li>
                                <li>{{ __('messages.send_a_digital_case_trios_instruction_2') }} <strong>{{ __('messages.send_a_digital_case_trios_instruction_21') }}</strong> {{ __('messages.send_a_digital_case_trios_instruction_22') }} <strong>{{ __('messages.send_a_digital_case_trios_instruction_23') }}</strong>.</li>
                                <li>{{ __('messages.send_a_digital_case_trios_instruction_3') }}
                                    <ul>
                                        <li><strong>{{ __('messages.send_a_digital_case_trios_lab_name_label') }}</strong> {{ __('messages.send_a_digital_case_trios_lab_name') }}</li>
                                        <li><strong>{{ __('messages.send_a_digital_case_trios_email_label') }}</strong> {{ __('messages.send_a_digital_case_trios_email') }}</li>
                                    </ul>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>

            </div>
            <!-- end brand-list -->

            <!-- RIGHT IMAGE PANEL -->
            <div class="right-panel">
                <img src="{{ URL::to('/').'/public/assets/images/product_images/01.jpg' }}" class="preview-img" id="previewImage">
            </div>

        </div><!-- end scan-wrapper -->

    </div>
</div>

<script>
    const previewImage = document.getElementById('previewImage');
    const step1        = document.getElementById('step1');
    const step2        = document.getElementById('step2');
    const baseURL      = "{{ URL::to('/').'/public/assets/images/product_images/' }}/";
    const defaultImage = baseURL + "01.jpg";

    let currentKey = null;

    document.querySelectorAll('.brand-name').forEach(brand => {
        const dropdown = brand.nextElementSibling;

        /* HOVER → image change (always on) */
        brand.addEventListener('mouseenter', function () {
            previewImage.src = baseURL + this.dataset.image;
        });

        /* MOUSE LEAVE → restore active or default */
        brand.addEventListener('mouseleave', function () {
            if (currentKey) {
                const active = document.querySelector(`.brand-name[data-key="${currentKey}"]`);
                previewImage.src = baseURL + active.dataset.image;
            } else {
                previewImage.src = defaultImage;
            }
        });

        /* CLICK → accordion toggle */
        brand.addEventListener('click', function () {
            const key = this.dataset.key;
            const isOpen = currentKey === key;

            document.querySelectorAll('.brand-dropdown').forEach(d => d.classList.remove('open'));
            document.querySelectorAll('.brand-name').forEach(b => b.classList.remove('active'));

            if (isOpen) {
                currentKey = null;
                previewImage.src = defaultImage;
                step1.classList.add('active-step');
                step2.classList.remove('active-step');
            } else {
                currentKey = key;
                this.classList.add('active');
                dropdown.classList.add('open');
                previewImage.src = baseURL + this.dataset.image;
                step1.classList.remove('active-step');
                step2.classList.add('active-step');
            }
        });
    });
</script>

@endsection