@extends('website.template')
@section('title', __('labels.company_overview_meta_title'))
@section('content')

<section class="about-header-section mt-5">
    <div class="container-fluid px-3 px-lg-5">
        <div class="header-inner-box rounded-5 py-4 position-relative overflow-hidden">
            <div class="row align-items-center px-4 px-lg-5 position-relative" style="z-index: 2;">
                <div class="col-lg-8 header-text">
                    <div class="header-breadcrumb mb-3 small">
                        <small class="node-color">{{ __('labels.home') }} &gt; {{ __('labels.management_team') }} &gt; <span class="header-yallow">{{ __('labels.company_overview') }}</span></small>
                    </div>
                    <h2 class="fw-bold mb-3 text-start text-white">{{ __('labels.management_team') }}</h2>
                </div>
            </div>
            <img src="{{ asset('img/websiteImages/Vector.png') }}" class="header-vector-image" alt="">
        </div>
    </div>
</section>

<section class="py-5 about-atyab-section">
    <div class="container-fluid px-3 px-lg-5">
        <div class="row align-items-center g-4">
            <div class="col-12 col-lg-8">
                <span class="pill mb-3 p-2 px-3 rounded-5">{{ __('labels.about_brand_story') }}</span>
                
                <h2 class="card-title-primary mb-4 fw-bold">
                    {{ __('labels.about_uplifting_title') }} <span class="card-title-primary mb-4 fw-bold">{{ __('labels.about_est_since') }}</span>
                </h2>
                
                <p class="card-title-primary mb-0 fw-light lh-lg">
                    {{ __('labels.about_story_desc_1') }}
                    <br><br>
                    {{ __('labels.about_story_desc_2') }}
                </p>
            </div>
            
            <div class="col-12 col-lg-4 d-flex justify-content-center justify-content-lg-end">
                <div class="circle-text-wrapper">
                    <svg viewBox="0 0 300 300" class="circle-text-svg" aria-hidden="true">
                        <defs>
                            <clipPath id="atyabCircleClip">
                                <circle cx="150" cy="150" r="110" />
                            </clipPath>
                            <path id="atyabTextCircle" d="M150,45 A105,105 0 1,1 149.9,45" />
                        </defs>
                        
                        <image href="{{ asset('img/websiteImages/aboutpage.svg') }}" 
                               x="40" y="40" width="220" height="220" 
                               clip-path="url(#atyabCircleClip)" />
                        
                        <g class="circle-text-rotator">
                            <text class="circle-text" font-size="14" letter-spacing="2" fill="#522B3A">
                                <textPath href="#atyabTextCircle" startOffset="50%" text-anchor="middle">
                                    {{ __('labels.hero_circle_text') }}
                                </textPath>
                            </text>
                        </g>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-4 mission-vision-section">
    <div class="container-fluid px-3 px-lg-5">
        <span class="pill rounded-5 p-2 px-3 mb-4 d-inline-flex align-items-center">{{ __('labels.about_main_navigation') }}</span>
        <div class="row g-4 mission-vision-row">

            <div class="col-12 col-md-6 col-lg-3">
                <div class="card h-100 rounded-5 p-4 position-relative overflow-hidden mv-card" role="button" tabindex="0" aria-expanded="false">
                    <h2 class="fw-bold mb-3 card-title-primary head-value">{{ __('labels.mission_title') }}</h2>
                    <h4 class="fw-bold mb-2 darknode-color">{{ __('labels.mission_subtitle') }}</h4>
                    <p class="fw-light card-title-primary mt-1 p-value">
                        {{ __('labels.mission_desc') }}
                    </p>
                    <img src="{{ asset('img/websiteImages/Vector.svg') }}" class="card-watermark" alt="">
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-3">
                <div class="card h-100 rounded-5 p-4 position-relative overflow-hidden mv-card" role="button" tabindex="0" aria-expanded="false">
                    <h2 class="fw-bold mb-3 card-title-primary head-value">{{ __('labels.vision_title') }}</h2>
                    <h4 class="fw-bold mb-2 darknode-color">{{ __('labels.vision_subtitle') }}</h4>
                    <p class="fw-light card-title-primary mt-1 p-value">
                        {{ __('labels.about_vision_desc') }}
                    </p>
                    <img src="{{ asset('img/websiteImages/Vector.svg') }}" class="card-watermark" alt="">
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-3">
                <div class="card h-100 rounded-5 p-4 position-relative overflow-hidden mv-card" role="button" tabindex="0" aria-expanded="false">
                    <h2 class="fw-bold mb-3 card-title-primary head-value">{{ __('labels.purpose_title') }}</h2>
                    <h4 class="fw-bold mb-2 darknode-color">{{ __('labels.purpose_subtitle') }}</h4>
                    <p class="fw-light card-title-primary mt-1 p-value">
                        {{ __('labels.about_purpose_desc') }}
                    </p>
                    <img src="{{ asset('img/websiteImages/Vector.svg') }}" class="card-watermark" alt="">
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-3">
                <div class="card h-100 rounded-5 p-4 position-relative overflow-hidden mv-card" role="button" tabindex="0" aria-expanded="false">
                    <h2 class="fw-bold mb-3 card-title-primary head-value">Our Values</h2>
                    <h4 class="fw-bold mb-2 darknode-color">What We Stand For</h4>
                    <p class="fw-light card-title-primary mt-1 p-value">
                        Integrity, quality, innovation, and responsibility guide every decision we make across our group.
                    </p>
                    <img src="{{ asset('img/websiteImages/Vector.svg') }}" class="card-watermark" alt="">
                </div>
            </div>

        </div>
    </div>
