@extends('layouts.app')

<style>
    body {
        font-family: "Poppins", sans-serif;
        background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
        color: #fff;
        overflow-x: hidden;
        position: relative;
        margin: 0;
        padding: 0;
    }

    /* Floating Background Icons */
    .bg-icon {
        position: absolute;
        font-size: 3rem;
        color: rgba(255, 215, 0, 0.2);
        animation: float 10s infinite ease-in-out;
        z-index: 0;
    }

    @keyframes float {
        0% {
            transform: translateY(0) rotate(0deg);
        }

        50% {
            transform: translateY(-50px) rotate(180deg);
        }

        100% {
            transform: translateY(0) rotate(360deg);
        }
    }

    /* Header */
    .navbar {
        background: rgba(26, 26, 46, 0.95);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        padding: 15px 0;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .navbar-brand {
        font-family: "Orbitron", sans-serif;
        font-size: 2rem;
        color: #ffd700 !important;
        text-shadow: 0 0 10px #ffd700;
        display: flex;
        align-items: center;
    }

    .nav-link {
        color: #fff !important;
        font-weight: 600;
        transition: all 0.3s;
    }

    .nav-link:hover {
        color: #00c853 !important;
        text-shadow: 0 0 5px #00c853;
    }

    /* Hamburger Menu Styling */
    .navbar-toggler {
        border: none;
        padding: 10px;
    }

    .navbar-toggler-icon {
        background-image: none;
        width: 30px;
        height: 3px;
        background-color: #ffd700;
        position: relative;
        transition: all 0.3s ease;
    }

    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after {
        content: '';
        position: absolute;
        width: 30px;
        height: 3px;
        background-color: #ffd700;
        left: 0;
        transition: all 0.3s ease;
    }

    .navbar-toggler-icon::before {
        top: -10px;
    }

    .navbar-toggler-icon::after {
        bottom: -10px;
    }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background: transparent;
    }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        transform: rotate(45deg);
        top: 0;
    }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        transform: rotate(-45deg);
        bottom: 0;
    }

    .navbar-collapse {
        background: rgba(26, 26, 46, 0.95);
    }

    @media (max-width: 991.98px) {
        .navbar-nav {
            padding: 15px;
            text-align: center;
        }

        .nav-item {
            margin: 10px 0;
        }
    }

    /* Language Switcher Styling */
    .language-switcher {
        margin-left: 15px;
        display: flex;
        align-items: center;
    }

    .language-switcher select {
        background: rgba(255, 215, 0, 0.1);
        border: 1px solid #ffd700;
        color: #fff;
        font-family: "Poppins", sans-serif;
        font-size: 0.9rem;
        padding: 5px 10px;
        border-radius: 5px;
        transition: all 0.3s;
    }

    .language-switcher select:hover {
        background: rgba(255, 215, 0, 0.2);
        box-shadow: 0 0 5px #ffd700;
    }

    .language-switcher select:focus {
        outline: none;
        box-shadow: 0 0 10px #00c853;
    }

    @media (max-width: 991.98px) {
        .language-switcher {
            margin-left: 0;
            margin-top: 10px;
            justify-content: center;
        }
    }

    /* Hero Section */
    .hero-section {
        min-height: 50vh;
        position: relative;
        overflow: hidden;
        background: url("https://via.placeholder.com/1500x800") no-repeat center/cover;
        background-blend-mode: overlay;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        text-align: center;
    }

    .hero-title {
        font-family: "Orbitron", sans-serif;
        font-size: 3rem;
        text-shadow: 0 0 25px #ffd700, 0 0 50px #00c853;
        animation: glow 1.5s infinite alternate;
    }

    .hero-subtitle {
        font-size: 1.5rem;
        color: #e5e7eb;
        animation: fadeIn 2s ease-in;
    }

    .coin-animation {
        position: absolute;
        font-size: 2.5rem;
        color: #ffd700;
        animation: fall 6s infinite linear;
        z-index: 1;
    }

    @keyframes fall {
        0% {
            transform: translateY(-100vh) rotate(0deg);
            opacity: 1;
        }

        100% {
            transform: translateY(100vh) rotate(720deg);
            opacity: 0;
        }
    }

    @keyframes glow {
        0% {
            text-shadow: 0 0 10px #ffd700;
        }

        100% {
            text-shadow: 0 0 40px #ffd700, 0 0 60px #00c853;
        }
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    /* Contact Form Section */
    .contact-card {
        background: rgba(255, 255, 255, 0.05);
        border: 2px dashed #ffd700;
        border-radius: 20px;
        padding: 30px;
        transition: all 0.3s;
        position: relative;
        overflow: hidden;
        min-height: 400px;
    }

    .contact-card:hover {
        transform: translateY(-15px);
        box-shadow: 0 0 30px #ffd700;
        background: rgba(255, 215, 0, 0.1);
    }

    .contact-card .form-control {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid #ffd700;
        color: #fff;
        border-radius: 10px;
        transition: all 0.3s;
    }

    .contact-card .form-control:focus {
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 10px #00c853;
        border-color: #00c853;
    }

    .contact-card .btn {
        background: #ffd700;
        border-color: #ffd700;
        color: #000;
        font-weight: 600;
        border-radius: 50px;
        padding: 10px 25px;
        transition: all 0.3s;
    }

    .contact-card .btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
        background: #00c853;
        border-color: #00c853;
        color: #fff;
    }

    /* Contact Info Section */
    .info-card {
        background: rgba(0, 200, 83, 0.1);
        border: 2px solid #ffd700;
        border-radius: 15px;
        padding: 20px;
        transition: all 0.3s;
        min-height: 150px;
    }

    .info-card:hover {
        transform: scale(1.05);
        box-shadow: 0 0 25px #00c853;
    }

    .info-icon {
        font-size: 2.5rem;
        color: #ffd700;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.2);
        }

        100% {
            transform: scale(1);
        }
    }

    /* Footer */
    .footer {
        background: #1a1a2e;
        padding: 40px 0;
        position: relative;
        width: 100%;
    }

    .footer a {
        color: #ffd700;
        transition: all 0.3s;
    }

    .footer a:hover {
        color: #00c853;
        text-shadow: 0 0 10px #00c853;
    }

    .footer-icon {
        font-size: 2rem;
        margin: 0 15px;
        animation: bounce 2s infinite;
    }

    @keyframes bounce {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-10px);
        }
    }

    /* General Fixes */
    section {
        padding: 60px 0;
    }

    .container {
        position: relative;
        z-index: 2;
    }

    h2 {
        font-family: "Orbitron", sans-serif;
        font-size: 2.5rem;
        margin-bottom: 40px;
    }
