@extends('public.layouts.app')
@section('title', 'Contáctanos')

@section('styles')
<style>
/* ── CONTACT PAGE STYLES ───────────────────────────────── */
.contact-hero {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #0891b2 100%);
    padding: 6rem 0 4rem;
    position: relative;
    overflow: hidden;
}
.contact-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(139,92,246,.25) 0%, transparent 70%);
    pointer-events: none;
}
.contact-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(8,145,178,.2) 0%, transparent 70%);
    pointer-events: none;
}

/* Cards de info */
.contact-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin: -3rem 0 3rem;
    position: relative;
    z-index: 10;
}
.contact-info-card {
    background: #fff;
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,.1);
    transition: transform .3s, box-shadow .3s;
    border-top: 4px solid transparent;
}
.contact-info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,.15);
}
.contact-info-card.c1 { border-top-color: #7c3aed; }
.contact-info-card.c2 { border-top-color: #0891b2; }
.contact-info-card.c3 { border-top-color: #059669; }
.contact-info-card.c4 { border-top-color: #ea580c; }

.cic-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1rem;
}
.c1 .cic-icon { background: #ede9fe; color: #7c3aed; }
.c2 .cic-icon { background: #e0f2fe; color: #0891b2; }
.c3 .cic-icon { background: #d1fae5; color: #059669; }
.c4 .cic-icon { background: #ffedd5; color: #ea580c; }

.cic-title { font-weight: 700; color: #1e293b; margin-bottom: .35rem; font-size: 1rem; }
.cic-value { color: #64748b; font-size: .9rem; line-height: 1.5; }
.cic-link  { color: inherit; text-decoration: none; }
.cic-link:hover { color: #7c3aed; }

/* Main layout */
.contact-main {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: start;
    padding: 4rem 0;
}
@media (max-width: 900px) {
    .contact-main { grid-template-columns: 1fr; }
}

/* Formulario */
.contact-form-card {
    background: #fff;
    border-radius: 1.25rem;
    padding: 2.5rem;
    box-shadow: 0 4px 30px rgba(0,0,0,.08);
}
.contact-form-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: .5rem;
}
.contact-form-subtitle {
    color: #64748b;
    font-size: .95rem;
    margin-bottom: 2rem;
}
.form-group {
    margin-bottom: 1.25rem;
}
.form-label {
    display: block;
    font-weight: 600;
    font-size: .875rem;
    color: #374151;
    margin-bottom: .4rem;
}
.form-label .req { color: #ef4444; margin-left: 2px; }
.form-control {
    width: 100%;
    padding: .75rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: .625rem;
    font-size: .95rem;
    color: #1e293b;
    background: #f8fafc;
    transition: border-color .2s, box-shadow .2s, background .2s;
    outline: none;
    box-sizing: border-box;
}
.form-control:focus {
    border-color: #7c3aed;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.form-control.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
textarea.form-control { resize: vertical; min-height: 130px; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 01.753 1.659l-4.796 5.48a1 1 0 01-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: .9em; padding-right: 2.5rem; cursor: pointer; }
.btn-submit {
    width: 100%;
    padding: .875rem 2rem;
    background: linear-gradient(135deg, #7c3aed, #0891b2);
    color: #fff;
    border: none;
    border-radius: .75rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .25s, transform .2s, box-shadow .25s;
    margin-top: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    box-shadow: 0 4px 15px rgba(124,58,237,.35);
}
.btn-submit:hover {
    opacity: .9;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(124,58,237,.45);
}
.btn-submit:active { transform: translateY(0); }
.success-msg {
    display: none;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
    border-radius: .75rem;
    padding: 1.25rem;
    margin-top: 1rem;
    text-align: center;
    font-weight: 600;
}

/* Columna izquierda */
.contact-left {}
.contact-left-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: .75rem;
    line-height: 1.25;
}
.contact-left-desc {
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* Map placeholder */
.map-wrapper {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.1);
    margin-bottom: 2rem;
    background: #e2e8f0;
    position: relative;
    min-height: 220px;
}
.map-wrapper iframe {
    width: 100%;
    height: 220px;
    border: none;
    display: block;
}
.map-placeholder {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #94a3b8;
    font-size: .9rem;
    gap: .5rem;
}
.map-placeholder i { font-size: 2.5rem; color: #cbd5e1; }

/* Channels grid */
.channels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (max-width: 500px) { .channels-grid { grid-template-columns: 1fr; } }
.channel-card {
    border-radius: .875rem;
    padding: 1.25rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .85rem;
    font-weight: 600;
    font-size: .9rem;
    transition: transform .25s, box-shadow .25s;
    color: #fff;
}
.channel-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.2); color: #fff; }
.channel-card.wa  { background: linear-gradient(135deg, #25d366, #128c7e); }
.channel-card.fb  { background: linear-gradient(135deg, #1877f2, #0d5bdb); }
.channel-card.ig  { background: linear-gradient(135deg, #e1306c, #833ab4); }
.channel-card.yt  { background: linear-gradient(135deg, #ff0000, #cc0000); }
.channel-card.em  { background: linear-gradient(135deg, #7c3aed, #4f46e5); }
.channel-card i   { font-size: 1.5rem; flex-shrink: 0; }

/* FAQ */
.faq-section { padding: 4rem 0; background: #f8fafc; }
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.faq-item {
    background: #fff;
    border-radius: .875rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.faq-q {
    padding: 1.25rem 1.5rem;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: background .2s;
    font-size: .95rem;
    user-select: none;
}
.faq-q:hover { background: #f1f5f9; }
.faq-q .faq-icon { color: #7c3aed; font-size: 1.1rem; transition: transform .3s; flex-shrink: 0; }
.faq-q.open .faq-icon { transform: rotate(45deg); }
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .3s;
    padding: 0 1.5rem;
    color: #64748b;
    line-height: 1.7;
    font-size: .9rem;
}
.faq-a.open { max-height: 300px; padding: 0 1.5rem 1.25rem; }
</style>
@endsection

@section('content')

{{-- ── HERO ─────────────────────────────────── --}}
<div class="contact-hero">
    <div class="container">
        <div class="page-hero-content">
            <span class="page-hero-badge"><i class="bi bi-headset"></i> Soporte & Contacto</span>
            <h1 class="page-hero-title">Hablemos sobre tu <span style="color:#c4b5fd;">Proyecto</span></h1>
            <p class="page-hero-desc">Estamos listos para ayudarte. Cuéntanos tu necesidad y te daremos la solución ideal para tu institución o empresa.</p>
        </div>
    </div>
</div>

{{-- ── INFO CARDS ────────────────────────────── --}}
<section style="background:#f8fafc; padding-bottom: 0;">
    <div class="container">
        <div class="contact-info-cards">
            @if($config['empresa_telefono'] ?? false)
            <div class="contact-info-card c1" data-aos="fade-up" data-aos-delay="0">
                <div class="cic-icon"><i class="bi bi-telephone-fill"></i></div>
                <div class="cic-title">Teléfono / WhatsApp</div>
                <div class="cic-value">
                    <a href="tel:{{ $config['empresa_telefono'] }}" class="cic-link">{{ $config['empresa_telefono'] }}</a>
                </div>
            </div>
            @endif

            @if($config['empresa_email'] ?? false)
            <div class="contact-info-card c2" data-aos="fade-up" data-aos-delay="100">
                <div class="cic-icon"><i class="bi bi-envelope-fill"></i></div>
                <div class="cic-title">Correo Electrónico</div>
                <div class="cic-value">
                    <a href="mailto:{{ $config['empresa_email'] }}" class="cic-link">{{ $config['empresa_email'] }}</a>
                </div>
            </div>
            @endif

            @if($config['empresa_horario'] ?? false)
            <div class="contact-info-card c3" data-aos="fade-up" data-aos-delay="200">
                <div class="cic-icon"><i class="bi bi-clock-fill"></i></div>
                <div class="cic-title">Horario de Atención</div>
                <div class="cic-value">{{ $config['empresa_horario'] }}</div>
            </div>
            @endif

            @if($config['empresa_direccion'] ?? false)
            <div class="contact-info-card c4" data-aos="fade-up" data-aos-delay="300">
                <div class="cic-icon"><i class="bi bi-geo-alt-fill"></i></div>
                <div class="cic-title">Dirección</div>
                <div class="cic-value">{{ $config['empresa_direccion'] }}</div>
            </div>
            @endif

            {{-- Fallbacks si no hay config --}}
            @if(!($config['empresa_telefono'] ?? false) && !($config['empresa_email'] ?? false) && !($config['empresa_horario'] ?? false) && !($config['empresa_direccion'] ?? false))
            <div class="contact-info-card c1" data-aos="fade-up">
                <div class="cic-icon"><i class="bi bi-telephone-fill"></i></div>
                <div class="cic-title">Teléfono / WhatsApp</div>
                <div class="cic-value">Configura tu número en el panel admin</div>
            </div>
            <div class="contact-info-card c2" data-aos="fade-up" data-aos-delay="100">
                <div class="cic-icon"><i class="bi bi-envelope-fill"></i></div>
                <div class="cic-title">Correo Electrónico</div>
                <div class="cic-value">Configura tu email en el panel admin</div>
            </div>
            <div class="contact-info-card c3" data-aos="fade-up" data-aos-delay="200">
                <div class="cic-icon"><i class="bi bi-clock-fill"></i></div>
                <div class="cic-title">Horario de Atención</div>
                <div class="cic-value">Lun – Vie: 9:00 am – 6:00 pm</div>
            </div>
            <div class="contact-info-card c4" data-aos="fade-up" data-aos-delay="300">
                <div class="cic-icon"><i class="bi bi-geo-alt-fill"></i></div>
                <div class="cic-title">Ubicación</div>
                <div class="cic-value">Perú</div>
            </div>
            @endif
        </div>
    </div>
</section>

{{-- ── MAIN CONTENT ──────────────────────────── --}}
<section style="background:#f8fafc;">
    <div class="container">
        <div class="contact-main">

            {{-- Columna izquierda: mapa + canales --}}
            <div class="contact-left" data-aos="fade-right">
                <h2 class="contact-left-title">¿Tienes alguna<br><span class="text-gradient">pregunta o proyecto?</span></h2>
                <p class="contact-left-desc">
                    Trabajamos con instituciones educativas, empresas privadas y entidades públicas en todo el Perú.
                    Nuestro equipo está disponible para atenderte y ofrecerte la mejor solución digital.
                </p>

                {{-- Mapa --}}
                <div class="map-wrapper">
                    @if($config['empresa_direccion'] ?? false)
                    <iframe
                        src="https://maps.google.com/maps?q={{ urlencode($config['empresa_direccion']) }}&output=embed"
                        loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"
                        title="Ubicación">
                    </iframe>
                    @else
                    <div class="map-placeholder">
                        <i class="bi bi-map-fill"></i>
                        <span>Configura la dirección en el panel admin</span>
                    </div>
                    @endif
                </div>

                {{-- Canales de contacto --}}
                <div class="channels-grid">
                    @if($config['social_whatsapp'] ?? false)
                    <a href="https://wa.me/{{ $config['social_whatsapp'] }}?text=Hola,%20deseo%20información%20sobre%20sus%20sistemas%20web"
                       target="_blank" class="channel-card wa">
                        <i class="bi bi-whatsapp"></i>
                        <span>Escríbenos por WhatsApp</span>
                    </a>
                    @endif
                    @if($config['empresa_email'] ?? false)
                    <a href="mailto:{{ $config['empresa_email'] }}" class="channel-card em">
                        <i class="bi bi-envelope-fill"></i>
                        <span>Enviar un correo</span>
                    </a>
                    @endif
                    @if($config['social_facebook'] ?? false)
                    <a href="{{ $config['social_facebook'] }}" target="_blank" class="channel-card fb">
                        <i class="bi bi-facebook"></i>
                        <span>Seguirnos en Facebook</span>
                    </a>
                    @endif
                    @if($config['social_instagram'] ?? false)
                    <a href="{{ $config['social_instagram'] }}" target="_blank" class="channel-card ig">
                        <i class="bi bi-instagram"></i>
                        <span>Ver en Instagram</span>
                    </a>
                    @endif
                    @if($config['social_youtube'] ?? false)
                    <a href="{{ $config['social_youtube'] }}" target="_blank" class="channel-card yt">
                        <i class="bi bi-youtube"></i>
                        <span>Canal de YouTube</span>
                    </a>
                    @endif
                    {{-- Fallback --}}
                    @if(!($config['social_whatsapp'] ?? false) && !($config['empresa_email'] ?? false))
                    <a href="#" class="channel-card wa">
                        <i class="bi bi-whatsapp"></i>
                        <span>Escríbenos por WhatsApp</span>
                    </a>
                    <a href="#" class="channel-card em">
                        <i class="bi bi-envelope-fill"></i>
                        <span>Enviar un correo</span>
                    </a>
                    @endif
                </div>
            </div>

            {{-- Columna derecha: formulario --}}
            <div data-aos="fade-left">
                <div class="contact-form-card">
                    <div class="contact-form-title">Envíanos un mensaje</div>
                    <div class="contact-form-subtitle">Completa el formulario y te respondemos en menos de 24 horas.</div>

                    @if(session('contact_success'))
                    <div class="success-msg" style="display:block;">
                        <i class="bi bi-check-circle-fill"></i>
                        ¡Mensaje enviado correctamente! Te contactaremos pronto.
                    </div>
                    @endif

                    @if(session('contact_error'))
                    <div style="background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;border-radius:.75rem;padding:1.25rem;margin-bottom:1rem;font-weight:600;">
                        <i class="bi bi-exclamation-circle-fill"></i>
                        {{ session('contact_error') }}
                    </div>
                    @endif

                    <form id="contactForm" action="{{ route('contacto.send') }}" method="POST" novalidate>
                        @csrf

                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label" for="nombre">
                                    Nombre completo <span class="req">*</span>
                                </label>
                                <input type="text" id="nombre" name="nombre"
                                       class="form-control @error('nombre') is-invalid @enderror"
                                       placeholder="Ej: Juan Pérez"
                                       value="{{ old('nombre') }}" required>
                                @error('nombre')
                                <small style="color:#ef4444;">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="telefono">Teléfono / WhatsApp</label>
                                <input type="tel" id="telefono" name="telefono"
                                       class="form-control @error('telefono') is-invalid @enderror"
                                       placeholder="Ej: 999 888 777"
                                       value="{{ old('telefono') }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="email">
                                Correo electrónico <span class="req">*</span>
                            </label>
                            <input type="email" id="email" name="email"
                                   class="form-control @error('email') is-invalid @enderror"
                                   placeholder="tucorreo@ejemplo.com"
                                   value="{{ old('email') }}" required>
                            @error('email')
                            <small style="color:#ef4444;">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="institucion">Institución / Empresa</label>
                            <input type="text" id="institucion" name="institucion"
                                   class="form-control"
                                   placeholder="Nombre de tu colegio, empresa, etc."
                                   value="{{ old('institucion') }}">
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="asunto">
                                Asunto / Tipo de consulta <span class="req">*</span>
                            </label>
                            <select id="asunto" name="asunto"
                                    class="form-control form-select @error('asunto') is-invalid @enderror" required>
                                <option value="">— Selecciona un tema —</option>
                                <option value="demo" {{ old('asunto')=='demo' ? 'selected' : '' }}>Solicitar demo gratuita</option>
                                <option value="cotizacion" {{ old('asunto')=='cotizacion' ? 'selected' : '' }}>Cotización personalizada</option>
                                <option value="soporte" {{ old('asunto')=='soporte' ? 'selected' : '' }}>Soporte técnico</option>
                                <option value="informacion" {{ old('asunto')=='informacion' ? 'selected' : '' }}>Información general</option>
                                <option value="alianza" {{ old('asunto')=='alianza' ? 'selected' : '' }}>Propuesta de alianza</option>
                                <option value="otro" {{ old('asunto')=='otro' ? 'selected' : '' }}>Otro</option>
                            </select>
                            @error('asunto')
                            <small style="color:#ef4444;">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="mensaje">
                                Mensaje <span class="req">*</span>
                            </label>
                            <textarea id="mensaje" name="mensaje"
                                      class="form-control @error('mensaje') is-invalid @enderror"
                                      placeholder="Cuéntanos sobre tu institución, número de alumnos, sistemas que necesitas, etc."
                                      required>{{ old('mensaje') }}</textarea>
                            @error('mensaje')
                            <small style="color:#ef4444;">{{ $message }}</small>
                            @enderror
                        </div>

                        <button type="submit" class="btn-submit" id="btnSubmit">
                            <i class="bi bi-send-fill"></i>
                            <span>Enviar Mensaje</span>
                        </button>

                        <div class="success-msg" id="successMsg"></div>
                    </form>
                </div>

                {{-- Trust badges --}}
                <div style="display:flex;gap:1.5rem;justify-content:center;margin-top:1.5rem;flex-wrap:wrap;">
                    <div style="display:flex;align-items:center;gap:.4rem;color:#64748b;font-size:.85rem;">
                        <i class="bi bi-shield-check-fill" style="color:#059669;font-size:1.2rem;"></i>
                        Datos seguros
                    </div>
                    <div style="display:flex;align-items:center;gap:.4rem;color:#64748b;font-size:.85rem;">
                        <i class="bi bi-clock-fill" style="color:#0891b2;font-size:1.2rem;"></i>
                        Respuesta en 24h
                    </div>
                    <div style="display:flex;align-items:center;gap:.4rem;color:#64748b;font-size:.85rem;">
                        <i class="bi bi-star-fill" style="color:#f59e0b;font-size:1.2rem;"></i>
                        Atención personalizada
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

{{-- ── FAQ ───────────────────────────────────── --}}
<section class="faq-section">
    <div class="container">
        <div class="section-header" data-aos="fade-up">
            <span class="section-badge"><i class="bi bi-question-circle-fill"></i> FAQ</span>
            <h2 class="section-title">Preguntas <span class="text-gradient">Frecuentes</span></h2>
            <p class="section-desc">Resolvemos las dudas más comunes sobre nuestros sistemas y proceso de contratación.</p>
        </div>
        <div class="faq-grid" data-aos="fade-up" data-aos-delay="100">
            <div class="faq-item">
                <div class="faq-q" onclick="toggleFaq(this)">
                    ¿Cuánto tiempo tarda la implementación?
                    <i class="bi bi-plus-circle faq-icon"></i>
                </div>
                <div class="faq-a">
                    La implementación estándar toma entre 3 a 7 días hábiles dependiendo del sistema. Incluye configuración, migración de datos y capacitación al personal.
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-q" onclick="toggleFaq(this)">
                    ¿Ofrecen soporte técnico continuo?
                    <i class="bi bi-plus-circle faq-icon"></i>
                </div>
                <div class="faq-a">
                    Sí. Todos nuestros sistemas incluyen soporte técnico por WhatsApp, correo y videollamada durante el horario de atención. El plan de alquiler incluye soporte prioritario.
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-q" onclick="toggleFaq(this)">
                    ¿Se puede probar el sistema antes de contratar?
                    <i class="bi bi-plus-circle faq-icon"></i>
                </div>
                <div class="faq-a">
                    ¡Claro! Ofrecemos una demo personalizada gratuita de hasta 15 días para que evalúes el sistema sin compromisos.
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-q" onclick="toggleFaq(this)">
                    ¿Los sistemas funcionan en cualquier dispositivo?
                    <i class="bi bi-plus-circle faq-icon"></i>
                </div>
                <div class="faq-a">
                    Sí, todos nuestros sistemas son 100% web y responsive. Funcionan en computadoras, tablets y celulares sin necesidad de instalar nada.
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-q" onclick="toggleFaq(this)">
                    ¿Cuáles son las formas de pago?
                    <i class="bi bi-plus-circle faq-icon"></i>
                </div>
                <div class="faq-a">
                    Aceptamos transferencia bancaria, depósito en cuenta, Yape y Plin. Para planes de alquiler se factura mensualmente y puedes cancelar cuando lo desees.
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-q" onclick="toggleFaq(this)">
                    ¿Emiten facturas o boletas?
                    <i class="bi bi-plus-circle faq-icon"></i>
                </div>
                <div class="faq-a">
                    Sí, emitimos comprobantes electrónicos (factura o boleta) a través de SUNAT para todos nuestros servicios y productos.
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ── CTA FINAL ─────────────────────────────── --}}
<section class="cta-section" style="background:linear-gradient(135deg,#1e1b4b,#0891b2);">
    <div class="container">
        <div class="cta-inner" data-aos="fade-up">
            <h2 class="cta-title">¿Prefieres hablar directamente?</h2>
            <p class="cta-subtitle">Contáctanos por WhatsApp y recibe atención inmediata de nuestro equipo.</p>
            <div class="cta-btns">
                @if($config['social_whatsapp'] ?? false)
                <a href="https://wa.me/{{ $config['social_whatsapp'] }}?text=Hola,%20quiero%20información%20sobre%20sus%20sistemas%20web"
                   class="btn btn-white btn-lg" target="_blank">
                    <i class="bi bi-whatsapp"></i> Iniciar Chat en WhatsApp
                </a>
                @endif
                <a href="{{ route('servicios') }}" class="btn btn-outline-white btn-lg">
                    <i class="bi bi-grid-fill"></i> Ver nuestros sistemas
                </a>
            </div>
        </div>
    </div>
</section>

@endsection

@section('scripts')
<script>
function toggleFaq(el) {
    const answer = el.nextElementSibling;
    const isOpen = el.classList.contains('open');
    // Cerrar todos
    document.querySelectorAll('.faq-q.open').forEach(q => {
        q.classList.remove('open');
        q.nextElementSibling.classList.remove('open');
    });
    // Abrir el seleccionado si estaba cerrado
    if (!isOpen) {
        el.classList.add('open');
        answer.classList.add('open');
    }
}
</script>
@endsection