@extends('layouts.app')

@section('title', 'Para Negócios — Mangolê')
@section('description', 'Soluções de fornecimento B2B para o seu negócio. Parceiro da sua empresa com condições especiais, entrega programada e gestão de stock.')

@section('content')

<div class="relative overflow-hidden bg-gradient-to-br from-brand-900 via-brand-800 to-brand-700">
    <div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(circle at 25% 50%, white 1px, transparent 1px); background-size: 40px 40px;"></div>
    <x-container class="relative py-20 lg:py-28">
        <div class="max-w-3xl">
            <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-semibold bg-accent/20 text-accent backdrop-blur-sm">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                </svg>
                Soluções Empresariais
            </span>
            <h1 class="mt-6 text-4xl lg:text-5xl xl:text-6xl font-bold text-white leading-tight">
                Abasteça o seu negócio<br>
                <span class="text-accent">com um parceiro preparado</span><br>
                para crescer consigo.
            </h1>
            <p class="mt-6 text-lg lg:text-xl text-brand-100 max-w-2xl leading-relaxed">
                A Mangolê é o parceiro certo para o seu negócio. Fornecemos produtos de qualidade, preços competitivos e uma relação de confiança que ajuda o seu negócio a crescer.
            </p>
            <div class="mt-8 flex flex-wrap gap-4">
                <a href="#form-section" class="inline-flex items-center gap-2 px-7 py-3.5 rounded-xl bg-accent text-brand-900 font-semibold text-base hover:bg-accent-500 transition shadow-lg shadow-brand-900/20">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
                    </svg>
                    Solicitar contacto
                </a>
                <a href="{{ route('produtos') }}" class="inline-flex items-center gap-2 px-7 py-3.5 rounded-xl border-2 border-white/30 text-white font-semibold text-base hover:bg-white/10 transition">
                    Ver produtos
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m9 15 3-3m0 0-3-3m3 3H2.25" />
                    </svg>
                </a>
            </div>
        </div>
    </x-container>
</div>

<x-container class="py-16 lg:py-24">
    <div class="text-center max-w-2xl mx-auto mb-14">
        <h2 class="text-3xl lg:text-4xl font-bold text-gray-900">Porquê escolher a Mangolê para o seu negócio?</h2>
        <p class="mt-3 text-gray-600 text-lg">Construímos parcerias sólidas baseadas em confiança, qualidade e compromisso.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white rounded-xl border border-gray-200 p-6 text-center hover:shadow-lg hover:border-brand-200 transition">
            <div class="mx-auto w-12 h-12 rounded-xl bg-brand-50 flex items-center justify-center text-brand">
                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
                </svg>
            </div>
            <h3 class="mt-4 font-semibold text-gray-900">Qualidade garantida</h3>
            <p class="mt-2 text-sm text-gray-500">Produtos seleccionados com os mais altos padrões de qualidade para o seu negócio.</p>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 p-6 text-center hover:shadow-lg hover:border-brand-200 transition">
            <div class="mx-auto w-12 h-12 rounded-xl bg-brand-50 flex items-center justify-center text-brand">
                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 0 4.5 6h.75m13.5 0h.75a.75.75 0 0 0 .75-.75V4.5M3.75 4.5h16.5M3.75 4.5v11.25c0 .414.336.75.75.75h1.5a.75.75 0 0 0 .75-.75V10.5A.75.75 0 0 1 7.5 9.75h1.5a.75.75 0 0 1 .75.75v5.25a.75.75 0 0 0 .75.75h3a.75.75 0 0 0 .75-.75v-4.5a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 0 .75.75h1.5a.75.75 0 0 0 .75-.75V4.5" />
                </svg>
            </div>
            <h3 class="mt-4 font-semibold text-gray-900">Preços competitivos</h3>
            <p class="mt-2 text-sm text-gray-500">Condições especiais para parceiros empresariais com descontos por volume.</p>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 p-6 text-center hover:shadow-lg hover:border-brand-200 transition">
            <div class="mx-auto w-12 h-12 rounded-xl bg-brand-50 flex items-center justify-center text-brand">
                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 0 1-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 0 0-3.213-9.193 2.056 2.056 0 0 0-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 0 0-10.026 0 1.106 1.106 0 0 0-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />
                </svg>
            </div>
            <h3 class="mt-4 font-semibold text-gray-900">Logística eficiente</h3>
            <p class="mt-2 text-sm text-gray-500">Entrega programada e confiável para manter o seu negócio sempre abastecido.</p>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 p-6 text-center hover:shadow-lg hover:border-brand-200 transition">
            <div class="mx-auto w-12 h-12 rounded-xl bg-brand-50 flex items-center justify-center text-brand">
                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
                </svg>
            </div>
            <h3 class="mt-4 font-semibold text-gray-900">Parceria próxima</h3>
            <p class="mt-2 text-sm text-gray-500">Acompanhamento personalizado e soluções à medida das necessidades do seu negócio.</p>
        </div>
    </div>
