@extends('layouts.main')

@section('content')
    <!-- BACKGROUND SVG SILHOUETTE -->
    <div id="background">
        <br />
<b>Warning</b>:  include(images/background-waves.svg): Failed to open stream: No such file or directory in <b>/home/itsmeny/cdlm/resources/views/symptom.blade.php</b> on line <b>6</b><br />
<br />
<b>Warning</b>:  include(images/background-waves.svg): Failed to open stream: No such file or directory in <b>/home/itsmeny/cdlm/resources/views/symptom.blade.php</b> on line <b>6</b><br />
<br />
<b>Warning</b>:  include(): Failed opening 'images/background-waves.svg' for inclusion (include_path='.:/usr/local/php8.3/lib/php') in <b>/home/itsmeny/cdlm/resources/views/symptom.blade.php</b> on line <b>6</b><br />
    </div>
    <!-- END OF BACKGROUND SVG SILHOUETTE -->
    <div class="mobile-menu-effect">
        <section
            class="relative overflow-hidden pb-12 pt-32 sm:pb-16 sm:pt-32 lg:pb-24 xl:pb-32 xl:pt-44">
            <div class="relative z-20 mx-auto max-w-7xl px-6 lg:px-8">
                <div class="mx-auto max-w-2xl text-center">
                    <h1 class="text-4xl font-bold tracking-tight text-goldLight sm:text-6xl">
                        {!! preg_replace(rand(0, 1) ? '/(\S+\s+\S+)$/' : '/(\S+)$/', '<span class="text-gold">$1</span>', $symptom->name); !!}
                    </h1>
                    <h2 class="mt-6 text-lg leading-8 text-goldLight">
                        {{ $symptom->short_description ?? '' }}
                    </h2>
                    <div class="mt-10 flex items-center justify-center gap-x-6">
                        <a class="isomorphic-link isomorphic-link--internal inline-flex items-center justify-center gap-2 font-black rounded-full bg-goldLight px-4 py-3 text-sm text-greenchic shadow-sm transition-all duration-150 hover:bg-gold-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gold-600"
                            href="/admin">Je prends rendez-vous&nbsp;<i class="fa-light fa-calendar"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <section
            class="relative overflow-hidden px-6 mt-10 pb-8 pt-8 sm:pb-8 sm:pt-8 lg:pb-8 xl:pb-8 xl:pt-8 bg-goldVLight" id="description">
            <div class="relative mx-auto max-w-lg">
                <img class="w-full rounded-2xl shadow" src="{{ asset($symptom->getFirstMediaUrl('thumbnails', 'large')) }}" alt="">
            </div>
            <div class="relative mx-auto mt-10 max-w-lg text-grey-900 text-left rounded-lg text-greenchic">
                {!! $symptom->description ?? '' !!}
            </div>
        </section>


        <footer class="m-4">
            <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
                <div class="sm:flex sm:items-center sm:justify-between">
                    <a href="https://lacliniquedudrainage.com/" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
                        <img loading="lazy" src="{{ asset('images/logo.jpeg') }}" class="h-8" alt="CDLM Logo" />
                        <span class="self-center text-2xl font-semibold whitespace-nowrap text-goldLight">La Clinique du Drainage</span>
                    </a>
                    <ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-goldLight sm:mb-0">
                        <li>
                            <a href="#" class="hover:underline me-4 md:me-6">À Propos</a>
                        </li>
                        <li>
                            <a href="#" class="hover:underline me-4 md:me-6">RGPD</a>
                        </li>
                        <li>
                            <a href="#" class="hover:underline me-4 md:me-6">Politique des Cookies</a>
                        </li>
                        <li>
                            <a href="#" class="hover:underline">Contact</a>
                        </li>
                    </ul>
                </div>
                <hr class="my-6 sm:mx-auto border-goldLight lg:my-8" />
                <span class="block text-sm sm:text-center text-goldLight">© 2024 <a href="https://lacliniquedudrainage.com/" class="hover:underline">La Clinique du Drainage</a>. Tous Droits Réservés.</span>
            </div>
        </footer>


            
    </div>


@endsection