@extends('layouts.frontend')

@section('title', 'Musfiqur Rahman | Brand Strategist & Digital Consultant')
@section('meta_description', 'Musfiqur Rahman (Shovon) helps businesses grow through brand development, digital marketing, business strategy, and technology solutions.')

@php
$personSchema = [
    '@context' => 'https://schema.org',
    '@type' => 'Person',
    'name' => 'Musfiqur Rahman',
    'alternateName' => 'Shovon',
    'url' => url('/'),
    'sameAs' => [
        'https://www.facebook.com/itz.musfiqsvn',
        'https://www.linkedin.com/in/itz-musfiqsvn/',
        'https://www.instagram.com/itz.musfiqsvn'
    ],
    'jobTitle' => 'Brand Strategist & Digital Consultant',
    'worksFor' => [
        '@type' => 'Organization',
        'name' => 'UTurn Digital Solutions',
        'url' => 'https://uturndigital.com.bd'
    ],
    'address' => [
        '@type' => 'PostalAddress',
        'addressLocality' => 'Dhaka',
        'addressCountry' => 'BD'
    ]
];
@endphp

@push('structured-data')
<script type="application/ld+json">
{!! json_encode($personSchema) !!}
</script>
@endpush

@section('content')

<!-- ========== HERO SECTION ========== -->
<section id="hero" class="relative min-h-screen flex items-center overflow-hidden bg-gradient-to-br from-slate-50 via-white to-cyan-50">
    <!-- Animated Background -->
    @if($hero && $hero->show_animated_bg)
    <div class="absolute inset-0 overflow-hidden">
        <div class="absolute top-1/4 -left-1/4 w-96 h-96 bg-primary-200/30 rounded-full blur-3xl animate-pulse"></div>
        <div class="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-cyan-200/30 rounded-full blur-3xl animate-pulse" style="animation-delay: 1s;"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-gradient-to-r from-primary-100/20 to-cyan-100/20 rounded-full blur-3xl"></div>
    </div>
    @endif
    
    <div class="container mx-auto px-6 py-20 lg:py-0 relative z-10">
        <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
            
            <!-- Left Content -->
            <div class="text-center lg:text-left order-2 lg:order-1" data-animate>
                <div class="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-6">
                    <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
                    Available for Projects
                </div>
                
                <h1 class="font-space-grotesk text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold text-slate-900 leading-tight mb-6">
                    <span class="block">Hi, I'm</span>
                    <span class="bg-gradient-to-r from-primary-600 via-cyan-600 to-primary-600 bg-clip-text text-transparent">
                        {{ $hero->name ?? 'Musfiqur Rahman' }}
                    </span>
                </h1>
                
                <p class="text-xl sm:text-2xl text-slate-600 mb-4 font-medium">
                    {{ $hero->title ?? 'Brand Strategist & Digital Consultant' }}
                </p>
                
                <p class="text-lg text-slate-500 mb-8 max-w-xl mx-auto lg:mx-0">
                    {{ $hero->headline ?? 'Transforming businesses through strategic branding, digital marketing, and innovative technology solutions.' }}
                </p>
                
                <!-- CTA Buttons -->
                <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-12">
                    <a href="#contact" class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-primary-600 text-white rounded-xl font-semibold hover:bg-primary-700 transition-all duration-300 hover:shadow-lg hover:shadow-primary-600/25 hover:-translate-y-1">
                        <span>{{ $hero->cta_primary_text ?? 'Get Started' }}</span>
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                        </svg>
                    </a>
                    <a href="#portfolio" class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white text-slate-700 rounded-xl font-semibold border border-slate-200 hover:border-primary-300 hover:bg-primary-50 transition-all duration-300 hover:-translate-y-1">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                        </svg>
                        <span>{{ $hero->cta_secondary_text ?? 'View Portfolio' }}</span>
                    </a>
                    @if($hero && $hero->cta_tertiary_text)
                    <a href="{{ $hero->cta_tertiary_url ?? '#' }}" class="inline-flex items-center justify-center gap-2 px-8 py-4 text-slate-600 font-semibold hover:text-primary-600 transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <span>{{ $hero->cta_tertiary_text }}</span>
                    </a>
                    @endif
                </div>
                
                <!-- Counters -->
                @if($hero && $hero->counters)
                <div class="grid grid-cols-3 gap-6 max-w-lg mx-auto lg:mx-0">
                    @foreach($hero->counters as $counter)
                    <div class="text-center lg:text-left">
                        <div class="flex items-center justify-center lg:justify-start gap-2 mb-1">
                            <i class="{{ $counter['icon'] ?? 'fas fa-star' }} text-primary-600"></i>
                            <span class="text-3xl sm:text-4xl font-space-grotesk font-bold text-slate-900 counter" data-target="{{ $counter['value'] }}">{{ $counter['value'] }}</span>
                        </div>
                        <p class="text-sm text-slate-500">{{ $counter['label'] }}</p>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
            
            <!-- Right Image -->
            <div class="order-1 lg:order-2" data-animate>
                <div class="relative max-w-md mx-auto">
                    <!-- Decorative Elements -->
                    <div class="absolute -top-4 -left-4 w-24 h-24 bg-gradient-to-br from-primary-400 to-cyan-400 rounded-2xl opacity-20"></div>
                    <div class="absolute -bottom-4 -right-4 w-32 h-32 bg-gradient-to-br from-cyan-400 to-primary-400 rounded-2xl opacity-20"></div>
                    
                    <!-- Main Image -->
                    <div class="relative rounded-3xl overflow-hidden shadow-2xl shadow-slate-200/50">
                        @if($hero && $hero->profile_image)
                        <img src="{{ $hero->profileImageUrl }}" alt="Musfiqur Rahman" class="w-full aspect-square object-cover">
                        @else
                        <img src="{{ asset('images/profile-placeholder.jpg') }}" alt="Musfiqur Rahman" class="w-full aspect-square object-cover">
                        @endif
                        
                        <!-- Floating Badge -->
                        <div class="absolute bottom-6 left-6 right-6 bg-white/90 backdrop-blur-md rounded-2xl p-4 shadow-lg">
                            <div class="flex items-center gap-4">
                                <div class="flex -space-x-3">
                                    @foreach(['Facebook', 'LinkedIn', 'Instagram'] as $social)
                                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-500 to-cyan-500 flex items-center justify-center text-white text-xs font-bold border-2 border-white">
                                        {{ substr($social, 0, 1) }}
                                    </div>
                                    @endforeach
                                </div>
                                <div>
                                    <p class="text-sm font-semibold text-slate-900">Connect With Me</p>
                                    <p class="text-xs text-slate-500">Social Media</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Scroll Indicator -->
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
        <a href="#about" class="text-slate-400 hover:text-primary-600 transition-colors">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
            </svg>
        </a>
    </div>