</style> <!-- Floating Background Icons -->
<span class="bg-icon" style="top: 10%; left: 5%"><i class="fa-solid fa-coins"></i></span>
<span class="bg-icon" style="top: 20%; right: 10%; animation-delay: 2s"><i class="fa-solid fa-dollar-sign"></i></span>
<span class="bg-icon" style="bottom: 15%; left: 15%; animation-delay: 4s"><i class="fa-solid fa-wallet"></i></span>
<span class="bg-icon" style="bottom: 25%; right: 20%; animation-delay: 6s"><i class="fa-solid fa-coins"></i></span>
<span class="bg-icon" style="top: 30%; left: 25%; animation-delay: 8s"><i class="fa-solid fa-wallet"></i></span>




<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <h1 class="hero-title">
            <i class="fa-solid fa-envelope me-2"></i><span data-lang="hero-title">Contact Us</span>
        </h1>
        <p class="hero-subtitle">
            <i class="fa-solid fa-headset me-2"></i><span data-lang="hero-subtitle">We’re Here to Help You Build Your
                Digital Empire!</span>
        </p>
        <!-- Coin Animations -->
        <span class="coin-animation" style="left: 5%; top: 0"><i class="fa-solid fa-coins"></i></span>
        <span class="coin-animation" style="left: 25%; top: -20%; animation-delay: 1s"><i
                class="fa-solid fa-dollar-sign"></i></span>
        <span class="coin-animation" style="left: 50%; top: -40%; animation-delay: 2s"><i
                class="fa-solid fa-wallet"></i></span>
        <span class="coin-animation" style="right: 25%; top: -10%; animation-delay: 3s"><i
                class="fa-solid fa-coins"></i></span>
        <span class="coin-animation" style="right: 5%; top: -30%; animation-delay: 4s"><i
                class="fa-solid fa-wallet"></i></span>
    </div>
