@extends('frontend.main_master')

@section('title', $title)
@section('meta_description', $meta_description)
@section('meta_keywords', $meta_keywords)
@section('og_title', $og_title)
@section('og_description', $og_description)

@push('schema')
    <x-seo.schema-breadcrumb :items="[
        ['name' => t('api-services-breadcrumb-home'), 'url' => route('index')],
        ['name' => t('api-services-nav'), 'url' => route('api-services.index')],
    ]" />
@endpush

@push('styles')
    <link rel="stylesheet" href="{{ asset('frontend/css/api-products/api-products.css') }}">
@endpush

@section('content')
    <div class="api-page">
        <section class="api-hero">
            <div class="container">
                <div class="row align-items-center g-4 g-lg-5">
                    <div class="col-lg-7">
                        <span class="api-pill">
                            <i class="fa-solid fa-bolt" aria-hidden="true"></i> {{ t('api-services-hero-badge') }}
                        </span>
                        <h1 class="api-hero__title mt-3 mb-3">{{ t('api-services-hero-title') }}</h1>
                        <p class="api-hero__subtitle mb-4">{{ t('api-services-hero-subtitle') }}</p>
                        <div class="d-flex flex-column flex-sm-row flex-wrap gap-2">
                            {{-- Birincil CTA satın alma panelinde (API paneli) --}}
                            <a href="{{ $panelUrl }}" class="btn btn-astro-gold rounded-pill px-4 py-2 fw-semibold"
                                rel="noopener">
                                {{ t('api-pricing-cta-panel') }}
                            </a>
                            <a href="{{ route('api-services.pricing') }}"
                                class="btn btn-outline-astro-wood rounded-pill px-4 py-2 fw-semibold">
                                {{ t('api-services-hero-cta-pricing') }}
                            </a>
                            <a href="{{ route('api-services.docs') }}"
                                class="btn btn-outline-astro-wood rounded-pill px-4 py-2 fw-semibold">
                                {{ t('api-services-hero-cta-docs') }}
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="api-code-card">
                            <div class="api-code-card__bar">
                                <span class="api-code-card__dot"></span>
                                <span class="api-code-card__dot"></span>
                                <span class="api-code-card__dot"></span>
                                <span class="api-code-card__file">curl</span>
                            </div>
