@extends('layouts.app')

@section('content')
<section class="bg-white">
    <div class="max-w-7xl mx-auto px-6 pt-10 pb-24 flex flex-col justify-center">
        <!-- Hero -->
        <div class="grid lg:grid-cols-2 gap-10 items-stretch">
            <!-- Left Column (Professional + Founder) -->
            <div class="flex flex-col gap-6">
                <!-- Professional Section -->
                    <h1 class="text-4xl md:text-5xl font-semibold tracking-tight leading-tight">
                        Best FREE Professional Invoice Plugin for WordPress
                    </h1>

                    <!-- Important notice: make this stand out -->
                    <div class="p-4 rounded-lg bg-indigo-50 border-l-4 border-indigo-600 shadow-md flex items-start gap-3 animate-[fadeIn_300ms_ease]">
                        <svg class="w-6 h-6 text-indigo-600 flex-shrink-0 mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M18 10c0 4.418-3.582 8-8 8s-8-3.582-8-8 3.582-8 8-8 8 3.582 8 8zm-9-3a1 1 0 112 0v4a1 1 0 11-2 0V7zm1 8a1.25 1.25 0 100-2.5 1.25 1.25 0 000 2.5z" clip-rule="evenodd" />
                        </svg>
                        <p class="text-indigo-900 font-semibold leading-tight">
                            This is not crippled software — the free plugin is fully functional with everything necessary for your agency billing and payment processes.
                        </p>
                    </div>
                    <p class="text-lg text-gray-600 leading-relaxed">Built for real client management tasks every agency performs regularly.</p>
                    <p class="text-lg text-gray-600 leading-relaxed">Create invoices, send, track, and accept payments all in one place.</p>
                    <p class="text-lg text-gray-600 leading-relaxed">Add powerful extra features as you find the need for them.</p>
                    <p class="text-lg text-gray-600 leading-relaxed">Add shopping cart and product listings to extend your business.</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="/download" class="px-6 py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition">
                            Download the Free Invoicing Plugin
                        </a>
                        <a href="/products" class="px-6 py-3 bg-gray-100 text-gray-800 rounded-lg font-medium hover:bg-gray-200 transition">
                            View All Add-Ons
                        </a>
                    </div>
                    <!-- Trust Points -->
                    <div class="mt-2 grid grid-cols-2 gap-6 text-sm text-gray-600">
                        <div>✔ Fully usable free software for WordPress</div>
                        <div>✔ Built for real-world agency use</div>
                        <div>✔ Accept partial and full gateway payment</div>
                        <div>✔ Secure and automation ready</div>
                    </div>
                <!-- Founder Card (below professional section) -->
                <div class="bg-gray-50 border border-gray-200 rounded-xl p-6 flex items-center gap-5 w-full max-w-md">
                    <img
                        src="https://via.placeholder.com/80x80.png?text=Founder"
                        alt="Founder"
                        class="w-20 h-20 rounded-full object-cover"
                    >
                    <div>
                        <div class="font-medium text-gray-900">
                            Designed by Agency Owners
                        </div>
                        <p class="text-sm text-gray-600 mt-1">
                            Built upon years of real client billing experience to help you run your business.
                        </p>
                    </div>
                </div>
            </div>
            <!-- Right Column (Video) -->
            <div class="flex items-center justify-center">
                <div class="rounded-xl overflow-hidden shadow-lg border border-gray-200 bg-black flex items-center justify-center h-full">
                    <video controls poster="https://via.placeholder.com/800x450.png?text=Demo+Video" class="block w-full h-full object-cover">
                        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Add-On Section -->