</section>

<!-- Contact Form Section -->
<section class="py-5 text-center">
    <div class="container">
        <h2>
            <i class="fa-solid fa-paper-plane me-2"></i><span data-lang="form-title">Get in Touch</span>
        </h2>
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="contact-card">
                    <form action="{{ route('contact.store') }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <input type="text" class="form-control" name="name" placeholder="Your Name"
                                data-lang="name-placeholder" required>
                            @error('name')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <input type="email" class="form-control" name="email" placeholder="Your Email"
                                data-lang="email-placeholder" required>
                            @error('email')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" name="subject" placeholder="Subject"
                                data-lang="subject-placeholder" required>
                            @error('subject')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <textarea class="form-control" name="message" rows="5" placeholder="Your Message" data-lang="message-placeholder"
                                required></textarea>
                            @error('message')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <button type="submit" class="btn">
                            <i class="fa-solid fa-paper-plane me-2"></i><span data-lang="submit">Send Message</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Info Section -->
<section class="py-5 text-center">
    <div class="container">
        <h2>
            <i class="fa-solid fa-info-circle me-2"></i><span data-lang="info-title">Contact Information</span>
        </h2>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="info-card">
                    <i class="fa-solid fa-envelope info-icon mb-3"></i>
                    <h5 data-lang="email-title">Email</h5>
                    <p>support@bhrbusiness.com</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="info-card">
                    <i class="fa-solid fa-phone info-icon mb-3"></i>
                    <h5 data-lang="phone-title">Phone</h5>
                    <p>+1 (800) 123-4567</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="info-card">
                    <i class="fa-solid fa-map-marker-alt info-icon mb-3"></i>
                    <h5 data-lang="address-title">Address</h5>
                    <p>123 Digital Wealth Ave, Suite 100, New York, NY 10001</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="footer text-center">
    <div class="container">
        <p>© 2025 BHR Business. All rights reserved.</p>
        <div class="mt-3">
            <a href="#" class="footer-icon"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="footer-icon"><i class="fab fa-twitter"></i></a>
            <a href="#" class="footer-icon"><i class="fab fa-instagram"></i></a>
            <a href="#" class="footer-icon"><i class="fab fa-linkedin-in"></i></a>
        </div>
    </div>
</footer>

