@extends('layouts.frontend')
@section('content')
{{-- Hero carousel: brand slide followed by the featured projects --}}
<section id="hero-carousel" class="relative isolate overflow-hidden bg-slate-900 text-white" data-carousel data-carousel-interval="6000">
<div class="relative h-[80vh] max-h-[760px] min-h-[520px]">
@foreach($heroSlides as $slide)
<div data-carousel-slide class="absolute inset-0 transition-opacity duration-1000 ease-in-out" style="opacity: {{ $loop->first ? '1' : '0' }}; pointer-events: {{ $loop->first ? 'auto' : 'none' }}; z-index: {{ $loop->first ? '10' : '0' }};" aria-hidden="{{ $loop->first ? 'false' : 'true' }}">
@if(!empty($slide['image']))
<img src="{{ $slide['image'] }}" alt="{{ $slide['title'] }}" class="absolute inset-0 h-full w-full object-cover" @if($loop->first) fetchpriority="high" @else loading="lazy" @endif>
@else
<div class="absolute inset-0 bg-gradient-to-br from-indigo-700 via-slate-800 to-slate-900"></div>
@endif
<div class="absolute inset-0 bg-gradient-to-r from-slate-950/95 via-slate-950/70 to-slate-900/30"></div>
<div class="relative flex h-full items-center">
<div class="mx-auto w-full max-w-7xl px-4">
<div class="max-w-2xl">
@if(!empty($slide['subtitle']))
<span class="inline-flex items-center rounded-full bg-indigo-600 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-white">{{ $slide['subtitle'] }}</span>
@endif
@if($loop->first)
<h1 class="mt-4 text-3xl font-extrabold leading-tight sm:text-4xl md:text-5xl">{{ $slide['title'] }}</h1>
@else
<h2 class="mt-4 text-3xl font-extrabold leading-tight sm:text-4xl md:text-5xl">{{ $slide['title'] }}</h2>
@endif
@if(!empty($slide['description']))
<p class="mt-4 max-w-xl text-base text-slate-200 sm:text-lg">{{ $slide['description'] }}</p>
@endif
<div class="mt-7 flex flex-wrap gap-3">
<a href="{{ $slide['url'] }}" class="rounded-lg bg-indigo-600 px-6 py-3 text-sm font-semibold text-white shadow-lg transition hover:bg-indigo-500">{{ $slide['cta'] }}</a>
<a href="{{ route('contact.index') }}" class="rounded-lg border border-white/70 px-6 py-3 text-sm font-semibold text-white transition hover:bg-white/10">Get a quote</a>
</div>
</div>
</div>
</div>
</div>
@endforeach
</div>

@if($heroSlides->count() > 1)
<button type="button" data-carousel-prev class="absolute left-3 top-1/2 z-20 hidden -translate-y-1/2 items-center justify-center rounded-full bg-slate-900/50 p-2 text-white transition hover:bg-slate-900/80 md:flex" aria-label="Previous slide">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
</button>
<button type="button" data-carousel-next class="absolute right-3 top-1/2 z-20 hidden -translate-y-1/2 items-center justify-center rounded-full bg-slate-900/50 p-2 text-white transition hover:bg-slate-900/80 md:flex" aria-label="Next slide">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</button>
<div class="absolute bottom-5 left-1/2 z-20 flex -translate-x-1/2 items-center gap-2">
@foreach($heroSlides as $slide)
<button type="button" data-carousel-dot class="h-2.5 rounded-full transition-all duration-300" style="width: {{ $loop->first ? '2rem' : '0.625rem' }}; background-color: {{ $loop->first ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 255, 255, 0.45)' }};" aria-label="Go to slide {{ $loop->iteration }}"></button>
@endforeach
</div>
@endif
</section>

