@extends('layouts.app')

@section('title', 'Galería de componentes — Piedra Total Perú')

@section('content')
    <x-section>
        <x-container>
            <x-section-heading
                eyebrow="Sistema de diseño"
                title="Galería de componentes"
                subtitle="Vista de desarrollo para validar tokens, variantes y estructura de todos los componentes Blade."
                level="h1"
            />

            <div class="mt-12 border-l-4 border-accent-500 pl-6">
                <p class="font-sans text-xs font-semibold uppercase tracking-[0.2em] text-accent-text">Escala hero</p>
                <p class="text-hero text-on-surface">Piedra natural para grandes proyectos</p>
                <p class="mt-2 font-mono text-sm text-on-surface-muted">3.5rem / 1.05 / 600 — fluido hasta 2.25rem en móvil</p>
            </div>

            <div class="mt-12 space-y-16">
                {{-- Buttons --}}
                <section aria-labelledby="gallery-buttons">
                    <h2 id="gallery-buttons" class="mb-5 font-serif text-h2 text-on-surface">Botones</h2>
                    <div class="flex flex-wrap items-center gap-3">
                        <x-button variant="primary">Primario</x-button>
                        <x-button variant="secondary">Secundario</x-button>
                        <x-button variant="accent">Accent</x-button>
                        <x-button variant="ghost">Ghost</x-button>
                        <x-button variant="primary" size="sm">Pequeño</x-button>
                        <x-button variant="primary" size="lg">Grande</x-button>
                        <x-button href="/contacto" variant="primary">
                            Enlace (href)
                            <x-icon name="arrow-right" :size="16" />
                        </x-button>
                    </div>
                </section>

                {{-- Badges --}}
                <section aria-labelledby="gallery-badges">
                    <h2 id="gallery-badges" class="mb-5 font-serif text-h2 text-on-surface">Badges</h2>
                    <div class="flex flex-wrap items-center gap-3">
                        <x-badge variant="accent">Accent</x-badge>
                        <x-badge variant="brand">Brand</x-badge>
                        <x-badge variant="neutral">Neutral</x-badge>
                        <x-badge variant="success">Success</x-badge>
                        <x-badge variant="error">Error</x-badge>
                        <x-badge variant="available">Disponible</x-badge>
                        <x-badge variant="on_order">Bajo pedido</x-badge>
                    </div>
                </section>

                {{-- Shadows --}}
                <section aria-labelledby="gallery-shadows">
                    <h2 id="gallery-shadows" class="mb-5 font-serif text-h2 text-on-surface">Sombras suaves</h2>
                    <div class="grid gap-6 sm:grid-cols-3">
                        <div class="rounded-none border border-line bg-surface-raised p-8 shadow-soft">
                            <p class="font-sans text-sm font-medium text-on-surface">shadow-soft</p>
                            <p class="mt-1 font-sans text-sm text-on-surface-muted">Reposo de tarjetas y controles.</p>
                        </div>
                        <div class="rounded-none border border-line bg-surface-raised p-8 shadow-lift">
                            <p class="font-sans text-sm font-medium text-on-surface">shadow-lift</p>
                            <p class="mt-1 font-sans text-sm text-on-surface-muted">Hover y superficies elevadas.</p>
                        </div>
                        <div class="rounded-none border border-line bg-surface-alt p-8 text-on-surface shadow-lift">
                            <p class="font-sans text-sm font-medium">Superficie alterna</p>
                            <p class="mt-1 font-sans text-sm text-on-surface-muted">charcoal / ink</p>
                        </div>
                    </div>
                </section>

                {{-- Cards --}}
                <section aria-labelledby="gallery-cards">
                    <h2 id="gallery-cards" class="mb-5 font-serif text-h2 text-on-surface">Cards</h2>
                    <div class="grid gap-6 md:grid-cols-3 xl:grid-cols-4">
                        <x-card>
                            <h3 class="font-serif text-h3 text-on-surface">Card básica</h3>
                            <p class="mt-2 font-sans text-sm text-on-surface-muted">Superficie elevada con borde sutil y sombra suave.</p>
                        </x-card>

                        <x-product-card :product="['name' => 'Piedra Ayacuchana', 'slug' => 'piedra-ayacuchana', 'tone' => 'Terracota cálido', 'availability' => 'available']" />
                        <x-product-card :product="['name' => 'Pizarra Negra', 'slug' => 'pizarra-negra', 'tone' => 'Gris oscuro', 'availability' => 'on_order']" />
                        <x-product-card :product="['name' => 'Verde Esmeralda', 'slug' => 'verde-esmeralda', 'tone' => 'Verde profundo', 'availability' => 'available']" />
                    </div>
                </section>

                {{-- Section heading --}}
                <section aria-labelledby="gallery-heading">
                    <h2 id="gallery-heading" class="mb-5 font-serif text-h2 text-on-surface">Section heading</h2>
                    <x-section-heading
                        eyebrow="Eyebrow"
                        title="Título de sección"
                        subtitle="Subtítulo de apoyo con la escala body-lg y una medida de lectura cómoda."
                    />
                </section>

                {{-- Spec table --}}
                <section aria-labelledby="gallery-specs">
                    <h2 id="gallery-specs" class="mb-5 font-serif text-h2 text-on-surface">Tabla de especificaciones</h2>
                    <x-spec-table
                        title="Ficha técnica"
                        :items="[
                            'Espesor' => '2 cm',
                            'Formato' => '40 x 40 cm',
                            'Acabado' => 'Apomazado',
                            'Cobertura' => '0.96 m² por caja',
                            'Origen' => 'Cantera Ayacucho',
                        ]"
                    />
                </section>

                {{-- Alerts --}}
                <section aria-labelledby="gallery-alerts">
                    <h2 id="gallery-alerts" class="mb-5 font-serif text-h2 text-on-surface">Alertas</h2>
                    <div class="space-y-3">
                        <x-alert variant="success" title="Solicitud enviada">Te contactaremos en menos de 24 horas.</x-alert>
                        <x-alert variant="error" title="Revisa el formulario">El correo es obligatorio.</x-alert>
                        <x-alert variant="info" title="Dato útil">Cotizamos por metro cuadrado y por volumen.</x-alert>
                    </div>
                </section>

                {{-- Breadcrumbs --}}
                <section aria-labelledby="gallery-breadcrumbs">
                    <h2 id="gallery-breadcrumbs" class="mb-5 font-serif text-h2 text-on-surface">Breadcrumbs</h2>
                    <x-breadcrumbs :items="[
                        ['label' => 'Inicio', 'url' => '/'],
                        ['label' => 'Colecciones', 'url' => '/productos'],
                        ['label' => 'Piedra Ayacuchana', 'url' => null],
                    ]" />
                </section>

                {{-- Forms --}}
                <section aria-labelledby="gallery-forms">
                    <h2 id="gallery-forms" class="mb-5 font-serif text-h2 text-on-surface">Formularios</h2>
                    <div class="grid max-w-2xl gap-5">
                        <x-form.input name="nombre" label="Nombre" placeholder="Tu nombre" required />
                        <x-form.input name="correo" label="Correo" type="email" hint="No compartiremos tu correo." />
                        <x-form.select
                            name="region"
                            label="Región"
                            placeholder="Selecciona una región"
                            :options="['lima' => 'Lima', 'arequipa' => 'Arequipa', 'cusco' => 'Cusco']"
                        />
                        <x-form.textarea name="mensaje" label="Mensaje" placeholder="Cuéntanos sobre tu proyecto" />
                        <x-form.checkbox name="acepto" label="Acepto la política de privacidad" hint="Usaremos tus datos solo para contactarte." />
                        <x-form.error name="demo" :messages="['Mensaje de error de ejemplo.']" />
                    </div>
                </section>
            </div>
        </x-container>
    </x-section>

    <x-section tone="alt">
        <x-container>
            <x-section-heading
                eyebrow="Alternancia"
                title="Sección con superficie alterna"
                subtitle="La variante `tone` alterna el fondo entre surface (canvas) y surface-alt."
            />
        </x-container>
    </x-section>
@endsection