@extends('layouts.app')
@section('title', ($settings['meta_title'] ?? 'X Hosting BD - Fast, Secure & Affordable Web Hosting in Bangladesh'))
@section('content')

<!-- ===== HERO SECTION ===== -->
<section class="hero">
  <div class="hero-bg-anim"></div>
  <div class="container hero-inner">
    <div class="hero-text" data-aos="fade-right">
      @if($banners->count())
      <h1>{{ $banners->first()->title }}</h1>
      <p>{{ $banners->first()->subtitle }}</p>
      <div class="hero-btns">
        <a href="{{ $banners->first()->button_link ?? '/pricing' }}" class="btn btn-primary btn-lg"><i class="fas fa-rocket"></i> {{ $banners->first()->button_text ?? 'Get Started' }}</a>
        <a href="{{ route('domain') }}" class="btn btn-outline btn-lg"><i class="fas fa-globe"></i> Search Domain</a>
      </div>
      @else
      <h1>Fast, Secure & Affordable Web Hosting in Bangladesh</h1>
      <p>Trusted by Thousands | BDIX Connected | 99.9% Uptime | Free SSL</p>
      <div class="hero-btns">
        <a href="{{ route('pricing') }}" class="btn btn-primary btn-lg"><i class="fas fa-rocket"></i> Get Started Now</a>
        <a href="{{ route('domain') }}" class="btn btn-outline btn-lg"><i class="fas fa-globe"></i> Search Domain</a>
      </div>
      @endif
      <div class="hero-stats">
        <div class="stat"><span class="stat-num">5000+</span><span>Happy Clients</span></div>
        <div class="stat"><span class="stat-num">99.9%</span><span>Uptime</span></div>
        <div class="stat"><span class="stat-num">24/7</span><span>Support</span></div>
        <div class="stat"><span class="stat-num">10+</span><span>Years Exp.</span></div>
      </div>
    </div>
    <div class="hero-image" data-aos="fade-left">
      <div class="hero-img-wrap">
        <img src="{{ asset('images/logo-icon.jpg') }}" alt="X Hosting BD Server" class="hero-server-img">
        <div class="hero-badge badge-ssl"><i class="fas fa-shield-alt"></i> Free SSL</div>
        <div class="hero-badge badge-uptime"><i class="fas fa-check-circle"></i> 99.9% Uptime</div>
        <div class="hero-badge badge-bdix"><i class="fas fa-bolt"></i> BDIX Speed</div>
      </div>
    </div>
  </div>
</section>

<!-- ===== DOMAIN SEARCH ===== -->
<section class="domain-search-bar">
  <div class="container">
    <div class="domain-search-wrap" data-aos="fade-up">
      <h2>Search Your Perfect Domain</h2>
      <form class="domain-form" action="{{ $settings['whmcs_url'] ?? 'https://www.xhostingbd.com/cp' }}/cart.php" method="GET" target="_self">
        <input type="hidden" name="a" value="add">
        <input type="hidden" name="domain" value="register">
        <div class="domain-input-wrap">
          <input type="text" name="query" placeholder="Enter your domain name (e.g. mywebsite.com)" class="domain-input">
          <select name="tld" class="domain-tld">
            @foreach($domainPrices as $d)
            <option value="{{ $d->extension }}">{{ $d->extension }}</option>
            @endforeach
          </select>
          <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> Search</button>
        </div>
      </form>
      <div class="domain-tlds">
        @foreach($domainPrices->take(8) as $d)
        <span class="tld-chip">{{ $d->extension }} <strong>৳{{ number_format($d->register_price,0) }}</strong></span>
        @endforeach
      </div>
    </div>
  </div>
</section>

<!-- ===== WHY CHOOSE US ===== -->
<section class="features-section section-pad">
  <div class="container">
    <div class="section-header" data-aos="fade-up">
      <span class="section-tag">Why Choose Us</span>
      <h2>Bangladesh's Most Trusted Hosting Provider</h2>
      <p>We deliver enterprise-grade hosting solutions at affordable prices for every Bangladeshi business</p>
    </div>
    <div class="features-grid">
      <div class="feature-card" data-aos="fade-up" data-aos-delay="0">
        <div class="feature-icon"><i class="fas fa-bolt"></i></div>
        <h3>Blazing Fast Speed</h3>
        <p>NVMe SSD storage & BDIX connectivity ensures your website loads instantly across Bangladesh and beyond.</p>
      </div>
      <div class="feature-card" data-aos="fade-up" data-aos-delay="100">
        <div class="feature-icon"><i class="fas fa-shield-alt"></i></div>
        <h3>99.9% Uptime SLA</h3>
        <p>Our enterprise infrastructure guarantees maximum availability with real-time monitoring 24/7.</p>
      </div>
      <div class="feature-card" data-aos="fade-up" data-aos-delay="200">
        <div class="feature-icon"><i class="fas fa-lock"></i></div>
        <h3>Free SSL Certificate</h3>
        <p>Every hosting plan includes free Let's Encrypt SSL to keep your website secure and trusted by Google.</p>
      </div>
      <div class="feature-card" data-aos="fade-up" data-aos-delay="300">
        <div class="feature-icon"><i class="fas fa-headset"></i></div>
        <h3>24/7 Bangla Support</h3>
        <p>Get help in your own language anytime via WhatsApp, phone or email — day or night, weekday or holiday.</p>
      </div>
      <div class="feature-card" data-aos="fade-up" data-aos-delay="400">
        <div class="feature-icon"><i class="fas fa-mobile-alt"></i></div>
        <h3>Local Payment Methods</h3>
        <p>Pay easily with bKash, Nagad, Rocket, or bank card — no hassle, no international payment needed.</p>
      </div>
      <div class="feature-card" data-aos="fade-up" data-aos-delay="500">
        <div class="feature-icon"><i class="fas fa-server"></i></div>
        <h3>cPanel Control Panel</h3>
        <p>Industry-standard cPanel for easy management of your websites, emails, databases and files.</p>
      </div>
    </div>
  </div>
