@extends('storefront.layout')

@section('title', 'Why Vida Mansa')

@section('content')
<section class="max-w-5xl mx-auto px-6 lg:px-8 py-20">
    <p class="text-xs uppercase tracking-[0.2em] text-emerald-700 font-medium mb-3">Why Vida Mansa</p>
    <h1 class="text-4xl md:text-5xl font-semibold tracking-tight text-stone-900">A premium product line built for modern pet retail.</h1>
    <p class="mt-6 text-lg text-stone-600 max-w-3xl">
        Vida Mansa gives retailers more than a single item to test on the shelf:
        it delivers a premium pet-care line with proven demand, distinctive design,
        and practical solutions customers understand quickly. From hydration to feeding,
        every product is built to elevate the category, support stronger margins, and
        create a better experience for pets and their owners.
    </p>

    <div class="mt-12 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach ([
            [
                'Tested and Proven in Brazil',
                'Products already tested, approved, and established in the Brazilian pet market.',
                '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>',
            ],
            [
                'Premium Quality',
                'Made with durable materials, thoughtful finishes, and a design built for everyday use.',
                '<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/>',
            ],
            [
                'Easy to Handle',
                'Simple to refill, clean, display, and explain to customers.',
                '<path stroke-linecap="round" stroke-linejoin="round" d="M10.05 4.575a1.575 1.575 0 1 0-3.15 0v3m3.15-3v-1.5a1.575 1.575 0 0 1 3.15 0v1.5m-3.15 0 .075 5.925m3.075.75V4.575m0 0a1.575 1.575 0 0 1 3.15 0V15M6.9 7.575a1.575 1.575 0 1 0-3.15 0v8.175a6.75 6.75 0 0 0 6.75 6.75h2.018a5.25 5.25 0 0 0 3.712-1.538l1.732-1.732a5.25 5.25 0 0 0 1.538-3.712l.003-2.024a.668.668 0 0 1 .198-.471 1.575 1.575 0 1 0-2.228-2.228 3.818 3.818 0 0 0-1.12 2.687M6.9 7.575V12m6.27 4.318A4.49 4.49 0 0 1 16.35 15m.002 0h-.002"/>',
            ],
            [
                'Unique and Innovative',
                'Distinctive products created to solve real pet-care problems, not just fill shelf space.',
                '<path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/>',
            ],
            [
                'High Perceived Value',
                'Because it fixes a genuine problem — wet fur, mess around the bowl — the product commands a premium price. Higher ticket means higher margin for every unit on your shelf.',
                '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z"/>',
            ],
            [
                'Premium Line for Retail Shelves',
                'A complete product family with clear benefits, attractive design, and strong shelf appeal.',
                '<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016 2.993 2.993 0 0 0 2.25-1.016 3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z"/>',
            ],
        ] as $card)
            <div class="rounded-xl border border-stone-200 bg-white p-7 flex flex-col gap-5 hover:border-emerald-300 hover:shadow-md transition-all">
                <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-700 flex items-center justify-center shrink-0 shadow-sm">
                    <svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        {!! $card[2] !!}
                    </svg>
                </div>
                <div>
                    <div class="text-base font-semibold text-stone-900">{{ $card[0] }}</div>
                    <p class="mt-2 text-sm text-stone-600 leading-relaxed">{{ $card[1] }}</p>
                </div>
            </div>
        @endforeach
    </div>
</section>
@endsection