<!DOCTYPE html>
<html lang="pt-AO" class="scroll-smooth">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>@yield('title', 'Portal de Fornecedores') — Mangolê</title>
    <meta name="description" content="@yield('description', 'Torne-se fornecedor da Mangolê. Ajudamos marcas e produtores a crescerem em Angola.')">

    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:300,400,500,600,700,800&display=swap" rel="stylesheet" />

    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <style>
        /* ── TIPOGRAFIA BASE ────────────────────────────── */
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #F8FAFC;
            color: #0F172A;
        }

        /* ── HERO COM IMAGEM REAL ───────────────────────── */
        .hero-section {
            position: relative;
            overflow: hidden;
            min-height: 600px;
        }
        .hero-bg-image {
            position: absolute;
            inset: 0;
            background-image: url('/images/fornecedores.png');
            background-size: cover;
            background-position: center 60%;
            background-repeat: no-repeat;
        }

        /* ── BOTÕES Mangolê ────────────────────────────── */
        .btn-primary {
            display: inline-block;
            background-color: #FFC72C;
            color: #00477D;
            font-weight: 800;
            border-radius: 9999px;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-primary:hover {
            background-color: #F5B813;
            transform: translateY(-2px);
            box-shadow: 0 12px 24px -6px rgba(255, 199, 44, 0.45);
        }
        .btn-secondary {
            display: inline-block;
            background-color: #00477D;
            color: #FFFFFF;
            font-weight: 800;
            border-radius: 9999px;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-secondary:hover {
            background-color: #00477D;
            transform: translateY(-2px);
            box-shadow: 0 12px 24px -6px rgba(0, 71, 125, 0.35);
        }
        .btn-outline {
            display: inline-block;
            border: 2px solid rgba(255,255,255,0.6);
            color: #FFFFFF;
            font-weight: 700;
            border-radius: 9999px;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-outline:hover {
            background-color: rgba(255,255,255,0.15);
            border-color: #FFC72C;
            color: #FFC72C;
            transform: translateY(-2px);
        }

        /* ── SECÇÃO TIPOGRAFIA ──────────────────────────── */
        .section-label {
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #00477D;
            background-color: #EEF5FC;
            padding: 0.3rem 0.85rem;
            border-radius: 9999px;
        }
        .section-label--gold {
            color: #92400E;
            background-color: #FFF9EB;
        }
        .section-title {
            font-size: clamp(1.6rem, 3vw, 2.2rem);
            font-weight: 800;
            color: #0F172A;
            letter-spacing: -0.02em;
            line-height: 1.2;
        }
        .section-body {
            color: #64748B;
            font-size: 0.95rem;
            line-height: 1.7;
        }

        /* ── CARDS ──────────────────────────────────────── */
        .benefit-card {
            transition: transform 0.3s cubic-bezier(0.4,0,0.2,1),
                        box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
        }
        .benefit-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px -12px rgba(0, 71, 125, 0.12);
        }
        .case-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .case-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 32px -8px rgba(0,0,0,0.08);
        }

        /* ── FORMULÁRIO ─────────────────────────────────── */
        .form-label {
            display: block;
            font-size: 0.75rem;
            font-weight: 600;
            color: #374151;
            margin-bottom: 0.35rem;
        }
        .form-input {
            width: 100%;
            padding: 0.75rem 1rem;
            border-radius: 0.75rem;
            background-color: #F8FAFC;
            border: 1.5px solid #E2E8F0;
            color: #0F172A;
            font-size: 0.875rem;
            font-weight: 500;
            transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
            outline: none;
        }
        .form-input:focus {
            background-color: #FFFFFF;
            border-color: #00477D;
            box-shadow: 0 0 0 3px rgba(0, 71, 125, 0.12);
        }
        .form-section-title {
            font-size: 0.8rem;
            font-weight: 700;
            color: #00477D;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            border-bottom: 2px solid #EEF5FC;
            padding-bottom: 0.6rem;
        }

        /* ── TESTEMUNHAL CARDS 3D ──────────────────────────── */
        .testimonial-card {
            width: 320px;
            flex-shrink: 0;
            background: linear-gradient(145deg, #00477D 0%, #00477D 100%);
            border-radius: 1.25rem;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            box-shadow: 0 8px 24px rgba(0,71,125,.25),
                        0 2px 8px rgba(0,71,125,.15),
                        inset 0 1px 0 rgba(255,255,255,.12);
            transform: perspective(800px) rotateY(-2deg) scale(0.97);
            transition: transform 0.4s cubic-bezier(.22,.61,.36,1),
                        box-shadow 0.4s cubic-bezier(.22,.61,.36,1);
            border: 1px solid rgba(255,255,255,.1);
        }
        .testimonial-card:hover {
            transform: perspective(800px) rotateY(0deg) scale(1) translateY(-6px);
            box-shadow: 0 20px 48px rgba(0,71,125,.35),
                        0 6px 16px rgba(0,71,125,.2),
                        inset 0 1px 0 rgba(255,255,255,.15);
        }

        /* ── CARROSSEL COM SETAS ────────────────────────── */
        .carousel-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .carousel-viewport {
            overflow: hidden;
            flex: 1;
        }
        .carousel-track {
            display: flex;
            gap: 1.5rem;
            transition: transform 0.5s cubic-bezier(.22,.61,.36,1);
            will-change: transform;
        }
        .carousel-arrow {
            width: 44px;
            height: 44px;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,.85);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            color: #00477D;
            box-shadow: 0 4px 12px rgba(0,71,125,.1);
            border: 1px solid rgba(255,255,255,.5);
            transition: all 0.25s cubic-bezier(.22,.61,.36,1);
            flex-shrink: 0;
            cursor: pointer;
        }
        .carousel-arrow:hover {
            background: #fff;
            transform: scale(1.08);
            box-shadow: 0 8px 20px rgba(0,71,125,.15);
        }
        .carousel-arrow:active {
            transform: scale(0.95);
        }

        /* ── SCROLL REVEAL ──────────────────────────────── */
        .reveal {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            transition-delay: var(--delay, 0ms);
        }
        .reveal.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        .reveal-delay-1 { --delay: 120ms; }
        .reveal-delay-2 { --delay: 240ms; }
        .reveal-delay-3 { --delay: 360ms; }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const observe = (selector, className = 'is-visible') => {
                const els = document.querySelectorAll(selector);
                if (!els.length) return;
                const io = new IntersectionObserver((entries) => {
                    entries.forEach(e => {
                        if (e.isIntersecting) {
                            e.target.classList.add(className);
                            io.unobserve(e.target);
                        }
                    });
                }, { threshold: 0.12 });
                els.forEach(el => io.observe(el));
            };
            observe('.reveal');
        });
    </script>
