@extends('layouts.frontend.app')

@section('content')


<section class='about-section '>

    <div class="container">
        <div class="row">
            <div class="col-md-6 about-frist-row">
                <a href="/" class="back-btn">
                    <span class="svg-ic">
                       <i class="bi bi-arrow-left-circle"></i>
                    </span>
                    Back to Home
                </a>
                <h1>Customer Service</h1>
                <p>We're here to answer your questions and provide exceptional support</p>
            </div>
        </div>
    </div>
</section>

   <section class='section-contact'>
     <div class="container ">
        <div class="row g-4 justify-content-center">
            <div class="col-md-3">
                <div class="card support-card  h-100 text-center p-4">
                    <div class="card-icon">
                        <i class="fas fa-question-circle"></i>
                    </div>
                    <h5>FAQ</h5>
                    <p class="text-muted">Find quick answers to common queries.</p>
                    <a href="{{ route('help.center') }}" class="btn-viewfaq">View FAQs</a>
                </div>
            </div>
           
            <div class="col-md-3">
                <div class="card support-card h-100 text-center p-4">
                    <div class="card-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <h5>Email Support</h5>
                    <p class="text-muted">Write us anytime at:</p>
                    <a href="mailto:support@yourdomain.com" >support@yourdomain.com</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card support-card  h-100 text-center p-4">
                    <div class="card-icon">
                        <i class="fas fa-phone"></i>
                    </div>
                    <h5>Call Us</h5>
                    <p class="text-muted">Available Mon–Fri, 9AM-5PM</p>
                    <h6 class="fw-bold no-c">+91 98765 43210</h6>
                </div>
            </div>
        </div>

        
    </div>
   </section>

<section class="setion-cform">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="contact-info">
                    <h3 class="section-title">Contact Us</h3>
                    <form class="dynamic-form" method="post" action="{{route('contact.info')}}">
                        @csrf
                        <div class="row g-4">
                            <div class="col-md-6">
                                <label class="form-label">Full Name *</label>
                                <input type="text" name="name" class="form-control " placeholder="Enter your name">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Email Address *</label>
                                <input type="email" name="email" class="form-control " placeholder="Enter your email">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Phone Number *</label>
                                <input type="text" name="phone" class="form-control " placeholder="Enter phone number">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Subject *</label>
                                <input type="text" name="subject" class="form-control " placeholder="Subject">
                            </div>

                            <div class="col-12">
                                <label class="form-label">Message *</label>
                                <textarea name="message" rows="5" class="form-control " placeholder="Type your message here..."></textarea>
                            </div>

                            <div class="col-12 text-center mt-4">
                                <button type="submit" class="btn btn-primary px-5">
                                    <i class="fas fa-paper-plane me-2"></i>Send Message
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-6">
                <div class="contact-info">
                    <h3 class="section-title">Our Office</h3>
                    <p class="mb-3"><i class="fas fa-map-marker-alt me-2 "></i>B-50, 1st Floor, Thoughts And Tales, Sector 64, Noida -201301</p>
                    <p class="mb-3"><i class="fas fa-clock me-2 "></i>Monday-Friday: 9AM - 5PM</p>
                    <p class="mb-4"><i class="fas fa-phone me-2 "></i>+91 98765 43210</p>
                    
                    <div class="map-container">
                        <iframe src="https://maps.google.com/maps?q=B-50,+1st+Floor,+Thoughts+And+Tales,+Sector+64,+Noida,+India&t=&z=15&ie=UTF8&iwloc=&output=embed" 
                                width="100%" height="300" style="border:0;" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 
<div class="container my-5">
    <div class="text-center mb-5">
        <h1 class="fw-bold">Customer Service</h1>
        <p class="text-muted">We’re here to answer your questions and provide support.</p>
    </div>

    <div class="row g-4 mb-5">
        <div class="col-md-3">
            <div class="card shadow-sm h-100 text-center p-3">
                <h5>FAQ</h5>
                <p>Find quick answers to common queries.</p>
                <a href="#" class="btn btn-outline-primary btn-sm">View FAQs</a>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm h-100 text-center p-3">
                <h5>Live Chat</h5>
                <p>Talk with our support team instantly.</p>
                <a href="#" class="btn btn-outline-primary btn-sm">Start Chat</a>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm h-100 text-center p-3">
                <h5>Email Support</h5>
                <p>Write us anytime at:</p>
                <a href="mailto:support@yourdomain.com">support@yourdomain.com</a>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm h-100 text-center p-3">
                <h5>Call Us</h5>
                <p>Available Mon–Fri</p>
                <h6 class="fw-bold">+91 98765 43210</h6>
            </div>
        </div>
    </div>

    <div class="row mb-5">
        <div class="col-md-6">
            <h3 class="mb-3">Contact Us</h3>
         
                    <form class="dynamic-form" method="post" action="{{route('contact.info')}}">
                        @csrf
                        <div class="row g-4">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Full Name</label>
                                <input type="text" name="name" class="form-control  rounded-3 shadow-sm" placeholder="Enter your name">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Email Address</label>
                                <input type="email" name="email" class="form-control  rounded-3 shadow-sm" placeholder="Enter your email">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Phone Number</label>
                                <input type="text" name="phone" class="form-control  rounded-3 shadow-sm" placeholder="Enter phone number">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Subject</label>
                                <input type="text" name="subject" class="form-control  rounded-3 shadow-sm" placeholder="Subject">
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold">Message</label>
                                <textarea name="message" rows="5" class="form-control  rounded-3 shadow-sm" placeholder="Type your message here..."></textarea>
                            </div>

                            <div class="col-12 text-center">
                                <button type="submit" class="btn btn-primary btn-lg px-5 rounded-pill shadow-sm">
                                    Send Message
                                </button>
                            </div>
                        </div>
                    </form>

        </div>
        <div class="col-md-6">
            <h3 class="mb-3">Our Office</h3>
            <p>123 Business Park, New Delhi, India</p>
            <iframe src="https://maps.google.com/maps?q=new%20delhi&t=&z=13&ie=UTF8&iwloc=&output=embed" 
                    width="100%" height="300" style="border:0;" allowfullscreen></iframe>
        </div>
    </div>
</div> -->
@endsection