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

@section('content')
    <div class="api-page">
        <section class="api-hero api-hero--compact">
            <div class="container text-center">
                <span class="api-pill">
                    <i class="fa-solid fa-plug-circle-bolt" aria-hidden="true"></i> {{ t('api-mcp-hero-badge') }}
                </span>
                <h1 class="api-hero__title mt-3 mb-3">{{ t('api-mcp-hero-title') }}</h1>
                <p class="api-hero__subtitle mx-auto mb-0" style="max-width: 760px;">
                    {{ t('api-mcp-hero-subtitle') }}
                </p>
            </div>
        </section>

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

        <section class="api-section">
            <div class="container">
                <div class="row g-4 g-lg-5 align-items-center">
                    <div class="col-lg-6">
                        <h2 class="api-section__title text-start">{{ t('api-mcp-what-title') }}</h2>
                        <p class="api-section__subtitle text-start">{{ t('api-mcp-what-text') }}</p>
                        <ul class="api-check-list">
                            @foreach (range(1, 3) as $i)
                                <li>
                                    <i class="fa-solid fa-circle-check" aria-hidden="true"></i>
                                    <div>
                                        <strong>{{ t('api-mcp-benefit-' . $i . '-title') }}</strong>
                                        <span>{{ t('api-mcp-benefit-' . $i . '-text') }}</span>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="col-lg-6">
                        <div class="api-endpoint-box">
                            <div class="api-endpoint-box__row">
                                <span class="api-endpoint-box__label">{{ t('api-mcp-endpoint-label') }}</span>
                                <code>{{ $mcpEndpoint }}</code>
                            </div>
                            <div class="api-endpoint-box__row">
                                <span class="api-endpoint-box__label">{{ t('api-mcp-auth-label') }}</span>
                                <code>Authorization: Bearer ab_live_…</code>
                            </div>
                            <div class="api-endpoint-box__row">
                                <span class="api-endpoint-box__label">{{ t('api-mcp-transport-label') }}</span>
                                <code>HTTP (streamable)</code>
                            </div>
                        </div>
                        <p class="api-note mt-3 mb-0">{{ str_replace(':host', $panelHost, t('api-mcp-plan-note')) }}</p>
                        {{-- Anahtar üretimi ve satın alma API panelinde --}}
                        <a href="{{ $panelUrl }}"
                            class="btn btn-outline-astro-wood btn-sm rounded-pill fw-semibold mt-3" rel="noopener">
                            {{ t('api-pricing-cta-panel') }}
                        </a>
                    </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-mcp-connect-title') }}</h2>
                    <p class="api-section__subtitle mb-0">{{ t('api-mcp-connect-subtitle') }}</p>
                </div>

                <div class="row g-3 g-lg-4">
                    @foreach ($mcpClients as $client)
                        <div class="col-12 col-lg-4">
                            <div class="api-code-card h-100">
                                <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">{{ $client['file'] ?? $client['language'] }}</span>
                                </div>
                                <div class="api-code-card__head">
                                    <span class="api-code-card__icon" aria-hidden="true"><i class="{{ $client['icon'] }}"></i></span>
                                    <div>
                                        <h3 class="api-code-card__title">{{ t('api-mcp-client-' . $client['key'] . '-title') }}</h3>
                                        <p class="api-code-card__text mb-0">{{ t('api-mcp-client-' . $client['key'] . '-text') }}</p>
                                    </div>
                                </div>
<pre class="api-code"><code>{{ $client['code'] }}</code></pre>
                            </div>
                        </div>
                    @endforeach
                </div>

                <p class="api-note text-center mt-4 mb-0">{{ t('api-mcp-restart-note') }}</p>
            </div>
        </section>

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

                <div class="row g-3">
                    @foreach ($mcpTools as $tool)
                        <div class="col-12 col-md-6 col-xl-4">
                            <div class="api-tool-group h-100">
                                <div class="api-tool-group__head">
                                    <code>{{ $tool['name'] }}</code>
                                    <span class="badge rounded-pill text-bg-light ms-auto">
                                        {{ $tool['credits'] > 0 ? $tool['credits'] . ' ' . t('api-services-credit-unit') : t('api-services-free-label') }}
                                    </span>
                                </div>
                                <div class="api-tool-group__title">{{ t($tool['name_key']) }}</div>
                                @if ($tool['description_key'])
                                    <p class="api-note mb-0">{{ t($tool['description_key']) }}</p>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <section class="api-cta">
            <div class="container text-center">
                <h2 class="api-cta__title">{{ t('api-mcp-cta-title') }}</h2>
                <p class="api-cta__text">{{ t('api-mcp-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-mcp-cta-button') }}
                    </a>
                    <a href="{{ route('api-services.docs') }}"
                        class="btn btn-outline-light rounded-pill px-4 py-2 fw-semibold">
                        {{ t('api-services-hero-cta-docs') }}
                    </a>
                </div>
            </div>
        </section>
    </div>
@endsection