<!-- Bootstrap JS and Dependencies -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JavaScript -->
<script>
    // Language Translations
    const translations = {
        en: {
            title: "BHR Business - Contact Us",
            brand: "BHR Business",
            home: "Home",
            services: "Services",
            contact: "Contact Us",
            about: "About Us",
            signup: "Sign Up",
            login: "Login",
            "hero-title": "Contact Us",
            "hero-subtitle": "We’re Here to Help You Build Your Digital Empire!",
            "form-title": "Get in Touch",
            "name-placeholder": "Your Name",
            "email-placeholder": "Your Email",
            "subject-placeholder": "Subject",
            "message-placeholder": "Your Message",
            "submit": "Send Message",
            "info-title": "Contact Information",
            "email-title": "Email",
            "phone-title": "Phone",
            "address-title": "Address"
        },
        fa: {
            title: "بی اچ آر بیزینس - تماس با ما",
            brand: "بی اچ آر بیزینس",
            home: "خانه",
            services: "خدمات",
            contact: "تماس با ما",
            about: "درباره ما",
            signup: "ثبت نام",
            login: "ورود",
            "hero-title": "تماس با ما",
            "hero-subtitle": "ما اینجا هستیم تا به شما کمک کنیم امپراتوری دیجیتال خود را بسازید!",
            "form-title": "با ما در تماس باشید",
            "name-placeholder": "نام شما",
            "email-placeholder": "ایمیل شما",
            "subject-placeholder": "موضوع",
            "message-placeholder": "پیام شما",
            "submit": "ارسال پیام",
            "info-title": "اطلاعات تماس",
            "email-title": "ایمیل",
            "phone-title": "تلفن",
            "address-title": "آدرس"
        },
        ur: {
            title: "بی ایچ آر بزنس - ہم سے رابطہ کریں",
            brand: "بی ایچ آر بزنس",
            home: "ہوم",
            services: "خدمات",
            contact: "ہم سے رابطہ کریں",
            about: "ہمارے بارے میں",
            signup: "سائن اپ",
            login: "لاگ ان",
            "hero-title": "ہم سے رابطہ کریں",
            "hero-subtitle": "ہم آپ کی ڈیجیٹل سلطنت بنانے میں مدد کے لیے موجود ہیں!",
            "form-title": "رابطہ کریں",
            "name-placeholder": "آپ کا نام",
            "email-placeholder": "آپ کا ای میل",
            "subject-placeholder": "موضوع",
            "message-placeholder": "آپ کا پیغام",
            "submit": "پیغام بھیجیں",
            "info-title": "رابطہ کی معلومات",
            "email-title": "ای میل",
            "phone-title": "فون",
            "address-title": "پتہ"
        },
        ps: {
            title: "بي اېچ آر سوداګري - موږ سره اړیکه ونیسئ",
            brand: "بي اېچ آر سوداګري",
            home: "کور",
            services: "خدمتونه",
            contact: "موږ سره اړیکه ونیسئ",
            about: "زموږ په اړه",
            signup: "راجستر کول",
            login: "ننوتل",
            "hero-title": "موږ سره اړیکه ونیسئ",
            "hero-subtitle": "موږ دلته یو ترڅو تاسو سره ستاسو د ډیجیټل امپراتورۍ په جوړولو کې مرسته وکړو!",
            "form-title": "موږ سره اړیکه ونیسئ",
            "name-placeholder": "ستاسو نوم",
            "email-placeholder": "ستاسو ای میل",
            "subject-placeholder": "موضوع",
            "message-placeholder": "ستاسو پیغام",
            "submit": "پیغام ولېږئ",
            "info-title": "د اړیکو معلومات",
            "email-title": "ای میل",
            "phone-title": "ټلیفون",
            "address-title": "پته"
        }
    };

    // Language Switching Function
    function changeLanguage() {
        const lang = document.getElementById("languageSelect").value;
        document.documentElement.lang = lang; // Update HTML lang attribute
        document.querySelectorAll("[data-lang]").forEach(element => {
            const key = element.getAttribute("data-lang");
            if (translations[lang] && translations[lang][key]) {
                // Check if the element has child nodes (e.g., icons)
                const hasIcon = element.querySelector("i");
                if (hasIcon) {
                    // Preserve the icon and update only the text
                    element.innerHTML = `${hasIcon.outerHTML} ${translations[lang][key]}`;
                } else if (element.tagName === "INPUT" || element.tagName === "TEXTAREA") {
                    // Update placeholder for form inputs
                    element.placeholder = translations[lang][key];
                } else {
                    // Update text directly
                    element.textContent = translations[lang][key];
                }
            }
        });
        // Update page title
        document.title = translations[lang].title;
        console.log("Language changed to: " + lang);
    }

    // Initialize language on page load
    document.addEventListener("DOMContentLoaded", () => {
        const select = document.getElementById("languageSelect");
        if (select) {
            select.value = "en"; // Set default to English
            changeLanguage(); // Apply default language
        }
    });
</script>