@extends('layouts.main1')
@section('content')
    @php
        use App\Models\Content;
        $content = Content::first();
    @endphp
    <!-- ========== Start hero section ========== -->
    <div class="container-fluid vh-100 px-0 pt-5">
        <video src="{{ asset('images/main.mp4') }}" autoplay loop muted
            style="  position: absolute;
  right: 0;
  top: 30px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;">
        </video>
        <div class="container-fluid bg-black bg-opacity-50 vh-100 d-flex align-items-center justify-content-center"
            style="  position: absolute;  top: 30px;  background: rgba(0, 0, 0, 0.5);  color: #f1f1f1;  width: 100%;  padding: 20px; z-index: -1;">
            <div class="d-flex  align-items-center  text-light">
                <div class=" text-center text-center rounded-5 pt-4 mb-5  ">
                    <p class="fs-4">
                        {{ __('messages.company') }}
                    </p>
                    <h1
                        class="display-1 fw-bolder {{ __('messages.theme_color') == 'light' ? 'textmain' : 'text-light ?>' }}">
                        <span class="wrap fw-bold"> {{ __('messages.company_name') }} </span>
                    </h1>
                    <h2 class="fs-5"> {{ __('messages.company_fullname') }}
                    </h2>
                    <p>
                        {{ __('messages.hero_message') }} </p>
                </div>
                {{-- <div class="container px-5 d-none d-md-block">
                    <div class="row gx-5 justify-content-center align-items-center  text-center ">
                        <div class="col ">
                            <div class="p-3  bgmain rounded-2 ">
                                <a href="/#about" class=" nav-link py-3 ">
                                    <div>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"
                                            fill="currentColor" class="bi bi-info-square" viewBox="0 0 16 16">
                                            <path
                                                d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" />
                                            <path
                                                d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0" />
                                        </svg>
                                        <p class="mt-3 "> {{ __('messages.about_title') }}</p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="col ">
                            <div class="p-3  bgmain rounded-2 ">
                                <a href="/#products" class=" nav-link py-3">
                                    <div>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"
                                            fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16">
                                            <path
                                                d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z" />
                                        </svg>
                                        <p class="mt-3"> {{ __('messages.products_title') }} </p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="col ">
                            <div class="p-3  bgmain rounded-2 ">
                                <a href="/#contact" class=" nav-link py-3">
                                    <div>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"
                                            fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
                                            <path
                                                d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z" />
                                        </svg>
                                        <p class="mt-3"> {{ __('messages.contact_us_title') }}</p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div> --}}
            </div>
        </div>
    </div>
    <!-- ========== End hero section ========== -->
    <!-- ========== Start about ========== -->
    <div id="about" class="container-fluid rounded-5 bg-white   ">
        <div class="container py-5 ">
            <div class="row  min-vh-75 align-items-center align-content-center py-5 ">
                <div class="col-md-6 reveal  ">
                    <div class="zoomarea rounded rounded-5 p-0">
                        <img src="/images/aboutus.webp" class="img-fluid rounded zoom rounded-5" alt="" />
                    </div>
                </div>
                <div class="col-md-6 text-center  p-3 reveal">
                    <div class="text-center my-5">
                        <h4>
                            {{ __('messages.about_title') }}
                        </h4>
                        <h1 class="display-1 textmain fw-bold">
                            {{ __('messages.company_name') }} </h1>
                    </div>
                    <p class="text-center">
                        {{ $content->about }} </p>
                    <div class="mt-4 reveal">
                        <a href="{{ url('/allproducts') }}"><button type="button" class="btn mainbutton me-3">
                                {{ __('messages.products_title') }}
                            </button></a>
                        <a href="/#contact">
                            <button type="button" class="btn btn-dark">
                                {{ __('messages.contact_us_title') }} </button></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ========== End about ========== -->
    <!-- ========== Start section 2 ======= -->
    <div class="container-fluid  p-0 ">
        <div class="row d-flex align-items-stretch vh-50 p-0 m-0 ">
            <div class="col-md-6 p-0  text-center aboutsection align-content-center ">
                <div class="bgmain-opacity-50  align-content-center vh-50 ">
                </div>
            </div>
            <div class="col-md-6 text-center  vh-50 align-content-center py-5 bgmain  ">
                <div class="text-center my-5">
                    <h4 class="reveal ">
                        {{ __('messages.section2subtitle') }}
                    </h4>
                    <h1 class="display-1  fw-bold reveal">
                        {{ __('messages.section2title') }} </h1>
                </div>
                <p class="reveal">
                    {{ __('messages.section2content') }} </p>
            </div>
        </div>
    </div>
    <!-- ========== End section 2  ========== -->
    <!-- ========== Start why us ========== -->
    <div class="container-fluid rounded-bottom-5 bg-white  ">
        <div class="container px-4 ">
            <div class="row d-flex align-items-stretch  vh-50   py-5 ">
                <div class="col-md-6  bgmain py-5 vh-50 text-center  align-content-center ">
                    <div class="reveal">
                        <img src="/images/jewelry.svg" width="180" alt="" class="zoom">
                    </div>
                </div>
                <div class="col-md-6 text-center py-5 vh-50 align-content-center  px-3  darkcolor">
                    <div class="text-center my-5 reveal">
                        <h4 class="">
                            {{ __('messages.section3subtitle') }} </h4>
                        <h1 class="display-1  fw-bold ">
                            {{ __('messages.section3title') }} </h1>
                        <p class="pt-3 ">
                            {{ __('messages.section3content') }} </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ========== End why us ========== -->
    <!-- ========== Start company message with background image of products  ========== -->
    <div class="container-fluid p-0 companylast rounded-bottom-5" id="back">
        <div class="container-fluid  bg-black bg-opacity-75 py-5 rounded-bottom-5 ">
            <div class="container  py-5">
                <div class="row min-vh-100 align-items-center align-content-center text-center ">
                    <div class="col-sm-12  pt-3 reveal">
                        <div class="text-center my-5">
                            <h1
                                class="display-1  fw-bold {{ __('messages.theme_color') == 'light' ? 'textmain' : 'text-light ?>' }} ">
                                {{ __('messages.section4title') }}
                            </h1>
                            <h4 class="text-light">
                                {{ __('messages.section4subtitle') }} </h4>
                            <div class="mt-3">
                                <a href="{{ url('/allproducts') }}" class="btn btn-lg mainbutton me-3">
                                    {{ __('messages.products_title') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ========== End  company message  ========== -->
    <!-- ========== Start Products ========== -->
    <div id="products"
        class="container-fluid rounded-top-5 bg-light  py-5  d-flex align-content-center justify-content-center flex-wrap">
        <div class="container py-5">
            <div class="row p-5 d-flex align-items-center align-content-center ">
                <div class="text-center reveal my-5">
                    <h1 class="display-1  textmain fw-bold">
                        {{ __('messages.products_title') }}
                    </h1>
                    <h4>
                        {{ __('messages.products_description') }}
                    </h4>
                </div>
            </div>
            <div class="row  d-flex align-items-center align-content-center  ">
                <div class="col-sm-4 text-center reveal my-3">
                    <div class="card border-0 shadow bgmain">
                        <!-- <div class="card-header fs-3 fw-bolder text-secondary ">CABLES</div> -->
                        <div class="zoomarea">
                            <img class=" zoom" src="/images/p1.svg" alt="Title" loading="lazy" />
                        </div>
                        <div class="card-body ">
                            <h4 class="card-title   pt-3">
                                سبائك
                            </h4>
                            <p class="card-text pb-3">
                            </p>
                            <a href="{{ url('/allproducts/سبائك') }}"><button type="button" class="btn btn-light me-3">
                                    عرض المنتجات </button></a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 text-center reveal my-3">
                    <div class="card border-0 shadow bgmain">
                        <!-- <div class="card-header fs-3 fw-bolder text-secondary ">CABLES</div> -->
                        <div class="zoomarea">
                            <img class=" zoom" src="/images/p2.svg" alt="Title" loading="lazy" />
                        </div>
                        <div class="card-body ">
                            <h4 class="card-title   pt-3">
                                اطقم
                            </h4>
                            <p class="card-text pb-3">
                            </p>
                            <a href="{{ url('/allproducts/اطقم') }}"><button type="button" class="btn btn-light me-3">
                                    عرض المنتجات </button></a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 text-center reveal my-3">
                    <div class="card border-0 shadow bgmain">
                        <!-- <div class="card-header fs-3 fw-bolder text-secondary ">CABLES</div> -->
                        <div class="zoomarea">
                            <img class=" zoom" src="/images/p3.svg" alt="Title" loading="lazy" />
                        </div>
                        <div class="card-body ">
                            <h4 class="card-title   pt-3">
                                خواتم
                            </h4>
                            <p class="card-text pb-3">
                            </p>
                            <a href="{{ url('/allproducts/خواتم') }}"><button type="button" class="btn btn-light me-3">
                                    عرض المنتجات </button></a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 text-center reveal my-3">
                    <div class="card border-0 shadow bgmain">
                        <!-- <div class="card-header fs-3 fw-bolder text-secondary ">CABLES</div> -->
                        <div class="zoomarea ">
                            <img class=" zoom" src="/images/p4.svg" alt="Title" loading="lazy" />
                        </div>
                        <div class="card-body ">
                            <h4 class="card-title   pt-3">
                                حلق
                            </h4>
                            <p class="card-text pb-3">
                            </p>
                            <a href="{{ url('/allproducts/حلق') }}"><button type="button" class="btn btn-light me-3">
                                    عرض المنتجات </button></a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 text-center reveal my-3">
                    <div class="card border-0 shadow bgmain">
                        <!-- <div class="card-header fs-3 fw-bolder text-secondary ">CABLES</div> -->
                        <div class="zoomarea">
                            <img class=" zoom" src="/images/p5.svg" alt="Title" loading="lazy" />
                        </div>
                        <div class="card-body ">
                            <h4 class="card-title   pt-3">
                                قلائد
                            </h4>
                            <p class="card-text pb-3">
                            </p>
                            <a href="{{ url('/allproducts/قلائد') }}"><button type="button" class="btn btn-light me-3">
                                    عرض المنتجات </button></a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 text-center reveal my-3">
                    <div class="card border-0 shadow bgmain">
                        <!-- <div class="card-header fs-3 fw-bolder text-secondary ">CABLES</div> -->
                        <div class="zoomarea">
                            <img class=" zoom" src="/images/p6.svg" alt="Title" loading="lazy" />
                        </div>
                        <div class="card-body ">
                            <h4 class="card-title   pt-3">
                                اساور
                            </h4>
                            <p class="card-text pb-3">
                            </p>
                            <a href="{{ url('/allproducts/اساور') }}"><button type="button" class="btn btn-light me-3">
                                    عرض المنتجات </button></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ========== End Products ========== -->
    <!-- ========== Start services ========== -->
    <!-- ========== End services ========== -->
    <!-- ========== Start section 5 ========== -->
    <div class="container-fluid bgdark px-3  py-5 align-content-center min-vh-100" id='section5'>
        <div class="container   ">
            <div class="row d-flex align-items-stretch vh-50 p-0 m-0 ">
                <div class="col-md-6   p-0  text-center section5 bg-black bg-opacity-50 align-content-center ">
                    <div class=" align-content-center vh-50">
                    </div>
                </div>
                <div class="col-md-6 text-center p-5 vh-50 align-content-center  bg-white text-dark">
                    <div class="text-center my-5 reveal">
                        <h1 class="display-1  fw-bold ">
                            {{ __('messages.section5title') }}
                        </h1>
                        <h4 class="">
                            {{ __('messages.section5subtitle') }}
                        </h4>
                        <p class="">
                            {{ __('messages.section5content') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ========== End section 5 ========== -->
    <!-- ========== Start contact us ========== -->
    <div class="container-fluid " id="contact">
        <div class="row d-flex align-items-stretch vh-50  ">
            <div class="col-md-6  text-center align-content-center bg-light ">
                <div class=" align-content-center  reveal">
                    <div class="text-start my-5  ">
                        <div class="row text-start my-3 mx-sm-3 bg-white p-3 py-5 rounded rounded-3">
                            <h3 class="textmain">
                                {{ __('messages.contact_us_title') }}
                            </h3>
                            <div class="col-9 ">
                                <div class="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        fill="currentColor" class="bi bi-geo-alt-fill textmain" viewBox="0 0 16 16">
                                        <path
                                            d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6" />
                                    </svg>
                                    <span class=" ps-2 ">
                                        {{ __('messages.address') }} <br>
                                    </span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        fill="currentColor" class="bi bi-telephone-fill textmain" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                            d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z" />
                                    </svg>
                                    <span class=" ps-2 " dir="ltr">
                                        <a href="tel:+964{{ $content->phonenumber_1 }}"
                                            class="text-decoration-none textmain">0
                                            {{ $content->phonenumber_1 }}</a> -
                                        <a href="tel:+964{{ $content->phonenumber_2 }}"
                                            class="text-decoration-none textmain">0
                                            {{ $content->phonenumber_2 }}</a>
                                    </span>
                                    <div class="text-start mt-5">
                                        <p class="fw-bold">{{ __('messages.email_message') }}</p>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                            fill="currentColor" class="bi bi-envelope-fill textmain" viewBox="0 0 16 16">
                                            <path
                                                d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z" />
                                        </svg><span class="ps-2 mt-2">
                                            {{ $content->email }} </span>
                                    </div>
                                    <br>
                                </div>
                            </div>
                            <div class="col-3 d-flex justify-content-center">
                                <div class="mt-3 d-flex flex-column justify-content-center">
                                    <a href="https://wa.me/00964{{ $content->waphonenumber }}">
                                        <div class=" btn btn-success rounded-1  p-2 m-1  ">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"
                                                fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16">
                                                <path
                                                    d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232" />
                                            </svg>
                                        </div>
                                    </a>
                                    <p class="text-center">
                                        {{ __('messages.wa_message') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 text-center  vh-50 align-content-center p-0 ">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d986.2245621421597!2d44.34121080836524!3d33.30469185588407!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2siq!4v1736231241008!5m2!1sen!2siq"
                    width="100%" style="aspect-ratio:1; border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>
    </div>
    <!-- ========== End contact us ========== -->
    <!-- ========== Start company end parallax  ========== -->
    <div class="container-fluid vh-100 p-0 parallax " id="hero">
        <div class="container-fluid bg-black bg-opacity-75 ">
            <div class="row vh-100 align-items-center align-content-center text-center ">
                <div class="col-sm-12   ">
                    <p class="display-1   fw-bolder {{ __('messages.theme_color') == 'light' ? 'textmain' : 'text-light ?>' }}  text-center reveal"
                        dir="ltr">
                        {{ __('messages.company_name_en') }} </p>
                    <h4 class="reveal text-light" dir="ltr"> {{ __('messages.company_fullname_en') }} </h4>
                </div>
            </div>
        </div>
    </div>
    <!-- ========== End  company end parallax  ========== -->
@endsection