@extends('layouts.app')

@section('content')

{{-- Hero --}}
<section class="bg-white">
    <div class="max-w-7xl mx-auto px-6 pt-14 pb-16">
        <div class="grid lg:grid-cols-2 gap-12 items-start">
            <div>
                <span class="inline-block mb-4 text-sm font-semibold text-indigo-600 uppercase tracking-wide">Add-On Plugin</span>
                <h1 class="text-4xl md:text-5xl font-semibold tracking-tight leading-tight text-gray-900">
                    Agency Pulse Products &amp; Shopping Cart
                </h1>
                <p class="mt-6 text-lg text-gray-600 leading-relaxed">
                    Expands the Agency Pulse Invoice ecosystem into a full-scale e-commerce platform — adding product
                    management, a modern shopping cart, and a secure checkout-to-invoice workflow.
                </p>
                <div class="mt-8">
                    <a href="/products" class="px-6 py-3 bg-gray-100 text-gray-800 rounded-lg font-medium hover:bg-gray-200 transition">
                        ← All Add-Ons
                    </a>
                </div>
            </div>
            <div class="flex items-center justify-center">
                <img src="{{ asset('images/boxes/invoice-products-shopping-cart-384x384.png') }}"
                     alt="Agency Pulse Products &amp; Shopping Cart Plugin"
                     class="w-full max-w-sm rounded-xl shadow-sm">
            </div>
        </div>
    </div>
</section>

