@extends('layouts.front.app')

@section('title', 'Home')

@section('content')
    <section class="border-b border-border bg-gradient-to-b from-muted/50 to-background">
        <div class="container py-16 sm:py-24 lg:py-28">
            <div class="mx-auto max-w-3xl text-center">
                <span class="inline-flex rounded-full border border-border bg-card px-3 py-1 text-xs font-medium text-muted-foreground">
                    {{ __('pages/home.badge') }}
                </span>
                <h1 class="mt-6 text-3xl font-bold tracking-tight text-foreground sm:text-4xl lg:text-5xl">
                    {{ __('pages/home.heading') }}
                </h1>
                <p class="mt-4 text-base leading-relaxed text-muted-foreground sm:text-lg">
                    {{ __('pages/home.description') }}
                </p>
                <div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
                    <a href="#" class="inline-flex w-full items-center justify-center rounded-xl bg-brand px-6 py-3 text-sm font-semibold text-brand-foreground sm:w-auto">
                        {{ __('buttons.get_started') }}
                    </a>
                    <a href="#features" class="inline-flex w-full items-center justify-center rounded-xl border border-border bg-card px-6 py-3 text-sm font-semibold text-foreground transition-colors hover:bg-muted sm:w-auto">
                        {{ __('buttons.view_features') }}
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section id="features" class="container py-16 sm:py-20">
        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ([__('pages/home.features.modular'), __('pages/home.features.dark_mode'), __('pages/home.features.accessible')] as $feature)
                <article class="rounded-2xl border border-border bg-card p-6 shadow-card">
                    <h2 class="text-lg font-semibold text-foreground">{{ $feature }}</h2>
                    <p class="mt-2 text-sm leading-relaxed text-muted-foreground">
                        {{ __('pages/home.features.description') }}
                    </p>
                </article>
            @endforeach
        </div>
    </section>
@endsection