@extends('layouts.app', [
    'title' => $branding->meta_title ?? 'Our Brand | ' . $branding->name,
    'description' => $branding->meta_description ?? ($branding->tagline ?: 'Brand identity, guidelines, and contact information for ' . $branding->name),
    'keywords' => $branding->keywords ?? 'SEO Kenya brand, brand guidelines Kenya, SEO Kenya identity',
    'canonical' => url('/company/' . $branding->slug),
])

@section('content')
    @php
        $logoUrl = $branding->logo ? asset('assets/branding/' . $branding->logo) : null;
        $faviconUrl = $branding->favicon ? asset('assets/branding/' . $branding->favicon) : null;
        $hasAssets = $logoUrl || $faviconUrl;
        $hasContact = $branding->email || $branding->phone || $branding->address || $branding->website;
        $hasSocial = $branding->facebook_url || $branding->twitter_url || $branding->linkedin_url || $branding->instagram_url;
        $coreValues = is_array($branding->core_values) ? array_filter($branding->core_values) : array();
    @endphp

    <section class="sk-brand-hero">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb sk-brand-hero__breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">SEO Kenya Brand</li>
                </ol>
            </nav>

            <div class="sk-brand-hero__inner">
                @if($logoUrl)
                    <img src="{{ $logoUrl }}"
                         alt="{{ $branding->name }} logo"
                         class="sk-brand-hero__logo"
                         width="240"
                         height="80">
                @endif
                <h1 class="sk-brand-hero__title">{{ $branding->name }} Company Brand</h1>
                @if($branding->tagline)
                    <p class="sk-brand-hero__lead mb-0">{{ $branding->tagline }}</p>
                @endif
            </div>
        </div>
    </section>

    @if($branding->mission_statement || $branding->vision_statement)
        <section class="sk-brand-section" aria-labelledby="brand-purpose-heading">
            <div class="container">
                <h2 class="sk-brand-section__title" id="brand-purpose-heading">Mission &amp; Vision</h2>
                <div class="row g-4 g-lg-5">
                    @if($branding->mission_statement)
                        <div class="col-md-6">
                            <div class="sk-brand-block">
                                <h3 class="sk-brand-block__title">Our Mission</h3>
                                <div class="sk-brand__content blog-content">
                                    {!! $branding->mission_statement !!}
                                </div>
                            </div>
                        </div>
                    @endif
                    @if($branding->vision_statement)
                        <div class="col-md-6">
                            <div class="sk-brand-block">
                                <h3 class="sk-brand-block__title">Our Vision</h3>
                                <div class="sk-brand__content blog-content">
                                    {!! $branding->vision_statement !!}
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </section>
    @endif

    @if($branding->brand_story)
        <section class="sk-brand-section sk-brand-section--alt" aria-labelledby="brand-story-heading">
            <div class="container">
                <h2 class="sk-brand-section__title" id="brand-story-heading">Our Story</h2>
                <div class="sk-brand__content blog-content">
                    {!! $branding->brand_story !!}
                </div>
            </div>
        </section>
    @endif

    @if($branding->value_proposition)
        <section class="sk-brand-section" aria-labelledby="brand-value-heading">
            <div class="container">
                <h2 class="sk-brand-section__title" id="brand-value-heading">Value Proposition</h2>
                <div class="sk-brand__content blog-content">
                    {!! $branding->value_proposition !!}
                </div>
            </div>
        </section>
    @endif

    @if(count($coreValues) || $branding->tone_of_voice)
        <section class="sk-brand-section sk-brand-section--alt" aria-labelledby="brand-values-heading">
            <div class="container">
                @if(count($coreValues))
                    <h2 class="sk-brand-section__title" id="brand-values-heading">Core Values</h2>
                    <ul class="sk-brand-values list-unstyled mb-0">
                        @foreach($coreValues as $value)
                            <li class="sk-brand-values__item">
                                @if(is_array($value))
                                    <strong>{{ $value['title'] ?? $value['name'] ?? 'Value' }}</strong>
                                    @if(!empty($value['description']))
                                        <span>{{ $value['description'] }}</span>
                                    @endif
                                @else
                                    {{ $value }}
                                @endif
                            </li>
                        @endforeach
                    </ul>
                @endif

                @if($branding->tone_of_voice)
                    <h2 class="sk-brand-section__title {{ count($coreValues) ? 'mt-5' : '' }}" id="brand-tone-heading">Tone of Voice</h2>
                    <div class="sk-brand__content blog-content">
                        {!! $branding->tone_of_voice !!}
                    </div>
                @endif
            </div>
        </section>
    @endif

    @if($hasAssets)
        <section class="sk-brand-section" aria-labelledby="brand-assets-heading">
            <div class="container">
                <h2 class="sk-brand-section__title" id="brand-assets-heading">Brand Assets</h2>
                <p class="sk-brand-section__intro">Download official logo and icon files for press, partners, and co-marketing use.</p>
                <div class="row g-4">
                    @if($logoUrl)
                        <div class="col-md-6">
                            <div class="sk-brand-asset">
                                <div class="sk-brand-asset__preview sk-brand-asset__preview--logo">
                                    <img src="{{ $logoUrl }}" alt="{{ $branding->name }} logo" class="sk-brand-asset__image">
                                </div>
                                <div class="sk-brand-asset__body">
                                    <h3 class="sk-brand-asset__title">Company Logo</h3>
                                    <p class="sk-brand-asset__text mb-0">Primary horizontal logo for web and print.</p>
                                    <a href="{{ $logoUrl }}" class="btn btn-outline-primary btn-sm mt-3" download>
                                        <i class="fas fa-download me-2" aria-hidden="true"></i>Download Logo
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endif
                    @if($faviconUrl)
                        <div class="col-md-6">
                            <div class="sk-brand-asset">
                                <div class="sk-brand-asset__preview sk-brand-asset__preview--icon">
                                    <img src="{{ $faviconUrl }}" alt="{{ $branding->name }} favicon" class="sk-brand-asset__image sk-brand-asset__image--icon">
                                </div>
                                <div class="sk-brand-asset__body">
                                    <h3 class="sk-brand-asset__title">Favicon / Icon</h3>
                                    <p class="sk-brand-asset__text mb-0">Square mark for browser tabs and app icons.</p>
                                    <a href="{{ $faviconUrl }}" class="btn btn-outline-primary btn-sm mt-3" download>
                                        <i class="fas fa-download me-2" aria-hidden="true"></i>Download Favicon
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </section>
    @endif

    <section class="sk-brand-section sk-brand-section--alt" aria-labelledby="brand-colors-heading">
        <div class="container">
            <h2 class="sk-brand-section__title" id="brand-colors-heading">Brand Colors</h2>
            <p class="sk-brand-section__intro">Official palette from our site theme — use these values for digital and print materials.</p>
            <div class="table-responsive">
                <table class="sk-brand-table sk-brand-table--colors mb-0">
                    <thead>
                        <tr>
                            <th scope="col">Swatch</th>
                            <th scope="col">Role</th>
                            <th scope="col">Hex</th>
                            <th scope="col">CSS Variable</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <span class="sk-brand-swatch sk-brand-swatch--primary" aria-hidden="true"></span>
                            </td>
                            <td>Primary</td>
                            <td><code>#E65100</code></td>
                            <td><code>--bs-primary</code></td>
                        </tr>
                        <tr>
                            <td>
                                <span class="sk-brand-swatch sk-brand-swatch--accent" aria-hidden="true"></span>
                            </td>
                            <td>Accent</td>
                            <td><code>#FF6D00</code></td>
                            <td><code>--sk-accent</code></td>
                        </tr>
                        <tr>
                            <td>
                                <span class="sk-brand-swatch sk-brand-swatch--primary-hover" aria-hidden="true"></span>
                            </td>
                            <td>Primary Hover</td>
                            <td><code>#BF360C</code></td>
                            <td><code>--bs-primary-hover</code></td>
                        </tr>
                        <tr>
                            <td>
                                <span class="sk-brand-swatch sk-brand-swatch--primary-subtle" aria-hidden="true"></span>
                            </td>
                            <td>Primary Subtle</td>
                            <td><code>#FFF3E0</code></td>
                            <td><code>--bs-primary-subtle</code></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    @if($hasContact)
        <section class="sk-brand-section" aria-labelledby="brand-contact-heading">
            <div class="container">
                <h2 class="sk-brand-section__title" id="brand-contact-heading">Contact Information</h2>
                <div class="table-responsive">
                    <table class="sk-brand-table sk-brand-table--contact mb-0">
                        <colgroup>
                            <col class="sk-brand-table__col-label">
                            <col class="sk-brand-table__col-value">
                        </colgroup>
                        <tbody>
                            @if($branding->email)
                                <tr>
                                    <th scope="row">Email</th>
                                    <td><a href="mailto:{{ $branding->email }}">{{ $branding->email }}</a></td>
                                </tr>
                            @endif
                            @if($branding->phone)
                                <tr>
                                    <th scope="row">Phone</th>
                                    <td><a href="tel:{{ preg_replace('/\s+/', '', $branding->phone) }}">{{ $branding->phone }}</a></td>
                                </tr>
                            @endif
                            @if($branding->address)
                                <tr>
                                    <th scope="row">Address</th>
                                    <td>{{ $branding->address }}</td>
                                </tr>
                            @endif
                            @if($branding->website)
                                <tr>
                                    <th scope="row">Website</th>
                                    <td>
                                        <a href="{{ $branding->website }}" target="_blank" rel="noopener noreferrer">
                                            {{ parse_url($branding->website, PHP_URL_HOST) ?: $branding->website }}
                                        </a>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    @endif

    @if($hasSocial)
        <section class="sk-brand-section sk-brand-section--alt sk-brand-section--connect" aria-labelledby="brand-connect-heading">
            <div class="container text-center">
                <h2 class="sk-brand-section__title" id="brand-connect-heading">Connect With Us</h2>
                <p class="sk-brand-section__intro mx-auto">Follow {{ $branding->name }} for updates, insights, and community news.</p>
                <div class="sk-brand-social">
                    @if($branding->facebook_url)
                        <a href="{{ $branding->facebook_url }}" class="sk-brand-social__link" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                            <i class="fab fa-facebook-f" aria-hidden="true"></i>
                        </a>
                    @endif
                    @if($branding->twitter_url)
                        <a href="{{ $branding->twitter_url }}" class="sk-brand-social__link" target="_blank" rel="noopener noreferrer" aria-label="Twitter">
                            <i class="fab fa-twitter" aria-hidden="true"></i>
                        </a>
                    @endif
                    @if($branding->linkedin_url)
                        <a href="{{ $branding->linkedin_url }}" class="sk-brand-social__link" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
                            <i class="fab fa-linkedin-in" aria-hidden="true"></i>
                        </a>
                    @endif
                    @if($branding->instagram_url)
                        <a href="{{ $branding->instagram_url }}" class="sk-brand-social__link" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                            <i class="fab fa-instagram" aria-hidden="true"></i>
                        </a>
                    @endif
                </div>
            </div>
        </section>
    @endif

    <section class="sk-brand-cta">
        <div class="container text-center">
            <h2 class="sk-brand-cta__title">Work with {{ $branding->name }}</h2>
            <p class="sk-brand-cta__text mb-0">Ready to grow with search engineering built for Kenya? Book a consultation with our team.</p>
            <a href="{{ url('/book-consultation') }}" class="btn btn-primary btn-lg px-4 mt-3">Book Consultation</a>
        </div>
    </section>
@endsection