@extends('layouts.master')
@push('meta')
    <meta name="title" content="{{ getSetting('app_name') ?? 'Default App Name' }}">
    <meta name="description" content="{{ getSetting('app_description') ?? '' }}">
    <meta name="keywords" content="{{ getSetting('meta_keywords') ?? '' }}">

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="{{ getSetting('app_name') ?? '' }}">
    <meta property="og:description" content="{{ getSetting('app_description') ?? '' }}">
    <meta property="og:image" content="{{ asset('storage/' . getSetting('logo')) }}">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:type" content="website">

    <!-- Twitter Meta Tags -->
    <meta name="twitter:title" content="{{ getSetting('app_name') ?? '' }}">
    <meta name="twitter:description" content="{{ getSetting('app_description') ?? '' }}">
    <meta name="twitter:image" content="{{ asset('storage/' . getSetting('logo')) }}">
    <meta name="twitter:card" content="summary_large_image">
@endpush

@section('title', __('messages.head_title'))

@push('css')
<style>
    .section-space {
        padding: 70px 0 !important;
    }
</style>
@endpush

@section('content')
    <section class="hero-section position-relative" data-aos="fade-up" data-aos-duration="1000">
        <div class="hero">
            <img src="{{ asset('storage/' . $hero->img) }}" class="img-cover" alt="site hero">
        </div>
        <div class="hero-content">
            <h1 data-aos="fade-up" data-aos-delay="1000" style="max-width: 50%; line-height: unset; font-size: xx-large;">{{ $hero->words }}</h1>
        </div>
    </section>

    @if (\App\Models\About::count() > 0)
        <!-- About Us Section -->
        <section class="about-us-section section-space" data-aos="fade-up" data-aos-duration="1000">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="text-about col-md-8" data-aos="fade-right" data-aos-duration="1000">
                        <h2 class="section-title">{{ __('messages.about') }}</h2>
                        <p class="about-description">
                            {!! html_limit(\App\Models\About::firstOrFail()->content, 500) !!}
                        </p>
                        <a href="{{ route('about') }}" class="btn-custom">{{ __('messages.Read more') }}</a>
                    </div>

                    <!-- Image Section with Zoom-in effect -->
                    <div class="img col-md-3 d-flex justify-content-end" data-aos="zoom-in" data-aos-duration="1000">
                        <img src="{{ asset('storage/about_files/' . \App\Models\About::first()->main_image) }}"
                            alt="About Image" class="about-image">
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- Our Work Section -->
    <style>#follower{
  position : absolute;
  background-color : white;
  color : white;
  padding : 15px;
  border-radius:25px;
   opacity: 0.6;
   z-index: 1000;
   display:none;
}</style>

<div id="follower"><img id='test' src="https://themarkrise.com/public/assets/images/Arrow.png" alt="img" style='width:20px;'> </div>
    <section class="work section-space " data-aos="fade-up" data-aos-duration="1000">
        <div class="container">
            <div class="row align-items-center">
                <h2 class="section-title" style="padding-bottom: 55px;" data-aos="fade-up" data-aos-delay="100">
                    {{ __('messages.OUR WORK') }}</h2>
                @forelse (\App\Models\Project::take(6)->get() as $project)
                    <div class="col-md-4 col-sm-12 project-details" data-aos="fade-up"
                        data-aos-delay="{{ $loop->index * 100 }}">
                        <a href="{{ route('project_details', $project->slug) }}">
                            @if ($project->home_img_project)
                                <img src="{{ asset('storage/' . $project->home_img_project) }}" alt="img">
                            @else
                                <div style="background: #D9D9D9;width: 414.636px; height: 423.871px;"></div>
                            @endif
                            <h3>{{ $project->name }}</h3>
                            <!--<p>{{ $project->service->contetn }}</p>-->
                        </a>
                    </div>
                @empty
                    <p>No projects available.</p>
                @endforelse
            </div>

            <div class="row align-items-center">
                <a href="{{ route('work') }}" style="width: fit-content;margin: auto;padding: 9px 26px;"
                class="btn-custom">{{ __('messages.View all') }}</a>
            </div>
        </div>
    </section>

    @include('layouts.clients')

    @include('layouts.cta')
@endsection
@push("js")
    <script language="JavaScript" type="text/javascript" src="https://code.jquery.com/jquery-3.6.2.js"></script>
        <script>
                var mouseX = 0, mouseY = 0;
                    $(".work img").mousemove(function(e){
           mouseX = e.pageX;
           mouseY = e.pageY;
            $("#follower").css('display','block');
        });
        $(".work img").hover(function(){
        
          $("#follower").stop().fadeIn();
          }, function(){
            $("#follower").stop().fadeOut();
        });
        
        // cache the selector
        var follower = $("#follower");
        var xp = 0, yp = 0;
        var loop = setInterval(function(){
            // change 12 to alter damping higher is slower
            xp += (mouseX - xp) / 12;
            yp += (mouseY - yp) / 12;
            follower.css({left:xp, top:yp});
            
        }, 30);
        </script>
@endpush