</x-container>

<div class="bg-gray-50 border-t border-gray-100">
    <x-container class="py-16 lg:py-24">
        <div class="text-center max-w-2xl mx-auto mb-14">
            <h2 class="text-3xl lg:text-4xl font-bold text-gray-900">Negócios que abastecemos</h2>
            <p class="mt-3 text-gray-600 text-lg">Soluções adaptadas a diferentes perfis empresariais.</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
            @php $businessTypes = [
                ['icon' => 'M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349m-16.5 11.65V9.35m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016c.896 0 1.7-.393 2.25-1.016a3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z', 'title' => 'Supermercados', 'desc' => 'Abastecimento completo para grandes e médias superfícies.'],
                ['icon' => 'M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z', 'title' => 'Mercearias', 'desc' => 'Produtos essenciais para mercearias e pequenos comércios.'],
                ['icon' => 'M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z', 'title' => 'Restaurantes', 'desc' => 'Ingredientes frescos e secos para o seu restaurante.'],
                ['icon' => 'M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205 3 1m1.5.5-1.5-.5M6.75 7.364V3h-3v18m3-13.636 10.5-3.819', 'title' => 'Hotéis', 'desc' => 'Fornecimento para restaurantes e bares hoteleiros.'],
                ['icon' => 'M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z', 'title' => 'Revendedores', 'desc' => 'Condições especiais para revenda de produtos Mangolê.'],
            ]; @endphp
            @foreach ($businessTypes as $bt)
            <div class="bg-white rounded-xl border border-gray-200 p-5 text-center hover:shadow-md hover:border-brand-200 transition group">
                <div class="mx-auto w-10 h-10 rounded-lg bg-brand-50 flex items-center justify-center text-brand group-hover:bg-brand group-hover:text-white transition">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="{{ $bt['icon'] }}" />
                    </svg>
                </div>
                <h3 class="mt-3 font-semibold text-gray-900 text-sm">{{ $bt['title'] }}</h3>
                <p class="mt-1 text-xs text-gray-500">{{ $bt['desc'] }}</p>
            </div>
            @endforeach
        </div>
    </x-container>
</div>

<div class="bg-white border-t border-gray-100">
    <x-container class="py-16 lg:py-24">
        <div class="text-center max-w-2xl mx-auto mb-14">
            <h2 class="text-3xl lg:text-4xl font-bold text-gray-900">Categorias de produtos</h2>
            <p class="mt-3 text-gray-600 text-lg">Disponibilizamos uma vasta gama de produtos para o seu negócio.</p>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
            @foreach ($categories as $cat)
            <a href="{{ route('categorias.detalhes', $cat->slug) }}"
               class="flex flex-col items-center gap-3 p-5 rounded-xl border border-gray-200 hover:border-brand-200 hover:shadow-md hover:bg-brand-50/30 transition group">
                <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 group-hover:bg-brand-100 group-hover:text-brand transition">
                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700 group-hover:text-brand transition text-center">{{ $cat->name }}</span>
            </a>
            @endforeach
        </div>
    </x-container>
</div>

