@extends('welcome')

@section('title', __('howtoprepare.seo_title', ['company' => config('app.name')]))
@section('meta_description', __('howtoprepare.seo_description'))

@section('content')

<!--==============================
        Breadcumb
============================== -->
<div class="breadcumb-wrapper"
     data-bg-src="{{ asset('images/banners/bg_07.jpg') }}"
     data-track-type="breadcrumb"
     data-track-click="visualizacao_breadcrumb_preparacao"
     data-track-meta="pagina:preparacao">

    <div class="container">
        <div class="breadcumb-content">
            <h1 class="breadcumb-title">
                {{ __('howtoprepare.breadcrumb_title_part1') }}
                &
                <span class="text-theme">
                    {{ __('howtoprepare.breadcrumb_title_part2') }}
                </span>
            </h1>

            <ul class="breadcumb-menu">
                <li>
                    <a href="{{ route('welcome') }}"
                       data-track-type="link"
                       data-track-click="breadcrumb_inicio"
                       data-track-meta="origem:preparacao">
                        {{ __('howtoprepare.home') }}
                    </a>
                </li>
                <li>
                    {{ __('howtoprepare.breadcrumb_title_part1') }}
                    &
                    {{ __('howtoprepare.breadcrumb_title_part2') }}
                </li>
            </ul>
        </div>
    </div>
</div>

<!--==============================
        About Area
============================== -->
<div class="overflow-hidden overflow-hidden space" id="about-sec"
     data-track-type="secao"
     data-track-click="visualizacao_secao_preparacao"
     data-track-meta="pagina:preparacao">

    <div class="container">
        <div class="row align-items-center">
            <div class="col-xl-12">

                <div class="ps-xxl-5 ps-xl-2 ms-xl-1 text-center text-xl-start">

                    <div class="title-area mb-32 text-center">
                        <span class="sub-title">
                            <img src="{{ asset('assets/img/theme-img/title_icon.svg') }}" alt="icon">
                            {{ __('howtoprepare.subtitle') }}
                        </span>

                        <h2 class="sec-title">
                            {{ __('howtoprepare.title_line1') }}
                            {{ __('howtoprepare.title_line2') }}
                        </h2>
                    </div>

                    {{-- Imagem dinâmica --}}
                    <div class="title-area mb-32 text-center">
                        <img src="{{ asset('images/banners/3steps.png') }}"
                             alt="{{ __('howtoprepare.title_line2') }}"
                             data-track-type="imagem"
                             data-track-click="imagem_preparacao"
                             data-track-meta="pagina:preparacao"/>
                    </div>

                    {{-- Texto dinâmico vindo do ficheiro --}}
                    <div class="title-area mb-32">
                        <p class="sec-text text-justify">
                            {!! $prepareText !!}
                        </p>
                    </div>

                    {{-- Features --}}
                    <div class="about-feature-wrap">

                        <div class="about-feature"
                             data-track-type="feature"
                             data-track-click="feature_ingredientes"
                             data-track-meta="pagina:preparacao">

                            <div class="box-icon">
                                <img src="{{ asset('assets/img/icon/about_feature_1.svg') }}" alt="icon">
                            </div>

                            <h3 class="box-title">
                                {{ __('howtoprepare.feature_1') }}
                            </h3>
                        </div>

                        <div class="about-feature"
                             data-track-type="feature"
                             data-track-click="feature_vegetais"
                             data-track-meta="pagina:preparacao">

                            <div class="box-icon">
                                <img src="{{ asset('assets/img/icon/about_feature_2.svg') }}" alt="icon">
                            </div>

                            <h3 class="box-title">
                                {{ __('howtoprepare.feature_2') }}
                            </h3>
                        </div>

                    </div>

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

@endsection