@extends('website.template')


@section('content')
<section class="hero-wrapper container-fluid px-3 px-lg-5" aria-label="Hero">
    <div class="position-relative d-flex flex-column hero-card-wrapper">

        <div class="hero-main-card shadow-sm rounded-20">
            <div class="hero-content p-4 p-lg-5 text-white mt-lg-5 mx-3" style="z-index: 12;">
                <div class="hero-text-stack mt-lg-5 mt-3">
                    <h1 class="display-5 hero-heading font-naveid-medium">
                        {!! __('labels.hero_title') !!}
                    </h1>
                    <h5 class="hero-subtitle font-effra-light">
                        {{ __('labels.hero_desc') }}
                    </h5>
                    <div class="hero-cta-row d-flex flex-column flex-xl-row align-items-center justify-content-center gap-3">
                        <x-btn-with-arrow
                            :href="route('companies')"
                            :label="__('labels.hero_cta_primary')"
                            class="btn-custom hero-cta-btn shadow-sm text-center justify-content-center small font-effra-light"
                            style="background-color: var(--companies-bg); color: white;" />
                        <a href="#" class="btn bg-white card-title-primary px-3 button-size rounded-pill shadow-sm d-inline-flex align-items-center justify-content-center gap-2 text-nowrap small font-effra-light hero-cta-btn">
                            {{ __('labels.hero_cta_secondary') }}
                            <img src="{{ asset('img/websiteImages/contacts.svg') }}" width="16" alt="" style="height: auto;">
                        </a>
                    </div>
                </div>
            </div>
            @php
                $isRtl = app()->getLocale() === 'ar';
                $circlePhrase = __('labels.hero_circle_text');
                $circleGlyphs = $isRtl
                    ? \App\Support\ArabicSvgText::glyphsForRing($circlePhrase, 2)
                    : [];
            @endphp
            <div class="rotating-text-wrapper" aria-hidden="true">
                @if($isRtl)
                    <canvas
                        class="rotating-text-svg hero-circle-canvas"
                        width="600"
                        height="600"
                        data-hero-circle-ar
                        data-glyphs='@json($circleGlyphs, JSON_UNESCAPED_UNICODE)'
                    ></canvas>
                @else
                    <svg viewBox="0 0 600 600" class="rotating-text-svg">
                        <defs>
                            <path id="heroCirclePath" d="M 300, 300 m -220, 0 a 220,220 0 1,1 440,0 a 220,220 0 1,1 -440,0" />
                        </defs>
                        <text class="hero-circle-svg-text">
                            <textPath href="#heroCirclePath" textLength="1300" lengthAdjust="spacing">{{ $circlePhrase }}</textPath>
                        </text>
                    </svg>
                @endif
            </div>
             <div class="hero-image-box">
                <img src="{{ asset('img/websiteImages/home-logo/newhero.svg') }}" alt="Atyab Group headquarters" class="hero-building-img">
            </div>
            <div class="hero-person" aria-hidden="true">
                <img src="{{ asset('img/websiteImages/home-logo/man.svg') }}" alt="">
            </div>
        </div>

        <div class="stats-container">
            <div class="stat-item-box">
                <h2 class="font-effra">50+</h2>
                <p class="font-effra-regular">{{ __('labels.stats_years_serving') }}</p>
            </div>
            <div class="stat-item-box">
                <h2 class="font-effra">15</h2>
                <p class="font-effra-regular">{{ __('labels.stats_companies') }}</p>
            </div>
            <div class="stat-item-box">
                <h2 class="font-effra">600+</h2>
                <p class="font-effra-regular">{{ __('labels.stats_products') }}</p>
            </div>
            <div class="stat-item-box">
                <h2 class="font-effra">50+</h2>
                <p class="font-effra-regular">{{ __('labels.international_markets') }}</p>
            </div>
            <div class="stat-item-box stat-item-box--employees">
                <h2 class="font-effra">3,000+</h2>
                <p class="font-effra-regular">{{ __('labels.stats_omanization') }}</p>
            </div>
        </div>

    </div>
</section>


<!-- Who are we / Mission card -->
<section class="who-section">
    <div class="container-fluid px-3 px-lg-5">
    <div class="row g-0 gx-md-4 align-items-center"> 
            <div class="col-lg-6">
              <div class="h-100 d-flex flex-column justify-content-center px-2">
                <div>
                  <div class="pill mb-2 p-2 px-3 d-inline-block rounded-pill mb-4">{{ __('labels.who_pill') }}</div>
                </div>
                <h1 class="main-title font-naveid-medium">{{ __('labels.who_section_title') }}</h1>
                
                <p class="description-text-who font-effra-light">
                  {{ __('labels.who_section_desc_1') }}
                </p>
                
                <p class="description-text-who font-effra-light">
                  {{ __('labels.who_section_desc_2') }}
                </p>
              </div>
            </div>
      
            <div class="col-lg-6">
              <div class="card-wrapper">
                
                <div class="leaf-vector-bg">
                  <img src="{{ asset('img/websiteImages/full-leaf-2.svg') }}" alt="Leaf Background Graphic">
                </div>
      
                <div class="card-mission">
                  <div>
                    <div class="card-subtitle-gold">{{ __('labels.core_businesses_subtitle') }}</div>
                    <h2 class="card-title-top font-naveid-medium ">{{ __('labels.core_businesses_flour_milling_title') }}</h2>
                    <p class="card-body-text font-effra-light">
                      {{ __('labels.core_businesses_flour_milling_desc') }}
                    </p>
                  </div>
      
                  <div class="indicator-dots">
                    <div class="dot active"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                  </div>
      
                  <div class="cutout-action">
                    <a href="#" class="arrow-circle text-decoration-none">
                      <i class="bi bi-arrow-up-right"></i>
                    </a>
                  </div>
                  
                </div> 
      
              </div>
            </div>
      
          </div>
    </div>
</section>

<!-- Companies -->
<section class="companies-section py-5">
    <div class="container-fluid px-3 px-lg-5">
        <div class="row mb-5 text-center justify-content-center">
            <div class="col-lg-8">
                <span class="pill mb-2 p-2 px-3 d-inline-block rounded-pill">
                    {{ __('labels.companies_pill') }}
                </span>
                <h2 class="title-main mt-3 font-naveid-medium card-title-primary"> {{ __('labels.companies_title') }}
                </h2>
            </div>
        </div>

        <div class="row justify-content-center g-0">
            <div class="col-12">
                <div class="companies-shell companies-shell--wide rounded-20 py-5">
                <p class="desc-main mt-3 mb-0 secondary font-effra-light ">
                    {!! __('labels.companies_desc') !!}
                </p>
                    <div class="companies-inner w-100">
                        @php
                            /** Order matcheclass="btn button-size rounded-pill px-3 d-inline-flex align-items-center gap-2 text-nowrap primary-btn text-white media-read-more-btn"s Figma (left → center → right). Files: public/img/websiteImages/home-logo */
                            $homeCompanyLogos = [
                                ['pos' => 1, 'file' => 'Omanus logo.svg', 'title_en' => 'Omanus'],
                                ['pos' => 2, 'file' => 'bio.svg', 'title_en' => 'Bio Products Oman SAOC', 'title_ar' => 'العمانية للمنتجات الحيوية ش.م.ع.م'],
                                ['pos' => 3, 'file' => 'Arabian Food logo.svg', 'title_en' => 'Arabian Food Production Company', 'title_ar' => 'الشركة العربية لإنتاج الأغذية'],
                                ['pos' => 4, 'file' => 'Invest logo.svg', 'title_en' => 'Atyab Investments', 'title_ar' => 'أطياب للاستثمار'],
                                ['pos' => 5, 'file' => 'Modern Dairy logo.svg', 'title_en' => 'Modern Dairy Factory LLC', 'title_ar' => 'مصنع الألبان الحديث ش.م.م'],
                                ['pos' => 6, 'file' => 'epf.png', 'title_en' => 'Emirates Poultry Farm', 'title_ar' => 'مزارع الإمارات للدواجن'],
                                ['pos' => 7, 'file' => 'Atyab Food logo.svg', 'title_en' => 'Atyab Food Industries', 'title_ar' => 'أطياب للصناعات الأغذية'],
                                ['pos' => 8, 'file' => 'Sohar Flour logo.svg', 'title_en' => 'Sohar Flour Mills', 'title_ar' => 'شركة مطاحن صحار'],
                                ['pos' => 9, 'file' => 'MPF logo.svg', 'title_en' => 'Modern Poultry Farms Co. SAOC (MPF)', 'title_ar' => 'شركة المزارع الحديثة للدواجن ش.م.ع.م'],
                                ['pos' => 10, 'file' => 'Sohar logo.svg', 'title_en' => 'Sohar Poultry Company S.A.O.C', 'title_ar' => 'شركة صحار للدواجن ش.م.م'],
                                ['pos' => 11, 'file' => 'osool.svg', 'title_en' => 'Osool Poultry S.A.O.C', 'title_ar' => 'أصول للدواجن ش.م.ع.م'],
                                ['pos' => 12, 'file' => 'alkhamile.png', 'title_en' => 'Al Khamayil', 'title_ar' => 'الخمائل'],
                                ['pos' => 13, 'file' => 'GIPF-logo.svg', 'title_en' => 'Gulf International Poultry Farm', 'title_ar' => 'مزرعة الخليج الدولية للدواجن'],
                                ['pos' => 14, 'file' => 'IFFCO logo.svg', 'title_en' => 'Atyab IFFCO Poultry', 'title_ar' => 'أطياب-افكو للدواجن'],
                                ['pos' => 15, 'file' => 'AIS logo.svg', 'title_en' => 'Atyab International Services', 'title_ar' => 'أطياب للخدمات الدولية'],

                            ];
                        @endphp
                        <div class="logos-container">
                            @foreach ($homeCompanyLogos as $brand)
                                <div class="company-logo pos-{{ $brand['pos'] }}">
                                    <span class="custom-tooltip">
                                        {{ $brand['title_en'] }}
                                        @if (filled($brand['title_ar'] ?? null))
                                            <span class="tooltip-ar">{{ $brand['title_ar'] }}</span>
                                        @endif
                                    </span>
                                    @if (!empty($brand['file']))
                                        <img src="{{ asset('img/websiteImages/home-logo/' . rawurlencode($brand['file'])) }}"
                                            alt="{{ $brand['title_en'] }}">
                                    @else
                                        <span class="company-logo__fallback" role="img"
                                            aria-label="{{ $brand['title_en'] }}">{{ $brand['fallback'] ?? '—' }}</span>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="companies-cta-wrap">
                        <x-btn-with-arrow
                            href="/group-companies"
                            :label="__('labels.companies_read_more')"
                            icon-class="ms-2"
                            class="primary-btn text-white media-read-more-btn font-effra-medium" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Company Pillars -->
<style>
    @keyframes pillarsSectionFadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    .pillars-section--fade-in {
        animation: pillarsSectionFadeIn 1s ease-in-out both;
    }
</style>
<section class="pillars-section pillars-section--fade-in py-4 py-md-5 py-lg-5 overflow-hidden">
    <div class="container-fluid px-3 px-sm-4 px-lg-5">
        
        <div class="row mb-3 mb-md-4">
            <div class="col-12 text-center text-lg-start">
                <span class="pill p-2 px-3 d-inline-block rounded-pill">{{ __('labels.pillars_pill') }}</span>
            </div>
        </div>

        <div class="row align-items-start flex-column flex-lg-row g-4 g-lg-5 justify-content-between pillars-section__main-row">

            <div class="col-12 col-lg-5">
                <div class="content-box text-center text-lg-start px-0 px-sm-2 px-lg-0">
                    <div class="pillars-headline-row">
                        <h3 class="pillars-title title-main mb-3 font-naveid-medium lh-sm px-2 px-sm-0">
                            {{ __('labels.pillars_title') }}
                        </h3>
                        <p class="desc-main pillars-desc-intro mb-0 mx-auto mx-lg-0 card-title-primary px-2 px-sm-0 text-break font-effra-light">
                            {!! __('labels.pillars_desc') !!}
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-12 col-lg-7 text-start">
                <div class="row row-cols-1 row-cols-sm-2 g-3 g-md-4 align-items-stretch pillars-section__grid">
                    
                    <div class="col d-flex">
                        <div class="pillar-item d-flex align-items-start gap-3 gap-md-4 w-100">
                            <div class="pillar-icon-circle">
                                <span class="pillar-icon pillar-icon--svg">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 24 23" fill="none">
                                        <path d="M8.02952 6.9285L11.3055 0.438C11.3684 0.30743 11.4667 0.19715 11.5893 0.119714C11.7118 0.0422789 11.8536 0.000799922 11.9985 0C12.273 0 12.5475 0.1455 12.696 0.438L15.972 6.9285L23.319 7.9725C23.5021 8.00129 23.6697 8.09236 23.7935 8.23036C23.9173 8.36836 23.9897 8.54483 23.9985 8.73C24.009 8.85328 23.9915 8.97733 23.9473 9.09291C23.9032 9.20848 23.8335 9.3126 23.7435 9.3975L18.459 14.4315L19.704 21.5265C19.821 22.191 19.164 22.7115 18.585 22.4145L11.9985 19.0305L5.41502 22.4145C5.34615 22.4503 5.27234 22.4755 5.19602 22.4895C4.68302 22.5795 4.19402 22.1085 4.29602 21.5265L5.54102 14.4315L0.258016 9.3975C0.175885 9.3198 0.110602 9.22604 0.0662193 9.12205C0.021837 9.01806 -0.000696896 8.90606 1.64206e-05 8.793C9.44399e-05 8.63315 0.0442085 8.47642 0.127516 8.34C0.186614 8.2411 0.267165 8.15674 0.363223 8.09313C0.459282 8.02953 0.568397 7.9883 0.682516 7.9725L8.02952 6.9285V6.9285ZM11.9985 17.2905C12.1196 17.29 12.239 17.3188 12.3465 17.3745L17.8755 20.2155L16.8345 14.28C16.8099 14.1435 16.8192 14.003 16.8616 13.871C16.904 13.7389 16.9781 13.6192 17.0775 13.5225L21.438 9.3675L15.36 8.5035C15.2342 8.48449 15.1148 8.43526 15.0121 8.36003C14.9095 8.28479 14.8265 8.18579 14.7705 8.0715L12 2.5845L11.9985 2.589V17.289V17.2905Z" fill="currentColor"/>
                                    </svg>
                                </span>
                            </div>
                            <div class="flex-grow-1 min-w-0">
                                <span class="pillar-label d-block mb-1 text-break font-naveid-medium">{{ __('labels.pillar_quality') }}</span>
                                <p class="pillar-desc mb-0 card-title-primary small text-break font-effra-light ">{{ __('labels.pillar_quality_desc') }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="col d-flex">
                        <div class="pillar-item d-flex align-items-start gap-3 gap-md-4 w-100">
                            <div class="pillar-icon-circle">
                                <span class="pillar-icon pillar-icon--svg">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                        <path d="M10.5 3.75C10.5 3.55109 10.579 3.36032 10.7197 3.21967C10.8603 3.07902 11.0511 3 11.25 3H21.75C21.9489 3 22.1397 3.07902 22.2803 3.21967C22.421 3.36032 22.5 3.55109 22.5 3.75V5.25C22.5 5.44891 22.421 5.63968 22.2803 5.78033C22.1397 5.92098 21.9489 6 21.75 6H11.25C11.0511 6 10.8603 5.92098 10.7197 5.78033C10.579 5.63968 10.5 5.44891 10.5 5.25V3.75ZM3 1.5C2.20435 1.5 1.44129 1.81607 0.87868 2.37868C0.316071 2.94129 0 3.70435 0 4.5L0 7.5C0 8.29565 0.316071 9.05871 0.87868 9.62132C1.44129 10.1839 2.20435 10.5 3 10.5H6C6.79565 10.5 7.55871 10.1839 8.12132 9.62132C8.68393 9.05871 9 8.29565 9 7.5V4.5C9 3.70435 8.68393 2.94129 8.12132 2.37868C7.55871 1.81607 6.79565 1.5 6 1.5H3ZM3 13.5C2.20435 13.5 1.44129 13.8161 0.87868 14.3787C0.316071 14.9413 0 15.7044 0 16.5L0 19.5C0 20.2956 0.316071 21.0587 0.87868 21.6213C1.44129 22.1839 2.20435 22.5 3 22.5H6C6.79565 22.5 7.55871 22.1839 8.12132 21.6213C8.68393 21.0587 9 20.2956 9 19.5V16.5C9 15.7044 8.68393 14.9413 8.12132 14.3787C7.55871 13.8161 6.79565 13.5 6 13.5H3ZM4.281 8.031C4.21133 8.10084 4.12857 8.15626 4.03745 8.19407C3.94633 8.23188 3.84865 8.25134 3.75 8.25134C3.65135 8.25134 3.55367 8.23188 3.46255 8.19407C3.37143 8.15626 3.28867 8.10084 3.219 8.031L1.719 6.531C1.64927 6.46127 1.59395 6.37848 1.55622 6.28738C1.51848 6.19627 1.49905 6.09862 1.49905 6C1.49905 5.90138 1.51848 5.80373 1.55622 5.71263C1.59395 5.62152 1.64927 5.53873 1.719 5.469C1.78873 5.39927 1.87152 5.34395 1.96262 5.30622C2.05373 5.26848 2.15138 5.24905 2.25 5.24905C2.34862 5.24905 2.44627 5.26848 2.53737 5.30622C2.62848 5.34395 2.71127 5.39927 2.781 5.469L3.75 6.4395L6.219 3.969C6.28873 3.89927 6.37152 3.84395 6.46262 3.80622C6.55373 3.76848 6.65138 3.74905 6.75 3.74905C6.84862 3.74905 6.94627 3.76848 7.03738 3.80622C7.12848 3.84395 7.21127 3.89927 7.281 3.969C7.35073 4.03873 7.40605 4.12152 7.44379 4.21263C7.48152 4.30373 7.50095 4.40138 7.50095 4.5C7.50095 4.59862 7.48152 4.69627 7.44379 4.78737C7.40605 4.87848 7.35073 4.96127 7.281 5.031L4.281 8.031ZM4.281 20.031C4.21133 20.1008 4.12857 20.1563 4.03745 20.1941C3.94633 20.2319 3.84865 20.2513 3.75 20.2513C3.65135 20.2513 3.55367 20.2319 3.46255 20.1941C3.37143 20.1563 3.28867 20.1008 3.219 20.031L1.719 18.531C1.57817 18.3902 1.49905 18.1992 1.49905 18C1.49905 17.8008 1.57817 17.6098 1.719 17.469C1.85983 17.3282 2.05084 17.2491 2.25 17.2491C2.44916 17.2491 2.64017 17.3282 2.781 17.469L3.75 18.4395L6.219 15.969C6.35983 15.8282 6.55084 15.7491 6.75 15.7491C6.94916 15.7491 7.14017 15.8282 7.281 15.969C7.42183 16.1098 7.50095 16.3008 7.50095 16.5C7.50095 16.6992 7.42183 16.8902 7.281 17.031L4.281 20.031ZM10.5 15.75C10.5 15.5511 10.579 15.3603 10.7197 15.2197C10.8603 15.079 11.0511 15 11.25 15H21.75C21.9489 15 22.1397 15.079 22.2803 15.2197C22.421 15.3603 22.5 15.5511 22.5 15.75V17.25C22.5 17.4489 22.421 17.6397 22.2803 17.7803C22.1397 17.921 21.9489 18 21.75 18H11.25C11.0511 18 10.8603 17.921 10.7197 17.7803C10.579 17.6397 10.5 17.4489 10.5 17.25V15.75ZM10.5 8.25C10.5 8.05109 10.579 7.86032 10.7197 7.71967C10.8603 7.57902 11.0511 7.5 11.25 7.5H18.75C18.9489 7.5 19.1397 7.57902 19.2803 7.71967C19.421 7.86032 19.5 8.05109 19.5 8.25C19.5 8.44891 19.421 8.63968 19.2803 8.78033C19.1397 8.92098 18.9489 9 18.75 9H11.25C11.0511 9 10.8603 8.92098 10.7197 8.78033C10.579 8.63968 10.5 8.44891 10.5 8.25ZM10.5 20.25C10.5 20.0511 10.579 19.8603 10.7197 19.7197C10.8603 19.579 11.0511 19.5 11.25 19.5H18.75C18.9489 19.5 19.1397 19.579 19.2803 19.7197C19.421 19.8603 19.5 20.0511 19.5 20.25C19.5 20.4489 19.421 20.6397 19.2803 20.7803C19.1397 20.921 18.9489 21 18.75 21H11.25C11.0511 21 10.8603 20.921 10.7197 20.7803C10.579 20.6397 10.5 20.4489 10.5 20.25Z" fill="currentColor"/>
                                    </svg>
                                </span>
                            </div>
                            <div class="flex-grow-1 min-w-0">
                                <span class="pillar-label d-block mb-1 text-break font-naveid-medium">{{ __('labels.pillar_innovation') }}</span>
                                <p class="pillar-desc mb-0 card-title-primary small text-break font-effra-light ">{{ __('labels.pillar_innovation_desc') }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="col d-flex">
                        <div class="pillar-item d-flex align-items-start gap-3 gap-md-4 w-100">
                            <div class="pillar-icon-circle">
                                <span class="pillar-icon pillar-icon--svg">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                        <g clip-path="url(#clip0_pillar_sustainability)">
                                            <path d="M0 0.75C0 0.551088 0.0790176 0.360322 0.21967 0.21967C0.360322 0.0790176 0.551088 0 0.75 0H8.25C8.44891 0 8.63968 0.0790176 8.78033 0.21967C8.92098 0.360322 9 0.551088 9 0.75V8.6655L15.2205 2.469C15.3611 2.3284 15.5519 2.24941 15.7507 2.24941C15.9496 2.24941 16.1404 2.3284 16.281 2.469L21.5835 7.773C21.6533 7.84267 21.7088 7.92543 21.7466 8.01655C21.7844 8.10767 21.8038 8.20535 21.8038 8.304C21.8038 8.40265 21.7844 8.50033 21.7466 8.59145C21.7088 8.68257 21.6533 8.76533 21.5835 8.835L15.3915 15H23.25C23.4489 15 23.6397 15.079 23.7803 15.2197C23.921 15.3603 24 15.5511 24 15.75V23.25C24 23.4489 23.921 23.6397 23.7803 23.7803C23.6397 23.921 23.4489 24 23.25 24H4.5C3.90898 24.0007 3.32365 23.8846 2.77765 23.6583C2.23166 23.432 1.73577 23.1001 1.3185 22.6815C0.489166 21.8549 0.0159661 20.7368 0 19.566V0.75ZM9 19.251L19.992 8.301L15.7485 4.059L9 10.782V19.2525V19.251ZM6.75 19.5C6.75 18.9033 6.51295 18.331 6.09099 17.909C5.66903 17.4871 5.09674 17.25 4.5 17.25C3.90326 17.25 3.33097 17.4871 2.90901 17.909C2.48705 18.331 2.25 18.9033 2.25 19.5C2.25 20.0967 2.48705 20.669 2.90901 21.091C3.33097 21.5129 3.90326 21.75 4.5 21.75C5.09674 21.75 5.66903 21.5129 6.09099 21.091C6.51295 20.669 6.75 20.0967 6.75 19.5ZM22.5 22.5V16.5H13.887L7.8645 22.5H22.5Z" fill="currentColor"/>
                                            <path d="M0 19.4925V19.5C2.03583e-06 19.4975 2.03583e-06 19.495 0 19.4925Z" fill="currentColor"/>
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_pillar_sustainability">
                                                <rect width="24" height="24" fill="white"/>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </span>
                            </div>
                            <div class="flex-grow-1 min-w-0">
                                <span class="pillar-label d-block mb-1 text-break font-naveid-medium">{{ __('labels.pillar_sustainability') }}</span>
                                <p class="pillar-desc mb-0 card-title-primary small text-break font-effra-light ">{{ __('labels.pillar_sustainability_desc') }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="col d-flex">
                        <div class="pillar-item d-flex align-items-start gap-3 gap-md-4 w-100">
                            <div class="pillar-icon-circle">
                                <span class="pillar-icon pillar-icon--svg">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M13.0606 2.24997C12.7793 1.96876 12.3978 1.81079 12.0001 1.81079C11.6023 1.81079 11.2208 1.96876 10.9396 2.24997L0.969051 12.219C0.82842 12.3598 0.749493 12.5507 0.749634 12.7498C0.749775 12.9488 0.828971 13.1396 0.969801 13.2802C1.11063 13.4209 1.30156 13.4998 1.50058 13.4996C1.6996 13.4995 1.89042 13.4203 2.03105 13.2795L3.00005 12.3105V20.25C3.00005 20.8467 3.2371 21.419 3.65906 21.841C4.08102 22.2629 4.65331 22.5 5.25005 22.5H18.7501C19.3468 22.5 19.9191 22.2629 20.341 21.841C20.763 21.419 21.0001 20.8467 21.0001 20.25V12.3105L21.9691 13.2795C22.1097 13.4203 22.3005 13.4995 22.4995 13.4996C22.6985 13.4998 22.8895 13.4209 23.0303 13.2802C23.1711 13.1396 23.2503 12.9488 23.2505 12.7498C23.2506 12.5507 23.1717 12.3598 23.0311 12.219L19.5001 8.68947V3.74997C19.5001 3.55106 19.421 3.36029 19.2804 3.21964C19.1397 3.07899 18.949 2.99997 18.7501 2.99997H17.2501C17.0511 2.99997 16.8604 3.07899 16.7197 3.21964C16.5791 3.36029 16.5001 3.55106 16.5001 3.74997V5.68947L13.0606 2.24997ZM19.5001 10.8105L12.0001 3.31047L4.50005 10.8105V20.25C4.50005 20.4489 4.57907 20.6396 4.71972 20.7803C4.86037 20.921 5.05114 21 5.25005 21H18.7501C18.949 21 19.1397 20.921 19.2804 20.7803C19.421 20.6396 19.5001 20.4489 19.5001 20.25V10.8105ZM12.0001 10.473C14.4961 7.96347 20.7376 12.354 12.0001 18C3.26255 12.354 9.50405 7.96347 12.0001 10.473Z" fill="currentColor"/>
                                    </svg>
                                </span>
                            </div>
                            <div class="flex-grow-1 min-w-0">
                                <span class="pillar-label d-block mb-1 text-break font-naveid-medium">{{ __('labels.pillar_customer') }}</span>
                                <p class="pillar-desc mb-0 card-title-primary small text-break font-effra-light ">{{ __('labels.pillar_customer_desc') }}</p>
                            </div>
                        </div>
                    </div>

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

<!-- Media & News -->
<section class="py-5">
    <div class="container-fluid px-3 px-lg-5">
        <div class="media-section-header mb-4">
            <span class="pill d-inline-flex align-items-center rounded-5 p-2 px-3">
                {{ __('labels.media_pill') }}
            </span>
            <div class="row g-3 align-items-center mt-3">
            <div class="col-12 col-lg">
                <h2 class="media-section__title mb-0 card-title-primary font-naveid-medium">
                    {!! __('labels.media_title') !!}
                </h2>
            </div>
            <div class="col-12 col-lg-auto">
                <div class="d-flex flex-wrap gap-2 align-items-center {{ app()->getLocale() === 'ar' ? 'justify-content-lg-start' : 'justify-content-lg-end' }} media-actions">
                  <x-btn-with-arrow
                    :href="route('blog-list')"
                    :label="__('labels.view_all_news')"
                    class="primary-btn text-white media-read-more-btn font-effra-medium" />
                <button id="btn-news" type="button"
                    class="btn btn-custom px-3 button-size rounded-pill d-inline-flex align-items-center gap-2 text-center justify-content-center text-nowrap media-filter-btn media-filter-btn--active font-effra-medium">
                    <svg xmlns="http://www.w3.org/2000/svg" class="media-filter-icon" width="24" height="21" viewBox="0 0 24 21" fill="none" aria-hidden="true">
                        <path d="M4.37885e-06 2.18485C4.37885e-06 1.60539 0.230193 1.04967 0.639931 0.639927C1.04967 0.230189 1.60539 0 2.18485 0H18.2071C18.7865 0 19.3423 0.230189 19.752 0.639927C20.1617 1.04967 20.3919 1.60539 20.3919 2.18485V17.5196C20.3919 17.9565 20.3191 18.4722 20.0453 18.9353H21.1202C21.3134 18.9353 21.4986 18.8586 21.6352 18.722C21.7718 18.5855 21.8485 18.4002 21.8485 18.2071V5.09798C21.8485 4.90483 21.9252 4.71958 22.0618 4.583C22.1984 4.44643 22.3836 4.3697 22.5768 4.3697C22.7699 4.3697 22.9552 4.44643 23.0917 4.583C23.2283 4.71958 23.305 4.90483 23.305 5.09798V18.2071C23.305 18.7865 23.0749 19.3422 22.6651 19.752C22.2554 20.1617 21.6997 20.3919 21.1202 20.3919H2.18048C1.89377 20.3919 1.60987 20.3354 1.34504 20.2255C1.08021 20.1157 0.839638 19.9547 0.637105 19.7517C0.434571 19.5488 0.27405 19.3079 0.164728 19.0428C0.0554055 18.7778 -0.000570195 18.4938 4.37885e-06 18.2071V2.18485ZM17.4788 18.9353C18.0177 18.9353 18.4314 18.628 18.7212 18.293C18.8552 18.1386 18.9354 17.8866 18.9354 17.5196V2.18485C18.9354 1.9917 18.8586 1.80645 18.722 1.66987C18.5855 1.53329 18.4002 1.45657 18.2071 1.45657H2.18485C1.9917 1.45657 1.80646 1.53329 1.66988 1.66987C1.5333 1.80645 1.45657 1.9917 1.45657 2.18485V18.2071C1.45657 18.612 1.78138 18.9353 2.18048 18.9353H17.4788Z" fill="currentColor"/>
                        <path d="M2.91314 2.91313H17.4788V5.82626H2.91314V2.91313ZM2.91314 7.28283H8.7394V11.6525H2.91314V7.28283ZM2.91314 13.1091H8.7394V14.5657H2.91314V13.1091ZM2.91314 16.0222H8.7394V17.4788H2.91314V16.0222ZM10.196 7.28283H13.1091V8.73939H10.196V7.28283ZM14.5657 7.28283H17.4788V8.73939H14.5657V7.28283ZM10.196 10.196H13.1091V11.6525H10.196V10.196ZM14.5657 10.196H17.4788V11.6525H14.5657V10.196ZM10.196 13.1091H13.1091V14.5657H10.196V13.1091ZM14.5657 13.1091H17.4788V14.5657H14.5657V13.1091ZM10.196 16.0222H13.1091V17.4788H10.196V16.0222ZM14.5657 16.0222H17.4788V17.4788H14.5657V16.0222Z" fill="currentColor"/>
                    </svg>
                    {{ __('labels.media_tab_news') }}
                </button>

                <button id="btn-blog" type="button"
                    class="btn btn-custom px-3 button-size rounded-pill d-inline-flex align-items-center gap-2 text-center justify-content-center text-nowrap media-filter-btn font-effra-medium">
                    <svg xmlns="http://www.w3.org/2000/svg" class="media-filter-icon" width="18" height="24" viewBox="0 0 18 24" fill="none" aria-hidden="true">
                        <path d="M17.4788 6.55454V20.3919C17.4788 21.1645 17.1719 21.9055 16.6255 22.4518C16.0792 22.9981 15.3383 23.305 14.5657 23.305H2.91313C2.14052 23.305 1.39955 22.9981 0.853236 22.4518C0.306918 21.9055 0 21.1645 0 20.3919V2.91313C0 2.14052 0.306918 1.39955 0.853236 0.853236C1.39955 0.306918 2.14052 0 2.91313 0H10.9242L17.4788 6.55454ZM13.1091 6.55454C12.5296 6.55454 11.9739 6.32435 11.5642 5.91462C11.1544 5.50488 10.9242 4.94915 10.9242 4.3697V1.45657H2.91313C2.52683 1.45657 2.15634 1.61002 1.88318 1.88318C1.61002 2.15634 1.45657 2.52683 1.45657 2.91313V20.3919C1.45657 20.7782 1.61002 21.1487 1.88318 21.4219C2.15634 21.695 2.52683 21.8485 2.91313 21.8485H14.5657C14.952 21.8485 15.3224 21.695 15.5956 21.4219C15.8688 21.1487 16.0222 20.7782 16.0222 20.3919V6.55454H13.1091Z" fill="currentColor"/>
                        <path d="M3.64141 18.2071C3.64141 18.0139 3.71814 17.8287 3.85472 17.6921C3.9913 17.5555 4.17654 17.4788 4.3697 17.4788H8.73939C8.93254 17.4788 9.11779 17.5555 9.25437 17.6921C9.39095 17.8287 9.46767 18.0139 9.46767 18.2071C9.46767 18.4002 9.39095 18.5855 9.25437 18.722C9.11779 18.8586 8.93254 18.9353 8.73939 18.9353H4.3697C4.17654 18.9353 3.9913 18.8586 3.85472 18.722C3.71814 18.5855 3.64141 18.4002 3.64141 18.2071ZM3.64141 15.2939C3.64141 15.1008 3.71814 14.9155 3.85472 14.779C3.9913 14.6424 4.17654 14.5657 4.3697 14.5657H13.1091C13.3022 14.5657 13.4875 14.6424 13.6241 14.779C13.7606 14.9155 13.8374 15.1008 13.8374 15.2939C13.8374 15.4871 13.7606 15.6723 13.6241 15.8089C13.4875 15.9455 13.3022 16.0222 13.1091 16.0222H4.3697C4.17654 16.0222 3.9913 15.9455 3.85472 15.8089C3.71814 15.6723 3.64141 15.4871 3.64141 15.2939ZM6.02872 9.89299L7.96596 11.1835L10.6664 8.48158C10.7205 8.42736 10.7903 8.39157 10.8658 8.37928C10.9414 8.36699 11.0189 8.37883 11.0874 8.41312L13.8374 9.83182V12.3808C13.8374 12.574 13.7606 12.7592 13.6241 12.8958C13.4875 13.0324 13.3022 13.1091 13.1091 13.1091H4.3697C4.17654 13.1091 3.9913 13.0324 3.85472 12.8958C3.71814 12.7592 3.64141 12.574 3.64141 12.3808V11.6525C3.64141 11.6525 5.88452 9.79686 6.02872 9.89299ZM6.1904 8.73939C6.48013 8.73939 6.75799 8.6243 6.96286 8.41943C7.16773 8.21456 7.28283 7.9367 7.28283 7.64697C7.28283 7.35724 7.16773 7.07938 6.96286 6.87451C6.75799 6.66964 6.48013 6.55454 6.1904 6.55454C5.90067 6.55454 5.62281 6.66964 5.41794 6.87451C5.21307 7.07938 5.09798 7.35724 5.09798 7.64697C5.09798 7.9367 5.21307 8.21456 5.41794 8.41943C5.62281 8.6243 5.90067 8.73939 6.1904 8.73939Z" fill="currentColor"/>
                    </svg>
                    {{ __('labels.media_tab_blog') }}
                </button>
                </div>
            </div>
            </div>
        </div>

        <!-- News Section -->
        <div class="media-row--news">
            @if($news->count() > 0)
            @php
            // Split news into chunks of 4 for carousel items
            $newsChunks = $news->chunk(4);
            @endphp

            <div id="carousel-news" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    @foreach($newsChunks as $key => $chunk)
                    <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                        <div class="row media-cards-row gx-2 gx-md-3 gx-lg-4 gx-xl-5 gy-4 gy-lg-5">
                            @foreach($chunk as $newsItem)
                            <div class="col-12 col-md-6 col-lg-3 media-card-col" data-media-type="news">
                                <div class="custom-card-wrapper mx-auto">
                                     <div class="main-image-container">
                                        <img src="{{ asset('/storage/' . $newsItem->image) }}"
                                            alt="{{ app()->getLocale() == 'ar' ? $newsItem->title_ar : $newsItem->title_en }}"
                                            class="card-img">
                                        <span class="media-card-date">{{ $newsItem->created_at->format('d/m/Y') }}</span>
                                        <a href="{{ route('news-page', ['id' => $newsItem->id]) }}" class="text-decoration-none">
                                            <div class="corner-cutout">
                                                <span class="yallow-circle">
                                                    <i class="bi bi-arrow-up-right arrow-icon"></i>
                                                </span>
                                            </div>
                                        </a>
                                    </div>
                                    <p class="media-card-caption small card-title-primary font-naveid-medium mb-0 mt-3 text-center">
                                        {{ \Illuminate\Support\Str::limit(app()->getLocale() == 'ar' ? $newsItem->title_ar : $newsItem->title_en, 38, '...') }}
                                    </p>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                </div>

                @if($newsChunks->count() > 1)
                <div class="carousel-indicators">
                    @foreach($newsChunks as $key => $chunk)
                    <button type="button" data-bs-target="#carousel-news" data-bs-slide-to="{{ $key }}"
                        class="{{ $key == 0 ? 'active' : '' }}" aria-label="Slide {{ $key + 1 }}"></button>
                    @endforeach
                </div>
                @endif
            </div>
            @else
            <div class="text-center py-5">
                <p class="text-muted">No news available at the moment.</p>
            </div>
            @endif
        </div>

        <!-- Articles Section -->
        <div class="media-row--blog d-none">
            <div id="carousel-blog" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    @if($article->count() > 0)
                        @php
                            // Split articles into groups of 4 for carousel items
                            $articleChunks = $article->chunk(4);
                        @endphp
                        
                        @foreach($articleChunks as $chunkIndex => $articleChunk)
                            <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                                <div class="row media-cards-row gx-2 gx-md-3 gx-lg-4 gx-xl-5 gy-4 gy-lg-5">
                                    @foreach($articleChunk as $articleItem)
                                        <div class="col-12 col-md-6 col-lg-3 media-card-col" data-media-type="blog">
                                            <div class="custom-card-wrapper mx-auto">
                                                <div class="main-image-container">
                                                     <img src="{{ asset('/storage/' . $articleItem->header_image) }}" 
                                                        alt="{{ $articleItem->title }}" 
                                                        class="card-img">
                                                    <span class="media-card-date">{{ $articleItem->created_at ? $articleItem->created_at->format('d/m/Y') : date('d/m/Y') }}</span>
                                                    <div class="corner-cutout">
                                                        <span class="yallow-circle">
                                                            @include('website.partials.media-card-curved-arrow-icon')
                                                        </span>
                                                    </div>
                                                </div>
                                                <p class="media-card-caption small card-title-primary font-naveid-medium mb-0 mt-3 text-center">
                                                    {{ \Illuminate\Support\Str::limit($articleItem->title ?? 'No title', 50, '...') }}
                                                </p>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="carousel-item active">
                            <div class="row media-cards-row gx-2 gx-md-3 gx-lg-4 gx-xl-5 gy-4 gy-lg-5">
                                <div class="col-12">
                                    <p class="text-center">No published articles available.</p>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
                
                @if($article->count() > 4)
                    <div class="carousel-indicators">
                        @php
                            $indicatorCount = ceil($article->count() / 4);
                        @endphp
                        @for($i = 0; $i < $indicatorCount; $i++)
                            <button type="button" 
                                    data-bs-target="#carousel-blog" 
                                    data-bs-slide-to="{{ $i }}" 
                                    class="{{ $i === 0 ? 'active' : '' }}"
                                    aria-label="Slide {{ $i + 1 }}">
                            </button>
                        @endfor
                    </div>
                @endif
            </div>
        </div>


    </div>
</section>
<script id="core-business-slides-data" type="application/json">{!! json_encode([
    [
        'subtitle' => __('labels.core_businesses_subtitle'),
        'title' => __('labels.core_businesses_flour_milling_title'),
        'desc' => __('labels.core_businesses_flour_milling_desc'),
    ],
    [
        'subtitle' => __('labels.core_businesses_subtitle'),
        'title' => __('labels.core_businesses_animal_feed_title'),
        'desc' => __('labels.core_businesses_animal_feed_desc'),
    ],
    [
        'subtitle' => __('labels.core_businesses_subtitle'),
        'title' => __('labels.core_businesses_food_production_title'),
        'desc' => __('labels.core_businesses_food_production_desc'),
    ],
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}</script>

@endsection