---
import { Image } from "astro:assets";
---

<section id="why-us" class="py-32 md:py-48 lg:py-64 overflow-hidden bg-brand-cream">
    <div class="container-brand relative">
        <h2 class="sr-only">Why Neighbors Trust Summit</h2>

        <div class="grid-12">
            <!-- Left: Main Value Card (Col 1-7) -->
            <div class="col-span-1 md:col-span-12 lg:col-span-7 bg-white rounded-[4rem] p-12 md:p-20 shadow-2xl relative overflow-hidden group mb-12 lg:mb-0">
                <div class="absolute inset-0 brush-texture opacity-[0.03] pointer-events-none"></div>
                
                <div class="relative z-10">
                    <span class="inline-block text-[11px] font-bold uppercase tracking-[0.4em] text-brand-green/60 mb-10 reveal-item">Values & Ethics</span>
                    <h3 class="text-5xl md:text-7xl font-serif font-medium tracking-tighter text-brand-dark uppercase leading-[0.85] mb-12">
                        <span class="text-reveal-mask">
                            <span class="text-reveal-line">Craftsmanship</span>
                        </span>
                        <span class="text-reveal-mask">
                            <span class="text-reveal-line italic font-light opacity-40">In Every Detail</span>
                        </span>
                    </h3>
                    <p class="text-xl md:text-2xl text-brand-dark/80 leading-relaxed font-light max-w-xl mb-16 italic">
                        Our stewardship with our expert craftsmanship sets us apart. <span class="font-bold text-brand-dark">Premium painting</span> is the process to stay quality-focused and meticulous.
                    </p>

                    <!-- Trust Mini-Grid -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                        <div class="reveal-item transition-all duration-700 delay-100">
                            <div class="w-3 h-3 rounded-full bg-brand-green mb-6" />
                            <h4 class="font-bold text-brand-dark mb-3 uppercase tracking-widest text-[10px]">Detail</h4>
                            <p class="text-brand-dark/40 text-sm leading-relaxed font-light">
                                We scrape, sand, and prime diligently.
                            </p>
                        </div>
                        <div class="reveal-item transition-all duration-700 delay-200">
                            <div class="w-3 h-3 rounded-full bg-brand-sage mb-6" />
                            <h4 class="font-bold text-brand-dark mb-3 uppercase tracking-widest text-[10px]">Fairness</h4>
                            <p class="text-brand-dark/40 text-sm leading-relaxed font-light">
                                No hidden fees. Detailed estimates.
                            </p>
                        </div>
                        <div class="reveal-item transition-all duration-700 delay-300">
                            <div class="w-3 h-3 rounded-full bg-brand-cream ring-1 ring-brand-green/10 mb-6" />
                            <h4 class="font-bold text-brand-dark mb-3 uppercase tracking-widest text-[10px]">Reliability</h4>
                            <p class="text-brand-dark/40 text-sm leading-relaxed font-light">
                                Colorado Springs residents you can trust.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right: Image Tiles (Col 8-12) -->
            <div class="col-span-1 md:col-span-12 lg:col-span-5 flex flex-col gap-12 lg:pl-12">
                <!-- Image Tile 1 -->
                <div class="relative h-[400px] rounded-[4rem] overflow-hidden shadow-2xl group reveal-item transition-all duration-1000">
                    <img
                        src="/media/cloth1.png"
                        alt="Quality detail"
                        class="absolute inset-0 w-full h-full object-cover transition-transform duration-[10s] group-hover:scale-110 grayscale group-hover:grayscale-0"
                    />
                    <div class="absolute inset-0 bg-gradient-to-t from-brand-dark/60 via-transparent to-transparent opacity-80" />
                    <div class="absolute bottom-10 left-10 text-white">
                        <p class="text-[10px] font-bold uppercase tracking-[0.3em] opacity-60 mb-3">Texture</p>
                        <p class="text-3xl font-serif">Meticulous Detail</p>
                    </div>
                </div>

                <!-- Image Tile 2 -->
                <div class="relative h-[300px] rounded-[4rem] overflow-hidden shadow-2xl group reveal-item transition-all duration-1000 delay-200">
                    <img
                        src="/media/mixing2.png"
                        alt="Color mixing"
                        class="absolute inset-0 w-full h-full object-cover transition-transform duration-[10s] group-hover:scale-110 grayscale group-hover:grayscale-0"
                    />
                    <div class="absolute inset-0 bg-gradient-to-t from-brand-dark/60 via-transparent to-transparent opacity-80" />
                    <div class="absolute bottom-10 left-10 text-white">
                        <p class="text-[10px] font-bold uppercase tracking-[0.3em] opacity-60 mb-3">Process</p>
                        <p class="text-3xl font-serif italic font-light">Hand-Mixed Perfection</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
