@extends('layouts.app')
@section('title', 'Frequently Asked Questions (FAQ) | Saree E-Commerce')

@section('content')
<!-- BREADCRUMB -->
@include('layouts.breadcrumb', [
    'title' => 'Frequently Asked Questions',
    'crumbs' => [
        ['name' => 'Home', 'url' => route('home')],
        ['name' => 'FAQ', 'url' => '']
    ]
])

<!-- FAQ PAGE CONTENT START -->
<div class="faq-page-wrapper py-5" style="background: #FAFAFA;">
    <div class="ul-container">
        <!-- Header -->
        <div class="text-center mb-5">
            <span class="ul-section-sub-title text-uppercase" style="color: #EF2853; font-weight: 600; letter-spacing: 1px;">Help & Support Center</span>
            <h2 class="ul-section-title fw-bold mt-2" style="color: #2B1820; font-size: clamp(1.8rem, 2.5vw, 2.5rem);">Frequently Asked Questions</h2>
            <p class="text-muted mx-auto mt-2" style="max-width: 680px; font-size: 0.95rem; line-height: 1.6;">
                Find quick answers to common questions about our pure silk authenticity, handloom fabrics, blouse stitching, express delivery, and saree care.
            </p>

            <!-- Instant Search Bar -->
            <div class="faq-search-box mx-auto mt-4" style="max-width: 540px;">
                <div class="input-group shadow-sm rounded-pill overflow-hidden bg-white p-1 border" style="border-color: #EEDBE2 !important;">
                    <span class="input-group-text bg-transparent border-0 ps-3 pe-2 text-muted">
                        <i class="flaticon-search-interface-symbol"></i>
                    </span>
                    <input type="text" id="faqSearchInput" class="form-control border-0 shadow-none ps-1" placeholder="Search questions (e.g. Silk Mark, Blouse, Returns)..." style="font-size: 0.92rem;">
                    <button class="btn btn-danger rounded-pill px-4" type="button" style="background: #EF2853; border: none; font-weight: 600;">Search</button>
                </div>
            </div>

            <!-- Quick Category Tabs -->
            <div class="faq-category-tabs d-flex flex-wrap justify-content-center gap-2 mt-4">
                <button type="button" class="faq-tab-btn active" data-target="all">All Questions (20)</button>
                <button type="button" class="faq-tab-btn" data-target="authenticity">Silk Mark & Fabric</button>
                <button type="button" class="faq-tab-btn" data-target="stitching">Blouse & Customization</button>
                <button type="button" class="faq-tab-btn" data-target="shipping">Shipping & Orders</button>
                <button type="button" class="faq-tab-btn" data-target="returns">Returns & Saree Care</button>
            </div>
        </div>

        <!-- FAQ Accordion List (20 Questions) -->
        <div class="row justify-content-center">
            <div class="col-lg-10 col-12">
                <div class="accordion custom-faq-accordion" id="sareeFaqAccordion">

                    <!-- ================= SECTION 1: SILK MARK & AUTHENTICITY (Q1 - Q5) ================= -->
                    <div class="faq-section-group mb-4" data-group="authenticity">
                        <div class="d-flex align-items-center gap-2 mb-3 pb-2 border-bottom">
                            <span class="faq-group-icon d-inline-flex align-items-center justify-content-center rounded-circle" style="width: 32px; height: 32px; background: #FDE8ED; color: #EF2853; font-size: 14px;">
                                <i class="flaticon-checked"></i>
                            </span>
                            <h4 class="fw-bold mb-0" style="color: #2B1820; font-size: 1.15rem;">Silk Mark & Fabric Authenticity</h4>
                        </div>

                        <!-- Q1 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="authenticity">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">01.</span> How do I know if the silk sarees are 100% pure?
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    All our pure silk sarees (including Kanjeevaram, Banarasi, and Soft Silks) carry the official <strong>Silk Mark Certification</strong> issued by the Silk Mark Organisation of India (SMOI). This certifies 100% natural mulberry silk and authentic zari, assuring you of genuine heirloom craftsmanship.
                                </div>
                            </div>
                        </div>

                        <!-- Q2 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="authenticity">
                            <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">02.</span> What is the difference between Kanjeevaram Silk and Soft Silk?
                                </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    Traditional Kanjeevaram silk is woven using 3-ply heavy mulberry silk yarn with an interlocked Korvai border technique, making it robust, rich, and structured for bridal occasions. Soft Silks use fine, lightweight mulberry yarns that offer a feather-light drape, ideal for long festive days and parties.
                                </div>
                            </div>
                        </div>

                        <!-- Q3 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="authenticity">
                            <h2 class="accordion-header" id="headingThree">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">03.</span> Are your Chettinad and Cotton Sarees genuinely handloom woven?
                                </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    Yes! Our Chettinad Kandangi, Madurai Sungudi, and Mulmul cotton sarees are 100% handwoven by generational master weavers on traditional pit looms and frame looms using premium combed organic cotton for maximum breathability.
                                </div>
                            </div>
                        </div>

                        <!-- Q4 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="authenticity">
                            <h2 class="accordion-header" id="headingFour">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">04.</span> Does the zari on the silk sarees tarnish or fade over time?
                                </button>
                            </h2>
                            <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    We use premium tested zari and pure silver electroplated zari with anti-tarnish protective coatings. When stored properly in breathable cotton bags away from moisture and direct perfumes, the golden luster remains vibrant for decades.
                                </div>
                            </div>
                        </div>

                        <!-- Q5 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="authenticity">
                            <h2 class="accordion-header" id="headingFive">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">05.</span> How can I test the authenticity of my silk saree at home?
                                </button>
                            </h2>
                            <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    You can verify authenticity instantly by scanning the official Silk Mark QR code tag attached to your saree. Pure silk also produces a distinctive soft rustle (scroop) and leaves soft ash with a burnt-hair scent during a standard burn test on loose fringe threads.
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- ================= SECTION 2: BLOUSE, SIZING & CUSTOMIZATION (Q6 - Q10) ================= -->
                    <div class="faq-section-group mb-4" data-group="stitching">
                        <div class="d-flex align-items-center gap-2 mb-3 pb-2 border-bottom">
                            <span class="faq-group-icon d-inline-flex align-items-center justify-content-center rounded-circle" style="width: 32px; height: 32px; background: #FDE8ED; color: #EF2853; font-size: 14px;">
                                <i class="flaticon-sparkle"></i>
                            </span>
                            <h4 class="fw-bold mb-0" style="color: #2B1820; font-size: 1.15rem;">Blouse Piece, Sizing & Customization</h4>
                        </div>

                        <!-- Q6 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="stitching">
                            <h2 class="accordion-header" id="headingSix">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">06.</span> Do all sarees come with an attached blouse piece?
                                </button>
                            </h2>
                            <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    Yes, all our sarees include an unstitched matching running or contrast blouse piece measuring between 0.80 meters to 1.0 meter, woven with matching border work or zari motifs.
                                </div>
                            </div>
                        </div>

                        <!-- Q7 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="stitching">
                            <h2 class="accordion-header" id="headingSeven">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">07.</span> Can I request custom blouse stitching or ready-to-wear pre-pleating?
                                </button>
                            </h2>
                            <div id="collapseSeven" class="accordion-collapse collapse" aria-labelledby="headingSeven" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    Yes! We provide custom designer blouse stitching, fall and pico edging, and ready-to-wear pre-pleated stitching. You can reach out directly to our master tailoring team via WhatsApp after placing your order.
                                </div>
                            </div>
                        </div>

                        <!-- Q8 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="stitching">
                            <h2 class="accordion-header" id="headingEight">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">08.</span> What is the standard length and width of the sarees?
                                </button>
                            </h2>
                            <div id="collapseEight" class="accordion-collapse collapse" aria-labelledby="headingEight" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    Our sarees measure 6.2 to 6.3 meters in total length (including the 0.8m running blouse piece) and 45 to 48 inches (approx. 115–122 cm) in width, suitable for all heights and draping styles.
                                </div>
                            </div>
                        </div>

                        <!-- Q9 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="stitching">
                            <h2 class="accordion-header" id="headingNine">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNine" aria-expanded="false" aria-controls="collapseNine">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">09.</span> Can I order custom color combinations or bulk wedding trousseau sarees?
                                </button>
                            </h2>
                            <div id="collapseNine" class="accordion-collapse collapse" aria-labelledby="headingNine" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    Yes! We work directly with master looms to weave custom bridal silks and bulk wedding orders. Connect with our dedicated wedding concierge on WhatsApp (+91 98765 43210) with 3 to 4 weeks advance notice.
                                </div>
                            </div>
                        </div>

                        <!-- Q10 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="stitching">
                            <h2 class="accordion-header" id="headingTen">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTen" aria-expanded="false" aria-controls="collapseTen">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">10.</span> Do you provide Fall and Pico edging service before dispatch?
                                </button>
                            </h2>
                            <div id="collapseTen" class="accordion-collapse collapse" aria-labelledby="headingTen" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    Yes, we provide professional Fall & Pico (edging) on request before shipping so your saree arrives ready to drape straight out of the luxury box.
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- ================= SECTION 3: SHIPPING, DELIVERY & ORDERS (Q11 - Q15) ================= -->
                    <div class="faq-section-group mb-4" data-group="shipping">
                        <div class="d-flex align-items-center gap-2 mb-3 pb-2 border-bottom">
                            <span class="faq-group-icon d-inline-flex align-items-center justify-content-center rounded-circle" style="width: 32px; height: 32px; background: #FDE8ED; color: #EF2853; font-size: 14px;">
                                <i class="flaticon-airplane"></i>
                            </span>
                            <h4 class="fw-bold mb-0" style="color: #2B1820; font-size: 1.15rem;">Shipping, Delivery & Orders</h4>
                        </div>

                        <!-- Q11 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="shipping">
                            <h2 class="accordion-header" id="headingEleven">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEleven" aria-expanded="false" aria-controls="collapseEleven">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">11.</span> What are the shipping charges and delivery timelines in India?
                                </button>
                            </h2>
                            <div id="collapseEleven" class="accordion-collapse collapse" aria-labelledby="headingEleven" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    We provide <strong>Free Express Shipping</strong> across all pin codes in India. Metro cities receive delivery in 2–4 business days, while all other regions take 4–7 business days.
                                </div>
                            </div>
                        </div>

                        <!-- Q12 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="shipping">
                            <h2 class="accordion-header" id="headingTwelve">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwelve" aria-expanded="false" aria-controls="collapseTwelve">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">12.</span> Do you ship internationally to USA, UK, UAE, Singapore & Malaysia?
                                </button>
                            </h2>
                            <div id="collapseTwelve" class="accordion-collapse collapse" aria-labelledby="headingTwelve" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    Yes! We ship worldwide through reputed international courier partners like DHL Express and FedEx. International deliveries typically reach your doorstep within 5–8 business days.
                                </div>
                            </div>
                        </div>

                        <!-- Q13 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="shipping">
                            <h2 class="accordion-header" id="headingThirteen">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThirteen" aria-expanded="false" aria-controls="collapseThirteen">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">13.</span> How can I track my order once it is shipped?
                                </button>
                            </h2>
                            <div id="collapseThirteen" class="accordion-collapse collapse" aria-labelledby="headingThirteen" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    As soon as your order is dispatched, you will receive an automated SMS, WhatsApp, and email notification containing your live AWB tracking link and courier partner details.
                                </div>
                            </div>
                        </div>

                        <!-- Q14 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="shipping">
                            <h2 class="accordion-header" id="headingFourteen">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFourteen" aria-expanded="false" aria-controls="collapseFourteen">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">14.</span> Is Cash on Delivery (COD) available?
                                </button>
                            </h2>
                            <div id="collapseFourteen" class="accordion-collapse collapse" aria-labelledby="headingFourteen" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    Yes, Cash on Delivery (COD) is available across supported pin codes in India for orders up to ₹15,000. Prepaid orders (UPI, Cards, Net Banking) receive priority expedited dispatch.
                                </div>
                            </div>
                        </div>

                        <!-- Q15 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="shipping">
                            <h2 class="accordion-header" id="headingFifteen">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFifteen" aria-expanded="false" aria-controls="collapseFifteen">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">15.</span> Are transit packages insured against transit damage?
                                </button>
                            </h2>
                            <div id="collapseFifteen" class="accordion-collapse collapse" aria-labelledby="headingFifteen" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    Yes, 100% of our domestic and international shipments are comprehensively insured and packaged in multi-layered, tamper-evident and moisture-proof luxury packaging.
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- ================= SECTION 4: RETURNS, EXCHANGES & CARE (Q16 - Q20) ================= -->
                    <div class="faq-section-group mb-4" data-group="returns">
                        <div class="d-flex align-items-center gap-2 mb-3 pb-2 border-bottom">
                            <span class="faq-group-icon d-inline-flex align-items-center justify-content-center rounded-circle" style="width: 32px; height: 32px; background: #FDE8ED; color: #EF2853; font-size: 14px;">
                                <i class="flaticon-checked"></i>
                            </span>
                            <h4 class="fw-bold mb-0" style="color: #2B1820; font-size: 1.15rem;">Returns, Exchanges & Saree Care</h4>
                        </div>

                        <!-- Q16 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="returns">
                            <h2 class="accordion-header" id="headingSixteen">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSixteen" aria-expanded="false" aria-controls="collapseSixteen">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">16.</span> What is your return and exchange policy?
                                </button>
                            </h2>
                            <div id="collapseSixteen" class="accordion-collapse collapse" aria-labelledby="headingSixteen" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    We offer an easy <strong>7-Day Return and Exchange Policy</strong> on unstitched, unwashed sarees with original Silk Mark and brand tags intact. Simply initiate a request from your order dashboard or contact our support.
                                </div>
                            </div>
                        </div>

                        <!-- Q17 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="returns">
                            <h2 class="accordion-header" id="headingSeventeen">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeventeen" aria-expanded="false" aria-controls="collapseSeventeen">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">17.</span> How should I wash and care for my pure silk sarees?
                                </button>
                            </h2>
                            <div id="collapseSeventeen" class="accordion-collapse collapse" aria-labelledby="headingSeventeen" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    Pure Silk and Zari Sarees should strictly be <strong>Dry Cleaned Only</strong>. Never machine wash or soak silk sarees in strong detergents. Always iron on the reverse side on low-medium silk temperature.
                                </div>
                            </div>
                        </div>

                        <!-- Q18 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="returns">
                            <h2 class="accordion-header" id="headingEighteen">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEighteen" aria-expanded="false" aria-controls="collapseEighteen">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">18.</span> How should I store pure silk sarees to ensure longevity?
                                </button>
                            </h2>
                            <div id="collapseEighteen" class="accordion-collapse collapse" aria-labelledby="headingEighteen" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    Wrap your silk sarees in breathable cotton or muslin fabric bags and store them flat in a cool, dry wardrobe. Avoid plastic covers, direct sunlight, and direct contact with naphthalene balls. We recommend changing fold creases every 3–4 months.
                                </div>
                            </div>
                        </div>

                        <!-- Q19 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="returns">
                            <h2 class="accordion-header" id="headingNineteen">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNineteen" aria-expanded="false" aria-controls="collapseNineteen">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">19.</span> What should I do if I receive a damaged or incorrect saree?
                                </button>
                            </h2>
                            <div id="collapseNineteen" class="accordion-collapse collapse" aria-labelledby="headingNineteen" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    In the rare event of transit damage or an incorrect item, please notify us within 48 hours of delivery via WhatsApp (+91 98765 43210) or email (sareeecommerce@gmail.com) with unboxing photos/videos for an immediate replacement or full refund.
                                </div>
                            </div>
                        </div>

                        <!-- Q20 -->
                        <div class="accordion-item faq-item mb-3 rounded-3 overflow-hidden border shadow-sm" data-category="returns">
                            <h2 class="accordion-header" id="headingTwenty">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwenty" aria-expanded="false" aria-controls="collapseTwenty">
                                    <span class="faq-q-number me-2" style="color: #EF2853;">20.</span> How long does it take to process a refund?
                                </button>
                            </h2>
                            <div id="collapseTwenty" class="accordion-collapse collapse" aria-labelledby="headingTwenty" data-bs-parent="#sareeFaqAccordion">
                                <div class="accordion-body text-muted" style="line-height: 1.7; font-size: 0.94rem;">
                                    Once the returned saree is received and inspected at our quality center, your refund is initiated within 24–48 hours directly to your original payment method or bank account.
                                </div>
                            </div>
                        </div>
                    </div>

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

        <!-- Still Have Questions CTA -->
        <div class="faq-support-box mt-5 p-4 p-lg-5 rounded-4 text-center shadow-sm" style="background: linear-gradient(135deg, #FFF6F8 0%, #FFFFFF 100%); border: 1px solid #F6DDE4;">
            <span class="text-uppercase fw-bold" style="color: #EF2853; letter-spacing: 1px; font-size: 0.85rem;">Need More Help?</span>
            <h3 class="fw-bold mt-2 mb-3" style="color: #2B1820; font-size: clamp(1.4rem, 2.2vw, 1.9rem);">Still Have Questions About Your Saree Purchase?</h3>
            <p class="text-muted mx-auto mb-4" style="max-width: 580px; font-size: 0.95rem; line-height: 1.6;">
                Our saree customer care and styling experts are available Monday to Saturday (9:00 AM – 8:00 PM IST) to assist you with order inquiries, customized draping advice, and tracking.
            </p>
            <div class="d-flex flex-wrap justify-content-center gap-3">
                <a href="https://wa.me/919876543210" target="_blank" class="btn btn-success px-4 py-2 rounded-pill fw-bold d-inline-flex align-items-center gap-2" style="background: #25D366; border: none;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.816 9.816 0 0 0 12.04 2zm.01 1.67c2.2 0 4.26.86 5.82 2.42a8.225 8.225 0 0 1 2.41 5.83c0 4.54-3.7 8.24-8.24 8.24-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.196 8.196 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24zm4.52 11.64c-.25-.13-1.47-.72-1.7-.81-.23-.08-.39-.13-.56.13-.17.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.13-1.06-.39-2.02-1.25-.75-.67-1.26-1.5-1.41-1.75-.15-.25-.02-.39.11-.51.11-.11.25-.29.37-.44.13-.15.17-.25.25-.42.08-.17.04-.31-.02-.44-.06-.13-.56-1.35-.77-1.85-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.44.06-.67.31-.23.25-.88.86-.88 2.1 0 1.24.9 2.44 1.03 2.61.13.17 1.77 2.7 4.29 3.79.6.26 1.07.41 1.44.53.6.19 1.15.16 1.58.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.15-1.18-.06-.11-.23-.18-.48-.3z"/></svg>
                    Chat on WhatsApp
                </a>
                <a href="tel:+919876543210" class="btn btn-dark px-4 py-2 rounded-pill fw-bold d-inline-flex align-items-center gap-2" style="background: #2B1820; border: none;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                    Call Customer Support
                </a>
            </div>
        </div>
    </div>