</section>

<!-- ===== HOSTING PACKAGES ===== -->
<section class="pricing-section section-pad bg-light" id="pricing">
  <div class="container">
    <div class="section-header" data-aos="fade-up">
      <span class="section-tag">Our Plans</span>
      <h2>Affordable Hosting Packages</h2>
      <p>Choose the perfect plan for your website. All plans include free SSL, cPanel & 24/7 support.</p>
    </div>
    @foreach($categories as $category)
    @if($category->packages->count())
    <div class="pkg-category" data-aos="fade-up">
      <h3 class="pkg-cat-title"><i class="fas {{ $category->icon ?? 'fa-server' }}"></i> {{ session('locale','en')=='bn' && $category->name_bn ? $category->name_bn : $category->name }}</h3>
      <div class="packages-grid">
        @foreach($category->packages as $pkg)
        <div class="package-card {{ $pkg->is_popular ? 'popular' : '' }}" data-aos="fade-up">
          @if($pkg->is_popular)<div class="popular-badge"><i class="fas fa-star"></i> Most Popular</div>@endif
          <div class="pkg-header">
            <h4>{{ session('locale','en')=='bn' && $pkg->name_bn ? $pkg->name_bn : $pkg->name }}</h4>
            <p>{{ $pkg->description }}</p>
          </div>
          <div class="pkg-price">
            @if($pkg->original_price)<span class="original-price">৳{{ number_format($pkg->original_price,0) }}</span>@endif
            <span class="price">৳{{ number_format($pkg->price,0) }}</span>
            <span class="cycle">/{{ $pkg->billing_cycle }}</span>
          </div>
          <ul class="pkg-features">
            @foreach($pkg->features as $feat)
            <li class="{{ $feat->is_included ? 'included' : 'excluded' }}">
              <i class="fas {{ $feat->is_included ? 'fa-check' : 'fa-times' }}"></i>
              {{ session('locale','en')=='bn' && $feat->feature_bn ? $feat->feature_bn : $feat->feature }}
            </li>
            @endforeach
          </ul>
          <a href="{{ $pkg->whmcs_link ?? ($settings['whmcs_url'] ?? '#') }}" class="btn {{ $pkg->is_popular ? 'btn-primary' : 'btn-outline' }} btn-block" target="_self">
            <i class="fas fa-shopping-cart"></i> Order Now
          </a>
        </div>
        @endforeach
      </div>
    </div>
    @endif
    @endforeach
    <div class="pricing-cta" data-aos="fade-up">
      <a href="{{ route('pricing') }}" class="btn btn-primary btn-lg">View All Plans <i class="fas fa-arrow-right"></i></a>
    </div>
  </div>
</section>

<!-- ===== DOMAIN PRICING ===== -->
<section class="domain-section section-pad">
  <div class="container">
    <div class="section-header" data-aos="fade-up">
      <span class="section-tag">Domain Registration</span>
      <h2>Register Your Domain Today</h2>
      <p>Get your perfect domain name at the best prices in Bangladesh</p>
    </div>
    <div class="domain-table-wrap" data-aos="fade-up">
      <table class="domain-table">
        <thead>
          <tr><th>Extension</th><th>Register</th><th>Renew</th><th>Transfer</th><th>Action</th></tr>
        </thead>
        <tbody>
          @foreach($domainPrices as $d)
          <tr>
            <td><strong>{{ $d->extension }}</strong></td>
            <td class="price-cell">৳{{ number_format($d->register_price,0) }}/yr</td>
            <td>৳{{ number_format($d->renew_price,0) }}/yr</td>
            <td>৳{{ number_format($d->transfer_price ?? $d->renew_price,0) }}/yr</td>
            <td><a href="{{ $settings['whmcs_url'] ?? '#' }}/cart.php?a=add&domain=register" class="btn btn-sm btn-primary" target="_self">Register</a></td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