<section class="bg-gray-50 border-t border-gray-200">
    <div class="max-w-7xl mx-auto px-6 py-24">
        <div class="text-center max-w-3xl mx-auto">
            <h2 class="text-3xl font-semibold">
                Powerful Add-Ons When You Need Them
            </h2>
            <p class="mt-4 text-gray-600">
                Start free. Expand when your agency demands more control, automation, and protection.
            </p>
        </div>
        <div class="mt-16 gap-8">
                <div class="mt-16 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
                    @php $freeAvail = $productAvailability['free-invoice'] ?? 'open'; @endphp
                    @if(! in_array($freeAvail, ['closed', 'auth']))
                            <div class="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition flex flex-col justify-between {{ $freeAvail === 'disabled' ? 'opacity-50' : '' }}">
                                <div>
                                    <h3 class="text-lg font-medium text-gray-900 mb-2">{{ $product->name ?? 'Free Agency Invoice Plugin' }}</h3>
                                    <div class="text-gray-700 mb-4 text-sm leading-relaxed [&_ul]:list-disc [&_ul]:ml-4 [&_ol]:list-decimal [&_ol]:ml-4">
                                        <ul style="padding-left:20px;margin-left:0px;list-style: circle;">
                                            <li> Full invoice building and auto delivery.</li>
                                            <li> Partial and full gateway payments.</li>
                                            <li> Dashboard and invoice management tools.</li>
                                            <li> Custom invoice templating.</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="mt-auto flex flex-col gap-2">
                                    <div class="flex justify-between items-center mb-2">
                                        <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded">
                                            ${{ number_format(($product->price ?? 0) * 10, 2) }} / yearly
                                        </span>
                                        <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded">
                                            ${{ number_format($product->price ?? 0, 2) }} / monthly
                                        </span>
                                    </div>
                                    @if($freeAvail === 'open')
                                    <!-- Free plugin: start download instead of adding to cart -->
                                    <a href="/download" id="downloadFreePlugin" class="w-full inline-block text-center bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded transition" download>
                                        Download Free Plugin
                                    </a>
                                    @else
                                    <span class="w-full inline-block text-center bg-gray-400 text-white font-semibold py-2 px-4 rounded cursor-not-allowed">Not Available</span>
                                    @endif
                                </div>
                            </div>
                    @endif
                    @forelse($products ?? [] as $product)
                        @if($product)
                        @php $avail = $productAvailability[$product->sku] ?? 'open'; @endphp
                        @if(in_array($avail, ['closed', 'auth'])) @continue @endif
                            <div class="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition flex flex-col justify-between {{ $avail === 'disabled' ? 'opacity-50' : '' }}">
                                <div>
                                    <h3 class="text-lg font-medium text-gray-900 mb-2">{{ $product->name ?? 'Unnamed Product' }}</h3>
                                    <div class="text-gray-700 mb-4 text-sm leading-relaxed [&_ul]:list-disc [&_ul]:ml-4 [&_ol]:list-decimal [&_ol]:ml-4">
                                        {!! $product->description ?? '' !!}
                                    </div>
                                </div>
                                <div class="mt-auto flex flex-col gap-2">
                                    <div class="flex justify-between items-center mb-2">
                                        <span style=";" class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded">
                                            ${{ number_format(($product->price ?? 0) * 10, 2) }} / yearly
                                        </span>
                                        <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded">
                                            ${{ number_format($product->price ?? 0, 2) }} / monthly
                                        </span>
                                    </div>
                                    @if($avail === 'open')
                                    <form method="POST" action="{{ route('cart.add') }}" class="js-add-to-cart">
                                        @csrf
                                        <input type="hidden" name="product_id" value="{{ $product->id ?? '' }}">
                                        <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded transition">Add to Cart</button>
                                    </form>
                                    @else
                                    <span class="w-full inline-block text-center bg-gray-400 text-white font-semibold py-2 px-4 rounded cursor-not-allowed">Not Available</span>
                                    @endif
                                </div>
                            </div>
                        @endif
                    @empty
                        <p class="col-span-full text-center text-gray-500">No products available.</p>
                    @endforelse
                </div>
        </div>
        <!-- CTA -->
        <div class="mt-20 text-center">
            <a href="#" class="px-8 py-4 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition">
                Get Started Free
            </a>
        </div>
    </div>
</section>
@endsection