@extends('frontend.layouts.app')
@section('title', 'Animexe Premium — Anime Deneyimini Zirveye Taşı')
@section('meta_description', 'Animexe Premium ile reklamsız izle, özel kozmotikler kazan, erken erişim fırsatlarından yararlan.')
@push('styles')
<style>
:root{--prm-cyan:#00f5ff;--prm-pink:#ff2d7d;--prm-purple:#b84dff;--prm-gold:#ffd60a;--prm-bg:#06060d}

/* ── Genel ── */
#pg{background:var(--prm-bg);min-height:100vh}
.prm-wrap{max-width:1160px;margin:0 auto;padding:0 20px 80px}

/* ── Hero ── */
.prm-hero{
  position:relative;text-align:center;
  padding:100px 20px 80px;overflow:hidden;
}
.prm-hero-bg{
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(0,245,255,.09) 0%,transparent 70%),
             radial-gradient(ellipse 50% 40% at 80% 30%,rgba(184,77,255,.07) 0%,transparent 60%),
             radial-gradient(ellipse 40% 30% at 20% 60%,rgba(255,45,125,.06) 0%,transparent 60%);
}
/* Yıldız parçacıkları */
.prm-stars{position:absolute;inset:0;z-index:0;pointer-events:none}
.prm-stars span{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:#fff;animation:twinkle var(--d,3s) ease-in-out infinite var(--delay,0s);
  opacity:0;
}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(1)}50%{opacity:.7;transform:scale(1.4)}}

