@extends('layouts.website_layout')
@section('meta_title', $plant_details->meta_title)
@section('meta_description', $plant_details->meta_description)
@section('banner_image', "banners/".$plant_details->banner_image)
@section('canonical_tag', "care/your-plants/$plant_details->plant_url_slug")
@section('content')
<main>
    <!-- style="background:#000  url({{url('/')}}/assets/images/banners/{{$plant_details->banner_image}})no-repeat bottom center/cover;" -->
    <div class="container-fluid staticPageBanner">
    <img loading="lazy" src="{{url('/')}}/assets/images/banners/{{$plant_details->banner_image}}" alt="{{$plant_details->banner_caption}}" class="img-fluid">
        <div class="container">
            <div class="col-12 col-sm-12 col-md-8 col-lg-6 col-xl-5 staticPageBanner__inner text-center">
                <div class="staticPageBanner__inner__title">
                    <h1 class="bold-heading">{{$plant_details->banner_caption}}</h1>
                </div>
                <div class="staticPageBanner__inner__txt">
                    <p>{{$plant_details->banner_description}}</p>
                </div>
            </div>

        </div>

    </div>

    <div class="container-fluid plantsDetails">

        <div class="container">
            <div class="col-12 col-md-10 col-lg-8 m-auto">
                <div class="row plantsDetails__blocks">

                <div class="col-12">

                    <p class="paragraph">{{nl2br($plant_details->introduction_text)}} <a href="#faqs"><img loading="lazy" src="{{url('/')}}/assets/images/home/arrow.png" alt="submit arrow"></a></p>
                    
                </div>

            </div>

            @foreach($plant_sections as $plant_section_row)

            <div class="row plantsDetails__blocks">
                <div class="col-12 text-center">

                    <div class="plantsDetails__blocks__image">

                        <img loading="lazy" src="{{url('/')}}/assets/images/sections/{{$plant_section_row->section_icon}}" alt="{{$plant_section_row->section_title}}" class="img-fluid">

                    </div>

                </div>

                <div class="col-12 text-center">

                    <div class="plantsDetails__blocks__title">

                        <h2 class="bold-heading">{{$plant_section_row->section_title}}</h2>

                    </div>

                    <p class="paragraph">{!!nl2br($plant_section_row->section_content)!!}</p>

                </div>

            </div>

            @endforeach
            </div>
        </div>

    </div>
    @if(!empty($common_questions->count()))
    <div class="container-fluid faqs" id="faqs">
        <div class="container">
            <div class="row">
                <div class="col-12 faqs__title">
                    <h2 class="bold-heading">Common @if(count($common_questions) == 1) question @else questions @endif</h2>
                </div>
                <div class="col-12 faqs__list">
                    @php
                    $i = 0;
                    @endphp
                    @foreach($common_questions as $common_question_row)
                    <div class="faqs__list__block">
                        <div class="faqs__list__block__title">
                            <h3 class="paragraph">{{$common_question_row->question_text}}</h3>
                        </div>
                        <div class="faqs__list__block__text">
                            <p class="paragraph">{{$common_question_row->answer_text}}</p>
                        </div>
                    </div>
                    @php
                    $i++;
                    @endphp
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    @endif
    <div class="container benefits">
        <div class="row  benefits__section">
            <div class="col-12 benefits__title text-center">
                <a href="mailto:concierge@cocojungle.co" class="bold-heading">Can we help with anything else?</a>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                <div class="benefits__section__block text-center">
                    <div class="benefits__section__block__icon">
                        <img loading="lazy" src="{{url('/')}}/assets/images/home/free-delivery.png" alt="" class="img-fluid">
                    </div>
                    <div class="benefits__section__block__caption">
                        <h3 class="bold-heading">Free delivery</h3>
                        <p class="regular-heading">On all orders, no minimum</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                <div class="benefits__section__block text-center">
                    <div class="benefits__section__block__icon">
                        <img loading="lazy" src="{{url('/')}}/assets/images/home/taxes-included.png" alt="" class="img-fluid">
                    </div>
                    <div class="benefits__section__block__caption">
                        <h3 class="bold-heading">Tax included</h3>
                        <p class="regular-heading">No surprises at checkout</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                <div class="benefits__section__block text-center">
                    <div class="benefits__section__block__icon">
                        <img loading="lazy" src="{{url('/')}}/assets/images/home/relax.png" alt="" class="img-fluid">
                    </div>
                    <div class="benefits__section__block__caption">
                        <h3 class="bold-heading">Relax</h3>
                        <p class="regular-heading">Call or email us anytime</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

@endsection