Rich Text

@props([
    'eyebrow'  => 'Published, June 2026',
    'title'    => 'Building products people actually trust',
    'lead'     => 'Great software is not just functional — it is legible, honest, and built with the people who use it in mind. A long-form look at the principles that guide our decisions.',
    'tags'     => null,
    'sections' => null,
])

@php
    $tags ??= ['Product', 'Design', 'Engineering'];
    $sections ??= [
        ['id' => 'start-with-why', 'title' => 'Start with why, not what', 'paragraphs' => ['Every feature begins as a hypothesis. Before a single line of code is written, we ask: who is this for, and what changes for them when it exists? Answering that honestly is one of the hardest things a team can do.', 'The teams that skip this step ship quickly and revisit slowly. Refactoring a feature whose purpose was never agreed on is far more expensive than the brief discomfort of alignment work upfront.'], 'list' => null, 'quote' => null],
        ['id' => 'design-for-the-edge', 'title' => 'Design for the edge, not the average', 'paragraphs' => ['Average-case thinking produces interfaces that work well for nobody in particular. Real users arrive in contexts you did not predict — low bandwidth, assistive tech, RTL scripts, bright sunlight.'], 'list' => ['Colour contrast is the floor, not the ceiling.', 'Every interactive element must be operable without a pointer.', 'Logical CSS properties give you RTL support for free.', 'Reduced-motion queries are table stakes.'], 'quote' => 'Accessibility is not a feature. It is a quality of the whole.'],
        ['id' => 'shipping-is-the-start', 'title' => 'Shipping is the start, not the finish', 'paragraphs' => ['Launch day is when you begin to learn. Everything before that is theory. The metrics you instrument and the support conversations you read are the real product research.', 'This does not mean rushing. It means releasing intentionally, with the observability to understand what is happening and the process to act on it.'], 'list' => null, 'quote' => null],
        ['id' => 'maintenance-is-craft', 'title' => 'Maintenance is craft', 'paragraphs' => ['The industry romanticises building new things. Fewer people write about the craft of keeping existing systems healthy — upgrading dependencies, retiring features, writing the boring migration.'], 'list' => ['Dependency hygiene is a security practice, not a chore.', 'Dead code is a liability that hides real behaviour.', 'Changelog entries for breaking changes are an act of respect.', 'Automated tests make confident refactoring possible.'], 'quote' => null],
    ];
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <div class="mx-auto max-w-5xl px-4">
        <div class="lg:grid lg:grid-cols-[220px_1fr] lg:gap-10">
            <aside class="mb-10 lg:mb-0">
                <nav aria-label="{{ __('On this page') }}" class="lg:sticky lg:top-24">
                    <p class="mb-4 text-sm font-semibold uppercase tracking-widest text-muted-foreground">{{ __('On this page') }}</p>
                    <ul class="space-y-2" role="list">
                        @foreach ($sections as $i => $section)
                            <li>
                                <a href="#{{ $section['id'] }}" @class(['block text-sm leading-relaxed transition-colors', 'border-s-2 border-primary ps-4 font-medium text-link' => $i === 0, 'ps-4 text-muted-foreground hover:text-foreground' => $i !== 0])>{{ __($section['title']) }}</a>
                            </li>
                        @endforeach
                    </ul>
                </nav>
            </aside>

            <article>
                @if (! empty($tags))
                    <div class="mb-4 flex flex-wrap gap-2">
                        @foreach ($tags as $tag)<x-ui.badge variant="secondary">{{ __($tag) }}</x-ui.badge>@endforeach
                    </div>
                @endif
                @if ($eyebrow)<p class="mb-4 text-sm text-muted-foreground">{{ __($eyebrow) }}</p>@endif
                <h1 class="mb-4 text-balance text-3xl font-bold tracking-tight sm:text-4xl">{{ __($title) }}</h1>
                <p class="mb-8 text-pretty text-xl leading-relaxed text-muted-foreground">{{ __($lead) }}</p>

                <x-ui.separator class="mb-10" />

                <div class="space-y-12">
                    @foreach ($sections as $section)
                        <section id="{{ $section['id'] }}">
                            <h2 class="mb-4 text-xl font-semibold text-foreground sm:text-2xl">{{ __($section['title']) }}</h2>
                            <div class="space-y-4">
                                @foreach ($section['paragraphs'] as $para)
                                    <p class="text-pretty leading-relaxed text-muted-foreground">{{ __($para) }}</p>
                                @endforeach
                                @if (! empty($section['list']))
                                    <ul class="ms-6 list-disc space-y-2 text-muted-foreground" role="list">
                                        @foreach ($section['list'] as $item)<li class="text-pretty leading-relaxed">{{ __($item) }}</li>@endforeach
                                    </ul>
                                @endif
                                @if (! empty($section['quote']))
                                    <blockquote class="border-s-2 border-primary ps-4 italic text-foreground">{{ __($section['quote']) }}</blockquote>
                                @endif
                            </div>
                            @unless ($loop->last)<x-ui.separator class="mt-10" />@endunless
                        </section>
                    @endforeach
                </div>
            </article>
        </div>
    </div>
</x-ui.section>