</div>
<!-- FAQ PAGE CONTENT END -->

<!-- FAQ CUSTOM STYLES & INTERACTION SCRIPT -->
<style>
    /* Category Filter Tabs */
    .faq-tab-btn {
        background-color: #FFFFFF;
        border: 1px solid #E5D5DC;
        color: #4A3B43;
        font-size: 0.88rem;
        font-weight: 600;
        padding: 8px 20px;
        border-radius: 999px;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .faq-tab-btn:hover,
    .faq-tab-btn.active {
        background-color: #EF2853;
        border-color: #EF2853;
        color: #FFFFFF;
        box-shadow: 0 4px 14px rgba(239, 40, 83, 0.25);
        transform: translateY(-2px);
    }

    /* Accordion Item */
    .custom-faq-accordion .accordion-item {
        background-color: #FFFFFF;
        border-color: #F0E4E8 !important;
        transition: all 0.25s ease;
    }

    .custom-faq-accordion .accordion-item:hover {
        border-color: #EF2853 !important;
        box-shadow: 0 6px 18px rgba(239, 40, 83, 0.08) !important;
    }

    .custom-faq-accordion .accordion-button {
        background-color: #FFFFFF;
        color: #2B1820;
        font-size: 0.98rem;
        padding: 18px 20px;
        box-shadow: none;
    }

    .custom-faq-accordion .accordion-button:not(.collapsed) {
        color: #EF2853;
        background-color: #FFF6F8;
    }

    .custom-faq-accordion .accordion-button::after {
        background-size: 14px;
        transition: transform 0.25s ease;
    }

    .custom-faq-accordion .accordion-button:not(.collapsed)::after {
        filter: invert(24%) sepia(85%) saturate(3065%) hue-rotate(333deg) brightness(97%) contrast(96%);
    }

    .custom-faq-accordion .accordion-body {
        padding: 20px;
        background-color: #FFFFFF;
        cursor: pointer;
        position: relative;
        transition: background-color 0.2s ease;
    }

    .custom-faq-accordion .accordion-body:hover {
        background-color: #FFFDFE;
    }

    .custom-faq-accordion .accordion-collapse {
        cursor: pointer;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Click on Answer Body to Close / Collapse
        const accordionBodies = document.querySelectorAll('.custom-faq-accordion .accordion-body');
        accordionBodies.forEach(body => {
            body.setAttribute('title', 'Click to close answer');
            body.addEventListener('click', function (e) {
                // If clicking an interactive link or button inside, allow default
                if (e.target.closest('a') || e.target.closest('button')) {
                    return;
                }

                const collapseEl = this.closest('.accordion-collapse');
                if (collapseEl && collapseEl.classList.contains('show')) {
                    const item = this.closest('.accordion-item');
                    const btn = item ? item.querySelector('.accordion-button') : null;
                    if (btn) {
                        btn.click();
                    } else if (typeof bootstrap !== 'undefined' && bootstrap.Collapse) {
                        const bsCollapse = bootstrap.Collapse.getInstance(collapseEl) || new bootstrap.Collapse(collapseEl, { toggle: false });
                        bsCollapse.hide();
                    }
                }
            });
        });

        // Tab Filtering
        const tabBtns = document.querySelectorAll('.faq-tab-btn');
        const sectionGroups = document.querySelectorAll('.faq-section-group');

        tabBtns.forEach(btn => {
            btn.addEventListener('click', function () {
                tabBtns.forEach(b => b.classList.remove('active'));
                this.classList.add('active');

                const target = this.getAttribute('data-target');

                sectionGroups.forEach(group => {
                    if (target === 'all' || group.getAttribute('data-group') === target) {
                        group.style.display = '';
                    } else {
                        group.style.display = 'none';
                    }
                });
            });
        });

        // Instant Live Search
        const searchInput = document.getElementById('faqSearchInput');
        const faqItems = document.querySelectorAll('.faq-item');

        if (searchInput) {
            searchInput.addEventListener('input', function () {
                const query = this.value.toLowerCase().trim();

                // If typing, reset tabs to 'all'
                if (query.length > 0) {
                    tabBtns.forEach(b => b.classList.remove('active'));
                    document.querySelector('.faq-tab-btn[data-target="all"]').classList.add('active');
                    sectionGroups.forEach(group => group.style.display = '');
                }

                faqItems.forEach(item => {
                    const text = item.innerText.toLowerCase();
                    if (text.includes(query)) {
                        item.style.display = '';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        }
    });
</script>
@endsection