@php
    $metaTitle = 'Icon Valuers Limited - Professional Property Valuation & Management Services in Kenya';
    $metaDescription = 'Icon Valuers Limited offers expert property valuation, real estate management, and consultancy services in Kenya. Browse properties for sale and rent, get professional valuations, and trusted property management solutions.';
    // Use absolute URL for OG image
    $baseUrl = rtrim(config('app.url', url('/')), '/');
    if (!preg_match('/^https?:\/\//', $baseUrl)) {
        $baseUrl = (request()->secure() ? 'https://' : 'http://') . request()->getHttpHost();
    }
    $ogImage = $baseUrl . '/images/logo.png'; // Fallback to logo since og-home.jpg doesn't exist
    $ogTitle = 'Icon Valuers Limited - Professional Property Valuation & Management Services';
    $ogDescription = $metaDescription;
    $ogImageAlt = 'Icon Valuers Limited - Professional Property Valuation & Management Services in Kenya';
    $title = $metaTitle;
@endphp

<x-app-layout :title="$title" :metaTitle="$metaTitle" :metaDescription="$metaDescription" :ogImage="$ogImage"
    :ogTitle="$ogTitle" :ogDescription="$ogDescription" :ogImageAlt="$ogImageAlt">
    @push('meta')
        <!-- Homepage Structured Data -->
        <script type="application/ld+json">
            {
                "@context": "https://schema.org",
                "@type": "WebSite",
                "name": "Icon Valuers Limited",
                "url": "{{ url('/') }}",
                "potentialAction": {
                    "@type": "SearchAction",
                    "target": {
                        "@type": "EntryPoint",
                        "urlTemplate": "{{ url('/properties?q={search_term_string}') }}"
                    },
                    "query-input": "required name=search_term_string"
                }
            }
            </script>
        <script type="application/ld+json">
            {
                "@context": "https://schema.org",
                "@type": "RealEstateAgent",
                "name": "Icon Valuers Limited",
                "url": "{{ url('/') }}",
                "logo": "{{ asset('images/logo.png') }}",
                "description": "Premier professional property valuation and management services in Kenya",
                "address": {
                    "@type": "PostalAddress",
                    "streetAddress": "Thomsons Falls Apartment Block A, 2nd Floor, Unit No. A3 Muthithi Road, Westlands",
                    "addressLocality": "Nairobi",
                    "postalCode": "00200",
                    "addressCountry": "KE"
                },
                "telephone": "+254-727-334-308",
                "email": "info@iconvaluers.co.ke"
            }
            </script>
    @endpush

    @push('styles')
        <style>
            .container {
                max-width: 1400px;
                margin: 0 auto;
                padding: 0 2rem;
            }

            .text-gradient {
                color: #2E3093;
            }

            /* --- Modern Hero Section --- */
            .hero-modern {
                padding: 8rem 0 4rem;
                background: white;
            }

            .hero-modern-top {
                display: flex;
                flex-direction: column;
                gap: 2rem;
                margin-bottom: 4rem;
            }

            @media (min-width: 1024px) {
                .hero-modern-top {
                    flex-direction: row;
                    align-items: flex-end;
                    justify-content: space-between;
                    gap: 4rem;
                }
            }

            .hero-modern-title {
                font-size: 2.25rem;
                    font-weight: 500;
                    line-height: 1.1;
                    color: #111827;
                    letter-spacing: -0.04em;
                    max-width: 800px;
                }

                @media (min-width: 768px) {
                    .hero-modern-title {
                        font-size: 3.5rem;
                    }
                }

                @media (min-width: 1024px) {
                    .hero-modern-title {
                        font-size: 5rem;
                    }
                }

                .hero-modern-desc {
                    font-size: 1.125rem;
                    color: #6b7280;
                    line-height: 1.6;
                    max-width: 400px;
                    text-align: left;
                }

                @media (min-width: 1024px) {
                    .hero-modern-desc {
                        text-align: right;
                        margin-bottom: 0.5rem;
                    }
                }

                /* Hero Gallery container */
                .hero-gallery-wrap {
                    position: relative;
                    width: 100%;
                    overflow: hidden;
                    background: #f3f4f6;
                    height: 400px;
                }

                @media (min-width: 768px) {
                    .hero-gallery-wrap {
                        height: 550px;
                    }
                }

                @media (min-width: 1024px) {
                    .hero-gallery-wrap {
                        height: 750px;
                    }
                }

                .hero-gallery-main {
                    position: absolute;
                    inset: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    z-index: 1;
                    opacity: 1;
                    transition: opacity 0.3s ease-in-out;
                }

                .hero-gallery-gradient {
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 40%);
                    z-index: 2;
                }

                .hero-gallery-white-gradient {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 150px;
                    background: linear-gradient(to bottom, #ffffff 0%, transparent 100%);
                    z-index: 3;
                }

                .hero-gallery-content {
                    position: absolute;
                    bottom: 2rem;
                    left: 2rem;
                    z-index: 10;
                    opacity: 1;
                    transition: opacity 0.3s ease-in-out;
                }

                @media (min-width: 1024px) {
                    .hero-gallery-content {
                        bottom: 4rem;
                        left: 5%;
                    }
                }

                .hero-gallery-title {
                    font-size: 2rem;
                    font-weight: 500;
                    color: white;
                    margin-bottom: 0.5rem;
                    letter-spacing: -0.02em;
                }

                .hero-gallery-subtitle {
                    font-size: 1rem;
                    color: rgba(255, 255, 255, 0.8);
                    font-weight: 400;
                }

                /* Mini Thumbnails */
                .hero-gallery-thumbs {
                    position: absolute;
                    bottom: 1rem;
                    right: 1rem;
                    left: 1rem;
                    z-index: 10;
                    display: flex;
                    gap: 0.5rem;
                    justify-content: center;
                }

                @media (min-width: 768px) {
                    .hero-gallery-thumbs {
                        bottom: 2rem;
                        right: 2rem;
                        left: auto;
                        gap: 1rem;
                    }
                }

                @media (min-width: 1024px) {
                    .hero-gallery-thumbs {
                        bottom: 4rem;
                        right: 5%;
                        gap: 1.5rem;
                    }
                }

                .hero-thumb-item {
                    position: relative;
                    width: 70px;
                    height: 50px;
                    border-radius: 0.5rem;
                    overflow: hidden;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
                    background: #fff;
                }

                @media (min-width: 768px) {
                    .hero-thumb-item {
                        width: 120px;
                        height: 80px;
                        border-radius: 0.75rem;
                    }
                }

                @media (min-width: 1024px) {
                    .hero-thumb-item {
                        width: 220px;
                        height: 140px;
                        border-radius: 1rem;
                    }
                }

                .hero-thumb-item img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                .hero-thumb-item-overlay {
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
                }

                .hero-thumb-indicators {
                    position: absolute;
                    bottom: 0.75rem;
                    left: 1rem;
                    right: 1rem;
                    display: flex;
                    gap: 0.5rem;
                    z-index: 20;
                }

                .hero-indicator {
                    flex: 1;
                    height: 2px;
                    background: rgba(255, 255, 255, 0.3);
                    border-radius: 2px;
                transition: all 0.3s;
                }
                .hero-thumb-item.active .hero-indicator {
                    background: white;
                    box-shadow: 0 0 4px rgba(255,255,255,0.5);
                }


                /* --- Blog Section --- */
                .blog-section {
                    padding: 10rem 0;
                    background: white;
                }

                .blog-header {
                    text-align: center;
                    margin-bottom: 4rem;
                }

                .blog-badge {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.5rem 1.25rem;
                    background: #2E3093;
                    color: white;
                    border-radius: 50px;
                    font-size: 0.75rem;
                    font-weight: 700;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    margin-bottom: 1.5rem;
                }

                .blog-header h2 {
                    font-size: 3.5rem;
                    font-weight: 800;
                    color: #2E3093;
                    margin-bottom: 1rem;
                    line-height: 1.2;
                }

                .blog-header p {
                    font-size: 1.125rem;
                    color: #64748b;
                    max-width: 700px;
                    margin: 0 auto;
                    line-height: 1.7;
                }

                .blog-grid {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 2rem;
                }

                .blog-card {
                    background: white;
                    border-radius: 1.5rem;
                    overflow: hidden;
                    border: 1px solid #f1f5f9;
                    transition: all 0.3s ease;
                    text-decoration: none;
                    display: block;
                }

                .blog-card:hover {
                    transform: translateY(-8px);
                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
                    border-color: #e2e8f0;
                }

                .blog-card-image {
                    position: relative;
                    height: 280px;
                    overflow: hidden;
                }

                .blog-card-image img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform 0.5s ease;
                }

                .blog-card:hover .blog-card-image img {
                    transform: scale(1.1);
                }

                .blog-date-overlay {
                    position: absolute;
                    top: 1.5rem;
                    left: 1.5rem;
                    background: #2E3093;
                    color: white;
                    padding: 0.75rem 1rem;
                    border-radius: 0.75rem;
                    text-align: center;
                    min-width: 60px;
                }

                .blog-date-day {
                    display: block;
                    font-size: 1.5rem;
                    font-weight: 900;
                    line-height: 1;
                }

                .blog-date-month {
                    display: block;
                    font-size: 0.75rem;
                    font-weight: 600;
                    text-transform: uppercase;
                    margin-top: 0.25rem;
                    opacity: 0.9;
                }

                .blog-category-tag {
                    position: absolute;
                    bottom: 1.5rem;
                    left: 1.5rem;
                    right: 1.5rem;
                    background: rgba(46, 48, 147, 0.15);
                    backdrop-filter: blur(10px);
                    color: #2E3093;
                    padding: 0.5rem 1rem;
                    border-radius: 50px;
                    font-size: 0.75rem;
                    font-weight: 700;
                    text-align: center;
                    border: 1px solid rgba(46, 48, 147, 0.2);
                }

                .blog-card-content {
                    padding: 2rem;
                }

                .blog-card-content h3 {
                    font-size: 1.375rem;
                    font-weight: 800;
                    color: #1e293b;
                    margin: 0;
                    line-height: 1.4;
                }

                @media (max-width: 1024px) {
                    .blog-grid {
                        grid-template-columns: repeat(2, 1fr);
                    }

                    .blog-header h2 {
                        font-size: 2.5rem;
                    }
                }

                @media (max-width: 640px) {
                    .blog-grid {
                        grid-template-columns: 1fr;
                    }

                    .blog-header h2 {
                        font-size: 2rem;
                    }
                }

                /* --- The Icon Story / Team Highlight --- */
                .story-section {
                    padding: 10rem 0;
                    background: #0f172a;
                    color: white;
                    overflow: hidden;
                }

                .story-layout {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 8rem;
                    align-items: center;
                }

                .story-content h2 {
                    font-size: 3.5rem;
                    font-weight: 800;
                    margin-bottom: 2rem;
                    line-height: 1.1;
                }

                .story-content p {
                    font-size: 1.25rem;
                    color: #94a3b8;
                    line-height: 1.8;
                    margin-bottom: 3rem;
                }

                .story-features {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 2rem;
                }

                .s-feature {
                    display: flex;
                    gap: 1rem;
                }

                .s-feature i {
                    color: #818cf8;
                    flex-shrink: 0;
                }

                .s-feature h5 {
                    font-size: 1.125rem;
                    font-weight: 700;
                    margin-bottom: 0.5rem;
                }

                .s-feature p {
                    font-size: 0.875rem;
                    color: #94a3b8;
                    margin: 0;
                    line-height: 1.6;
                }

                .story-visual {
                    position: relative;
                }

                .visual-img {
                    border-radius: 3rem;
                    overflow: hidden;
                    aspect-ratio: 1;
                    border: 1px solid rgba(255, 255, 255, 0.1);
                }

                .visual-img img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    filter: grayscale(0.5) contrast(1.1);
                }

                .team-floating-card {
                    position: absolute;
                    bottom: -2rem;
                    left: -2rem;
                    background: white;
                    padding: 2rem;
                    border-radius: 1.5rem;
                    color: #1e293b;
                    display: flex;
                    align-items: center;
                    gap: 1.5rem;
                    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
                }

                .team-avatars {
                    display: flex;
                }

                .team-avatars img {
                    width: 3rem;
                    height: 3rem;
                    border-radius: 50%;
                    border: 3px solid white;
                    margin-left: -1rem;
                }

                .team-avatars img:first-child {
                    margin-left: 0;
                }

                .t-card-text span {
                    display: block;
                    font-weight: 800;
                    font-size: 1.125rem;
                }

                .t-card-text a {
                    font-size: 0.875rem;
                    color: var(--primary);
                    font-weight: 700;
                    text-decoration: none;
                }

                /* Responsive */
                @media (max-width: 1024px) {
                    .hero-title {
                        font-size: 4rem;
                    }

                    .cta-hub {
                        grid-template-columns: 1fr;
                        gap: 1rem;
                    }


                    .story-layout {
                        grid-template-columns: 1fr;
                        gap: 5rem;
                    }

                    .hero-stats {
                        justify-content: center;
                    }
                }

                @media (max-width: 640px) {
                    .hero-title {
                        font-size: 2.5rem;
                    }

                    .stats-grid {
                        gap: 2rem;
                    }

                    .stat-val {
                        font-size: 2rem;
                    }

                    .section-header h2 {
                        font-size: 2.25rem;
                    }
                }
            </style>
    @endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('is-visible');
                        observer.unobserve(entry.target);
                    }
                });
            }, observerOptions);

            document.querySelectorAll('.animate-on-scroll').forEach(el => {
                observer.observe(el);
            });
        });
    </script>
