@extends('layouts.app')
@section('title','Referral Program')
@section('header-left')
<div><h3 class="text-lg font-bold">Referral Program</h3></div>
@endsection
@section('content')
<div class="max-w-2xl mx-auto glass-card rounded-3xl p-10 text-center">
    <div class="w-20 h-20 bg-primary/10 rounded-3xl flex items-center justify-center mx-auto mb-6">
        <span class="material-symbols-outlined text-primary text-4xl">share</span>
    </div>
    <h2 class="text-2xl font-black text-white mb-3">Earn with Friends</h2>
    <p class="text-slate-400 mb-6 text-sm leading-relaxed max-w-md mx-auto">Share your referral code and earn bonuses when your friends complete exchanges. Full referral dashboard coming soon.</p>
    <div class="bg-white/5 border border-white/10 rounded-2xl p-5 mb-6">
        <p class="text-xs text-slate-500 uppercase tracking-widest mb-2 font-bold">Your Referral Code</p>
        <div class="text-3xl font-black tracking-widest text-primary font-mono">{{ $user->referral_code }}</div>
        <button onclick="navigator.clipboard.writeText('{{ $user->referral_code }}').then(()=>this.textContent='Copied!')" class="mt-3 px-4 py-2 bg-primary/10 text-primary rounded-lg text-sm font-bold hover:bg-primary hover:text-white transition-all border border-primary/20">Copy Code</button>
    </div>
    <div class="inline-flex items-center gap-2 px-5 py-2.5 rounded-2xl border border-primary/30 bg-primary/5 text-primary text-sm font-bold">
        <span class="material-symbols-outlined text-sm">schedule</span> Full Dashboard — Phase 2
    </div>
</div>
@endsection