<?php
$homepageHeroBadge = $siteSettings['homepage_hero_badge'] ?? 'Luxury Building Finishes & Interior Décor';
$homepageHeroPrimaryCta = $siteSettings['homepage_hero_primary_cta'] ?? 'Start the Wizard';
$homepageHeroSecondaryCta = $siteSettings['homepage_hero_secondary_cta'] ?? 'Get Free Estimate';
$homepageServicesIntroTitle = $siteSettings['homepage_services_intro_title'] ?? 'Premium solutions from concept to completion.';
$homepageServicesIntroDescription = $siteSettings['homepage_services_intro_description'] ?? 'Balorp Ventures delivers high-end finishes for residential, commercial, and industrial projects with a refined, modern aesthetic.';
$servicesTitle = $siteSettings['homepage_services_title'] ?? 'Our Services';
$servicesDescription = $siteSettings['homepage_services_description'] ?? 'Premium building finishes, interior design, and complete renovation solutions for residential and commercial properties.';
$featuredServicesTitle = $siteSettings['homepage_featured_services_title'] ?? 'Featured Services';
$beforeAfterTitle = $siteSettings['homepage_before_after_title'] ?? 'Before & After Transformations';
$beforeAfterSubtitle = $siteSettings['homepage_before_after_subtitle'] ?? 'See how we transform spaces into stunning, elegant environments.';
$viewAllProjectsText = $siteSettings['homepage_view_all_projects_text'] ?? 'View All Projects';
$wizardSectionTitle = $siteSettings['homepage_wizard_section_title'] ?? 'Start Your Project Today';
$wizardSectionDescription = $siteSettings['homepage_wizard_section_description'] ?? 'Select your project type, services, budget and share your details to receive a tailored estimate.';
$wizardButtonText = $siteSettings['homepage_wizard_button_text'] ?? 'Start the Wizard';
$statProjects = $siteSettings['homepage_statistic_projects'] ?? '500+';
$statSatisfaction = $siteSettings['homepage_statistic_satisfaction'] ?? '99%';
$statExperience = $siteSettings['homepage_statistic_experience'] ?? '15+';

$defaultServices = [
    ['title' => 'Building Finishes', 'summary' => 'Painting, screeding, plastering, flooring, tiling, ceilings, and roofing finishes.', 'icon' => 'format_paint'],
    ['title' => 'Interior Décor', 'summary' => 'Interior design, wallpaper, curtains, lighting design, and wall panels.', 'icon' => 'chair'],
    ['title' => 'Renovations', 'summary' => 'Residential and commercial renovations, remodeling, and project management.', 'icon' => 'home_repair_service'],
    ['title' => 'External Works', 'summary' => 'Landscaping design, paving, pathways, and compound beautification.', 'icon' => 'park'],
];
$serviceCards = !empty($homepageServiceCards) ? $homepageServiceCards : $defaultServices;
?>

