@extends('layouts.master')

@section('head')
    <style>
        /* ============================================================
           Guide — 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: 14px;
            --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);
            background-color: var(--dv-bg);
        }
        .dashboard-v2 a { color: var(--dv-accent-strong); }
        .dashboard-v2 a:hover { color: var(--dv-accent); }

        /* Welcome strip */
        .dv-welcome {
            padding: 28px 0 22px;
            background:
                radial-gradient(900px 280px at 0% 0%, var(--dv-accent-soft), transparent 60%),
                linear-gradient(180deg, #ffffff 0%, var(--dv-bg) 100%);
            border-bottom: 1px solid var(--dv-border-soft);
        }
        .dv-welcome__head {
            display: flex; align-items: center; justify-content: space-between;
            gap: 24px; flex-wrap: wrap;
        }
        .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: 30px; 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;
        }

        /* Main + cards */
        .dv-main { padding: 24px 0 48px; }

        .dv-video-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
        }
        @media (max-width: 768px) {
            .dv-video-grid { grid-template-columns: 1fr; gap: 16px; }
        }

        .dv-video-card {
            background: var(--dv-surface);
            border: 1px solid var(--dv-border);
            border-radius: var(--dv-radius);
            box-shadow: var(--dv-shadow);
            overflow: hidden;
            transition: box-shadow .2s ease, transform .2s ease;
        }
        .dv-video-card:hover {
            box-shadow: var(--dv-shadow-lift);
            transform: translateY(-2px);
        }
        .dv-video-card__head {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 14px 18px;
            border-bottom: 1px solid var(--dv-border-soft);
            background: linear-gradient(135deg, var(--dv-accent-soft), rgba(255, 255, 255, .6));
        }
        .dv-video-card__num {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            height: 24px;
            padding: 0 8px;
            background: var(--dv-accent);
            color: #ffffff;
            border-radius: 999px;
            font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .04em;
            box-shadow: 0 2px 6px rgba(102, 191, 151, .25);
        }
        .dv-video-card__title {
            font-size: 14px;
            font-weight: 700;
            color: #1a1a1a;
            line-height: 1.4;
            margin: 0;
        }
        .dv-video-card__body {
            padding: 0;
            background: #0f172a;
        }
        .dv-video-card__body .ratio {
            background: #0f172a;
        }
        .dv-video-card__body iframe {
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
        }

        @media (max-width: 540px) {
            .dv-title { font-size: 24px; }
            .dv-video-card__head { padding: 12px 14px; }
        }
    </style>
@endsection

@section('content')

    <main class="dashboard-v2">

        {{-- Welcome strip --}}
        <section class="dv-welcome">
            <div class="container">
                <div class="dv-welcome__head">
                    <div>
                        <span class="dv-tagline"><span class="dv-tagline__dot"></span> Guide</span>
                        <h1 class="dv-title">Guide to {{ ucwords(str_replace('_', ' ', config('channel.name'))) }} Tools</h1>
                        <p class="dv-sub">Short video walkthroughs of every flow — get from zero to your first automation in minutes.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="dv-main">
            <div class="container">
                <div class="dv-video-grid">
                    <article class="dv-video-card">
                        <header class="dv-video-card__head">
                            <span class="dv-video-card__num">01</span>
                            <h3 class="dv-video-card__title">How to Get Credentials and connect the Brevo Account with app</h3>
                        </header>
                        <div class="dv-video-card__body">
                            <div class="ratio ratio-16x9">
                                <iframe src="https://www.youtube.com/embed/P5486h1lOpw?si=SHZPZ3zfJd3XGWo1" title="How to create Sendinblue Account &amp; get Credentials" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                    </article>

                    <article class="dv-video-card">
                        <header class="dv-video-card__head">
                            <span class="dv-video-card__num">02</span>
                            <h3 class="dv-video-card__title">How to Automate Contacts for every new customers</h3>
                        </header>
                        <div class="dv-video-card__body">
                            <div class="ratio ratio-16x9">
                                <iframe src="https://www.youtube.com/embed/-RtYKHkJh30?si=uolNSraQYbc3bgPV" title="How to automate Contacts for every new customers on Shopify" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                    </article>

                    <article class="dv-video-card">
                        <header class="dv-video-card__head">
                            <span class="dv-video-card__num">03</span>
                            <h3 class="dv-video-card__title">How to execute the Bulk Data Sync functionality</h3>
                        </header>
                        <div class="dv-video-card__body">
                            <div class="ratio ratio-16x9">
                                <iframe src="https://www.youtube.com/embed/mc7LGaz9me0?si=LlAKn985yxjmVS3i" title="How to execute the Bulk Data Sync functionality" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </section>
    </main>
@endsection