<x-mb-layout pageTitle="Home">
    @push('styles')
        <link href="{{ asset('assets/mb/css/creatives.css') }}?v={{ filemtime(public_path('assets/mb/css/creatives.css')) }}" rel="stylesheet">
    @endpush

    <div class="mb-page">
        <div class="mb-page-inner">
            <div class="mb-page-head">
                <div>
                    <h1 class="mb-page-title">{{ __('Home') }}</h1>
                    <p class="mb-page-sub">{{ __('Overview of your marketing campaigns, creatives, and landing pages') }}</p>
                </div>
            </div>

            <div class="row g-4 mt-1">
                <div class="col-md-6 col-lg-3">
                    <div class="mb-card p-4 h-100 d-flex flex-column">
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <span class="mb-stat-icon is-ok"><i class="bi bi-chat-dots"></i></span>
                            <h2 class="h5 mb-0 fw-semibold">{{ __('Campaigns') }}</h2>
                        </div>
                        <p class="text-muted small flex-grow-1">
                            {{ __('Attach creatives and ad copy to a campaign and launch it to a platform.') }}
                        </p>
                        <a href="{{ route('chat.show') }}" class="mb-btn-primary justify-content-center mt-auto" wire:navigate>
                            {{ __('Go to Campaign Chat') }}
                        </a>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="mb-card p-4 h-100 d-flex flex-column">
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <span class="mb-stat-icon is-all"><i class="bi bi-palette"></i></span>
                            <h2 class="h5 mb-0 fw-semibold">{{ __('Creatives') }}</h2>
                        </div>
                        <p class="text-muted small flex-grow-1">
                            {{ __('Generate image and video ad creatives from a prompt or product URL.') }}
                        </p>
                        <a href="{{ route('creatives.index') }}" class="mb-btn-primary justify-content-center mt-auto" wire:navigate>
                            {{ __('Open Creatives') }}
                        </a>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="mb-card p-4 h-100 d-flex flex-column">
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <span class="mb-stat-icon is-run"><i class="bi bi-layout-text-window-reverse"></i></span>
                            <h2 class="h5 mb-0 fw-semibold">{{ __('Landing Pages') }}</h2>
                        </div>
                        <p class="text-muted small flex-grow-1">
                            {{ __('Manage catalog and prompt landing pages from one place.') }}
                        </p>
                        <a href="{{ route('landing-pages.index') }}" class="mb-btn-primary justify-content-center mt-auto" wire:navigate>
                            {{ __('Open Landing Pages') }}
                        </a>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="mb-card p-4 h-100 d-flex flex-column">
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <span class="mb-stat-icon" style="background: var(--mb-surface-2); color: var(--mb-text-muted);"><i class="bi bi-file-earmark-text"></i></span>
                            <h2 class="h5 mb-0 fw-semibold text-muted">{{ __('Ad Copy') }}</h2>
                        </div>
                        <p class="text-muted small flex-grow-1">
                            {{ __('Generate ad copy variations from a prompt or product URL.') }}
                        </p>
                        <button class="mb-btn-secondary justify-content-center mt-auto" disabled>
                            {{ __('Coming soon') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-mb-layout>
