@extends('layouts.user')

@section('title')
Sell Off Marketplace
@endsection

@section('content')

@php
    // Brand-color mapping for market logo backgrounds
    $brandColors = [
        'alibaba'       => 'linear-gradient(150deg,#fff7ed 0%,#ffedd5 100%)',
        'ebay'          => 'linear-gradient(150deg,#f5f5f4 0%,#e7e5e4 100%)',
        'amazon'        => 'linear-gradient(150deg,#fff7ed 0%,#ffedd5 100%)',
        'shopify'       => 'linear-gradient(150deg,#ecfdf5 0%,#d1fae5 100%)',
        'walmart'       => 'linear-gradient(150deg,#dbeafe 0%,#eff6ff 100%)',
        'slick deals'   => 'linear-gradient(150deg,#e8f4fd 0%,#dbeafe 100%)',
        'brickseek'     => 'linear-gradient(150deg,#dbeafe 0%,#e0e7ff 100%)',
        'hotukdeals'    => 'linear-gradient(150deg,#fef9c3 0%,#fef3c7 100%)',
        'latestdeals'   => 'linear-gradient(150deg,#1e293b 0%,#0f172a 100%)',
    ];
    $defaultBg = 'linear-gradient(150deg,#f5f5f4 0%,#e7e5e4 100%)';

    $marketCategories = [
        'alibaba'       => 'Wholesale',
        'ebay'          => 'Auction',
        'amazon'        => 'Global',
        'shopify'       => 'Direct',
        'walmart'       => 'Retail',
        'slick deals'   => 'Deals',
        'brickseek'     => 'Retail',
        'hotukdeals'    => 'UK Deals',
        'latestdeals'   => 'Bargains',
    ];

    $isIctp = ($ownership->wallet_source ?? 'main') === 'ictp';
@endphp

