@extends('layouts.app')

@section('title', 'About Us — Texora Premium Compliance')

@section('content')

<section class="pt-40 pb-20 bg-[#050C17] text-white overflow-hidden">
    <div class="max-w-7xl mx-auto px-8">
        <span class="tx-eyebrow text-emerald mb-8 block anim-fade-up">Our Mission</span>
        <h1 class="text-6xl md:text-8xl font-black tracking-tighter mb-12">
            <span class="tx-split-line anim-reveal"><span>Legal precision.</span></span><br>
            <span class="tx-split-line anim-reveal"><span>Business growth.</span></span>
        </h1>
        <p class="text-white/40 text-2xl max-w-2xl leading-relaxed anim-fade-up">
            Texora was built to eliminate the legal friction of starting and running a business in Pakistan. We combine elite legal expertise with modern technology to deliver a seamless compliance experience.
        </p>
    </div>
</section>

<section class="py-32 bg-white">
    <div class="max-w-7xl mx-auto px-8 grid grid-cols-1 md:grid-cols-3 gap-16">
        <div class="anim-fade-up">
            <h3 class="text-4xl font-black text-[#050C17] mb-6 tracking-tighter">01. Integrity</h3>
            <p class="text-slate-500 leading-relaxed">No shortcuts. Every filing, every registration, and every audit is done strictly according to FBR and SECP regulations.</p>
        </div>
        <div class="anim-fade-up">
            <h3 class="text-4xl font-black text-[#050C17] mb-6 tracking-tighter">02. Speed</h3>
            <p class="text-slate-500 leading-relaxed">We understand that time is money. Our internal workflows are optimized to deliver certificates in record time.</p>
        </div>
        <div class="anim-fade-up">
            <h3 class="text-4xl font-black text-[#050C17] mb-6 tracking-tighter">03. Support</h3>
            <p class="text-slate-500 leading-relaxed">You're not just a ticket number. Every client is assigned a dedicated expert who knows their business inside out.</p>
        </div>
    </div>
</section>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    if (typeof gsap !== 'undefined') {
        gsap.to('.tx-split-line span', { y: 0, opacity: 1, duration: 1.5, stagger: 0.15, ease: 'expo.out' });
        gsap.from('.anim-fade-up', { y: 40, opacity: 0, duration: 1.2, stagger: 0.1, ease: 'power3.out', scrollTrigger: '.anim-fade-up' });
    }
});
</script>
@endpush