<div class="bg-gray-50 border-t border-gray-100">
    <x-container class="py-16 lg:py-24">
        <div class="text-center max-w-2xl mx-auto mb-14">
            <h2 class="text-3xl lg:text-4xl font-bold text-gray-900">Como funciona</h2>
            <p class="mt-3 text-gray-600 text-lg">Quatro passos simples para iniciarmos uma parceria.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div class="text-center">
                <div class="mx-auto w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center text-xl font-bold">1</div>
                <h3 class="mt-4 font-semibold text-gray-900">Preencha o formulário</h3>
                <p class="mt-2 text-sm text-gray-500">Conte-nos sobre o seu negócio e as suas necessidades.</p>
            </div>
            <div class="hidden md:flex items-center justify-center">
                <svg class="w-6 h-6 text-brand-200" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m9 4.5 6 6-6 6" />
                </svg>
            </div>
            <div class="text-center">
                <div class="mx-auto w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center text-xl font-bold">2</div>
                <h3 class="mt-4 font-semibold text-gray-900">Analisamos o seu perfil</h3>
                <p class="mt-2 text-sm text-gray-500">A nossa equipa comercial avalia as suas necessidades.</p>
            </div>
            <div class="hidden md:flex items-center justify-center">
                <svg class="w-6 h-6 text-brand-200" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m9 4.5 6 6-6 6" />
                </svg>
            </div>
            <div class="text-center">
                <div class="mx-auto w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center text-xl font-bold">3</div>
                <h3 class="mt-4 font-semibold text-gray-900">Recebe o nosso contacto</h3>
                <p class="mt-2 text-sm text-gray-500">Entramos em contacto com uma proposta personalizada.</p>
            </div>
            <div class="hidden md:flex items-center justify-center">
                <svg class="w-6 h-6 text-brand-200" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m9 4.5 6 6-6 6" />
                </svg>
            </div>
            <div class="text-center">
                <div class="mx-auto w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center text-xl font-bold">4</div>
                <h3 class="mt-4 font-semibold text-gray-900">Iniciamos a parceria</h3>
                <p class="mt-2 text-sm text-gray-500">Começamos a abastecer o seu negócio com qualidade Mangolê.</p>
            </div>
        </div>
    </x-container>
</div>