.prm-hero-inner{position:relative;z-index:1}
.prm-hero-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 16px;border-radius:30px;
  background:rgba(0,245,255,.08);border:1px solid rgba(0,245,255,.25);
  font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--prm-cyan);margin-bottom:24px;
}
.prm-hero-badge i{font-size:.85rem}
.prm-hero-title{
  font-size:clamp(2.2rem,5vw,3.8rem);font-weight:900;line-height:1.15;
  margin-bottom:16px;letter-spacing:-.02em;
}
.prm-hero-title .grad{
  background:linear-gradient(120deg,var(--prm-cyan) 0%,var(--prm-purple) 50%,var(--prm-pink) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.prm-hero-sub{font-size:1.08rem;color:rgba(255,255,255,.5);max-width:560px;margin:0 auto 40px;line-height:1.65}
.prm-hero-stats{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.prm-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.prm-stat-val{font-size:1.5rem;font-weight:900;color:#fff;line-height:1}
.prm-stat-lbl{font-size:.7rem;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.08em}

/* ── Aktivasyon başarı banner ── */
.prm-success-banner{
  display:flex;align-items:center;gap:14px;
  padding:16px 22px;border-radius:14px;margin-bottom:32px;
  background:rgba(50,220,100,.08);border:1px solid rgba(50,220,100,.3);
  animation:slideDown .4s ease;
}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.prm-success-banner i{font-size:1.6rem;color:#32dc64;flex-shrink:0}
.prm-success-banner strong{color:#32dc64;font-size:.95rem;display:block;margin-bottom:2px}
.prm-success-banner span{font-size:.8rem;color:rgba(255,255,255,.5)}

/* ── Planlar grid ── */
.prm-section-lbl{
  text-align:center;margin-bottom:48px;
}
.prm-section-lbl h2{font-size:1.6rem;font-weight:800;color:#fff;margin-bottom:8px}
.prm-section-lbl p{font-size:.9rem;color:rgba(255,255,255,.4)}

.prm-plans{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-bottom:72px;
}
@media(max-width:900px){.prm-plans{grid-template-columns:1fr}}

.prm-card{
  position:relative;border-radius:20px;padding:32px 26px 28px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
  display:flex;flex-direction:column;
}
.prm-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.15);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.prm-card.featured{
  background:linear-gradient(145deg,rgba(0,245,255,.06) 0%,rgba(184,77,255,.05) 60%,rgba(255,45,125,.05) 100%);
  border-color:rgba(0,245,255,.3);
  box-shadow:0 0 0 1px rgba(0,245,255,.1),0 20px 60px rgba(0,245,255,.08);
}
.prm-card.featured:hover{box-shadow:0 0 0 1px rgba(0,245,255,.2),0 28px 70px rgba(0,245,255,.14)}

/* Badge */
.prm-card-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  padding:4px 18px;border-radius:20px;font-size:.7rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(90deg,var(--prm-cyan),var(--prm-purple));
  color:#06060d;box-shadow:0 0 20px rgba(0,245,255,.3);
}
.prm-card-badge.gold{background:linear-gradient(90deg,#ffd60a,#ff9f0a);box-shadow:0 0 20px rgba(255,214,10,.3)}
.prm-card-badge.pink{background:linear-gradient(90deg,var(--prm-pink),var(--prm-purple));box-shadow:0 0 20px rgba(255,45,125,.3)}

/* Plan içerik */
.prm-plan-name{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.4);margin-bottom:10px}
.prm-plan-price-wrap{margin-bottom:6px;line-height:1}
.prm-plan-price{font-size:2.8rem;font-weight:900;color:#fff;letter-spacing:-.04em}
.prm-plan-currency{font-size:1.2rem;font-weight:700;color:rgba(255,255,255,.6);vertical-align:top;margin-top:8px;display:inline-block}
.prm-plan-period{font-size:.8rem;color:rgba(255,255,255,.35);margin-top:4px}
.prm-plan-per-day{font-size:.72rem;color:rgba(255,255,255,.25);margin-bottom:4px}
.prm-plan-trial{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:10px;
  background:rgba(255,214,10,.1);border:1px solid rgba(255,214,10,.25);
  font-size:.7rem;font-weight:700;color:#ffd60a;margin-bottom:18px;
}
.prm-divider{height:1px;background:rgba(255,255,255,.07);margin:18px 0}

/* Feature list */
.prm-features{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.prm-features li{display:flex;align-items:flex-start;gap:9px;font-size:.83rem;color:rgba(255,255,255,.65);line-height:1.4}
.prm-features li i.bi-check-circle-fill{color:var(--prm-cyan);font-size:.85rem;flex-shrink:0;margin-top:1px}
.prm-features li i.bi-x-circle{color:rgba(255,255,255,.15);font-size:.85rem;flex-shrink:0;margin-top:1px}
.prm-features li.dim{color:rgba(255,255,255,.2)}

/* CTA Buton */
.prm-btn-buy{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px;border-radius:12px;border:none;
  font-size:.9rem;font-weight:800;cursor:pointer;font-family:inherit;
  text-decoration:none;letter-spacing:.02em;
  transition:transform .15s,box-shadow .15s,opacity .15s;
  margin-top:auto;
}
.prm-btn-buy:hover{transform:translateY(-2px)}
.prm-btn-buy.primary{
  background:linear-gradient(135deg,var(--prm-cyan) 0%,#0080ff 60%,var(--prm-purple) 100%);
  color:#06060d;box-shadow:0 0 30px rgba(0,245,255,.25),0 6px 20px rgba(0,0,0,.4);
}
.prm-btn-buy.primary:hover{box-shadow:0 0 40px rgba(0,245,255,.4),0 8px 28px rgba(0,0,0,.5)}
.prm-btn-buy.outline{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.75);
}
.prm-btn-buy.outline:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.25);color:#fff}
.prm-btn-buy.active-plan{
  background:rgba(50,220,100,.08);border:1px solid rgba(50,220,100,.3);
  color:#32dc64;cursor:default;
}
.prm-btn-buy.active-plan:hover{transform:none}
.prm-btn-buy.disabled{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.2);cursor:not-allowed;
}
.prm-btn-buy.disabled:hover{transform:none}

/* ── Nasıl Çalışır ── */
.prm-how{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  margin-bottom:72px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);border-radius:20px;overflow:hidden;
}
@media(max-width:700px){.prm-how{grid-template-columns:1fr}}
.prm-how-step{
  padding:32px 28px;position:relative;
  background:rgba(6,6,13,.6);
}
.prm-how-step:not(:last-child)::after{
  content:'';position:absolute;right:0;top:20%;bottom:20%;
  width:1px;background:rgba(255,255,255,.07);
}
@media(max-width:700px){.prm-how-step:not(:last-child)::after{display:none}}
.prm-how-num{
  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:900;margin-bottom:16px;
}
.prm-how-num.c1{background:rgba(0,245,255,.12);color:var(--prm-cyan)}
.prm-how-num.c2{background:rgba(184,77,255,.12);color:var(--prm-purple)}
.prm-how-num.c3{background:rgba(50,220,100,.12);color:#32dc64}
.prm-how-step h3{font-size:.95rem;font-weight:800;color:#fff;margin-bottom:8px}
.prm-how-step p{font-size:.8rem;color:rgba(255,255,255,.4);line-height:1.6;margin:0}

/* ── Aktivasyon Kutusu ── */
.prm-activate-box{
  border-radius:20px;padding:44px 36px;margin-bottom:72px;
  background:linear-gradient(135deg,rgba(0,245,255,.04),rgba(184,77,255,.03));
  border:1px solid rgba(0,245,255,.15);
  text-align:center;position:relative;overflow:hidden;
}
.prm-activate-box::before{
  content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  width:300px;height:200px;border-radius:50%;
  background:radial-gradient(rgba(0,245,255,.08),transparent 70%);
  pointer-events:none;
}
.prm-activate-box h2{font-size:1.45rem;font-weight:800;color:#fff;margin-bottom:8px}
.prm-activate-box p{font-size:.88rem;color:rgba(255,255,255,.4);margin-bottom:28px;line-height:1.6}
.prm-code-form{display:flex;gap:10px;max-width:500px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.prm-code-input{
  flex:1;min-width:220px;
  background:rgba(255,255,255,.06);border:1px solid rgba(0,245,255,.25);
  border-radius:12px;padding:14px 18px;color:#fff;font-size:1rem;font-weight:700;
  letter-spacing:.12em;text-align:center;text-transform:uppercase;outline:none;
  font-family:inherit;transition:border-color .2s,box-shadow .2s;
}
.prm-code-input::placeholder{letter-spacing:.05em;font-weight:400;text-transform:none;font-size:.88rem;color:rgba(255,255,255,.3)}
.prm-code-input:focus{border-color:var(--prm-cyan);box-shadow:0 0 0 3px rgba(0,245,255,.12)}
.prm-code-input.is-invalid{border-color:var(--prm-pink)!important;box-shadow:0 0 0 3px rgba(255,45,125,.1)!important}
.prm-code-btn{
  padding:14px 28px;border-radius:12px;border:none;cursor:pointer;font-family:inherit;
  font-size:.9rem;font-weight:800;letter-spacing:.03em;
  background:linear-gradient(135deg,var(--prm-cyan),var(--prm-purple));
  color:#06060d;box-shadow:0 0 24px rgba(0,245,255,.2);
  transition:transform .15s,box-shadow .15s;
}
.prm-code-btn:hover{transform:translateY(-2px);box-shadow:0 0 36px rgba(0,245,255,.35)}
.prm-code-error{
  width:100%;text-align:center;font-size:.8rem;color:var(--prm-pink);
  margin-top:8px;font-weight:600;
}
.prm-activate-login-note{
  margin-top:14px;font-size:.78rem;color:rgba(255,255,255,.3);
}
.prm-activate-login-note a{color:var(--prm-cyan);text-decoration:none;font-weight:700}
.prm-activate-login-note a:hover{text-decoration:underline}

/* ── Özellik Showcase ── */
.prm-features-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-bottom:72px;
}
@media(max-width:700px){.prm-features-grid{grid-template-columns:1fr}}
.prm-feat-cat{
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);
  border-radius:16px;padding:24px;
}
.prm-feat-cat-hdr{
  display:flex;align-items:center;gap:10px;margin-bottom:18px;padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.prm-feat-cat-icon{
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;
}
.prm-feat-cat-hdr h3{font-size:.9rem;font-weight:800;color:#fff;margin:0}
.prm-feat-list{display:flex;flex-direction:column;gap:10px}
.prm-feat-item{display:flex;align-items:flex-start;gap:10px}
.prm-feat-item-icon{
  width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:.75rem;flex-shrink:0;margin-top:1px;
}
.prm-feat-item-body{flex:1;min-width:0}
.prm-feat-item-name{font-size:.82rem;font-weight:700;color:rgba(255,255,255,.8);margin-bottom:2px}
.prm-feat-item-desc{font-size:.72rem;color:rgba(255,255,255,.35);line-height:1.45}

/* Kozmetik Preview */
.prm-cosmetics{
  margin-bottom:72px;text-align:center;
}
.prm-cosmetics-title{font-size:1.35rem;font-weight:800;color:#fff;margin-bottom:8px}
.prm-cosmetics-sub{font-size:.85rem;color:rgba(255,255,255,.35);margin-bottom:36px}
.prm-cosmetics-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:28px}

/* Username color chips */
.uc-chip{
  padding:5px 16px;border-radius:20px;font-size:.82rem;font-weight:700;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  cursor:default;white-space:nowrap;
}

/* Frame badges */
.frame-badge{
  width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:1.2rem;font-weight:800;color:#fff;position:relative;
}
.frame-badge::before{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  animation:frame-spin 3s linear infinite;
}
@keyframes frame-spin{to{transform:rotate(360deg)}}
.frame-badge.fr-neon::before{background:conic-gradient(#00f5ff,#b84dff,#00f5ff)}
.frame-badge.fr-fire::before{background:conic-gradient(#ff6b35,#ff2d7d,#ff8c00,#ff6b35)}
.frame-badge.fr-galaxy::before{background:conic-gradient(#7c3aed,#b84dff,#4a1d96,#7c3aed)}
.frame-badge.fr-gold::before{background:conic-gradient(#ffd700,#ff8c00,#ffd700)}
.frame-badge.fr-sakura::before{background:conic-gradient(#ff9ec4,#ff2d7d,#ffd6e7,#ff9ec4)}
.frame-badge.fr-rainbow::before{background:conic-gradient(#f00,#ff8c00,#ffd700,#0c0,#08f,#8b00ff,#f08,#f00)}
.frame-badge.fr-ice::before{background:conic-gradient(#a8edff,#60cfff,#a8edff)}
.frame-badge-inner{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;background:#111;display:flex;align-items:center;justify-content:center;font-size:.65rem;text-align:center;padding:2px;color:rgba(255,255,255,.7)}

/* Comment bg preview */
.cb-preview{
  padding:10px 16px;border-radius:10px;font-size:.8rem;color:#fff;font-weight:600;
  white-space:nowrap;position:relative;overflow:hidden;
}
.cb-preview::before{content:'';position:absolute;inset:0;opacity:.7}
.cb-fire::before{background:linear-gradient(135deg,#ff6b35,#ff2d7d)}
.cb-aurora::before{background:linear-gradient(135deg,#00c8d4,#b84dff)}
.cb-stars::before{background:linear-gradient(135deg,#1a1a3a,#4a1d96)}
.cb-sakura::before{background:linear-gradient(135deg,#ff9ec4,#ff2d7d)}
.cb-neon::before{background:linear-gradient(135deg,#00f5ff,#0040ff)}
.cb-galaxy::before{background:linear-gradient(135deg,#0a0020,#7c3aed)}
.cb-ice::before{background:linear-gradient(135deg,#a8edff,#006fbf)}
.cb-preview span{position:relative;z-index:1}

/* ── FAQ ── */
.prm-faq{margin-bottom:48px}
.prm-faq h2{font-size:1.35rem;font-weight:800;color:#fff;margin-bottom:28px;text-align:center}
.prm-faq-item{
  border-bottom:1px solid rgba(255,255,255,.06);overflow:hidden;
}
.prm-faq-q{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 4px;cursor:pointer;font-size:.9rem;font-weight:700;color:rgba(255,255,255,.75);
  transition:color .15s;user-select:none;
  background:none;border:none;width:100%;text-align:left;font-family:inherit;
  gap:12px;
}
.prm-faq-q:hover{color:#fff}
.prm-faq-q i{flex-shrink:0;transition:transform .25s ease;color:rgba(255,255,255,.3)}
.prm-faq-item.open .prm-faq-q i{transform:rotate(45deg);color:var(--prm-cyan)}
.prm-faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .3s ease,padding .3s ease;
  font-size:.84rem;color:rgba(255,255,255,.45);line-height:1.7;padding:0 4px;
}
.prm-faq-item.open .prm-faq-a{max-height:200px;padding-bottom:16px}

/* ── Mevcut Plan Banner ── */
.prm-active-banner{
  display:flex;align-items:center;gap:16px;padding:18px 24px;border-radius:14px;
  background:rgba(0,245,255,.06);border:1px solid rgba(0,245,255,.2);margin-bottom:36px;
  flex-wrap:wrap;
}
.prm-active-banner i{font-size:1.8rem;color:var(--prm-cyan);flex-shrink:0}
.prm-active-banner-body{flex:1;min-width:0}
.prm-active-banner-title{font-size:.95rem;font-weight:800;color:#fff;margin-bottom:2px}
.prm-active-banner-sub{font-size:.78rem;color:rgba(255,255,255,.4)}
.prm-active-banner-action{flex-shrink:0}
.prm-active-banner-action a{
  padding:9px 20px;border-radius:10px;border:1px solid rgba(0,245,255,.3);
  background:rgba(0,245,255,.07);color:var(--prm-cyan);font-size:.8rem;font-weight:700;
  text-decoration:none;transition:all .15s;white-space:nowrap;display:inline-block;
}
.prm-active-banner-action a:hover{background:rgba(0,245,255,.14);border-color:var(--prm-cyan)}

@media(max-width:600px){
  .prm-hero{padding:72px 16px 56px}
  .prm-activate-box{padding:32px 20px}
  .prm-how-step{padding:24px 20px}
  .prm-card{padding:26px 20px 22px}
}
</style>
@endpush

@section('content')
<div id="pg">
<div class="prm-hero">
  <div class="prm-hero-bg"></div>
  <div class="prm-stars" id="prm-stars"></div>
  <div class="prm-hero-inner">
    <div class="prm-hero-badge"><i class="bi bi-stars"></i> Animexe Premium</div>
    <h1 class="prm-hero-title">
      Anime deneyimini<br><span class="grad">zirveye taşı</span>
    </h1>
    <p class="prm-hero-sub">
      Reklamsız izleme, özel profil kozmetikleri, erken bölüm erişimi ve daha fazlası — hepsi tek bir Premium üyelikte.
    </p>
    <div class="prm-hero-stats">
      <div class="prm-stat"><span class="prm-stat-val">∞</span><span class="prm-stat-lbl">İçerik</span></div>
      <div class="prm-stat"><span class="prm-stat-val">{{ count($featureGroups ?? []) > 0 ? array_sum(array_map(fn($g) => count($g['perks']), $featureGroups)) : '20+' }}</span><span class="prm-stat-lbl">Özel Özellik</span></div>
      <div class="prm-stat"><span class="prm-stat-val">7/24</span><span class="prm-stat-lbl">Destek</span></div>
    </div>
  </div>
</div>

<div class="prm-wrap">

  {{-- Aktivasyon başarı mesajı --}}
  @if(session('activation_success'))
  <div class="prm-success-banner">
    <i class="bi bi-patch-check-fill"></i>
    <div>
      <strong>Premium aktif! 🎉 {{ session('activation_success.plan') }} planına hoş geldin.</strong>
      <span>Üyeliğin {{ session('activation_success.expires_at') }} tarihine kadar geçerli.</span>
    </div>
  </div>
  @endif

  {{-- Mevcut premium kullanıcı banner --}}
  @auth
  @if(auth()->user()->isPremium())
  <div class="prm-active-banner">
    <i class="bi bi-shield-fill-check"></i>
    <div class="prm-active-banner-body">
      <div class="prm-active-banner-title">Premium üyeliğin aktif 🎉</div>
      <div class="prm-active-banner-sub">
        Bitiş tarihi: {{ auth()->user()->premium_expires_at?->format('d MMMM Y') ?? auth()->user()->premium_expires_at?->format('d.m.Y') }}
        &nbsp;·&nbsp; Süre uzatmak için aşağıdan yeni bir plan satın alabilirsin.
      </div>
    </div>
    <div class="prm-active-banner-action">
      <a href="{{ route('profile') }}"><i class="bi bi-person-circle me-1"></i>Profili Gör</a>
    </div>
  </div>
  @endif
  @endauth

  {{-- Planlar --}}
  @if(count($plans ?? []) > 0)
  <div class="prm-section-lbl">
    <h2>Planını Seç</h2>
    <p>Tüm planlar aynı özellikleri içerir — süre ne kadar uzunsa o kadar tasarruf edersin.</p>
  </div>
  <div class="prm-plans">
    @foreach($plans as $idx => $plan)
    @php
      $isFeatured = $plan->badge_label && $idx == 1 || ($plan->badge_label && str_contains(strtolower($plan->badge_label), 'popül'));
      $isActive   = auth()->check() && auth()->user()->subscriptions()->where('plan_id', $plan->id)->where('status','active')->exists();
      $perDay     = $plan->duration_days > 0 ? round($plan->price / $plan->duration_days, 2) : 0;
      $accentCls  = $isFeatured ? 'featured' : '';
    @endphp
    <div class="prm-card {{ $accentCls }}">
      @if($plan->badge_label)
        @php
          $badgeCls = match(true) {
            str_contains(strtolower($plan->badge_label), 'değer') => 'gold',
            str_contains(strtolower($plan->badge_label), 'popül') => '',
            default => 'pink',
          };
        @endphp
        <div class="prm-card-badge {{ $badgeCls }}">{{ $plan->badge_label }}</div>
      @endif

      <div class="prm-plan-name">{{ $plan->name }}</div>
      <div class="prm-plan-price-wrap">
        <span class="prm-plan-currency">₺</span><span class="prm-plan-price">{{ number_format($plan->price, 0, ',', '.') }}</span>
      </div>
      <div class="prm-plan-period">
        @if($plan->duration_days >= 365)
          {{ intdiv($plan->duration_days, 365) }} yıl
        @elseif($plan->duration_days >= 30)
          {{ intdiv($plan->duration_days, 30) }} ay
        @else
          {{ $plan->duration_days }} gün
        @endif
        &nbsp;·&nbsp; Günde ≈ ₺{{ $perDay }}
      </div>

      @if($plan->trial_days)
      <div class="prm-plan-trial"><i class="bi bi-gift-fill"></i> İlk {{ $plan->trial_days }} gün ücretsiz!</div>
      @endif

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

      @if(count($plan->features ?? []) > 0)
      <ul class="prm-features">
        @foreach($plan->features as $feat)
        <li><i class="bi bi-check-circle-fill"></i> {{ $feat }}</li>
        @endforeach
      </ul>
      @endif

      @if($isActive)
        <a class="prm-btn-buy active-plan"><i class="bi bi-check-circle-fill"></i> Mevcut Planın</a>
      @elseif($plan->purchase_link)
        <a href="{{ $plan->purchase_link }}" target="_blank" rel="noopener" class="prm-btn-buy {{ $isFeatured ? 'primary' : 'outline' }}">
          <i class="bi bi-bag-fill"></i> Satın Al
        </a>
      @else
        <span class="prm-btn-buy disabled"><i class="bi bi-clock"></i> Yakında</span>
      @endif
    </div>
    @endforeach
  </div>
  @endif

  {{-- Nasıl Çalışır --}}
  <div class="prm-section-lbl">
    <h2>Nasıl Çalışır?</h2>
    <p>Üç adımda premium üyeliğini aktifleştir.</p>
  </div>
  <div class="prm-how">
    <div class="prm-how-step">
      <div class="prm-how-num c1"><i class="bi bi-1-circle-fill"></i></div>
      <h3>Paket Seç & Öde</h3>
      <p>Yukarıdaki planlardan birini seç, "Satın Al" butonuna tıkla ve güvenli ödeme sayfasına yönlendir. Ödemeyi tamamla.</p>
    </div>
    <div class="prm-how-step">
      <div class="prm-how-num c2"><i class="bi bi-2-circle-fill"></i></div>
      <h3>Aktivasyon Kodunu Al</h3>
      <p>Ödemen onaylandıktan sonra sana özel bir aktivasyon kodu gönderilir. Bu kodu saklaman yeterli.</p>
    </div>
    <div class="prm-how-step">
      <div class="prm-how-num c3"><i class="bi bi-3-circle-fill"></i></div>
      <h3>Kodu Gir, Keyfini Çıkar</h3>
      <p>Aşağıdaki kutuya aktivasyon kodunu gir. Anında aktif olur, tüm premium ayrıcalıklar hesabına yüklenir!</p>
    </div>
  </div>

  {{-- Aktivasyon Kutusu --}}
  <div class="prm-activate-box" id="activate">
    <h2>Aktivasyon Kodun Var mı?</h2>
    <p>Satın alma sonrası aldığın kodu girerek Premium üyeliğini hemen aktifleştir.</p>

    @auth
    <form method="POST" action="{{ route('premium.activate.redeem') }}" class="prm-code-form">
      @csrf
      <input type="text" name="code" id="prm-code-inp" class="prm-code-input {{ $errors->has('code') ? 'is-invalid' : '' }}"
             placeholder="XXXX-XXXX-XXXX" maxlength="32" autocomplete="off" autocapitalize="characters"
             value="{{ old('code') }}" spellcheck="false">
      <button type="submit" class="prm-code-btn"><i class="bi bi-lightning-fill me-1"></i>Aktifleştir</button>
      @if($errors->has('code'))
      <div class="prm-code-error"><i class="bi bi-exclamation-circle me-1"></i>{{ $errors->first('code') }}</div>
      @endif
    </form>
    @else
    <form class="prm-code-form">
      <input type="text" class="prm-code-input" placeholder="XXXX-XXXX-XXXX" disabled>
      <button type="button" onclick="window.location.href='{{ route('frontend.register') }}?next={{ urlencode(route('premium.activate')) }}'" class="prm-code-btn">
        <i class="bi bi-person-plus-fill me-1"></i>Giriş Yap & Aktifleştir
      </button>
    </form>
    <div class="prm-activate-login-note">
      Aktivasyon kodu kullanmak için <a href="{{ route('frontend.register') }}">üye olman</a> veya <a href="{{ route('frontend.login') }}">giriş yapman</a> gerekiyor.
    </div>
    @endauth
  </div>

  {{-- Özellikler Showcase --}}
  @if(count($featureGroups ?? []) > 0)
  <div class="prm-section-lbl">
    <h2>Premium Ayrıcalıklar</h2>
    <p>Premium üyeliğinle birlikte gelen tüm özellikler.</p>
  </div>
  <div class="prm-features-grid">
    @foreach($featureGroups as $group)
    @php
      $colors = [
        'Profil' => ['bg'=>'rgba(184,77,255,.12)','color'=>'#b84dff','icon'=>'bi-person-circle'],
        'İzleme' => ['bg'=>'rgba(0,245,255,.12)','color'=>'#00f5ff','icon'=>'bi-play-circle-fill'],
        'Sosyal' => ['bg'=>'rgba(255,45,125,.12)','color'=>'#ff2d7d','icon'=>'bi-chat-heart-fill'],
        'Hesap'  => ['bg'=>'rgba(255,214,10,.12)','color'=>'#ffd60a','icon'=>'bi-shield-fill-check'],
      ];
      $c = $colors[$group['label']] ?? ['bg'=>'rgba(255,255,255,.08)','color'=>'#fff','icon'=>'bi-star-fill'];
    @endphp
    <div class="prm-feat-cat">
      <div class="prm-feat-cat-hdr">
        <div class="prm-feat-cat-icon" style="background:{{ $c['bg'] }};color:{{ $c['color'] }}">
          <i class="bi {{ $c['icon'] }}"></i>
        </div>
        <h3>{{ $group['label'] }}</h3>
      </div>
      <div class="prm-feat-list">
        @foreach(array_slice($group['perks'], 0, 6) as $perk)
        <div class="prm-feat-item">
          <div class="prm-feat-item-icon" style="background:{{ $c['bg'] }};color:{{ $c['color'] }}">
            <i class="bi {{ $perk['icon'] ?? 'bi-check' }}"></i>
          </div>
          <div class="prm-feat-item-body">
            <div class="prm-feat-item-name">{{ $perk['name'] }}</div>
            @if(!empty($perk['desc']))<div class="prm-feat-item-desc">{{ $perk['desc'] }}</div>@endif
          </div>
        </div>
        @endforeach
      </div>
    </div>
    @endforeach
  </div>
  @endif

  {{-- Kozmetik Preview --}}
  <div class="prm-cosmetics">
    <div class="prm-cosmetics-title">Profilini Kişiselleştir</div>
    <div class="prm-cosmetics-sub">Premium üyeler için özel görsel özelleştirmeler</div>

    <div style="display:flex;flex-wrap:wrap;gap:32px;justify-content:center;margin-bottom:36px">
      <div style="text-align:center">
        <div style="font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);margin-bottom:14px">Profil Çerçeveleri</div>
        <div style="display:flex;gap:14px;flex-wrap:wrap;justify-content:center">
          @foreach(['neon','fire','galaxy','gold','sakura','rainbow','ice'] as $fr)
          <div class="frame-badge fr-{{ $fr }}">
            <div class="frame-badge-inner">{{ Str::upper(substr($fr,0,2)) }}</div>
          </div>
          @endforeach
        </div>
      </div>
      <div style="text-align:center">
        <div style="font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);margin-bottom:14px">Yorum Arka Planları</div>
        <div style="display:flex;gap:8px;flex-wrap:wrap;justify-content:center">
          @foreach(['fire'=>'Ateş','aurora'=>'Aurora','stars'=>'Yıldız','sakura'=>'Sakura','neon'=>'Neon','galaxy'=>'Galaksi','ice'=>'Buz'] as $bg => $lbl)
          <div class="cb-preview cb-{{ $bg }}"><span>{{ $lbl }}</span></div>
          @endforeach
        </div>
      </div>
    </div>

    <div style="text-align:center">
      <div style="font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);margin-bottom:14px">Kullanıcı Adı Renkleri</div>
      <div style="display:flex;gap:8px;flex-wrap:wrap;justify-content:center">
        @foreach([
          ['gradient'=>'linear-gradient(90deg,#00f5ff,#0080ff)','name'=>'Okyanus'],
          ['gradient'=>'linear-gradient(90deg,#ff2d7d,#b84dff)','name'=>'Galaksi'],
          ['gradient'=>'linear-gradient(90deg,#ffd700,#ff8c00)','name'=>'Altın'],
          ['gradient'=>'linear-gradient(90deg,#32dc64,#00c8d4)','name'=>'Orman'],
          ['gradient'=>'linear-gradient(90deg,#ff6b35,#ff2d7d)','name'=>'Ateş'],
          ['gradient'=>'linear-gradient(90deg,#a8edff,#006fbf)','name'=>'Buz'],
          ['gradient'=>'linear-gradient(90deg,#b84dff,#7c3aed)','name'=>'Mor'],
        ] as $uc)
        <span class="uc-chip" style="background:{{ $uc['gradient'] }};-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;border-color:rgba(255,255,255,.12)">{{ $uc['name'] }}</span>
        @endforeach
      </div>
    </div>
  </div>

  {{-- FAQ --}}
  <div class="prm-faq">
    <h2>Sık Sorulan Sorular</h2>
    @foreach([
      ['s'=>'Ödeme yaptıktan sonra nasıl aktifleştiririm?','c'=>'Ödemen onaylandıktan sonra sana aktivasyon kodu gönderilir. Bu sayfadaki "Aktivasyon Kodun Var mı?" kısmına kodu girip "Aktifleştir" butonuna tıklaman yeterli.'],
      ['s'=>'Mevcut Premium üyeliğim varken başka bir kod girebilir miyim?','c'=>'Evet! Mevcut üyelik süren bitmeden kod girersen süreler üst üste eklenir (stack). Hiç süre kaybetmezsin.'],
      ['s'=>'Aktivasyon kodum çalışmıyorsa ne yapmalıyım?','c'=>'Kodu büyük harflerle ve tire işaretleriyle birlikte girdiğinden emin ol (XXXX-XXXX-XXXX). Sorun devam ederse destek hattına başvur.'],
      ['s'=>'Premium üyeliğimi iptal edebilir miyim?','c'=>'Premium üyeliğin süre tabanlıdır; otomatik yenileme yoktur. Süre dolunca normal hesabına dönersin.'],
      ['s'=>'Premium özellikler hangi cihazlarda çalışır?','c'=>'Tüm cihazlarda (bilgisayar, tablet, telefon) çalışır. Hesabına giriş yaptığın her yerde premium ayrıcalıklarını kullanabilirsin.'],
    ] as $faq)
    <div class="prm-faq-item">
      <button class="prm-faq-q" onclick="this.closest('.prm-faq-item').classList.toggle('open')">
        <span>{{ $faq['s'] }}</span>
        <i class="bi bi-plus-lg"></i>
      </button>
      <div class="prm-faq-a">{{ $faq['c'] }}</div>
    </div>
    @endforeach
  </div>

</div>{{-- /prm-wrap --}}
</div>{{-- /pg --}}

<script>
// Yıldız parçacıkları
(function(){
  const c = document.getElementById('prm-stars');
  if(!c) return;
  for(let i=0;i<60;i++){
    const s = document.createElement('span');
    s.style.cssText = `left:${Math.random()*100}%;top:${Math.random()*100}%;--d:${2+Math.random()*4}s;--delay:-${Math.random()*4}s`;
    c.appendChild(s);
  }
})();

// Kod input: otomatik büyük harf + tire formatı
(function(){
  const inp = document.getElementById('prm-code-inp');
  if(!inp) return;
  inp.addEventListener('input', function(){
    let v = this.value.replace(/[^A-Za-z0-9]/g,'').toUpperCase();
    const parts = v.match(/.{1,4}/g) || [];
    this.value = parts.join('-').slice(0, 14);
  });
})();
</script>
@endsection
