@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 Client Portal
                </h1>
                <p class="mt-6 text-lg text-gray-600 leading-relaxed">
                    The primary management interface and automation engine for the Agency Pulse Invoice ecosystem —
                    introducing centralized client management, automated communication workflows, and advanced business analytics.
                </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-client-portal-plugin-384x384.png') }}"
                     alt="Agency Pulse Client Portal 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">

        {{-- Client & Relationship 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> Client &amp; Relationship Management
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Unified Client Database</strong>: A central location to store and manage long-term client information (names, emails, business details) separate from individual invoices.</li>
                <li><strong>Intelligent Invoice Linking</strong>: Seamlessly connect invoices to portal clients to enable longitudinal tracking, historical reporting, and automated data retrieval.</li>
                <li><strong>AJAX Client Search</strong>: A high-performance lookup system integrated directly into the core Invoice Builder for rapid client assignment.</li>
                <li><strong>Detailed Client Profiles</strong>: Maintain comprehensive records for each client, including contact information, billing preferences, and a consolidated view of historical invoice activity.</li>
                <li><strong>Workflow Integration</strong>: Injects client-selection and lookup controls directly into the Agency Pulse Invoice editor to streamline the document creation process.</li>
            </ul>
        </div>

        {{-- Automation & "Missions" Hub --}}
        <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> Automation &amp; &ldquo;Missions&rdquo; Hub
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li class="developer"><strong>External Service Bridge</strong>: Connects local invoice data with an external &ldquo;Mission Server&rdquo; to orchestrate complex, multi-step automated workflows.</li>
                <li class="developer"><strong>Enriched Mission Tracking</strong>: Automatically synchronizes remote task IDs with local metadata, providing a transparent map of all automated interactions for every invoice.</li>
                <li><strong>Intelligent Reminder Scheduling</strong>: Calculates optimal &ldquo;Next Send&rdquo; timestamps based on invoice due dates and customizable business rules for pre-due reminders and post-due collections.</li>
                <li><strong>Two-Way Payment Status Synchronization</strong>: Real-time integration ensures that automated collection missions are instantly cancelled the moment a local invoice is marked as &ldquo;Paid.&rdquo;</li>
                <li><strong>Phase-Based Communication Logic</strong>: Distinct logic paths and templates for &ldquo;Reminder&rdquo; (pre-due) and &ldquo;Overdue&rdquo; (past-due) communication phases.</li>
                <li><strong>Safety UI Layer</strong>: Displays live automation statuses and upcoming &ldquo;Next Send&rdquo; dates within the WordPress admin to provide administrators with full visibility.</li>
            </ul>
        </div>

        {{-- Email Relay & Communication 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> Email Relay &amp; Communication Engine
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Professional Email Compositor</strong>: A specialized service for generating high-quality, responsive HTML emails designed for maximum deliverability and impact.</li>
                <li><strong>Automated Relay Handlers</strong>: Listen for external triggers to automatically coordinate the composition and delivery of reminders and overdue notices.</li>
                <li><strong>Manual Payment Reminders</strong>: Capability for administrators to manually trigger automated payment reminders directly from the invoice dashboard via AJAX.</li>
                <li><strong>Dynamic Tag Substitution</strong>: A robust placeholder engine that personalizes messages with dynamic data such as <code class="bg-gray-100 px-1 rounded text-xs">{customer_name}</code>, <code class="bg-gray-100 px-1 rounded text-xs">{amount_due}</code>, and <code class="bg-gray-100 px-1 rounded text-xs">{view_invoice_link}</code>.</li>
                <li><strong>Sanitized Dispatching</strong>: Built-in validation ensures that automated communications are never sent for invoices that are already paid, invalid, or archived.</li>
            </ul>
        </div>

        {{-- Centralized Dashboard & Analytics --}}
        <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> Centralized Dashboard &amp; Analytics
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Unified Command Center</strong>: A purpose-built dashboard providing a high-level summary of all invoicing and collection activity across the entire system.</li>
                <li><strong>Modular Tabbed Interface</strong>: Highly organized admin views specifically designed for Overview, Clients, Mission Management, and Global Settings.</li>
                <li><strong>Collection Velocity Monitoring</strong>: Track the effectiveness of automated missions and monitor the real-time collection status of all outstanding debt.</li>
                <li><strong>Business Reporting</strong>: Provides deep insights into revenue trends and client billing history through specialized data aggregation services.</li>
            </ul>
        </div>

        {{-- Administrative 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 Experience
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Optimized Workspace Layout</strong>: Automatically reorganizes the &ldquo;Invoices&rdquo; sidebar menu to prioritize high-frequency tools like the Dashboard and Client List.</li>
                <li class="developer"><strong>AJAX-Powered Management Tables</strong>: Custom list tables designed to manage large volumes of clients and mission data with instant filtering and search capabilities.</li>
                <li><strong>Global Settings Integration</strong>: Extends the core Agency Pulse settings interface with a dedicated Portal configuration tab for unified management.</li>
                <li><strong>Permission-Based Controls</strong>: Secure access management ensures that sensitive financial reports and communication triggers are restricted to authorized personnel.</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