<style>
    :root {
        --sm-orange: #f97316;
        --sm-orange-soft: #fff7ed;
        --sm-orange-dim: rgba(249, 115, 22, 0.06);
        --sm-orange-glow: rgba(249, 115, 22, 0.22);
        --sm-sky: #0ea5e9;
        --sm-sky-dim: rgba(14, 165, 233, 0.06);
        --sm-sky-border: rgba(14, 165, 233, 0.22);
        --sm-bg: #f7f7f5;
        --sm-card: #ffffff;
        --sm-text: #0a0a0a;
        --sm-text-2: #333;
        --sm-text-3: #666;
        --sm-muted: #999;
        --sm-border: rgba(0,0,0,0.06);
        --sm-border-2: rgba(0,0,0,0.10);
        --sm-radius: 16px;
        --sm-radius-sm: 12px;
        --sm-radius-xs: 8px;
        --sm-shadow-sm: 0 1px 2px rgba(0,0,0,0.02), 0 4px 12px rgba(0,0,0,0.03);
        --sm-shadow: 0 2px 6px rgba(0,0,0,0.04), 0 8px 28px rgba(0,0,0,0.06);
        --sm-shadow-lg: 0 8px 16px rgba(0,0,0,0.06), 0 20px 56px rgba(0,0,0,0.1);
        --sm-ease: cubic-bezier(0.16, 1, 0.3, 1);
        --sm-ease-out: cubic-bezier(0, 0, 0.2, 1);
    }
    .dark {
        --sm-bg: #0f172a;
        --sm-card: #1e293b;
        --sm-text: #f1f5f9;
        --sm-text-2: #cbd5e1;
        --sm-text-3: #94a3b8;
        --sm-muted: #64748b;
        --sm-border: rgba(255,255,255,0.06);
        --sm-border-2: rgba(255,255,255,0.10);
    }

    .sm-wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

    /* Hero */
    .sm-hero-hdr {
        margin-top: 1.5rem;
        border-radius: 20px;
        position: relative;
        overflow: hidden;
        background: linear-gradient(155deg, var(--sm-orange-soft) 0%, #ffedd5 35%, #fffbeb 70%, var(--sm-orange-soft) 100%);
        border: 1.5px solid rgba(249, 115, 22, 0.15);
    }
    .dark .sm-hero-hdr {
        background: linear-gradient(155deg, #431407 0%, #7c2d12 35%, #451a03 100%);
        border-color: rgba(249, 115, 22, 0.25);
    }
    .sm-hero-hdr::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.4;
        background-image: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.8) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.6) 0%, transparent 40%);
    }
    .dark .sm-hero-hdr::before { opacity: 0.15; }

    .sm-hero-top {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        padding: 0.75rem 2rem 0;
    }
    .sm-bc { display: flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; font-weight: 600; }
    .sm-bc a { color: var(--sm-muted); text-decoration: none; transition: color 0.15s; }
    .sm-bc a:hover { color: var(--sm-orange); }
    .sm-bc .cur { color: var(--sm-orange); }

    .sm-hero-main {
        position: relative;
        z-index: 1;
        padding: 1rem 2rem 1.5rem;
    }
    .sm-hero-title { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1.1; color: var(--sm-text); }
    .sm-hero-sub { font-size: 0.82rem; font-weight: 500; color: var(--sm-text-3); margin-top: 0.2rem; }

    /* Ownership chip */
    .sm-own-chip {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: 0.85rem;
        padding: 0.75rem 1.1rem;
        margin-top: 1rem;
        border-radius: var(--sm-radius-sm);
        background: rgba(255,255,255,0.7);
        border: 1px solid var(--sm-border);
        backdrop-filter: blur(8px);
        box-shadow: var(--sm-shadow-sm);
    }
    .dark .sm-own-chip { background: rgba(30,41,59,0.7); }
    .sm-own-thumb { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--sm-border); }
    .sm-own-name { font-size: 0.82rem; font-weight: 700; color: var(--sm-text); }
    .sm-own-meta { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.15rem; font-size: 0.68rem; color: var(--sm-muted); font-weight: 500; }
    .sm-own-dot { width: 3px; height: 3px; border-radius: 50%; background: #d4d4d4; }

    .sm-ws-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.15rem 0.5rem;
        border-radius: 99px;
        font-size: 0.58rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        border: 1px solid;
    }
    .sm-ws-main { background: rgba(249,115,22,0.08); color: var(--sm-orange); border-color: rgba(249,115,22,0.25); }
    .sm-ws-ictp { background: rgba(14,165,233,0.08); color: var(--sm-sky); border-color: var(--sm-sky-border); }
    @keyframes sm-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
    .sm-live-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: inline-block; animation: sm-blink 1.6s ease-in-out infinite; }

    /* 24hr evaluation notice */
    .sm-eval {
        margin-top: 1.25rem;
        display: flex;
        align-items: flex-start;
        gap: 0.85rem;
        padding: 1rem 1.25rem;
        border-radius: var(--sm-radius-sm);
        background: var(--sm-card);
        border: 1px solid var(--sm-border);
        box-shadow: var(--sm-shadow-sm);
    }
    .sm-eval-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        flex-shrink: 0;
        background: var(--sm-orange-dim);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--sm-orange);
    }
    .sm-eval-title { font-size: 0.82rem; font-weight: 700; color: var(--sm-text); margin-bottom: 0.15rem; }
    .sm-eval-text { font-size: 0.73rem; color: var(--sm-text-3); line-height: 1.55; }

    .sm-eval-steps { display: flex; align-items: center; gap: 0; margin-top: 0.65rem; }
    .sm-eval-step { display: flex; align-items: center; gap: 0.4rem; font-size: 0.62rem; font-weight: 700; color: var(--sm-orange); letter-spacing: 0.02em; }
    .sm-eval-step-num {
        width: 20px; height: 20px; border-radius: 50%;
        background: var(--sm-orange); color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.55rem; font-weight: 800; flex-shrink: 0;
    }
    .sm-eval-step.step-muted { color: var(--sm-muted); }
    .sm-eval-step.step-muted .sm-eval-step-num { background: #ddd; color: #999; }
    .dark .sm-eval-step.step-muted .sm-eval-step-num { background: #475569; color: #94a3b8; }
    .sm-eval-line { width: 32px; height: 1.5px; background: #e5e5e5; margin: 0 0.3rem; flex-shrink: 0; }
    .sm-eval-line.line-active { background: var(--sm-orange); }
    .dark .sm-eval-line { background: #334155; }

    /* Back link */
    .sm-back {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin-top: 1.5rem;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--sm-orange);
        text-decoration: none;
        transition: gap 0.18s var(--sm-ease);
    }
    .sm-back:hover { gap: 0.6rem; }

    /* Markets section */
    .sm-mkts { margin-top: 1.5rem; padding-bottom: 4rem; }
    .sm-mkts-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--sm-text); }

    /* Market grid */
    .sm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; margin-top: 1.25rem; }

    .sm-mc {
        background: var(--sm-card);
        border: 1px solid var(--sm-border);
        border-radius: var(--sm-radius);
        box-shadow: var(--sm-shadow-sm);
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        opacity: 0;
        transform: translate(var(--sx, 0), var(--sy, 0)) rotate(var(--sr, 0deg)) scale(0.82);
        transition: box-shadow 0.35s var(--sm-ease-out), transform 0.35s var(--sm-ease-out), border-color 0.3s;
    }
    .sm-mc.in {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
        transition: opacity 0.6s var(--sm-ease), transform 0.6s var(--sm-ease), box-shadow 0.35s var(--sm-ease-out), border-color 0.3s;
    }
    .sm-mc.in:hover {
        box-shadow: var(--sm-shadow-lg);
        transform: translateY(-8px) scale(1.015);
        border-color: rgba(249, 115, 22, 0.28);
    }

    .sm-mc-logo {
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        transition: all 0.35s var(--sm-ease-out);
    }
    .sm-mc.in:hover .sm-mc-logo { filter: brightness(1.06) saturate(1.1); }
    .sm-mc-logo img {
        height: 52px;
        width: auto;
        max-width: 130px;
        object-fit: contain;
        position: relative;
        z-index: 1;
        transition: transform 0.5s var(--sm-ease);
        filter: drop-shadow(0 2px 8px rgba(0,0,0,0.06));
    }
    .sm-mc.in:hover .sm-mc-logo img { transform: scale(1.18) translateY(-2px); }

    .sm-mc-body {
        padding: 0.85rem 1rem 1rem;
        border-top: 1px solid var(--sm-border);
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .sm-mc-name { font-size: 0.82rem; font-weight: 700; letter-spacing: -0.01em; color: var(--sm-text); }
    .sm-mc-meta { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.2rem; font-size: 0.66rem; color: var(--sm-muted); font-weight: 500; }
    .sm-mc-d { width: 3px; height: 3px; border-radius: 50%; background: #d4d4d4; }

    .sm-mc-arr {
        position: absolute;
        bottom: 0.85rem;
        right: 0.85rem;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--sm-orange);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        opacity: 0;
        transform: translateX(-6px) scale(0.8);
        transition: opacity 0.25s var(--sm-ease), transform 0.3s var(--sm-ease);
        box-shadow: 0 2px 10px rgba(249, 115, 22, 0.35);
    }
    .sm-mc.in:hover .sm-mc-arr { opacity: 1; transform: translateX(0) scale(1); }

    /* Responsive */
    @media (max-width: 900px) { .sm-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 680px) {
        .sm-wrap { padding: 0 1rem; }
        .sm-hero-main { padding: 1rem 1.25rem 1.25rem; }
        .sm-hero-top { padding: 0.75rem 1.25rem 0; }
        .sm-hero-title { font-size: 1.35rem; }
        .sm-hero-sub { font-size: 0.75rem; }
        .sm-own-chip { padding: 0.65rem 0.85rem; gap: 0.65rem; }
        .sm-own-thumb { width: 42px; height: 42px; border-radius: 8px; }
        .sm-own-name { font-size: 0.78rem; }
        .sm-eval { flex-direction: column; gap: 0.65rem; padding: 0.85rem 1rem; }
        .sm-eval-steps { flex-wrap: wrap; gap: 0.2rem; }
        .sm-eval-line { width: 20px; }
        .sm-grid { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }
        .sm-mc-logo { height: 95px; }
        .sm-mc-logo img { height: 40px; }
        .sm-mc-body { padding: 0.7rem 0.75rem 0.85rem; }
        .sm-mc-name { font-size: 0.78rem; }
        .sm-mc-meta { font-size: 0.62rem; }
    }
    @media (max-width: 420px) {
        .sm-wrap { padding: 0 0.75rem; }
        .sm-hero-hdr { border-radius: 14px; margin-top: 1rem; }
        .sm-hero-main { padding: 0.85rem 1rem 1rem; }
        .sm-hero-top { padding: 0.6rem 1rem 0; }
        .sm-hero-title { font-size: 1.15rem; }
        .sm-hero-sub { font-size: 0.7rem; }
        .sm-own-chip { padding: 0.55rem 0.75rem; gap: 0.55rem; margin-top: 0.75rem; }
        .sm-own-thumb { width: 36px; height: 36px; }
        .sm-own-name { font-size: 0.72rem; }
        .sm-own-meta { font-size: 0.6rem; }
        .sm-eval { padding: 0.75rem 0.85rem; }
        .sm-eval-title { font-size: 0.75rem; }
        .sm-eval-text { font-size: 0.68rem; }
        .sm-eval-step { font-size: 0.55rem; }
        .sm-eval-step-num { width: 18px; height: 18px; font-size: 0.5rem; }
        .sm-eval-line { width: 16px; }
        .sm-grid { gap: 0.5rem; }
        .sm-mc-logo { height: 82px; }
        .sm-mc-logo img { height: 34px; }
        .sm-mc-body { padding: 0.6rem 0.65rem 0.75rem; }
        .sm-mc-name { font-size: 0.72rem; }
        .sm-mc-meta { font-size: 0.58rem; }
        .sm-mc-arr { width: 24px; height: 24px; bottom: 0.65rem; right: 0.65rem; }
        .sm-back { font-size: 0.72rem; margin-top: 1rem; }
    }
</style>

<section class="relative md:mt-[84px] mt-[70px]" style="background: var(--sm-bg); min-height: 80vh;">
    <div class="sm-wrap">

        {{-- Hero header --}}
        <div class="sm-hero-hdr">
            <div class="sm-hero-top">
                <nav class="sm-bc">
                    <a href="{{ route('home') }}">Dashboard</a>
                    <span style="color:#d4d4d4">&rsaquo;</span>
                    <span class="cur">Sell Off Marketplace</span>
                </nav>
            </div>
            <div class="sm-hero-main">
                <div class="sm-hero-title">Sell Off Marketplace</div>
                <div class="sm-hero-sub">Select a market to list your item for sale</div>

                {{-- Ownership chip --}}
                <div class="sm-own-chip">
                    <img src="{{ asset('storage/products/' . $ownership->product?->image1) }}" class="sm-own-thumb" alt="{{ $ownership->product?->name }}">
                    <div>
                        <div class="sm-own-name">{{ mb_strimwidth($ownership->product?->name, 0, 28, '...') }}</div>
                        <div class="sm-own-meta">
                            Qty: {{ $ownership->quantity }}
                            <span class="sm-own-dot"></span>
                            Value: ${{ number_format($ownership->value, 2) }}
                            <span class="sm-own-dot"></span>
                            @if($isIctp)
                                <span class="sm-ws-badge sm-ws-ictp"><span class="sm-live-dot"></span> ICTP</span>
                            @else
                                <span class="sm-ws-badge sm-ws-main">Main</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- 24hr evaluation notice --}}
        <div class="sm-eval">
            <div class="sm-eval-icon">
                <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <div>
                <div class="sm-eval-title">24-hour evaluation window</div>
                <div class="sm-eval-text">Once you place a sell order, your product enters a 24-hour evaluation period. The outcome depends on market activity and your pricing. You will be notified of the result.</div>
                <div class="sm-eval-steps">
                    <div class="sm-eval-step">
                        <span class="sm-eval-step-num">1</span>
                        Select Market
                    </div>
                    <div class="sm-eval-line line-active"></div>
                    <div class="sm-eval-step step-muted">
                        <span class="sm-eval-step-num">2</span>
                        Set Price
                    </div>
                    <div class="sm-eval-line"></div>
                    <div class="sm-eval-step step-muted">
                        <span class="sm-eval-step-num">3</span>
                        24hr Evaluation
                    </div>
                </div>
            </div>
        </div>

        {{-- Back link --}}
        <a href="{{ route('home') }}" class="sm-back">
            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
            Back To My Store
        </a>

        {{-- Markets --}}
        <div class="sm-mkts">
            <div class="sm-mkts-title">Choose a Market</div>

            <div class="sm-grid" id="smGrid">
                @foreach($markets as $market)
                    @php
                        $nameKey = strtolower(trim($market->name));
                        $bg = $brandColors[$nameKey] ?? $defaultBg;
                        $category = $marketCategories[$nameKey] ?? '';
                    @endphp
                    <a href="{{ route('sell-details', [$ownership->slug, $market->name]) }}"
                       class="sm-mc" data-name="{{ strtolower($market->name) }}">
                        <div class="sm-mc-logo" style="background: {{ $bg }}">
                            <img src="{{ asset('markets/' . $market->image) }}" alt="{{ $market->name }}">
                        </div>
                        <div class="sm-mc-body">
                            <div class="sm-mc-name">{{ $market->name }}</div>
                            @if($market->sell_margin)
                                <div class="sm-mc-meta">
                                    Sell margin {{ number_format($market->sell_margin, 1) }}%
                                    @if($category)
                                        <span class="sm-mc-d"></span> {{ $category }}
                                    @endif
                                </div>
                            @elseif($category)
                                <div class="sm-mc-meta">{{ $category }}</div>
                            @endif
                        </div>
                        <div class="sm-mc-arr">
                            <svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>

    </div>
</section>

<script>
// Scattered brick entrance (scroll-triggered)
(function() {
    var cards = document.querySelectorAll('.sm-mc');
    cards.forEach(function(c) {
        var sx = (Math.random() - 0.5) * 200;
        var sy = 60 + Math.random() * 140;
        var sr = (Math.random() - 0.5) * 20;
        c.style.setProperty('--sx', sx + 'px');
        c.style.setProperty('--sy', sy + 'px');
        c.style.setProperty('--sr', sr + 'deg');
    });
    var delay = 0;
    var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                var el = entry.target;
                setTimeout(function() { el.classList.add('in'); }, delay);
                delay += 200;
                observer.unobserve(el);
            }
        });
    }, { threshold: 0.1 });
    cards.forEach(function(c) { observer.observe(c); });
})();
</script>

@endsection
