@extends('layouts.app')

@section('title', 'Paiement Sécurisé - HOCHMAN Legal')
@section('description', 'Paiement sécurisé des honoraires par carte bancaire ou virement. Réglez votre consultation, acompte ou solde d\'honoraires en ligne.')

@section('content')
<div class="min-h-screen bg-gray-50">
    <!-- Hero Section -->
    <x-hero-section 
    title="Paiement Sécurisé"
    subtitle="Transactions Protégées"
    description="Réglez vos honoraires en toute sécurité grâce à nos solutions de paiement modernes et fiables."
    background-image="https://images.unsplash.com/photo-1563013544-824ae1b704d3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80"
    overlay-opacity="0.8"
/>

    <!-- Payment Methods Section -->
    <section class="py-20">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid lg:grid-cols-2 gap-12">
                <!-- Stripe Payment -->
                <div class="group relative">
                    <div class="absolute -inset-1 bg-red-600 rounded-2xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
                    <div class="relative bg-white p-8 lg:p-12 rounded-2xl shadow-xl border border-gray-100 transform group-hover:scale-105 transition-all duration-500">
                        <div class="flex items-center mb-6">
                            <div class="w-16 h-16 bg-red-600 rounded-2xl flex items-center justify-center mr-4 transform group-hover:rotate-12 transition-transform duration-500">
                                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
                                </svg>
                            </div>
                            <h2 class="text-3xl font-bold text-gray-900">💳 Paiement par Carte Bancaire (Stripe)</h2>
                        </div>
                        
                        <p class="text-lg text-gray-600 mb-8 leading-relaxed">
                            Cliquez sur le bouton ci-dessous pour accéder à notre lien de paiement sécurisé Stripe.
                        </p>
                        
                        <a href="https://buy.stripe.com/28EfZhdOvdop30yaOm6sw00" target="_blank" class="group/btn relative inline-flex items-center justify-center w-full bg-red-600 hover:bg-red-700 text-white px-8 py-6 rounded-xl text-xl font-bold transition-all duration-500 transform hover:scale-105 shadow-2xl hover:shadow-red-500/25 overflow-hidden">
                            <span class="relative flex items-center">
                                <svg class="w-6 h-6 mr-3 transform group-hover/btn:rotate-12 transition-transform duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                                </svg>
                                Régler le montant convenu en ligne
                            </span>
                        </a>
                        
                        <div class="mt-6 flex items-center justify-center text-green-600 font-semibold">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                            </svg>
                            🔒 Transaction 100 % sécurisée
                        </div>
                    </div>
                </div>

                <!-- Bank Transfer -->
                <div class="group relative">
                    <div class="absolute -inset-1 bg-black rounded-2xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
                    <div class="relative bg-white p-8 lg:p-12 rounded-2xl shadow-xl border border-gray-100 transform group-hover:scale-105 transition-all duration-500">
                        <div class="flex items-center mb-6">
                            <div class="w-16 h-16 bg-black rounded-2xl flex items-center justify-center mr-4 transform group-hover:rotate-12 transition-transform duration-500">
                                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                </svg>
                            </div>
                            <h2 class="text-3xl font-bold text-gray-900">🏦 Paiement par Virement Bancaire</h2>
                        </div>
                        
                        <p class="text-lg text-gray-600 mb-8 leading-relaxed">
                            Si vous préférez régler par virement, merci d'utiliser les coordonnées suivantes :
                        </p>
                        
                        <div class="space-y-4 bg-gray-50 p-6 rounded-xl border border-gray-200">
                            <div class="flex items-center">
                                <span class="font-bold text-gray-900 w-24">Titulaire :</span>
                                <span class="text-gray-700 font-medium">Boris HOCHMAN</span>
                            </div>
                            <div class="flex items-center">
                                <span class="font-bold text-gray-900 w-24">IBAN :</span>
                                <span class="text-gray-700 font-mono text-sm bg-white px-3 py-1 rounded border">FR58 3000 2090 2300 0000 4583 D52</span>
                            </div>
                            <div class="flex items-center">
                                <span class="font-bold text-gray-900 w-24">BIC :</span>
                                <span class="text-gray-700 font-mono text-sm bg-white px-3 py-1 rounded border">CRLYFRPP</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

/* Roboto Font */
* {
    font-family: 'Roboto', sans-serif;
}

@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}
</style>
@endsection