@extends('front.front_layouts')

@section('content')

    {{-- Hero Section --}}
    <section class="relative pt-24 sm:pt-32 pb-12 sm:pb-20 px-4 sm:px-6 lg:px-8 overflow-hidden">
        <!-- Background Elements -->
        <div class="hero-bg-grid grid-background">
            <div class="hero-orb-primary"></div>
            <div class="hero-orb-secondary"></div>
        </div>

        <div class="max-w-7xl mx-auto">
            <div class="text-center max-w-4xl mx-auto mb-16">
                @if ($frontSetting->header_client_show == 1)
                    <!-- Badge -->
                    <div
                        class="inline-flex items-center gap-2 px-4 py-2 card border rounded-full text-sm mb-8 animate-scale-in">
                        <div class="flex -space-x-2">
                            @foreach ($frontTestimonials->take(5) as $testimonial)
                                <img src="{{ $testimonial->image_url }}" alt="{{ $testimonial->name }}"
                                    class="w-6 h-6 rounded-full border-2 border-background shadow-lg object-cover">
                            @endforeach
                        </div>
                        <span
                            class="font-medium text-muted-foreground">{{ $frontSetting->header_client_text ?? __('front.trustedByCreators') }}</span>
                    </div>
                @endif

                <!-- Headline -->
                <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-[5.5rem] font-bold text-foreground mb-6 leading-[1.1] tracking-tight animate-fade-in-up"
                    style="animation-delay: 0.1s;">
                    {{ $frontSetting->header_title ?? __('front.createStunningWebsites') }}
                    <span
                        class="block gradient-text mt-2">{{ $frontSetting->header_sub_title ?? __('front.withPowerOfAI') }}</span>
                </h1>

                <!-- Subheadline -->
                <p class="text-base sm:text-lg md:text-xl text-muted-foreground mb-8 sm:mb-10 max-w-2xl mx-auto leading-relaxed animate-fade-in-up"
                    style="animation-delay: 0.2s;">
                    {{ $frontSetting->header_description ?? __('front.transformVision') }}
                </p>

                <!-- CTA Buttons -->
                <div class="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 mb-12 sm:mb-20 animate-fade-in-up"
                    style="animation-delay: 0.3s;">
                    <a href="{{ route('front.register') }}"
                        class="btn-primary group w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 font-semibold rounded-xl transition-all hover:shadow-xl hover:shadow-white/10 hover:scale-105">
                        {{ $frontSetting->header_button1_text ?? __('front.startBuildingFree') }}
                        <svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none"
                            stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M17 8l4 4m0 0l-4 4m4-4H3" />
                        </svg>
                    </a>
                    @if ($frontSetting->header_button2_text ?? false)
                        <a href="{{ $frontSetting->header_button2_url ?? '#' }}"
                            class="btn-secondary w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 font-semibold rounded-xl transition-all hover:shadow-lg">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            {{ $frontSetting->header_button2_text }}
                        </a>
                    @endif
                </div>

                <!-- Hero Feature Highlights -->
                @if (isset($frontSetting->header_features) &&
                        is_array($frontSetting->header_features) &&
                        count($frontSetting->header_features) > 0)
                    <div class="flex flex-wrap items-center justify-center gap-x-4 sm:gap-x-8 gap-y-2 sm:gap-y-3 mb-10 sm:mb-16 animate-fade-in-up"
                        style="animation-delay: 0.35s;">
                        @foreach ($frontSetting->header_features as $featurePoint)
                            <span class="inline-flex items-center gap-2 text-sm text-white/80">
                                <svg class="w-4 h-4 text-emerald-400 flex-shrink-0" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                                        d="M5 13l4 4L19 7" />
                                </svg>
                                {{ $featurePoint }}
                            </span>
                        @endforeach
                    </div>
                @endif

                <!-- Hero Visual -->
                <div class="hero-browser-wrapper animate-scale-in" style="animation-delay: 0.4s;">
                    <!-- Decorative: Rotating Circle -->
                    <div class="hero-rotating-circle">
                        <svg viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                                <linearGradient id="circleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                                    <stop offset="0%" stop-color="#6366f1" stop-opacity="0.6" />
                                    <stop offset="25%" stop-color="#8b5cf6" stop-opacity="0.3" />
                                    <stop offset="50%" stop-color="#3b82f6" stop-opacity="0.6" />
                                    <stop offset="75%" stop-color="#06b6d4" stop-opacity="0.3" />
                                    <stop offset="100%" stop-color="#6366f1" stop-opacity="0.6" />
                                </linearGradient>
                                <filter id="glowCircle">
                                    <feGaussianBlur stdDeviation="3" result="blur" />
                                    <feMerge>
                                        <feMergeNode in="blur" />
                                        <feMergeNode in="SourceGraphic" />
                                    </feMerge>
                                </filter>
                                <filter id="glowDot">
                                    <feGaussianBlur stdDeviation="4" result="blur" />
                                    <feMerge>
                                        <feMergeNode in="blur" />
                                        <feMergeNode in="SourceGraphic" />
                                    </feMerge>
                                </filter>
                            </defs>
                            <circle cx="300" cy="300" r="270" stroke="url(#circleGrad)" stroke-width="1.5"
                                fill="none" filter="url(#glowCircle)" />
                            <circle cx="300" cy="300" r="255" stroke="rgba(139,92,246,0.12)" stroke-width="1"
                                stroke-dasharray="8 12" fill="none" />
                            <circle class="hero-orbit-dot hero-orbit-dot--1" cx="300" cy="30" r="5"
                                fill="#8b5cf6" filter="url(#glowDot)" />
                            <circle class="hero-orbit-dot hero-orbit-dot--1" cx="300" cy="30" r="10"
                                stroke="rgba(139,92,246,0.3)" stroke-width="1" fill="none" />
                            <circle class="hero-orbit-dot hero-orbit-dot--2" cx="535" cy="165" r="4"
                                fill="#6366f1" filter="url(#glowDot)" />
                            <circle class="hero-orbit-dot hero-orbit-dot--3" cx="535" cy="435" r="4"
                                fill="#3b82f6" filter="url(#glowDot)" />
                            <circle class="hero-orbit-dot hero-orbit-dot--4" cx="65" cy="435" r="3.5"
                                fill="#06b6d4" filter="url(#glowDot)" />
                            <circle class="hero-orbit-dot hero-orbit-dot--5" cx="65" cy="165" r="4"
                                fill="#8b5cf6" filter="url(#glowDot)" />
                        </svg>
                    </div>

                    <!-- 3D Tilt Container -->
                    <div class="hero-browser-tilt">
                        <!-- Animated gradient border -->
                        <div class="hero-browser-border absolute -inset-[1px] rounded-2xl z-0"></div>

                        <div class="relative rounded-2xl overflow-hidden z-10 hero-browser-card">
                            <!-- Browser Chrome -->
                            <div
                                class="flex items-center gap-2 px-5 py-3 bg-[#161b2e]/95 backdrop-blur-md border-b border-white/[0.06]">
                                <div class="flex items-center gap-2">
                                    <div class="w-3 h-3 rounded-full bg-[#ff5f57] shadow-[0_0_6px_rgba(255,95,87,0.4)]">
                                    </div>
                                    <div class="w-3 h-3 rounded-full bg-[#febc2e] shadow-[0_0_6px_rgba(254,188,46,0.4)]">
                                    </div>
                                    <div class="w-3 h-3 rounded-full bg-[#28c840] shadow-[0_0_6px_rgba(40,200,64,0.4)]">
                                    </div>
                                </div>
                                <div class="flex-1"></div>
                                <div class="flex items-center gap-3 text-white/25">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M15 19l-7-7 7-7" />
                                    </svg>
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M9 5l7 7-7 7" />
                                    </svg>
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                    </svg>
                                </div>
                            </div>

                            <!-- Content Area: Website Builder Screenshot -->
                            <div class="overflow-hidden relative">
                                <img src="{{ $frontSetting->header_background_image_url }}"
                                    alt="{{ $frontSetting->app_name ?? config('app.name') }} AI Website Builder"
                                    class="w-full h-auto block">
                                <div class="hero-browser-shimmer absolute inset-0 pointer-events-none"></div>
                                <div class="hero-browser-reflection absolute inset-0 pointer-events-none"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Floating Glow Orbs -->
                    <div
                        class="hero-glow-orb absolute -top-10 -left-10 w-36 h-36 bg-gradient-to-br from-blue-500 to-cyan-400 rounded-full opacity-20 blur-3xl">
                    </div>
                    <div class="hero-glow-orb absolute -bottom-10 -right-10 w-44 h-44 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full opacity-20 blur-3xl"
                        style="animation-delay: 1.5s;"></div>
                    <div class="hero-glow-orb absolute top-1/2 -translate-y-1/2 -left-16 w-28 h-52 bg-blue-500/60 rounded-full opacity-10 blur-3xl"
                        style="animation-delay: 0.8s;"></div>
                    <div class="hero-glow-orb absolute top-1/3 -right-16 w-28 h-52 bg-purple-500/60 rounded-full opacity-10 blur-3xl"
                        style="animation-delay: 2.2s;"></div>
                </div>
            </div>
        </div>
    </section>

    {{-- Logo Cloud / Client Websites --}}
    <section class="py-10 sm:py-16 border-y border-border bg-secondary/30 overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <p class="text-center text-sm font-medium text-muted-foreground uppercase tracking-wider mb-10">
                {{ $frontSetting->client_title ?? __('front.trustedByBusinesses') }}
            </p>
        </div>
        <!-- Marquee of client logos -->
        <div class="logo-marquee">
            <div class="logo-marquee-track">
                @if (isset($frontClients) && count($frontClients) > 0)
                    @for ($i = 0; $i < 3; $i++)
                        @foreach ($frontClients as $frontClient)
                            <div class="logo-marquee-item">
                                <img src="{{ $frontClient->logo_url }}" alt="{{ $frontClient->name }}" loading="lazy">
                            </div>
                        @endforeach
                    @endfor
                @else
                    {{-- Fallback static logos --}}
                    @for ($i = 0; $i < 6; $i++)
                        <div class="logo-marquee-item">
                            <div class="w-24 h-8 bg-white/10 rounded animate-pulse"></div>
                        </div>
                    @endfor
                @endif
            </div>
        </div>
    </section>

    {{-- Awesome Features Section --}}
    @if (isset($allHomePageFeatures) && count($allHomePageFeatures) > 0)
        <section
            class="section-divider py-16 sm:py-32 px-4 sm:px-6 lg:px-8 bg-background overflow-hidden awesome-features">
            <div class="max-w-7xl mx-auto">
                <!-- Section Header -->
                <div class="text-center max-w-3xl mx-auto mb-10 sm:mb-20 animate-on-scroll">
                    <span class="section-badge">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                        {{ $frontSetting->features_text ?? 'Features' }}
                    </span>
                    <h2 class="section-title text-anime">
                        {{ $frontSetting->feature_title ?? __('front.experienceFullPower') }}
                    </h2>
                    <p class="section-subtitle">
                        {{ $frontSetting->feature_description ?? __('front.featureSubtitle') }}
                    </p>
                </div>

                <!-- Features List with Vertical Line -->
                <div class="awesome-features__content">
                    @foreach ($allHomePageFeatures as $index => $allHomePageFeature)
                        <div class="item-row animate-on-scroll">
                            @if ($loop->odd)
                                <!-- Image Left -->
                                <div class="awesome-features__item">
                                    <div class="item-thumb">
                                        <img src="{{ $allHomePageFeature->image_url }}"
                                            alt="{{ $allHomePageFeature->title }}"
                                            class="w-full h-auto rounded-xl scale-img">
                                    </div>
                                </div>

                                <div class="divider-line"></div>

                                <!-- Content Right -->
                                <div class="awesome-features__item">
                                    <div class="item-content">
                                        <span
                                            class="item-number">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                                        <h4 class="item-title text-anime">
                                            {{ $allHomePageFeature->title }}
                                        </h4>
                                        <p>{{ $allHomePageFeature->description }}</p>
                                    </div>
                                </div>
                            @else
                                <!-- Content Left -->
                                <div class="awesome-features__item">
                                    <div class="item-content">
                                        <span
                                            class="item-number">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                                        <h4 class="item-title text-anime">
                                            {{ $allHomePageFeature->title }}
                                        </h4>
                                        <p>{{ $allHomePageFeature->description }}</p>
                                    </div>
                                </div>

                                <div class="divider-line"></div>

                                <!-- Image Right -->
                                <div class="awesome-features__item">
                                    <div class="item-thumb">
                                        <img src="{{ $allHomePageFeature->image_url }}"
                                            alt="{{ $allHomePageFeature->title }}"
                                            class="w-full h-auto rounded-xl scale-img">
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- Features Section - Header Features Grid --}}
    @if (isset($headerFeatures) && count($headerFeatures) > 0)
        <section id="features" class="section-divider py-16 sm:py-32 px-4 sm:px-6 lg:px-8 bg-background">
            <div class="max-w-7xl mx-auto">
                <!-- Section Header -->
                <div class="text-center max-w-3xl mx-auto mb-10 sm:mb-20 animate-on-scroll">
                    <span class="section-badge">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                        {{ $frontSetting->features_text ?? 'Features' }}
                    </span>
                    <h2 class="section-title text-anime">
                        {{ $frontSetting->feature_title ?? __('front.everythingYouNeed') }}
                    </h2>
                    <p class="section-subtitle">
                        {{ $frontSetting->feature_description ?? __('front.allToolsAndFeatures') }}
                    </p>
                </div>

                <!-- Feature Grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-8">
                    @foreach ($headerFeatures as $index => $feature)
                        <div class="group relative p-8 card card-hover spotlight animate-on-scroll"
                            style="animation-delay: {{ $index * 0.1 }}s;">
                            <div
                                class="w-14 h-14 rounded-xl overflow-hidden mb-5 group-hover:scale-110 transition-transform">
                                @if ($feature->image)
                                    <img src="{{ $feature->image_url }}" alt="{{ $feature->name }}"
                                        class="w-full h-full object-cover">
                                @else
                                    <div
                                        class="w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
                                        <svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24"
                                            stroke="currentColor" stroke-width="1.5">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z" />
                                        </svg>
                                    </div>
                                @endif
                            </div>
                            <h3 class="text-xl font-semibold text-foreground mb-3">{{ $feature->name }}</h3>
                            <p class="text-muted-foreground leading-relaxed">
                                {{ $feature->description }}
                            </p>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- Reviews / Testimonials Section --}}
    @if (isset($frontTestimonials) && count($frontTestimonials) > 0)
        <section class="section-divider py-16 sm:py-32 bg-background overflow-hidden testimonials-section">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10 sm:mb-16">
                <!-- Section Header -->
                <div class="text-center max-w-3xl mx-auto animate-on-scroll">
                    <span class="section-badge">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" />
                        </svg>
                        {{ $frontSetting->testimonial_badge ?? __('front.testimonials') }}
                    </span>
                    <h2 class="section-title text-anime">
                        {{ $frontSetting->testimonial_title ?? __('front.whatClientsSay') }}
                    </h2>
                    @if ($frontSetting->testimonial_description ?? false)
                        <p class="section-subtitle">
                            {{ $frontSetting->testimonial_description }}
                        </p>
                    @endif
                </div>
            </div>

            @php
                // Split testimonials into two rows for alternating marquee effect
                $testimonialCount = count($frontTestimonials);
                $midPoint = ceil($testimonialCount / 2);
                $row1Testimonials = $frontTestimonials->take($midPoint);
                $row2Testimonials = $frontTestimonials->skip($midPoint);
            @endphp

            <!-- Row 1 - scrolls left -->
            <div class="testimonial-marquee mb-6">
                <div class="testimonial-marquee-track">
                    {{-- Set 1 --}}
                    @foreach ($row1Testimonials as $testimonial)
                        <div class="testimonial-card">
                            <div class="flex gap-0.5 mb-3">
                                @for ($star = 0; $star < 5; $star++)
                                    <svg class="w-4 h-4 {{ $star < ($testimonial->rating ?? 5) ? 'text-yellow-400/90' : 'text-gray-600' }}"
                                        fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                @endfor
                            </div>
                            <p class="text-foreground/70 text-[15px] leading-relaxed italic mb-6">
                                {{ $testimonial->comment }}</p>
                            <div class="flex items-center gap-3 mt-auto">
                                <div
                                    class="w-11 h-11 rounded-full overflow-hidden border-2 border-border/40 flex-shrink-0">
                                    <img src="{{ $testimonial->image_url }}" alt="{{ $testimonial->name }}"
                                        class="w-full h-full object-cover">
                                </div>
                                <div>
                                    <h5 class="font-semibold text-foreground text-sm">{{ $testimonial->name }}</h5>
                                    @if ($testimonial->designation ?? false)
                                        <span class="text-xs text-muted-foreground">{{ $testimonial->designation }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                    {{-- Duplicate set for seamless loop --}}
                    @foreach ($row1Testimonials as $testimonial)
                        <div class="testimonial-card">
                            <div class="flex gap-0.5 mb-3">
                                @for ($star = 0; $star < 5; $star++)
                                    <svg class="w-4 h-4 {{ $star < ($testimonial->rating ?? 5) ? 'text-yellow-400/90' : 'text-gray-600' }}"
                                        fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                @endfor
                            </div>
                            <p class="text-foreground/70 text-[15px] leading-relaxed italic mb-6">
                                {{ $testimonial->comment }}</p>
                            <div class="flex items-center gap-3 mt-auto">
                                <div
                                    class="w-11 h-11 rounded-full overflow-hidden border-2 border-border/40 flex-shrink-0">
                                    <img src="{{ $testimonial->image_url }}" alt="{{ $testimonial->name }}"
                                        class="w-full h-full object-cover">
                                </div>
                                <div>
                                    <h5 class="font-semibold text-foreground text-sm">{{ $testimonial->name }}</h5>
                                    @if ($testimonial->designation ?? false)
                                        <span class="text-xs text-muted-foreground">{{ $testimonial->designation }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Row 2 - scrolls right (reverse) -->
            @if ($row2Testimonials->count() > 0)
                <div class="testimonial-marquee testimonial-marquee-reverse">
                    <div class="testimonial-marquee-track">
                        {{-- Set 1 --}}
                        @foreach ($row2Testimonials as $testimonial)
                            <div class="testimonial-card">
                                <div class="flex gap-0.5 mb-3">
                                    @for ($star = 0; $star < 5; $star++)
                                        <svg class="w-4 h-4 {{ $star < ($testimonial->rating ?? 5) ? 'text-yellow-400/90' : 'text-gray-600' }}"
                                            fill="currentColor" viewBox="0 0 20 20">
                                            <path
                                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                        </svg>
                                    @endfor
                                </div>
                                <p class="text-foreground/70 text-[15px] leading-relaxed italic mb-6">
                                    {{ $testimonial->comment }}</p>
                                <div class="flex items-center gap-3 mt-auto">
                                    <div
                                        class="w-11 h-11 rounded-full overflow-hidden border-2 border-border/40 flex-shrink-0">
                                        <img src="{{ $testimonial->image_url }}" alt="{{ $testimonial->name }}"
                                            class="w-full h-full object-cover">
                                    </div>
                                    <div>
                                        <h5 class="font-semibold text-foreground text-sm">{{ $testimonial->name }}</h5>
                                        @if ($testimonial->designation ?? false)
                                            <span
                                                class="text-xs text-muted-foreground">{{ $testimonial->designation }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        {{-- Duplicate set for seamless loop --}}
                        @foreach ($row2Testimonials as $testimonial)
                            <div class="testimonial-card">
                                <div class="flex gap-0.5 mb-3">
                                    @for ($star = 0; $star < 5; $star++)
                                        <svg class="w-4 h-4 {{ $star < ($testimonial->rating ?? 5) ? 'text-yellow-400/90' : 'text-gray-600' }}"
                                            fill="currentColor" viewBox="0 0 20 20">
                                            <path
                                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                        </svg>
                                    @endfor
                                </div>
                                <p class="text-foreground/70 text-[15px] leading-relaxed italic mb-6">
                                    {{ $testimonial->comment }}</p>
                                <div class="flex items-center gap-3 mt-auto">
                                    <div
                                        class="w-11 h-11 rounded-full overflow-hidden border-2 border-border/40 flex-shrink-0">
                                        <img src="{{ $testimonial->image_url }}" alt="{{ $testimonial->name }}"
                                            class="w-full h-full object-cover">
                                    </div>
                                    <div>
                                        <h5 class="font-semibold text-foreground text-sm">{{ $testimonial->name }}</h5>
                                        @if ($testimonial->designation ?? false)
                                            <span
                                                class="text-xs text-muted-foreground">{{ $testimonial->designation }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </section>
    @endif

    {{-- CTA Section --}}
    @include('front.sections.call_to_action')

@endsection