@extends('v2.layouts.app')
@section('title', 'Simple & Transparent Plans for Amazon Sellers | Columbus 17')
@section('meta_description', 'Choose the perfect plan for your Amazon business. Columbus17 offers flexible pricing to help you find winning products, optimize listings, and grow your sales with powerful tools.')
@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 Pricing</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>Pricing</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 Shows You <span class="typewrite d-inline text-brand" data-period="3000" data-type='[" 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-6">
        <div class="container px-4 mx-auto">
            <div class="flex flex-wrap justify-between pt-8 pb-16">
                <div class="hover-up-5 flex w-1/2 lg:w-auto py-4 wow animate__animated animate__fadeInUp" data-wow-delay=".2s">
                    <div class="flex justify-center items-center bg-blueGray-50 text-blue-500 rounded-xl h-12 w-12 sm:h-20 sm:w-20">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                    </div>
                    <div class="sm:py-2 ml-2 sm:ml-6">
                        <span class="sm:text-2xl font-bold font-heading">+ </span>
                        <span class="sm:text-2xl font-bold font-heading">3,200</span>
                        <p class="text-xs sm:text-base text-blueGray-400">Registered Sellers</p>
                    </div>
                </div>
                <div class="hover-up-5 flex w-1/2 lg:w-auto py-4 wow animate__animated animate__fadeInUp" data-wow-delay=".4s">
                    <div class="flex justify-center items-center bg-blueGray-50 text-blue-500 rounded-xl h-12 w-12 sm:h-20 sm:w-20">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path>
                        </svg>
                    </div>
                    <div class="sm:py-2 ml-2 sm:ml-6">
                        <span class="sm:text-2xl font-bold font-heading">+ </span>
                        <span class="sm:text-2xl font-bold font-heading">25</span>
                        <p class="text-xs sm:text-base text-blueGray-400">Countries Reached</p>
                    </div>
                </div>
                <div class="hover-up-5 flex w-1/2 lg:w-auto py-4 wow animate__animated animate__fadeInUp" data-wow-delay=".6s">
                    <div class="flex justify-center items-center bg-blueGray-50 text-blue-500 rounded-xl h-12 w-12 sm:h-20 sm:w-20">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
                        </svg>
                    </div>
                    <div class="sm:py-2 ml-2 sm:ml-6">
                        <span class="sm:text-2xl font-bold font-heading">+ </span>
                        <span class="sm:text-2xl font-bold font-heading">10,000</span>
                        <p class="text-xs sm:text-base text-blueGray-400">Products Analyzed</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="py-20 xl:bg-contain bg-top bg-no-repeat" style="background-image: url(' {{ asset('storage/imgs/backgrounds/intersect.svg') }}')">
        <div class="container">
            <div class="text-center mb-16">
                <h2 class="max-w-lg mx-auto mb-4 text-4xl font-bold font-heading wow animate__animated animate__fadeInUp" data-wow-delay=".2s">
                    <span>Start saving time today and</span>
                    <span class="text-blue-500"> choose </span>
                    <span>your best plan</span>
                </h2>
                <p class="max-w-sm mx-auto text-lg text-blueGray-400 wow animate__animated animate__fadeInDown" data-wow-delay=".5s">Best for New Sellers, Sellers, Agencies, Brands</p>
            </div>
            <p class="mx-auto text-lg text-blueGray-400 wow animate__animated animate__fadeInDown mb-4 text-center" data-wow-delay=".5s">Columbus17 is currently free during our early access phase. Pricing will be introduced soon.</p>
            <div class="flex flex-wrap -mx-3">
                @foreach($plans as $plan)
                <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
                    <div class="hover-up-5 pt-16 pb-8 px-4 text-center bg-white rounded shadow wow animate__animated animate__fadeInUp" data-wow-delay=".2s">
                        <div class="text-black text-xs font-bold px-2 py-1 rounded-full">Coming Soon</div>
                        <img class="h-20 mb-6 mx-auto" src="{{ asset('storage/imgs/icons/startup.svg')}}" alt="" />
                        <h3 class="mb-2 text-4xl font-bold font-heading">{{ data_get($plan, 'name') }}</h3>
                        <span class="text-4xl text-blue-500 font-bold font-heading">{{ data_get($plan, 'currency.currency') . data_get($plan, 'monthly_price') }}<span class="font-normal text-xs">/month</span></span>
                        <p class="mt-2 mb-8 text-blueGray-400">{{ data_get($plan, 'currency.currency') . data_get($plan, 'annually_price') }} per month if paid annually</p>
                        <div>
                            <a style="pointer-events: none" class="block sm:inline-block py-4 px-6 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" href="#">Start Free Trial</a>
                            <a style="pointer-events: none" class="block sm:inline-block py-4 px-6 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" href="#">Purchase</a>
                        </div>
                    </div>
                </div>
            @endforeach
            </div>
        </div>
    </section>
    <section class="py-20">
        <div class="container">
            <div class="max-w-lg mb-16 mx-auto text-center">
                <h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading wow animate__animatedanimated animate__fadeInUp" data-wow-delay=".1s">
                    <span>Start saving time today and</span>
                    <span class="text-blue-500"> choose </span>
                    <span>your best plan</span>
                </h2>
                <p class="text-base lg:text-lg text-blueGray-400 wow animate__animatedanimated animate__fadeInUp" data-wow-delay=".3s">Best for New Sellers, Sellers, Agencies, Brands</p>
            </div>
            <div class="bg-white border border-gray-200 rounded shadow mb-4">
                <div class="border-b border-gray-200">
                    <Price>
                </div>
            </div>
        </div>
    </section>
@endsection