@props([
    'eyebrow' => null, // small label above the title
    'title' => null, // main heading (HTML allowed, e.g. a highlighted word)
    'description' => null, // supporting paragraph
    'align' => 'center', // center | left
    'tone' => 'light', // light (on white/light bg) | dark (on green/dark bg)
    'tag' => 'h2', // heading tag, keep the page's heading order logical
])

{{--
    Standard section heading used on every frontend page.
    Styles live in resources/css/app.css (.section-head, .section-eyebrow, .section-title, .section-lead).
    Usage: <x-section-heading eyebrow="..." title="..." description="..." align="left" tone="dark" id="optional-id" />
--}}
<div
    {{ $attributes->class(['section-head', 'section-head--' . $align, 'section-head--dark' => $tone === 'dark']) }}>
    @if ($eyebrow)
        <p class="section-eyebrow">
            <span class="section-eyebrow__line section-eyebrow__line--start" aria-hidden="true"></span>
            {{ $eyebrow }}
            <span class="section-eyebrow__line" aria-hidden="true"></span>
        </p>
    @endif

    @if ($title)
        <{{ $tag }} class="section-title">{!! $title !!}</{{ $tag }}>
    @endif

    @if ($description)
        <p class="section-lead">{{ $description }}</p>
    @endif
</div>