@extends('layout.app')

@section('page-title', 'Teak Furniture for Outdoor and Patio')
@section('canonical-link')
    <link rel="canonical" href="{{ WEB_PATH }}" />
@endsection

@push('after-foot-js')
  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".tf-sw-hero-banner", {
        loop: true,
        autoplay: {
            delay: 8000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
  </script>
@endpush

@section('content')
    <div id="home" class="wt-pages">
        <!-- Slider -->
        <div class="tf-slideshow slider-home slider-effect-fade position-relative">
            <div dir="ltr" class="swiper tf-sw-hero-banner"
                >
                <div class="swiper-wrapper">
                    @foreach($heroBannerConfig as $index => $config)
                        @if($config['display'] !== false)
                            @php
                                $slideId = $config['id'] ?? $index;
                                $slideUrl = (str_starts_with($config['link'] ?? '', 'http')) ? $config['link'] : url($config['link']);
                                $slideTarget = $config['target'] ?? null;
                            @endphp
                            <div class="swiper-slide">
                                <div class="wrap-slider slider-{{ $slideId }}" data-slider-id="slider-{{ $slideId }}" data-slider-index="{{ $index }}">
                                    <div class="slider-image-wrap">
                                        <picture>
                                            <!-- Mobile -->
                                            <source
                                                media="(max-width: 767px)"
                                                srcset="{{ url('new-design/images/pages/home/slider/' . ($config['mobile_filename'] ?? $config['filename']) ) }}">

                                            <!-- Desktop (fallback) -->
                                            <img
                                                src="{{ url('new-design/images/pages/home/slider/' . $config['filename']) }}"
                                                alt="fashion-slideshow">
                                        </picture>
                                    </div>
                                    <a href="{{ $slideUrl }}" @if($slideTarget) target="{{ $slideTarget }}" @endif class="slider-image-link" aria-label="View promotion"></a>
                                    <div class="box-content slider-legend-selectable swiper-no-swiping">
                                        <div class="container slider-legend">
                                            @if(($config['id'] ?? '') === 'sale-banner')
                                                <p class="banner-pre-header">10% OFF SITEWIDE</p>
                                                <h1 class="banner-header">Early Summer Sale</h1>
                                                <p class="banner-body">Use code <b>EARLYSUMMER10</b></p>
                                                <a href="{{ $slideUrl }}" class="tf-btn btn-outline animate-hover-btn btn-xl banner-button" @if($slideTarget) target="{{ $slideTarget }}" @endif>
                                                    <span>SHOP NOW</span>
                                                </a>
                                            @elseif(($config['id'] ?? '') === 'indoor')
                                                <p class="banner-pre-header red">NEW INDOOR LINE</p>
                                                <h1 class="banner-header">The Excellence<br> You Know,<br>Now Indoor.</h1>
                                                <p class="banner-body d-none">
                                                    The meticulous standards that define<br>our outdoor collections,<br class="wt-mobile"> now for every room.
                                                </p>
                                                <a href="{{ $slideUrl }}" class="tf-btn btn-outline animate-hover-btn btn-xl banner-button" @if($slideTarget) target="{{ $slideTarget }}" @endif>
                                                    <span>EXPLORE COLLECTIONS</span>
                                                </a>
                                            @elseif(($config['id'] ?? '') === 'laguna')
                                                <p class="banner-pre-header">A CUSTOMER FAVORITE</p>
                                                <h1 class="banner-header">Laguna. Our Best-Selling Collection.</h1>
                                                <p class="banner-body">
                                                    Discover why thousands of customers choose Laguna and keep coming back decades later.
                                                </p>
                                                <a href="{{ $slideUrl }}" class="tf-btn btn-outline animate-hover-btn btn-xl banner-button" @if($slideTarget) target="{{ $slideTarget }}" @endif>
                                                    <span>EXPLORE LAGUNA</span>
                                                </a>
                                            @elseif(($config['id'] ?? '') === 'luna')
                                                <p class="banner-pre-header">NEW ARRIVAL</p>
                                                <h1 class="banner-header">Luna Collection</h1>
                                                <p class="banner-body wt-desktop">Clean lines and geometric shapes powered by hybrid solar and USB-C rechargeable lamps. Transform your evenings with captivating warm illumination.</p>
                                                <a href="{{ $slideUrl }}" class="tf-btn btn-outline animate-hover-btn btn-xl banner-button" @if($slideTarget) target="{{ $slideTarget }}" @endif>
                                                    <span>DISCOVER LUNA</span>
                                                </a>
                                            @elseif(($config['id'] ?? '') === 'catalog')
                                                <p class="banner-pre-header">WESTMINSTER TEAK CATALOG</p>
                                                <h1 class="banner-header">Find Inspiration for Every Space</h1>
                                                <a href="{{ $slideUrl }}" class="tf-btn btn-outline animate-hover-btn btn-xl banner-button" @if($slideTarget) target="{{ $slideTarget }}" @endif>
                                                    <span>DOWNLOAD CATALOG</span>
                                                </a>
                                            @elseif(($config['id'] ?? '') === 'dining')
                                                <p class="banner-pre-header">PREMIUM TEAK FROM 4 TO 12 GUESTS</p>
                                                <h1 class="banner-header">Dining Sets Built <br> to Last Generations</h1>
                                                <a href="{{ $slideUrl }}" class="tf-btn btn-outline animate-hover-btn btn-xl banner-button" @if($slideTarget) target="{{ $slideTarget }}" @endif>
                                                    <span>FIND YOUR PERFECT SET</span>
                                                </a>
                                            @elseif(($config['id'] ?? '') === 'trustpilot')
                                                <p class="banner-pre-header">RATED EXCELLENT ON TRUSTPILOT</p>
                                                <h1 class="banner-header">Lifetime Warranty. <br>Exceptional Service.</h1>
                                                <p class="banner-body wt-desktop">Our customers say it best: helpful from start to finish, quick to solve problems, and always there when needed.</p>
                                                <a href="{{ $slideUrl }}" class="tf-btn btn-outline animate-hover-btn btn-xl banner-button" @if($slideTarget) target="{{ $slideTarget }}" @endif>
                                                    <span>READ CUSTOMER STORIES</span>
                                                </a>
                                            @else
                                                <p class="banner-pre-header">Luxury Furniture</p>
                                                <h1 class="banner-header">Long After<br>Trends <br class="wt-mobile">Are Forgotten</h1>
                                                <a href="{{ $slideUrl }}" class="tf-btn btn-outline animate-hover-btn btn-xl banner-button" @if($slideTarget) target="{{ $slideTarget }}" @endif>
                                                    <span>EXPLORE</span>
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
                <div class="swiper-button-next button-style-arrow thumbs-next"></div>
                <div class="swiper-button-prev button-style-arrow thumbs-prev"></div>
            </div>
        </div>
        <!-- /Slider -->

        <!-- Collections -->
        <section class="flat-spacing-wt collection-section">
            <div class="container">
                <div class="tf-grid-layout text-center">
                    <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                        <div class="main-heading">Discover Our Collections</div>
                        <div class="main-heading main-subheading">TIMELESS DESIGN. UNCOMPROMISING CRAFTMANSHIP. ENDURING QUALITY</div>
                    </div>
                </div>
            </div>

            <div class="container text-center">
                <div class="tf-grid-layout md-col-3">
                    @foreach($collections as $key => $collection)
                        <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                            <a href="{{ url($collection->url) }}">
                                <div class="wow fadeInUp collections" data-wow-delay="0s">
                                    <img class="lazyload collection-img"
                                        src="{{ url($collection->home_img_src) }}"
                                        alt="Collection {{ $collection->name }}"
                                    >
                                </div>
                                <div class="collection-name">{{ $collection->name }}</div>
                                <a href="{{ url($collection->url) }}" class="shop-now">Shop now</a>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="container">
                <div class="tf-grid-layout xl-col-1-4-1 text-center">
                    <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                    </div>

                    <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                        <p class="description">
                            A wide range of carefully designed collections to meet the most discerning tastes. From outdoor dining sets to sophisticated lounge furniture, each piece is crafted with meticulous attention to detail, ensuring maximum comfort and style.
                        </p>
                    </div>
                </div>
            </div>
            <div class="container collections">
                <div class="tf-grid-layout text-center">
                    <div class="tf-content-wrap wow fadeInUp buttons" data-wow-delay="0s">
                        <a href="{{ url('new-design/collections.php?collectionType=outdoor') }}">
                            <button class="tf-btn-loading tf-loading-default tf-loading animate-hover-btn">
                                <span class="text text-uppercase">Outdoor Collections</span>
                            </button>
                        </a>
                        <a href="{{ url('new-design/collections.php?collectionType=indoor') }}">
                            <button class="tf-btn-loading tf-loading-default tf-loading animate-hover-btn">
                                <span class="text text-uppercase">Indoor Collections</span>
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <!-- /Collections -->

        <!-- Indoor -->
        <a href="/new-design/collections.php?collectionType=indoor">
            <section class="flat-spacing-wt pt_0 pb_0 indoor-section">
                <div class="tf-grid-layout md-col-1_5-2">
                    <div class="wow fadeInUp wt-desktop" data-wow-delay="0s">
                        <img class="lazyload img-indoor"
                            src="{{ url('/new-design/images/pages/home/indoor.webp') }}"
                            alt="Indoor image"
                        >
                    </div>
                    <div class="container">
                        <div class="tf-content-wrap wow fadeInUp pt_100" data-wow-delay="0s">
                            <p class="heading title">New Arrival!</p>
                            <div class="heading">New Indoor: Heirloom quality for the heart of your home</div>
                            <p class="description">
                                The same exceptional craftmanship you trust outdoors, designed for your most lived-in spaces.
                            </p>
                            <button id="indoor-btn" class="action-btn tf-btn-loading tf-loading-default tf-loading animate-hover-btn">
                                <span class="text text-uppercase">Explore the Indoor Collection</span>
                            </button>
                        </div>
                    </div>
                    <div class="wow fadeInUp wt-mobile text-center" data-wow-delay="0s">
                        <img class="lazyload img-indoor"
                            src="{{ url('/new-design/images/pages/home/indoor.webp') }}"
                            alt="Indoor image"
                        >
                    </div>
                </div>
            </section>
        </a>
        <!-- /Indoor -->

        <!-- New Arrivals - Luna -->
        <a href="{{ url('new/CID418/Luna') }}">
            <section class="flat-spacing-wt gray-background luna-bg pb_0_mobile luna-section">
                <div class="container">
                    <div class="tf-grid-layout">
                        <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                            <div class="heading title">New Arrival</div>
                            <div class="heading">Luna Collection</div>
                        </div>
                    </div>
                </div>

                <div class="container">
                    <div class="tf-grid-layout md-col-1-2">
                        <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                            <p class="description">
                                Introducing LUNA, a collection of furniture pieces integrating beautifully crafted furniture with the artful display of light.  Characterized by clean geometric forms, these solar-powered lanterns and tables charge by day and cast an enchanting glow by night. Transform your evenings with the captivating warmth of light, with LUNA.
                            </p>
                            <button id="luna-new-arrival-btn" class="action-btn tf-btn-loading tf-loading-default tf-loading animate-hover-btn">
                                <span class="text text-uppercase">EXPLORE COLLECTION</span>
                            </button>
                        </div>
                    </div>
                </div>
                <img class="wt-mobile" src="/new-design/images/pages/home/luna-mobile.webp">
            </section>
        </a>
        <!-- /New Arrivals - Luna -->

        <!-- Outdoor -->
        <a href="/new-design/collections.php" class="text-center">
            <section class="flat-spacing-wt pt_0 pb_0 outdoor-section">
                <div class="outdoor">
                    <div class="tf-grid-layout md-col-1-2">
                        <div class="tf-content-wrap wow fadeInUp pt_100" data-wow-delay="0s">
                            <div class="heading">Outdoor</div>
                            <p class="description">
                                Create your personal outdoor oasis with exceptional design and quality.
                            </p>
                            <button id="outdoor-btn" class="action-btn tf-btn-loading tf-loading-default tf-loading animate-hover-btn">
                                <span class="text text-uppercase">Learn More</span>
                            </button>
                        </div>
                        <div class="wow fadeInUp" data-wow-delay="0s">
                            <img class="lazyload img-outdoor"
                                src="{{ url('/new-design/images/pages/home/outdoor.webp') }}"
                                alt="Outdoor image"
                            >
                        </div>
                    </div>
                </div>
            </section>
        </a>
        <!-- /Outdoor -->

        <!-- Catalog -->
        <a href="{{ url('new-design/request_catalog.php') }}">
            <section class="flat-spacing-wt gray-background catalog-section">
                <div class="container">
                    <div class="tf-grid-layout text-center">
                        <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                            <div class="main-heading">{{ date('Y') }} Westminster Teak Catalog</div>
                            <div class="main-heading main-subheading">TIMELESS DESIGN. UNCOMPROMISING CRAFTMANSHIP. ENDURING QUALITY</div>
                        </div>
                    </div>
                </div>

                <div class="container">
                    <div class="tf-grid-layout md-col-2">
                        <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                            <img class="lazyload img-catalog"
                                    src="{{ url('/new-design/images/pages/home/catalog.webp') }}"
                                    alt="Chair picture"
                            >    
                        </div>
                        <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                            <p class="description">
                                Get inspired with furniture that is designed to last a lifetime, to live beautifully with, in quiet luxury. Explore and find the piece that fits your style and home.<br>
                                Click here to download the {{ date('Y') }} catalog and explore our latest exclusive collections.
                            </p>

                            <button id="download-catalog-btn" class="action-btn tf-btn-loading tf-loading-default tf-loading animate-hover-btn">
                                <span class="text text-uppercase">Request Catalog</span>
                            </button>
                        </div>
                    </div>
                </div>
            </section>
        </a>
        <!-- /Catalog -->

        <!-- Poolside -->
        <a href="{{ url('new/CID15/Loungers') }}">
            <section class="poolside-section">
                <div class="">
                    <div class="tf-grid-layout md-col-1-2-3 background-poolside">
                        <div></div>
                        <div class="poolside-box tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                            <div class="heading title">Poolside</div>
                            <div class="heading">Luxury and Comfort by Your Pool</div>
                            <p class="description">
                                Upgrade your pool area with elegant, durable teak furniture. From loungers to dining sets, our collections bring comfort and style to your outdoor space.
                            </p>

                            <button id="explore-more-btn" class="action-btn tf-btn-loading tf-loading-default tf-loading animate-hover-btn">
                                <span class="text text-uppercase">Explore More</span>
                            </button>
                        </div>
                    </div>
                </div>
            </section>
        </a>
        <!-- /Poolside -->

        <!-- Lifetime Warranty -->
        <section class="flat-spacing-wt lifetime-warranty-section">
            <div class="container">
                <div class="tf-grid-layout md-col-2-1">
                    <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                        <div class="heading title">Lifetime Warranty</div>
                        <div class="heading">Quality You Can Trust</div>
                    </div>
                    <div class="tf-content-wrap pb_0 wow fadeInUp" 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%">
                            <a href="https://www.trustpilot.com/review/www.westminsterteak.com" target="_blank" rel="noopener">Trustpilot</a>
                        </div>
                        <!-- End TrustBox widget -->
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-content-wrap pt_0 wow fadeInUp" data-wow-delay="0s">
                        <p class="description">
                            At Westminster Teak, we are committed to providing furniture that stands the test of time. That’s why all of our teak products come with a Lifetime Warranty, ensuring lasting quality and durability. Our customers can enjoy peace of mind knowing their investment is protected for life.
                        </p>
                    </div>
                </div>
            </div>
            @if(count($trustpilotReviews))
                <div class="container">
                    <div class="tf-grid-layout">
                        <div class="tf-content-wrap pt_0 pb_0 wow fadeInUp" data-wow-delay="0s">
                            <p class="description mt_0">
                                Don’t just take our word for it, hear from our satisfied customers:
                            </p>
                        </div>
                    </div>
                    <div class="tf-grid-layout md-col-3">
                        @foreach($trustpilotReviews as $trustpilotReview)
                            <div class="tf-content-wrap wow fadeInUp trustpilot-review text-centered" data-wow-delay="0s">
                                <div class="description">
                                    <img class="lazyload img-trustpilot-star"
                                        src="{{ url('/new-design/images/pages/home/5-star-trustpilot.png') }}"
                                        alt="trustpilot-star"
                                    >
                                </div>
                                <div class="description">"{{ $trustpilotReview->text }}"</div>
                                <div class="description">- {{ $trustpilotReview->customer_name }}, Trustpilot</div>
                            </div>
                        @endforeach
                    </div>
                    Showing our 5-star reviews.
                </div>
            @endif
        </section>
        <!-- /Lifetime Warranty -->

        <!-- Sustainability -->
        <a href="{{ url('new-design/sustainability.php') }}">
            <section class="sustainability-section">
                <div class="">
                    <div class="tf-grid-layout md-col-1-2-3 background-sustainability">
                        <div></div>
                        <div class="sustainability-box tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                            <div class="heading">Sustainability at Westminster Teak</div>
                            <p class="description">
                                Our commitment to the environment is reflected in every piece we create, from the responsibly sourced teak wood to the eco-friendly manufacturing processes we use.<br><br>
                                All our teak is sourced from sustainably managed forests certified by the Forest Stewardship Council (FSC), ensuring that our products contribute to the preservation of natural ecosystems.
                            </p>

                            <div class="tf-content-wrap wow fadeInUp text-center" data-wow-delay="0s">
                                <button id="lear-more-sustainability-btn" class="action-btn tf-btn-loading tf-loading-default tf-loading animate-hover-btn">
                                    <span class="text text-uppercase">Learn more</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </a>
        <!-- /Sustainability -->
    </div>
@endsection