@extends('user.layout')

@section('title', 'Gmail Marketing - PRO EARN SHOP')

@section('content')

<link
    href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700;800&display=swap"
    rel="stylesheet"
>

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
/>

<style>
    :root {
        /* PRO EARN Fresh Vibrant Palette (No Black & No Navy Blue) */
        --pe-primary: #2563EB;
        --pe-primary-light: #0284C7;
        --pe-secondary: #38BDF8;
        --pe-cyan: #06B6D4;
        --pe-sky: #7DD3FC;

        --pe-ice: #F0F9FF;
        --pe-ice-light: #F8FAFC;
        --pe-white: #FFFFFF;

        --pe-title: #0F172A;
        --pe-text: #334155;
        --pe-muted: #64748B;

        --pe-border: #E0F2FE;
        --pe-border-light: #F1F5F9;
        --pe-success: #10B981;

        --pe-shadow:
            0 16px 38px rgba(37, 99, 235, 0.08),
            0 5px 14px rgba(56, 189, 248, 0.06);
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        overflow-x: hidden;
    }

    a,
    a:hover,
    a:focus,
    a:active,
    a:visited {
        text-decoration: none !important;
    }

    button,
    a {
        -webkit-tap-highlight-color: transparent;
    }

    /* Page Setup */
    .pe-gmail-page {
        width: 100%;
        min-height: 100vh;
        overflow-x: hidden;
        padding: 12px 8px 115px;

        font-family: 'Hind Siliguri', sans-serif;
        color: var(--pe-text);

        background:
            radial-gradient(
                circle at 8% 4%,
                rgba(56, 189, 248, 0.12),
                transparent 25%
            ),
            radial-gradient(
                circle at 94% 12%,
                rgba(37, 99, 235, 0.08),
                transparent 28%
            ),
            linear-gradient(
                180deg,
                #F8FAFC 0%,
                #F0F9FF 50%,
                #FFFFFF 100%
            );
    }

    .pe-gmail-shell {
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
    }

    /* Main Container Panel */
    .pe-gmail-panel {
        position: relative;
        width: 100%;
        overflow: hidden;

        border: 1px solid var(--pe-border);
        border-radius: 28px;

        background:
            linear-gradient(
                150deg,
                rgba(255, 255, 255, 0.98) 0%,
                rgba(240, 249, 255, 0.95) 100%
            );

        box-shadow: var(--pe-shadow);
        isolation: isolate;
    }

    .pe-gmail-panel::before {
        content: '';
        position: absolute;
        top: -120px;
        right: -110px;
        width: 290px;
        height: 290px;
        z-index: -2;
        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(56, 189, 248, 0.2) 0%,
                rgba(125, 211, 252, 0.08) 45%,
                transparent 72%
            );

        pointer-events: none;
    }

    /* Hero Section */
    .pe-gmail-hero {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 24px 20px;
        text-align: center;
    }

    /* Brand Header Row */
    .pe-brand-row {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: clamp(10px, 3vw, 20px);

        width: 100%;
        margin-bottom: 18px;
    }

    .pe-main-logo {
        display: block;
        width: clamp(160px, 40vw, 240px);
        max-height: 80px;
        height: auto;
        flex-shrink: 1;

        object-fit: contain;
        object-position: center;

        filter: drop-shadow(0 4px 10px rgba(37, 99, 235, 0.12));
        transition: transform 0.25s ease;
    }

    .pe-main-logo:hover {
        transform: translateY(-2px);
    }

    .pe-brand-divider {
        width: 2px;
        height: 40px;
        flex: 0 0 auto;

        background: linear-gradient(180deg, transparent, #BAE6FD, transparent);
    }

    .pe-gmail-app-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        gap: 8px;

        padding: 8px 14px;

        border: 1px solid #BAE6FD;
        border-radius: 999px;

        background: var(--pe-white);
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.06);
    }

    .pe-gmail-app-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
    }

    .pe-gmail-app-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .pe-gmail-app-copy strong {
        color: var(--pe-title);
        font-size: 15px;
        font-weight: 800;
        line-height: 1;
        display: block;
    }

    /* Typography */
    .pe-gmail-heading {
        margin: 0 0 8px;
        color: var(--pe-title);
        font-size: clamp(24px, 5vw, 32px);
        font-weight: 800;
        line-height: 1.25;
    }

    .pe-gmail-heading .pe-highlight {
        background: linear-gradient(135deg, var(--pe-primary), var(--pe-secondary));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .pe-gmail-description {
        width: 100%;
        max-width: 500px;
        margin: 0 auto 20px;
        color: var(--pe-text);
        font-size: clamp(13.5px, 2.4vw, 15px);
        font-weight: 600;
        line-height: 1.5;
    }

    .pe-gmail-description i {
        margin-right: 5px;
        color: var(--pe-primary);
    }

    .pe-gmail-description strong {
        color: var(--pe-primary);
        font-weight: 800;
    }

    /* Type Cards Grid */
    .pe-gmail-type-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        max-width: 520px;
        margin: 0 auto 18px;
    }

    .pe-gmail-type-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;

        border: 1.5px solid var(--pe-border);
        border-radius: 18px;
        background: var(--pe-white);

        box-shadow: 0 6px 18px rgba(37, 99, 235, 0.04);
        text-align: left;
        transition: all 0.25s ease;
    }

    .pe-gmail-type-card:hover {
        transform: translateY(-2px);
        border-color: var(--pe-sky);
        box-shadow: 0 10px 22px rgba(56, 189, 248, 0.15);
    }

    .pe-type-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;

        border-radius: 12px;
        color: var(--pe-primary);
        background: #E0F2FE;
        font-size: 18px;
    }

    .pe-gmail-type-card.used .pe-type-icon {
        color: var(--pe-primary-light);
        background: #E0F2FE;
    }

    .pe-type-copy strong {
        display: block;
        color: var(--pe-title);
        font-size: 15px;
        font-weight: 800;
    }

    .pe-type-copy span {
        display: block;
        color: var(--pe-muted);
        font-size: 11.5px;
        font-weight: 700;
    }

    /* Status Area */
    .pe-status-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }

    .pe-unlimited-strip {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        width: 100%;
        padding: 10px 16px;

        border: 1px dashed var(--pe-sky);
        border-radius: 999px;
        background: #F0F9FF;

        color: var(--pe-primary);
        font-size: 12.5px;
        font-weight: 800;
        text-align: center;
    }

    .pe-live-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 14px;
        border-radius: 999px;
        background: #ECFDF5;
        border: 1px solid #A7F3D0;
        color: var(--pe-success);
        font-size: 11.5px;
        font-weight: 800;
    }

    .pe-live-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--pe-success);
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
        animation: pe-live-pulse 1.5s infinite;
    }

    @keyframes pe-live-pulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(0.75); opacity: 0.5; }
    }

    /* Submission Action Buttons */
    .pe-submit-section {
        position: relative;
        z-index: 2;
        padding: 24px 20px;
        border-top: 1px solid var(--pe-border);
        background: var(--pe-white);
        text-align: center;
    }

    .pe-submit-heading {
        margin: 0 0 6px;
        color: var(--pe-title);
        font-size: clamp(22px, 4.5vw, 28px);
        font-weight: 800;
    }

    .pe-submit-description {
        max-width: 520px;
        margin: 0 auto 20px;
        color: var(--pe-muted);
        font-size: 13.5px;
        font-weight: 700;
    }

    .pe-submit-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        max-width: 540px;
        margin: 0 auto;
    }

    .pe-submit-button {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;

        border-radius: 18px;
        color: #FFFFFF !important;
        text-align: left;
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
        transition: all 0.3s ease;
    }

    .pe-submit-button.fresh {
        background: linear-gradient(135deg, #2563EB, #0284C7);
    }

    .pe-submit-button.used {
        background: linear-gradient(135deg, #0284C7, #38BDF8);
    }

    .pe-submit-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(37, 99, 235, 0.3);
    }

    .pe-submit-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;

        border-radius: 12px;
        background: rgba(255, 255, 255, 0.22);
        color: #FFFFFF;
        font-size: 18px;
    }

    .pe-submit-copy strong {
        display: block;
        color: #FFFFFF;
        font-size: 15px;
        font-weight: 800;
    }

    .pe-submit-copy span {
        display: block;
        color: rgba(255, 255, 255, 0.88);
        font-size: 11px;
        font-weight: 600;
    }

    .pe-submit-arrow {
        margin-left: auto;
        color: #FFFFFF;
        font-size: 14px;
        transition: transform 0.25s ease;
    }

    .pe-submit-button:hover .pe-submit-arrow {
        transform: translateX(4px);
    }

    /* Responsive Adjustments */
    @media (max-width: 575.98px) {
        .pe-submit-buttons {
            grid-template-columns: 1fr;
        }
        .pe-gmail-type-card {
            padding: 12px 10px;
        }
        .pe-type-copy strong {
            font-size: 13.5px;
        }
        .pe-type-copy span {
            font-size: 10.5px;
        }
    }