<!-- HERO -->
<section
    x-data="{
        current: 0,
        slides: <?= htmlspecialchars(json_encode($heroSlides, JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT)) ?>,
        baseUrl: '<?= rtrim($baseUrl, '/') ?>',
        interval: null,
        slideImage(slide) {
            const path = slide.image || slide.image_path || '';
            if (!path) return '';
            if (/^https?:\/\//i.test(path)) return path;
            return this.baseUrl + '/' + String(path).replace(/^\//, '');
        },
        goTo(i) { this.current = (i + this.slides.length) % this.slides.length; },
        next() { this.goTo(this.current + 1); },
        prev() { this.goTo(this.current - 1); },
        start() {
            if (this.interval) clearInterval(this.interval);
            this.interval = setInterval(() => this.next(), 7000);
        },
        stop() {
            clearInterval(this.interval);
            this.interval = null;
        }
    }"
    x-init="start()"
    @mouseenter="stop()"
    @mouseleave="start()"
    class="hero-section relative w-full max-w-7xl mx-auto rounded-3xl overflow-hidden shadow-2xl border border-white/10 bg-[#111]/40 h-[520px] sm:h-[600px] lg:h-[660px] flex items-center"
>
    <div class="absolute inset-0">
        <template x-for="(slide, index) in slides" :key="index">
            <div
                class="hero-slide absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out"
                :class="current === index ? 'opacity-100 z-10' : 'opacity-0 z-0'"
            >
                <div
                    class="hero-slide-image absolute inset-0 bg-cover bg-center transition-transform duration-[8000ms] ease-out"
                    :class="current === index ? 'scale-100' : 'scale-100'"
                    :style="`background-image: url('${slideImage(slide)}')`"
                ></div>
            </div>
        </template>
        <div class="absolute inset-0 bg-[#1a1020]/5 z-10"></div>
        <div class="absolute inset-0 bg-gradient-to-r from-[#6c062d]/5 to-transparent z-10"></div>
    </div>

    <div class="relative z-20 w-full px-8 py-10 sm:px-12 sm:py-12 lg:px-16 lg:py-14">
        <div class="max-w-3xl">
            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-black/30 backdrop-blur-md border border-white/25 text-amber-200 text-[10px] uppercase tracking-[0.35em] mb-4 drop-shadow-md">
                <span class="material-symbols-outlined text-sm" style="font-variation-settings:'FILL' 1">diamond</span>
                <?= htmlspecialchars($homepageHeroBadge) ?>
            </div>
            <h1 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white leading-tight tracking-tight line-clamp-2" style="text-shadow: 0 2px 4px rgba(0,0,0,0.6), 0 0 20px rgba(0,0,0,0.4);" x-text="slides[current].title"></h1>
            <p class="mt-3 text-base sm:text-lg text-white/90 max-w-2xl leading-relaxed line-clamp-2" style="text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 12px rgba(0,0,0,0.3);" x-text="slides[current].subtitle"></p>
            <div class="mt-6 flex flex-col sm:flex-row gap-3">
                <a href="<?= htmlspecialchars($baseUrl) ?>/wizard" class="hero-cta-primary inline-flex items-center justify-center gap-2 px-7 py-3 rounded-full text-xs font-semibold text-white shadow-xl">
                    <span class="material-symbols-outlined text-base">auto_awesome</span>
                    <?= htmlspecialchars($homepageHeroPrimaryCta) ?>
                </a>
                <a href="<?= htmlspecialchars($baseUrl) ?>/estimate" class="inline-flex items-center justify-center gap-2 px-7 py-3 rounded-full text-xs font-semibold text-white border border-white/30 bg-white/10 backdrop-blur-sm hover:bg-white/20 transition">
                    <span class="material-symbols-outlined text-base">request_quote</span>
                    <?= htmlspecialchars($homepageHeroSecondaryCta) ?>
                </a>
            </div>
        </div>

        <div class="mt-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div class="flex items-center gap-3">
                <button type="button" @click="prev()" class="hero-nav-btn" aria-label="Previous slide">
                    <span class="material-symbols-outlined text-xl">chevron_left</span>
                </button>
                <button type="button" @click="next()" class="hero-nav-btn" aria-label="Next slide">
                    <span class="material-symbols-outlined text-xl">chevron_right</span>
                </button>
                <span class="text-white/60 text-xs ml-2 tabular-nums">
                    <span class="text-white font-semibold" x-text="String(current + 1).padStart(2, '0')"></span>
                    /
                    <span x-text="String(slides.length).padStart(2, '0')"></span>
                </span>
            </div>
            <div class="flex items-center gap-2">
                <template x-for="(slide, index) in slides" :key="'dot-' + index">
                    <button
                        type="button"
                        @click="goTo(index)"
                        class="hero-dot h-1 rounded-full transition-all duration-300"
                        :class="current === index ? 'w-8 bg-white' : 'w-2.5 bg-white/40 hover:bg-white/70'"
                        :aria-label="'Go to slide ' + (index + 1)"
                    ></button>
                </template>
            </div>
        </div>
    </div>
</section>

<!-- TRUST STRIP -->
<section class="trust-strip relative z-10 mt-8" x-data="trustStripAnim()" x-init="init()">
    <script>
    function trustStripAnim() {
        return {
            init() {
                this.$nextTick(() => {
                    const items = document.querySelectorAll('.trust-stat');
                    items.forEach(el => {
                        el.style.opacity = '1';
                        el.style.transform = 'translateY(0)';
                        el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                    });
                });
            },
            activate(el) {
                el.style.opacity = '1';
                el.style.transform = 'translateY(-6px) scale(1.03)';
            },
            deactivate(el) {
                el.style.opacity = '1';
                el.style.transform = 'translateY(0) scale(1)';
            }
        }
    }
    </script>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-px bg-white/10 rounded-2xl overflow-hidden shadow-2xl">
            <div class="trust-stat" @mouseenter="activate($el)" @mouseleave="deactivate($el)">
                <span class="material-symbols-outlined trust-stat-icon">verified</span>
                <div>
                    <div class="trust-stat-value"><?= htmlspecialchars($statProjects) ?></div>
                    <div class="trust-stat-label">Projects Completed</div>
                </div>
            </div>
            <div class="trust-stat" @mouseenter="activate($el)" @mouseleave="deactivate($el)">
                <span class="material-symbols-outlined trust-stat-icon">sentiment_satisfied</span>
                <div>
                    <div class="trust-stat-value"><?= htmlspecialchars($statSatisfaction) ?></div>
                    <div class="trust-stat-label">Client Satisfaction</div>
                </div>
            </div>
            <div class="trust-stat" @mouseenter="activate($el)" @mouseleave="deactivate($el)">
                <span class="material-symbols-outlined trust-stat-icon">history_edu</span>
                <div>
                    <div class="trust-stat-value"><?= htmlspecialchars($statExperience) ?></div>
                    <div class="trust-stat-label">Years Experience</div>
                </div>
            </div>
            <div class="trust-stat" @mouseenter="activate($el)" @mouseleave="deactivate($el)">
                <span class="material-symbols-outlined trust-stat-icon">groups</span>
                <div>
                    <div class="trust-stat-value">24/7</div>
                    <div class="trust-stat-label">Project Support</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- INTRO -->
<section class="py-24 bg-luxury-cream">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-2 gap-14 items-center">
            <div class="relative">
                <div class="relative rounded-3xl overflow-hidden shadow-2xl aspect-[4/5] lg:aspect-auto lg:h-[520px]" x-data="introSlideshow()" x-init="start()" @mouseenter="stop()" @mouseleave="start()">
                    <template x-for="(src, idx) in images" :key="idx">
                        <img :src="src" alt="Balorp Ventures interior showcase" class="absolute inset-0 w-full h-full object-cover object-right transition-opacity duration-1000" :class="current === idx ? 'opacity-100 z-10' : 'opacity-0 z-0'">
                    </template>
                    <div class="absolute inset-0 bg-gradient-to-t from-[#1a1020]/60 via-transparent to-transparent z-20"></div>
                    <div class="absolute bottom-6 left-6 right-6 p-5 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 text-white z-30">
                        <p class="text-sm uppercase tracking-[0.2em] text-amber-200 mb-1">Craftsmanship</p>
                        <p class="font-semibold text-lg">From bare walls to elegant living spaces</p>
                    </div>
                </div>
            </div>

            <div>
                <span class="section-badge"><?= htmlspecialchars($featuredServicesTitle) ?></span>
                <h2 class="mt-4 text-3xl sm:text-4xl lg:text-5xl font-bold text-premium-charcoal leading-tight"><?= htmlspecialchars($homepageServicesIntroTitle) ?></h2>
                <p class="mt-5 text-lg text-architectural-gray leading-relaxed"><?= htmlspecialchars($homepageServicesIntroDescription) ?></p>
                <ul class="mt-8 space-y-4">
                    <?php foreach ([
                        ['icon' => 'palette', 'text' => 'Premium materials and luxury-grade finishes'],
                        ['icon' => 'schedule', 'text' => 'On-time delivery with transparent milestones'],
                        ['icon' => 'engineering', 'text' => 'Expert team for residential & commercial projects'],
                    ] as $item): ?>
                    <li class="flex items-start gap-4">
                        <span class="feature-icon-wrap">
                            <span class="material-symbols-outlined"><?= $item['icon'] ?></span>
                        </span>
                        <span class="text-premium-charcoal pt-2"><?= $item['text'] ?></span>
                    </li>
                    <?php endforeach; ?>
                </ul>
                <a href="<?= htmlspecialchars($baseUrl) ?>/about" class="inline-flex items-center gap-2 mt-10 text-balorp-magenta font-semibold hover:gap-3 transition-all">
                    Learn more about us
                    <span class="material-symbols-outlined">arrow_forward</span>
                </a>
            </div>
        </div>
    </div>
</section>

<script>
function introSlideshow() {
    return {
        current: 0,
                    images: [
                        '<?= rtrim($baseUrl, '/') ?>/images/service1.png',
                        '<?= rtrim($baseUrl, '/') ?>/images/service2.png',
                        '<?= rtrim($baseUrl, '/') ?>/images/service3.png',
                        '<?= rtrim($baseUrl, '/') ?>/images/service4.png',
                        '<?= rtrim($baseUrl, '/') ?>/images/service5.png',
                        '<?= rtrim($baseUrl, '/') ?>/images/service6.png',
                    ],
        timer: null,
        start() {
            this.timer = setInterval(() => {
                this.current = (this.current + 1) % this.images.length;
            }, 5000);
        },
        stop() {
            clearInterval(this.timer);
            this.timer = null;
        }
    }
}
</script>

<!-- SERVICES -->
<section class="py-24 bg-white relative overflow-hidden">
    <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-[#E6007A]/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/3"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <div class="text-center max-w-2xl mx-auto mb-16">
            <span class="section-badge"><?= htmlspecialchars($featuredServicesTitle) ?></span>
            <h2 class="mt-4 text-3xl sm:text-4xl lg:text-5xl font-bold text-premium-charcoal"><?= htmlspecialchars($servicesTitle) ?></h2>
            <p class="mt-4 text-lg text-architectural-gray"><?= htmlspecialchars($servicesDescription) ?></p>
        </div>
        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <?php foreach ($serviceCards as $index => $service): ?>
            <article class="service-card-modern group" style="animation-delay: <?= $index * 0.08 ?>s">
                <div class="service-card-icon">
                    <span class="material-symbols-outlined"><?= htmlspecialchars(!empty($service['icon']) ? $service['icon'] : 'construction') ?></span>
                </div>
                <h3 class="text-xl font-bold text-premium-charcoal mt-5 mb-2 group-hover:text-[#E6007A] transition-colors"><?= htmlspecialchars($service['title']) ?></h3>
                <p class="text-sm text-architectural-gray leading-relaxed"><?= htmlspecialchars($service['summary'] ?? '') ?></p>
                <a href="<?= htmlspecialchars($baseUrl) ?>/services" class="inline-flex items-center gap-1 mt-5 text-sm font-semibold text-[#E6007A] opacity-0 group-hover:opacity-100 transition-opacity">
                    Explore <span class="material-symbols-outlined text-base">arrow_outward</span>
                </a>
            </article>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- WHY CHOOSE US -->
<section class="py-24 bg-gradient-to-br from-[#1E2A44] to-[#2D2D2D] text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-16">
            <span class="section-badge section-badge-light">Why Balorp</span>
            <h2 class="mt-4 text-3xl sm:text-4xl font-bold">Built on quality, delivered with care</h2>
        </div>
        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <?php foreach ([
                ['icon' => 'workspace_premium', 'title' => 'Premium Quality', 'desc' => 'Luxury finishes using top-tier materials and meticulous attention to detail.'],
                ['icon' => 'event_available', 'title' => 'On-Time Delivery', 'desc' => 'Clear timelines, proactive updates, and reliable project completion.'],
                ['icon' => 'groups_3', 'title' => 'Expert Team', 'desc' => 'Skilled craftsmen and designers with years of finishing expertise.'],
                ['icon' => 'savings', 'title' => 'Transparent Pricing', 'desc' => 'Honest estimates with no hidden costs — you always know where you stand.'],
            ] as $pillar): ?>
            <div class="pillar-card">
                <span class="material-symbols-outlined pillar-icon"><?= $pillar['icon'] ?></span>
                <h3 class="text-lg font-bold mt-4 mb-2"><?= $pillar['title'] ?></h3>
                <p class="text-sm text-white/70 leading-relaxed"><?= $pillar['desc'] ?></p>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- BEFORE & AFTER -->
<section class="py-24 bg-soft-beige">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 mb-14">
            <div class="max-w-xl">
                <span class="section-badge">Transformations</span>
                <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-premium-charcoal"><?= htmlspecialchars($beforeAfterTitle) ?></h2>
                <p class="mt-3 text-architectural-gray text-lg"><?= htmlspecialchars($beforeAfterSubtitle) ?></p>
            </div>
            <a href="<?= htmlspecialchars($baseUrl) ?>/gallery" class="inline-flex items-center gap-2 px-6 py-3 rounded-full btn-primary text-white font-semibold text-sm shrink-0">
                <span class="material-symbols-outlined text-lg">photo_library</span>
                <?= htmlspecialchars($viewAllProjectsText) ?>
            </a>
        </div>
        <div class="grid md:grid-cols-3 gap-8">
            <?php
            $projects = !empty($featuredProjects) ? array_slice($featuredProjects, 0, 3) : [
                ['name' => 'Living Room Transformation', 'notes' => 'Complete interior redesign with new flooring, paint, and furnishings.', 'img' => 'living1.png', 'tags' => ['Painting', 'Flooring'], 'link' => '/projects/living-room'],
                ['name' => 'Kitchen Renovation', 'notes' => 'Modern kitchen design with tiling, lighting, and interior décor.', 'img' => 'kitchen.png', 'tags' => ['Tiling', 'Lighting'], 'link' => '/projects/kitchen-renovation'],
                ['name' => 'Office Space Design', 'notes' => 'Professional office renovation with wall panels and modern finishes.', 'img' => 'office.png', 'tags' => ['Wall Panels', 'Finishes'], 'link' => '/projects/office-space'],
            ];
            foreach ($projects as $i => $project):
                $projectTitle = htmlspecialchars($project['name']);
                $projectDesc = htmlspecialchars($project['notes'] ?? '');
                $projectImg = htmlspecialchars($project['img'] ?? 'living1.png');
                $projectLink = htmlspecialchars($baseUrl . ($project['link'] ?? ''));
                $projectTags = $project['tags'] ?? [];
            ?>
            <a href="<?= $projectLink ?>" class="project-card group">
                <div class="project-card-image">
                    <img src="<?= htmlspecialchars($baseUrl) ?>/images/<?= $projectImg ?>" alt="<?= $projectTitle ?>" loading="lazy">
                    <div class="project-card-overlay">
                        <span class="material-symbols-outlined text-3xl">arrow_outward</span>
                    </div>
                    <span class="project-card-badge">Before & After</span>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-bold text-premium-charcoal group-hover:text-[#E6007A] transition-colors"><?= $projectTitle ?></h3>
                    <p class="mt-2 text-sm text-architectural-gray"><?= $projectDesc ?></p>
                    <div class="flex flex-wrap gap-2 mt-4">
                        <?php foreach ($projectTags as $tag): ?>
                        <span class="project-tag"><?= htmlspecialchars($tag) ?></span>
                        <?php endforeach; ?>
                    </div>
                </div>
            </a>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- PROCESS -->
<section class="py-24 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-16">
            <span class="section-badge">How It Works</span>
            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-premium-charcoal">Your project, simplified</h2>
        </div>
        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
            <?php foreach ([
                ['step' => '01', 'icon' => 'edit_note', 'title' => 'Share Your Vision', 'desc' => 'Tell us about your space through our wizard or contact form.'],
                ['step' => '02', 'icon' => 'design_services', 'title' => 'Get a Custom Plan', 'desc' => 'We assess, advise, and prepare a detailed scope and estimate.'],
                ['step' => '03', 'icon' => 'construction', 'title' => 'Expert Execution', 'desc' => 'Our team delivers premium finishes with quality checkpoints.'],
                ['step' => '04', 'icon' => 'celebration', 'title' => 'Enjoy the Result', 'desc' => 'Walk into a beautifully finished space built to last.'],
            ] as $step): ?>
            <div class="process-step">
                <div class="process-step-number"><?= $step['step'] ?></div>
                <span class="material-symbols-outlined process-step-icon"><?= $step['icon'] ?></span>
                <h3 class="text-lg font-bold text-premium-charcoal mt-4 mb-2"><?= $step['title'] ?></h3>
                <p class="text-sm text-architectural-gray leading-relaxed"><?= $step['desc'] ?></p>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- CTA -->
<section class="py-24 bg-luxury-cream">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="cta-panel rounded-3xl overflow-hidden shadow-2xl">
            <div class="grid lg:grid-cols-2">
                <div class="p-10 lg:p-14 flex flex-col justify-center">
                    <span class="section-badge section-badge-light">Free Estimate</span>
                    <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-white leading-tight"><?= htmlspecialchars($wizardSectionTitle) ?></h2>
                    <p class="mt-4 text-white/80 text-lg leading-relaxed"><?= htmlspecialchars($wizardSectionDescription) ?></p>
                    <div class="mt-8 flex flex-col sm:flex-row gap-4">
                        <a href="<?= htmlspecialchars($baseUrl) ?>/wizard" class="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-full bg-white text-[#E6007A] font-semibold hover:bg-white/90 transition shadow-lg">
                            <span class="material-symbols-outlined">auto_awesome</span>
                            <?= htmlspecialchars($wizardButtonText) ?>
                        </a>
                        <a href="<?= htmlspecialchars($baseUrl) ?>/contact" class="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-full border border-white/30 text-white font-semibold hover:bg-white/10 transition">
                            <span class="material-symbols-outlined">mail</span>
                            Contact Us
                        </a>
                    </div>
                </div>
                <div class="relative min-h-[280px] lg:min-h-0" x-data="{
                    ctaImageIndex: 0,
                    ctaImages: [
                        '<?= htmlspecialchars($baseUrl) ?>/images/slider01.png',
                        '<?= htmlspecialchars($baseUrl) ?>/images/slider02.png',
                        '<?= htmlspecialchars($baseUrl) ?>/images/slider03.png',
                        '<?= htmlspecialchars($baseUrl) ?>/images/slider04.png',
                        '<?= htmlspecialchars($baseUrl) ?>/images/slider05.png',
                        '<?= htmlspecialchars($baseUrl) ?>/images/slider06.png',
                    ],
                    ctaTimer: null,
                    ctaStart() {
                        this.ctaTimer = setInterval(() => {
                            this.ctaImageIndex = (this.ctaImageIndex + 1) % this.ctaImages.length;
                        }, 4000);
                    },
                    ctaStop() {
                        clearInterval(this.ctaTimer);
                        this.ctaTimer = null;
                    }
                }" x-init="ctaStart()" @mouseenter="ctaStop()" @mouseleave="ctaStart()">
                    <template x-for="(src, idx) in ctaImages" :key="idx">
                        <img :src="src" alt="Finished interior space" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 ease-in-out" :class="ctaImageIndex === idx ? 'opacity-100 z-10' : 'opacity-0 z-0'">
                    </template>
                    <div class="absolute inset-0 bg-gradient-to-r from-[#6c062d]/30 to-transparent lg:from-[#6c062d]/20 z-20"></div>
                </div>
            </div>
        </div>
    </div>
</section>