</section>

<!-- ========== ABOUT SECTION ========== -->
<section id="about" class="py-24 lg:py-32 bg-white">
    <div class="container mx-auto px-6">
        <div class="grid lg:grid-cols-2 gap-16 items-center">
            
            <!-- Image Side -->
            <div class="relative" data-animate>
                <div class="relative rounded-3xl overflow-hidden">
                    @if($about && $about->about_image)
                    <img src="{{ $about->aboutImageUrl }}" alt="About Musfiqur Rahman" class="w-full rounded-3xl shadow-2xl">
                    @else
                    <div class="aspect-[4/5] bg-gradient-to-br from-primary-100 to-cyan-100 rounded-3xl flex items-center justify-center">
                        <span class="text-primary-300 text-6xl font-space-grotesk font-bold">M</span>
                    </div>
                    @endif
                </div>
                
                <!-- Experience Badge -->
                <div class="absolute -bottom-6 -right-6 bg-white rounded-2xl shadow-xl p-6">
                    <div class="text-center">
                        <span class="block text-4xl font-space-grotesk font-bold text-primary-600">5+</span>
                        <span class="text-sm text-slate-500">Years of<br>Experience</span>
                    </div>
                </div>
            </div>
            
            <!-- Content Side -->
            <div data-animate>
                <div class="inline-block px-4 py-2 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-6">
                    About Me
                </div>
                
                <h2 class="font-space-grotesk text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 mb-6">
                    Building Brands That <span class="text-primary-600">Make Impact</span>
                </h2>
                
                <div class="prose prose-lg text-slate-600 mb-8">
                    <p>{{ $about->biography ?? 'With over 5 years of experience in brand development, digital marketing, and business strategy, I help businesses transform their digital presence and achieve sustainable growth. My approach combines creative thinking with data-driven strategies to deliver measurable results.' }}</p>
                </div>
                
                @if($about && ($about->mission || $about->vision))
                <div class="grid sm:grid-cols-2 gap-6 mb-8">
                    @if($about->mission)
                    <div class="bg-slate-50 rounded-2xl p-6">
                        <div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center mb-4">
                            <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                            </svg>
                        </div>
                        <h4 class="font-semibold text-slate-900 mb-2">Mission</h4>
                        <p class="text-sm text-slate-600">{{ $about->mission }}</p>
                    </div>
                    @endif
                    
                    @if($about->vision)
                    <div class="bg-slate-50 rounded-2xl p-6">
                        <div class="w-12 h-12 bg-cyan-100 rounded-xl flex items-center justify-center mb-4">
                            <svg class="w-6 h-6 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                            </svg>
                        </div>
                        <h4 class="font-semibold text-slate-900 mb-2">Vision</h4>
                        <p class="text-sm text-slate-600">{{ $about->vision }}</p>
                    </div>
                    @endif
                </div>
                @endif
                
                @if($about && $about->resume_file)
                <a href="{{ $about->resumeUrl }}" download class="inline-flex items-center gap-2 px-6 py-3 bg-slate-900 text-white rounded-xl font-medium hover:bg-slate-800 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    Download Resume
                </a>
                @endif
            </div>
        </div>
    </div>
