{% block content %}
{% set fp = frontend_payload %}
<!DOCTYPE html>
<html lang="{{ seo.lang if seo else site_settings.lang or 'es-AR' }}">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>{{ seo.title if seo else (site_settings.seo_title or site_settings.title or 'Centro médico') }}</title>
    <meta name="description" content="{{ seo.description if seo else site_settings.meta_description }}">
    {% if site_settings.meta_keywords %}<meta name="keywords" content="{{ site_settings.meta_keywords }}">{% endif %}
    <meta name="robots" content="{{ seo.robots if seo else site_settings.robots_meta }}">
    <link rel="canonical" href="{{ seo.canonical_url if seo else site_settings.url }}">
    {% if site_settings.google_site_verification %}<meta name="google-site-verification" content="{{ site_settings.google_site_verification }}">{% endif %}
    {% if site_settings.bing_site_verification %}<meta name="msvalidate.01" content="{{ site_settings.bing_site_verification }}">{% endif %}

    <meta property="og:type" content="website">
    <meta property="og:locale" content="{{ seo.locale if seo else site_settings.locale }}">
    <meta property="og:site_name" content="{{ site_settings.title or app_name }}">
    <meta property="og:title" content="{{ seo.og_title if seo else site_settings.og_title or site_settings.title }}">
    <meta property="og:description" content="{{ seo.og_description if seo else site_settings.og_description or site_settings.meta_description }}">
    <meta property="og:url" content="{{ seo.canonical_url if seo else site_settings.url }}">
    <meta property="og:image" content="{{ seo.og_image_url if seo else url_for('static', filename='medilab/assets/img/hero-bg.jpg', _external=True) }}">
    <meta property="og:image:alt" content="{{ seo.og_image_alt if seo else site_settings.og_image_alt }}">
    <meta name="twitter:card" content="{{ seo.twitter_card if seo else site_settings.twitter_card }}">
    {% if site_settings.twitter_site %}<meta name="twitter:site" content="{{ site_settings.twitter_site }}">{% endif %}
    <meta name="twitter:title" content="{{ seo.twitter_title if seo else site_settings.twitter_title or site_settings.title }}">
    <meta name="twitter:description" content="{{ seo.twitter_description if seo else site_settings.twitter_description or site_settings.meta_description }}">
    <meta name="twitter:image" content="{{ seo.og_image_url if seo else url_for('static', filename='medilab/assets/img/hero-bg.jpg', _external=True) }}">
    <script type="application/ld+json">{{ schema_json|safe if schema_json else '{}' }}</script>
    <link rel="preload" as="image" href="{{ url_for('static', filename='medilab/assets/img/hero-bg.jpg') }}" fetchpriority="high">

    {% if site_settings.favicon_path %}
    <link rel="icon" href="{{ url_for('static', filename=site_settings.favicon_path) }}">
    {% else %}
    <link rel="icon" href="{{ url_for('static', filename='medilab/assets/img/favicon.png') }}">
    {% endif %}
    <link href="https://fonts.googleapis.com" rel="preconnect">
    <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Poppins:wght@300;400;500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">
    <link href="{{ url_for('static', filename='medilab/assets/vendor/bootstrap/css/bootstrap.min.css') }}"
        rel="stylesheet">
    <link href="{{ url_for('static', filename='medilab/assets/vendor/bootstrap-icons/bootstrap-icons.css') }}"
        rel="stylesheet">
    <link href="{{ url_for('static', filename='medilab/assets/vendor/aos/aos.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='medilab/assets/vendor/fontawesome-free/css/all.min.css') }}"
        rel="stylesheet">
    <link href="{{ url_for('static', filename='medilab/assets/vendor/glightbox/css/glightbox.min.css') }}"
        rel="stylesheet">
    <link href="{{ url_for('static', filename='medilab/assets/vendor/swiper/swiper-bundle.min.css') }}"
        rel="stylesheet">

    <link href="{{ url_for('static', filename='medilab/assets/css/main.css') }}" rel="stylesheet">
    <style>
      :root {
        --site-primary: {{ site_settings.primary_color or '#1977cc' }};
        --site-secondary: {{ site_settings.secondary_color or '#0d6efd' }};
        --site-accent: {{ site_settings.accent_color or '#0dcaf0' }};
        --site-body-font: '{{ site_settings.body_font or 'Roboto' }}', sans-serif;
        --site-heading-font: '{{ site_settings.heading_font or 'Poppins' }}', sans-serif;
        --site-base-size: {{ site_settings.base_font_size or '16' }}px;
        --site-topbar-bg: {{ site_settings.topbar_bg or '#1977cc' }};
        --site-topbar-text: {{ site_settings.topbar_text or '#ffffff' }};
        --site-header-bg: {{ site_settings.header_bg or '#ffffff' }};
        --site-header-text: {{ site_settings.header_text or '#2c4964' }};
        --site-nav-text: {{ site_settings.nav_text or '#2c4964' }};
        --site-nav-hover: {{ site_settings.nav_hover or site_settings.primary_color or '#1977cc' }};
        --site-hero-bg: {{ site_settings.hero_bg or '#f3f9fd' }};
        --site-hero-surface: {{ site_settings.hero_surface or '#ffffff' }};
        --site-section-bg: {{ site_settings.section_bg or '#ffffff' }};
        --site-section-muted-bg: {{ site_settings.section_muted_bg or '#f7fbff' }};
        --site-card-bg: {{ site_settings.card_bg or '#ffffff' }};
        --site-card-text: {{ site_settings.card_text or '#444444' }};
        --site-title-color: {{ site_settings.title_color or '#2c4964' }};
        --site-footer-bg: {{ site_settings.footer_bg or '#0f2b45' }};
        --site-footer-text: {{ site_settings.footer_text or '#ffffff' }};
        --site-button-text: {{ site_settings.button_text or '#ffffff' }};
        --site-radius: {{ site_settings.border_radius or '20' }}px;
      }
      body, p, li, a, input, textarea, button { font-family: var(--site-body-font); font-size: var(--site-base-size); }
      h1, h2, h3, h4, h5, h6, .sitename { font-family: var(--site-heading-font); }
      a, .section-title h2, .stats i, .icon-box i, .service-item .icon i { color: var(--site-primary); }
      .btn-primary, .appointment .php-email-form button[type=submit], .hero .btn-get-started { background: var(--site-primary); border-color: var(--site-primary); color: var(--site-button-text); }
      .cookie-banner a.btn, #publicSitePopup .btn { min-width: 120px; }
      .frontend-whatsapp-float {
        position: fixed;
        right: 15px;
        bottom: 72px;
        width: 44px;
        height: 44px;
        z-index: 99999;
        border-radius: 50%;
        background: #25d366;
        color: #fff !important;
        box-shadow: 0 10px 28px rgba(0,0,0,.22);
        text-decoration: none;
        transition: all .25s ease;
      }
      .frontend-whatsapp-float:hover { transform: translateY(-3px); color:#fff !important; box-shadow: 0 14px 34px rgba(0,0,0,.30); }
      .frontend-whatsapp-float i { font-size: 1.35rem; line-height: 1; }
      .frontend-whatsapp-label { font-size: .72rem; font-weight: 800; margin-left: -1.08rem; }
      @media (max-width: 575px) {
        .frontend-whatsapp-float { right: 15px; bottom: 68px; width: 42px; height: 42px; }
      }
    </style>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/ai_chatbot.css') }}">
</head>

<body class="index-page">
    <a class="skip-link" href="#main-content">Saltar al contenido principal</a>

    <header id="header" class="header sticky-top">
        <div class="topbar d-flex align-items-center">
            <div class="container d-flex justify-content-center justify-content-md-between">
                <div class="contact-info d-flex align-items-center">
                    <i class="bi bi-envelope d-flex align-items-center"><a href="mailto:{{ site_settings.email }}">{{
                            site_settings.email }}</a></i>
                    <i class="bi bi-phone d-flex align-items-center ms-4"><span>{{ site_settings.phone }}</span></i>
                </div>
                <div class="social-links d-none d-md-flex align-items-center">
                    <a href="{{ url_for('login') }}" class="small text-white text-decoration-none"><i
                            class="bi bi-lock-fill"></i> Acceso Staff</a>
                </div>
            </div>
        </div>

        <div class="branding d-flex align-items-center">
            <div class="container position-relative d-flex align-items-center justify-content-between">
              <a href="{{ url_for('index') }}" class="logo d-flex align-items-center me-auto">
                {% if site_settings.logo_path %}<img src="{{ url_for('static', filename=site_settings.logo_path) }}"
                  alt="{{ site_settings.title or app_name }}">
                  {% else %}
                <h1 class="sitename">{{ site_settings.title or app_name }}</h1>
                {% endif %}
              </a>
              <nav id="navmenu" class="navmenu" aria-label="Navegación principal">
                <ul>
                  {% set nav_items = frontend_payload.navbar_menu if frontend_payload.navbar_menu else [] %}
                  {% if nav_items %}
                  {% for item in nav_items %}
                  <li><a href="{{ item.link_url or '#' }}" class="{% if loop.first %}active{% endif %}">{{ item.title
                      }}</a></li>
                  {% endfor %}
                  {% else %}
                  <li><a href="#hero" class="active">Inicio</a></li>
                  <li><a href="#about">Nosotros</a></li>
                  <li><a href="#services">Servicios</a></li>
                  <li><a href="#appointment">Turnos</a></li>
                  <li><a href="#departments">Departamentos</a></li>
                  <li><a href="#faq">Preguntas</a></li>
                  <li><a href="#contact">Contacto</a></li>
                  {% endif %}
                  <li><a href="{{ url_for('public_verify_recipe') }}">Verificar receta</a></li>
                </ul>
                <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
              </nav>
              <a class="cta-btn d-none d-sm-block" href="#appointment">{{ site_settings.nav_cta_label }}</a>
            </div>
          </div>
    </header>

    <main class="main" id="main-content">
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        <div class="floating-alerts">
            {% for category, message in messages %}
            <div class="alert alert-{{ category }} alert-dismissible fade show shadow-sm" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            {% endfor %}
        </div>
        {% endif %}
        {% endwith %}
        <section id="hero" class="hero section light-background">
            <img src="{{ url_for('static', filename='medilab/assets/img/hero-bg.jpg') }}" alt="Equipo de salud y atención médica" data-aos="fade-in" fetchpriority="high" decoding="async">
            <div class="container position-relative">
                <div class="welcome position-relative" data-aos="fade-down" data-aos-delay="100">
                    <h1>{{ site_settings.title or app_name }}</h1>
                    <p>{{ site_settings.tagline }}</p>
                </div>
                <div class="content row gy-4">
                    <div class="col-lg-4 d-flex align-items-stretch">
                        <div class="why-box" data-aos="zoom-out" data-aos-delay="200">
                            <h3>Atención psiquiátrica con trazabilidad clínica</h3>
                            <p>Gestión integral de turnos, historia clínica digital unificada, consultas del sitio,
                                recetas electrónicas y verificación pública segura.</p>
                            <div class="text-center">
                                <a href="#about" class="more-btn"><span>Conocé más</span> <i
                                        class="bi bi-chevron-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8 d-flex align-items-stretch">
                        <div class="d-flex flex-column justify-content-center w-100">
                            <div class="row gy-4">
                                {% for item in (fp.stats_items[:3] if fp.stats_items else []) %}
                                <div class="col-xl-4 d-flex align-items-stretch">
                                    <div class="icon-box" data-aos="zoom-out"
                                        data-aos-delay="{{ 300 + loop.index0 * 100 }}">
                                        <i class="{{ item.icon or 'bi bi-clipboard2-pulse' }}"></i>
                                        <h4>{{ item.title }}</h4>
                                        <p>{{ item.body }}</p>
                                    </div>
                                </div>
                                {% else %}
                                <div class="col-xl-4 d-flex align-items-stretch">
                                    <div class="icon-box"><i class="bi bi-person-vcard"></i>
                                        <h4>Equipo médico</h4>
                                        <p>Profesionales con agenda y prescripción auditada.</p>
                                    </div>
                                </div>
                                <div class="col-xl-4 d-flex align-items-stretch">
                                    <div class="icon-box"><i class="bi bi-journal-medical"></i>
                                        <h4>Historia clínica</h4>
                                        <p>Legajo único por paciente con evolución cronológica.</p>
                                    </div>
                                </div>
                                <div class="col-xl-4 d-flex align-items-stretch">
                                    <div class="icon-box"><i class="bi bi-capsule-pill"></i>
                                        <h4>Receta electrónica</h4>
                                        <p>Emisión, verificación y respaldo institucional.</p>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="about" class="about section">
            <div class="container">
                <div class="row gy-4 gx-5">
                    <div class="col-lg-6 position-relative align-self-start" data-aos="fade-up" data-aos-delay="200">
                        <img src="{{ url_for('static', filename='medilab/assets/img/about.jpg') }}" class="img-fluid"
                            alt="Atención médica profesional" loading="lazy" decoding="async">
                    </div>
                    <div class="col-lg-6 content" data-aos="fade-up" data-aos-delay="100">
                        <h3>Nosotros</h3>
                        <p>Institución orientada a psiquiatría clínica, continuidad asistencial y documentación médica
                            segura, siguiendo una lógica de atención integral y trazabilidad digital.</p>
                        <ul>
                            {% for item in fp.about_items %}
                            <li>
                                <i class="{{ item.icon or 'fa-solid fa-heart-circle-xmark' }}"></i>
                                <div>
                                    <h5>{{ item.title }}</h5>
                                    <p>{{ item.body }}</p>
                                </div>
                            </li>
                            {% else %}
                            <li><i class="fa-solid fa-vial-circle-check"></i>
                                <div>
                                    <h5>Atención interdisciplinaria</h5>
                                    <p>Evaluación psiquiátrica, seguimiento y control evolutivo.</p>
                                </div>
                            </li>
                            <li><i class="fa-solid fa-pump-medical"></i>
                                <div>
                                    <h5>Prescripción segura</h5>
                                    <p>Recetas con validación y trazabilidad operativa.</p>
                                </div>
                            </li>
                            <li><i class="fa-solid fa-heart-circle-xmark"></i>
                                <div>
                                    <h5>Continuidad clínica</h5>
                                    <p>Historia clínica digital única y accesible para profesionales autorizados.</p>
                                </div>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <section id="stats" class="stats section light-background">
            <div class="container" data-aos="fade-up" data-aos-delay="100">
                <div class="row gy-4">
                    {% for item in fp.stats_items %}
                    <div class="col-lg-3 col-md-6 d-flex flex-column align-items-center">
                        <i class="{{ item.icon or 'fa-solid fa-chart-line' }}"></i>
                        <div class="stats-item">
                            <span data-purecounter-start="0" data-purecounter-end="{{ item.subtitle or '0' }}"
                                data-purecounter-duration="1" class="purecounter"></span>
                            <p>{{ item.title }}</p>
                        </div>
                    </div>
                    {% else %}
                    <div class="col-lg-3 col-md-6 d-flex flex-column align-items-center"><i
                            class="fa-solid fa-user-doctor"></i>
                        <div class="stats-item"><span data-purecounter-start="0" data-purecounter-end="12"
                                data-purecounter-duration="1" class="purecounter"></span>
                            <p>Profesionales</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 d-flex flex-column align-items-center"><i
                            class="fa-regular fa-hospital"></i>
                        <div class="stats-item"><span data-purecounter-start="0" data-purecounter-end="8"
                                data-purecounter-duration="1" class="purecounter"></span>
                            <p>Servicios</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 d-flex flex-column align-items-center"><i class="fas fa-flask"></i>
                        <div class="stats-item"><span data-purecounter-start="0" data-purecounter-end="24"
                                data-purecounter-duration="1" class="purecounter"></span>
                            <p>Turnos semanales</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 d-flex flex-column align-items-center"><i class="fas fa-award"></i>
                        <div class="stats-item"><span data-purecounter-start="0" data-purecounter-end="3"
                                data-purecounter-duration="1" class="purecounter"></span>
                            <p>Áreas críticas</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>

        <section id="services" class="services section">
            <div class="container section-title" data-aos="fade-up">
                <h2>Servicios</h2>
                <p>Prestaciones médicas y administrativas configurables desde el panel.</p>
            </div>
            <div class="container">
                <div class="row gy-4">
                    {% for item in (fp.service_cards if fp.service_cards else []) %}
                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="{{ 100 + loop.index0 * 100 }}">
                        <div class="service-item position-relative">
                            <div class="icon"><i class="{{ item.icon or 'bi bi-activity' }}"></i></div>
                            <h3>{{ item.title }}</h3>
                            <p>{{ item.body }}</p>
                        </div>
                    </div>
                    {% endfor %}
                    {% if not fp.service_cards %}
                    {% for service in services[:6] %}
                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="{{ 100 + loop.index0 * 100 }}">
                        <div class="service-item position-relative">
                            <div class="icon"><i class="bi bi-heart-pulse"></i></div>
                            <h3>{{ service.name }}</h3>
                            <p>{{ service.description or 'Prestación médica configurable desde el panel.' }}</p>
                        </div>
                    </div>
                    {% endfor %}
                    {% endif %}
                </div>
            </div>
        </section>

        <section id="appointment" class="appointment section light-background">
            <div class="container section-title" data-aos="fade-up">
              <h2>Turnos</h2>
              <p>La reserva online funciona sobre la agenda real del equipo. Podés integrarla dentro de esta sección conservando la experiencia del sitio.</p>
            </div>
            <div class="container">
              <div class="booking-iframe-shell" data-aos="fade-up" data-aos-delay="100">
                <iframe class="booking-public-iframe" src="{{ url_for('booking') }}" title="Reserva de turnos" loading="lazy"></iframe>
              </div>
            </div>
          </section>
          
          <section id="departments" class="departments section">
            <div class="container section-title" data-aos="fade-up">
              <h2>Departamentos</h2>
              <p>Áreas médicas y administrativas visibles para el paciente.</p>
            </div>
            <div class="container" data-aos="fade-up" data-aos-delay="100">
              <div class="row">
                <div class="col-lg-3">
                  <ul class="nav nav-tabs flex-column">
                    {% for dep in fp.department_cards %}
                    <li class="nav-item"><a class="nav-link {% if loop.first %}active show{% endif %}" data-bs-toggle="tab" href="#department-tab-{{ loop.index }}">{{ dep.title }}</a></li>
                    {% else %}
                    <li class="nav-item"><a class="nav-link active show" data-bs-toggle="tab" href="#department-tab-1">Psiquiatría clínica</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#department-tab-2">Receta electrónica</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#department-tab-3">Historia clínica</a></li>
                    {% endfor %}
                  </ul>
                </div>
                <div class="col-lg-9 mt-4 mt-lg-0">
                  <div class="tab-content">
                    {% for dep in fp.department_cards %}
                    <div class="tab-pane {% if loop.first %}active show{% endif %}" id="department-tab-{{ loop.index }}">
                      <div class="row">
                        <div class="col-lg-8 details order-2 order-lg-1">
                          <h3>{{ dep.title }}</h3>
                          <p class="fst-italic">{{ dep.subtitle }}</p>
                          <p>{{ dep.body }}</p>
                        </div>
                        <div class="col-lg-4 text-center order-1 order-lg-2">
                          <img src="{{ url_for('static', filename=dep.image_path) if dep.image_path else url_for('static', filename='medilab/assets/img/departments-1.jpg') }}" alt="{{ dep.title }}" class="img-fluid">
                        </div>
                      </div>
                    </div>
                    {% else %}
                    <div class="tab-pane active show" id="department-tab-1"><div class="row"><div class="col-lg-8 details order-2 order-lg-1"><h3>Psiquiatría clínica</h3><p class="fst-italic">Entrevistas, seguimiento y conducta terapéutica.</p><p>Atención centrada en diagnóstico, evolución, tratamientos y registro seguro.</p></div><div class="col-lg-4 text-center order-1 order-lg-2"><img src="{{ url_for('static', filename='medilab/assets/img/departments-1.jpg') }}" class="img-fluid" alt="Área médica del sitio" loading="lazy" decoding="async"></div></div></div>
                    <div class="tab-pane" id="department-tab-2"><div class="row"><div class="col-lg-8 details order-2 order-lg-1"><h3>Receta electrónica</h3><p class="fst-italic">Emisión, trazabilidad y verificación pública.</p><p>Administración segura del circuito de prescripción electrónica y validación para farmacia.</p></div><div class="col-lg-4 text-center order-1 order-lg-2"><img src="{{ url_for('static', filename='medilab/assets/img/departments-2.jpg') }}" class="img-fluid" alt="Área médica del sitio" loading="lazy" decoding="async"></div></div></div>
                    <div class="tab-pane" id="department-tab-3"><div class="row"><div class="col-lg-8 details order-2 order-lg-1"><h3>Historia clínica</h3><p class="fst-italic">Legajo unificado por paciente con evolución cronológica.</p><p>Registro clínico longitudinal con accesos auditables y datos estructurados.</p></div><div class="col-lg-4 text-center order-1 order-lg-2"><img src="{{ url_for('static', filename='medilab/assets/img/departments-3.jpg') }}" class="img-fluid" alt="Área médica del sitio" loading="lazy" decoding="async"></div></div></div>
                    {% endfor %}
                  </div>
                </div>
              </div>
            </div>
          </section>
          
          <section id="faq" class="faq section light-background">
            <div class="container section-title" data-aos="fade-up">
              <h2>Preguntas frecuentes</h2>
              <p>Contenido administrable desde el panel del sitio.</p>
            </div>
            <div class="container">
              <div class="accordion" id="faqAccordion">
                {% for item in fp.faq_items %}
                <div class="accordion-item">
                  <h2 class="accordion-header"><button class="accordion-button {% if not loop.first %}collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ loop.index }}">{{ item.title }}</button></h2>
                  <div id="faq{{ loop.index }}" class="accordion-collapse collapse {% if loop.first %}show{% endif %}" data-bs-parent="#faqAccordion"><div class="accordion-body">{{ item.body }}</div></div>
                </div>
                {% else %}
                <div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">¿Cómo solicito un turno?</button></h2><div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion"><div class="accordion-body">Podés reservar desde la sección Turnos usando la agenda en línea.</div></div></div>
                <div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">¿Cómo verifico una receta?</button></h2><div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"><div class="accordion-body">Ingresando el CUIR o número legal en la sección Verificar receta.</div></div></div>
                {% endfor %}
              </div>
            </div>
          </section>
          
          <section id="gallery" class="gallery section">
            <div class="container section-title" data-aos="fade-up">
              <h2>Galería</h2>
              <p>Imágenes administrables desde el panel del frontend.</p>
            </div>
            <div class="container-fluid" data-aos="fade-up" data-aos-delay="100">
              <div class="row g-0">
                {% for item in fp.gallery_items %}
                <div class="col-lg-3 col-md-4"><div class="gallery-item"><a href="{{ url_for('static', filename=item.image_path) if item.image_path else '#' }}" class="glightbox" data-gallery="images-gallery"><img src="{{ url_for('static', filename=item.image_path) if item.image_path else url_for('static', filename='medilab/assets/img/gallery/gallery-1.jpg') }}" alt="{{ item.title }}" class="img-fluid"></a></div></div>
                {% else %}
                  {% for i in range(1,9) %}<div class="col-lg-3 col-md-4"><div class="gallery-item"><a href="{{ url_for('static', filename='medilab/assets/img/gallery/gallery-' ~ i ~ '.jpg') }}" class="glightbox" data-gallery="images-gallery"><img src="{{ url_for('static', filename='medilab/assets/img/gallery/gallery-' ~ i ~ '.jpg') }}" class="img-fluid" alt="Área médica del sitio" loading="lazy" decoding="async"></a></div></div>{% endfor %}
                {% endfor %}
              </div>
            </div>
          </section>

          <section id="contact" class="contact section">
            <div class="container section-title" data-aos="fade-up">
              <h2>Contacto</h2>
              <p>Canales institucionales y formulario conectado con la herramienta Consultas.</p>
            </div>
            <div class="container" data-aos="fade-up" data-aos-delay="100">
              {% if site_settings.contact_map_embed %}
              <div class="mb-4">{{ site_settings.contact_map_embed|safe }}</div>
              {% endif %}
              <div class="row gy-4">
                <div class="col-lg-4">
                  <div class="info-wrap">
                    {% for item in fp.contact_items %}
                    <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="{{ 200 + loop.index0 * 100 }}">
                      <i class="{{ item.icon or 'bi bi-geo-alt' }} flex-shrink-0"></i>
                      <div>
                        <h3>{{ item.title }}</h3>
                        <p>{{ item.body }}</p>
                      </div>
                    </div>
                    {% else %}
                    <div class="info-item d-flex"><i class="bi bi-geo-alt flex-shrink-0"></i><div><h3>Dirección</h3><p>{{ site_settings.contact_address or 'Configurá la dirección institucional desde el panel.' }}</p></div></div>
                    <div class="info-item d-flex"><i class="bi bi-telephone flex-shrink-0"></i><div><h3>Teléfono</h3><p>{{ site_settings.phone or '—' }}</p></div></div>
                    <div class="info-item d-flex"><i class="bi bi-envelope flex-shrink-0"></i><div><h3>Email</h3><p>{{ site_settings.email or '—' }}</p></div></div>
                    {% endfor %}
                  </div>
                </div>
                <div class="col-lg-8">
                  <form action="{{ url_for('public_contact_submit') }}" method="post" class="php-email-form" aria-label="Formulario de consulta pública">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <div class="row gy-4">
                      <div class="col-md-6"><label class="visually-hidden" for="contactName">Nombre</label><input id="contactName" type="text" name="name" class="form-control" placeholder="Nombre" autocomplete="name" required></div>
                      <div class="col-md-6"><label class="visually-hidden" for="contactEmail">Email</label><input id="contactEmail" type="email" class="form-control" name="email" placeholder="Email" autocomplete="email" required></div>
                      <div class="col-md-6"><label class="visually-hidden" for="contactPhone">Teléfono</label><input id="contactPhone" type="tel" class="form-control" name="phone" placeholder="Teléfono" autocomplete="tel"></div>
                      <div class="col-md-6"><label class="visually-hidden" for="contactSubject">Asunto</label><input id="contactSubject" type="text" class="form-control" name="subject" placeholder="Asunto"></div>
                      <div class="col-md-12"><label class="visually-hidden" for="contactMessage">Detalle</label><textarea id="contactMessage" class="form-control" name="message" rows="6" placeholder="Detalle" required></textarea></div>
                      <div class="col-md-12 text-center"><button type="submit">Enviar consulta</button></div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </section>

    </main>

    {% if site_settings.cookie_banner_enabled %}
    <div id="cookieConsentBanner" class="position-fixed bottom-0 start-0 end-0 p-3" style="z-index:1080; display:none;">
      <div class="container">
        <div class="card shadow-lg border-0">
          <div class="card-body d-lg-flex align-items-center justify-content-between gap-3">
            <div class="small mb-3 mb-lg-0">{{ site_settings.cookie_text|safe }}</div>
            <div class="d-flex gap-2 flex-wrap">
              <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('public_legal_privacy') }}">Ver privacidad</a>
              <button class="btn btn-sm btn-primary" type="button" id="acceptCookieConsent">Aceptar</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endif %}

    {% if site_settings.popup_enabled %}
    <div class="modal fade" id="publicSitePopup" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header"><h5 class="modal-title">{{ site_settings.popup_title }}</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
          <div class="modal-body">
            {% if site_settings.popup_image_path %}<img src="{{ url_for('static', filename=site_settings.popup_image_path) }}" alt="popup" class="img-fluid rounded-4 mb-3">{% endif %}
            <div>{{ site_settings.popup_html|safe }}</div>
          </div>
          {% if site_settings.popup_link_text and site_settings.popup_link_url %}
          <div class="modal-footer"><a class="btn btn-primary" href="{{ site_settings.popup_link_url }}" target="_blank">{{ site_settings.popup_link_text }}</a></div>
          {% endif %}
        </div>
      </div>
    </div>
    {% endif %}

    <footer id="footer" class="footer mt-auto light-background">
        <div class="container footer-top">
            <div class="row gy-4">
                {% set footer_cols = frontend_payload.footer_columns if frontend_payload.footer_columns else [] %}
                {% if footer_cols %}
                {% for col in footer_cols[:4] %}
                <div class="col-lg-3 col-md-6 footer-about">
                    {% if loop.first %}
                    <a href="{{ url_for('index') }}" class="logo d-flex align-items-center">
                        <span class="sitename">{{ col.title or site_settings.title }}</span>
                    </a>
                    {% else %}
                    <h4>{{ col.title }}</h4>
                    {% endif %}
                    <div class="footer-contact pt-3">
                        <p>{{ col.body }}</p>
                        {% if col.link_url %}<p><a href="{{ col.link_url }}">{{ col.link_text or col.link_url }}</a></p>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
                {% else %}
                <div class="col-lg-3 col-md-6 footer-about">
                    <a href="{{ url_for('index') }}" class="logo d-flex align-items-center"><span class="sitename">{{
                            site_settings.title or app_name }}</span></a>
                    <div class="footer-contact pt-3">
                        {% if site_settings.contact_address %}<p>{{ site_settings.contact_address }}</p>{% endif %}
                        {% if site_settings.phone %}<p><strong>Tel:</strong> <span>{{ site_settings.phone }}</span></p>
                        {% endif %}
                        {% if site_settings.email %}<p><strong>Email:</strong> <span>{{ site_settings.email }}</span>
                        </p>{% endif %}
                    </div>
                    <div class="social-links d-flex mt-4">{% for social in site_settings.socials %}<a
                            href="{{ social.url }}" target="_blank"><i class="bi {{ social.icon }}"></i></a>{% endfor %}
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 footer-links">
                    <h4>Menú</h4>
                    <ul>
                        <li><a href="#about">Nosotros</a></li>
                        <li><a href="#services">Servicios</a></li>
                        <li><a href="#appointment">Turnos</a></li>
                        <li><a href="#contact">Contacto</a></li>
                        <li><a href="{{ url_for('public_legal_terms') }}">Términos</a></li>
                        <li><a href="{{ url_for('public_legal_privacy') }}">Privacidad</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 col-md-6 footer-links">
                    <h4>Datos institucionales</h4>
                    <ul>
                        <li><a href="#">Plataforma {{ site_settings.platform_number }}</a></li>
                        <li><a href="#">Repositorio {{ site_settings.repository_number }}</a></li>
                        <li><a href="#">Retención {{ site_settings.retention_years }} años</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 col-md-6 footer-links">
                    <h4>Acciones</h4>
                    <ul>
                        <li><a href="{{ url_for('booking') }}">Reservar turno</a></li>
                        <li><a href="{{ url_for('public_verify_recipe') }}">Verificar receta</a></li>
                        <li><a href="{{ url_for('login') }}">Área admin</a></li>
                    </ul>
                </div>
                {% endif %}
            </div>
        </div>
        <div class="container copyright text-center py-4">
            <p>© <span>Copyright</span> <strong class="px-1 sitename">{{ site_settings.title }}</strong> <span>Todos los
                    derechos reservados</span></p>
            <div class="credits">
                <a href="{{ url_for('login') }}" class="text-muted text-decoration-none small">Panel de Gestión</a>
            </div>
        </div>
    </footer>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const cookieBanner = document.getElementById('cookieConsentBanner');
        const cookieBtn = document.getElementById('acceptCookieConsent');
        if (cookieBanner && !localStorage.getItem('site_cookie_consent_v1')) {
          cookieBanner.style.display = 'block';
        }
        if (cookieBtn) {
          cookieBtn.addEventListener('click', function () {
            localStorage.setItem('site_cookie_consent_v1', 'accepted');
            if (cookieBanner) cookieBanner.style.display = 'none';
          });
        }
        const popupEnabled = {{ 'true' if site_settings.popup_enabled else 'false' }};
        if (popupEnabled && !sessionStorage.getItem('site_popup_seen_v1')) {
          const popupEl = document.getElementById('publicSitePopup');
          if (popupEl && window.bootstrap) {
            sessionStorage.setItem('site_popup_seen_v1', '1');
            new bootstrap.Modal(popupEl).show();
          }
        }
      });
    </script>

    {% if site_settings.whatsapp_floating_enabled and site_settings.whatsapp_floating_url %}
    <a href="{{ site_settings.whatsapp_floating_url }}" target="_blank" rel="noopener" class="frontend-whatsapp-float d-flex align-items-center justify-content-center" aria-label="{{ site_settings.whatsapp_public_label }}" title="{{ site_settings.whatsapp_public_label }}">
        <i class="bi bi-whatsapp" aria-hidden="true"></i><span class="frontend-whatsapp-label">WA</span>
    </a>
    {% endif %}
    <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center" aria-label="Volver arriba"><i
            class="bi bi-arrow-up-short"></i></a>

    <script
        src="{{ url_for('static', filename='medilab/assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static', filename='medilab/assets/vendor/aos/aos.js') }}" defer></script>
    <script src="{{ url_for('static', filename='medilab/assets/vendor/glightbox/js/glightbox.min.js') }}" defer></script>
    <script src="{{ url_for('static', filename='medilab/assets/vendor/swiper/swiper-bundle.min.js') }}" defer></script>
    <script src="{{ url_for('static', filename='medilab/assets/js/main.js') }}" defer></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" defer></script>
    <script src="{{ url_for('static', filename='js/app.js') }}" defer></script>
    {% if site_settings.ai_chatbot_enabled and site_settings.ai_chatbot_floating_enabled %}
    <script>
      window.AI_CHATBOT_CONFIG = {
        enabled: true,
        floatingEnabled: true,
        assistantName: {{ site_settings.ai_chatbot_assistant_name|tojson }},
        welcomeMessage: {{ site_settings.ai_chatbot_welcome_message|tojson }},
        csrfToken: {{ csrf_token|tojson }},
        messageUrl: {{ url_for('api_ai_chatbot_message')|tojson }},
        bookingOptionsUrl: {{ url_for('api_booking_wizard_options')|tojson }},
        bookingSlotsUrl: {{ url_for('api_booking_wizard_slots')|tojson }},
        bookingCreateUrl: {{ url_for('api_booking_wizard_create')|tojson }},
        bookingWizardOptionsUrl: {{ url_for('api_booking_wizard_options')|tojson }},
        bookingWizardSlotsUrl: {{ url_for('api_booking_wizard_slots')|tojson }},
        bookingWizardCreateUrl: {{ url_for('api_booking_wizard_create')|tojson }}
      };
    </script>
    <script src="{{ url_for('static', filename='js/booking_wizard.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/ai_chatbot.js') }}" defer></script>
    {% endif %}
</body>

</html>
{% endblock %}