</section>

<section class="py-4 diversity-section">
    <div class="container-fluid px-3 px-lg-5">
        <span class="pill rounded-5 p-2 px-3 mb-4 d-inline-flex align-items-center">{{ __('labels.about_diversity') }}</span>
        <div class="diversity-shell rounded-5 overflow-hidden position-relative">
            <img src="{{ asset('img/websiteImages/map.svg') }}" alt="{{ __('labels.about_world_map_alt') }}" class="diversity-map-img">
        </div>
    </div>
</section>

<section class="py-5 sectors-section">
    <div class="container-fluid px-3 px-lg-5">
        <div class="col-auto">
            <span class="pill rounded-5 p-2 px-3 mb-4 d-inline-flex align-items-center">{{ __('labels.about_our_sectors') }}</span>
        </div>

        @php
            $overviewSectors = [
                ['slug' => 'grains', 'modifier' => 'sector-card--grains', 'icon' => 'Grains.svg', 'label_key' => 'sector_grains', 'tooltip_ar' => 'sector_grains_tooltip_ar', 'tooltip_en' => 'sector_grains_tooltip_en'],
                ['slug' => 'flour', 'modifier' => 'sector-card--flour', 'icon' => 'flour.svg', 'label_key' => 'sector_flour_pre_mix', 'tooltip_ar' => 'sector_flour_tooltip_ar', 'tooltip_en' => 'sector_flour_tooltip_en'],
                ['slug' => 'baked', 'modifier' => 'sector-card--baked', 'icon' => 'baked.svg', 'label_key' => 'sector_baked_products', 'tooltip_ar' => 'sector_baked_tooltip_ar', 'tooltip_en' => 'sector_baked_tooltip_en'],
                ['slug' => 'feed', 'modifier' => 'sector-card--feed', 'icon' => 'Feed Products.svg', 'label_key' => 'sector_feed_products', 'tooltip_ar' => 'sector_feed_tooltip_ar', 'tooltip_en' => 'sector_feed_tooltip_en'],
                ['slug' => 'lab', 'modifier' => 'sector-card--lab', 'icon' => 'Laboratory.svg', 'label_key' => 'sector_laboratory', 'tooltip_ar' => 'sector_lab_tooltip_ar', 'tooltip_en' => 'sector_lab_tooltip_en'],
                ['slug' => 'logistics', 'modifier' => 'sector-card--logistics', 'icon' => 'Logistics.svg', 'label_key' => 'sector_logistics', 'tooltip_ar' => 'sector_logistics_tooltip_ar', 'tooltip_en' => 'sector_logistics_tooltip_en'],
            ];
            $sectorCardPath = 'M169.834 44.1687C157.637 44.1687 147.75 34.2812 147.75 22.0843C147.75 9.88749 137.863 0 125.666 0H98.5H34.5734C15.479 0 0 15.479 0 34.5734V162.427C0 181.521 15.479 197 34.5734 197H162.427C181.521 197 197 181.521 197 162.427L197 88.3373V68.7936C197 55.1936 185.975 44.1687 172.375 44.1687H169.834Z';
        @endphp
        <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-xl-6 g-3 g-lg-4 align-items-stretch sectors-cards-row">
            @foreach ($overviewSectors as $sec)
                <div class="col">
                    <div class="sector-item text-center h-100" tabindex="0" aria-describedby="sector-tooltip-{{ $sec['slug'] }}">
                        <div class="sector-card-wrap">
                            <div class="sector-tooltip" id="sector-tooltip-{{ $sec['slug'] }}" role="tooltip">
                                <div class="sector-tooltip__panel">
                                    @foreach (range(0, 2) as $_)
                                        <p class="sector-tooltip__ar mb-1" lang="ar">{{ __('labels.' . $sec['tooltip_ar']) }}</p>
                                    @endforeach
                                    <p class="sector-tooltip__en mb-0" lang="en">{{ __('labels.' . $sec['tooltip_en']) }}</p>
                                </div>
                            </div>
                            <div class="sector-card {{ $sec['modifier'] }}">
                                <svg viewBox="0 0 197 197" class="sector-card-shape" aria-hidden="true">
                                    <path class="sector-card-path" d="{{ $sectorCardPath }}" />
                                </svg>
                                <div class="sector-card-icon">
                                    <img src="{{ asset('img/websiteImages/icons/' . $sec['icon']) }}" alt="{{ __('labels.' . $sec['label_key']) }}" class="img-fluid">
                                </div>
                            </div>
                        </div>
                        <p class="sector-card-label fw-bold mb-0">{{ __('labels.' . $sec['label_key']) }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

@endsection