import Layout from "@/components/layout/Layout"
import Testimonial4 from "@/components/sections/Testimonial4"
import Link from "next/link"
import { useState } from "react"

export default function Faq() {
    const [activeKey, setActiveKey] = useState(null) // single state

    const handleToggle = (key) => {
        setActiveKey(activeKey === key ? null : key) // toggle only clicked FAQ
    }

    return (
        <>
            <Layout breadcrumbTitle="FAQ" footerStyle={2}>
                {/*-faq*/}
                <section className="faq-section">
                    {/*-============spacing==========-*/}
                    <div className="pd_top_90" />
                    {/*-============spacing==========-*/}
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-5">
                                <div className="section_title type_one">
                                    <h4 className="sm_title"> Faq's</h4>
                                    <div className="title_whole">
                                        <h2 className="title"> Moving Services FAQ – Everything You Need to Know</h2>
                                    </div>
                                    <p> Have questions about our moving services? We’ve put together a list of the most common questions our customers ask about bookings, costs, last-minute moves, and more. Whether you’re planning a small apartment move or need quick help transporting items, this FAQ will give you clear answers before you book.</p>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_40" />
                                {/*-============spacing==========-*/}
                                <div className="theme_btn_all">
                                    <Link href="/contact" className="theme_btn big rotate">
                                        Contact Us <span> <i className=" fi-rr-arrow-small-up" /></span>
                                    </Link>
                                </div>
                                {/*-============spacing==========-*/}
                                {/* <div className="pd_bottom_30" /> */}
                                {/*-============spacing==========-*/}
                            </div>
                            <div className="col-lg-7">
                                <section className="block_faq">
                                    <div className="accordion-box">

                                        {/* FAQ 1 */}
                                        <div className={activeKey === 1 ? "accordion active-block" : "accordion"}>
                                            <div className={activeKey === 1 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(1)}>
                                                <div className="question_box ">
                                                    <div className="title_no_a_18 trans"> What kind of moves do you do?</div>
                                                    <span className="icon_fq trans fi-rs-arrow-small-right" />
                                                </div>
                                            </div>
                                            <div className="answer accordion-content" style={{ display: activeKey === 1 ? "block" : "none" }}>
                                                We’re all about quick, simple, affordable moves. Think IKEA hauls, Facebook Marketplace treasures, new appliances, or that couch your friend finally gave you. If it fits in our van, we’ll move it.
                                            </div>
                                        </div>

                                        {/* FAQ 2 */}
                                        <div className={activeKey === 2 ? "accordion active-block" : "accordion"}>
                                            <div className={activeKey === 2 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(2)}>
                                                <div className="question_box ">
                                                    <div className="title_no_a_18 trans">Do I need to lift stuff, or do you do it all?</div>
                                                    <span className="icon_fq trans fi-rs-arrow-small-right" />
                                                </div>
                                            </div>
                                            <div className="answer accordion-content" style={{ display: activeKey === 2 ? "block" : "none" }}>
                                                Our standard bookings come with just the driver. That means you (and maybe a buddy) should be ready to load your things. The driver will help, but they can’t move a fridge solo — they’re drivers, not superheroes.
                                                Bonus: every van comes with a dolly + straps to keep your items safe.
                                            </div>
                                        </div>

                                        {/* FAQ 3 */}
                                        <div className={activeKey === 3 ? "accordion active-block" : "accordion"}>
                                            <div className={activeKey === 3 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(3)}>
                                                <div className="question_box">
                                                    <div className="title_no_a_18 trans">Can I book extra help if I don’t want to lift?</div>
                                                    <span className="icon_fq trans fi-rs-arrow-small-right" />
                                                </div>
                                            </div>
                                            <div className="answer accordion-content" style={{ display: activeKey === 3 ? "block" : "none" }}>
                                                Absolutely. If you need muscle power, just let us know in advance and we’ll arrange additional labor. You relax, we handle the heavy stuff.
                                            </div>
                                        </div>

                                        {/* FAQ 4 */}
                                        <div className={activeKey === 4 ? "accordion active-block" : "accordion"}>
                                            <div className={activeKey === 4 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(4)}>
                                                <div className="question_box ">
                                                    <div className="title_no_a_18 trans"> How long do I get for loading/unloading?</div>
                                                    <span className="icon_fq trans fi-rs-arrow-small-right" />
                                                </div>
                                            </div>
                                            <div className="answer accordion-content" style={{ display: activeKey === 4 ? "block" : "none" }}>
                                                We allocate 20–30 minutes for loading and unloading. To keep things smooth, have your items ready at the door or curbside when we arrive.
                                            </div>
                                        </div>

                                        {/* FAQ 5 */}
                                        <div className={activeKey === 5 ? "accordion active-block" : "accordion"}>
                                            <div className={activeKey === 5 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(5)}>
                                                <div className="question_box ">
                                                    <div className="title_no_a_18 trans">What if I need to cancel?</div>
                                                    <span className="icon_fq trans fi-rs-arrow-small-right" />
                                                </div>
                                            </div>
                                            <div className="answer accordion-content" style={{ display: activeKey === 5 ? "block" : "none" }}>
                                                Life happens! That’s why reservations are refundable up to 24 hours before your appointment time. Stress-free, no penalties.
                                            </div>
                                        </div>

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

                {/*-faqs section with images*/}
                <section className="faq-section">
                    {/*-============spacing==========-*/}
                    {/* <div className="pd_top_60" /> */}
                    {/*-============spacing==========-*/}
                    <div className="container">
                        <div className="row align-items-center">
                            <div className="col-lg-6 col-md-12 col-sm-12">
                                <div className="block_faq">
                                    <div className="accordion-box">

                                        {/* FAQ 1 */}
                                        <div className={activeKey === 7 ? "accordion active-block" : "accordion"}>
                                            <div className={activeKey === 7 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(7)}>
                                                <div className="question_box">
                                                    <div className="title_no_a_18 trans">Are you licensed and insured?</div>
                                                    <span className="icon_fq trans fi-rs-arrow-small-right" />
                                                </div>
                                            </div>
                                            <div className="answer accordion-content" style={{ display: activeKey === 7 ? "block" : "none" }}>
                                                Yes — we’re fully licensed and insured. Unlike U-Haul, you don’t need to pay an extra $30/day for coverage. Your items are protected, and our vans are covered.
                                            </div>
                                        </div>

                                        {/* FAQ 2 */}
                                        <div className={activeKey === 8 ? "accordion active-block" : "accordion"}>
                                            <div className={activeKey === 8 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(8)}>
                                                <div className="question_box">
                                                    <div className="title_no_a_18 trans">How much does it cost?</div>
                                                    <span className="icon_fq trans fi-rs-arrow-small-right" />
                                                </div>
                                            </div>
                                            <div className="answer accordion-content" style={{ display: activeKey === 8 ? "block" : "none" }}>
                                                We believe in fair, upfront pricing. The price you see online is the price you pay (plus taxes where applicable). No hidden fees, no insurance add-ons, no mileage math.
                                            </div>
                                        </div>

                                        {/* FAQ 3 */}
                                        <div className={activeKey === 9 ? "accordion active-block" : "accordion"}>
                                            <div className={activeKey === 9 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(9)}>
                                                <div className="question_box">
                                                    <div className="title_no_a_18 trans">Do you do last-minute moves?</div>
                                                    <span className="icon_fq trans fi-rs-arrow-small-right" />
                                                </div>
                                            </div>
                                            <div className="answer accordion-content" style={{ display: activeKey === 9 ? "block" : "none" }}>
                                                Yep! If a van is free, we can often swoop in same-day or next-day. Perfect for that Marketplace deal you just can’t pass up.
                                            </div>
                                        </div>

                                        {/* FAQ 4 */}
                                        <div className={activeKey === 10 ? "accordion active-block" : "accordion"}>
                                            <div className={activeKey === 10 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(10)}>
                                                <div className="question_box">
                                                    <div className="title_no_a_18 trans">Why Zip Van instead of U-Haul or big movers?</div>
                                                    <span className="icon_fq trans fi-rs-arrow-small-right" />
                                                </div>
                                            </div>
                                            <div className="answer accordion-content" style={{ display: activeKey === 10 ? "block" : "none" }}>
                                                <span>Here’s the deal:</span>
                                                <ul>
                                                    <li>Unlike U-Haul, you don’t have to drive, pay extra insurance, or waste time picking up and returning a van. We come straight to you.</li>
                                                    <li>Unlike big moving companies, you don’t pay premium prices for small jobs. We’re fast, affordable, and designed for everyday moves.</li>
                                                    <li>We’re the perfect middle ground — professional, flexible, and budget-friendly.</li>
                                                </ul>
                                            </div>
                                        </div>

                                        {/* FAQ 5 */}
                                        <div className={activeKey === 11 ? "accordion active-block" : "accordion"}>
                                            <div className={activeKey === 11 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(11)}>
                                                <div className="question_box">
                                                    <div className="title_no_a_18 trans">What areas do you serve?</div>
                                                    <span className="icon_fq trans fi-rs-arrow-small-right" />
                                                </div>
                                            </div>
                                            <div className="answer accordion-content" style={{ display: activeKey === 11 ? "block" : "none" }}>
                                                We currently serve [insert city/region here] and surrounding areas. Not sure if we reach you? Send us a quick message and we’ll confirm.
                                            </div>
                                        </div>

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

                            <div className="col-lg-6 col-md-12 col-sm-12 pd_left_30">
                                <div className="image_box_only type_three">
                                    <div className="left">
                                        <div className="image one">
                                            <img src="/assets/images/about/about-2-1.jpg" alt="img" className="img-fluid" />
                                        </div>
                                        <div className="image two">
                                            <img src="/assets/images/about/about-2-3.jpg" alt="img" className="img-fluid" />
                                        </div>
                                    </div>
                                    <div className="right">
                                        <div className="image three">
                                            <img src="/assets/images/about/about-2-2.jpg" alt="img" className="img-fluid" />
                                        </div>
                                    </div>
                                </div>
                                {/*-============spacing==========-*/}
                                {/* <div className="pd_bottom_40" /> */}
                            </div>
                        </div>
                    </div>
                    {/*-============spacing==========-*/}
                    <div className="pd_bottom_90" />
                    {/*-============spacing==========-*/}
                </section>

            </Layout>
        </>
    )
}