@extends('frontend.app')
@section('content')

<style>

    :root {
    --primary-bg: hsl(263, 70%, 30%); 
    --orange-color: #ff6b35;
    --text-white: #ffffff;
}

body {
 
    color: #333;
    overflow-x: hidden;
}

/* Common Background */
/* .hero-bg {
    background-color: var(--primary-bg);
    position: relative;
} */
    .text-orange {
    color: var(--orange-color) !important;
}

/* Badge */
.badge-custom {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    display: inline-block;
}

/* Info Cards */
.mt-minus-card {
    margin-top: -100px;
    position: relative;
    z-index: 10;
}

.info-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

.info-card:hover {
    transform: translateY(-10px);
}

.icon-circle {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgb(245, 159, 10), rgb(220, 108, 9));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

/* Mini Info Section */
.mini-icon-circle {
    width: 50px;
    height: 50px;
    background: var(--primary-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

/* Form Container */
.form-container {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

.form-control {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
}

.form-control:focus {
    box-shadow: none;
    border-color: var(--primary-bg);
}

/* Buttons */
.btn-orange-gradient {
    background: linear-gradient(45deg, #ff6b35, #ff9f43);
    border: none;
    color: white;
    border-radius: 10px;
    transition: 0.3s;
}

.btn-orange-gradient:hover {
    opacity: 0.9;
    color: white;
    transform: scale(1.02);
}

/* Map */
.map-wrapper {
    border-radius: 20px;
    overflow: hidden;
}

/* Animations */
.animate-fade-in { animation: fadeIn 1s ease; }
.animate-slide-up { animation: slideUp 0.8s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.5s ease-out; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes scaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Responsive */
@media (max-width: 768px) {
    .mt-minus-card {
        margin-top: 20px;
    }
}
</style>
<main class="main-wrapper">
    <!-- Start Breadcrumb Area  -->
    <div class="axil-breadcrumb-area">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <div class="inner">
                        <ul class="axil-breadcrumb">
                            <li class="axil-breadcrumb-item text-primary"><a href="{{ route('front.home')}}">Home</a></li>
                            <li class="separator"></li>
                            <li class="axil-breadcrumb-item active" aria-current="page">Contact</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Breadcrumb Area  --> 

     <section class="hero-bg py-5 md-py-24 text-center">
        <div class="container py-5">
            <span class="badge-custom mb-4 animate-fade-in">
                📞 যোগাযোগ করুন
            </span>
            <h1 class="display-5 fw-bold text-white mb-4 animate-slide-up">
                আমাদের সাথে <span class="text-orange">যোগাযোগ</span> করুন
            </h1>
            <p class="lead text-white-50 max-w-2xl mx-auto animate-slide-up" style="animation-delay: 0.1s;">
                আপনার যেকোনো প্রশ্ন বা সমস্যায় আমরা সবসময় আপনার পাশে আছি। 
                নিচের ফর্ম পূরণ করুন অথবা সরাসরি কল করুন।
            </p>
        </div>
    </section>

    <section class="py-5 bg-light">
        <div class="container">
            <div class="row g-4 mt-minus-card">
                <div class="col-md-4">
                    <div class="info-card text-center p-4">
                        <div class="icon-circle mx-auto mb-3"><i class="fas fa-phone-alt"></i></div>
                        <h5 class="fw-bold">ফোন নম্বর</h5>
                        <p class="mb-1 text-dark">01729957842</p>
                        <small class="text-muted">সকাল ৯টা - রাত ১০টা</small>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="info-card text-center p-4">
                        <div class="icon-circle mx-auto mb-3"><i class="fas fa-envelope"></i></div>
                        <h5 class="fw-bold">ইমেইল</h5>
                        <p class="mb-1 text-dark">khushboperfumebd@gmail.com</p>
                        <small class="text-muted">২৪ ঘণ্টার মধ্যে রিপ্লাই</small>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="info-card text-center p-4">
                        <div class="icon-circle mx-auto mb-3"><i class="fas fa-map-marker-alt"></i></div>
                        <h5 class="fw-bold">ঠিকানা</h5>
                        <p class="mb-1 text-dark">ফরিদপুর, ঢাকা</p>
                        <small class="text-muted">বাংলাদেশ</small>
                    </div>
                </div>
               
            </div>
        </div>
    </section>
   

    <!-- Start Contact Area  -->
    <div class="axil-contact-page-area">
        <div class="container">
            <div class="axil-contact-page">
                <div class="row row--30 ">
                    <div class="col-lg-6">
                        <div class="contact-form">
                            
                            
                            <h2 class="mt-1">Get In Touch</h2>
                            <form id="ajax_form" method="POST" action="{{ route('front.contact')}}">
                                @csrf
                                <div class="row row--10">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="contact-name">Name <span>*</span></label>
                                            <input type="text" name="name" id="contact-name">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="contact-phone">Phone <span>*</span></label>
                                            <input type="text" name="phone" id="contact-phone">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="contact-email">E-mail <span>*</span></label>
                                            <input type="email" name="email" id="contact-email">
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="contact-name">Subject <span>*</span></label>
                                            <input type="text" name="subject" id="contact-name">
                                        </div>
                                    </div>
                                    
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="contact-message">Your Message</label>
                                            <textarea name="message" id="contact-message" cols="1" rows="2"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group mb--0">
                                            <button name="submit" type="submit" id="submit" class="axil-btn" style="background:linear-gradient(135deg, rgb(245, 159, 10), rgb(220, 108, 9))">Send&nbsp;Message</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mapouter">
                            <div class="gmap_canvas">
                                <iframe width="1080" height="500" id="gmap_canvas" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d58544.15457317329!2d89.79282365!3d23.6041071!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39fe253075b08533%3A0x60064a7c06233f26!2sFaridpur!5e0!3m2!1sen!2sbd!4v1710000000000!5m2!1sen!2sbd" allowfullscreen="" loading="lazy"></iframe>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
 
            <!-- End Google Map Area  -->
        </div>
    </div>
    <!-- End Contact Area  -->
</main>

@endsection