@endpush

@push('styles')
    <style>
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .animate-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- New CSS-Only Hero Section --- */
        .hero-split {
            position: relative;
            width: 100%;
            min-height: 100vh;
            height: auto;
            display: flex;
            align-items: center;
            background-color: var(--primary);
            overflow: hidden;
            border-bottom-left-radius: 2rem;
            border-bottom-right-radius: 2rem;
            padding-top: 6rem;
            padding-bottom: 4rem;
        }

        .hero-split-bg {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1400&q=80');
            background-size: cover;
            background-position: center;
        }

        .hero-split-overlay {
            position: absolute;
            inset: 0;
            background: var(--primary);
            opacity: 0.85; /* Darker overlay for mobile so text is legible */
        }

        .hero-split-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 1.5rem;
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            width: 100%;
        }

        .hero-split-left {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            height: auto;
            text-align: left;
            margin-bottom: 3rem;
            margin-top: 2rem;
        }

        .hero-trusted-badge {
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 50px;
            padding: 0.375rem 1.25rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: white;
            margin-bottom: 2rem;
            letter-spacing: 0.05em;
        }

        .hero-trusted-badge i {
            width: 0.875rem;
            height: 0.875rem;
        }

        .hero-main-title {
            font-size: 2.5rem;
            font-weight: 500;
            color: white;
            line-height: 1.1;
            margin-bottom: 1.25rem;
            letter-spacing: -0.02em;
        }

        .hero-sub-text {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.85);
            max-width: 100%;
            margin-bottom: 2rem;
            line-height: 1.6;
            font-weight: 300;
        }

        .hero-contact-btn {
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            gap: 1rem;
            background-color: rgba(0, 0, 0, 0.4);
            color: white;
            border-radius: 50px;
            padding: 0.5rem 1.5rem 0.5rem 0.5rem;
            font-weight: 500;
            font-size: 0.875rem;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        .hero-contact-btn:hover {
            background-color: rgba(0, 0, 0, 0.6);
            transform: translateY(-2px);
        }

        .hero-contact-icon {
            background-color: white;
            color: black;
            padding: 0.5rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
        }

        .hero-contact-btn:hover .hero-contact-icon {
            background-color: #e5e7eb;
        }

        .hero-contact-icon i {
            width: 1rem;
            height: 1rem;
        }

        .hero-split-right {
            width: 100%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: auto;
        }

        .hero-search-card {
            background-color: white;
            border-radius: 2rem;
            padding: 2rem 1.5rem;
            box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25);
            position: relative;
            z-index: 20;
            width: 100%;
            max-width: 32rem;
        }

        .hero-search-title {
            font-size: 1.75rem;
            font-weight: 500;
            color: var(--primary);
            margin-bottom: 1.5rem;
            line-height: 1.15;
            margin-top: 0;
            letter-spacing: -0.02em;
        }

        .hero-search-form {
            display: block;
        }

        .hero-input-group {
            position: relative;
            border: 1px solid #d1d5db;
            border-radius: 50px;
            background-color: white;
            transition: all 0.2s ease;
            margin-bottom: 1.25rem;
            display: flex;
            align-items: center;
        }

        .hero-input-group:focus-within {
            border-color: black;
            box-shadow: 0 0 0 1px black;
        }

        .hero-input-group i,
        .hero-input-group svg {
            position: absolute;
            left: 1.25rem;
            top: 50%;
            transform: translateY(-50%);
            color: #6b7280;
            width: 1.25rem;
            height: 1.25rem;
            z-index: 2;
            pointer-events: none;
        }

        .hero-input-group .chevron-down,
        .hero-input-group svg.chevron-down {
            left: auto;
            right: 1.25rem;
            pointer-events: none;
            width: 1rem;
            height: 1rem;
        }

        .hero-input,
        .hero-select {
            width: 100%;
            border: none;
            background: transparent;
            padding: 0.875rem 1rem 0.875rem 3.5rem;
            font-size: 0.9375rem;
            font-weight: 300;
            color: #1f2937;
            border-radius: 50px;
            outline: none;
            box-sizing: border-box;
            appearance: none; /* remove default arrow */
        }

        .hero-input::placeholder {
            color: #9ca3af;
        }

        .hero-submit-btn {
            width: 100%;
            background-color: black;
            color: white;
            border: none;
            border-radius: 50px;
            padding: 1rem;
            font-weight: 600;
            font-size: 0.9375rem;
            margin-top: 0.5rem;
            cursor: pointer;
            transition: background-color 0.2s ease;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
        }

        .hero-submit-btn:hover {
            background-color: #1a1a1a;
        }

        /* Responsive Breakpoints */
        @media (min-width: 1024px) {
            .hero-split {
                height: 90vh;
                min-height: 700px;
                padding-top: 0;
                padding-bottom: 0;
            }

            .hero-split-container {
                flex-direction: row;
                padding-left: 3rem;
                padding-right: 3rem;
            }

            .hero-split-left {
                width: 50%;
                justify-content: center;
                height: 100%;
                margin-bottom: 0;
                margin-top: 0;
                padding-right: 2.5rem;
            }

            .hero-split-right {
                width: 50%;
                height: 100%;
                justify-content: flex-end;
            }

            .hero-split-bg {
                clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
                width: 50%;
                left: auto;
                right: -2rem;
            }

            .hero-split-overlay {
                background: linear-gradient(to right, var(--primary), transparent);
                opacity: 0.8;
            }

            .hero-main-title {
                font-size: 4rem;
                margin-bottom: 1.5rem;
            }

            .hero-sub-text {
                font-size: 1.125rem;
                margin-bottom: 2.5rem;
            }

            .hero-contact-btn {
                padding: 0.625rem 2rem 0.625rem 0.625rem;
            }

            .hero-contact-icon {
                padding: 0.625rem;
            }

            .hero-search-card {
                padding: 3rem;
                border-radius: 2.5rem;
                margin-right: 0;
            }

            .hero-search-title {
                font-size: 2.5rem;
                margin-bottom: 2rem;
            }

            .hero-input,
            .hero-select {
                padding: 1rem 1rem 1rem 3.5rem;
            }
        }

        @media (min-width: 1280px) {
            .hero-main-title {
                font-size: 4.5rem;
            }
        }

        /* --- Featured Grid & Property Cards --- */
        .featured-section {
            padding: 6rem 0;
            background: #fff;
        }

        .featured-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 2rem;
            margin-top: 2rem;
        }

        @media (min-width: 768px) {
            .featured-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (min-width: 1024px) {
            .featured-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        .new-prop-card {
            position: relative;
            display: block;
            height: 480px;
            border-radius: 1.5rem;
            overflow: hidden;
            text-decoration: none;
            transition: transform 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Match hero subtle shadow */
            background: #fff;
        }

        .new-prop-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); /* Dynamic shadow */
        }

        .new-prop-img-box {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        /* Subtle dark gradient overlay so text stands out */
        .new-prop-img-box::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 60%);
            z-index: 1;
        }

        .new-prop-img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s ease;
        }

        .new-prop-card:hover .new-prop-img-box img {
            transform: scale(1.05);
        }

        .new-prop-badge {
            position: absolute;
            top: 1.25rem;
            left: 1.25rem;
            background: rgba(255, 255, 255, 0.95);
            color: #111827;
            padding: 0.45rem 1rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            z-index: 10;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        .new-prop-badge i {
            width: 0.875rem;
            height: 0.875rem;
        }

        .new-prop-heart {
            position: absolute;
            top: 1.25rem;
            right: 1.25rem;
            width: 2.25rem;
            height: 2.25rem;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(8px);
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6b7280;
            z-index: 10;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        .new-prop-heart:hover {
            color: #ef4444;
            transform: scale(1.05);
        }

        .new-prop-heart i {
            width: 1.125rem;
            height: 1.125rem;
        }

        .new-prop-content {
            position: absolute;
            bottom: 1.5rem;
            left: 1.5rem;
            right: 1.5rem;
            background: rgba(255, 255, 255, 0.95); /* Bright glass look */
            backdrop-filter: blur(10px);
            border-radius: 1.25rem;
            padding: 1.5rem;
            z-index: 10;
            box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15);
            transform: translateY(0);
            transition: transform 0.3s ease;
        }

        .new-prop-card:hover .new-prop-content {
            transform: translateY(-4px);
        }

        .new-prop-price {
            font-size: 1.5rem;
            font-weight: 800;
            color: #111827;
            margin-bottom: 0.35rem;
            letter-spacing: -0.025em;
        }

        .new-prop-address {
            font-size: 0.875rem;
            color: #6b7280;
            margin-bottom: 1.25rem;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .new-prop-specs {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.875rem;
            margin-bottom: 1.25rem;
        }

        .new-prop-spec {
            display: flex;
            align-items: center;
            gap: 0.375rem;
            color: #4b5563;
            font-size: 0.8125rem;
            font-weight: 500;
        }

        .new-prop-spec i {
            width: 1rem;
            height: 1rem;
            color: #9ca3af;
        }

        .new-prop-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: max-content;
            margin: 0 auto;
            border: 1px solid #e5e7eb;
            background: #fff;
            padding: 0.5rem 1.75rem;
            border-radius: 9999px;
            font-size: 0.8125rem;
            font-weight: 600;
            color: #111827;
            transition: all 0.2s;
        }

        .new-prop-card:hover .new-prop-btn {
            border-color: #111827;
            background: #111827;
            color: #fff;
        }

        /* --- Pillars Section --- */
        .pillars-section {
            padding: 6rem 0;
            background: #f8fafc;
        }

        .pillars-layout {
            display: grid;
            gap: 4rem;
            align-items: center;
        }

        @media (min-width: 1024px) {
            .pillars-layout {
                grid-template-columns: 1fr 1fr;
            }
        }

        .pillars-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: #e0e7ff;
            color: #2E3093;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
        }

        .pillars-badge i {
            width: 1rem;
            height: 1rem;
        }

        .pillars-content h2 {
            font-size: 2.5rem;
            font-weight: 800;
            color: #111827;
            line-height: 1.2;
            margin-bottom: 1rem;
            letter-spacing: -0.025em;
        }

        @media (min-width: 768px) {
            .pillars-content h2 {
                font-size: 3rem;
            }
        }

        .pillars-content p {
            font-size: 1.125rem;
            color: #4b5563;
            margin-bottom: 2.5rem;
            line-height: 1.6;
        }

        .pillars-list {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .pillar-item {
            display: flex;
            gap: 1.5rem;
            align-items: flex-start;
        }

        .pillar-item-icon {
            flex-shrink: 0;
            width: 3rem;
            height: 3rem;
            background: #e0e7ff;
            color: #2E3093;
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pillar-item-icon i {
            width: 1.5rem;
            height: 1.5rem;
        }

        .pillar-item-content h3 {
            font-size: 1.25rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.5rem;
        }

        .pillar-item-content p {
            font-size: 1rem;
            color: #6b7280;
            margin-bottom: 0;
        }

        .pillars-image {
            position: relative;
            border-radius: 1.5rem;
            overflow: hidden;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .pillars-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* --- Team Section --- */
        .team-sec-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 3rem;
            align-items: center;
        }
        @media (min-width: 1024px) { 
            .team-sec-grid { grid-template-columns: repeat(12, 1fr); gap: 3.5rem; } 
        }

        .team-sec-main-img {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 100%;
            max-width: 450px;
            object-fit: cover;
            object-position: bottom;
            z-index: 0;
            filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15));
        }

        .team-sec-right { position: relative; width: 100%; top: 2rem; min-width: 0; }
        @media (min-width: 1024px) { 
            .team-sec-right { grid-column: span 7 / span 7; padding-left: 3rem; top: 0; } 
        }

        .team-sec-agent-img-wrap { 
            border-radius: 1.25rem; 
            height: 210px; 
            margin-bottom: 1rem; 
            position: relative; 
            overflow: hidden; 
            display: flex; 
            align-items: flex-end; 
            justify-content: center; 
            cursor: pointer; 
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 
            transition: box-shadow 0.2s; 
        }
        .team-sec-agent-img-wrap.bg-1 { background: linear-gradient(to bottom, #f1f5f9, #cbd5e1); }
        .team-sec-agent-img-wrap.bg-2 { background: linear-gradient(to bottom, #f1f5f9, #cbd5e1); }
        .team-sec-agent-img-wrap.bg-3 { background: linear-gradient(to bottom, #f1f5f9, #cbd5e1); }

        .team-sec-agent-img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            object-position: bottom; 
            transition: transform 0.5s; 
            display: block; 
        }

    </style>
@endpush

    <!-- Hero Section -->

    <!-- Modern Hero Section -->
    <section class="hero-modern">
        <div class="container">
            <div class="hero-modern-top">
                <h1 class="hero-modern-title">Exclusive Living in Westlands.</h1>
                <p class="hero-modern-desc">Premium residences designed for professionals and entrepreneurs seeking sophistication and comfort in Nairobi's most prestigious neighborhood.</p>
            </div>
        </div>
            
        @php 
                                        $heroItems = [
                ['image' => asset('images/hero/main.png'), 'title' => 'Palm Grove Villa', 'subtitle' => 'Sleek design with panoramic views.'],
                ['image' => asset('images/hero/2.png'), 'title' => 'Tranquil Residence', 'subtitle' => 'Modern aesthetics reflecting natural beauty.'],
                ['image' => asset('images/hero/3.png'), 'title' => 'Urban Sanctuary', 'subtitle' => 'Sophistication redefined in Westlands.'],
                ['image' => asset('images/hero/4.png'), 'title' => 'Summit Apartment', 'subtitle' => 'Elevation and elegance intertwined.']
            ];
        @endphp
            @if(count($heroItems) > 0)
                <div class="hero-gallery-wrap">
                    <!-- Main Backgrounds -->
                    @foreach($heroItems as $index => $item)
                        <img src="{{ $item['image'] }}" 
                             class="hero-gallery-main hero-main-slide" 
                             data-index="{{ $index }}"
                             style="display: {{ $index === 0 ? 'block' : 'none' }};"
                             alt="{{ $item['title'] }}">


                    @endforeach

                    <div class="hero-gallery-gradient"></div>
                    <div class="hero-gallery-white-gradient"></div>

                    <!-- Thumbnails -->
                    @if(count($heroItems) > 1)
                        <div class="hero-gallery-thumbs">
                            @foreach($heroItems as $index => $item)
                                <div class="hero-thumb-item {{ $index === 0 ? 'active' : '' }}" id="hero-thumb-{{ $index }}" onclick="switchHeroLine({{ $index }})">
                                    <img src="{{ $item['image'] }}" alt="Thumb">
                                    <div class="hero-thumb-item-overlay"></div>
                                    <div class="hero-thumb-indicators">
                                        <div class="hero-indicator"></div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <script>
                            function switchHeroLine(index) {
                                const mains = document.querySelectorAll('.hero-main-slide');
                                const thumbs = document.querySelectorAll('.hero-thumb-item');
                                mains.forEach(el => el.style.opacity = '0');
                                thumbs.forEach(el => el.classList.remove('active'));

                                setTimeout(() => {
                                    mains.forEach(el => el.style.display = 'none');

                                    const activeMain = document.querySelector('.hero-main-slide[data-index="'+index+'"]');

                                    activeMain.style.display = 'block';

                                    setTimeout(() => {
                                        activeMain.style.opacity = '1';
                                    }, 50);
                                }, 300);

                                document.querySelector('#hero-thumb-'+index).classList.add('active');
                            }
                        </script>
                    @endif
                </div>
            @endif
    </section>


    <!-- Highlighted Properties -->
    @if($highlightedProperties->isNotEmpty())
        <section class="featured-section !pt-20">
            <div class="container">
                <div class="flex items-end justify-between mb-8">
                    <div>
                        <span class="text-sm font-bold text-primary tracking-wide mb-2 block">Featured Properties</span>
                        <h2 class="text-4xl font-800 text-slate-900">Our <span class="text-primary-color">Highlighted</span> Portfolio</h2>
                    </div>
                    <a href="{{ route('properties.index') }}"
                        class="text-sm font-bold text-slate-600 hover:text-primary transition-colors flex items-center gap-2">View
                        All Properties <i data-lucide="arrow-right"></i></a>
                </div>
                <div class="featured-grid">
                    @foreach($highlightedProperties as $property)
                        @php 
                                                                    $img = $property->images->where('is_cover', true)->first() ?? $property->images->first();
                            $badgeColor = $property->agreement_type === 'sale' ? 'Exclusive Sale' : 'Premium Rental';
                            $minBed = $property->variants->min('bedrooms');
                            $maxBed = $property->variants->max('bedrooms');
                            $minBath = $property->variants->min('bathrooms');
                            $minPrice = $property->variants->min('cost');
                        @endphp
                        <a href="{{ route('properties.show', $property->slug) }}" class="new-prop-card">
                            <div class="new-prop-img-box">
                                <img src="{{ $img ? url('storage/app/public/' . $img->image) : 'https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=800&q=80' }}"
                                    alt="{{ $property->title }}">

                                <div class="new-prop-badge">
                                    <i data-lucide="home"></i>
                                    <span>{{ $property->property_type ? ucfirst($property->property_type) : ($property->agreement_type === 'sale' ? 'Sale' : 'Rent') }}</span>
                                </div>

                                <button class="new-prop-heart">
                                    <i data-lucide="heart"></i>
                                </button>
                            </div>

                            <div class="new-prop-content">
                                <div class="new-prop-price">KES {{ $minPrice ? number_format($minPrice) : 'On Request' }}</div>
                                <div class="new-prop-address">{{ $property->title }} <br> {{ $property->city }}{{ $property->country ? ', ' . $property->country : '' }}</div>

                                @if($minBed || $minBath || $property->size)
                                    <div class="new-prop-specs">
                                        @if($minBed)
                                            <div class="new-prop-spec"><i data-lucide="bed"></i> {{ $minBed }} beds</div>
                                        @endif
                                        @if($minBath)
                                            <div class="new-prop-spec"><i data-lucide="bath"></i> {{ $minBath }} baths</div>
                                        @endif
                                        @if($property->size)
                                            <div class="new-prop-spec"><i data-lucide="square"></i> {{ $property->size }} sqft</div>
                                        @endif
                                    </div>
                                @endif

                                <div class="new-prop-btn">More Details</div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <!-- Service Pillars -->
    <section class="pillars-section">
        <div class="container">
            <div class="pillars-layout">
                <!-- Left Content -->
                <div class="pillars-content">
                    <span class="pillars-badge">
                        <i data-lucide="award"></i>
                        Our Expertise
                    </span>
                    <h2>Comprehensive <span class="text-gradient">Real Estate</span> Solutions</h2>
                    <p>Icon Valuers Limited brings together seasoned professionals to deliver end-to-end property solutions across Kenya, from accurate valuations to property management and premium agency services.</p>
                    
                    <div class="pillars-list">
                        <div class="pillar-item">
                            <div class="pillar-item-icon">
                                <i data-lucide="file-text"></i>
                            </div>
                            <div class="pillar-item-content">
                                <h3>Professional Valuation Services</h3>
                                <p>Bank-recognized appraisals for mortgage, insurance, court probate, and succession. Our licensed valuers deliver accurate reports trusted by leading financial institutions.</p>
                                <a href="{{ route('valuation') }}" class="text-sm font-semibold text-primary hover:text-indigo-700 transition-colors inline-flex items-center gap-1 mt-2">
                                    Learn More
                                </a>
                            </div>
                        </div>

                        <div class="pillar-item">
                            <div class="pillar-item-icon">
                                <i data-lucide="key"></i>
                            </div>
                            <div class="pillar-item-content">
                                <h3>Strategic Property Management</h3>
                                <p>Comprehensive management of residential, commercial, and industrial properties. We preserve asset integrity and maximize rental yields through technology-driven solutions.</p>
                                <a href="{{ route('management') }}" class="text-sm font-semibold text-primary hover:text-indigo-700 transition-colors inline-flex items-center gap-1 mt-2">
                                    Learn More
                                </a>
                            </div>
                        </div>

                        <div class="pillar-item">
                            <div class="pillar-item-icon">
                                <i data-lucide="shopping-cart"></i>
                            </div>
                            <div class="pillar-item-content">
                                <h3>Premium Agency Services</h3>
                                <p>Strategic marketing and expert negotiation for luxury properties, resulting in faster sales and better offers. We connect discerning buyers with exceptional properties.</p>
                                <a href="{{ route('sell') }}" class="text-sm font-semibold text-primary hover:text-indigo-700 transition-colors inline-flex items-center gap-1 mt-2">
                                    Learn More
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Visual -->
                <div class="pillars-visual">
                    <div class="pillars-visual-bg"></div>
                    
                    <!-- Google Review Box -->
                    <div class="pillars-stats-box">
                        <div class="flex items-center gap-2 mb-3">
                            <img src="{{ asset('images/brand/google_reviews.png') }}" alt="Google Reviews" class="h-6 w-auto">
                        </div>
                        <div class="pillars-stats-rating mb-3">
                            <div class="pillars-stats-stars">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="#fbbf24" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                                </svg>
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="#fbbf24" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                                </svg>
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="#fbbf24" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                                </svg>
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="#fbbf24" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                                </svg>
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="#fbbf24" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                                </svg>
                            </div>
                        </div>
                        <p class="text-sm text-white mb-3 italic leading-relaxed">"So far the best valuers i have engaged in years, the staff are so professional and reports are sent well in good time"</p>
                        <p class="text-sm font-semibold text-white">- Julia Mukami</p>
                    </div>

                    <!-- CTA Box -->
                    <div class="pillars-cta-box">
                        <h4>Need a Property Valuation or Management Service?</h4>
                        <p>Get in touch with our expert team today</p>
                        <a href="{{ route('contact') }}" class="pillars-cta-btn">
                            Request a Consultation
                            <i data-lucide="arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Our Experts / Team Section -->
    <section class="team-sec-wrapper">
        <style>
            /* Team Section Styles */
            .team-sec-wrapper {
                padding: 6rem 0;
                background-color: #ffffff;
                overflow: hidden;
            }
            .team-sec-container {
                max-width: 1300px;
                margin: 0 auto;
                padding: 0 1rem;
            }
            @media (min-width: 1024px) {
                .team-sec-container { padding: 0 1.5rem; }
            }
            .team-sec-grid {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 3rem;
                align-items: center;
            }
            @media (min-width: 1024px) {
                .team-sec-grid { grid-template-columns: repeat(12, 1fr); gap: 3.5rem; }
            }
            
            /* Left Panel */
            .team-sec-left {
                position: relative;
                width: 100%;
                border-radius: 2rem;
                overflow: hidden;
                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
                background: linear-gradient(to bottom, #9ca3af, #475569);
                min-height: 520px;
            }
            @media (min-width: 1024px) { .team-sec-left { grid-column: span 5 / span 5; } }
            
            .team-sec-badge-left {
                position: absolute;
                top: 1.5rem;
                left: 1.5rem;
                background: white;
                box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
                padding: 0.625rem;
                border-radius: 9999px;
                z-index: 10;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .team-sec-badge-left i { width: 1.25rem; height: 1.25rem; color: #4f46e5; }
            
            .team-sec-badge-right {
                position: absolute;
                top: 1.5rem;
                right: 1.5rem;
                background: rgba(255, 255, 255, 0.2);
                backdrop-filter: blur(12px);
                padding: 0.5rem 1.25rem;
                border-radius: 9999px;
                z-index: 10;
            }
            .team-sec-badge-right span { color: white; font-weight: 500; font-size: 0.875rem; }
            
            .team-sec-text {
                position: absolute;
                top: 6rem;
                left: 2rem;
                right: 2rem;
                z-index: 10;
                color: white;
            }
            .team-sec-text h3 {
                font-size: 1.5rem;
                font-weight: 500;
                line-height: 1.375;
                margin: 0 0 0.75rem 0;
            }
            @media (min-width: 1024px) { .team-sec-text h3 { font-size: 1.65rem; } }
            .team-sec-text p {
                color: rgba(255, 255, 255, 0.85);
                font-size: 0.875rem;
                line-height: 1.625;
                max-width: 95%;
                font-weight: 300;
                margin: 0;
            }
            
            .team-sec-main-img {
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 100%;
                height: 100%;
                max-width: 450px;
                object-fit: cover;
                object-position: bottom;
                z-index: 0;
                filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15));
            }
            
            .team-sec-contact-card {
                position: absolute;
                bottom: 1.5rem;
                left: 1.5rem;
                right: 1.5rem;
                background: white;
                border-radius: 1.5rem;
                padding: 1rem;
                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
                z-index: 20;
            }
            @media (min-width: 640px) {
                .team-sec-contact-card {
                    right: auto;
                    width: calc(100% - 3rem);
                    max-width: 320px;
                    padding: 1.25rem;
                }
            }
            .team-sec-contact-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
            .team-sec-contact-tag { background: black; color: white; font-size: 11px; font-weight: 600; letter-spacing: 0.025em; padding: 0.375rem 0.875rem; border-radius: 9999px; }
            .team-sec-contact-icon-btn { width: 2rem; height: 2rem; border-radius: 9999px; border: 1px solid #f3f4f6; display: flex; align-items: center; justify-content: center; transition: all 0.2s; color: #374151; flex-shrink: 0; }
            .team-sec-contact-icon-btn:hover { background: #f9fafb; }
            .team-sec-contact-icon-btn i { width: 0.875rem; height: 0.875rem; }
            .team-sec-contact-email { display: block; font-size: 13px; font-weight: 500; color: #374151; text-decoration: underline; margin-bottom: 0.75rem; transition: color 0.2s; word-break: break-all; }
            .team-sec-contact-email:hover { color: black; }
            
            .team-sec-contact-info-wrap { margin-bottom: 0.25rem; }
            .team-sec-contact-info-wrap h4 { font-weight: 700; color: #111827; font-size: 15px; margin: 0; }
            .team-sec-contact-info-wrap p { font-size: 0.75rem; color: #9ca3af; margin: 0.15rem 0 0 0; }
            
            .team-sec-socials { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
            .team-sec-social-btn { width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: #f9fafb; display: flex; align-items: center; justify-content: center; transition: all 0.2s; color: #4b5563; }
            .team-sec-social-btn:hover { background: #f3f4f6; }
            .team-sec-social-btn i, .team-sec-social-btn svg { width: 0.75rem; height: 0.75rem; fill: currentColor; }
            
            /* Right Panel */
            .team-sec-right { position: relative; width: 100%; top: 2rem; min-width: 0; }
            @media (min-width: 1024px) { .team-sec-right { grid-column: span 7 / span 7; padding-left: 3rem; top: 0; } }
            
            .team-sec-nav { display: none; position: absolute; top: -1rem; right: 0; gap: 0.75rem; }
            @media (min-width: 1024px) { .team-sec-nav { display: flex; } }
            .team-sec-nav-btn { width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; transition: all 0.2s; background: transparent; cursor: pointer; }
            .team-sec-nav-btn.prev { color: #9ca3af; }
            .team-sec-nav-btn.next { color: #111827; border-color: #111827; }
            .team-sec-nav-btn:hover { background: #f9fafb; }
            .team-sec-nav-btn i { width: 1.25rem; height: 1.25rem; }
            
            .team-sec-header { margin-bottom: 3.5rem; max-width: 32rem; margin-left: auto; margin-right: auto; text-align: center; }
            @media (min-width: 1024px) { .team-sec-header { margin-left: 0; margin-right: 0; text-align: left; } }
            .team-sec-header h2 { font-size: 2.25rem; line-height: 1.15; font-weight: 400; color: #111827; margin: 0 0 1.25rem 0; letter-spacing: -0.025em; }
            @media (min-width: 1024px) { .team-sec-header h2 { font-size: 3rem; } }
            .team-sec-header p { color: #6b7280; font-size: 15px; line-height: 1.625; max-width: 280px; margin: 0 auto; }
            @media (min-width: 1024px) { .team-sec-header p { margin: 0; } }
            
            .team-sec-agents { display: flex; gap: 1.25rem; overflow-x: auto; padding-bottom: 1.5rem; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; width: 100%; }
            .team-sec-agents::-webkit-scrollbar { display: none; }
            
            .team-sec-agent { scroll-snap-align: start; flex-shrink: 0; width: 170px; }
            .team-sec-agent-img-wrap { border-radius: 1.25rem; height: 210px; margin-bottom: 1rem; position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); transition: box-shadow 0.2s; }
            .team-sec-agent-img-wrap:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
            .team-sec-agent-img-wrap.bg-1 { background: linear-gradient(to bottom, #f1f5f9, #cbd5e1); }
            .team-sec-agent-img-wrap.bg-2 { background: linear-gradient(to bottom, #f1f5f9, #cbd5e1); }
            .team-sec-agent-img-wrap.bg-3 { background: linear-gradient(to bottom, #f1f5f9, #cbd5e1); }
            .team-sec-agent-img-wrap.bg-empty { background: #f3f4f6; }
            
            .team-sec-agent-img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; transition: transform 0.5s; display: block; }
            .team-sec-agent-img-wrap:hover .team-sec-agent-img { transform: scale(1.05); }
            
            .team-sec-agent h4 { font-weight: 700; color: #111827; font-size: 1.125rem; margin: 0 0 0.125rem 0; }
            .team-sec-agent p { font-size: 13px; color: #9ca3af; margin: 0 0 0.75rem 0; }
        </style>

        <div class="team-sec-container">
            <div class="team-sec-grid">
                
                <!-- Left: Big Agent Card -->
                @php $mainAgent = $team[0] ?? null; @endphp
                @if($mainAgent)
                    <div class="team-sec-left">
                        <!-- Badge -->
                        <div class="team-sec-badge-left">
                            <i data-lucide="asterisk"></i>
                        </div>
                        <div class="team-sec-badge-right">
                            <span>Our Agent</span>
                        </div>

                        <!-- Text -->
                        <div class="team-sec-text">
                            <h3>Tailored Property Solutions for Business Growth</h3>
                            <p>Real estate agents curate properties that align with the business's expansion goals.</p>
                        </div>

                        <!-- Main Agent Image and Overlay -->
                        <img src="{{ asset($mainAgent['image']) }}" class="team-sec-main-img" alt="{{ $mainAgent['name'] }}">

                        <!-- Contact Overlay Card -->
                        <div class="team-sec-contact-card">
                            <div class="team-sec-contact-header">
                                <span class="team-sec-contact-tag">Contact with me</span>
                                <a href="mailto:{{ $mainAgent['email'] }}" class="team-sec-contact-icon-btn">
                                    <i data-lucide="message-square"></i>
                                </a>
                            </div>
                            <a href="mailto:{{ $mainAgent['email'] }}" class="team-sec-contact-email">{{ $mainAgent['email'] }}</a>

                            <div class="team-sec-contact-info-wrap">
                                <h4>{{ $mainAgent['name'] }}</h4>
                                <p>Follow me</p>
                            </div>

                            <div class="team-sec-socials">
                                @if(isset($mainAgent['social']['linkedin']))
                                    <a href="{{ $mainAgent['social']['linkedin'] }}" target="_blank" class="team-sec-social-btn"><i data-lucide="linkedin"></i></a>
                                @endif
                                @if(isset($mainAgent['social']['tiktok']))
                                    <a href="{{ $mainAgent['social']['tiktok'] }}" target="_blank" class="team-sec-social-btn">
                                        <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" width="12" height="12"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
                                    </a>
                                @endif
                                @if(isset($mainAgent['social']['github']))
                                    <a href="{{ $mainAgent['social']['github'] }}" target="_blank" class="team-sec-social-btn"><i data-lucide="github"></i></a>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Right: Content & Smaller Cards -->
                <div class="team-sec-right">
                    <!-- Slider Navigation (Top right) -->
                    <div class="team-sec-nav">
                        <button class="team-sec-nav-btn prev"><i data-lucide="chevron-left"></i></button>
                        <button class="team-sec-nav-btn next"><i data-lucide="chevron-right"></i></button>
                    </div>

                    <div class="team-sec-header">
                        <h2>Contact with our<br/>top agents</h2>
                        <p>Our expert real estate agents are here to guide you every step of the way!</p>
                    </div>

                    <!-- Small Agents Grid/Flex -->
                    <div class="team-sec-agents">
                        
                        @php
                            $remainingTeam = array_slice($team, 1);
                            $bgClasses = ['bg-1', 'bg-2', 'bg-3'];
                        @endphp
                        
                        @foreach($remainingTeam as $index => $member)
                            <div class="team-sec-agent">
                                <a href="{{ route('team.show', $member['username']) }}" class="block">
                                    <div class="team-sec-agent-img-wrap {{ $bgClasses[$index % count($bgClasses)] }}">
                                        @if(!empty($member['image']))
                                            <img src="{{ asset($member['image']) }}" class="team-sec-agent-img" alt="{{ $member['name'] }}">
                                        @endif
                                    </div>
                                    <h4 class="truncate">{{ $member['name'] }}</h4>
                                    <p class="truncate">{{ $member['position'][0] ?? 'Agent' }}</p>
                                </a>
                                <div class="team-sec-socials">
                                    @if(isset($member['social']['linkedin']))
                                        <a href="{{ $member['social']['linkedin'] }}" target="_blank" class="team-sec-social-btn"><i data-lucide="linkedin"></i></a>
                                    @endif
                                    @if(isset($member['social']['tiktok']))
                                        <a href="{{ $member['social']['tiktok'] }}" target="_blank" class="team-sec-social-btn">
                                            <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" width="12" height="12"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
                                        </a>
                                    @endif
                                    @if(isset($member['social']['github']))
                                        <a href="{{ $member['social']['github'] }}" target="_blank" class="team-sec-social-btn"><i data-lucide="github"></i></a>
                                    @endif
                                    @if(empty($member['social']))
                                        <a href="mailto:{{ $member['email'] ?? 'info@iconvaluers.co.ke' }}" class="team-sec-social-btn"><i data-lucide="mail"></i></a>
                                    @endif
                                </div>
                            </div>
                        @endforeach

                    </div>
                    
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Rent -->
    @if($featuredRent->isNotEmpty())
        <section class="featured-section !pt-20">
            <div class="container">
                <div class="flex items-end justify-between mb-8">
                    <div>
                        <span class="text-sm font-bold text-primary tracking-wide mb-2 block">Luxury Lettings</span>
                        <h2 class="text-4xl font-800 text-slate-900">Properties For <span class="text-gradient">Rent</span>
                        </h2>
                    </div>
                    <a href="{{ route('properties.index', ['agreement' => 'rent']) }}"
                        class="text-sm font-bold text-slate-600 hover:text-primary transition-colors flex items-center gap-2">View
                        Rental Hub <i data-lucide="plus"></i></a>
                </div>
                <div class="featured-grid">
                    @foreach($featuredRent as $property)
                        @php $img = $property->images->where('is_cover', true)->first() ?? $property->images->first(); @endphp
                        <a href="{{ route('properties.show', $property->slug) }}" class="new-prop-card">
                            <div class="new-prop-img-box">
                                <img src="{{ $img ? asset('storage/' . $img->image) : 'https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=800&q=80' }}"
                                    alt="{{ $property->title }}">

                                <div class="new-prop-badge">
                                    <i data-lucide="home"></i>
                                    <span>{{ $property->property_type ? ucfirst($property->property_type) : 'Rent' }}</span>
                                </div>

                                <button class="new-prop-heart">
                                    <i data-lucide="heart"></i>
                                </button>
                            </div>

                            <div class="new-prop-content">
                                <div class="new-prop-price">KES {{ $minPrice ? number_format($minPrice) . '/mo' : 'On Request' }}</div>
                                <div class="new-prop-address">{{ $property->title }} <br> {{ $property->city }}</div>

                                @php
                                    $minBed = $property->variants->min('bedrooms');
                                    $minBath = $property->variants->min('bathrooms');
                                @endphp
                                @if($minBed || $minBath || $property->size)
                                    <div class="new-prop-specs">
                                        @if($minBed)
                                            <div class="new-prop-spec"><i data-lucide="bed"></i> {{ $minBed }} beds</div>
                                        @endif
                                        @if($minBath)
                                            <div class="new-prop-spec"><i data-lucide="bath"></i> {{ $minBath }} baths</div>
                                        @endif
                                        @if($property->size)
                                            <div class="new-prop-spec"><i data-lucide="square"></i> {{ $property->size }} sqft</div>
                                        @endif
                                    </div>
                                @endif

                                <div class="new-prop-btn">More Details</div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <!-- Blog Section -->
    @if(isset($latestBlogs) && $latestBlogs->isNotEmpty())
        <section class="blog-section">
            <div class="container">
                <div class="blog-header">
                    <span class="blog-badge">
                        <i data-lucide="newspaper"></i>
                        Latest News
                    </span>
                    <h2>Insights & Stories From the Real Estate World</h2>
                    <p>Stay updated with expert tips, market trends, and inspiring stories to guide your property decisions.</p>
                </div>

                <div class="blog-grid">
                    @foreach($latestBlogs as $blog)
                        @php
                            $imageUrl = $blog->cover_image ? url('storage/app/public/' . $blog->cover_image) : 'https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=800&q=80';
                            $publishedDate = $blog->published_at ?? $blog->created_at;
                            $day = $publishedDate->format('d');
                            $month = $publishedDate->format('M y');
                        @endphp
                        <a href="{{ route('blogs.show', $blog->slug) }}" class="blog-card">
                            <div class="blog-card-image">
                                <img src="{{ $imageUrl }}" alt="{{ $blog->title }}">
                                <div class="blog-date-overlay">
                                    <span class="blog-date-day">{{ $day }}</span>
                                    <span class="blog-date-month">{{ $month }}</span>
                                </div>
                                <div class="blog-category-tag">
                                    Icon News & Updates
                                </div>
                            </div>
                            <div class="blog-card-content">
                                <h3>{{ $blog->title }}</h3>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <!-- Final CTA -->
    <section class="pb-24 pt-10">
        <div class="container">
            <div class="bg-primary rounded-[3rem] p-12 md:p-24 text-center text-white relative overflow-hidden">
                <div class="relative z-10">
                    <h2 class="text-4xl md:text-6xl font-900 mb-8">Secure Your Property <span
                            class="text-indigo-300">Future</span></h2>
                    <p class="text-xl text-indigo-100 max-w-2xl mx-auto mb-12">Whether you need a valuation for
                        financing, professional management for your portfolio, or a high-end sale strategy, we're here
                        to deliver.</p>
                    <div class="flex flex-col md:flex-row justify-center gap-6">
                        <a href="{{ route('contact') }}"
                            class="bg-white text-primary px-10 py-5 rounded-2xl font-800 hover:scale-105 transition-all flex items-center justify-center gap-3">
                            Speak to an Expert
                            <i data-lucide="phone"></i>
                        </a>
                        <a href="{{ route('faq') }}"
                            class="border-2 border-white/30 hover:border-white text-white px-10 py-5 rounded-2xl font-800 transition-all flex items-center justify-center gap-3">
                            Browse FAQs
                            <i data-lucide="help-circle"></i>
                        </a>
                    </div>
                </div>
                <!-- Abstract visual element -->
                <div class="absolute -top-24 -right-24 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
                <div class="absolute -bottom-24 -left-24 w-64 h-64 bg-indigo-500/20 rounded-full blur-3xl"></div>
            </div>
        </div>
    </section>
</x-app-layout>