</style>

<div class="pe-gmail-page">
    <main class="pe-gmail-shell">
        <section class="pe-gmail-panel" aria-labelledby="peGmailMainHeading">

            {{-- Header & Marketing Banner --}}
            <div class="pe-gmail-hero">
                <div class="pe-brand-row">
                    <img
                        src="/images/logos.png"
                        alt="PRO EARN SHOP"
                        class="pe-main-logo"
                        loading="eager"
                        decoding="async"
                    >
                    <span class="pe-brand-divider" aria-hidden="true"></span>
                    <div class="pe-gmail-app-badge" aria-label="Gmail Marketing">
                        <span class="pe-gmail-app-icon" aria-hidden="true">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Gmail_icon_%282020%29.svg" alt="Gmail">
                        </span>
                        <span class="pe-gmail-app-copy">
                            <strong>Gmail</strong>
                        </span>
                    </div>
                </div>

                <h1 id="peGmailMainHeading" class="pe-gmail-heading">
                    <span class="pe-highlight">Gmail</span> মার্কেটিং হাব
                </h1>

                <p class="pe-gmail-description">
                    <i class="fas fa-bolt" aria-hidden="true"></i>
                    ফ্রেশ ও ইউজড জিমেইল সাবমিট করে <strong>আনলিমিটেড ইনকাম</strong> করার সুযোগ
                </p>

                {{-- Type Information Cards --}}
                <div class="pe-gmail-type-grid">
                    <article class="pe-gmail-type-card">
                        <span class="pe-type-icon" aria-hidden="true">
                            <i class="fas fa-envelope-open-text"></i>
                        </span>
                        <span class="pe-type-copy">
                            <strong>Fresh Gmail</strong>
                            <span>১০০% নতুন · ভেরিফাইড</span>
                        </span>
                    </article>

                    <article class="pe-gmail-type-card used">
                        <span class="pe-type-icon" aria-hidden="true">
                            <i class="fas fa-history"></i>
                        </span>
                        <span class="pe-type-copy">
                            <strong>Used Gmail</strong>
                            <span>একটিভ · রেডি টু ইউজ</span>
                        </span>
                    </article>
                </div>

                {{-- Live Status --}}
                <div class="pe-status-area">
                    <div class="pe-unlimited-strip">
                        <i class="fas fa-infinity" aria-hidden="true"></i>
                        <span>আনলিমিটেড ইনকাম · যেকোনো সংখ্যক জিমেইল সাবমিট করুন</span>
                    </div>

                    <div class="pe-live-badge">
                        <span class="pe-live-dot" aria-hidden="true"></span>
                        <span>লাইভ · সাবমিশন ওপেন</span>
                    </div>
                </div>
            </div>

            {{-- Submission Action Section --}}
            <div class="pe-submit-section" aria-labelledby="peGmailSubmissionHeading">
                <h2 id="peGmailSubmissionHeading" class="pe-submit-heading">
                    Gmail সাবমিশন অপশন
                </h2>

                <p class="pe-submit-description">
                    আপনার জিমেইলের ধরন অনুযায়ী নিচের যেকোনো একটি অপশন নির্বাচন করুন
                </p>

                <div class="pe-submit-buttons">
                    {{-- Fresh Gmail Button --}}
                    <a href="{{ route('user.gmail.sell') }}" class="pe-submit-button fresh" aria-label="Fresh Gmail সাবমিট করুন">
                        <span class="pe-submit-icon" aria-hidden="true">
                            <i class="fas fa-paper-plane"></i>
                        </span>
                        <span class="pe-submit-copy">
                            <strong>Fresh Gmail সাবমিট</strong>
                            <span>নতুন জিমেইল জমা দিন</span>
                        </span>
                        <span class="pe-submit-arrow" aria-hidden="true">
                            <i class="fas fa-chevron-right"></i>
                        </span>
                    </a>

                    {{-- Used Gmail Button --}}
                    <a href="{{ route('user.used_gmail.index') }}" class="pe-submit-button used" aria-label="Used Gmail সাবমিট করুন">
                        <span class="pe-submit-icon" aria-hidden="true">
                            <i class="fas fa-clock-rotate-left"></i>
                        </span>
                        <span class="pe-submit-copy">
                            <strong>Used Gmail সাবমিট</strong>
                            <span>ব্যবহৃত জিমেইল জমা দিন</span>
                        </span>
                        <span class="pe-submit-arrow" aria-hidden="true">
                            <i class="fas fa-chevron-right"></i>
                        </span>
                    </a>
                </div>
            </div>

        </section>
    </main>
</div>

@endsection