@extends('layouts.app')
@section('title', 'My Recycling Certificate')

@push('styles')
<style>
.cert-wrap{max-width:700px;margin:0 auto;}
.cert-card{background:linear-gradient(135deg,#071a0d,#0f2318,#071a0d);border:2px solid rgba(76,175,80,.3);border-radius:24px;padding:3rem;text-align:center;position:relative;overflow:hidden;}
.cert-card::before{content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:400px;height:400px;background:radial-gradient(circle,rgba(76,175,80,.08),transparent 70%);border-radius:50%;}
.cert-card::after{content:'';position:absolute;inset:8px;border:1px solid rgba(76,175,80,.1);border-radius:18px;pointer-events:none;}
.cert-logo{font-size:2.5rem;font-weight:900;letter-spacing:-2px;margin-bottom:.25rem;position:relative;}
.cert-logo span{color:var(--gl);}
.cert-tagline{font-size:.75rem;color:var(--muted);margin-bottom:2rem;text-transform:uppercase;letter-spacing:2px;position:relative;}
.cert-title{font-size:1rem;color:var(--muted);text-transform:uppercase;letter-spacing:3px;margin-bottom:.5rem;position:relative;}
.cert-name{font-size:2.2rem;font-weight:900;color:#fff;margin-bottom:.5rem;position:relative;}
.cert-sub{font-size:.875rem;color:var(--muted);margin-bottom:2rem;position:relative;}
.cert-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin:2rem 0;position:relative;}
.cs{background:rgba(76,175,80,.06);border:1px solid rgba(76,175,80,.15);border-radius:14px;padding:1.25rem;}
.cs .sv{font-size:1.8rem;font-weight:900;color:var(--gl);}
.cs .sl{font-size:.72rem;color:var(--muted);margin-top:.25rem;}
.cert-year{font-size:.82rem;color:var(--muted);margin-top:1.5rem;position:relative;}
.cert-seal{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--gl));display:flex;align-items:center;justify-content:center;margin:1.5rem auto 0;font-size:1.8rem;box-shadow:0 0 30px rgba(76,175,80,.3);position:relative;}
.dl-btn{background:linear-gradient(135deg,var(--green),var(--gl));color:#fff;border:none;border-radius:50px;padding:.75rem 2rem;font-weight:700;font-size:.9rem;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;}
.dl-btn:hover{opacity:.9;transform:translateY(-2px);}
.share-row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem;}
.sh-btn{padding:.45rem 1rem;border-radius:50px;font-size:.78rem;font-weight:700;text-decoration:none;transition:.2s;display:inline-flex;align-items:center;gap:.3rem;}
</style>
@endpush

