@extends('layout.app')

@section('page-title', 'Trade Partner Program')

@section('breadcrumb')
    <div class="tf-breadcrumb">
        <div class="container">
            <div class="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
                <div class="tf-breadcrumb-list">
                    <a href="{{ url('/new-design/home.php') }}" class="text">Home</a>
                    <i class="icon icon-arrow-right"></i>
                    <span class="text">Trade Partner Program</span>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div id="trade-program" class="wt-pages">
        <section class="heading-section half-background gray mt_80">
            <div class="container">
                <div class="tf-grid-layout background-trade-partner-program">
                    <div class="tf-content-wrap wow fadeInUp text-center" data-wow-delay="0s">
                        <img src="/new-design/images/pages/trade-partner-program/cocarda_B2B.svg"
                            alt="Trade Partner Badge"
                            class="cocarda-badge">
                        <div class="heading title">
                            Design Trade Program
                        </div>
                        <div class="heading white-text">
                            Access exclusive pricing, dedicated support, and fast shipping<br>
                            on our full range of luxury solid teak furniture.
                        </div>
                        <p class="description">
                            <a href="{{ url('new-design/trade-partner-program/apply.php') }}"
                                id="apply-now-btn"
                                class="action-btn tf-btn-loading tf-loading-default tf-loading animate-hover-btn mt_70">
                                <span class="text text-uppercase">Apply Now</span>
                            </a>

                            <a href="#trade-partner-login"
                                id="login-btn"
                                data-bs-toggle="modal"
                                class="transparent action-btn tf-btn-loading tf-loading-default tf-loading animate-hover-btn">
                                <span class="text text-uppercase">Login</span>
                            </a>
                        </p>
                        <div class="description small">
                            <a href="/new-design/contact_us.php" target="_blank">Contact</a> a Trade Representative, or<br>
                            for large-scale contract and hospitality projects, or retail showroom partnerships, <a href="#contract-and-hospitality">click here</a>.
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="gray-background heading-footer-section">
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-grid-layout md-col-1-1-1 section-info">
                        <div class="tf-content-wrap wow fadeInUp section-info-block" data-wow-delay="0s">
                            <div class="ws-header">
                                <a href="{{ $vv_wsj_link }}" target="_blank">
                                    <div class="ws-header-up">Quality Rated “Best Overall” by</div>
                                    <div class="ws-header-down">the Wall Street Journal</div>
                                </a>
                            </div>
                        </div>
                        <div class="tf-content-wrap wow fadeInUp section-info-block trustpilot" data-wow-delay="0s">
                            <!-- TrustBox script -->
                            <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
                            <!-- End TrustBox script -->
                            <!-- TrustBox widget - Mini -->
                            <div class="trustpilot-widget" data-locale="en-US" data-template-id="53aa8807dec7e10d38f59f32" data-businessunit-id="47783f620000640005020fa2" data-style-height="150px" data-style-width="100%" data-theme="light" data-font-family="Roboto" data-text-color="#473D28">
                                <a href="https://www.trustpilot.com/review/www.westminsterteak.com" target="_blank" rel="noopener">Trustpilot</a>
                            </div>
                            <!-- End TrustBox widget -->
                        </div>
                        <div class="tf-content-wrap wow fadeInUp section-info-block" data-wow-delay="0s">
                            <div class="years-count">
                                <span class="number">29</span>
                                <span class="label">years</span>
                            </div>

                            <div class="years-text">
                                serving luxury residential<br>
                                &amp; commercial projects.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="flat-spacing-wt why-choose-section">
            <div class="container">
                <div class="tf-grid-layout md-col-1-2">
                    <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                        <div class="heading">
                            Why Trade Professionals Choose Westminster Teak
                        </div>
                        <img src="/new-design/images/pages/trade-partner-program/chair.webp">
                    </div>

                    <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                        <div class="tf-grid-layout md-col-2">
                            <div class="feature-item">
                                <img class="feature-icon" src="/new-design/images/pages/trade-partner-program/dollar.webp" alt="">
                                <div class="feature-text">
                                    <div class="feature-title">
                                        Exclusive Trade Pricing
                                    </div>
                                    <div class="feature-description">
                                        Unlock floor-on-floor savings on the world's finest solid teak furniture for any project scale.
                                    </div>
                                </div>
                            </div>

                            <div class="feature-item">
                                <img class="feature-icon" src="/new-design/images/pages/trade-partner-program/box.webp" alt="">
                                <div class="feature-text">
                                    <div class="feature-title">
                                        Dedicated Support
                                    </div>
                                    <div class="feature-description">
                                        Gain direct access to our Trade specialists for expert assistance from initial quote to final delivery.
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tf-grid-layout md-col-2">
                            <div class="feature-item">
                                <img class="feature-icon" src="/new-design/images/pages/trade-partner-program/people.webp" alt="">
                                <div class="feature-text">
                                    <div class="feature-title">
                                        Commercial-Grade Durability
                                    </div>
                                    <div class="feature-description">
                                        Built to withstand heavy use in both luxury residential and hospitality environments.
                                    </div>
                                </div>
                            </div>

                            <div class="feature-item">
                                <img class="feature-icon" src="/new-design/images/pages/trade-partner-program/star.webp" alt="">
                                <div class="feature-text">
                                    <div class="feature-title">
                                        Expert Quality &amp; Warranty
                                    </div>
                                    <div class="feature-description">
                                        All products are backed by our industry-leading lifetime warranty on all manufacturing defects.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="how-it-works-section gray-background">
            <div class="container">
                <div class="tf-grid-layout md-col-indented">
                    <div class="vertical-line" data-wow-delay="0s"></div>

                    <div class="how-it-works-grid">

                        <!-- Intro column -->
                        <div class="how-intro">
                            <span class="intro-label">How it<br>works</span>
                        </div>

                        <!-- Step 1 -->
                        <div class="how-step step-1">
                            <div class="step-number">1</div>
                            <p class="step-title">Apply Online</p>
                            <hr class="step-divider">
                            <p class="step-text">
                                A short form with your professional and business details.
                            </p>
                        </div>

                        <!-- Step 2 -->
                        <div class="how-step step-2">
                            <div class="step-number">2</div>
                            <p class="step-title">We review &amp; approve</p>
                            <hr class="step-divider">
                            <p class="step-text">
                                A Trade Specialist verifies your credentials and sets up your account.
                            </p>
                        </div>

                        <!-- Step 3 -->
                        <div class="how-step step-3">
                            <div class="step-number">3</div>
                            <p class="step-title">Access pricing, quotes &amp; assets</p>
                            <hr class="step-divider">
                            <p class="step-text">
                                Start specifying &amp; ordering. Log in to access trade pricing,
                                place orders, and coordinate deliveries.
                            </p>
                        </div>

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

        <section class="">
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-content-wrap wow fadeInUp text-center" data-wow-delay="0s">
                        <a href="{{ url('new-design/trade-partner-program/apply.php') }}"
                            id="apply-now-2-btn"
                            class="action-btn brown tf-btn-loading tf-loading animate-hover-btn">
                            <span class="text text-uppercase">Apply Now</span>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <section class="who-is-this-for-question-section">
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                        <p class="note">
                            Who is<br>this for?
                        </p>
                    </div>
                </div>
            </div>
        </section>
        <section class="who-is-this-for-section">
            <div class="container">
                <div class="tf-grid-layout md-col-indented">
                    <div class="vertical-line" data-wow-delay="0s"></div>
                    <div class="container">
                        <div class="tf-grid-layout">
                            <div class="tf-content-wrap wow fadeInUp mb_30" data-wow-delay="0s">
                                <div class="description mb_200">
                                    Our Trade Partner Program supports professionals across residential, commercial, and hospitality projects, bringing together designers, architects, developers, and builders to create functional, attractive, and valuable spaces from concept to completion.
                                </div>
                                <a href="/new-design/contact_us.php"
                                    id="talk-to-specialist-btn"
                                    class="action-btn tf-btn-loading tf-loading animate-hover-btn">
                                    <span class="text text-uppercase">Talk to trade specialist</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <section id="contract-and-hospitality" class="working-on-question-section gray-background">
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                        <p class="note">
                            Working on a<br>Commercial or<br>Hospitality Project?
                        </p>
                    </div>
                </div>
            </div>
        </section>
        <section class="working-on-section">
            <div class="container">
                <div class="tf-grid-layout md-col-indented">
                    <div class="vertical-line" data-wow-delay="0s"></div>
                    <div class="container">
                        <div class="tf-grid-layout md-col-2">
                            <div class="tf-content-wrap wow fadeInUp mb_130 working-on-wrapper" data-wow-delay="0s">
                                <div class="description">
                                    For large-scale contract and hospitality projects, or retail showroom partnerships requiring enhanced coordination and technical support, our dedicated Contract Projects Team provides full project assistance from specification through fulfillment.
                                    <br><br>
                                    Explore the full Trade Program benefits in our FAQ
                                    <div class="tf-content-wrap wow fadeInUp img-working-on-wrapper wt-mobile" data-wow-delay="0s">
                                        <img src="/new-design/images/pages/trade-partner-program/working-on.webp"
                                            alt="Swimming pool with furniture"
                                            class="working-on">
                                    </div>
                                </div>
                            </div>
                            <div class="tf-content-wrap wow fadeInUp img-working-on-wrapper wt-desktop" data-wow-delay="0s">
                                <img src="/new-design/images/pages/trade-partner-program/working-on.webp"
                                     alt="Swimming pool with furniture"
                                     class="working-on">
                            </div>
                        </div>
                        <div class="tf-content-wrap wow fadeInUp mb_30" data-wow-delay="0s">
                            <a href="{{ url('new-design/trade-partner-program/apply.php') }}"
                                id="talk-to-specialist-btn"
                                class="action-btn tf-btn-loading tf-loading animate-hover-btn">
                                <span class="text text-uppercase">APPLY NOW</span>
                            </a>
                            <div class="contact-by text-center">
                                Contact our team at <a href="mailto:contractprojects@westminsterteak.com">contractprojects@westminsterteak.com</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="testimonial-section gray-background">
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-content-wrap wow fadeInUp text-center mt_30 pb_0" data-wow-delay="0s">
                        <div class="heading">
                            Trusted by thousands of customers, design professionals and hospitality leaders
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="testimonial-section gray-background half-background white">
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-content-wrap wow fadeInUp text-center" data-wow-delay="0s">
                        <div class="testimonial-image">
                            <img src="/new-design/images/pages/trade-partner-program/testimonial-image.webp" alt="Westminster Teak TrustPilot">

                            <div class="testimonial-overlay">
                                <div class="testimonial-content">
                                    <p class="testimonial-text">
                                        “Working with Westminster Teak has been a pleasure from start to finish.
                                        Pricing is competitive, quality excellent.”
                                    </p>
                                    <span class="testimonial-author">Lisa M., Architect</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="trust-pilot-section">
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-content-wrap wow fadeInUp text-center mt_20 mb_60" data-wow-delay="0s">
                        <!-- TrustBox script -->
                        <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
                        <!-- End TrustBox script -->

                        <!-- TrustBox widget - Horizontal -->
                        <div class="trustpilot-widget" data-locale="en-US" data-template-id="5406e65db0d04a09e042d5fc" data-businessunit-id="47783f620000640005020fa2" data-style-height="28px" data-style-width="100%" data-token="01d0e427-8d04-4863-bf89-d0ec1152aecc" data-font-family="Roboto" data-text-color="#473D28">
                            <a href="https://www.trustpilot.com/review/www.westminsterteak.com" target="_blank" rel="noopener">Trustpilot</a>
                        </div>
                        <!-- End TrustBox widget -->
                    </div>
                </div>
            </div>
        </section>
        <section class="half-background gray trusted-by-section">
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-content-wrap wow fadeInUp text-center" data-wow-delay="0s">
                        <div class="trusted-by-image">
                            <img src="/new-design/images/pages/trade-partner-program/trusted-by-hotel.webp" alt="Westminster Teak Trusted by hotel">

                            <div class="trusted-by-overlay trusted-by-logo">
                                <img class="hotel-logo" src="/new-design/images/pages/trade-partner-program/hotel-logo.webp" alt="Westminster Teak Trusted by hotel">
                            </div>

                            <div class="trusted-by-caption">
                                Ritz Carlton Grand Cayman
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="gray-background trusted-by-section">
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-content-wrap wow fadeInUp text-center" data-wow-delay="0s">
                        <div class="trusted-by-image">
                            <div class="heading">Trusted by</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="gray-background trusted-by-section">
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-content-wrap wow fadeInUp text-center pt_0" data-wow-delay="0s">
                        <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                            <img src="/new-design/images/pages/trade-partner-program/hotel-logos.webp" alt="Hotels Logos">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="flat-spacing-wt talk-to-specialist-section">
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-content-wrap wow fadeInUp text-center mt_60" data-wow-delay="0s">
                        <div class="heading pre-header">Talk to a</div>
                        <div class="heading header">Trade Specialist</div>
                        <div class="description">
                            Prefer a conversation first? Our Trade team is availa-ble to<br>
                            discuss your project, pricing, and lead times.
                        </div>
                        <a href="tel:{{ $vv_wt_phone }}"
                            id="telephone-btn"
                            class="action-btn tf-btn-loading tf-loading-default tf-loading animate-hover-btn">
                            <span class="text text-uppercase">{{ $vv_wt_phoneword }} (24/7)</span>
                        </a>

                        <a href="mailto:trade@westminsterteak.com"
                            id="mail-btn"
                            class="action-btn tf-btn-loading tf-loading-default tf-loading animate-hover-btn">
                            <span class="text text-uppercase">trade@westminsterteak.com</span>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <div id="faq" class="wt-pages">

            <!-- Faq -->
            @foreach($faqCategories as $faqCategory)
                <section class="flat-spacing-wt">
                    <div class="container">
                        <div class="tf-grid-layout md-col-3">
                            <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                                <div class="heading title">
                                    {{ $faqCategory->category_name }}
                                </div>
                            </div>
                        </div>

                        @foreach($faqCategory->questions() as $faqQuestion)
                            <div class="tf-grid-layout">
                                <div class="tf-grid-layout">
                                    <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                                        <div class="faq-container">
                                            <div class="faq-question">
                                                <span class="open-close">›</span>
                                                <span class="question-text">{{ $faqQuestion->question }}</span>
                                            </div>
                                            <div class="faq-answer d-none">
                                                @php
                                                    $answer = $faqQuestion->answer;
                                                    $replace = [
                                                        'wsj_link' => $vv_wsj_link,
                                                        'wt_phone' => $vv_wt_phoneword
                                                    ];
                                                    foreach ($replace as $key => $value) {
                                                        $answer = str_replace(':' . $key, $value, $answer);
                                                    }
                                                @endphp
                                                {!! $answer !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                    </div>
                </section>
            @endforeach
            <!-- /Faq -->

        </div>

        <section class="ready-to-apply-section dark-brown-background pb_60">
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-content-wrap wow fadeInUp text-center mt_60" data-wow-delay="0s">
                        <div class="heading header">Ready to apply?</div>
                        <div class="description">Join our Trade Partner Program to access exclusive pricing, nationwide delivery, and dedicated support for every project.</div>
                        <a href="{{ url('new-design/trade-partner-program/apply.php') }}"
                            id="apply-now-3-btn"
                            class="action-btn tf-btn-loading tf-loading-default tf-loading animate-hover-btn">
                            <span class="text text-uppercase">Apply now</span>
                        </a>
                        <div class="description small">
                            Still have questions? <a href="/new-design/contact_us.php" target="_blank">Contact</a> a Trade Specialist.
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('modals')
    @include('partials.modals._trade_partner_login')
    @include('partials.modals._trade_partner_forgot_password')
@endsection
@push('after-foot-js')
    <script type="text/javascript" src="{{ asset('new-design/js/trade-partner-auth.js') }}"></script>
@endpush

@push('after-foot-js')
    <script>
       document.querySelectorAll(".faq-question").forEach(q => {
            q.addEventListener("click", function () {

                const container = this.closest(".faq-container");
                const answer = container.querySelector(".faq-answer");

                answer.classList.toggle("d-none");
                container.classList.toggle("open");

            });
        });
    </script>
@endpush