</section>

<!-- ========== EXPERIENCE TIMELINE ========== -->
<section id="experience" class="py-24 lg:py-32 bg-slate-50">
    <div class="container mx-auto px-6">
        <div class="text-center max-w-3xl mx-auto mb-16" data-animate>
            <div class="inline-block px-4 py-2 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-6">
                My Journey
            </div>
            <h2 class="font-space-grotesk text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 mb-6">
                Professional <span class="text-primary-600">Experience</span>
            </h2>
            <p class="text-lg text-slate-600">
                From corporate telecommunications to entrepreneurship, each step has shaped my approach to business and digital solutions.
            </p>
        </div>
        
        <div class="relative max-w-4xl mx-auto">
            <!-- Timeline Line -->
            <div class="absolute left-8 md:left-1/2 top-0 bottom-0 w-0.5 bg-gradient-to-b from-primary-600 via-cyan-500 to-primary-600"></div>
            
            <!-- Timeline Items -->
            <div class="space-y-12">
                @foreach($timelines as $index => $timeline)
                <div class="relative pl-20 md:pl-0 @if($index % 2 === 0) md:pr-1/2 @else md:pl-1/2 md:text-left @endif" data-animate>
                    <!-- Timeline Dot -->
                    <div class="absolute left-8 md:left-1/2 top-0 w-4 h-4 -translate-x-1/2 bg-primary-600 rounded-full border-4 border-white shadow-lg z-10">
                        <div class="absolute inset-0 bg-primary-400 rounded-full animate-ping opacity-75"></div>
                    </div>
                    
                    <!-- Content Card -->
                    <div class="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 @if($index % 2 === 1) md:ml-8 @else md:mr-8 @endif">
                        <div class="flex items-start gap-4">
                            <div class="hidden md:flex w-12 h-12 bg-primary-100 rounded-xl items-center justify-center flex-shrink-0">
                                <i class="{{ $timeline->icon ?? 'fas fa-briefcase' }} text-primary-600"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex flex-wrap items-center gap-2 mb-2">
                                    <span class="px-3 py-1 bg-{{ $timeline->category === 'telecom' ? 'blue' : ($timeline->category === 'it' ? 'purple' : ($timeline->category === 'real_estate' ? 'amber' : 'green')) }}-100 text-{{ $timeline->category === 'telecom' ? 'blue' : ($timeline->category === 'it' ? 'purple' : ($timeline->category === 'real_estate' ? 'amber' : 'green')) }}-700 text-xs font-medium rounded-full">
                                        {{ ucfirst(str_replace('_', ' ', $timeline->category)) }}
                                    </span>
                                    <span class="text-sm text-slate-400">{{ $timeline->duration }}</span>
                                </div>
                                <h3 class="font-space-grotesk text-xl font-bold text-slate-900 mb-1">{{ $timeline->title }}</h3>
                                <p class="text-primary-600 font-medium mb-2">{{ $timeline->company }}</p>
                                @if($timeline->location)
                                <p class="text-sm text-slate-500 mb-3 flex items-center gap-1">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    </svg>
                                    {{ $timeline->location }}
                                </p>
                                @endif
                                @if($timeline->description)
                                <p class="text-slate-600 text-sm">{{ $timeline->description }}</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

