@extends('layouts.app')

@section('content')

    {{-- Hero Section --}}
    <section class="hero">
        <div class="container hero-grid">
            <div class="hero-content">
                <h1>{!! nl2br(e($settings['hero_heading'] ?? "STRATEGIC ADVOCACY.\nPROVEN RESULTS.")) !!}</h1>
                <a href="#contact" class="btn-gold">{{ $settings['hero_button_text'] ?? 'Schedule Consultation' }}</a>
            </div>
            <div class="hero-image-wrapper">
                <img src="{{ !empty($settings['hero_portrait']) ? media_url($settings['hero_portrait']) : 'https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&q=80&w=600' }}"
                     alt="{{ $settings['footer_name'] ?? 'Portrait' }}" class="hero-portrait">
            </div>
        </div>
    </section>

    {{-- Profile & Practice Areas Split Section --}}
    <section class="profile-practice" id="about">
        <div class="container split-grid">

            {{-- Left: Profile --}}
            <div>
                <h3 class="section-title">{{ $settings['profile_heading'] ?? 'Profile' }}</h3>
                <div class="profile-bio">
                    <img src="{{ !empty($settings['profile_avatar']) ? media_url($settings['profile_avatar']) : 'https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&q=80&w=200' }}"
                         alt="{{ $settings['footer_name'] ?? 'Profile' }}" class="mini-avatar">
                    <p class="bio-text">
                        {{ $settings['profile_bio'] ?? '' }}
                    </p>
                </div>
                <p class="profile-footer-text">
                    {{ $settings['profile_footer_text'] ?? '' }}
                </p>
            </div>

            {{-- Right: Practice Areas --}}
            <div id="practice">
                <h3 class="section-title">Practice Areas</h3>
                <div class="practice-grid">
                    @forelse($practiceAreas as $area)
                        <div class="practice-card">
                            <div class="icon-circle">
                                <i class="{{ $area->icon }}"></i>
                            </div>
                            <h4>{!! nl2br(e($area->title)) !!}</h4>
                        </div>
                    @empty
                        <p class="bio-text">No practice areas added yet.</p>
                    @endforelse
                </div>
                <div class="practice-cta-wrapper">
                    <a href="{{ route('cases.index') }}" class="btn-gold">View More</a>
                </div>
            </div>

        </div>
    </section>

    {{-- Stats / Counter Section --}}
    <section class="stats" id="stats">
        <div class="container stats-grid">
            <div class="stat-card">
                <div class="stat-number" data-count="{{ (int) ($settings['stat_consultations'] ?? 0) }}">0</div>
                <div class="stat-label">Legal Consultations</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" data-count="{{ (int) ($settings['stat_clients'] ?? 0) }}">0</div>
                <div class="stat-label">Happy Clients</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" data-count="{{ (int) ($settings['stat_court_appearances'] ?? 0) }}">0</div>
                <div class="stat-label">Court Appearances</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" data-count="{{ (int) ($settings['stat_years'] ?? 0) }}">0</div>
                <div class="stat-label">Years of Experience</div>
            </div>
        </div>
    </section>

    {{-- Selected Case Studies Section --}}
    <section class="case-studies" id="cases">
        <div class="container">
            <h3 class="section-title">Selected Case Studies</h3>

            <div class="case-grid">
                @forelse($featuredCases as $case)
                    <a href="{{ $case->body }}" target="_blank" rel="noopener noreferrer" style="display:block;">
                        <div class="case-card">
                            @if($case->image)
                                <img src="{{ media_url($case->image) }}" alt="{{ $case->title }}" class="case-card-image">
                            @endif
                            <h4>{{ $case->title }}</h4>
                            <p>{{ $case->excerpt }}</p>
                        </div>
                    </a>
                @empty
                    <p class="bio-text">No case studies published yet.</p>
                @endforelse
            </div>

            @if($featuredCases->count() > 0)
                <div class="practice-cta-wrapper" style="margin-top:40px;">
                    <a href="{{ route('cases.index') }}" class="btn-gold">View All Cases</a>
                </div>
            @endif
        </div>
    </section>

@endsection

@section('extra-scripts')
    <script>
        // Count-up animation for stats section
        (function () {
            const counters = document.querySelectorAll('.stat-number');
            if (!counters.length) return;

            const animateCounter = (el) => {
                const target = parseInt(el.getAttribute('data-count'), 10) || 0;
                const duration = 1500;
                const startTime = performance.now();

                const step = (now) => {
                    const progress = Math.min((now - startTime) / duration, 1);
                    const eased = 1 - Math.pow(1 - progress, 3);
                    el.textContent = Math.floor(eased * target).toLocaleString();
                    if (progress < 1) {
                        requestAnimationFrame(step);
                    } else {
                        el.textContent = target.toLocaleString();
                    }
                };
                requestAnimationFrame(step);
            };

            const observer = new IntersectionObserver((entries, obs) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        animateCounter(entry.target);
                        obs.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.4 });

            counters.forEach(counter => observer.observe(counter));
        })();
    </script>
@endsection