@extends('layouts.app')

@section('meta')
<meta name="description" content="Test layout page — development only">
@endsection

@section('content')

<x-atoms.section-wrapper id="typography">
    <x-atoms.subject>{{ __('navigation.solutions') }}</x-atoms.subject>

    <x-atoms.title title="Heading 1 — Poppins 3xl / 6xl" class="mt-4" />

    <x-atoms.title title="Heading 2 — Poppins 3xl / 5xl" class="mt-8" />

    <x-atoms.title title="Heading 3 — Poppins 2xl / 3xl" class="mt-8" />

    <x-atoms.title title="Heading 4 — Poppins xl / 2xl" class="mt-8" />

    <p class="text-base lg:text-xl mt-8">
        Body text — Poppins base / xl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>

    <p class="text-sm mt-4">
        Small text — Poppins sm. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
    </p>
</x-atoms.section-wrapper>

<x-atoms.section-wrapper id="spacing-demo">
    <x-atoms.subject>{{ __('navigation.approach') }}</x-atoms.subject>

    <x-atoms.title title="Section Spacing Demo" class="mt-4" />

    <p class="text-base lg:text-xl mt-4">
        This section demonstrates the default <code class="text-primary">py-20 px-4</code> spacing rhythm
        and the <code class="text-primary">max-w-7xl mx-auto</code> container constraint.
    </p>
</x-atoms.section-wrapper>

<x-atoms.section-wrapper id="contrast-demo" class="bg-card">
    <x-atoms.subject>{{ __('navigation.about') }}</x-atoms.subject>

    <x-atoms.title title="Contrast & Dark Mode" class="mt-4" />

    <p class="text-base lg:text-xl mt-4 text-card-foreground">
        Card background with card-foreground text. All text must maintain WCAG 2.1 AA 4.5:1 contrast ratio.
    </p>

    <div class="mt-6 p-6 bg-glassmorphism rounded-lg">
        <p class="text-foreground">Glassmorphism utility in action — semi-transparent card.</p>
    </div>
</x-atoms.section-wrapper>

{{-- Footer spacer — reserves 300px scroll space for the scroll-reveal footer effect --}}
<x-layouts.footer-layout />

@endsection