@extends('layouts.app')

@section('title', 'Amazon Seller Software | Columbus 17')
@section('meta_description', 'Boost your Amazon sales with Columbus17. Discover trending products, analyze competitors, and optimize keywords in one place.')
@section('content')
    <div class="content w-full sm:w-2/3 m-auto mt-24">
    <section class="bg-sky-200 py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mb-4">
                Start Your 1-Month Free Trial
            </h2>
            <p class="text-lg text-gray-600 mb-6">
                Discover all the premium features of Columbus17 completely free for 30 days. No credit card required!
            </p>
            <a href="{{ route('register.create') }}"
            class="inline-block bg-sky-500/100 hover:bg-sky-600 text-black font-semibold py-3 px-6 rounded-lg shadow transition mb-10">
                Get Started Free
            </a>
        </div>
    </section>
        <div class="p-10 w-full sm:w-5/6 md:w-4/6 justify-self-center rounded-b-full bg-indigo-600">
            <div class="flex flex-col sm:flex-row justify-center gap-8 text-gray-700">
                    <div class="text-center">
                    <p class="text-3xl font-bold text-white">@{{ sellersCount }}+</p>
                    <p class="text-sm text-white">Registered Sellers</p>
                    </div>
                    <div class="text-center">
                    <p class="text-3xl font-bold text-white">@{{ countriesCount }}+</p>
                    <p class="text-sm text-white">Countries Reached</p>
                    </div>
                    <div class="text-center">
                    <p class="text-3xl font-bold text-white">@{{ productsCount }}+</p>
                    <p class="text-sm text-white">Products Analyzed</p>
                    </div>
                </div>
        </div>
        <!--<div class="content-bottom mt-48">
            <div class="flex flex-col space-x-2 sm:flex-row space-y-4 sm:space-y-0 items-center">
                <div class="w-full sm:w-2/3">
                    Top frame with video
                        <div class="rounded-xl overflow-hidden h-[500px]">
                            <video 
                                class="w-full h-full rounded-lg shadow-lg"
                                style="scale:2.6;"
                                autoplay 
                                muted 
                                loop 
                                playsinline
                            >
                                <source src="{{ asset('storage/blackbox_home_page.mp4') }}" type="video/mp4">
                            </video>
                        </div>
                </div>
                <div class="grid md:grid-cols-1 lg:grid-cols-2 gap-12 animate-slideIn h-min w-full sm:w-1/3">
                    <div class="col-span-2 sm:col-span-1">
                        <i class="fa fa-check text-sky-700" aria-hidden="true"></i>
                        <p>Start by selecting your target category to focus your search</p>
                    </div>
                    <div class="col-span-2 sm:col-span-1">
                        <i class="fa fa-check text-sky-700" aria-hidden="true"></i>
                        <p>Crush your competition with the tools and resources you need to stay ahead your competitors</p>
                    </div>
                    <div>
                        <i class="fa fa-check text-sky-700" aria-hidden="true"></i>
                        <p>Scale your business with proven tactics and tips from our expert-led webinars</p>
                    </div>
                    <div>
                        <i class="fa fa-check text-sky-700" aria-hidden="true"></i>
                        <p>Discover our Ad-Lane focusing on how you build your product ad to drive top ranks</p>
                    </div>
                </div>
            </div>
        </div>
        -->
        <div class="pricing-content-above-wrapper flex flex-col mt-48 items-center space-y-12 p-4 sm:p-0">
            <!-- Main Heading -->
            <h1 class="text-4xl sm:text-6xl font-extrabold text-center mb-8">
                Modernize Your Amazon Journey with <span class="text-sky-400">Columbus17</span>
            </h1>

            <!-- Info Boxes with sequential animation -->
            <div class="flex flex-col sm:flex-row gap-4 w-full max-w-6xl mt-8">
                <!-- Box 1 -->
                <p class="bg-sky-700 rounded-lg p-6 text-white flex-1 transform -translate-x-12 opacity-0 animate-slide-left delay-100 transition-all hover:translate-x-1 hover:shadow-lg">
                Columbus17 is an advanced Amazon product research and keyword analysis platform designed to help sellers discover profitable products, track trends, and optimize listings with data-driven insights.
                </p>

                <!-- Box 2 -->
                <p class="bg-sky-700 rounded-lg p-6 text-white flex-1 transform -translate-x-12 opacity-0 animate-slide-left delay-200 transition-all hover:translate-x-1 hover:shadow-lg">
                With our tools, you can automate product research, analyze competitors, monitor keyword performance, and uncover hidden market opportunities — all from one intuitive dashboard.
                </p>

                <!-- Box 3 -->
                <p class="bg-sky-700 rounded-lg p-6 text-white flex-1 transform -translate-x-12 opacity-0 animate-slide-left delay-300 transition-all hover:translate-x-1 hover:shadow-lg">
                Whether you're a new seller or an experienced entrepreneur, Columbus17 helps you stay ahead of the competition and make smarter decisions with real-time Amazon data.
                </p>
            </div>
        </div>

        <div class="pricing-content-bottom-wrapper mt-48 grid grid-cols-2 gap-4 p-2 sm:p-0 animate-contentbottomwrapper">
            <div class="border-r-2 p-6 shadow-md bg-blue-100">
                <div class="flex flex-row justify-between items-center mb-4">
                    <span class="text-xl sm:text-2xl font-bold">Product Research</span>
                    <a href="{{ url('tools/product-research') }}"><i class="fa fa-share text-gray-400 hover:text-gray-800 invisible sm:visible" aria-hidden="true"></i></a>    
                </div>
                <p class="text-sm">Determine profitable products and analyze</p>     
            </div>
            <div class="border-r-2 p-6 shadow-md bg-blue-100">
                <div class="flex flex-row justify-between items-center mb-4">
                    <span class="text-xl sm:text-2xl font-bold">Keyword Research</span>
                    <a href="{{ url('tools/keyword-research') }}"><i class="fa fa-share text-gray-400 hover:text-gray-800 invisible sm:visible" aria-hidden="true"></i></a>
                </div>  
                <p class="text-sm">Optimize Your Keywords for Improved Results</p> 
            </div>
            <div class="border-r-2 p-6 shadow-md bg-blue-100">
                <div class="flex flex-row justify-between items-center mb-4">
                    <span class="text-xl sm:text-2xl font-bold">Insights Dashboard</span>
                    <a href="{{ url('get-started/key-products/seller-insights-dashboard') }}"><i class="fa fa-share text-gray-400 hover:text-gray-800 invisible sm:visible" aria-hidden="true"></i></a>    
                </div>
                <p class="text-sm">Achieve greater success on the Amazon platform with our comprehensive tools of all critical aspects of your e-commerce operations</p>
            </div>
            <div class="border-r-2 p-6 shadow-md bg-blue-100">
                <div class="flex flex-row justify-between items-center mb-4">
                    <span class="text-xl sm:text-2xl font-bold">Listing Optimization</span>
                    <a href="{{ url('tools/listing-optimization') }}"><i class="fa fa-share text-gray-400 hover:text-gray-800 invisible sm:visible" aria-hidden="true"></i></a>    
                </div>
                <p class="text-sm">Enhance product listings to improve visibility and attract more potential buyers</p>
            </div>
            <!--<div class="border-r-2 p-6 shadow-md bg-blue-100">
                <div class="flex flex-row justify-between items-center mb-4">
                    <span class="text-xl sm:text-2xl font-bold">Analytics</span>
                    <i class="fa fa-share text-gray-400 hover:text-gray-800 invisible sm:visible" aria-hidden="true"></i>    
                </div>
                <p class="text-sm">Run a successful e-commerce business with a wealth of crucial data and insights</p>
            </div>
            <div class="border-r-2 p-6 shadow-md bg-blue-100">
                <div class="flex flex-row justify-between items-center mb-4">
                    <span class="text-xl sm:text-2xl font-bold">Marketing</span>
                    <i class="fa fa-share text-gray-400 hover:text-gray-800 invisible sm:visible" aria-hidden="true"></i>    
                </div>
                <p class="text-sm">Reach your audience with a robust set of tools</p>
            </div>-->
        </div>
    </div>
    <!-- PRICING -->
    <div class="content w-2/3 m-auto mt-24">
        <div class="pricing-content-above-wrapper flex flex-col items-center mt-48 animate-content space-y-24">
            <div class="pricing-content-above flex flex-col space-y-4 max-w-screen-md">
                <p class="text-4xl sm:text-6xl font-bold text-center">Plans & Pricing</p>
                <p class="text-xl sm:text-2xl text-center">Start your seller story</p>
            </div>
        </div>
        <div class="pricing-content-bottom-wrapper flex flex-col mt-12 flex flex-row items-center space-y-24 animate-contentbottomwrapper">
            <div class="pricing-content-bottom flex flex-col sm:flex-row w-full max-w-screen-md space-y-4 sm:space-x-4 items-center sm:justify-center sm:items-baseline">
                @foreach($plans as $plan)
                    <div class="flex flex-col space-y-6">
                        <span class="text-lg font-bold">{{ data_get($plan, 'name') }}</span>
                        <span class="text-4xl sm:text-6xl font-bold">{{ data_get($plan, 'currency.currency') . data_get($plan, 'monthly_price') }}<span class="font-normal text-xs">/month</span></span>
                        <span class="font-medium text-sm text-gray-600">{{ data_get($plan, 'currency.currency') . data_get($plan, 'annually_price') }} per month if paid annually</span>
                        <a href="#" type="button" class="text-center bg-blue-800 hover:bg-blue-700 w-full py-2 rounded-md font-bold text-white {{data_get($plan, 'slug')}}-button">Buy plan</a>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="content-above flex flex-col items-center md:px-20 space-y-4 mt-48">
        </div>
        <div class="content-bottom mt-24">
            <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0">
                <div class="flex flex-col items-left w-full pr-0 sm:pr-36">
                    <div>
                        <p class="font-semibold text-gray-700">Benefits of Our Software</p>
                        <p class="text-2xl sm:text-3xl font-bold">Become aware of your e-commerce potential</p>
                        <p class="mt-4 font-medium">Our Software has solutions for sellers at every stage</p>
                    </div>
                </div>
                <div class="grid md:grid-cols-1 lg:grid-cols-2 gap-12 animate-slideIn">
                    <div class="col-span-2 sm:col-span-1">
                        <i class="fa fa-check text-sky-700" aria-hidden="true"></i>
                        <p>Improve your performance and drive higher sales</p>
                    </div>
                    <div class="col-span-2 sm:col-span-1">
                        <i class="fa fa-check text-sky-700" aria-hidden="true"></i>
                        <p>Crush your competition with the tools and resources you need to stay ahead your competitors</p>
                    </div>
                    <div>
                        <i class="fa fa-check text-sky-700" aria-hidden="true"></i>
                        <p>Scale your business with proven tactics and tips from our expert-led webinars</p>
                    </div>
                    <div>
                        <i class="fa fa-check text-sky-700" aria-hidden="true"></i>
                        <p>Discover our Ad-Lane focusing on how you build your product ad to drive top ranks</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- SEE PRICING -->
    <div class="content w-full sm:w-2/3 m-auto bg-sky-200 mt-48 py-24">
        <div class="flex flex-row md:w-2/3 lg:w-2/3 m-auto my-24 p-6 sm:p-0">
            <div class="w-1/2 border-r border-blue-500 flex flex-col space-y-8">
                <p class="text-2xl sm:text-3xl font-bold">Grow your E-commerce business faster & efficiently with Columbus 17</p>
                <div class="flex w-full lg:w-1/2 text-white text-center">
                    <a href="{{ url('prices') }}" type="button" class="bg-sky-500 w-full py-2 rounded-md font-bold hover:bg-sky-600">See Our Plans and Pricing</a>
                </div>
            </div>
            <div class="flex flex-col space-y-4 ml-12">
                <div class="flex flex-row items-center space-x-4">
                    <i class="fa fa-level-up text-blue-500" aria-hidden="true"></i>
                    <p>Improve sales & product rank</p>
                </div>
                <div class="flex flex-row items-center space-x-4">
                    <i class="fa fa-level-up text-blue-500" aria-hidden="true"></i>
                    <p>Increase market share​</p>
                </div>
                <div class="flex flex-row items-center space-x-4">
                    <i class="fa fa-level-up text-blue-500" aria-hidden="true"></i>
                    <p>Reduce manual workload</p>
                </div>
                <div class="flex flex-row items-center space-x-4">
                    <i class="fa fa-level-up text-blue-500" aria-hidden="true"></i>
                    <p>Be aware of automization</p>
                </div>
            </div>
        </div>
    </div>
    <div class="content w-2/3 m-auto mt-24">
        <div class="pricing-content-above-wrapper flex flex-col items-center mt-48 animate-content space-y-24">
            <div class="pricing-content-above flex flex-col space-y-4 max-w-screen-md">
                <p class="text-4xl sm:text-6xl font-bold text-center">Our Partners</p>
            </div>
        </div>
        <div class="content-above flex flex-col items-center md:px-20 space-y-4 mt-8">
            <a href="https://hexprep.com"><img loading="lazy" width="150" height="150" alt="hexprep" src="{{ asset('storage/hexprep.webp') }}"></a>
        </div>
    </div>

    <!-- FAQ -->
    <div class="container w-2/3 m-auto mt-24">
        <div class="faq_container">
            <faq-dropdown v-if="isFaqDropdownOpenning" slug="home"/>
        </div>
    </div>

    <bookmark/>

@endsection

<style>
@keyframes slide-left {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-left {
  animation: slide-left 1s ease-in-out forwards;
}

/* Staggered Delays */
.delay-100 { animation-delay: 0.2s; }
.delay-200 { animation-delay: 0.6s; }
.delay-300 { animation-delay: 1.2s; }
</style>