<div id="form-section" class="bg-white border-t border-gray-100">
    <x-container class="py-16 lg:py-24">
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-12 lg:gap-16">
            <div class="lg:col-span-2">
                <h2 class="text-3xl lg:text-4xl font-bold text-gray-900">Solicite um contacto</h2>
                <p class="mt-3 text-gray-600 text-lg">Preencha o formulário e a nossa equipa comercial entrará em contacto consigo.</p>

                <div class="mt-8 space-y-5">
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 rounded-lg bg-brand-50 flex items-center justify-center text-brand shrink-0">
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
                            </svg>
                        </div>
                        <div>
                            <p class="font-medium text-gray-900">Telefone</p>
                            <p class="text-sm text-gray-500">+244 900 000 000</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 rounded-lg bg-brand-50 flex items-center justify-center text-brand shrink-0">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                            </svg>
                        </div>
                        <div>
                            <p class="font-medium text-gray-900">WhatsApp</p>
                            <p class="text-sm text-gray-500">+244 900 000 000</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 rounded-lg bg-brand-50 flex items-center justify-center text-brand shrink-0">
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
                            </svg>
                        </div>
                        <div>
                            <p class="font-medium text-gray-900">Email</p>
                            <p class="text-sm text-gray-500">negocios@mwangole.co.ao</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="lg:col-span-3">
                @if (request('success'))
                <div class="rounded-xl border border-green-200 bg-green-50 p-6" role="alert">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                        </div>
                        <div>
                            <p class="font-semibold text-green-800">Pedido enviado com sucesso!</p>
                            <p class="text-sm text-green-700 mt-0.5">A nossa equipa comercial irá analisar o seu perfil e entrará em contacto consigo brevemente.</p>
                        </div>
                    </div>
                </div>
                @else
                <form method="POST" action="{{ route('negocios') }}" class="bg-white rounded-xl border border-gray-200 p-6 lg:p-8 space-y-5">
                    @csrf
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nome completo *</label>
                            <input type="text" name="name" id="name" required
                                   class="w-full px-4 py-2.5 rounded-lg border border-gray-300 text-sm focus:ring-2 focus:ring-brand focus:border-brand outline-none transition @error('name') border-red-400 @enderror"
                                   value="{{ old('name') }}">
                            @error('name') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label for="company" class="block text-sm font-medium text-gray-700 mb-1">Empresa *</label>
                            <input type="text" name="company" id="company" required
                                   class="w-full px-4 py-2.5 rounded-lg border border-gray-300 text-sm focus:ring-2 focus:ring-brand focus:border-brand outline-none transition @error('company') border-red-400 @enderror"
                                   value="{{ old('company') }}">
                            @error('company') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label for="business_type" class="block text-sm font-medium text-gray-700 mb-1">Tipo de negócio</label>
                            <select name="business_type" id="business_type"
                                    class="w-full px-4 py-2.5 rounded-lg border border-gray-300 text-sm focus:ring-2 focus:ring-brand focus:border-brand outline-none transition bg-white @error('business_type') border-red-400 @enderror">
                                <option value="">Seleccione...</option>
                                <option value="supermarket" {{ old('business_type') === 'supermarket' ? 'selected' : '' }}>Supermercado</option>
                                <option value="grocery" {{ old('business_type') === 'grocery' ? 'selected' : '' }}>Mercearia</option>
                                <option value="restaurant" {{ old('business_type') === 'restaurant' ? 'selected' : '' }}>Restaurante</option>
                                <option value="hotel" {{ old('business_type') === 'hotel' ? 'selected' : '' }}>Hotel</option>
                                <option value="reseller" {{ old('business_type') === 'reseller' ? 'selected' : '' }}>Revendedor</option>
                                <option value="other" {{ old('business_type') === 'other' ? 'selected' : '' }}>Outro</option>
                            </select>
                            @error('business_type') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Telefone *</label>
                            <input type="tel" name="phone" id="phone" required
                                   class="w-full px-4 py-2.5 rounded-lg border border-gray-300 text-sm focus:ring-2 focus:ring-brand focus:border-brand outline-none transition @error('phone') border-red-400 @enderror"
                                   value="{{ old('phone') }}">
                            @error('phone') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email *</label>
                            <input type="email" name="email" id="email" required
                                   class="w-full px-4 py-2.5 rounded-lg border border-gray-300 text-sm focus:ring-2 focus:ring-brand focus:border-brand outline-none transition @error('email') border-red-400 @enderror"
                                   value="{{ old('email') }}">
                            @error('email') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label for="province_id" class="block text-sm font-medium text-gray-700 mb-1">Província</label>
                            <select name="province_id" id="province_id"
                                    class="w-full px-4 py-2.5 rounded-lg border border-gray-300 text-sm focus:ring-2 focus:ring-brand focus:border-brand outline-none transition bg-white @error('province_id') border-red-400 @enderror">
                                <option value="">Seleccione...</option>
                                @foreach ($provinces as $province)
                                    <option value="{{ $province->id }}" {{ old('province_id') == $province->id ? 'selected' : '' }}>{{ $province->name }}</option>
                                @endforeach
                            </select>
                            @error('province_id') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                        </div>
                    </div>
                    <div>
                        <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Mensagem *</label>
                        <textarea name="message" id="message" rows="4" required
                                  class="w-full px-4 py-2.5 rounded-lg border border-gray-300 text-sm focus:ring-2 focus:ring-brand focus:border-brand outline-none transition @error('message') border-red-400 @enderror"
                                  placeholder="Conte-nos sobre o seu negócio e como podemos ajudar...">{{ old('message') }}</textarea>
                        @error('message') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                    </div>
                    <button type="submit"
                            class="inline-flex items-center justify-center gap-2 px-7 py-3 rounded-xl bg-brand text-white font-semibold text-base hover:bg-brand-700 transition w-full sm:w-auto">
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
                        </svg>
                        Enviar pedido
                    </button>
                </form>
                @endif
            </div>
        </div>
    </x-container>
</div>
@endsection
