@extends('layouts.app')

@section('title', 'Contact Texora')
@section('meta_description', 'Contact Texora for business registration, tax filing, NTN, FBR, SECP, USA LLC, UK LTD, and compliance support.')

@section('content')
@php
    $email = App\Models\SiteSetting::where('key','site_email')->value('value') ?: 'support@texora.pk';
    $phone = App\Models\SiteSetting::where('key','site_phone')->value('value') ?: '+92 300 1234567';
    $addr = App\Models\SiteSetting::where('key','site_address')->value('value') ?: 'Pakistan';
    $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">
            <div>
                <span class="txp-kicker txp-reveal">Contact</span>
                <h1 class="txp-title txp-reveal">Tell us what you are building<span class="txp-dot">.</span></h1>
            </div>
            <p class="txp-lede txp-reveal">Ask about registration, tax filing, compliance, USA LLC, UK LTD, or anything you are unsure about. We will route you to the right expert.</p>
        </div>
    </section>

    <section class="txp-section txp-blue-panel" data-txp-section>
        <div class="txp-shell txp-hero-grid">
            <div>
                <span class="txp-kicker txp-reveal">Why Texora</span>
                <h2 class="txp-title txp-reveal" style="font-size:clamp(4rem,7vw,8.5rem);">We handle the confusing parts<span class="txp-dot">.</span></h2>
                <p class="txp-lede txp-reveal">A contact page should not feel like a dead end. Choose a channel, send context, and Texora turns it into a guided next step.</p>
            </div>
            <div class="txp-grid" style="grid-template-columns:1fr;">
                @foreach([
                    ['Accurate route', 'Your query goes to the right compliance service.'],
                    ['Fast response', 'WhatsApp and live chat are best for urgent cases.'],
                    ['Lead captured', 'Email or phone keeps your conversation traceable.'],
                ] as $item)
                    <article class="txp-card">
                        <small>Texora</small>
                        <h3>{{ $item[0] }}</h3>
                        <p>{{ $item[1] }}</p>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    <section class="txp-section" data-txp-section>
        <div class="txp-shell txp-hero-grid">
            <div>
                <div class="txp-section-head" style="display:block;margin-bottom:2rem;">
                    <h2>Message<span class="txp-dot">.</span></h2>
                    <p class="mt-4">Use the existing contact endpoint. Backend behavior stays unchanged.</p>
                </div>
                <form method="POST" action="{{ route('contact.send') }}" class="txp-form">
                    @csrf
                    <div class="grid gap-4 md:grid-cols-2">
                        <div>
                            <label class="txp-label" for="name">Full name</label>
                            <input class="txp-input" type="text" id="name" name="name" placeholder="Ali Ahmed" required>
                        </div>
                        <div>
                            <label class="txp-label" for="email">Email address</label>
                            <input class="txp-input" type="email" id="email" name="email" placeholder="name@company.com" required>
                        </div>
                    </div>
                    <div class="grid gap-4 md:grid-cols-2">
                        <div>
                            <label class="txp-label" for="phone">Phone number</label>
                            <input class="txp-input" type="tel" id="phone" name="phone" placeholder="+92 300 0000000">
                        </div>
                        <div>
                            <label class="txp-label" for="subject">Inquiry type</label>
                            <select class="txp-select" id="subject" name="subject">
                                <option>General Support Inquiry</option>
                                <option>Company Registration</option>
                                <option>Taxation & NTN Registration</option>
                                <option>USA LLC / UK LTD</option>
                                <option>Expert Consultation</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label class="txp-label" for="message">Message</label>
                        <textarea class="txp-textarea" id="message" name="message" placeholder="How can Texora help?" required></textarea>
                    </div>
                    <button type="submit" class="txp-button">Send Message</button>
                </form>
            </div>

            <aside class="txp-dark p-8 md:p-12">
                <span class="txp-kicker">Direct channels</span>
                <div class="space-y-0">
                    <div class="txp-row">
                        <strong>Email</strong>
                        <span><a href="mailto:{{ $email }}">{{ $email }}</a></span>
                        <em>01</em>
                    </div>
                    <div class="txp-row">
                        <strong>Phone</strong>
                        <span><a href="tel:{{ $phone }}">{{ $phone }}</a></span>
                        <em>02</em>
                    </div>
                    <div class="txp-row">
                        <strong>WhatsApp</strong>
                        <span><a href="https://wa.me/{{ $waNum }}" target="_blank">Open instant chat</a></span>
                        <em>03</em>
                    </div>
                    <div class="txp-row">
                        <strong>Office</strong>
                        <span>{{ $addr }}</span>
                        <em>04</em>
                    </div>
                </div>
            </aside>
        </div>
    </section>
</main>
@endsection