import ZipvanQuote from "@/components/sections/ZipvanQuote"
import Layout from "@/components/layout/Layout";
import Link from "next/link"
export default function Contact() {

    return (
        <>
            <Layout breadcrumbTitle="Book Now" footerStyle={2} background={"/assets/images/BookNow/book-now-banner.webp"}>
                <section className="about-section">
                    {/* <div className="pd_top_90" /> */}
                    <div className="container">
                        <div className="row align-items-center">

                            {/* Left Column → Text first, then Image */}
                            <div className="col-lg-6 order-1 order-lg-1">
                                {/* Text Content */}
                                <div className="section_title type_two">
                                    <div className="pd_top_90" />
                                    <h4 className="sm_title text-center"> Fast Pricing</h4>
                                    <div className="title_whole">
                                        <h2 className="title text-center">Get Your Instant <br /> Price Now</h2>
                                    </div>
                                </div>

                                <div className="pd_bottom_30" />
                                <div className="position-relative">
                                    No phone calls. No waiting. No “we’ll email you a quote.”
                                    Just enter your pickup & drop-off addresses below, and our system will show you:
                                </div>

                                <div className="position-relative mt-3">
                                    <ul className="list_box list color_two">
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans"><i className="fas fa-check-circle" /></div>
                                                Your exact price (including distance & time)
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans"><i className="fas fa-check-circle" /></div>
                                                How much space you’ll have in the van (with dimensions)
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans"><i className="fas fa-check-circle" /></div>
                                                The best time slots available
                                            </div>
                                        </li>
                                    </ul>
                                    <p>
                                        If you like what you see, hit Book Now — and your confirmation will be sent instantly.
                                    </p>
                                </div>

                                <div className="pd_bottom_40" />

                                {/* CTA Button */}
                                <div className="row gutter_15px">
                                    <div className="col-lg-5">
                                        <div className="theme_btn_all">
                                            <Link href="/contact" className="theme_btn color_two rotate big">
                                                Learn More <span><i className="fi-rr-arrow-small-up" /></span>
                                            </Link>
                                        </div>
                                    </div>
                                </div>

                                {/* Image Below Content */}
                                <div className="image mt-5">
                                    <img
                                        src="/assets/images/BookNow/amazing-company.webp"
                                        className="img-fluid mx-auto d-block"
                                        alt="img"
                                    />
                                </div>
                            </div>

                            {/* Right Column (Booking Tool or Any Content) */}
                            <div className="col-lg-6 order-2 order-lg-2">
                                <div className="booking-tool-box">
                                    {/* Call your component or iframe here */}
                                    <ZipvanQuote />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="pd_top_90" />
                </section>

                <section className="content-section bg_op_4 theme_alter-bg" style={{ backgroundImage: 'url(assets/images/wave-pat-1.png)' }}>
                    {/*-============spacing==========-*/}
                    <div className="pd_top_90" />
                    {/*-============spacing==========-*/}
                    <div className="container">
                        <div className="row g-4">
                            <div className="col-lg-4 col-md-6 col-sm-12 d-flex">
                                <div className="w-100">
                                    {/*-============spacing==========-*/}
                                    <div className="pd_bottom_60 d_md_none" />
                                    {/*-============spacing==========-*/}
                                    <div className="section_title medium type_one">
                                        {/* <h4 className="sm_title"> Special Deals</h4> */}
                                        <div className="title_whole">
                                            <h2 className="title text-white">Reasons to Choose Zip Van</h2>
                                        </div>
                                    </div>
                                    {/*-============spacing==========-*/}
                                    <div className="pd_bottom_40" />
                                    {/*-============spacing==========-*/}
                                </div>
                            </div>

                            <div className="col-lg-4 col-md-6 col-sm-12 d-flex">
                                <div className="icon_box_only type_eight h-100 w-100 d-flex flex-column">
                                    <div className="icon_image">
                                        <img src="/assets/images/BookNow/icons/upfront-pricing.webp" className="img-fluid" alt="img" />
                                    </div>
                                    <div className="section_title type_one">
                                        <div className="title_whole">
                                            <h2 className="title"> Upfront Pricing</h2>
                                        </div>
                                        <p> The price you see here is the price you pay. No hidden fees, no insurance add-ons.</p>
                                    </div>
                                </div>
                            </div>

                            <div className="col-lg-4 col-md-6 col-sm-12 d-flex">
                                <div className="icon_box_only type_eight h-100 w-100 d-flex flex-column">
                                    <div className="icon_image">
                                        <img src="/assets/images/BookNow/icons/insurance-included.webp" className="img-fluid" alt="img" />
                                    </div>
                                    <div className="section_title type_one">
                                        <div className="title_whole">
                                            <h2 className="title"> Insurance Included</h2>
                                        </div>
                                        <p>  Unlike U-Haul, we don’t charge you extra for coverage. Your items are fully protected.</p>
                                    </div>
                                </div>
                            </div>

                            <div className="col-lg-4 col-md-6 col-sm-12 d-flex">
                                <div className="icon_box_only type_eight h-100 w-100 d-flex flex-column">
                                    <div className="icon_image">
                                        <img src="/assets/images/BookNow/icons/right-sized-vans.webp" className="img-fluid" alt="img" />
                                    </div>
                                    <div className="section_title type_one">
                                        <div className="title_whole">
                                            <h2 className="title"> Right-Sized Vans</h2>
                                        </div>
                                        <p>Big enough for couches, beds, appliances & furniture. Easy to load, easy to move.</p>
                                    </div>
                                </div>
                            </div>

                            <div className="col-lg-4 col-md-6 col-sm-12 d-flex">
                                <div className="icon_box_only type_eight h-100 w-100 d-flex flex-column">
                                    <div className="icon_image">
                                        <img src="/assets/images/BookNow/icons/we-drive-for-you.webp" className="img-fluid" alt="img" />
                                    </div>
                                    <div className="section_title type_one">
                                        <div className="title_whole">
                                            <h2 className="title"> We Drive For You</h2>
                                        </div>
                                        <p> No wrestling with oversized vans in traffic. Sit back, we’ve got the wheel.</p>
                                    </div>
                                </div>
                            </div>

                            <div className="col-lg-4 col-md-6 col-sm-12 d-flex">
                                <div className="icon_box_only type_eight h-100 w-100 d-flex flex-column">
                                    <div className="icon_image">
                                        <img src="/assets/images/BookNow/icons/quick-simple.webp" className="img-fluid" alt="img" />
                                    </div>
                                    <div className="section_title type_one">
                                        <div className="title_whole">
                                            <h2 className="title"> Quick & Simple</h2>
                                        </div>
                                        <p>  Book in 2 minutes. Move stress-free.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    {/*-============spacing==========-*/}
                    <div className="pd_bottom_90" />
                    {/*-============spacing==========-*/}
                </section>

                <section className="form-section">
                    <div className="pd_bottom_90" />

                    <div className="auto-container">
                        <div className="row align-items-center">
                            <div className="col-lg-6 order-2 order-lg-1 text-center">
                                <div className="image_box_only  type_two">
                                    <div className="bg" />
                                    <div className="left">
                                        <div className="image one">
                                            <img src="/assets/images/BookNow/amazing-company/240-269.webp" alt="img" className="img-fluid" />
                                        </div>
                                        <div className="image two">
                                            <img src="/assets/images/BookNow/amazing-company/220-220.webp" alt="img" className="img-fluid" />
                                        </div>
                                    </div>
                                    <div className="right">
                                        <div className="image three">
                                            <img src="/assets/images/BookNow/amazing-company/230-270.webp" alt="img" className="img-fluid" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-6 col-md-12 order-1 order-lg-2">
                                <div className="section_title type_one">
                                    <h4 className="sm_title"> Easy Steps</h4>
                                    <div className="title_whole">
                                        <h2 className="title"> How Booking Works</h2>
                                    </div>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_20" />
                                {/*-============spacing==========-*/}
                                <div className="position-relative">
                                    <ul className="list_box list color_two">
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>

                                                Enter your pickup & drop-off details.
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>

                                                Get your instant price & van dimensions.
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>

                                                Confirm your time slot.
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>

                                                Receive your booking confirmation by email.
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>

                                                On moving day, we show up on time — you load, we drive, done!
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/*-============spacing==========-*/}
                    <div className="pd_bottom_90" />
                    {/*-============spacing==========-*/}
                </section>

                <section className="call-to-action-section position-relative bg_op_1" style={{ backgroundImage: 'url(assets/images/call-bg-h4-min.jpg)' }}>
                    <div className="background_overlay bg_11 z_0" />
                    {/*-============spacing==========-*/}
                    <div className="pd_top_50" />
                    {/*-============spacing==========-*/}
                    <div className="large-container">
                        <div className="row align-items-center">
                            <div className="col-lg-2">
                                <div className="image-layer position-relative z_1">
                                    <img src="/assets/images/BookNow/team-left.webp" className="img-fluid" alt="img" />
                                </div>
                            </div>
                            <div className="col-lg-5">
                                <div className="section_title color_white">
                                    <div className="title_whole">
                                        <h2 className="title">
                                            Questions or prefer to book by phone?</h2>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-3">
                                <div className="theme_btn_all text-md-center">
                                    <Link href="tel:+(647) 360-2075" className="theme_btn big color_white_two rotate">
                                        Call us at <br /> +1 (647) 360-2075 <span> <i className="fi-rr-arrow-small-up" /></span>
                                    </Link>
                                </div>

                            </div>
                            <div className="col-lg-2">
                                <div className="image-layer position-relative z_1">
                                    <img src="/assets/images/BookNow/team-right.webp" className="img-fluid" alt="img" />
                                </div>
                            </div>
                        </div>
                    </div>
                    {/*-============spacing==========-*/}
                    <div className="pd_bottom_50" />
                    {/*-============spacing==========-*/}
                </section>
            </Layout>
        </>
    )
}