@extends('layouts.master')

@section('head')
    <style>
        /* ============================================================
           Pricing plans — v2 aesthetic
           ============================================================ */

        .dashboard-v2 {
            --dv-bg: #f6f7f9;
            --dv-surface: #ffffff;
            --dv-ink: inherit;
            --dv-ink-soft: inherit;
            --dv-muted: #6b7280;
            --dv-border: #e5e7eb;
            --dv-border-soft: #eef0f3;
            --dv-accent: #66bf97;
            --dv-accent-strong: #2f7a55;
            --dv-accent-soft: rgba(102, 191, 151, .12);
            --dv-radius: 16px;
            --dv-radius-sm: 10px;
            --dv-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .04);
            --dv-shadow-lift: 0 8px 24px rgba(15, 23, 42, .08);
            --dv-shadow-feature: 0 16px 40px -16px rgba(102, 191, 151, .35), 0 4px 14px -8px rgba(15, 23, 42, .12);
            background-color: var(--dv-bg);
        }
        .dashboard-v2 a { color: var(--dv-accent-strong); text-decoration: none; }
        .dashboard-v2 a:hover { color: var(--dv-accent); }

        /* Welcome strip */
        .dv-welcome {
            padding: 32px 0 28px;
            background:
                radial-gradient(900px 280px at 50% 0%, var(--dv-accent-soft), transparent 60%),
                linear-gradient(180deg, #ffffff 0%, var(--dv-bg) 100%);
            border-bottom: 1px solid var(--dv-border-soft);
            text-align: center;
        }
        .dv-tagline {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 11px; font-weight: 600;
            letter-spacing: .12em; text-transform: uppercase;
            color: var(--dv-accent-strong); margin-bottom: 10px;
        }
        .dv-tagline__dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--dv-accent);
            box-shadow: 0 0 0 4px var(--dv-accent-soft);
            animation: dv-pulse 2.4s ease-in-out infinite;
        }
        @keyframes dv-pulse {
            0%, 100% { box-shadow: 0 0 0 4px var(--dv-accent-soft); }
            50%      { box-shadow: 0 0 0 8px rgba(102, 191, 151, .04); }
        }
        .dv-title {
            font-size: 32px; font-weight: 700;
            letter-spacing: -0.02em; line-height: 1.15;
            margin: 0 0 8px;
        }
        .dv-sub {
            color: var(--dv-muted); font-size: 14px;
            line-height: 1.55; max-width: 580px; margin: 0 auto;
        }

        /* Main */
        .dv-main { padding: 28px 0 56px; }

        /* Plan grid */
        .dv-plans {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 18px;
            align-items: stretch;
        }
        @media (max-width: 1199px) {
            .dv-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 600px) {
            .dv-plans { grid-template-columns: 1fr; }
        }

        /* Plan card */
        .dv-plan {
            position: relative;
            display: flex;
            flex-direction: column;
            background: var(--dv-surface);
            border: 1px solid var(--dv-border);
            border-radius: var(--dv-radius);
            box-shadow: var(--dv-shadow);
            padding: 26px 22px 22px;
            transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
            overflow: hidden;
        }
        .dv-plan:hover {
            box-shadow: var(--dv-shadow-lift);
            transform: translateY(-2px);
        }

        /* Featured (recommended next plan) */
        .dv-plan.dv-plan--featured {
            border-color: var(--dv-accent);
            box-shadow: var(--dv-shadow-feature);
        }
        .dv-plan.dv-plan--featured::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: var(--dv-radius);
            background:
                radial-gradient(280px 160px at 50% 0%, var(--dv-accent-soft), transparent 70%);
            pointer-events: none;
            z-index: 0;
        }
        .dv-plan > * { position: relative; z-index: 1; }

        /* Featured ribbon */
        .dv-plan__ribbon {
            position: absolute;
            top: 14px; right: -36px;
            width: 130px;
            transform: rotate(35deg);
            background: linear-gradient(135deg, var(--dv-accent), var(--dv-accent-strong));
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            text-align: center;
            padding: 4px 0;
            box-shadow: 0 4px 12px rgba(102, 191, 151, .35);
            z-index: 2;
        }

        /* Current plan */
        .dv-plan.dv-plan--current {
            border-color: var(--dv-accent);
            background:
                linear-gradient(180deg, var(--dv-accent-soft), rgba(255, 255, 255, .7) 60%),
                var(--dv-surface);
        }

        .dv-plan__name {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--dv-accent-strong);
            margin: 0 0 14px;
        }
        .dv-plan__cost {
            display: flex;
            align-items: baseline;
            gap: 4px;
            margin-bottom: 4px;
        }
        .dv-plan__currency {
            font-size: 18px;
            font-weight: 600;
            color: #1a1a1a;
            line-height: 1;
        }
        .dv-plan__price {
            font-size: 40px;
            font-weight: 800;
            letter-spacing: -0.03em;
            line-height: 1;
            color: #1a1a1a;
        }
        .dv-plan__period {
            font-size: 13px;
            font-weight: 500;
            color: var(--dv-muted);
        }
        .dv-plan__billed {
            font-size: 12px;
            color: var(--dv-muted);
            margin: 0 0 4px;
        }
        .dv-plan__trial {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 8px;
            padding: 3px 10px;
            background: var(--dv-accent-soft);
            color: var(--dv-accent-strong);
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .04em;
        }
        .dv-plan__trial::before {
            content: '';
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--dv-accent);
        }

        .dv-plan__desc {
            font-size: 13px;
            color: var(--dv-muted);
            line-height: 1.5;
            margin: 18px 0 18px;
            min-height: 38px;
        }

        /* CTA — single button per card; Activate or Current Plan */
        .dv-plan__cta {
            margin-bottom: 20px;
        }
        .dashboard-v2 .dv-plan__cta a.btn,
        .dashboard-v2 .dv-plan__cta .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 11px 16px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            line-height: 1;
            border: 1px solid var(--dv-border);
            background: var(--dv-surface);
            color: #1a1a1a !important;
            text-decoration: none;
            cursor: pointer;
            transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
        }
        .dashboard-v2 .dv-plan__cta a.btn:hover {
            border-color: var(--dv-accent);
            background: var(--dv-accent-soft);
            color: var(--dv-accent-strong) !important;
        }
        .dv-plan--featured .dv-plan__cta a.btn {
            background: var(--dv-accent) !important;
            border-color: var(--dv-accent) !important;
            color: #fff !important;
            box-shadow: 0 4px 12px rgba(102, 191, 151, .25);
        }
        .dv-plan--featured .dv-plan__cta a.btn:hover {
            background: var(--dv-accent-strong) !important;
            border-color: var(--dv-accent-strong) !important;
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(102, 191, 151, .35);
        }
        .dv-plan__current-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            padding: 11px 16px;
            border-radius: 10px;
            background: var(--dv-accent-soft);
            color: var(--dv-accent-strong);
            font-size: 14px;
            font-weight: 700;
            letter-spacing: .02em;
            border: 1px dashed var(--dv-accent);
        }
        .dv-plan__current-badge i { font-size: 14px; }

        /* Hide the wrong CTA based on plan state */
        .dv-plan .dv-plan__cta a.btn { display: inline-flex; }
        .dv-plan .dv-plan__cta .dv-plan__current-badge { display: none; }
        .dv-plan--current .dv-plan__cta a.btn { display: none; }
        .dv-plan--current .dv-plan__cta .dv-plan__current-badge { display: inline-flex; }

        /* Feature list */
        .dv-plan__features {
            list-style: none;
            margin: 0;
            padding: 18px 0 0;
            border-top: 1px solid var(--dv-border-soft);
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex: 1;
        }
        .dv-plan__features li {
            list-style: none;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 13px;
            line-height: 1.5;
            color: #1a1a1a;
        }
        .dv-plan__features li::before {
            content: "\f00c";
            font-family: "Font Awesome 5 Free", "FontAwesome";
            font-weight: 900;
            font-size: 10px;
            color: var(--dv-accent-strong);
            background: var(--dv-accent-soft);
            width: 18px; height: 18px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px;
        }
    </style>
@endsection

@section('content')

    <main class="dashboard-v2">

        {{-- Welcome strip --}}
        <section class="dv-welcome">
            <div class="container">
                <span class="dv-tagline"><span class="dv-tagline__dot"></span> Pricing</span>
                <h1 class="dv-title">Select a plan that fits your business needs</h1>
                <p class="dv-sub">All payments are made through shopify app billings!</p>
            </div>
        </section>

        <section class="dv-main">
            <div class="container" style="max-width: 1320px;">