@extends('v2.layouts.app')
@section('title', 'Contact Us | Get in Touch with Columbus17')
@section('meta_description', 'Get in touch with Columbus17 for support, inquiries, or partnerships. We’re here to help your business grow.')
@section('content')
    <section class="-mt-24 pt-40 pb-12 bg-blueGray-100">
            <div class="container">
                <h1 class="text-2xl lg:text-4xl font-bold mb-5 wow animate__animated animate__fadeInUp animated">Columbus17 Contact Us</h1>
                <ul class="flex text-gray-500 text-sm lg:text-sm pb-12 wow animate__animated animate__fadeInUp animated">
                    <li class="inline-flex items-center">
                        <a href="{{ route('home') }}" class="hover:text-blue-500 text-gray-800">Home</a>
                        <svg fill="currentColor" viewBox="0 0 20 20" class="h-5 w-auto text-gray-300">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                        </svg>
                    </li>
                    <li class="inline-flex items-center text-gray-400">
                        <span>Contact</span>
                    </li>
                </ul>
            </div>
    </section>
    <section class="relative -mt-24 pt-24">
        <div class="hidden lg:block absolute inset-0 w-1/2 ml-auto bg-blueGray-100 z-0" style="z-index: -1"></div>
        <div class="container">
            <div class="flex flex-wrap items-center -mx-3">
                <div class="w-full lg:w-1/2 px-3">
                    <div class="py-12">
                        <div class="max-w-lg lg:max-w-md mx-auto lg:mx-0 mb-8 text-center lg:text-left">
                            <h2 class="text-3xl lg:text-4xl mb-4 font-bold font-heading wow animate__animatedanimated animate__fadeIn">Modernize Your Amazon <br />Journey with <span class="text-blue-500">Columbus17</span></h2>
                            <p class="text-blueGray-400 leading-relaxed wow animate__animatedanimated animate__fadeIn h-12">Tired of Guessing What <strong class="text-blue-500">Sells?</strong>, Columbus 17 <span class="typewrite d-inline text-brand" data-period="3000" data-type='[" Shows You What Works." ]'></span></p>
                            <p class="text-blueGray-400 leading-relaxed wow animate__animatedanimated animate__fadeIn mt-3 text-sm">Helping you maximize operations management with digitization</p>
                        </div>
                        <div class="text-center lg:text-left">
                            <a class="tracking-wide hover-up-2 block sm:inline-block py-4 px-8 mb-4 sm:mb-0 sm:mr-3 text-xs text-white text-center font-semibold leading-none bg-blue-400 hover:bg-blue-500 rounded wow animate__animatedanimated animate__fadeInUp" href="{{ url('https://columbus17.com#key-features') }}">Key Features</a>
                            <a class="block hover-up-2 sm:inline-block py-4 px-8 text-xs text-blueGray-500 hover:text-blueGray-600 text-center font-semibold leading-none bg-white border border-blueGray-200 hover:border-blueGray-300 rounded wow animate__animatedanimated animate__fadeInUp" data-wow-delay=".3s" href="{{ url('https://columbus17.com#how-we-work') }}">How We Work?</a>
                        </div>
                    </div>
                </div>
                <div class="w-full lg:w-1/2 px-3 lg:bg-blueGray-10 mb-12 lg:mb-0 pb-10">
                    <div class="flex items-center justify-center">
                        <img class="lg:max-w-lg" src="{{ asset('storage/imgs/illustrations/team.svg') }}" alt="" />
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="py-20">
        <div class="container">
            <div class="max-w-2xl mx-auto text-center">
                <div class="max-w-md mb-8 mx-auto">
                    <span class="inline-block py-1 px-3 text-xs font-semibold bg-blue-100 text-blue-600 rounded-xl wow animate__animatedanimated animate__fadeInUp" data-wow-delay=".1s">Contact Us</span>
                    <h2 class="mt-2 text-4xl font-bold font-heading wow animate__animatedanimated animate__fadeInUp" data-wow-delay=".s">We will <span class="text-blue-500">be glad</span> to hear from you!</h2>
                </div>
                <div>
                    <form action="{{ route('contact.submit') }}" method="POST">
                        @csrf
                        <div class="mb-4 wow animate__animatedanimated animate__fadeInUp" data-wow-delay=".3s">
                            <input 
                                class="w-full p-4 text-xs font-semibold leading-none bg-blueGray-50 rounded outline-none" 
                                type="text"
                                id="name"
                                name="name"
                                required 
                                placeholder="Name" />
                        </div>
                        <div class="mb-4 wow animate__animatedanimated animate__fadeInUp" data-wow-delay=".3s">
                            <input 
                                class="w-full p-4 text-xs font-semibold leading-none bg-blueGray-50 rounded outline-none" 
                                type="email"
                                id="email"
                                name="email"
                                required 
                                placeholder="name@example.com" />
                        </div>
                        <div class="mb-4 wow animate__animatedanimated animate__fadeInUp" data-wow-delay=".3s">
                            <textarea 
                                class="w-full h-24 p-4 text-xs font-semibold leading-none resize-none bg-blueGray-50 rounded outline-none" 
                                placeholder="Message..." 
                                id="message" 
                                name="message" 
                                rows="4" required></textarea>
                        </div>
                        <div class="flex justify-between items-center wow animate__animatedanimated animate__fadeInUp" data-wow-delay=".3s">
                            <button class="py-4 px-8 text-sm text-white font-semibold leading-none bg-blue-500 hover:bg-blue-700 rounded" type="submit">Submit</button>
                        </div>
                    </form>
                    @if(session('success'))
                        <div class="mt-4 mb-4 p-4 bg-green-100 text-green-800 rounded">
                            {{ session('success') }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection