@php
    $isAr = $locale === 'ar';
    $isKu = $locale === 'ku';
    $isRtl = $isAr || $isKu;

    $defaultHeroImage = 'https://creative-projects.co/wp-content/uploads/2022/12/News.png';
    $heroImageUrl = ($heroSettings && $heroSettings->show_image)
        ? ($heroSettings->image ? asset('storage/'.$heroSettings->image) : $defaultHeroImage)
        : null;
@endphp
<!doctype html>
<html lang="{{ $isAr ? 'ar' : ($isKu ? 'ckb' : 'en') }}" dir="{{ $isRtl ? 'rtl' : 'ltr' }}">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>
      {{ $isAr ? 'مشاريع إبداعية – حلول البرمجيات والتسويق والإدارة' : ($isKu ? 'کریاتیڤ پڕۆجێکتس – چارەسەری سۆفتوێر، بازاڕکردن و بەڕێوەبردن' : 'Creative Projects – Software, marketing and management solutions') }}
    </title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <link href="/assets/styles.css" rel="stylesheet" />
  </head>
  <body data-page="home">
    <header class="topbar">
      <div class="container topbar-inner">
        @if($isAr)
          <a class="brand" href="/ar/index.html">
        @elseif($isKu)
          <a class="brand" href="/ku/index.html">
        @else
          <a class="brand" href="/index.html">
        @endif
          <div class="logo" aria-hidden="true"></div>
          <div class="brand-title">
            @if($isAr)
              <strong>مشاريع إبداعية</strong>
              <span>Creative Projects</span>
            @elseif($isKu)
              <strong>Creative Projects</strong>
              <span>پڕۆجێکتە خەیاڵیەکان</span>
            @else
              <strong>Creative Projects</strong>
              <span>مشاريع ابداعية</span>
            @endif
          </div>
        </a>
        <nav class="nav" data-nav>
          @if($isAr)
            <a href="/ar/index.html" data-page="home">الرئيسية</a>
            <a href="/ar/about.html" data-page="about">من نحن</a>
            <a href="/ar/services.html" data-page="services">الخدمات</a>
            <a href="/ar/products.html" data-page="products">المنتجات</a>
            <a href="/ar/works.html" data-page="works">أعمالنا</a>
            <a href="/ar/contact.html" data-page="contact">تواصل معنا</a>
            <a href="/index.html">EN</a>
            <a href="/ku/index.html">KU</a>
          @elseif($isKu)
            <a href="/ku/index.html" data-page="home">سەرەکی</a>
            <a href="/ku/about.html" data-page="about">دەربارە</a>
            <a href="/ku/services.html" data-page="services">خزمەتگوزاریەکان</a>
            <a href="/ku/products.html" data-page="products">بەرهەمەکان</a>
            <a href="/ku/works.html" data-page="works">کارەکانمان</a>
            <a href="/ku/contact.html" data-page="contact">پەیوەندی</a>
            <a href="/index.html">EN</a>
            <a href="/ar/index.html">AR</a>
          @else
            <a href="/index.html" data-page="home">Home</a>
            <a href="/about.html" data-page="about">About</a>
            <a href="/services.html" data-page="services">Services</a>
            <a href="/products.html" data-page="products">Products</a>
            <a href="/works.html" data-page="works">Works</a>
            <a href="/contact.html" data-page="contact">Contact</a>
            <a href="/ar/index.html">AR</a>
            <a href="/ku/index.html">KU</a>
          @endif
        </nav>
        <button class="menu-btn" type="button" data-menu-btn>{{ $isAr ? 'القائمة' : ($isKu ? 'مێنو' : 'Menu') }}</button>
      </div>
    </header>

    <main>
      <section class="hero">
        <div class="container hero-grid {{ $heroImageUrl ? '' : 'hero-grid--single' }}">
          <div>
            <div class="kicker">
              <span class="kicker-dot" aria-hidden="true"></span>
              {{ $isAr ? 'حلول البرمجيات والتسويق والإدارة' : ($isKu ? 'چارەسەری سۆفتوێر، بازاڕکردن و بەڕێوەبردن' : 'Software, marketing and management solutions') }}
            </div>
            <h1>{{ $isAr ? 'من الفكرة إلى المنتج' : ($isKu ? 'لە بیرۆکەوە بۆ بەرهەم' : 'FROM IDEA TO PRODUCT') }}</h1>
            <p>
              {{ $isAr
                  ? 'نحن فريق يضم أكثر من 10 مهندسين برمجيات محترفين بخبرة تزيد عن 10 سنوات في تقديم منتجات عالية الجودة. تطوير برمجيات بدورة كاملة.'
                  : ($isKu
                      ? 'ئێمە تیمێکین لە زیاتر لە 10 ئەندازیاری سۆفتوێری پڕۆفەشنال، بە زیاتر لە 10 ساڵ ئەزموون لە پێشکەشکردنی بەرهەمی بەرز-جۆر. گەشەپێدانی سۆفتوێر بە چرخی تەواو.'
                      : 'We are 10+ professional software engineers with more than 10 years of experience in delivering superior products. Full Cycle Software Development.')
              }}
            </p>
            <div class="hero-actions">
              @if($isAr)
                <a class="btn btn-primary" href="/ar/about.html">من نحن</a>
                <a class="btn btn-ghost" href="/ar/contact.html">ابدأ الآن</a>
              @elseif($isKu)
                <a class="btn btn-primary" href="/ku/about.html">دەربارەمان</a>
                <a class="btn btn-ghost" href="/ku/contact.html">دەستپێبکە</a>
              @else
                <a class="btn btn-primary" href="./about.html">About Us</a>
                <a class="btn btn-ghost" href="./contact.html">Get Started</a>
              @endif
            </div>
          </div>

          @if($heroImageUrl)
            <div class="hero-card">
              <div class="hero-card-inner">
                <img class="hero-image" alt="Creative Projects" src="{{ $heroImageUrl }}" />
                <div class="stat-grid">
                  @if($isAr)
                    <div class="stat">
                      <strong>+10 سنوات</strong>
                      <span>خبرة في تقديم منتجات متميزة.</span>
                    </div>
                    <div class="stat">
                      <strong>24/7</strong>
                      <span>دعم فني سريع على مدار السنة.</span>
                    </div>
                    <div class="stat">
                      <strong>+200</strong>
                      <span>مشروع حول العالم.</span>
                    </div>
                    <div class="stat">
                      <strong>+500</strong>
                      <span>حلول لأكثر من 500 عميل.</span>
                    </div>
                  @elseif($isKu)
                    <div class="stat">
                      <strong>+10 ساڵ</strong>
                      <span>ئەزموون لە پێشکەشکردنی بەرهەم.</span>
                    </div>
                    <div class="stat">
                      <strong>24/7</strong>
                      <span>پشتگیری خێرا بەردەوام لە ماوەی ساڵ.</span>
                    </div>
                    <div class="stat">
                      <strong>+200</strong>
                      <span>پڕۆجێکت لە سەرانسەری جیهان.</span>
                    </div>
                    <div class="stat">
                      <strong>+500</strong>
                      <span>چارەسەری بۆ زیاتر لە 500 کڕیار.</span>
                    </div>
                  @else
                    <div class="stat">
                      <strong>10+ Years</strong>
                      <span>Experience in delivering superior products.</span>
                    </div>
                    <div class="stat">
                      <strong>24/7</strong>
                      <span>Continuous fast technical support throughout the year.</span>
                    </div>
                    <div class="stat">
                      <strong>200+</strong>
                      <span>Projects around the world.</span>
                    </div>
                    <div class="stat">
                      <strong>500+</strong>
                      <span>Customers supported with tailored solutions.</span>
                    </div>
                  @endif
                </div>
              </div>
            </div>
          @endif
        </div>
      </section>

      @if(! $isAr && ! $isKu)
        <section class="section">
          <div class="container">
            <div class="section-title">
              <div>
                <h2>What We Do</h2>
                <p>Software solutions and marketing solutions designed to grow your business.</p>
              </div>
            </div>

            <div class="grid grid-3">
              <div class="card">
                <div class="pill"><i aria-hidden="true"></i>SOFTWARE SOLUTIONS</div>
                <h3>Developing Responsive Websites</h3>
                <p>We offer website development services using the latest technology to create an optimal digital version for your business.</p>
              </div>
              <div class="card">
                <div class="pill"><i aria-hidden="true"></i>SOFTWARE SOLUTIONS</div>
                <h3>Developing Mobile Applications</h3>
                <p>We offer mobile development services on both platforms (Apple and Android) using modern development languages.</p>
              </div>
              <div class="card">
                <div class="pill"><i aria-hidden="true"></i>SOFTWARE SOLUTIONS</div>
                <h3>Smart System Development</h3>
                <p>We offer customized smart system development which would facilitate and further develop your company.</p>
              </div>
            </div>
          </div>
        </section>

        <section class="section">
          <div class="container">
            <div class="section-title">
              <div>
                <h2>Marketing Solutions</h2>
                <p>Choose the strongest. High quality in everything related to marketing.</p>
              </div>
            </div>
            <div class="grid grid-2">
              <div class="card">
                <div class="pill"><i aria-hidden="true"></i>01</div>
                <h3>Creativity</h3>
                <p>Creativity, authenticity and out-of-the-box ideas are the pillars in any marketing consultancy we offer.</p>
              </div>
              <div class="card">
                <div class="pill"><i aria-hidden="true"></i>02</div>
                <h3>Social Media</h3>
                <p>We offer social media page management and campaigns with highly guaranteed results.</p>
              </div>
              <div class="card">
                <div class="pill"><i aria-hidden="true"></i>03</div>
                <h3>Advertising Campaigns</h3>
                <p>We offer comprehensive advertising campaigns to increase your sales and expand your business.</p>
              </div>
              <div class="card">
                <div class="pill"><i aria-hidden="true"></i>04</div>
                <h3>Marketing Consultancy</h3>
                <p>Creativity, authenticity and out-of-the-box ideas are the pillars in any marketing consultancy we offer.</p>
              </div>
            </div>
          </div>
        </section>

        <section class="section">
          <div class="container">
            <div class="section-title">
              <div>
                <h2>Our Products</h2>
                <p>Choose the strongest. Ready products and reliable services.</p>
              </div>
            </div>
            <div class="grid grid-3">
              <div class="card">
                <h3>E-Commerce Platform &amp; Application</h3>
                <p>E-Commerce solution which includes more than 25 features ready to be applied to your shop.</p>
              </div>
              <div class="card">
                <h3>Best Hosting</h3>
                <p>The company offers the best hosting services for websites, systems and applications.</p>
              </div>
              <div class="card">
                <h3>E-School Platform &amp; Application</h3>
                <p>A comprehensive E-school platform with more than 50 features facilitating communication between administration, teachers, parents and students.</p>
              </div>
              <div class="card">
                <h3>E-Mall Platform &amp; Application</h3>
                <p>E-commerce solution with multiple shops, and each shop owner controls their shop’s content and orders.</p>
              </div>
              <div class="card">
                <h3>Enterprise Resource Planning (ERP) System</h3>
                <p>A comprehensive digital solution to manage employees and workflow.</p>
              </div>
              <div class="card">
                <h3>24/7 Support</h3>
                <p>Continuous technical support service 24 hours a day throughout the week and year.</p>
              </div>
            </div>
          </div>
        </section>

        <section class="cta">
          <div class="container">
            <div class="cta-card">
              <div>
                <h3>Ready To Work With Us</h3>
                <p>We are proud to have happy clients from 11 different countries, completion of 200+ projects around the world, and providing solutions for 500+ customers.</p>
              </div>
              <div class="hero-actions" style="justify-content: flex-end">
                <a class="btn btn-primary" href="./contact.html">Contact</a>
                <a class="btn btn-ghost" href="./works.html">Our Works</a>
              </div>
            </div>
          </div>
        </section>
      @elseif($isAr)
        <section class="section">
          <div class="container">
            <div class="section-title">
              <div>
                <h2>ماذا نقدم</h2>
                <p>حلول برمجية وتسويقية مصممة لتنمية أعمالك.</p>
              </div>
            </div>

            <div class="grid grid-3">
              <div class="card">
                <div class="pill"><i aria-hidden="true"></i>حلول برمجية</div>
                <h3>تطوير مواقع متجاوبة</h3>
                <p>نقدم خدمات تطوير المواقع بأحدث التقنيات لإنشاء حضور رقمي مثالي لعملك.</p>
              </div>
              <div class="card">
                <div class="pill"><i aria-hidden="true"></i>حلول برمجية</div>
                <h3>تطوير تطبيقات موبايل</h3>
                <p>نطور تطبيقات على منصتي iOS و Android باستخدام أحدث التقنيات.</p>
              </div>
              <div class="card">
                <div class="pill"><i aria-hidden="true"></i>حلول برمجية</div>
                <h3>تطوير أنظمة ذكية</h3>
                <p>نقدم تطوير أنظمة ذكية مخصصة لتسهيل العمل وتطوير شركتك.</p>
              </div>
            </div>
          </div>
        </section>

        <section class="section">
          <div class="container">
            <div class="section-title">
              <div>
                <h2>حلول تسويقية</h2>
                <p>اختر الأقوى. جودة عالية في كل ما يتعلق بالتسويق.</p>
              </div>
            </div>
            <div class="grid grid-2">
              <div class="card">
                <div class="pill"><i aria-hidden="true"></i>01</div>
                <h3>الإبداع</h3>
                <p>الإبداع والأفكار خارج الصندوق ركائز أي استشارة تسويقية نقدمها.</p>
              </div>
              <div class="card">
                <div class="pill"><i aria-hidden="true"></i>02</div>
                <h3>السوشيال ميديا</h3>
                <p>إدارة صفحات وحملات التواصل الاجتماعي بنتائج مضمونة.</p>
              </div>
              <div class="card">
                <div class="pill"><i aria-hidden="true"></i>03</div>
                <h3>حملات إعلانية</h3>
                <p>حملات إعلانية متكاملة لزيادة المبيعات وتوسيع الأعمال.</p>
              </div>
              <div class="card">
                <div class="pill"><i aria-hidden="true"></i>04</div>
                <h3>استشارات تسويقية</h3>
                <p>الإبداع والأصالة ركائز أي استشارة تسويقية نقدمها.</p>
              </div>
            </div>
          </div>
        </section>

        <section class="cta">
          <div class="container">
            <div class="cta-card">
              <div>
                <h3>جاهزون للعمل معك</h3>
                <p>نفخر بعملائنا في 11 دولة، وإنجاز +200 مشروع، وتقديم حلول لأكثر من 500 عميل.</p>
              </div>
              <div class="hero-actions" style="justify-content: flex-end">
                <a class="btn btn-primary" href="/ar/contact.html">تواصل معنا</a>
                <a class="btn btn-ghost" href="/ar/works.html">أعمالنا</a>
              </div>
            </div>
          </div>
        </section>
      @else
        <section class="section">
          <div class="container">
            <div class="section-title">
              <div>
                <h2>چی پێشکەش دەکەین</h2>
                <p>چارەسەری سۆفتوێر و بازاڕکردن بۆ گەشەپێدانی کاروبارت.</p>
              </div>
            </div>

            <div class="grid grid-3">
              <div class="card">
                <div class="pill"><i aria-hidden="true"></i>سۆفتوێر</div>
                <h3>گەشەپێدانی وێبسایتێکی ڕیسپۆنسڤ</h3>
                <p>خزمەتگوزاری گەشەپێدانی وێبسایت بە نوێترین تەکنەلۆژیا بۆ دروستکردنی وێنەیەکی دیجیتاڵی باش.</p>
              </div>
              <div class="card">
                <div class="pill"><i aria-hidden="true"></i>مۆبایل</div>
                <h3>گەشەپێدانی ئەپلیکەیشن</h3>
                <p>گەشەپێدانی ئەپ بۆ iOS و Android بە نوێترین تەکنەلۆژیا.</p>
              </div>
              <div class="card">
                <div class="pill"><i aria-hidden="true"></i>سیستەم</div>
                <h3>گەشەپێدانی سیستەمی زیرەک</h3>
                <p>سیستەمی تایبەتمەند بۆ ئاسانکردنی کار و گەشەپێدانی کۆمپانیاکەت.</p>
              </div>
            </div>
          </div>
        </section>

        <section class="cta">
          <div class="container">
            <div class="cta-card">
              <div>
                <h3>ئامادەین بۆ کارکردن لەگەڵت</h3>
                <p>فخر دەکەین بە کڕیارانی 11 وڵات، زیاتر لە +200 پڕۆجێکت، و چارەسەری بۆ زیاتر لە 500 کڕیار.</p>
              </div>
              <div class="hero-actions" style="justify-content: flex-end">
                <a class="btn btn-primary" href="/ku/contact.html">پەیوەندی</a>
                <a class="btn btn-ghost" href="/ku/works.html">کارەکانمان</a>
              </div>
            </div>
          </div>
        </section>
      @endif
    </main>

    <footer class="footer">
      <div class="container footer-grid">
        @if($isAr)
          <span>© مشاريع إبداعية</span>
          <span>بغداد المنصور الداودي · 07719777917 · 07819777917</span>
        @elseif($isKu)
          <span>© Creative Projects Co.</span>
          <span>بەغدا - مەنسوور - داوودی · 07719777917 · 07819777917</span>
        @else
          <span>© Creative Projects Co.</span>
          <span>Baghdad Almansoor Aldawoodi · 07719777917 · 07819777917</span>
        @endif
      </div>
    </footer>

    <script src="/assets/app.js"></script>
  </body>
</html>