<!-- ========== SERVICES SECTION ========== -->
<section id="services" class="py-24 lg:py-32 bg-white">
    <div class="container mx-auto px-6">
        <div class="text-center max-w-3xl mx-auto mb-16" data-animate>
            <div class="inline-block px-4 py-2 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-6">
                What I Offer
            </div>
            <h2 class="font-space-grotesk text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 mb-6">
                Services That <span class="text-primary-600">Drive Growth</span>
            </h2>
            <p class="text-lg text-slate-600">
                Comprehensive solutions tailored to help your business thrive in the digital landscape.
            </p>
        </div>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($services as $service)
            <div class="group relative bg-white rounded-2xl p-8 border border-slate-100 hover:border-primary-200 hover:shadow-xl transition-all duration-300" data-animate>
                <!-- Gradient Background on Hover -->
                <div class="absolute inset-0 bg-gradient-to-br from-primary-50 to-cyan-50 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                
                <div class="relative z-10">
                    <!-- Icon -->
                    <div class="w-14 h-14 rounded-2xl flex items-center justify-center mb-6 transition-transform duration-300 group-hover:scale-110" style="background-color: {{ $service->color }}20;">
                        <i class="{{ $service->icon ?? 'fas fa-rocket' }} text-2xl" style="color: {{ $service->color }};"></i>
                    </div>
                    
                    <h3 class="font-space-grotesk text-xl font-bold text-slate-900 mb-4">{{ $service->title }}</h3>
                    <p class="text-slate-600 mb-6">{{ $service->description }}</p>
                    
                    @if($service->features && count($service->features) > 0)
                    <ul class="space-y-2">
                        @foreach($service->features as $feature)
                        <li class="flex items-center gap-2 text-sm text-slate-600">
                            <svg class="w-4 h-4 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            {{ $feature }}
                        </li>
                        @endforeach
                    </ul>
                    @endif
                </div>
                
                <!-- Arrow -->
                <div class="absolute top-8 right-8 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                    </svg>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- ========== BRANDS SECTION ========== -->
<section id="brands" class="py-24 lg:py-32 bg-slate-50">
    <div class="container mx-auto px-6">
        <div class="text-center max-w-3xl mx-auto mb-16" data-animate>
            <div class="inline-block px-4 py-2 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-6">
                Trusted Brands
            </div>
            <h2 class="font-space-grotesk text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 mb-6">
                Brands I've <span class="text-primary-600">Worked With</span>
            </h2>
            <p class="text-lg text-slate-600">
                Proud to partner with innovative brands across various industries.
            </p>
        </div>
        
        <div class="relative overflow-hidden">
            <div class="flex animate-marquee">
                @foreach($brands as $brand)
                <div class="flex-shrink-0 mx-8">
                    <a href="{{ $brand->url ?? '#' }}" target="_blank" rel="noopener" class="group block">
                        <div class="bg-white rounded-2xl p-6 shadow-md hover:shadow-xl transition-shadow duration-300 w-48 h-32 flex items-center justify-center">
                            @if($brand->logo)
                            <img src="{{ $brand->logoUrl }}" alt="{{ $brand->name }}" class="max-h-12 grayscale group-hover:grayscale-0 transition-all duration-300">
                            @else
                            <span class="font-space-grotesk font-bold text-slate-400 text-xl">{{ $brand->name }}</span>
                            @endif
                        </div>
                    </a>
                </div>
                @endforeach
                
                <!-- Duplicate for seamless loop -->
                @foreach($brands as $brand)
                <div class="flex-shrink-0 mx-8">
                    <div class="bg-white rounded-2xl p-6 shadow-md w-48 h-32 flex items-center justify-center">
                        @if($brand->logo)
                        <img src="{{ $brand->logoUrl }}" alt="{{ $brand->name }}" class="max-h-12 grayscale opacity-70">
                        @else
                        <span class="font-space-grotesk font-bold text-slate-400 text-xl">{{ $brand->name }}</span>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