{{-- Feature Groups --}}
<section class="bg-gray-50 border-t border-gray-200">
    <div class="max-w-7xl mx-auto px-6 py-16 space-y-8">

        {{-- Unified Product Management --}}
        <div class="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition">
            <h2 class="text-xl font-semibold text-gray-900 mb-5 flex items-center gap-2">
                <span>🛍️</span> Unified Product Management
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li class="developer"><strong>Custom Product Ecosystem</strong>: A dedicated Custom Post Type (<code class="bg-gray-100 px-1 rounded text-xs">agency_pulse_product</code>) for managing physical and digital business offerings within the WordPress dashboard.</li>
                <li><strong>Advanced Product Metadata</strong>: Support for variable pricing, SKU management, inventory tracking, and tax-exempt status on a per-product basis.</li>
                <li><strong>Categories &amp; Taxonomies</strong>: Advanced organization using a custom &ldquo;Product Category&rdquo; taxonomy for logical grouping and efficient frontend filtering.</li>
                <li><strong>Gutenberg Block Integration</strong>: A specialized suite of custom blocks for displaying product cards, category grids, and featured items on any page or post.</li>
            </ul>
        </div>

        {{-- Flexible Shopping Cart & Checkout --}}
        <div class="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition">
            <h2 class="text-xl font-semibold text-gray-900 mb-5 flex items-center gap-2">
                <span>🛒</span> Flexible Shopping Cart &amp; Checkout
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li class="developer"><strong>Session-Based Cart Engine</strong>: A robust internal service that manages item persistence, quantity updates, and real-time subtotal/tax calculations.</li>
                <li><strong>AJAX-Powered Interactions</strong>: High-performance &ldquo;Add to Cart,&rdquo; &ldquo;Update,&rdquo; and &ldquo;Remove&rdquo; actions that provide a modern e-commerce experience without page reloads.</li>
                <li><strong>Integrated Checkout Flow</strong>: A streamlined, secure checkout process that seamlessly converts cart items into formal business orders and invoices.</li>
                <li><strong>User &amp; Client Synchronization</strong>: Automatically links checkout data to existing Portal clients or creates new localized metadata for guest purchasers.</li>
            </ul>
        </div>

        {{-- Invoice & Order Integration --}}
        <div class="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition">
            <h2 class="text-xl font-semibold text-gray-900 mb-5 flex items-center gap-2">
                <span>🧾</span> Invoice &amp; Order Integration
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Order-to-Invoice Automation</strong>: Automatically generates a full Agency Pulse Invoice upon checkout completion, ensuring a formal billing record is created for every sale.</li>
                <li><strong>Unified Payment Processing</strong>: Deeply integrates with the core Agency Pulse payment gateway system to handle real-time payment finalization for both products and services.</li>
                <li><strong>Product Lookup in Builder</strong>: Injects a powerful &ldquo;Search Products&rdquo; utility directly into the standard Invoice Builder for rapid line-item injection from the product database.</li>
                <li class="developer"><strong>Order Lifecycle Management</strong>: A dedicated <code class="bg-gray-100 px-1 rounded text-xs">agency_pulse_order</code> system for tracking order statuses from &ldquo;Pending Checkout&rdquo; to &ldquo;Paid&rdquo; and &ldquo;Fulfilled.&rdquo;</li>
            </ul>
        </div>

        {{-- Digital Deliverables System --}}
        <div class="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition">
            <h2 class="text-xl font-semibold text-gray-900 mb-5 flex items-center gap-2">
                <span>💾</span> Digital Deliverables System
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Digital Product Support</strong>: Specialized logic for identifying and handling digital assets, enabling secure delivery of software, documents, or media.</li>
                <li><strong>Post-Payment Access Control</strong>: Automatically injects secure download buttons into the public invoice view and client emails once a payment has been verified.</li>
                <li class="developer"><strong>Secure File Routing</strong>: Protected download handlers ensure that premium digital content is only accessible to authorized buyers after a successful transaction.</li>
                <li><strong>Unified Asset Lists</strong>: Seamlessly integrates purchased digital products into the standard invoice file attachments table for a professional client experience.</li>
            </ul>
        </div>

        {{-- Advanced Coupon & Discount Engine --}}
        <div class="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition">
            <h2 class="text-xl font-semibold text-gray-900 mb-5 flex items-center gap-2">
                <span>🎟️</span> Advanced Coupon &amp; Discount Engine <span class="ml-2 text-xs font-medium text-indigo-600 bg-indigo-50 border border-indigo-200 px-2 py-0.5 rounded-full">Pro</span>
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Global Discount Management</strong>: Create and manage highly customizable coupons, including fixed-amount and percentage-based discounts.</li>
                <li><strong>Granular Usage Restrictions</strong>: Limit coupon validity to specific products, certain categories, or individual high-value clients within the Portal.</li>
                <li><strong>Real-Time Validation Engine</strong>: AJAX-powered verification triggers during checkout to provide instant total updates and interactive feedback to customers.</li>
                <li><strong>Performance Tracking</strong>: Monitor coupon usage rates and redemption history across the entire e-commerce ecosystem.</li>
            </ul>
        </div>

        {{-- Administrative & Store Experience --}}
        <div class="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition">
            <h2 class="text-xl font-semibold text-gray-900 mb-5 flex items-center gap-2">
                <span>🎨</span> Administrative &amp; Store Experience
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Streamlined Workspace</strong>: Automatically reorganizes the WordPress sidebar to keep Products, Orders, and Coupons grouped logically under the primary Invoice menu.</li>
                <li><strong>Enhanced Admin Columns</strong>: Customized list views for products and orders featuring instant price previews, status badges, and quick-management links.</li>
                <li><strong>Unified Settings Hub</strong>: Injects a dedicated &ldquo;Shopping Cart&rdquo; tab into the core settings interface for centralized control over store behavior.</li>
            </ul>
        </div>

    </div>
</section>

{{-- Bottom CTA --}}
@if($product ?? null)
<section class="bg-white border-t border-gray-200">
    <div class="max-w-lg mx-auto px-6 py-16">
        <div class="bg-white border border-gray-200 rounded-xl p-8 shadow-sm flex flex-col gap-5">
            <div class="text-center">
                <h2 class="text-2xl font-semibold text-gray-900">Get {{ $product->name }}</h2>
                <p class="mt-2 text-gray-500 text-sm">Unlock all the features above for your agency.</p>
            </div>
            <div class="flex justify-between items-center">
                <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded">
                    ${{ number_format($product->price, 2) }} / monthly
                </span>
                <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded">
                    ${{ number_format($product->price * 10, 2) }} / yearly
                </span>
            </div>
            <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-3 px-4 rounded-lg transition text-base">
                    Add to Cart
                </button>
            </form>
        </div>
    </div>
</section>
@endif

@endsection