{{-- Value highlights --}}
<section class="bg-white py-14">
<div class="mx-auto max-w-7xl px-4">
<div class="grid gap-6 md:grid-cols-3">
<div class="rounded-xl border border-slate-200 bg-slate-50 p-6">
<div class="font-semibold text-slate-900">Why Uttdy IT</div>
<p class="mt-2 text-sm text-slate-600">Business-focused delivery, support and documentation.</p>
</div>
<div class="rounded-xl border border-slate-200 bg-slate-50 p-6">
<div class="font-semibold text-slate-900">Industries</div>
<p class="mt-2 text-sm text-slate-600">Retail, restaurant, education, health, manufacturing and more.</p>
</div>
<div class="rounded-xl border border-slate-200 bg-slate-50 p-6">
<div class="font-semibold text-slate-900">Process</div>
<p class="mt-2 text-sm text-slate-600">Discover, build, deploy and support your solution.</p>
</div>
</div>
</div>
</section>
@if($services->count())
<section class="bg-slate-50 py-16">
<div class="mx-auto max-w-7xl px-4">
<div class="flex flex-wrap items-end justify-between gap-4">
<div>
<h2 class="text-2xl font-bold sm:text-3xl">Featured Services</h2>
<p class="mt-2 text-slate-600">Software built around the way your business already works.</p>
</div>
<a href="{{ route('services.index') }}" class="text-sm font-semibold text-indigo-600 hover:text-indigo-500">All services &rarr;</a>
</div>
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
@foreach($services as $service)
<article class="group flex flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition hover:-translate-y-1 hover:shadow-lg">
<div class="aspect-[16/10] w-full overflow-hidden bg-slate-100">
@if($service->image)
<img src="{{ asset('storage/'.$service->image) }}" alt="{{ $service->title }}" class="h-full w-full object-cover transition duration-500 group-hover:scale-105" loading="lazy">
@else
<div class="flex h-full w-full items-center justify-center bg-gradient-to-br from-indigo-600 to-slate-900">
<span class="text-4xl font-extrabold text-white/90">{{ mb_strtoupper(mb_substr($service->title, 0, 1)) }}</span>
</div>
@endif
</div>
<div class="flex flex-1 flex-col p-5">
<h3 class="text-lg font-semibold text-slate-900">{{ $service->title }}</h3>
@if($service->short_description)
<p class="mt-2 flex-1 text-sm leading-relaxed text-slate-600">{{ $service->short_description }}</p>
@endif
<a href="{{ route('services.show', $service->slug) }}" class="mt-4 text-sm font-semibold text-indigo-600 hover:text-indigo-500">Learn more &rarr;</a>
</div>
</article>
@endforeach
</div>
</div>
</section>
@endif
@if($portfolios->count())
<section class="bg-white py-16">
<div class="mx-auto max-w-7xl px-4">
<div class="flex flex-wrap items-end justify-between gap-4">
<div>
<h2 class="text-2xl font-bold sm:text-3xl">Featured Work</h2>
<p class="mt-2 text-slate-600">Projects we designed, developed and shipped.</p>
</div>
<a href="{{ route('portfolio.index') }}" class="text-sm font-semibold text-indigo-600 hover:text-indigo-500">All projects &rarr;</a>
</div>
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
@foreach($portfolios as $portfolio)
<article class="group flex flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition hover:-translate-y-1 hover:shadow-lg">
<div class="relative aspect-[16/10] w-full overflow-hidden bg-slate-100">
@if($portfolio->image)
<img src="{{ asset('storage/'.$portfolio->image) }}" alt="{{ $portfolio->title }}" class="h-full w-full object-cover transition duration-500 group-hover:scale-105" loading="lazy">
@else
<div class="flex h-full w-full items-center justify-center bg-gradient-to-br from-slate-700 to-indigo-900">
<span class="text-4xl font-extrabold text-white/90">{{ mb_strtoupper(mb_substr($portfolio->title, 0, 1)) }}</span>
</div>
@endif
@if($portfolio->category)
<span class="absolute left-3 top-3 rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-slate-700">{{ $portfolio->category }}</span>
@endif
</div>
<div class="flex flex-1 flex-col p-5">
<h3 class="text-lg font-semibold text-slate-900">{{ $portfolio->title }}</h3>
@if($portfolio->short_description)
<p class="mt-2 flex-1 text-sm leading-relaxed text-slate-600">{{ $portfolio->short_description }}</p>
@endif
<a href="{{ route('portfolio.show', $portfolio->slug) }}" class="mt-4 text-sm font-semibold text-indigo-600 hover:text-indigo-500">View project &rarr;</a>
</div>
</article>
@endforeach
</div>
</div>
</section>
@endif

{{-- Closing call to action --}}
<section class="bg-gradient-to-r from-indigo-700 to-slate-900 py-14 text-white">
<div class="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-6 px-4">
<div>
<h2 class="text-2xl font-bold sm:text-3xl">Have a project in mind?</h2>
<p class="mt-2 text-slate-200">Tell us about your business and we will suggest the right solution.</p>
</div>
<a href="{{ route('contact.index') }}" class="rounded-lg bg-white px-6 py-3 text-sm font-semibold text-indigo-700 transition hover:bg-slate-100">Get a free consultation</a>
</div>
</section>
@endsection
@push('scripts')
<script>
(function () {
    'use strict';

    document.querySelectorAll('[data-carousel]').forEach(function (carousel) {
        var slides = carousel.querySelectorAll('[data-carousel-slide]');
        var dots = carousel.querySelectorAll('[data-carousel-dot]');
        var prev = carousel.querySelector('[data-carousel-prev]');
        var next = carousel.querySelector('[data-carousel-next]');

        if (slides.length < 2) {
            return;
        }

        var index = 0;
        var timer = null;
        var delay = parseInt(carousel.getAttribute('data-carousel-interval'), 10) || 6000;

        var show = function (target) {
            index = (target + slides.length) % slides.length;

            slides.forEach(function (slide, i) {
                var active = i === index;

                slide.style.opacity = active ? '1' : '0';
                slide.style.pointerEvents = active ? 'auto' : 'none';
                slide.style.zIndex = active ? '10' : '0';
                slide.setAttribute('aria-hidden', active ? 'false' : 'true');
            });

            dots.forEach(function (dot, i) {
                var active = i === index;

                dot.style.width = active ? '2rem' : '0.625rem';
                dot.style.backgroundColor = active ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 255, 255, 0.45)';
            });
        };

        var stop = function () {
            if (timer !== null) {
                window.clearInterval(timer);
                timer = null;
            }
        };

        var start = function () {
            stop();
            timer = window.setInterval(function () {
                show(index + 1);
            }, delay);
        };

        if (prev) {
            prev.addEventListener('click', function () {
                show(index - 1);
                start();
            });
        }

        if (next) {
            next.addEventListener('click', function () {
                show(index + 1);
                start();
            });
        }

        dots.forEach(function (dot, i) {
            dot.addEventListener('click', function () {
                show(i);
                start();
            });
        });

        carousel.addEventListener('mouseenter', stop);
        carousel.addEventListener('mouseleave', start);
        carousel.addEventListener('focusin', stop);
        carousel.addEventListener('focusout', start);

        document.addEventListener('visibilitychange', function () {
            if (document.hidden) {
                stop();
            } else {
                start();
            }
        });

        var touchStartX = null;

        carousel.addEventListener('touchstart', function (event) {
            touchStartX = event.touches[0].clientX;
        }, { passive: true });

        carousel.addEventListener('touchend', function (event) {
            if (touchStartX === null) {
                return;
            }

            var delta = event.changedTouches[0].clientX - touchStartX;

            if (Math.abs(delta) > 40) {
                show(delta < 0 ? index + 1 : index - 1);
                start();
            }

            touchStartX = null;
        });

        start();
    });
})();
</script>
@endpush