<!-- ========== PORTFOLIO SECTION ========== -->
<section id="portfolio" class="py-24 lg:py-32 bg-white">
    <div class="container mx-auto px-6">
        <div class="text-center max-w-3xl mx-auto mb-16" data-animate>
            <div class="inline-block px-4 py-2 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-6">
                My Work
            </div>
            <h2 class="font-space-grotesk text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 mb-6">
                Featured <span class="text-primary-600">Projects</span>
            </h2>
            <p class="text-lg text-slate-600">
                A showcase of successful projects across branding, web development, and digital marketing.
            </p>
        </div>
        
        <!-- Filter Buttons -->
        <div class="flex flex-wrap justify-center gap-3 mb-12" data-animate>
            <button class="filter-btn active px-5 py-2.5 rounded-full font-medium text-sm transition-all duration-300 bg-primary-600 text-white" data-filter="all">
                All Projects
            </button>
            @foreach($categories as $category)
            <button class="filter-btn px-5 py-2.5 rounded-full font-medium text-sm transition-all duration-300 bg-slate-100 text-slate-600 hover:bg-slate-200" data-filter="{{ $category->slug }}">
                {{ $category->name }}
            </button>
            @endforeach
        </div>
        
        <!-- Projects Grid -->
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($projects as $project)
            <div class="project-card group" data-category="{{ $project->category->slug ?? 'all' }}" data-animate>
                <div class="relative bg-white rounded-2xl overflow-hidden border border-slate-100 hover:border-primary-200 hover:shadow-2xl transition-all duration-300">
                    <!-- Image -->
                    <div class="relative aspect-[4/3] overflow-hidden">
                        <img src="{{ $project->thumbnailUrl }}" alt="{{ $project->title }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        
                        <!-- Overlay -->
                        <div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-slate-900/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <div class="absolute bottom-4 left-4 right-4">
                                <a href="{{ route('project', $project->slug) }}" class="inline-flex items-center gap-2 px-4 py-2 bg-white text-slate-900 rounded-lg text-sm font-medium hover:bg-primary-600 hover:text-white transition-colors">
                                    View Project
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                                    </svg>
                                </a>
                            </div>
                        </div>
                        
                        <!-- Featured Badge -->
                        @if($project->is_featured)
                        <div class="absolute top-4 right-4">
                            <span class="px-3 py-1 bg-amber-500 text-white text-xs font-medium rounded-full">Featured</span>
                        </div>
                        @endif
                    </div>
                    
                    <!-- Content -->
                    <div class="p-6">
                        <span class="text-xs font-medium text-primary-600 uppercase tracking-wider">{{ $project->category->name ?? 'Project' }}</span>
                        <h3 class="font-space-grotesk text-lg font-bold text-slate-900 mt-2 mb-3">{{ $project->title }}</h3>
                        <p class="text-sm text-slate-600 line-clamp-2">{{ $project->description }}</p>
                        
                        @if($project->technologies && count($project->technologies) > 0)
                        <div class="flex flex-wrap gap-2 mt-4">
                            @foreach(array_slice($project->technologies, 0, 3) as $tech)
                            <span class="px-2 py-1 bg-slate-100 text-slate-600 text-xs rounded">{{ $tech }}</span>
                            @endforeach
                            @if(count($project->technologies) > 3)
                            <span class="px-2 py-1 bg-slate-100 text-slate-600 text-xs rounded">+{{ count($project->technologies) - 3 }}</span>
                            @endif
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        <div class="text-center mt-12" data-animate>
            <a href="{{ route('portfolio') }}" class="inline-flex items-center gap-2 px-8 py-4 bg-slate-900 text-white rounded-xl font-semibold hover:bg-slate-800 transition-colors">
                View All Projects
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                </svg>
            </a>
        </div>
    </div>
</section>

