@extends('layouts.main')

@section('title', 'ÓKEA - Contato')
@section('description', 'Torne a sua indústria mais eficiente com Asterian® e produza resultados.')
@section('keywords', 'okea', 'asterian', 'mes software', 'software para a indústria', 'manutenção preditiva', 'sistema MES', 'gestão de ativos', 'sistema mes 4.0')

@section('content')

<section class="container-fluid mx-auto contact mb-5">
    <div class="container-fluid mb-5">
        <div class="container d-flex flex-wrap mx-auto p-3 p-md-4 p-lg-5">
            <div class="col-12 col-md-6">
                <h1 class="bold-gray">{{__('messages.contact-title-ln1')}}<br />{{__('messages.contact-title-ln2')}}</h1>

                <div class="mb-4 mb-md-0 py-4">
                    <div class="d-flex">
                        <div class="my-auto me-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="31.104" viewBox="0 0 32 31.104">
                                <path id="União_11" data-name="União 11"
                                    d="M79.31,31.1a24.807,24.807,0,0,1-16.43-6.687A23.434,23.434,0,0,1,56,8.447a3.046,3.046,0,0,1,.242-1.2,3.11,3.11,0,0,1,.7-1.02l4.32-4.23a1.633,1.633,0,0,1,2.255,0l6.4,6.221a1.524,1.524,0,0,1,0,2.192L67.375,12.9a11.745,11.745,0,0,0,2.543,4.665,12.2,12.2,0,0,0,4.8,2.473l2.56-2.473a1.634,1.634,0,0,1,2.256,0l6.4,6.221a1.524,1.524,0,0,1,0,2.192L81.6,30.188a3.211,3.211,0,0,1-1.049.682,3.271,3.271,0,0,1-1.218.235ZM59.2,8.416a20.369,20.369,0,0,0,5.952,13.81,21.557,21.557,0,0,0,14.19,5.769l3.2-3.11L78.4,20.857,76.334,22.91a1.607,1.607,0,0,1-.673.389,1.654,1.654,0,0,1-.782.031,16.3,16.3,0,0,1-7.2-3.577,15.587,15.587,0,0,1-3.68-7,1.521,1.521,0,0,1,.054-.767,1.559,1.559,0,0,1,.426-.648l2.065-2.006L62.4,5.306ZM84.8,14a10.268,10.268,0,0,0-.748-4.224,10.5,10.5,0,0,0-2.418-3.584A10.849,10.849,0,0,0,77.944,3.84,11.119,11.119,0,0,0,73.6,3.113V0a14.445,14.445,0,0,1,5.558.983,14.142,14.142,0,0,1,4.715,3.027A13.676,13.676,0,0,1,86.985,8.6,13.357,13.357,0,0,1,88,14Zm-6.4,0c0-3.266-1.439-4.666-4.8-4.666V6.224c5.152,0,8,2.767,8,7.775Z"
                                    transform="translate(-56 0)" fill="#02b7d5" />
                            </svg>
                        </div>
                        <div class="regular-gray-2">
                            +55 (47) 3255-8383<br />
                            +55 (47) 3255-8384
                        </div>
                    </div>
                    <div class="d-flex my-4">
                        <div class="my-auto me-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="24.884" viewBox="0 0 32 24.884">
                                <path id="União_12" data-name="União 12"
                                    d="M64,24.884v-3.11h6.4v3.11Zm8-1.555v-3.11H84.8v-14L74.56,13.686a1.639,1.639,0,0,1-1.92,0L62.4,6.221v4.666H59.2V3.11A3.159,3.159,0,0,1,62.4,0H84.8A3.16,3.16,0,0,1,88,3.11V20.219a3.16,3.16,0,0,1-3.2,3.11ZM73.6,10.5,83.734,3.11H63.465ZM59.2,20.219V17.107h9.6v3.111ZM56,15.552v-3.11H67.2v3.11Z"
                                    transform="translate(-56)" fill="#02b7d5" />
                            </svg>
                        </div>
                        <div>
                            <p class="m-0 regular-gray-2">falecom@okea.com.br</p>
                        </div>
                    </div>

                    <div class="bg-white p-5 rounded-2 box-contact mt-5">
                        <div class="bold-gray-1 text-center mb-3">ÓKEA Tecnologia</div>
                        <div class="d-flex">
                            <div class="my-auto me-4">
                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="31.105" viewBox="0 0 32 31.105">
                                    <path id="União_13" data-name="União 13"
                                        d="M56,21.774c0-3.7,3.515-6.937,9.175-8.458l.853,3C61.88,17.429,59.2,19.571,59.2,21.774c0,2.942,5.256,6.221,12.8,6.221s12.8-3.279,12.8-6.221c0-2.2-2.68-4.344-6.826-5.458l.853-3C84.485,14.837,88,18.076,88,21.774c0,5.232-7.029,9.331-16,9.331S56,27.005,56,21.774Zm14.4-1.555v-8a6.249,6.249,0,0,1-4.8-6,6.4,6.4,0,0,1,12.8,0,6.248,6.248,0,0,1-4.8,6v8L72,23.329Zm-1.6-14a3.2,3.2,0,0,0,6.4,0,3.2,3.2,0,0,0-6.4,0Z"
                                        transform="translate(-56)" fill="#02b7d5" />
                                </svg>
                            </div>
                            <div class="regular-gray-3">
                                Rodovia Antônio Heil, 3730 Sl 101 Nova Brasília - Brusque - SC
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 d-flex justify-content-center">
                <div class="form bg-white rounded-2 p-3 p-md-4 p-lg-5 w-100">
                    <h1 class="bold-gray-1 text-center mb-4">
                        {{__('messages.contact-form-1')}}
                    </h1>
                    <form id="contatoForm" method="post">
                        @csrf
                        <div class="mb-3">
                            <label class="block mb-2 pl-2 bold-gray-0" for="nome">{{__('messages.contact-form-2')}}</label>
                            <input class="w-100 p-3 regular-gray-0" type="text" id="nome" name="nome" placeholder="{{__('messages.contact-form-3')}}" required />
                        </div>
                        <div class="mb-3">
                            <label class="lock mb-2 pl-2 bold-gray-0" for="email">{{__('messages.contact-form-4')}}</label>
                            <input class="w-100 p-3 regular-gray-0" type="text" id="email" name="email" placeholder="{{__('messages.contact-form-5')}}" required />
                        </div>
                        <div class="mb-3">
                            <label class="lock mb-2 pl-2 bold-gray-0" for="telefone">{{__('messages.contact-form-6')}}</label>
                            <input class="w-100 p-3 regular-gray-0 telefone" type="text" id="telefone" name="telefone" placeholder="{{__('messages.contact-form-7')}}" required />
                        </div>
                        <div class="mb-3">
                            <label class="lock mb-2 pl-2 bold-gray-0" for="mensagem">{{__('messages.contact-form-8')}}</label>
                            <textarea class="w-100 p-3 regular-gray-0" rows="5" id="mensagem" name="mensagem" placeholder="{{__('messages.contact-form-9')}}" required></textarea>
                        </div>

                        <div class="text-center mb-3 status-msg d-none"></div>
                        <div class="d-flex justify-content-center">
                            <button class="btn-contact" type="submit">{{__('messages.contact-form-10')}}</button>
                        </div>
                    </form>
                </div>

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

@endsection