@extends('layouts.app')
@section('title', "God's Treat — Premium Makhana by Dreemoh")

@push('styles')
<style>
  /* Hero */
  .hero{min-height:100vh;display:flex;align-items:center;padding:120px 5% 80px;position:relative;overflow:hidden;}
  .hero-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center;width:100%;max-width:1600px;margin:0 auto;}
  .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,107,26,.12);border:1px solid rgba(255,107,26,.3);color:var(--orange);padding:8px 18px;border-radius:50px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:28px;}
  .hero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(3.5rem,8vw,7rem);line-height:.95;letter-spacing:.02em;margin-bottom:20px;}
  .hero-sub{font-size:1.1rem;color:var(--muted);line-height:1.7;margin-bottom:36px;max-width:500px;}
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
  .hero-img-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
  .hero-img-wrap img{max-width:125%;width:125%;filter:drop-shadow(0 40px 80px rgba(255,107,26,.35));animation:floatImg 4s ease-in-out infinite;}
  @keyframes floatImg{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
  .hero-stats{display:flex;gap:32px;margin-top:48px;flex-wrap:wrap;}
  .hero-stat-num{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;color:var(--orange);}
  .hero-stat-lbl{font-size:.78rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;}
  /* Section */
  .section-header{text-align:center;margin-bottom:60px;}
  .section-tag{display:inline-block;background:rgba(255,107,26,.12);color:var(--orange);border:1px solid rgba(255,107,26,.25);padding:6px 18px;border-radius:50px;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;}
  .section-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.1;}
  .products-grid-home{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px;padding:0 5% 80px;}
/* Why section */
  #why{padding:80px 5%;background:linear-gradient(180deg,transparent,rgba(255,107,26,.03));}
  .why-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px;max-width:1200px;margin:0 auto;}
  .why-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px 24px;transition:border-color .3s,transform .3s;}
  .why-card:hover{border-color:var(--orange);transform:translateY(-6px);}
  .why-icon{font-size:2.5rem;margin-bottom:16px;}
  .why-title{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;margin-bottom:8px;}
  .why-desc{color:var(--muted);font-size:.875rem;line-height:1.6;}
  /* Stats */
  #stats{padding:60px 5%;background:linear-gradient(135deg,rgba(255,107,26,.06),rgba(124,58,237,.04));border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
  .stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:32px;max-width:900px;margin:0 auto;text-align:center;}
  .stat-num{font-family:'Bebas Neue',sans-serif;font-size:3.5rem;color:var(--orange);}
  .stat-lbl{color:var(--muted);font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;margin-top:4px;}
</style>
@endpush

@section('content')

<!-- Hero -->
<section class="hero">
  <div class="hero-inner">
    <div class="hero-content">
      <div class="hero-badge reveal">🏆 India's #1 Premium Makhana Brand</div>
      <h1 class="hero-title reveal">
        SNACK<br>
        <span class="gradient-text">SMARTER</span><br>
        LIVE BETTER
      </h1>
      <p class="hero-sub reveal">God's Treat delivers premium grade makhana — hand-picked, organic, and packed fresh. Zero chemicals. 100% Goodness.</p>
      <div class="hero-actions reveal">
        <a href="{{ route('products') }}" class="btn-primary">
          Shop Now →
        </a>
        <a href="#why" class="btn-ghost">Why Makhana?</a>
      </div>
      <div class="hero-stats">
        <div><div class="hero-stat-num" data-target="10000">0</div><div class="hero-stat-lbl">Happy Customers</div></div>
        <div><div class="hero-stat-num" data-target="100">0</div><div class="hero-stat-lbl">% Organic</div></div>
        <div><div class="hero-stat-num" data-target="4">0</div><div class="hero-stat-lbl">States Served</div></div>
      </div>
    </div>
    <div class="hero-img-wrap reveal-right">
      <img src="{{ asset('images/Pack.png') }}" alt="God's Treat Makhana" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22><rect width=%22300%22 height=%22300%22 fill=%22%23ff6b1a11%22/><text x=%22150%22 y=%22170%22 text-anchor=%22middle%22 fill=%22%23ff6b1a%22 font-size=%2280%22>🌾</text></svg>'"/>
    </div>
  </div>
</section>