</section>

<!-- ===== REVIEWS ===== -->
<section class="reviews-section section-pad bg-light">
  <div class="container">
    <div class="section-header" data-aos="fade-up">
      <span class="section-tag">Customer Reviews</span>
      <h2>What Our Clients Say</h2>
      <p>Thousands of satisfied customers trust X Hosting BD for their hosting needs</p>
    </div>
    <div class="reviews-grid">
      @foreach($reviews as $review)
      <div class="review-card" data-aos="fade-up">
        <div class="review-stars">
          @for($i=1;$i<=5;$i++)<i class="fas fa-star {{ $i<=$review->rating ? 'filled' : '' }}"></i>@endfor
        </div>
        <p class="review-text">"{{ $review->review }}"</p>
        <div class="reviewer">
          <div class="reviewer-avatar">{{ mb_substr($review->name,0,1) }}</div>
          <div>
            <strong>{{ $review->name }}</strong>
            @if($review->designation)<span>{{ $review->designation }}</span>@endif
          </div>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>

<!-- ===== FAQ ===== -->
<section class="faq-section section-pad">
  <div class="container">
    <div class="section-header" data-aos="fade-up">
      <span class="section-tag">FAQ</span>
      <h2>Frequently Asked Questions</h2>
      <p>Have questions? We have answers. Contact us if you need more help.</p>
    </div>
    <div class="faq-grid">
      @foreach($faqs as $faq)
      <div class="faq-item" data-aos="fade-up">
        <button class="faq-question" onclick="toggleFaq(this)">
          <span>{{ session('locale','en')=='bn' && $faq->question_bn ? $faq->question_bn : $faq->question }}</span>
          <i class="fas fa-plus"></i>
        </button>
        <div class="faq-answer">
          <p>{{ session('locale','en')=='bn' && $faq->answer_bn ? $faq->answer_bn : $faq->answer }}</p>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>

<!-- ===== BLOG ===== -->
@if($latestPosts->count())
<section class="blog-section section-pad bg-light">
  <div class="container">
    <div class="section-header" data-aos="fade-up">
      <span class="section-tag">Blog</span>
      <h2>Latest Articles & Tips</h2>
      <p>Stay updated with the latest web hosting tips and technology news</p>
    </div>
    <div class="blog-grid">
      @foreach($latestPosts as $post)
      <article class="blog-card" data-aos="fade-up">
        @if($post->featured_image)
        <div class="blog-img"><img src="{{ asset($post->featured_image) }}" alt="{{ $post->title }}" loading="lazy"></div>
        @else
        <div class="blog-img blog-img-placeholder"><i class="fas fa-newspaper"></i></div>
        @endif
        <div class="blog-body">
          <span class="blog-date"><i class="fas fa-calendar"></i> {{ $post->published_at ? $post->published_at->format('d M Y') : '' }}</span>
          <h3><a href="{{ route('blog.show',$post->slug) }}">{{ $post->title }}</a></h3>
          <p>{{ Str::limit($post->excerpt ?? strip_tags($post->content),120) }}</p>
          <a href="{{ route('blog.show',$post->slug) }}" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
        </div>
      </article>
      @endforeach
    </div>
    <div class="text-center mt-40" data-aos="fade-up">
      <a href="{{ route('blog') }}" class="btn btn-outline btn-lg">View All Articles <i class="fas fa-arrow-right"></i></a>
    </div>
  </div>
</section>
@endif

<!-- ===== CTA BANNER ===== -->
<section class="cta-section">
  <div class="container">
    <div class="cta-inner" data-aos="fade-up">
      <div class="cta-text">
        <h2>Ready to Launch Your Website?</h2>
        <p>Get started with X Hosting BD today and enjoy blazing-fast, reliable hosting with 24/7 Bangla support.</p>
      </div>
      <div class="cta-btns">
        <a href="{{ route('pricing') }}" class="btn btn-white btn-lg"><i class="fas fa-rocket"></i> View Plans</a>
        <a href="https://wa.me/880{{ ltrim($settings['site_whatsapp'] ?? '01357293164','+880 0') }}" class="btn btn-whatsapp btn-lg" target="_blank"><i class="fab fa-whatsapp"></i> Chat Now</a>
      </div>
    </div>
  </div>
</section>

@endsection
@section('scripts')
<script>
function toggleFaq(btn){
  const item=btn.parentElement;
  const isOpen=item.classList.contains('open');
  document.querySelectorAll('.faq-item.open').forEach(el=>{el.classList.remove('open');el.querySelector('.faq-question i').className='fas fa-plus';});
  if(!isOpen){item.classList.add('open');btn.querySelector('i').className='fas fa-minus';}
}
</script>
@endsection