@extends('layouts.app')

@section('title', 'About Texora')
@section('meta_description', 'Learn why Texora exists and how we help founders handle registration, tax, and compliance with clarity.')

@section('content')
@php
    $waNum = App\Models\SiteSetting::where('key','whatsapp_number')->value('value') ?? '923001234567';
@endphp

<main class="txp-page" data-txp-page>
    <section class="txp-hero" data-txp-hero>
        <div class="txp-shell txp-hero-grid txp-about-hero-grid">
            <div>
                <span class="txp-kicker txp-reveal">About Texora</span>
                <h1 class="txp-title txp-reveal">We make compliance feel human<span class="txp-dot">.</span></h1>
            </div>
            <div class="txp-about-hero-copy">
                <p class="txp-lede txp-reveal">Texora is built for founders who want to move fast without guessing their way through FBR, SECP, taxes, or international setup.</p>
                <div class="mt-8 flex flex-wrap gap-3 txp-reveal">
                    <a href="{{ route('services.index') }}" class="txp-button">View Services</a>
                    <a href="https://wa.me/{{ $waNum }}" target="_blank" class="txp-button-dark">Talk to Expert</a>
                </div>
            </div>
        </div>
    </section>

    <section class="txp-section txp-blue-panel" data-txp-section>
        <div class="txp-shell">
            <div class="txp-section-head">
                <h2>Why we exist<span class="txp-dot">.</span></h2>
                <p>Most compliance work feels slow because the process is hidden. Texora makes every step visible, guided, and easier to act on.</p>
            </div>
            <div class="txp-grid">
                <article class="txp-card">
                    <small>01</small>
                    <h3>Clarity first</h3>
                    <p>Requirements, pricing, and timelines are explained before you start.</p>
                </article>
                <article class="txp-card">
                    <small>02</small>
                    <h3>Expert led</h3>
                    <p>Every case gets real review from a compliance specialist.</p>
                </article>
                <article class="txp-card">
                    <small>03</small>
                    <h3>Built for growth</h3>
                    <p>From Pakistan registrations to USA LLC and UK LTD setup, Texora supports where your business goes next.</p>
                </article>
            </div>
        </div>
    </section>

    <section class="txp-section" data-txp-section>
        <div class="txp-shell txp-hero-grid">
            <div class="txp-visual txp-about-visual">
                <b>Human compliance</b>
                <div class="txp-about-visual__panel">
                    <span>Case clarity</span>
                    <strong>Documents, filings, and updates in one guided flow.</strong>
                    <i></i>
                </div>
            </div>
            <div>
                <span class="txp-kicker txp-reveal">Our approach</span>
                <h2 class="txp-title txp-reveal" style="font-size:clamp(4rem,7vw,8rem);">Less paperwork panic. More progress<span class="txp-dot">.</span></h2>
                <p class="txp-lede txp-reveal">We combine structured digital flows with human review so clients can register, file, and stay compliant without feeling lost in portals and policies.</p>
            </div>
        </div>
    </section>

    <section class="txp-section txp-dark" data-txp-section>
        <div class="txp-shell">
            <div class="txp-section-head">
                <h2>Principles<span class="txp-dot">.</span></h2>
                <p>The same standard behind every Texora service.</p>
            </div>
            <div class="space-y-0">
                @foreach([
                    ['Transparent process', 'No hidden steps, vague timelines, or confusing requirements.', 'Process'],
                    ['Secure documents', 'Client data is handled carefully and only for the assigned case.', 'Security'],
                    ['Fast communication', 'Updates are clear, direct, and easy to follow.', 'Communication'],
                    ['Long-term support', 'Registration is only the start. Compliance continues after setup.', 'Support'],
                ] as $row)
                    <div class="txp-row">
                        <strong>{{ $row[0] }}</strong>
                        <span>{{ $row[1] }}</span>
                        <em>{{ $row[2] }}</em>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="txp-section" data-txp-section>
        <div class="txp-shell text-center">
            <span class="txp-kicker txp-reveal justify-center">Ready</span>
            <h2 class="txp-title txp-reveal mx-auto" style="font-size:clamp(4rem,8vw,9rem);">Work with Texora<span class="txp-dot">.</span></h2>
            <p class="txp-lede txp-reveal mx-auto" style="max-width:680px;">Start with the right service and let our experts guide your compliance journey.</p>
            <a href="{{ route('register') }}" class="txp-button txp-reveal mt-10">Create Account</a>
        </div>
    </section>
</main>
@endsection