@include('admin.partials.header')
@include('admin.partials.sidebar')
@include('admin.partials.topbar')
@include('admin.partials.management-styles')

<style>
    .campaign-card { background: #fff; border: 1px solid var(--color-outline-variant); border-radius: 16px; box-shadow: 0 4px 20px rgba(36, 59, 83, .05); height: 100%; padding: 22px; }
    .campaign-icon { align-items: center; background: var(--color-surface-container-low); border-radius: 12px; color: var(--color-primary); display: flex; height: 44px; justify-content: center; width: 44px; }
    .campaign-title { color: var(--color-on-surface); font-size: 16px; font-weight: 700; margin: 18px 0 4px; }
    .campaign-progress { background: var(--color-surface-container); border-radius: 999px; height: 7px; overflow: hidden; }
    .campaign-progress span { background: var(--color-primary); border-radius: inherit; display: block; height: 100%; }
    .channel-row + .channel-row { border-top: 1px solid var(--color-surface-container); }
    .channel-row { align-items: center; display: grid; gap: 16px; grid-template-columns: minmax(140px, 1fr) 1fr 80px; padding: 16px 0; }
    .channel-bar { background: var(--color-surface-container); border-radius: 999px; height: 8px; overflow: hidden; }
    .channel-bar span { background: var(--color-secondary); border-radius: inherit; display: block; height: 100%; }
    @media (max-width: 575px) { .channel-row { grid-template-columns: 1fr; gap: 8px; } }
</style>

<main id="main" class="pt-4">
    <section class="d-flex flex-column flex-md-row align-items-md-end justify-content-between gap-3 mb-4">
        <div>
            <div class="admin-breadcrumb"><span>Admin</span><span class="material-symbols-outlined" style="font-size:16px;">chevron_right</span><span class="active">Marketing</span></div>
            <h2 class="admin-page-title">Marketing Center</h2>
            <p class="admin-page-subtitle">Plan campaigns, measure engagement, and grow marketplace activity.</p>
        </div>
        <div class="d-flex gap-2"><button class="btn-outline-neutral"><span class="material-symbols-outlined" style="font-size:18px;">calendar_today</span> October</button><button class="btn-primary-action"><span class="material-symbols-outlined" style="font-size:18px;">add</span> New Campaign</button></div>
    </section>

    <section class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">campaign</span></div><p class="admin-stat-value">18</p><p class="admin-stat-label">Active campaigns</p></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">send</span></div><p class="admin-stat-value">24.5k</p><p class="admin-stat-label">Messages delivered</p></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">ads_click</span></div><p class="admin-stat-value">8.4%</p><p class="admin-stat-label">Average click rate</p></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">group_add</span></div><p class="admin-stat-value">1,284</p><p class="admin-stat-label">Customers converted</p></div></div>
    </section>

    <section class="d-flex justify-content-between align-items-center mb-3">
        <div><p class="admin-kicker mb-1">Campaigns</p><h3 class="admin-card-title">Current Promotions</h3></div>
        <button class="btn-outline-neutral"><span class="material-symbols-outlined" style="font-size:18px;">tune</span> Filter</button>
    </section>

    <section class="row g-3 mb-4">
        <div class="col-12 col-lg-4"><article class="campaign-card"><div class="d-flex justify-content-between"><div class="campaign-icon"><span class="material-symbols-outlined">apartment</span></div><span class="admin-status success">Active</span></div><h4 class="campaign-title">Find Your Next Space</h4><p class="admin-meta">Rental discovery · Email + WhatsApp</p><div class="d-flex justify-content-between admin-meta mt-4 mb-2"><span>18,420 reached</span><span>72%</span></div><div class="campaign-progress"><span style="width:72%;"></span></div><p class="admin-meta mt-3">Ends Nov 04, 2024</p></article></div>
        <div class="col-12 col-lg-4"><article class="campaign-card"><div class="d-flex justify-content-between"><div class="campaign-icon"><span class="material-symbols-outlined">work</span></div><span class="admin-status success">Active</span></div><h4 class="campaign-title">Career Week Spotlight</h4><p class="admin-meta">Jobs promotion · Push notification</p><div class="d-flex justify-content-between admin-meta mt-4 mb-2"><span>12,840 reached</span><span>58%</span></div><div class="campaign-progress"><span style="width:58%;"></span></div><p class="admin-meta mt-3">Ends Oct 30, 2024</p></article></div>
        <div class="col-12 col-lg-4"><article class="campaign-card"><div class="d-flex justify-content-between"><div class="campaign-icon"><span class="material-symbols-outlined">construction</span></div><span class="admin-status warning">Scheduled</span></div><h4 class="campaign-title">Trusted Services Sale</h4><p class="admin-meta">Home services · Email</p><div class="d-flex justify-content-between admin-meta mt-4 mb-2"><span>0 reached</span><span>0%</span></div><div class="campaign-progress"><span style="width:0%;"></span></div><p class="admin-meta mt-3">Starts Nov 01, 2024</p></article></div>
    </section>

    <section class="row g-3">
        <div class="col-12 col-xl-7">
            <div class="admin-card h-100"><div class="admin-card-body"><p class="admin-kicker mb-1">Performance</p><h3 class="admin-card-title mb-3">Channel Engagement</h3>
                <div class="channel-row"><div><p class="admin-name">WhatsApp</p><p class="admin-meta">14,820 delivered</p></div><div class="channel-bar"><span style="width:82%;"></span></div><strong>82%</strong></div>
                <div class="channel-row"><div><p class="admin-name">Email</p><p class="admin-meta">9,680 delivered</p></div><div class="channel-bar"><span style="width:64%;"></span></div><strong>64%</strong></div>
                <div class="channel-row"><div><p class="admin-name">Push Notifications</p><p class="admin-meta">7,240 delivered</p></div><div class="channel-bar"><span style="width:49%;"></span></div><strong>49%</strong></div>
            </div></div>
        </div>
        <div class="col-12 col-xl-5">
            <div class="admin-card h-100"><div class="admin-card-body"><p class="admin-kicker mb-1">Audience</p><h3 class="admin-card-title mb-4">Top Segments</h3>
                <div class="d-flex justify-content-between align-items-center mb-3"><div><p class="admin-name">Rental Seekers</p><p class="admin-meta">Actively browsing spaces</p></div><span class="admin-chip">4,842</span></div>
                <div class="d-flex justify-content-between align-items-center mb-3"><div><p class="admin-name">Job Hunters</p><p class="admin-meta">Viewed jobs this month</p></div><span class="admin-chip">3,190</span></div>
                <div class="d-flex justify-content-between align-items-center"><div><p class="admin-name">Repeat Customers</p><p class="admin-meta">Completed 3+ orders</p></div><span class="admin-chip">1,284</span></div>
            </div></div>
        </div>
    </section>
</main>

@include('admin.partials.footer')