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

@section('title', 'Über uns')
@section('meta_description', 'Wir verbinden Unternehmen mit Medien, Journalisten und Multiplikatoren im deutschsprachigen Raum.')

@php
    $brand = config('domains.domains.'.config('app.theme').'.brand', []);
    $brandLabel = ($brand['name'] ?? 'businessportal').($brand['accent'] ?? '');

    // Platzhalter-Kennzahlen — vor Go-Live mit echten Werten ersetzen.
    $stats = [
        ['value' => '250.000+', 'label' => 'Veröffentlichte Meldungen'],
        ['value' => '15.000+', 'label' => 'Registrierte Unternehmen'],
        ['value' => '2,5 Mio.', 'label' => 'Monatliche Leser'],
        ['value' => '40+', 'label' => 'Länder'],
    ];

    $values = [
        ['title' => 'Qualität vor Quantität', 'text' => 'Wir setzen auf redaktionelle Qualität und kuratieren Inhalte sorgfältig, um höchste Standards zu gewährleisten.'],
        ['title' => 'DACH-Expertise', 'text' => 'Spezialisiert auf den deutschsprachigen Raum mit tiefem Verständnis für regionale Besonderheiten.'],
        ['title' => 'Kundenfokus', 'text' => 'Ihre Zufriedenheit steht im Mittelpunkt. Wir bieten persönlichen Support und maßgeschneiderte Lösungen.'],
        ['title' => 'Innovation & Technologie', 'text' => 'Kontinuierliche Weiterentwicklung unserer Plattform mit modernsten Technologien und Features.'],
    ];

    $team = [
        ['name' => 'Dr. Michael Weber', 'role' => 'Gründer & CEO', 'bio' => '15+ Jahre Erfahrung in PR und Unternehmenskommunikation'],
        ['name' => 'Sarah Hoffmann', 'role' => 'Chief Technology Officer', 'bio' => 'Expertin für digitale Plattformen und Skalierung'],
        ['name' => 'Thomas Schneider', 'role' => 'Head of Customer Success', 'bio' => 'Spezialist für Kundenzufriedenheit und Account Management'],
        ['name' => 'Lisa Müller', 'role' => 'Head of Content & Quality', 'bio' => 'Journalistin mit Schwerpunkt digitale Medien'],
    ];

    $timeline = [
        ['year' => '10', 'title' => 'Gründung', 'text' => 'Start als kleines Start-up mit der Vision, PR zu demokratisieren.'],
        ['year' => '13', 'title' => 'Expansion', 'text' => 'Erreichen von 1.000 registrierten Unternehmen.'],
        ['year' => '16', 'title' => 'Wachstum', 'text' => 'Launch der Premium-Features und Enterprise-Lösungen.'],
        ['year' => '19', 'title' => 'Innovation', 'text' => 'Einführung KI-gestützter Reichweiten-Analytics.'],
        ['year' => '22', 'title' => 'Marktführer', 'text' => 'Über 10.000 aktive Unternehmenskunden im DACH-Raum.'],
        ['year' => '25', 'title' => 'Zukunft', 'text' => 'Internationalisierung und neue KI-Features.'],
    ];
@endphp

@section('content')
    <x-web.static-page
        eyebrow="Über uns"
        title="Über {{ $brandLabel }}"
        lead="Wir verbinden Unternehmen mit Medien, Journalisten und Multiplikatoren im deutschsprachigen Raum – als Plattform für redaktionell geprüfte Unternehmenskommunikation."
        breadcrumb="Über uns"
    >
        {{-- Kennzahlen --}}
        <div class="grid gap-px bg-bg-rule border border-bg-rule grid-cols-2 lg:grid-cols-4">
            @foreach ($stats as $stat)
                <div class="bg-bg p-6 text-center">
                    <div class="font-serif text-[30px] font-semibold tracking-[-0.6px] text-brand leading-none">{{ $stat['value'] }}</div>
                    <div class="text-[12px] text-ink-3 mt-2">{{ $stat['label'] }}</div>
                </div>
            @endforeach
        </div>

        {{-- Mission --}}
        <div class="grid gap-8 lg:grid-cols-[0.8fr_1.2fr] mt-14">
            <div>
                <div class="eyebrow muted mb-1">Unsere Mission</div>
                <h2 class="font-serif text-[26px] font-semibold tracking-[-0.4px] text-ink m-0">Professionelle Kommunikation für alle zugänglich machen</h2>
            </div>
            <div class="pm-body">
                <p>
                    Wir glauben daran, dass jedes Unternehmen – unabhängig von Größe oder Budget – die Möglichkeit
                    haben sollte, seine Geschichte zu erzählen und mit relevanten Zielgruppen zu kommunizieren.
                </p>
                <p>
                    {{ $brandLabel }} demokratisiert professionelle PR-Arbeit durch innovative Technologie, faire
                    Preismodelle und exzellenten Service. Wir schaffen Sichtbarkeit für wichtige Unternehmens­nachrichten
                    und verbinden Organisationen mit den Menschen, die ihre Botschaften lesen und teilen möchten.
                </p>
            </div>
        </div>

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

        {{-- Team --}}
        <h2 class="font-serif text-[26px] font-semibold tracking-[-0.4px] text-ink m-0 mt-14 mb-4">Unser Team</h2>
        <div class="grid gap-px bg-bg-rule border border-bg-rule grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ($team as $member)
                <div class="bg-bg p-6">
                    <h3 class="text-[14px] font-semibold text-ink m-0">{{ $member['name'] }}</h3>
                    <div class="text-[12px] font-semibold text-brand mt-0.5 mb-2">{{ $member['role'] }}</div>
                    <p class="text-[12.5px] leading-[1.55] text-ink-3 m-0">{{ $member['bio'] }}</p>
                </div>
            @endforeach
        </div>

        {{-- Geschichte / Timeline --}}
        <h2 class="font-serif text-[26px] font-semibold tracking-[-0.4px] text-ink m-0 mt-14 mb-5">Unsere Geschichte</h2>
        <div class="border-l-2 border-bg-rule pl-6 space-y-7 max-w-[760px]">
            @foreach ($timeline as $milestone)
                <div class="relative">
                    <span class="absolute -left-[31px] top-0 flex items-center justify-center w-6 h-6 rounded-full bg-brand text-white text-[10px] font-bold">{{ $milestone['year'] }}</span>
                    <h3 class="text-[14px] font-semibold text-ink m-0">{{ $milestone['title'] }}</h3>
                    <p class="text-[12.5px] leading-[1.55] text-ink-2 mt-1 mb-0">{{ $milestone['text'] }}</p>
                </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">Werden Sie Teil unserer Geschichte</h2>
                <p class="text-[13px] text-ink-2 mt-1.5 mb-0">Veröffentlichen Sie Ihre nächste Pressemitteilung redaktionell geprüft und dauerhaft auffindbar.</p>
            </div>
            <div class="flex flex-wrap gap-3 flex-shrink-0">
                <a href="{{ route('veroeffentlichen') }}"
                    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">
                    Jetzt veröffentlichen
                </a>
                <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-ink border border-bg-rule-strong hover:bg-bg transition-colors rounded-[2px]">
                    Preise ansehen
                </a>
            </div>
        </div>
    </x-web.static-page>
@endsection