@extends('layouts.app')

@section('title', __('site.meta.title'))
@section('description', __('site.meta.description'))

@section('content')
<!-- Hero Section -->
<section id="home" class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-7 mb-4 mb-lg-0">
                <div class="hero-kicker">
                    <span class="hero-kicker-dot"></span>
                    <span>{{ __('site.landing.hero.kicker') }}</span>
                </div>

                <h1 class="hero-title">{!! __('site.landing.hero.title') !!}</h1>

                <p class="hero-text">{{ __('site.landing.hero.description') }}</p>

                <div class="mb-4">
                    <span class="hero-badge">Manual car wash centers</span>
                    <span class="hero-badge">Interior & exterior cleaning</span>
                    <span class="hero-badge">Polishing & detailing</span>
                    <span class="hero-badge">Online booking & billing</span>
                </div>

                <div class="d-flex gap-3 mb-4 flex-wrap">
                    <a href="{{ route('company-register') }}" class="btn btn-primary btn-lg">
                        <i class="fas fa-rocket"></i> {{ __('site.landing.hero.cta_primary') }}
                    </a>
                    <a href="#how-it-works" class="btn btn-outline-primary btn-lg">
                        <i class="fas fa-play"></i> {{ __('site.landing.hero.cta_secondary') }}
                    </a>
                </div>

                <div class="hero-meta d-flex gap-4 flex-wrap">
                    <span><strong>{{ __('site.landing.hero.stat_booking') }}</strong></span>
                    <span><strong>{{ __('site.landing.hero.stat_waiting') }}</strong></span>
                    <span><strong>{{ __('site.landing.hero.stat_invoices') }}</strong></span>
                </div>
            </div>

            <div class="col-lg-5 d-none d-lg-block">
                <div class="phone-mockup">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='500' viewBox='0 0 250 500'%3E%3Crect width='250' height='500' rx='30' fill='%23E8F5EE'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='system-ui' font-size='16' fill='%2300B894'%3EBilpleie App%3C/text%3E%3C/svg%3E"
                         alt="Bilpleie App Preview"
                         class="img-fluid rounded-4">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section id="features" class="py-5 fade-in-section">
    <div class="container">
        <h2 class="section-title text-center mb-5">{{ __('site.landing.features.title') }}</h2>

        <div class="row g-4">
            @foreach(__('site.landing.features.items') as $index => $feature)
            <div class="col-md-6 col-lg-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        @php
                            $icons = [
                                '<i class="fas fa-users"></i>',
                                '<i class="fas fa-calendar-alt"></i>',
                                '<i class="fas fa-spray-can"></i>',
                                '<i class="fas fa-star"></i>',
                                '<i class="fas fa-credit-card"></i>',
                                '<i class="fas fa-file-invoice"></i>',
                                '<i class="fas fa-bolt"></i>'
                            ];
                        @endphp
                        {!! $icons[$index] ?? '<i class="fas fa-car"></i>' !!}
                    </div>
                    <h4 class="fw-bold mb-3">{{ $feature['title'] }}</h4>
                    <p class="text-muted mb-0">{{ $feature['description'] }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- How It Works Section -->
<section id="how-it-works" class="py-5 fade-in-section" style="background: var(--color-light-surface);">
    <div class="container">
        <h2 class="section-title text-center mb-5">{{ __('site.landing.how_it_works.title') }}</h2>

        <div class="row g-5">
            <div class="col-md-6">
                <h4 class="fw-bold mb-4" style="color: var(--color-primary-dark);">
                    {{ __('site.landing.how_it_works.for_customers.title') }}
                </h4>
                <ol class="list-unstyled">
                    @foreach(__('site.landing.how_it_works.for_customers.steps') as $index => $step)
                    <li class="mb-3 d-flex">
                        <span class="step-number">{{ $index + 1 }}</span>
                        <span>{{ $step }}</span>
                    </li>
                    @endforeach
                </ol>
            </div>

            <div class="col-md-6" id="for-centers">
                <h4 class="fw-bold mb-4" style="color: var(--color-primary-dark);">
                    {{ __('site.landing.how_it_works.for_centers.title') }}
                </h4>
                <ol class="list-unstyled">
                    @foreach(__('site.landing.how_it_works.for_centers.steps') as $index => $step)
                    <li class="mb-3 d-flex">
                        <span class="step-number">{{ $index + 1 }}</span>
                        <span>{{ $step }}</span>
                    </li>
                    @endforeach
                </ol>
            </div>
        </div>

        <div class="text-center mt-5">
            <a href="{{ route('company-register') }}" class="btn btn-primary btn-lg">
                {{ __('site.landing.nav.register') }} →
            </a>
        </div>
    </div>
</section>
@endsection