@extends('frontend.layouts.main')

@section('page_title', 'NFT Marketplace')
@section('meta_description', ($siteName ?? config('app.name')) . ' NFT Marketplace — buy curated digital collectibles, hold them in your portfolio, and resell them to other members. Settled instantly from your balance.')

@section('extra_styles')
.nft-card{background:var(--dark-3);border:1px solid var(--border);border-radius:16px;overflow:hidden;height:100%;transition:all .3s;display:flex;flex-direction:column}
.nft-card:hover{border-color:rgba(212,168,67,.4);transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.nft-card__img{aspect-ratio:1;background:var(--dark-2);overflow:hidden;position:relative}
.nft-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.nft-card:hover .nft-card__img img{transform:scale(1.06)}
.nft-card__tag{position:absolute;top:.6rem;left:.6rem;font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.28rem .6rem;border-radius:50px;background:rgba(6,13,31,.7);backdrop-filter:blur(6px);border:1px solid var(--border);color:var(--gold)}
.nft-card__body{padding:1rem 1.1rem;display:flex;flex-direction:column;flex:1}
.nft-card__name{font-size:.95rem;font-weight:700;color:#fff;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nft-card__coll{font-size:.78rem;color:var(--text-muted);margin:.15rem 0 0}
.nft-card__foot{margin-top:auto;padding-top:.85rem;display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem}
.nft-card__price-lbl{font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.nft-card__price{font-size:1.05rem;font-weight:700;color:#fff;line-height:1.1}
.nft-card__btn{font-size:.75rem;font-weight:600;color:#fff;text-decoration:none;background:var(--primary);padding:.45rem .9rem;border-radius:8px;transition:opacity .2s;white-space:nowrap}
.nft-card__btn:hover{opacity:.88;color:#fff}
.hero-stat-row{display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:2.5rem}
.hero-stat .num{font-family:'DM Serif Display',serif;font-size:2rem;color:#fff;line-height:1}
.hero-stat .lbl{font-size:.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.35rem}
@endsection

@section('content')

{{-- ══════════ HERO ══════════ --}}
<section class="page-hero">
  <div class="page-hero-bg"></div>
  <div class="hero-grid"></div>
  <div class="container page-hero-content">
    <div class="row align-items-center g-5">
      <div class="col-lg-7" data-aos="fade-up">
        <div class="page-badge"><i class="bi bi-gem"></i> Digital Collectibles</div>
        <nav class="breadcrumb-nav">
          <a href="{{ route('frontend.home') }}">Home</a><span>›</span>NFT Marketplace
        </nav>
        <h1 class="section-title" style="font-size:clamp(2.3rem,5vw,3.6rem)">
          Collect, Hold &amp; Trade <span class="text-gold">Exclusive NFTs</span>
        </h1>
        <p class="section-sub" style="max-width:600px">
          The {{ $siteName ?? config('app.name') }} marketplace brings curated digital art to your portfolio.
          Buy official drops, own them outright, and resell to other members — every trade settled instantly
          from your account balance, with no gas fees and no external wallet required.
        </p>
        <div class="d-flex flex-wrap gap-3 mt-4">
          <a href="{{ route('register') }}" class="btn-cta-white"><i class="bi bi-person-plus-fill"></i> Start Collecting</a>
          <a href="#collection" class="btn-cta-ghost"><i class="bi bi-grid-3x3-gap-fill"></i> Browse Collection</a>
        </div>

        <div class="hero-stat-row">
          <div class="hero-stat">
            <div class="num">{{ $stats['total'] }}</div>
            <div class="lbl">NFTs Available</div>
          </div>
          <div class="hero-stat">
            <div class="num">{{ $stats['collections'] ?: 1 }}</div>
            <div class="lbl">Collections</div>
          </div>
          <div class="hero-stat">
            <div class="num">${{ number_format($stats['floor'] ?? 0, 0) }}</div>
            <div class="lbl">Floor Price</div>
          </div>
          <div class="hero-stat">
            <div class="num">24/7</div>
            <div class="lbl">Trading</div>
          </div>
        </div>
      </div>

      {{-- Hero showcase: first 2 NFTs stacked --}}
      <div class="col-lg-5 d-none d-lg-block" data-aos="fade-left">
        <div class="row g-3">
          @foreach($nfts->take(2) as $hero)
          <div class="col-6 {{ $loop->index === 1 ? 'mt-5' : '' }}">
            <div class="nft-card">
              <div class="nft-card__img">
                <span class="nft-card__tag">{{ $hero->owner_id ? 'Resale' : 'Official' }}</span>
                <img src="{{ asset('storage/' . ltrim($hero->image, '/')) }}" alt="{{ $hero->name }}">
              </div>
              <div class="nft-card__body">
                <p class="nft-card__name">{{ $hero->name }}</p>
                <p class="nft-card__coll">{{ $hero->collection ?? 'NFT' }}</p>
                <div class="nft-card__foot">
                  <div>
                    <div class="nft-card__price-lbl">Price</div>
                    <div class="nft-card__price">${{ number_format($hero->price, 2) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>
</section>

<div class="divider-glow"></div>

{{-- ══════════ HOW IT WORKS ══════════ --}}
<section class="section section-alt">
  <div class="container">
    <div class="text-center mb-5" data-aos="fade-up">
      <span class="section-label gold d-inline-block">How It Works</span>
      <h2 class="section-title">Start Collecting in Three Steps</h2>
      <p class="section-sub mx-auto">No crypto wallets, no gas fees — everything runs on your {{ $siteName ?? config('app.name') }} balance.</p>
    </div>
    <div class="row g-4">
      @php
      $steps = [
        ['1', 'Fund Your Account', 'Deposit via any supported method. Your balance is the single wallet you use across investments and NFTs.'],
        ['2', 'Buy an NFT', 'Browse the marketplace and purchase any collectible in one click. Ownership transfers to you instantly.'],
        ['3', 'Hold or Resell', 'Keep it in your portfolio, or list it for resale at your own price. Approved listings go live for other members to buy.'],
      ];
      @endphp
      @foreach($steps as $i => $s)
      <div class="col-md-4" data-aos="fade-up" data-aos-delay="{{ $i * 90 }}">
        <div class="card-dark h-100">
          <div class="d-flex align-items-center gap-3 mb-3">
            <div class="step-num">{{ $s[0] }}</div>
            <h5 style="margin:0;color:#fff;font-size:1.15rem">{{ $s[1] }}</h5>
          </div>
          <p style="color:var(--text-muted);font-size:.9rem;line-height:1.7;margin:0">{{ $s[2] }}</p>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>

{{-- ══════════ THE COLLECTION ══════════ --}}
<section class="section section-dark" id="collection">
  <div class="container">
    <div class="row align-items-end mb-5">
      <div class="col-lg-7" data-aos="fade-right">
        <span class="section-label gold">The Collection</span>
        <h2 class="section-title">NFTs Available Right Now</h2>
        <p class="section-sub">Every piece below is live on the marketplace. Create an account to buy instantly.</p>
      </div>
      <div class="col-lg-5 text-lg-end" data-aos="fade-left">
        <a href="{{ route('register') }}" class="btn-cta-white" style="display:inline-flex">Create Account to Buy <i class="bi bi-arrow-right ms-1"></i></a>
      </div>
    </div>

    @if($nfts->isEmpty())
      <div class="card-dark text-center py-5" style="color:var(--text-muted)">
        <i class="bi bi-collection" style="font-size:2.5rem;color:rgba(255,255,255,.15)"></i>
        <p class="mt-3 mb-0">New drops are landing soon — check back shortly.</p>
      </div>
    @else
      <div class="row g-4">
        @foreach($nfts as $i => $nft)
        <div class="col-6 col-md-4 col-lg-3" data-aos="fade-up" data-aos-delay="{{ ($i % 4) * 70 }}">
          <div class="nft-card">
            <div class="nft-card__img">
              <span class="nft-card__tag">{{ $nft->owner_id ? 'Resale' : 'Official' }}</span>
              <img src="{{ asset('storage/' . ltrim($nft->image, '/')) }}" alt="{{ $nft->name }}">
            </div>
            <div class="nft-card__body">
              <p class="nft-card__name">{{ $nft->name }}</p>
              <p class="nft-card__coll">{{ $nft->collection ?? 'NFT' }}</p>
              <div class="nft-card__foot">
                <div>
                  <div class="nft-card__price-lbl">Price</div>
                  <div class="nft-card__price">${{ number_format($nft->price, 2) }}</div>
                </div>
                <a href="{{ route('register') }}" class="nft-card__btn">Buy</a>
              </div>
            </div>
          </div>
        </div>
        @endforeach
      </div>
    @endif
  </div>
</section>

{{-- ══════════ WHY COLLECT ══════════ --}}
<section class="section section-alt">
  <div class="container">
    <div class="text-center mb-5" data-aos="fade-up">
      <span class="section-label gold d-inline-block">Why {{ $siteName ?? config('app.name') }}</span>
      <h2 class="section-title">Collecting, <span class="text-gold">Simplified</span></h2>
      <p class="section-sub mx-auto">All the upside of digital collectibles, none of the complexity.</p>
    </div>
    <div class="row g-4">
      @php
      $feats = [
        ['bi-patch-check-fill','bg-gold','ic-gold','Curated Official Drops','Every official NFT is hand-picked and released by our team — quality over quantity.'],
        ['bi-lightning-charge-fill','bg-blue','ic-blue','Instant Settlement','Buy and sell in one click, settled immediately from your account balance.'],
        ['bi-arrow-repeat','bg-green','ic-green','Resell Anytime','List your NFTs at your own price. Every resale listing is admin-vetted for trust.'],
        ['bi-shield-lock-fill','bg-violet','ic-violet','True Ownership','Your collectibles live in your portfolio, fully owned and tradeable around the clock.'],
        ['bi-wallet2','bg-sky','ic-sky','No External Wallet','No MetaMask, no seed phrases, no gas fees — just your '.($siteName ?? config('app.name')).' account.'],
        ['bi-people-fill','bg-rose','ic-rose','Members-Only Market','Trade within a verified community of investors and collectors.'],
      ];
      @endphp
      @foreach($feats as $i => $f)
      <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ ($i % 3) * 80 }}">
        <div class="card-dark h-100">
          <div class="icon-box {{ $f[1] }}"><i class="bi {{ $f[0] }} {{ $f[2] }}"></i></div>
          <h5 style="color:#fff;font-size:1.1rem;margin-bottom:.5rem">{{ $f[3] }}</h5>
          <p style="color:var(--text-muted);font-size:.88rem;line-height:1.65;margin:0">{{ $f[4] }}</p>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>

{{-- ══════════ FAQ ══════════ --}}
<section class="section section-dark">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="text-center mb-5" data-aos="fade-up">
          <span class="section-label gold d-inline-block">FAQ</span>
          <h2 class="section-title">Questions, Answered</h2>
        </div>
        @php
        $faqs = [
          ['Do I need a crypto wallet to buy NFTs?','No. Everything runs on your '.($siteName ?? config('app.name')).' account balance. There are no external wallets, seed phrases, or gas fees — just deposit and buy.'],
          ['How does buying an NFT work?','Once you have a funded account, click Buy on any NFT. The price is deducted from your balance and ownership transfers to you instantly. It then appears in your portfolio.'],
          ['Can I sell an NFT I own?','Yes. From your dashboard you can list any owned NFT for resale at your own asking price. Once an admin approves the listing, it goes live on the marketplace for other members to buy — and the sale amount is credited to your balance.'],
          ['What is the difference between "Official" and "Resale"?','Official NFTs are primary drops released by our team. Resale NFTs are pieces owned by other members who have listed them for sale.'],
          ['Where are my NFTs stored?','Your NFTs are held in your account portfolio and are fully owned by you — viewable and tradeable at any time from your dashboard.'],
        ];
        @endphp
        <div data-aos="fade-up">
          @foreach($faqs as $faq)
          <div class="accord-item">
            <button class="accord-btn"><span>{{ $faq[0] }}</span><i class="bi bi-plus icon"></i></button>
            <div class="accord-body">{{ $faq[1] }}</div>
          </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>
</section>

{{-- ══════════ CTA ══════════ --}}
<section class="section-sm section-alt">
  <div class="container" data-aos="zoom-in">
    <div class="cta-banner">
      <div class="row align-items-center g-4">
        <div class="col-lg-8">
          <h2 style="color:#fff;font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:.6rem">Start Your Collection Today</h2>
          <p style="color:rgba(255,255,255,.8);margin:0;max-width:560px">Create a free account, fund your balance, and own your first exclusive NFT in minutes.</p>
        </div>
        <div class="col-lg-4 text-lg-end">
          <div class="d-flex flex-wrap gap-3 justify-content-lg-end">
            <a href="{{ route('register') }}" class="btn-cta-white"><i class="bi bi-person-plus-fill"></i> Create Account</a>
            <a href="{{ route('login') }}" class="btn-cta-ghost"><i class="bi bi-box-arrow-in-right"></i> Sign In</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

@endsection