@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-blue-100 via-purple-100 to-pink-100 py-16 relative overflow-hidden">

   <!-- ✨ Floating Gradient Circles Background -->
    <div class="absolute -top-20 -left-20 w-96 h-96 bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 rounded-full opacity-30 animate-pulse-slow"></div>
    <div class="absolute -bottom-32 -right-32 w-96 h-96 bg-gradient-to-r from-yellow-300 via-orange-300 to-red-400 rounded-full opacity-30 animate-pulse-slow"></div>

    <div class="relative max-w-7xl mx-auto px-6">


        <!-- 🌟 Page Heading -->
        <h1 class="text-5xl md:text-6xl font-extrabold text-center text-gray-900 mb-6 animate-fadeDown">
            Contact Me
        </h1>

        <p class="text-center text-gray-700 mb-12 text-lg">
            Feel free to reach out for collaborations, projects, or general inquiries.
        </p>

<!-- 🌄 SIMPLE IMAGE BANNER -->
        <div class="w-full h-64 md:h-80 rounded-3xl overflow-hidden shadow-2xl mb-12">
            <img src="/storage/contact-banner.png" class="w-full h-full object-cover" alt="Contact Banner">
        </div>



        <!-- 🌈 SECTIONS -->
        <div class="space-y-20">

            <!-- 1️⃣ Contact Form -->
            <section class="bg-white p-8 rounded-3xl shadow-xl backdrop-blur-lg">
                <h2 class="text-3xl font-bold mb-6 text-gray-800">Send a Message</h2>
                <form>
                    <div class="grid md:grid-cols-2 gap-6">
                        <input type="text" placeholder="Your Name" class="w-full p-3 rounded-xl bg-gray-100 border focus:ring focus:ring-purple-300">
                        <input type="email" placeholder="Your Email" class="w-full p-3 rounded-xl bg-gray-100 border focus:ring focus:ring-purple-300">
                    </div>

                    <textarea rows="4" placeholder="Your Message" class="w-full p-3 mt-6 rounded-xl bg-gray-100 border focus:ring focus:ring-purple-300"></textarea>

                    <button class="mt-6 w-full bg-purple-600 text-white py-3 rounded-xl font-semibold hover:bg-purple-700 transition">
                        Send Message
                    </button>
                </form>
            </section>

            <!-- 2️⃣ Contact Info -->
            <section class="bg-white p-8 rounded-3xl shadow-xl backdrop-blur-lg">
                <h2 class="text-3xl font-bold mb-6 text-gray-800">Contact Information</h2>

                <div class="grid md:grid-cols-3 gap-8 text-center">
                    <div>
                        <i class="fas fa-phone text-4xl text-purple-500 mb-3"></i>
                        <h4 class="font-bold text-xl">Phone</h4>
                        <p class="text-gray-600">+92 300 0000000</p>
                    </div>

                    <div>
                        <i class="fas fa-envelope text-4xl text-pink-500 mb-3"></i>
                        <h4 class="font-bold text-xl">Email</h4>
                        <p class="text-gray-600">demo@example.com</p>
                    </div>

                    <div>
                        <i class="fas fa-map-marker-alt text-4xl text-blue-500 mb-3"></i>
                        <h4 class="font-bold text-xl">Address</h4>
                        <p class="text-gray-600">Islamabad, Pakistan</p>
                    </div>
                </div>
            </section>

            <!-- 3️⃣ Social Media Links -->
            <section class="bg-white p-8 rounded-3xl shadow-xl backdrop-blur-lg">
                <h2 class="text-3xl font-bold mb-6 text-gray-800">Follow Me</h2>

                <div class="flex justify-center space-x-8 text-4xl">
                    <a href="#" class="text-blue-600 hover:scale-125 transition"><i class="fab fa-facebook"></i></a>
                    <a href="#" class="text-[#1DA1F2] hover:scale-125 transition"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="text-pink-600 hover:scale-125 transition"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="text-gray-900 hover:scale-125 transition"><i class="fab fa-github"></i></a>
                </div>
            </section>

            <!-- 4️⃣ Google Map -->
            <section class="bg-white p-8 rounded-3xl shadow-xl backdrop-blur-lg">
                <h2 class="text-3xl font-bold mb-6 text-gray-800">Location Map</h2>
                <iframe 
                    class="w-full h-72 rounded-2xl"
                    src="https://maps.google.com/maps?q=Islamabad&t=&z=13&ie=UTF8&iwloc=&output=embed">
                </iframe>
            </section>

            <!-- 5️⃣ FAQ Section -->
            <section class="bg-white p-8 rounded-3xl shadow-xl backdrop-blur-lg">
                <h2 class="text-3xl font-bold mb-6 text-gray-800">Frequently Asked Questions</h2>

                <div class="space-y-6">
                    <details class="bg-gray-100 p-4 rounded-xl">
                        <summary class="font-semibold cursor-pointer">How can I create my portfolio?</summary>
                        <p class="mt-2 text-gray-700">Just sign up, add your info, projects, and publish!</p>
                    </details>

                    <details class="bg-gray-100 p-4 rounded-xl">
                        <summary class="font-semibold cursor-pointer">Can I update my details anytime?</summary>
                        <p class="mt-2 text-gray-700">Yes! Dashboard allows full editing anytime.</p>
                    </details>

                    <details class="bg-gray-100 p-4 rounded-xl">
                        <summary class="font-semibold cursor-pointer">Is it free to use?</summary>
                        <p class="mt-2 text-gray-700">Yes, basic version is 100% free.</p>
                    </details>
                </div>
            </section>

        </div>

        <!-- Buttons -->
        <div class="text-center mt-14">
            <a href="{{ url()->previous() }}" class="btn btn-secondary">← Go Back</a>
            <a href="{{ route('dashboard') }}" class="btn btn-primary ms-2">Dashboard</a>
        </div>

    </div>
</div>

<style>
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fadeDown {
    animation: fadeDown 1s ease-out forwards;
}

@keyframes pulse-slow {
    0%,100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.2); opacity: 0.5; }
}
.animate-pulse-slow {
    animation: pulse-slow 10s ease-in-out infinite;
}
</style>
@endsection