@extends('layouts.app')

@section('title', 'Smart Search for Amazon Success | Black Box | Columbus 17')
@section('meta_description', 'Discover profitable Amazon products with Columbus17’s Product Research page. Use Black Box to filter, analyze, and find winning products fast.')
@section('content')
<div class="content w-full m-auto mt-24 animate-content">
    <div class="content-above md:px-36 flex flex-col space-y-4 mt-48">
        <p class="text-4xl sm:text-6xl font-bold text-center">Product Research</p>
        <p class="text-xl sm:text-2xl text-center">Unlock Your Next Bestselling Product — Faster, Smarter, Better.</p>
    </div>
    <div class="content w-2/3 m-auto mt-24 animate-content">
        <div class="content-bottom">
            <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 class="leading-8">
                        <p class="font-semibold text-gray-700">What Advantages Our Sofware Brings</p>
                        <p class="text-3xl font-bold">Find high-demand, low-competition products using real-time data and AI-powered insights</p>
                        <p class="mt-4 font-medium">Discover Winning Products in Minutes — Not Hours.</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>Know which products sell before you invest</p>
                    </div>
                    <div class="col-span-2 sm:col-span-1">
                        <i class="fa fa-check text-sky-700" aria-hidden="true"></i>
                        <p>Ride the wave of demand as it happens worldwide</p>
                    </div>
                    <div class="col-span-2 sm:col-span-1">
                        <i class="fa fa-check text-sky-700" aria-hidden="true"></i>
                        <p>Discover gaps your competitors missed</p>
                    </div>
                    <div>
                        <i class="fa fa-check text-sky-700" aria-hidden="true"></i>
                        <p>AI ranks products by profit potential & market fit</p>
                    </div>
                    <div>
                        <i class="fa fa-check text-sky-700" aria-hidden="true"></i>
                        <p>Research, analyze, and validate in one place</p>
                    </div>
                    <div>
                        <i class="fa fa-check text-sky-700" aria-hidden="true"></i>
                        <p>Spot hot products before they blow up</p>
                    </div>
                    <div>
                        <i class="fa fa-check text-sky-700" aria-hidden="true"></i>
                        <p>See how competitors stack up</p>
                    </div>
                    <div>
                        <i class="fa fa-check text-sky-700" aria-hidden="true"></i>
                        <p>Real-time updates so you stay ahead</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content-above md:px-36 flex flex-col space-y-4 mt-48">
        <p class="text-4xl sm:text-6xl font-bold text-center">How BlackBox Works</p>
    </div>
    <div class="content w-2/3 m-auto mt-24 animate-content">
        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0">
            <!-- Step 1 -->
            <div class="flex items-start space-x-2">
                <div class="flex flex-col items-center">
                    <div class="flex items-center justify-center w-12 h-12 bg-blue-600 text-white rounded-full text-lg font-bold mb-2">
                        1
                    </div>
                </div>
                <div>
                <h3 class="flex items-center text-xl font-semibold mb-2 space-x-3">
                    <i class="fa fa-search text-blue-400" aria-hidden="true"></i>
                    <span>Search what you’re curious about</span>
                </h3>
                <p class="text-gray-700 max-w-xl">
                    Use keywords, categories, and over 20 powerful filters to narrow down your search and find exactly the products you want to explore.
                </p>
                </div>
            </div>

            <!-- Step 2 -->
            <div class="flex items-start space-x-2">
                <div class="flex flex-col items-center">
                <div class="flex items-center justify-center w-12 h-12 bg-blue-600 text-white rounded-full text-lg font-bold mb-2">
                    2
                </div>
                <div class="w-px bg-blue-300 flex-1"></div>
                </div>
                <div>
                <h3 class="flex items-center text-xl font-semibold mb-2 space-x-3">
                    <i class="fa fa-bar-chart text-blue-400" aria-hidden="true"></i>
                    <span>See clear data and recommendations</span>
                </h3>
                <p class="text-gray-700 max-w-xl">
                    Quickly dive into sales trends, competition stats, and keyword insights to spot winning products.
                </p>
                </div>
            </div>

            <!-- Step 3 -->
            <div class="flex items-start space-x-2">
                <div class="flex flex-col items-center">
                <div class="flex items-center justify-center w-12 h-12 bg-blue-600 text-white rounded-full text-lg font-bold mb-2">
                    3
                </div>
                </div>
                <div>
                <h3 class="flex items-center text-xl font-semibold mb-2 space-x-3">
                    <i class="fa fa-check text-blue-400" aria-hidden="true"></i>
                    <span>Pick your winner and get selling!</span>
                </h3>
                <p class="text-gray-700 max-w-xl">
                    Use the powerful insights to confidently select and launch your next bestseller.
                </p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection