@extends('web.layouts.web-master')

@section('title', 'API & Integrationen')
@section('meta_description', 'Integrieren Sie unsere Dienste per REST-API: Pressemitteilungen programmatisch veröffentlichen, verwalten und abrufen.')

@php
    $features = [
        ['title' => 'RESTful API', 'text' => 'Moderne REST-Architektur mit JSON-Responses für einfache Integration in jede Programmiersprache.'],
        ['title' => 'OAuth 2.0', 'text' => 'Sichere Authentifizierung mit OAuth 2.0 und API-Tokens für maximale Sicherheit.'],
        ['title' => 'Webhooks', 'text' => 'Echtzeit-Benachrichtigungen über Events wie Veröffentlichungen oder Statusänderungen.'],
        ['title' => 'Dokumentation', 'text' => 'Umfassende API-Dokumentation mit Code-Beispielen in verschiedenen Sprachen.'],
        ['title' => 'Rate Limiting', 'text' => 'Faire Rate Limits mit klaren Headern und automatischer Skalierung bei Bedarf.'],
        ['title' => 'SDKs', 'text' => 'Offizielle SDKs für PHP, JavaScript, Python und weitere Sprachen.'],
    ];

    $integrations = ['WordPress', 'Zapier', 'Slack', 'HubSpot'];
@endphp

@section('content')
    <x-web.static-page
        eyebrow="Entwickler"
        title="API & Integrationen"
        lead="Integrieren Sie unsere Dienste nahtlos in Ihre bestehenden Systeme und Workflows – per REST-API, Webhooks und SDKs."
        breadcrumb="API"
    >
        {{-- Überblick --}}
        <div class="pm-body max-w-[760px]">
            <h2>Leistungsstarke REST-API</h2>
            <p>
                Unsere RESTful API ermöglicht es Ihnen, Pressemitteilungen programmatisch zu veröffentlichen, zu
                verwalten und abzurufen – ideal für Unternehmen mit hohem Veröffentlichungsvolumen oder bestehenden
                Content-Management-Systemen.
            </p>
            <p>
                Die API ist vollständig dokumentiert und unterstützt moderne Authentifizierungsmethoden sowie
                Webhooks für Echtzeit-Benachrichtigungen.
            </p>
        </div>

        {{-- Features --}}
        <h2 class="font-serif text-[26px] font-semibold tracking-[-0.4px] text-ink m-0 mt-14 mb-4">API-Features</h2>
        <div class="grid gap-px bg-bg-rule border border-bg-rule grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($features as $feature)
                <div class="bg-bg p-6">
                    <h3 class="text-[14px] font-semibold text-ink m-0 mb-2">{{ $feature['title'] }}</h3>
                    <p class="text-[12.5px] leading-[1.55] text-ink-2 m-0">{{ $feature['text'] }}</p>
                </div>
            @endforeach
        </div>

        {{-- Code-Beispiel --}}
        <h2 class="font-serif text-[26px] font-semibold tracking-[-0.4px] text-ink m-0 mt-14 mb-4">Schneller Einstieg</h2>
        <p class="text-[13px] text-ink-2 m-0 mb-4 max-w-[640px]">Veröffentlichen Sie Ihre erste Pressemitteilung in wenigen Zeilen Code.</p>
        <div class="bg-[#16140f] border border-bg-rule-strong rounded-[3px] p-5 overflow-x-auto">
            <div class="text-[11.5px] text-white/45 mb-3 font-mono">// Beispiel: Pressemitteilung veröffentlichen</div>
            <pre class="text-[12.5px] leading-[1.6] font-mono text-[#9ad1a5] m-0"><code>curl -X POST https://api.example.com/v1/releases \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Neue Produktankündigung",
    "content": "Unser neues Produkt …",
    "category": "wirtschaft",
    "publish_at": "2026-01-15T10:00:00Z"
  }'</code></pre>
        </div>
        {{-- TODO: Link auf die vollständige API-Dokumentation, sobald sie online ist. --}}
        <p class="text-[12px] text-ink-3 m-0 mt-3">Die vollständige Dokumentation folgt. Bei Fragen zum API-Zugang hilft unser <a href="{{ route('kontakt') }}" class="text-brand hover:underline">Support</a>.</p>

        {{-- Integrationen --}}
        <h2 class="font-serif text-[26px] font-semibold tracking-[-0.4px] text-ink m-0 mt-14 mb-4">Native Integrationen</h2>
        <div class="grid gap-px bg-bg-rule border border-bg-rule grid-cols-2 md:grid-cols-4">
            @foreach ($integrations as $integration)
                <div class="bg-bg p-6 flex items-center justify-center">
                    <span class="text-[13px] font-semibold text-ink-2">{{ $integration }}</span>
                </div>
            @endforeach
        </div>

        {{-- CTA --}}
        <div class="mt-14 border border-bg-rule bg-bg-elev p-6 sm:p-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-5">
            <div>
                <h2 class="font-serif text-[20px] font-semibold tracking-[-0.3px] text-ink m-0">Starten Sie mit der API</h2>
                <p class="text-[13px] text-ink-2 mt-1.5 mb-0">API-Zugang ist ab dem passenden Tarif verfügbar – Details finden Sie auf der Preisseite.</p>
            </div>
            <div class="flex flex-wrap gap-3 flex-shrink-0">
                <a href="{{ route('preise') }}"
                    class="inline-flex items-center justify-center gap-1.5 px-5 py-2.5 text-[12.5px] font-semibold text-white bg-brand hover:bg-brand-deep rounded-[2px] transition-colors">
                    Preise ansehen
                </a>
                <a href="{{ route('kontakt') }}"
                    class="inline-flex items-center justify-center gap-1.5 px-5 py-2.5 text-[12.5px] font-semibold text-ink border border-bg-rule-strong hover:bg-bg transition-colors rounded-[2px]">
                    Kontakt aufnehmen
                </a>
            </div>
        </div>
    </x-web.static-page>
@endsection