@extends('layouts.landing')

@section('title', 'Live Offers, Games and Surveys')

@push('css')
    <style>
        .po-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        .po-section { padding: 58px 0; background:#080d20!important; }
        .po-section:nth-of-type(odd) { background:#0b1224!important; }
        .po-hero { padding: 64px 0 48px; background:radial-gradient(circle at 82% 20%,rgba(72,189,245,.14),transparent 30%),#080d20!important; }
        .po-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.55fr); gap:42px; align-items:center; }
        .po-hero-copy { text-align:left; }
        .po-hero-art img { display:block; width:100%; max-height:320px; object-fit:contain; filter:drop-shadow(0 26px 42px rgba(0,0,0,.28)); }
        .po-hero h1 { max-width:700px; font-weight:850; font-size:clamp(2.35rem,5vw,4.35rem); line-height:1; letter-spacing:-.05em; color:#f8fbff; margin:14px 0; }
        .po-hero p { color:#9ca8be; max-width:650px; margin:0 0 22px; line-height:1.65; }
        .po-geo { display:inline-flex; align-items:center; gap:8px; background:rgba(72,189,245,.1); color:#48bdf5; border:1px solid rgba(72,189,245,.28); padding:6px 12px; border-radius:999px; font-weight:750; font-size:12px; }
        .po-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
        .po-head h2 { font-weight:820; color:#f7faff; margin:0; font-size:clamp(1.35rem,3vw,2rem); letter-spacing:-.025em; }
        .po-cta-btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; background:#48bdf5; color:#07101f!important; font-weight:850; border-radius:8px; padding:0 18px; text-decoration:none; }
        .po-cta-btn:hover { filter: brightness(1.08); }

        .po-wall-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:14px; }
        .po-wall {
            position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
            background:#111b2e; border:1px solid #25334d; border-radius:14px; padding:20px 14px; min-height:130px;
            text-decoration:none; transition:.15s ease; text-align:center;
        }
        .po-wall:hover { transform:translateY(-3px); border-color:rgba(72,189,245,.45); }
        .po-wall img { width:56px; height:56px; object-fit:contain; border-radius:12px; background:#0b1425; }
        .po-wall span { color:#edf5ff; font-weight:800; font-size:13px; }
        .po-wall small { color:#8794ab; font-size:11px; }

        .po-offer-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap:16px; }
        .po-offer {
            position:relative; display:flex; flex-direction:column; gap:8px;
            background:linear-gradient(160deg,color-mix(in srgb,var(--po-bg,#183250) 38%,#101a2d),#0d1527);
            border:1px solid #25334d; border-radius:16px; padding:16px; text-decoration:none; overflow:hidden;
            transition:.15s ease;
        }
        .po-offer:hover { transform:translateY(-4px); border-color:rgba(72,189,245,.45); }
        .po-ribbon { position:absolute; top:12px; right:-30px; transform:rotate(45deg); background:var(--rib,#48bdf5); color:#07101f; font-weight:900; font-size:11px; padding:3px 34px; }
        .po-offer-media { width:64px; height:64px; border-radius:14px; object-fit:cover; background:#0b1425; }
        .po-provider { color:#48bdf5; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
        .po-offer-title { color:#f3f8ff; font-weight:800; font-size:15px; line-height:1.25; }
        .po-offer-desc { color:#98a5bb; font-size:12.5px; line-height:1.4; flex:1; }
        .po-offer-foot { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
        .po-reward { color:#f7faff; font-weight:900; font-size:15px; }
        .po-reward small { color:#48bdf5; }
        .po-lock { background:rgba(72,189,245,.09); color:#c8d4e8; font-weight:800; font-size:11px; padding:5px 12px; border-radius:999px; }

        .po-empty { text-align:center; color:#98a5bb; padding:40px 0; }
        html[data-portal-theme="light"] .po-section,
        html[data-portal-theme="light"] .po-section:nth-of-type(odd) { background:#f3f7fc!important; }
        html[data-portal-theme="light"] .po-hero { background:radial-gradient(circle at 82% 20%,rgba(72,189,245,.14),transparent 30%),#edf4fb!important; }
        html[data-portal-theme="light"] .po-hero h1,
        html[data-portal-theme="light"] .po-head h2 { color:#102039; }
        html[data-portal-theme="light"] .po-hero p,
        html[data-portal-theme="light"] .po-empty { color:#526178; }
        html[data-portal-theme="light"] .po-wall { background:#fff; border-color:#d7e1ee; }
        html[data-portal-theme="light"] .po-wall span { color:#102039; }
        html[data-portal-theme="light"] .po-wall small { color:#607086; }
        @media(max-width:767px){.po-hero-grid{grid-template-columns:1fr}.po-hero-art{order:-1}.po-hero-art img{max-height:220px}}
        @media (max-width: 575px) {
            .po-offer-grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }
            .po-wall-grid { grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); }
        }
    </style>
@endpush

@section('content')
    <main>
        <section class="po-hero">
            <div class="po-wrap po-hero-grid">
                <div class="po-hero-copy">
                    @if($country)
                        <div class="po-geo"><i data-feather="map-pin" style="width:15px;height:15px;"></i> Offers available in {{ $country }}</div>
                    @endif
                    <h1>Find the right task for your time.</h1>
                    <p>Explore active offerwall partners, games and surveys. Create a free account to unlock complete requirements, milestones and personalized availability.</p>
                    <a href="{{ route('register') }}" class="po-cta-btn">Create free account</a>
                </div>
                <div class="po-hero-art"><img src="{{ asset('assets/images/dashboard-journey.svg') }}" alt="Tasks leading to a Basketloot reward wallet"></div>
            </div>
        </section>

        <section class="po-section">
            <div class="po-wrap">
                <div class="po-head">
                    <h2>Offerwall partners</h2>
                    <a href="{{ route('register') }}" class="po-cta-btn">Sign up to open</a>
                </div>
                @if($offerwalls->isEmpty())
                    <div class="po-empty">No offerwalls are active yet. Check back soon.</div>
                @else
                    <div class="po-wall-grid">
                        @foreach($offerwalls as $offerwall)
                            <a href="{{ route('register') }}" class="po-wall" title="{{ $offerwall->name }} — sign in to open">
                                <img src="{{ $offerwall->photo_path ? Storage::url($offerwall->photo_path) : asset('app-assets/images/svg/basketloot-offer.svg') }}" alt="{{ $offerwall->name }}"
                                     loading="lazy" decoding="async"
                                     onerror="this.onerror=null;this.src='{{ asset('app-assets/images/svg/basketloot-offer.svg') }}'">
                                <span>{{ $offerwall->name }}</span>
                                <small>{{ ucfirst($offerwall->type ?? 'offers') }}</small>
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>
        </section>

        @if($hotOffers->isNotEmpty())
            <section class="po-section">
                <div class="po-wrap">
                    <div class="po-head">
                        <h2><i data-feather="zap" aria-hidden="true"></i> Hot offers</h2>
                        <a href="{{ route('register') }}" class="po-cta-btn">Unlock all offers</a>
                    </div>
                    <div class="po-offer-grid">
                        @foreach($hotOffers as $offer)
                            @include('landing.partials.guest-offer-card', ['offer' => $offer, 'ribbon' => 'Hot'])
                        @endforeach
                    </div>
                </div>
            </section>
        @endif

        @if($featuredOffers->isNotEmpty())
            <section class="po-section">
                <div class="po-wrap">
                    <div class="po-head">
                        <h2><i data-feather="star" aria-hidden="true"></i> Featured offers</h2>
                        <a href="{{ route('register') }}" class="po-cta-btn">Start earning</a>
                    </div>
                    <div class="po-offer-grid">
                        @foreach($featuredOffers as $offer)
                            @include('landing.partials.guest-offer-card', ['offer' => $offer, 'ribbon' => 'Featured'])
                        @endforeach
                    </div>
                </div>
            </section>
        @endif
    </main>
@endsection