</head>
<body class="bg-slate-50 text-slate-800 antialiased flex flex-col min-h-screen relative" x-data="{ scrolled: false }" x-init="addEventListener('scroll', () => { scrolled = window.scrollY > 150 }, { passive: true })">

    <!-- HEADER LIMPO Mangolê -->
    <header
        x-data="{ mobileOpen: false }"
        class="sticky top-0 z-50 transition-all duration-300 bg-[#00477D] border-b border-white/10 shadow-lg"
    >
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-20">
                
                <!-- BRANDING -->
                <div class="flex items-center gap-3">
                    <a href="{{ route('suppliers.index') }}" class="flex items-center group">
                        <img src="{{ asset('images/logo-mangole.png') }}" alt="Mangolê" class="h-10 w-auto">

                    </a>
                </div>

                <!-- LINKS DE NAVEGAÇÃO -->
                <nav class="hidden lg:flex items-center gap-8 text-sm font-semibold text-white/80">
                    <a href="{{ route('suppliers.index') }}#beneficios" class="hover:text-[#FFC72C] transition-colors">Por que a Mangolê?</a>
                    <a href="{{ route('suppliers.index') }}#como-fornecer" class="hover:text-[#FFC72C] transition-colors">Como abastecer</a>
                    <a href="{{ route('suppliers.index') }}#estudos-de-caso" class="hover:text-[#FFC72C] transition-colors">Estudos de caso</a>
                    <a href="{{ route('suppliers.index') }}#faq" class="hover:text-[#FFC72C] transition-colors">FAQ</a>
                    <a href="{{ url('/') }}" class="text-white/50 hover:text-white text-xs flex items-center gap-1 pl-4 ml-4 border-l border-white/10 transition-colors">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                        Site Mangolê
                    </a>
                </nav>

                <!-- BOTÃO CTA CANDIDATURA -->
                <div class="hidden sm:flex items-center gap-4">
                    <a href="{{ route('suppliers.index') }}#candidatura" class="btn-primary px-6 py-3 text-sm shadow-sm">
                        Candidate-se agora
                    </a>
                </div>

                <!-- HAMBURGER MENU MOBILE -->
                <button @click="mobileOpen = !mobileOpen"
                        @keydown.escape.window="mobileOpen = false"
                        :aria-expanded="mobileOpen"
                        aria-controls="mobile-menu-drawer"
                        class="lg:hidden p-2 rounded-xl text-white/80 hover:bg-white/10 transition-colors">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path x-show="!mobileOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                        <path x-show="mobileOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
        </div>

        <!-- MOBILE MENU DRAWER -->
        <div id="mobile-menu-drawer"
             x-show="mobileOpen"
             x-cloak
             class="lg:hidden bg-[#00477D] border-b border-white/10 px-6 py-6 space-y-4 shadow-lg">
            <a href="{{ route('suppliers.index') }}#beneficios" @click="mobileOpen = false" class="block text-white/80 font-semibold text-base py-1 hover:text-[#FFC72C] transition-colors">Por que a Mangolê?</a>
            <a href="{{ route('suppliers.index') }}#como-fornecer" @click="mobileOpen = false" class="block text-white/80 font-semibold text-base py-1 hover:text-[#FFC72C] transition-colors">Como abastecer</a>
            <a href="{{ route('suppliers.index') }}#estudos-de-caso" @click="mobileOpen = false" class="block text-white/80 font-semibold text-base py-1 hover:text-[#FFC72C] transition-colors">Estudos de caso</a>
            <a href="{{ route('suppliers.index') }}#faq" @click="mobileOpen = false" class="block text-white/80 font-semibold text-base py-1 hover:text-[#FFC72C] transition-colors">FAQ</a>
            <div class="pt-4 border-t border-white/10 flex flex-col gap-3">
                <a href="{{ route('suppliers.index') }}#candidatura" @click="mobileOpen = false" class="btn-primary w-full text-center py-3 text-sm">
                    Candidate-se agora
                </a>
                <a href="{{ url('/') }}" class="text-center text-sm font-semibold text-white/70 hover:text-white py-2 flex items-center justify-center gap-1.5 bg-white/5 rounded-lg transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                    Ir para o site Mangolê
                </a>
            </div>
        </div>
    </header>

    <!-- FLOATING BAR DE CONVERSÃO EM MOBILE -->
    <div x-show="scrolled" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-10" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-10" class="fixed bottom-4 left-4 right-4 z-40 sm:hidden">
        <a href="{{ route('suppliers.index') }}#candidatura" class="btn-primary w-full py-3.5 text-center text-sm shadow-xl flex items-center justify-center gap-2">
            Candidate-se a Fornecedor Mangolê
        </a>
    </div>

    <!-- CONTEÚDO PRINCIPAL DA PÁGINA -->
    <main class="flex-grow">
        @yield('content')
    </main>

    <!-- FOOTER LIMPO E INSTITUCIONAL -->
    <footer class="bg-[#00477D] text-slate-300 text-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-10 mb-12">
                <!-- COLUNA 1 -->
                <div class="space-y-4">
                    <div class="flex items-center gap-3">
                        <img src="{{ asset('images/logo-mangole.png') }}" alt="Mangolê" class="h-9 w-auto">
                        <span class="font-extrabold text-white text-lg tracking-tight">Mangolê B2B</span>
                    </div>
                    <p class="text-xs text-slate-300 leading-relaxed">
                        Construímos parcerias sólidas e transparentes com produtores e fornecedores por toda Angola.
                    </p>
                </div>

                <!-- COLUNA 2 -->
                <div class="space-y-3">
                    <h4 class="font-bold text-[#FFC72C] text-xs uppercase tracking-wider">Navegação</h4>
                    <ul class="space-y-2 text-xs text-slate-300">
                        <li><a href="{{ route('suppliers.index') }}#beneficios" class="hover:text-white transition-colors">Por que a Mangolê?</a></li>
                        <li><a href="{{ route('suppliers.index') }}#como-fornecer" class="hover:text-white transition-colors">Como abastecer</a></li>
                        <li><a href="{{ route('suppliers.index') }}#candidatura" class="hover:text-white transition-colors">Formulário de inscrição</a></li>
                    </ul>
                </div>

                <!-- COLUNA 3 -->
                <div class="space-y-3">
                    <h4 class="font-bold text-[#FFC72C] text-xs uppercase tracking-wider">Informações</h4>
                    <ul class="space-y-2 text-xs text-slate-300">
                        <li><a href="{{ route('suppliers.index') }}#faq" class="hover:text-white transition-colors">Perguntas Frequentes</a></li>
                        <li><a href="{{ url('/') }}" class="hover:text-white transition-colors">Site Mangolê</a></li>
                        <li><a href="{{ url('/lojas') }}" class="hover:text-white transition-colors">Rede de Lojas</a></li>
                    </ul>
                </div>

                <!-- COLUNA 4 -->
                <div class="space-y-3" x-data="{ copied: false }">
                    <h4 class="font-bold text-[#FFC72C] text-xs uppercase tracking-wider">Contacto Comercial</h4>
                    <p class="text-xs text-slate-300">
                        Direção de Gestão de Fornecedores<br>
                        Luanda, Angola
                    </p>
                    <div class="pt-1">
                        <button @click="navigator.clipboard.writeText('compras@mangole.ao'); copied = true; setTimeout(() => copied = false, 2000)" class="text-xs font-semibold text-white hover:text-[#FFC72C] transition-colors flex items-center gap-1.5 bg-white/10 px-3 py-1.5 rounded-lg border border-white/10">
                            <span x-text="copied ? '✓ Email Copiado!' : 'Email: compras@mangole.ao'"></span>
                        </button>
                    </div>
                </div>
            </div>

            <div class="pt-8 border-t border-white/10 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-400 gap-4">
                <p>&copy; {{ date('Y') }} Mangolê Retalho. Todos os direitos reservados.</p>
                <div class="flex items-center gap-6">
                    <a href="{{ url('/') }}" class="hover:text-white transition-colors">Homepage</a>
                    <a href="{{ url('/lojas') }}" class="hover:text-white transition-colors">Rede de Lojas</a>
                    <a href="{{ url('/para-negocios') }}" class="hover:text-white transition-colors">Para Negócios</a>
                </div>
            </div>
        </div>
    </footer>

    <x-back-to-top />

    @stack('scripts')
</body>
</html>