<!-- Featured Products -->
<section id="products" style="padding:80px 0 40px">
  <div class="section-header">
    <div class="section-tag">Our Bestsellers</div>
    <h2 class="section-title">FEATURED <span class="gradient-text">PRODUCTS</span></h2>
  </div>
  <div class="products-grid-home">
    @foreach($featured as $product)
    <div class="product-card reveal" onclick="window.location='{{ route('product.show', $product->slug) }}'">
      <div class="product-img-wrap">
        <img src="{{ asset('images/' . $product->image) }}" alt="{{ $product->name }}"
          onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22><rect width=%22120%22 height=%22120%22 fill=%22%23ff6b1a11%22/><text x=%2260%22 y=%2270%22 text-anchor=%22middle%22 fill=%22%23ff6b1a55%22 font-size=%2248%22>🌾</text></svg>'"/>
        @if($product->discount_percent > 0)
          <div class="prod-badges"><span class="price-off">{{ $product->discount_percent }}% OFF</span></div>
        @endif
        <button class="prod-wish" onclick="event.stopPropagation();this.classList.toggle('liked');this.textContent=this.classList.contains('liked')?'♥':'♡'">♡</button>
      </div>
      <div class="product-info">
        <div class="prod-cat">{{ $product->category }}</div>
        <div class="prod-name"><a href="{{ route('product.show', $product->slug) }}" onclick="event.stopPropagation()">{{ $product->name }}</a></div>
        <div class="prod-weight">{{ $product->weight }}</div>
        <div class="prod-pricing">
          <span class="price-cur">₹{{ number_format($product->price) }}</span>
          @if($product->old_price)
            <span class="price-old">₹{{ number_format($product->old_price) }}</span>
            <span class="price-off">{{ $product->discount_percent }}% OFF</span>
          @endif
        </div>
        <form method="POST" action="{{ route('cart.add') }}" onclick="event.stopPropagation()">
          @csrf
          <input type="hidden" name="product_id" value="{{ $product->id }}">
          <button type="submit" class="btn-add">🛒 Add to Cart</button>
        </form>
      </div>
    </div>
    @endforeach
  </div>
  <div style="text-align:center;padding-bottom:60px">
    <a href="{{ route('products') }}" class="btn-primary">View All Products →</a>
  </div>
</section>

<!-- Why GT -->
<section id="why">
  <div class="section-header">
    <div class="section-tag">The GT Difference</div>
    <h2 class="section-title">WHY CHOOSE <span class="gradient-text">GOD'S TREAT?</span></h2>
  </div>
  <div class="why-grid">
    @foreach([
      ['🌱','100% Organic','No pesticides, no chemicals. Straight from the farm to your pack.'],
      ['💪','High Protein','4g protein per serving. Perfect for gym, yoga, or just snacking.'],
      ['🔬','Lab Tested','Every batch tested for purity, freshness, and quality.'],
      ['📦','Airtight Packed','Sealed for freshness. Stays crispy for months.'],
      ['🚚','Free Delivery','Free shipping on all orders above ₹499.'],
      ['♻️','Zero Waste','Eco-friendly packaging. Good for you, good for Earth.'],
    ] as [$icon, $title, $desc])
    <div class="why-card reveal">
      <div class="why-icon">{{ $icon }}</div>
      <div class="why-title">{{ $title }}</div>
      <div class="why-desc">{{ $desc }}</div>
    </div>
    @endforeach
  </div>
</section>

<!-- Stats -->
<section id="stats">
  <div class="stats-grid">
    @foreach([
      ['10,000+','Happy Customers','10000'],
      ['100%','Organic Certified','100'],
      ['4+','States Served','4'],
      ['4.9★','Average Rating','49'],
    ] as [$num, $lbl, $target])
    <div>
      <div class="stat-num" data-target="{{ $target }}">{{ $num }}</div>
      <div class="stat-lbl">{{ $lbl }}</div>
    </div>
    @endforeach
  </div>
</section>

<!-- CTA -->
<section style="padding:100px 5%;text-align:center">
  <h2 class="section-title" style="margin-bottom:24px">READY TO SNACK <span class="gradient-text">DIFFERENT?</span></h2>
  <p style="color:var(--muted);margin-bottom:36px;max-width:500px;margin-left:auto;margin-right:auto">From tradition to nutrition — your first order is just a click away.</p>
  <a href="{{ route('products') }}" class="btn-primary" style="font-size:1.1rem;padding:18px 48px">Order Now →</a>
</section>

@endsection

@push('scripts')
<script>
  // Counter animation
  const counters=document.querySelectorAll('[data-target]');
  const cObs=new IntersectionObserver(entries=>{
    entries.forEach(e=>{
      if(!e.isIntersecting)return;
      const el=e.target,target=+el.dataset.target;
      let curr=0;const steps=50;const step=target/steps;
      const t=setInterval(()=>{
        curr+=step;if(curr>=target){curr=target;clearInterval(t);}
        const v=Math.round(curr);
        el.textContent=(v>=1000?(v/1000).toFixed(0)+'K+':v+(target===100?'%':target===49?'★':'+'));
      },1800/steps);
      cObs.unobserve(el);
    });
  },{threshold:.5});
  counters.forEach(c=>cObs.observe(c));

  // Wishlist toggle
  document.querySelectorAll('.prod-wishlist').forEach(btn=>{
    btn.addEventListener('click',e=>{
      e.stopPropagation();
      btn.textContent=btn.dataset.liked?'♡':'♥';
      btn.style.color=btn.dataset.liked?'':'var(--pink)';
      btn.dataset.liked=btn.dataset.liked?'':'1';
    });
  });
</script>
@endpush