@extends('layouts.app')


@section('content')
    {{-- Hero --}}
    <section class="page-hero">
        <div class="page-hero-bg"
            style="background-image:url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?w=1920&q=80')"></div>
        <div class="page-hero-overlay"></div>
        <div class="container page-hero-content">
            <div class="page-hero-title">Contact <span style="color:var(--brand)">Us</span></div>
            <div class="breadcrumb-nav">
                <a href="{{ route('home') }}">Home</a>
                <span class="sep"><i class="bi bi-chevron-right"></i></span>
                <span class="current">Contact Us</span>
            </div>
        </div>
    </section>




    {{-- Contact Info Strips --}}
    <section class="section-pad-sm contact-info-section">
        <div class="container">
            <div class="row gy-4 gx-md-4 justify-content-center">

                <div class="col-lg-3 col-md-6 text-center contact-info-item">
                    <i class="bi bi-geo-alt"></i>
                    <div class="contact-info-label">Our Office</div>
                    <div class="contact-info-value"><a target="_blank"
                            href="https://maps.app.goo.gl/jsncEM65Qk4biDcz6">House
                            01 (Ground Floor), Road 10/A,
                            Nikunja 1, Dhaka.</a></div>
                </div>

                <div class="col-lg-3 col-md-6 text-center contact-info-item">
                    <i class="bi bi-telephone"></i>
                    <div class="contact-info-label">Call Us</div>
                    <div class="contact-info-value"><a href="tel:+8801619994044">+8801619994044</a></div>
                </div>

                <div class="col-lg-3 col-md-6 text-center contact-info-item">
                    <i class="bi bi-envelope"></i>
                    <div class="contact-info-label">Email Us</div>
                    <div class="contact-info-value"><a href="mailto:info@epdlbd.com">info@epdlbd.com</a></div>
                </div>

                <div class="col-lg-3 col-md-6 text-center contact-info-item">
                    <i class="bi bi-clock"></i>
                    <div class="contact-info-label">Office Hours</div>
                    <div class="contact-info-value">Sun – Thu: 10 AM – 6 PM</div>
                </div>

            </div>
        </div>
    </section>


    {{-- Map + Form --}}
    <section class="contact-section section-pad">
        <div class="container">
            <div class="row gy-5 gx-md-5 align-items-stretch">

                {{-- Map --}}
                <div class="col-lg-6" data-aos="fade-right">
                    <div class="mb-3">
                        <span class="section-badge">Find Us</span>
                        <h1 class="section-title" style="font-size:2rem;">Our <span>Location</span></h1>
                    </div>
                    <div class="contact-map-wrap" style="height:500px;">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3649.8119571009697!2d90.4184476!3d23.8252849!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c7007d348453%3A0x8d4d878d00654c0c!2sEPDL!5e0!3m2!1sen!2sus!4v1773130246454!5m2!1sen!2sus"
                            allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>

                {{-- Form --}}
                <div class="col-lg-6" data-aos="fade-left">
                    <div class="contact-form-card h-100">
                        <span class="section-badge">Write to Us</span>
                        <h3 style="font-family:var(--font-display);font-size:1.8rem;margin-bottom:8px;">Send Us a <span
                                style="color:var(--brand)">Message</span></h3>
                        <p style="font-size:.88rem;color:var(--gray);margin-bottom:28px;">Have a question or a project in
                            mind? Fill out the form and we'll get back to you within 24 hours.</p>

                        @include('components.contact-form')

                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection