@props(['about'])

<section class="v2-section v2-about" aria-labelledby="home2-about-title">
    <div class="v2-shell v2-about-grid">
        <div class="v2-collage">
            <img src="{{ $about->image ?? 'https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=1000&q=80' }}" alt="Educational institution setup supported by Vinlab" loading="lazy">
            <img src="https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=700&q=80" alt="Mapping and GIS planning material" loading="lazy">
            <img src="https://images.unsplash.com/photo-1559757148-5c350d0d3c56?auto=format&fit=crop&w=700&q=80" alt="Medical training model environment" loading="lazy">
        </div>
        <div class="v2-copy">
            <p class="v2-eyebrow">About Vinlab</p>
            <h2 id="home2-about-title">{{ $about->title ?? 'Built for technical procurement teams that need confidence before they buy.' }}</h2>
            <p>{{ $about->description ?? 'Vinlab brings laboratory equipment, medical training models, educational charts, maps and GIS solutions into one consultative B2B experience.' }}</p>
            <ul class="v2-checks">
                @foreach(($about->points ?? ['Multi-domain B2B catalog', 'Quote-led institutional workflow', 'Support for setup and documentation']) as $point)
                    <li>{{ $point }}</li>
                @endforeach
            </ul>
        </div>
    </div>
</section>