<pre class="api-code"><code>curl -X POST {{ url('/api/v1/chart/natal') }} \
  -H "Authorization: Bearer ab_live_..." \
  -H "Content-Type: application/json" \
  -d '{"date":"1990-04-12","time":"08:35","lat":41.0082,"lon":28.9784,"tz":"Europe/Istanbul"}'</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        @include('frontend.api_products.partials.subnav')

        <section class="api-section">
            <div class="container">
                <div class="row g-3 g-lg-4 api-stats">
                    <div class="col-6 col-lg-3">
                        <div class="api-stat">
                            <span class="api-stat__value">{{ $totalSkuCount }}+</span>
                            <span class="api-stat__label">{{ t('api-services-stat-endpoints') }}</span>
                        </div>
                    </div>
                    <div class="col-6 col-lg-3">
                        <div class="api-stat">
                            <span class="api-stat__value">JSON</span>
                            <span class="api-stat__label">{{ t('api-services-stat-format') }}</span>
                        </div>
                    </div>
                    <div class="col-6 col-lg-3">
                        <div class="api-stat">
                            <span class="api-stat__value">Hassas</span>
                            <span class="api-stat__label">{{ t('api-services-stat-engine') }}</span>
                        </div>
                    </div>
                    <div class="col-6 col-lg-3">
                        <div class="api-stat">
                            <span class="api-stat__value">MCP</span>
                            <span class="api-stat__label">{{ t('api-services-stat-mcp') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="api-section api-section--alt">
            <div class="container">
                <div class="api-section__head text-center">
                    <h2 class="api-section__title">{{ t('api-services-products-title') }}</h2>
                    <p class="api-section__subtitle mb-0">{{ t('api-services-products-subtitle') }}</p>
                </div>

                @foreach ($groups as $group)
                    <div class="api-group" id="group-{{ $group['key'] }}">
                        <div class="api-group__head">
                            <span class="api-group__icon" aria-hidden="true"><i class="{{ $group['icon'] }}"></i></span>
                            <div>
                                <h3 class="api-group__title">{{ t('api-group-' . $group['key'] . '-name') }}</h3>
                                <p class="api-group__desc mb-0">{{ t('api-group-' . $group['key'] . '-desc') }}</p>
                            </div>
                            <span class="api-group__count">{{ count($group['skus']) }}</span>
                        </div>

                        <div class="row g-3 g-lg-4">
                            @foreach ($group['skus'] as $sku)
                                <div class="col-12 col-md-6 col-xl-4">
                                    <article class="api-card h-100">
                                        <div class="api-card__top">
                                            <h4 class="api-card__title">{{ t($sku['name_key']) }}</h4>
                                            @if ($sku['credits'] > 0)
                                                <span class="api-credit-badge">
                                                    {{ $sku['credits'] }} {{ t('api-services-credit-unit') }}
                                                </span>
                                            @else
                                                <span class="api-credit-badge api-credit-badge--free">
                                                    {{ t('api-services-free-label') }}
                                                </span>
                                            @endif
                                        </div>
                                        <p class="api-card__desc">{{ t($sku['description_key']) }}</p>
                                        <div class="api-card__meta">
                                            <code class="api-endpoint">
                                                <span class="api-method api-method--{{ strtolower($sku['method']) }}">{{ $sku['method'] }}</span>
                                                {{ $sku['path'] }}
                                            </code>
                                            @if ($sku['cacheable'])
                                                <span class="api-tag">
                                                    <i class="fa-solid fa-database" aria-hidden="true"></i>
                                                    {{ t('api-services-cacheable') }}
                                                </span>
                                            @endif
                                        </div>
                                    </article>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </section>

        <section class="api-section">
            <div class="container">
                <div class="row g-3 g-lg-4">
                    <div class="col-md-4">
                        <div class="api-feature h-100">
                            <span class="api-feature__icon" aria-hidden="true"><i class="fa-solid fa-crosshairs"></i></span>
                            <h3 class="api-feature__title">{{ t('api-services-feature-1-title') }}</h3>
                            <p class="api-feature__text mb-0">{{ t('api-services-feature-1-text') }}</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="api-feature h-100">
                            <span class="api-feature__icon" aria-hidden="true"><i class="fa-solid fa-gauge-high"></i></span>
                            <h3 class="api-feature__title">{{ t('api-services-feature-2-title') }}</h3>
                            <p class="api-feature__text mb-0">{{ t('api-services-feature-2-text') }}</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="api-feature h-100">
                            <span class="api-feature__icon" aria-hidden="true"><i class="fa-solid fa-shield-halved"></i></span>
                            <h3 class="api-feature__title">{{ t('api-services-feature-3-title') }}</h3>
                            <p class="api-feature__text mb-0">{{ t('api-services-feature-3-text') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="api-cta">
            <div class="container text-center">
                <h2 class="api-cta__title">{{ t('api-services-cta-title') }}</h2>
                <p class="api-cta__text">{{ t('api-services-cta-text') }}</p>
                <div class="d-flex flex-column flex-sm-row flex-wrap gap-2 justify-content-center">
                    <a href="{{ $panelUrl }}" class="btn btn-light rounded-pill px-4 py-2 fw-semibold" rel="noopener">
                        {{ t('api-pricing-cta-panel') }}
                    </a>
                    <a href="{{ route('api-services.pricing') }}"
                        class="btn btn-outline-light rounded-pill px-4 py-2 fw-semibold">
                        {{ t('api-services-cta-button') }}
                    </a>
                    <a href="{{ route('api-services.mcp') }}"
                        class="btn btn-outline-light rounded-pill px-4 py-2 fw-semibold">
                        {{ t('api-services-cta-mcp-button') }}
                    </a>
                </div>
            </div>
        </section>
    </div>
@endsection