<style>
        /* Smooth GPU-accelerated scroll using transform instead of background-position */
        @keyframes smoothScroll {
            0%   { transform: translateY(0); }
            10%  { transform: translateY(0); }
            45%  { transform: translateY(var(--scroll-end)); }
            55%  { transform: translateY(var(--scroll-end)); }
            90%  { transform: translateY(0); }
            100% { transform: translateY(0); }
        }
        .theme-img-scroll {
            animation: smoothScroll 22s ease-in-out infinite;
            will-change: transform;
        }
        .theme-img-scroll:hover {
            animation-play-state: paused;
        }

        /* Card hover effect */
        .theme-card {
            transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
            cursor: pointer;
        }
        .theme-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.08);
        }

        /* Scrollbar styling */
        .theme-grid-scrollable::-webkit-scrollbar {
            height: 6px;
        }
        .theme-grid-scrollable::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 999px;
        }
        .theme-grid-scrollable::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 999px;
        }
        .theme-grid-scrollable::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>

<div x-data="{
    activeTheme: $wire.entangle('data.theme_preset')
}" style="font-family: inherit; padding: 4px 0 16px;">

    

    {{-- Section heading --}}
    <div style="margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid #e5e7eb;">
        <h3 style="font-size: 15px; font-weight: 700; color: #111827; margin: 0 0 4px 0;">Home Page Layout Theme</h3>
        <p style="font-size: 12px; color: #6b7280; margin: 0; line-height: 1.5;">Select the default design preset for your storefront homepage. Hover over the theme screenshots to pause the scroll animation.</p>
    </div>

    {{-- Cards Grid --}}
    <div class="theme-grid-scrollable" style="display: flex; gap: 24px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 12px;">

        {{-- ── MeMart Default Card ── --}}
        <div
            class="theme-card"
            @click="activeTheme = 'classic'"
            :style="activeTheme === 'classic'
                ? 'border: 2px solid #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,0.12);'
                : 'border: 2px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.04);'"
            style="flex-shrink: 0; width: 310px; border-radius: 12px; background: #ffffff; overflow: hidden; position: relative;"
        >
            {{-- Active badge --}}
            <template x-if="activeTheme === 'classic'">
                <div style="position: absolute; top: 10px; right: 10px; z-index: 10; background: #10b981; color: #ffffff; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px; display: flex; align-items: center; gap: 4px; box-shadow: 0 2px 4px rgba(16,185,129,0.2);">
                    <svg style="width:10px;height:10px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                    </svg>
                    Active Preset
                </div>
            </template>

            {{-- Browser chrome --}}
            <div style="background: #f8fafc; padding: 8px 12px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #e2e8f0; user-select: none;">
                <span style="width:8px;height:8px;border-radius:50%;background:#ef4444;display:inline-block;flex-shrink:0;"></span>
                <span style="width:8px;height:8px;border-radius:50%;background:#eab308;display:inline-block;flex-shrink:0;"></span>
                <span style="width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block;flex-shrink:0;"></span>
                <div style="flex:1;margin-left:8px;background:#ffffff;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:9px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:monospace;text-align:left;">
                    sawdabazar.com
                </div>
            </div>

            {{-- Scrolling image viewport --}}
            <div style="height: 200px; overflow: hidden; background: #f8fafc; position: relative;">
                <img
                    src="/images/theme-memart-default.png"
                    alt="MeMart Default preview"
                    class="theme-img-scroll"
                    style="width: 100%; display: block; --scroll-end: calc(-100% + 200px);"
                    draggable="false"
                />
            </div>

            {{-- Card Footer --}}
            <div style="padding: 14px; border-top: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between;">
                <div>
                    <div style="font-size: 13px; font-weight: 700; color: #1f2937;">MeMart Default</div>
                    <div style="font-size: 11px; color: #6b7280; margin-top: 2px;">Standard grocery design</div>
                </div>
                {{-- Radio indicator --}}
                <div
                    :style="activeTheme === 'classic'
                        ? 'background:#10b981;border-color:#10b981;'
                        : 'background:#ffffff;border-color:#d1d5db;'"
                    style="width:18px;height:18px;border-radius:50%;border:2px solid;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;"
                >
                    <template x-if="activeTheme === 'classic'">
                        <svg style="width:10px;height:10px;color:#ffffff;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                        </svg>
                    </template>
                </div>
            </div>
        </div>

        {{-- ── Coming Soon Card ── --}}
        <div
            style="flex-shrink:0;width:310px;border-radius:12px;background:#fcfcfc;border: 2px dashed #cbd5e1; overflow:hidden;opacity:0.75;pointer-events:none; display: flex; flex-direction: column;"
        >
            {{-- Browser chrome (greyed out) --}}
            <div style="background:#f8fafc;padding:8px 12px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #e2e8f0;">
                <span style="width:8px;height:8px;border-radius:50%;background:#e2e8f0;display:inline-block;flex-shrink:0;"></span>
                <span style="width:8px;height:8px;border-radius:50%;background:#e2e8f0;display:inline-block;flex-shrink:0;"></span>
                <span style="width:8px;height:8px;border-radius:50%;background:#e2e8f0;display:inline-block;flex-shrink:0;"></span>
                <div style="flex:1;margin-left:8px;background:#f1f5f9;border-radius:4px;padding:2px 8px;font-size:9px;color:#94a3b8;font-family:monospace;text-align:left;">
                    theme-preset-2.com
                </div>
            </div>

            {{-- Placeholder area --}}
            <div style="height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%); flex-grow: 1;">
                <div style="width:44px;height:44px;border-radius:10px;background:#e2e8f0;display:flex;align-items:center;justify-content:center;box-shadow: 0 1px 2px rgba(0,0,0,0.02);">
                    <svg style="width:22px;height:22px;color:#64748b;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
                    </svg>
                </div>
                <div style="text-align:center;">
                    <div style="font-size:13px;font-weight:700;color:#475569;">Organic Fresh Theme</div>
                    <div style="font-size:11px;color:#94a3b8;margin-top:4px;line-height:1.4;">Theme under development —<br>coming in next update</div>
                </div>
            </div>

            {{-- Card Footer --}}
            <div style="padding:14px;border-top:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;background: #fafafa;">
                <div>
                    <div style="font-size:13px;font-weight:700;color:#94a3b8;">Coming Soon</div>
                    <div style="font-size:11px;color:#94a3b8;margin-top:2px;">Not active</div>
                </div>
                <span style="font-size:10px;font-weight:600;background:#f1f5f9;color:#94a3b8;padding:3px 9px;border-radius:999px;border:1px solid #e2e8f0;">Soon</span>
            </div>
        </div>

    </div>
</div>
