@extends('layout.app')

@section('page-title', 'Finishes')

@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>
                    <a href="{{ url('/new-design/how-are-we-different.php') }}" class="text">About</a>
                    <i class="icon icon-arrow-right"></i>
                    <span class="text">Finishes</span>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div id="finishes" class="wt-pages">
        <section class="flat-spacing-wt">
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-content-wrap wow fadeInUp px-0" data-wow-delay="0s">
                        <div class="heading title">
                            Teak Finishes
                        </div>
                        <div class="super-heading mt-4">
                            Important<br>
                            Note
                        </div>
                    </div>
                </div>
                <div class="tf-grid-layout md-col-indented mt-4">
                    <div class="vertical-line" data-wow-delay="0s">
                    </div>
                    <div class="tf-grid-layout">
                        <div class="tf-content-wrap wow fadeInUp py-0" data-wow-delay="0s">
                            <div class="description mt-0">
                                Teak does not require a finish, it is only a preference. Natural teak will last a lifetime untreated and weathered. Teak Treatment is an optional custom process. Therefore, PURCHASES MADE WITH TEAK TREATMENT SERVICES SELECTED ARE NON-RETURNABLE AND REQUIRE A 50% NON-REFUNDABLE DEPOSIT TO BEGIN THE TREATMENT PROCESS. THIS EXCLUDES ANY ITEMS THAT ARRIVE DAMAGED OR WITH ANY MANUFACTURING DEFECTS.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        @foreach($finishes as $key => $finish)
            <section class="flat-spacing-wt pt_0 pb_0">
                <div class="container">
                    @if($loop->index % 2 === 0)
                        <div class="tf-grid-layout md-col-3-4">
                            <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                                <img class="lazyload img-round-teak-wood wt-desktop"
                                    src="/images/teak_treatment/{{ $finish['treatment_id'] }}_comparisonsm.jpg"
                                    alt="teak-finish-comparision"
                                >
                            </div>
                            <div class="tf-content-wrap wow fadeInUp position-relative" data-wow-delay="0s">
                                <div class="finish-title heading">{{ $finish['name'] }}</div>
                                <span class="finish-suggested-use heading small">{{ $finish['suggested_use'] }}</span>
                                <div class="finish-description description">{{ $finish['description'] }}</div>
                                <div class="finish-timeframe-wrapper">
                                    <div class="finish-line"></div>
                                    <div class="finish-timeframe">
                                        <img src="{{ url('new-design/images/pages/finish/shipping.png') }}"
                                             class="finish-shipping-img">Ships in {{ $finish['timeframe'] }}
                                    </div>
                                </div>
                            </div>
                            <div class="tf-content-wrap wow fadeInUp wt-mobile" data-wow-delay="0s">
                                <img class="lazyload img-round-teak-wood"
                                    src="/images/teak_treatment/{{ $finish['treatment_id'] }}_comparisonsm.jpg"
                                    alt="teak-finish-comparision"
                                >
                            </div>
                        </div>
                    @else
                        <div class="tf-grid-layout md-col-4-3">
                            <div class="tf-content-wrap wow fadeInUp position-relative" data-wow-delay="0s">
                                <div class="finish-title heading">{{ $finish['name'] }}</div>
                                <span class="finish-suggested-use heading small">{{ $finish['suggested_use'] }}</span>
                                <div class="finish-description description">{{ $finish['description'] }}</div>
                                <div class="finish-timeframe-wrapper">
                                    <div class="finish-line"></div>
                                    <div class="finish-timeframe">
                                        <img src="{{ url('new-design/images/pages/finish/shipping.png') }}"
                                             class="finish-shipping-img">Ships in {{ $finish['timeframe'] }}
                                    </div>
                                </div>
                            </div>
                            <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                                <img class="lazyload img-round-teak-wood"
                                    src="/images/teak_treatment/{{ $finish['treatment_id'] }}_comparisonsm.jpg"
                                    alt="teak-finish-comparision"
                                >
                            </div>
                        </div>
                    @endif
                </div>
            </section>
        @endforeach

        <section class="flat-spacing-wt">
            <div class="container">
                <div class="tf-grid-layout">
                    <!-- TrustBox script -->
                    <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
                    <!-- End TrustBox script -->
                    <!-- TrustBox widget - Grid -->
                    <div class="trustpilot-widget" data-locale="en-US" data-template-id="539adbd6dec7e10e686debee" data-businessunit-id="47783f620000640005020fa2" data-style-height="700px" data-style-width="100%" data-review-languages="en">
                        <a href="https://www.trustpilot.com/review/www.westminsterteak.com" target="_blank" rel="noopener">Trustpilot</a>
                    </div>
                    <!-- End TrustBox widget -->
                    </div>
                </div>
            </div>
        </section>

    </div>
@endsection