<x-layouts.frontend title="About Us">
    <section class="relative overflow-hidden bg-gradient-luxury py-24">
        <div class="pointer-events-none absolute inset-0" style="background: radial-gradient(circle at 20% 30%, rgba(201,166,97,0.18), transparent 45%);"></div>
        <div class="relative mx-auto max-w-3xl px-6 text-center" data-reveal-self>
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-champagne-light">Our Story</p>
            <h1 class="mt-4 font-display text-4xl text-ivory sm:text-5xl">{{ config('niyarasa.brand_tagline') }}</h1>
        </div>
    </section>

    <section class="mx-auto max-w-4xl px-6 py-16">
        <div class="prose prose-neutral mx-auto max-w-none space-y-6 text-ink/70" data-reveal-self>
            <p class="text-lg leading-relaxed">
                {{ config('niyarasa.brand_name') }} was born from a simple belief: that everyday clothing
                deserves the same care as an occasion piece. Every fabric we choose, every stitch of
                embroidery, and every silhouette we cut is considered with that in mind.
            </p>
            <p class="leading-relaxed">
                We work closely with local artisans and mills to bring premium lawn, embroidered
                suits, and considered essentials to your wardrobe — without the markup of
                traditional luxury retail. What you're paying for is the craft, not the label.
            </p>
        </div>

        <div class="mt-16 grid grid-cols-1 gap-6 sm:grid-cols-3" data-reveal>
            <div class="card-premium group p-6 text-center">
                <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-champagne/10 text-champagne-light transition-transform duration-300 group-hover:scale-110">
                    <x-icon name="scissors" class="h-5 w-5" />
                </div>
                <p class="font-display text-lg text-ink">Considered Craft</p>
                <p class="mt-1 text-sm text-ink/50">Every piece is cut and finished with intention, not mass-produced.</p>
            </div>
            <div class="card-premium group p-6 text-center">
                <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-champagne/10 text-champagne-light transition-transform duration-300 group-hover:scale-110">
                    <x-icon name="leaf" class="h-5 w-5" />
                </div>
                <p class="font-display text-lg text-ink">Premium Fabric</p>
                <p class="mt-1 text-sm text-ink/50">Sourced from trusted mills for a feel that lasts wash after wash.</p>
            </div>
            <div class="card-premium group p-6 text-center">
                <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-champagne/10 text-champagne-light transition-transform duration-300 group-hover:scale-110">
                    <x-icon name="heart" class="h-5 w-5 fill-current" />
                </div>
                <p class="font-display text-lg text-ink">Made to be Worn</p>
                <p class="mt-1 text-sm text-ink/50">Designed for real life — not just the photograph.</p>
            </div>
        </div>
    </section>
</x-layouts.frontend>
