@extends('layouts.app')
@section('title', 'Home')
@section('active', 'home')
@section('content')
<div class="wrap">
  <section class="hero hero-modern">
    <div class="hero-copy">
      <span class="pill"><span class="dot-pulse"></span>{{ setting('hero_badge', 'Trusted API Platform') }}</span>
      <h1>{!! $heroTitle !!}</h1>
      <p class="sub">{{ setting('hero_subtitle', 'Ship faster with reliable, developer-first APIs that are simple to integrate and ready to scale.') }}</p>
      <div class="hero-btns">
        <a href="{{ route('register') }}" class="btn btn-primary btn-lg"><i class="fa-solid fa-rocket"></i>Get Free API Keys</a>
        <a href="{{ route('docs') }}" class="btn btn-outline btn-lg"><i class="fa-solid fa-book-open"></i>View Documentation</a>
      </div>
      <div class="hero-stats">
        <div class="hstat"><b class="text-primary">{{ fmt_num($totalHits) }}+</b><span>API Requests</span></div>
        <div class="hstat"><b class="text-primary">{{ fmt_num($totalUsers) }}+</b><span>Happy Clients</span></div>
        <div class="hstat"><b class="text-primary">{{ $totalSvc }}+</b><span>Live APIs</span></div>
        <div class="hstat"><b class="text-primary">{{ $successRate }}%</b><span>Success Rate</span></div>
      </div>
    </div>
    <div class="hero-visual" aria-label="API request preview">
      <div class="hero-orbit orbit-one"></div><div class="hero-orbit orbit-two"></div>
      <div class="api-console">
        <div class="console-top"><span class="console-dots"><i></i><i></i><i></i></span><span class="console-label"><i class="fa-solid fa-shield-halved"></i> secure request</span><span class="console-live"><i></i>LIVE</span></div>
        <div class="console-route"><span class="method">GET</span><span>api.infinityhub.dev/v1/verify</span></div>
        <div class="console-body">
          <div><span class="json-key">{</span></div>
          <div class="json-indent"><span class="json-key">"status"</span><span>: </span><span class="json-value">"success"</span><span>,</span></div>
          <div class="json-indent"><span class="json-key">"credits_left"</span><span>: </span><span class="json-number">2480</span><span>,</span></div>
          <div class="json-indent"><span class="json-key">"response_time"</span><span>: </span><span class="json-value">"82ms"</span></div>
          <div><span class="json-key">}</span></div>
        </div>
        <div class="console-footer"><span><i class="fa-solid fa-circle-check"></i> Response received</span><span>0.08s</span></div>
      </div>
      <div class="floating-chip chip-speed"><i class="fa-solid fa-bolt"></i><span><b>82ms</b><small>avg. response</small></span></div>
      <div class="floating-chip chip-secure"><i class="fa-solid fa-lock"></i><span><b>Secure by default</b><small>built for production</small></span></div>
    </div>
  </section>

  <div class="trust-strip" aria-label="Platform benefits">
    <span><i class="fa-solid fa-circle-check"></i> Instant API keys</span>
    <span><i class="fa-solid fa-shield-halved"></i> Secure requests</span>
    <span><i class="fa-solid fa-code"></i> Clear documentation</span>
    <span><i class="fa-solid fa-headset"></i> Helpful support</span>
  </div>

  <section class="section">
    <div class="feature-grid">
      <div class="feature-item"><div class="fic"><i class="fa-solid fa-bolt"></i></div><h4>{{ setting('feat1_title', 'Lightning Fast') }}</h4><p>{{ setting('feat1_desc', '') }}</p></div>
      <div class="feature-item"><div class="fic"><i class="fa-solid fa-shield-halved"></i></div><h4>{{ setting('feat2_title', 'Secure Keys') }}</h4><p>{{ setting('feat2_desc', '') }}</p></div>
      <div class="feature-item"><div class="fic"><i class="fa-solid fa-code"></i></div><h4>{{ setting('feat3_title', 'Easy Integration') }}</h4><p>{{ setting('feat3_desc', '') }}</p></div>
      <div class="feature-item"><div class="fic"><i class="fa-solid fa-headset"></i></div><h4>{{ setting('feat4_title', '24/7 Support') }}</h4><p>{{ setting('feat4_desc', '') }}</p></div>
    </div>
  </section>

  <section class="section" id="services" style="scroll-margin-top:90px">
    <div class="section-heading-row">
      <div><h2 class="sec-title section-title-left">Our <span>APIs</span></h2><p class="sec-sub section-sub-left">Every API has its own key & credits. Claim keys free, top up when you grow.</p></div>
      @if($services->count() > 1)<div class="carousel-controls" aria-label="API carousel controls"><button type="button" class="carousel-arrow" data-api-prev aria-label="Previous API"><i class="fa-solid fa-arrow-left"></i></button><button type="button" class="carousel-arrow" data-api-next aria-label="Next API"><i class="fa-solid fa-arrow-right"></i></button></div>@endif
    </div>
    @if($services->count())
    <div class="api-carousel" data-api-carousel data-interval="5000" aria-roledescription="carousel" aria-label="Live APIs">
      <div class="api-carousel-track">
      @foreach($services as $s)
      <article class="svc-card api-slide" role="group" aria-roledescription="slide" aria-label="{{ $s->name }}">
        <div class="svc-top">
          <div class="svc-ic"><i class="fa-solid {{ $s->icon ?: 'fa-plug' }}"></i></div>
          <div><h3>{{ $s->name }}</h3><span class="slug">/api/{{ $s->slug }}</span></div>
        </div>
        <p class="desc">{{ $s->description ?: 'Premium API service with instant response.' }}</p>
        <div class="svc-meta">
          <span class="mini-tag blue"><i class="fa-solid fa-coins"></i> {{ (int) $s->credits_per_hit }} credit/hit</span>
          <span class="mini-tag"><i class="fa-solid fa-circle-check" style="color:var(--success)"></i> Live</span>
          <span class="mini-tag">{{ strtoupper($s->method) }}</span>
        </div>
        <div class="svc-actions">
          <a class="btn btn-primary" href="{{ route('service.show', $s->slug) }}"><i class="fa-solid fa-key"></i>Get Key</a>
          <a class="btn btn-outline" href="{{ route('docs') }}#{{ $s->slug }}"><i class="fa-solid fa-book"></i>Docs</a>
        </div>
      </article>
      @endforeach
      </div>
      @if($services->count() > 1)<div class="carousel-dots" data-api-dots aria-label="Choose an API slide"></div>@endif
    </div>
    @else
      <div class="card"><div class="empty"><i class="fa-solid fa-plug-circle-xmark"></i><b>No APIs yet</b>New APIs are coming soon. Stay tuned!</div></div>
    @endif
  </section>

  <section class="section">
    <h2 class="sec-title">Get Started in <span>3 Steps</span></h2>
    <p class="sec-sub">From signup to first API call in under a minute.</p>
    <div class="steps">
      <div class="step"><div class="n">1</div><h4>Create Free Account</h4><p>Sign up and instantly receive a dedicated API key for every service with bonus credits.</p></div>
      <div class="step"><div class="n">2</div><h4>Copy Your Key</h4><p>Grab the key from your dashboard and follow the simple docs with code samples.</p></div>
      <div class="step"><div class="n">3</div><h4>Call & Top Up</h4><p>Hit <span class="mono">/api/{service}</span> with your key. Buy more credits per API anytime.</p></div>
    </div>
  </section>

  <section class="section" id="pricing" style="scroll-margin-top:90px">
    <div class="section-heading-row">
      <div><h2 class="sec-title section-title-left">Simple <span>Pricing</span></h2><p class="sec-sub section-sub-left">Start free. Each API has its own plans — open any API for full pricing.</p></div>
      @if($packages->count() > 1)<div class="carousel-controls" aria-label="Pricing carousel controls"><button type="button" class="carousel-arrow" data-pricing-prev aria-label="Previous pricing plan"><i class="fa-solid fa-arrow-left"></i></button><button type="button" class="carousel-arrow" data-pricing-next aria-label="Next pricing plan"><i class="fa-solid fa-arrow-right"></i></button></div>@endif
    </div>
    @if($packages->count())
    <div class="pricing-carousel" data-pricing-carousel data-interval="5000" aria-roledescription="carousel" aria-label="Pricing plans">
      <div class="pricing-track">
      @foreach($packages as $p)
      <article class="price-card pricing-slide{{ $p->highlight ? ' popular' : '' }}" role="group" aria-roledescription="slide" aria-label="{{ $p->name }}">
        @if($p->highlight)<span class="pop-tag"><i class="fa-solid fa-crown"></i> Most Popular</span>@endif
        <h3>{{ $p->name }}</h3>
        <div class="text-sm text-gray">{{ $p->service->name ?? '' }}</div>
        <div class="amount">{{ $p->price > 0 ? taka($p->price) : 'FREE' }}</div>
        <div class="req"><i class="fa-solid fa-bolt"></i> {{ number_format((int) $p->requests) }} Credits • {{ (int) $p->validity_days }} Days</div>
        <ul>
          @forelse($p->featureList() as $f)
            <li><i class="fa-solid fa-circle-check"></i><span>{{ $f }}</span></li>
          @empty
            <li><i class="fa-solid fa-circle-check"></i><span>Instant activation</span></li>
            <li><i class="fa-solid fa-circle-check"></i><span>24/7 support</span></li>
          @endforelse
        </ul>
        <a href="{{ $p->service ? route('service.show', $p->service->slug) : route('register') }}" class="btn {{ $p->highlight ? 'btn-primary' : 'btn-outline' }} btn-block"><i class="fa-solid fa-cart-shopping"></i>{{ $p->price > 0 ? 'Buy Now' : 'Claim Free' }}</a>
      </article>
      @endforeach
      </div>
      @if($packages->count() > 1)<div class="carousel-dots" data-pricing-dots aria-label="Choose a pricing slide"></div>@endif
    </div>
    @endif
  </section>

  @foreach($notices as $n)
    <div class="alert alert-{{ $n->type === 'error' ? 'danger' : $n->type }}" style="margin-top:40px">
      <i class="fa-solid fa-bullhorn"></i>
      <div><b>{{ $n->title }}</b><br>{!! nl2br(e($n->message)) !!}</div>
    </div>
  @endforeach

  <section class="section" id="faq" style="scroll-margin-top:90px">
    <h2 class="sec-title">Frequently Asked <span>Questions</span></h2>
    <p class="sec-sub">Everything you need to know.</p>
    <div class="faq">
      <div class="faq-item"><button class="faq-q" type="button">How do I get an API key? <i class="fa-solid fa-chevron-down"></i></button><div class="faq-a"><p>Create a free account and you instantly get a dedicated key for every API, each loaded with bonus credits.</p></div></div>
      <div class="faq-item"><button class="faq-q" type="button">How do I use an API? <i class="fa-solid fa-chevron-down"></i></button><div class="faq-a"><p>Send a GET/POST request to /api/{service} with your api_key and parameters. Copy-paste samples for PHP, JavaScript and Python are on every API page.</p></div></div>
      <div class="faq-item"><button class="faq-q" type="button">What happens when credits finish? <i class="fa-solid fa-chevron-down"></i></button><div class="faq-a"><p>Calls return a "limit exceeded" message. Buy a package for that API (bKash / Nagad / Rocket) and credits are added after quick admin approval.</p></div></div>
      <div class="faq-item"><button class="faq-q" type="button">Is there any free plan? <i class="fa-solid fa-chevron-down"></i></button><div class="faq-a"><p>Yes! Bonus credits on signup plus free starter packages per API. No credit card required.</p></div></div>
      <div class="faq-item"><button class="faq-q" type="button">How do I get support? <i class="fa-solid fa-chevron-down"></i></button><div class="faq-a"><p>Open a support ticket from your dashboard, or message us on Telegram / WhatsApp. We usually reply within minutes.</p></div></div>
    </div>
  </section>

  <section class="cta-banner">
    <h2>Ready to supercharge your app?</h2>
    <p>Join {{ fmt_num($totalUsers) }}+ developers using {{ setting('site_name', 'INFINITY API HUB') }} today.</p>
    <div class="hero-btns">
      <a href="{{ route('register') }}" class="btn btn-primary btn-lg"><i class="fa-solid fa-rocket"></i>Create Free Account</a>
      <a href="{{ route('check.key') }}" class="btn btn-outline btn-lg"><i class="fa-solid fa-key"></i>Check Your Key</a>
    </div>
  </section>
</div>
@endsection