@section('content')
<div class="cert-wrap">
  <div class="page-header" style="text-align:center;">
    <h1>🌿 Your Recycling Certificate</h1>
    <p>Download and share your environmental impact certificate</p>
  </div>

  {{-- Certificate --}}
  <div class="cert-card" id="certificate">
    <div class="cert-logo">Nab<span>o</span>la.</div>
    <div class="cert-tagline">Nigeria's Waste-to-Cash Platform</div>

    <div class="cert-title">Certificate of Environmental Impact</div>
    <div style="font-size:.82rem;color:var(--muted);margin-bottom:.5rem;position:relative;">This certifies that</div>
    <div class="cert-name">{{ $user->name }}</div>
    <div class="cert-sub">has made a meaningful contribution to environmental sustainability in Nigeria</div>

    <div class="cert-stats">
      <div class="cs">
        <div class="sv">{{ number_format($stats['kg_recycled'], 1) }}</div>
        <div class="sl">kg Recycled</div>
      </div>
      <div class="cs">
        <div class="sv">{{ number_format($stats['co2_saved'], 1) }}</div>
        <div class="sl">kg CO₂ Saved</div>
      </div>
      <div class="cs">
        <div class="sv">{{ number_format($stats['trees_equivalent'], 1) }}</div>
        <div class="sl">Trees Equivalent</div>
      </div>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1rem 0;position:relative;">
      <div style="background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:.75rem;">
        <div style="font-size:1.2rem;font-weight:900;color:var(--gl);">{{ number_format($stats['coins_earned']) }}</div>
        <div style="font-size:.7rem;color:var(--muted);">NC Earned</div>
      </div>
      <div style="background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:.75rem;">
        <div style="font-size:1.2rem;font-weight:900;color:var(--gl);">{{ $stats['pickups'] }}</div>
        <div style="font-size:.7rem;color:var(--muted);">Pickups Completed</div>
      </div>
    </div>

    <div class="cert-seal">♻️</div>
    <div class="cert-year">Issued {{ now()->format('d F Y') }} · nabola.bybimport.com</div>
  </div>

  {{-- Actions --}}
  <div style="text-align:center;margin-top:1.5rem;">
    <button class="dl-btn" onclick="downloadCert()"><i class="fas fa-download"></i> Download Certificate</button>
    <div class="share-row">
      <a href="https://wa.me/?text=I%20recycled%20{{ $stats['kg_recycled'] }}kg%20and%20saved%20{{ $stats['co2_saved'] }}kg%20CO₂%20with%20Nabola!%20Join%20me:%20{{ urlencode(url('/')) }}"
         target="_blank" class="sh-btn" style="background:rgba(37,211,102,.12);color:#25d366;border:1px solid rgba(37,211,102,.2);">
        <i class="fab fa-whatsapp"></i> Share on WhatsApp
      </a>
      <a href="https://t.me/share/url?url={{ urlencode(url('/')) }}&text=I%20recycled%20{{ $stats['kg_recycled'] }}kg%20with%20Nabola!"
         target="_blank" class="sh-btn" style="background:rgba(0,136,204,.12);color:#0088cc;border:1px solid rgba(0,136,204,.2);">
        <i class="fab fa-telegram"></i> Telegram
      </a>
      <a href="https://twitter.com/intent/tweet?text=I%20recycled%20{{ $stats['kg_recycled'] }}kg%20and%20saved%20{{ $stats['co2_saved'] }}kg%20CO₂%20with%20@NabolaAfrica!%20%23Nabola%20%23Recycling"
         target="_blank" class="sh-btn" style="background:rgba(29,161,242,.12);color:#1da1f2;border:1px solid rgba(29,161,242,.2);">
        <i class="fab fa-twitter"></i> Twitter
      </a>
    </div>
  </div>

  {{-- Stats breakdown --}}
  <div class="card" style="margin-top:1.5rem;">
    <div class="card-title"><i class="fas fa-chart-bar"></i> Your Full Impact</div>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;">
      @foreach([
        ['♻️','Total Recycled', $stats['kg_recycled'].' kg'],
        ['🌍','CO₂ Saved', $stats['co2_saved'].' kg'],
        ['🌳','Trees Equivalent', $stats['trees_equivalent']],
        ['🪙','Coins Earned', number_format($stats['coins_earned']).' NC'],
        ['🚛','Pickups Done', $stats['pickups']],
        ['🔥','Best Streak', $user->longest_streak.' days'],
      ] as [$icon,$label,$val])
      <div style="background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:1rem;text-align:center;">
        <div style="font-size:1.5rem;margin-bottom:.4rem;">{{ $icon }}</div>
        <div style="font-size:1.1rem;font-weight:900;color:var(--gl);">{{ $val }}</div>
        <div style="font-size:.7rem;color:var(--muted);margin-top:.2rem;">{{ $label }}</div>
      </div>
      @endforeach
    </div>
  </div>
</div>

@push('scripts')
<script>
function downloadCert() {
  window.print();
}
</script>
<style>
@media print {
  body * { visibility: hidden; }
  #certificate, #certificate * { visibility: visible; }
  #certificate { position: fixed; top: 0; left: 0; width: 100%; background: #071a0d !important; color: #fff !important; padding: 3rem; }
  .dl-btn, .share-row, .card, .page-header { display: none !important; }
}
</style>
@endpush
@endsection