<!-- ========== SKILLS SECTION ========== -->
<section id="skills" class="py-24 lg:py-32 bg-slate-900">
    <div class="container mx-auto px-6">
        <div class="grid lg:grid-cols-2 gap-16 items-center">
            <div data-animate>
                <div class="inline-block px-4 py-2 bg-primary-900/50 text-primary-400 rounded-full text-sm font-medium mb-6">
                    My Expertise
                </div>
                <h2 class="font-space-grotesk text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
                    Skills & <span class="text-primary-400">Technologies</span>
                </h2>
                <p class="text-slate-400 text-lg mb-8">
                    Continuously learning and adapting to deliver cutting-edge solutions with modern technologies and best practices.
                </p>
                
                @php
                $categories = ['design', 'development', 'marketing', 'strategy'];
                @endphp
                
                <div class="grid grid-cols-2 gap-4">
                    @foreach($categories as $cat)
                    <div class="bg-slate-800/50 rounded-xl p-4 border border-slate-700">
                        <span class="text-primary-400 text-sm font-medium uppercase tracking-wider">{{ ucfirst($cat) }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
            
            <div class="space-y-6" data-animate>
                @foreach($skills as $skill)
                <div class="skill-item">
                    <div class="flex justify-between items-center mb-2">
                        <span class="font-medium text-white">{{ $skill->name }}</span>
                        <span class="text-sm text-slate-400">{{ $skill->percentage }}%</span>
                    </div>
                    <div class="h-3 bg-slate-700 rounded-full overflow-hidden">
                        <div class="h-full rounded-full skill-bar transition-all duration-1000 ease-out" 
                             style="width: 0%; background: linear-gradient(90deg, {{ $skill->color }}, {{ $skill->color }}80);"
                             data-percentage="{{ $skill->percentage }}">
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

<!-- ========== TESTIMONIALS SECTION ========== -->
<section id="testimonials" class="py-24 lg:py-32 bg-white">
    <div class="container mx-auto px-6">
        <div class="text-center max-w-3xl mx-auto mb-16" data-animate>
            <div class="inline-block px-4 py-2 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-6">
                Testimonials
            </div>
            <h2 class="font-space-grotesk text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 mb-6">
                What Clients <span class="text-primary-600">Say</span>
            </h2>
            <p class="text-lg text-slate-600">
                Don't just take my word for it. Here's what my clients have to say about working together.
            </p>
        </div>
        
        <div class="relative max-w-4xl mx-auto">
            <div class="testimonial-slider">
                @foreach($testimonials as $index => $testimonial)
                <div class="testimonial-slide @if($index === 0) active @endif">
                    <div class="bg-slate-50 rounded-3xl p-8 lg:p-12 text-center">
                        <!-- Quote Icon -->
                        <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-6">
                            <svg class="w-8 h-8 text-primary-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
                            </svg>
                        </div>
                        
                        <!-- Content -->
                        <blockquote class="text-xl lg:text-2xl text-slate-700 mb-8 leading-relaxed">
                            "{{ $testimonial->content }}"
                        </blockquote>
                        
                        <!-- Rating -->
                        <div class="flex justify-center gap-1 mb-6">
                            @for($i = 0; $i < $testimonial->rating; $i++)
                            <svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                            @endfor
                        </div>
                        
                        <!-- Author -->
                        <div class="flex items-center justify-center gap-4">
                            @if($testimonial->client_avatar)
                            <img src="{{ $testimonial->avatarUrl }}" alt="{{ $testimonial->client_name }}" class="w-14 h-14 rounded-full object-cover">
                            @else
                            <div class="w-14 h-14 rounded-full bg-gradient-to-br from-primary-400 to-cyan-400 flex items-center justify-center text-white font-bold text-lg">
                                {{ substr($testimonial->client_name, 0, 1) }}
                            </div>
                            @endif
                            <div class="text-left">
                                <p class="font-semibold text-slate-900">{{ $testimonial->client_name }}</p>
                                <p class="text-sm text-slate-500">{{ $testimonial->client_position }}{{ $testimonial->client_company ? ', ' . $testimonial->client_company : '' }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            
            <!-- Navigation -->
            <div class="flex justify-center gap-4 mt-8">
                <button class="testimonial-prev w-12 h-12 bg-slate-100 hover:bg-primary-100 rounded-full flex items-center justify-center transition-colors">
                    <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                </button>
                <button class="testimonial-next w-12 h-12 bg-slate-100 hover:bg-primary-100 rounded-full flex items-center justify-center transition-colors">
                    <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </button>
            </div>
            
            <!-- Dots -->
            <div class="flex justify-center gap-2 mt-6">
                @foreach($testimonials as $index => $testimonial)
                <button class="testimonial-dot w-3 h-3 rounded-full transition-all @if($index === 0) bg-primary-600 w-8 @else bg-slate-300 @endif" data-index="{{ $index }}"></button>
                @endforeach
            </div>
        </div>
    </div>
</section>

<!-- ========== CONTACT SECTION ========== -->
<section id="contact" class="py-24 lg:py-32 bg-gradient-to-br from-slate-900 via-primary-900 to-slate-900">
    <div class="container mx-auto px-6">
        <div class="grid lg:grid-cols-2 gap-16">
            <!-- Left Content -->
            <div data-animate>
                <div class="inline-block px-4 py-2 bg-primary-600/30 text-primary-400 rounded-full text-sm font-medium mb-6">
                    Get In Touch
                </div>
                <h2 class="font-space-grotesk text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
                    Let's Work <span class="text-primary-400">Together</span>
                </h2>
                <p class="text-slate-300 text-lg mb-8">
                    Ready to transform your business? Let's discuss how I can help you achieve your goals.
                </p>
                
                <!-- Contact Info -->
                <div class="space-y-6">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-primary-600/20 rounded-xl flex items-center justify-center">
                            <svg class="w-6 h-6 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm text-slate-400">Email</p>
                            <a href="mailto:hello@musfiqurrahman.com" class="text-white hover:text-primary-400 transition-colors">hello@musfiqurrahman.com</a>
                        </div>
                    </div>
                    
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-green-600/20 rounded-xl flex items-center justify-center">
                            <svg class="w-6 h-6 text-green-400" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm text-slate-400">WhatsApp</p>
                            <a href="https://wa.me/8801611985323" target="_blank" class="text-white hover:text-green-400 transition-colors">+880 1611-985323</a>
                        </div>
                    </div>
                    
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-cyan-600/20 rounded-xl flex items-center justify-center">
                            <svg class="w-6 h-6 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm text-slate-400">Location</p>
                            <span class="text-white">Dhaka, Bangladesh</span>
                        </div>
                    </div>
                </div>
                
                <!-- Quick Action Buttons -->
                <div class="flex flex-wrap gap-4 mt-10">
                    <a href="https://wa.me/8801611985323" target="_blank" class="inline-flex items-center gap-2 px-6 py-3 bg-green-600 text-white rounded-xl font-medium hover:bg-green-700 transition-colors">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                        </svg>
                        WhatsApp Me
                    </a>
                    <a href="tel:+8801611985323" class="inline-flex items-center gap-2 px-6 py-3 bg-white/10 text-white rounded-xl font-medium hover:bg-white/20 transition-colors backdrop-blur-sm">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                        </svg>
                        Call Now
                    </a>
                </div>
            </div>
            
            <!-- Contact Form -->
            <div data-animate>
                <div class="bg-white rounded-3xl p-8 lg:p-10 shadow-2xl">
                    <h3 class="font-space-grotesk text-2xl font-bold text-slate-900 mb-6">Send a Message</h3>
                    
                    @if(session('success'))
                    <div class="mb-6 p-4 bg-green-100 text-green-700 rounded-xl">
                        {{ session('success') }}
                    </div>
                    @endif
                    
                    <form action="{{ route('contact.submit') }}" method="POST" class="space-y-5">
                        @csrf
                        
                        <div class="grid sm:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">Your Name *</label>
                                <input type="text" name="name" required class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all outline-none" placeholder="John Doe">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">Email Address *</label>
                                <input type="email" name="email" required class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all outline-none" placeholder="john@example.com">
                            </div>
                        </div>
                        
                        <div class="grid sm:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">Phone Number</label>
                                <input type="tel" name="phone" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all outline-none" placeholder="+880 1XXX-XXXXXX">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">Company</label>
                                <input type="text" name="company" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all outline-none" placeholder="Your Company">
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">Service Interest</label>
                            <select name="service_interest" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all outline-none bg-white">
                                <option value="">Select a service</option>
                                <option value="brand-development">Brand Development</option>
                                <option value="digital-marketing">Digital Marketing</option>
                                <option value="web-development">Website Development</option>
                                <option value="business-strategy">Business Strategy</option>
                                <option value="consulting">Consulting</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">Your Message *</label>
                            <textarea name="message" rows="4" required class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all outline-none resize-none" placeholder="Tell me about your project..."></textarea>
                        </div>
                        
                        <button type="submit" class="w-full px-8 py-4 bg-primary-600 text-white rounded-xl font-semibold hover:bg-primary-700 transition-all duration-300 hover:shadow-lg hover:shadow-primary-600/25 flex items-center justify-center gap-2">
                            <span>Send Message</span>
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
                            </svg>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection