@extends('layouts.landing')

@section('title', 'Contact Tenseal — Sales, Support & Partnerships')
@section('meta_description', 'Reach the Tenseal team for escrow, inventory, marketplace, or API help. Live chat, email support@tenseal.co, sales, partnerships, and press enquiries. Typical response under 2 hours.')
@section('meta_keywords', 'contact Tenseal, Tenseal support, Tenseal sales, escrow help Nigeria, Tenseal partnership, Tenseal email, Tenseal phone')
@section('og_image_alt', 'Contact Tenseal — Sales, support and partnerships')

@push('jsonld')
<script type="application/ld+json">
{
    "@@context": "https://schema.org",
    "@type": "ContactPage",
    "url": "{{ url()->current() }}",
    "name": "Contact Tenseal",
    "description": "Contact the Tenseal team for sales, support, partnerships or press.",
    "mainEntity": {
        "@type": "Organization",
        "name": "Tenseal",
        "url": "{{ url('/') }}",
        "contactPoint": [
            {
                "@type": "ContactPoint",
                "contactType": "customer support",
                "email": "support@tenseal.co",
                "availableLanguage": ["en"],
                "areaServed": ["NG","GH","KE","ZA","Worldwide"]
            },
            {
                "@type": "ContactPoint",
                "contactType": "sales",
                "email": "sales@tenseal.co",
                "availableLanguage": ["en"]
            }
        ]
    }
}
</script>
<script type="application/ld+json">
{
    "@@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        { "@type": "ListItem", "position": 1, "name": "Home", "item": "{{ url('/') }}" },
        { "@type": "ListItem", "position": 2, "name": "Contact", "item": "{{ url()->current() }}" }
    ]
}
</script>
@endpush

@section('content')
<section class="section" style="position: relative; z-index: 10; padding-top: 4rem;">
    <div class="container container-narrow">
        <div class="text-center" style="margin-bottom: 4rem;">
            <div class="badge badge-primary" style="margin-bottom: 1.5rem;"><i class="fas fa-envelope"></i> Get in Touch</div>
            <h1 class="section-title">Contact Us</h1>
            <p class="section-subtitle" style="font-size: 1.25rem; max-width: 600px; margin: 0 auto;">Have questions? We're here to help. Reach out and we'll respond as soon as possible.</p>
        </div>

        <div class="grid grid-2" style="gap: 3rem; align-items: start;">
            <!-- Contact Form -->
            <div class="card glass" style="padding: 3rem;">
                <h2 style="font-size: 1.75rem; margin-bottom: 2rem;">Send us a Message</h2>
                <form id="contactForm" action="{{ route('landing.contact.submit') }}" method="POST" data-validate>
                    @csrf
                    <div class="form-group">
                        <label for="name" class="form-label">Full Name</label>
                        <input type="text" id="name" name="name" class="form-control" placeholder="John Doe" required>
                        <div class="form-error">Please enter your name</div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="form-label">Email Address</label>
                        <input type="email" id="email" name="email" class="form-control" placeholder="john@example.com" required>
                        <div class="form-error">Please enter a valid email</div>
                    </div>
                    <div class="form-group">
                        <label for="phone" class="form-label">Phone Number (Optional)</label>
                        <input type="tel" id="phone" name="phone" class="form-control" placeholder="+1 (234) 567-890">
                    </div>
                    @php $preSubject = ($inquiry ?? null) === 'enterprise' ? 'sales' : ''; @endphp
                    <div class="form-group">
                        <label for="subject" class="form-label">Subject</label>
                        <select id="subject" name="subject" class="form-control" required>
                            <option value="">Select a subject...</option>
                            <option value="general" {{ $preSubject === 'general' ? 'selected' : '' }}>General Inquiry</option>
                            <option value="support" {{ $preSubject === 'support' ? 'selected' : '' }}>Technical Support</option>
                            <option value="sales" {{ $preSubject === 'sales' ? 'selected' : '' }}>{{ ($inquiry ?? null) === 'enterprise' ? 'Enterprise Sales' : 'Sales Question' }}</option>
                            <option value="partnership">Partnership Opportunity</option>
                            <option value="api">API Integration</option>
                            <option value="other">Other</option>
                        </select>
                        <div class="form-error">Please select a subject</div>
                    </div>
                    <div class="form-group">
                        <label for="message" class="form-label">Message</label>
                        <textarea id="message" name="message" class="form-control" rows="6" placeholder="Tell us how we can help..." required>{{ old('message', $prefill ?? '') }}</textarea>
                        <div class="form-error">Please enter your message</div>
                    </div>
                    @if(! empty($inquiry))
                        <input type="hidden" name="inquiry" value="{{ $inquiry }}">
                    @endif
                    <button type="submit" class="btn btn-primary" style="width: 100%;"><i class="fas fa-paper-plane"></i> Send Message</button>
                </form>
            </div>

            <!-- Contact Information -->
            <div>
                <div class="card glass" style="padding: 2.5rem; margin-bottom: 2rem;">
                    <h3 style="font-size: 1.5rem; margin-bottom: 2rem;">Contact Information</h3>
                    <div style="display: flex; flex-direction: column; gap: 1.5rem;">
                        @foreach([
                            ['fa-envelope', 'Email', '<a href="mailto:support@tenseal.com" style="color: var(--text-secondary);">support@tenseal.com</a>'],
                            ['fa-phone', 'Phone', '<a href="tel:+1234567890" style="color: var(--text-secondary);">+1 (234) 567-890</a>'],
                            ['fa-map-marker-alt', 'Address', '<span style="color: var(--text-secondary);">123 Escrow Street<br>Financial District<br>New York, NY 10004</span>'],
                            ['fa-clock', 'Support Hours', '<span style="color: var(--text-secondary);">24/7 Support Available</span>'],
                        ] as $info)
                        <div style="display: flex; align-items: start; gap: 1rem;">
                            <i class="fas {{ $info[0] }}" style="font-size: 1.25rem; color: var(--accent-primary); margin-top: 0.25rem;"></i>
                            <div>
                                <strong style="display: block; margin-bottom: 0.25rem;">{{ $info[1] }}</strong>
                                {!! $info[2] !!}
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="card glass" style="padding: 2.5rem;">
                    <h3 style="font-size: 1.5rem; margin-bottom: 1.5rem;">Follow Us</h3>
                    <div style="display: flex; gap: 1rem;">
                        <a href="https://www.facebook.com/tenseal" class="social-link" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                        <a href="https://twitter.com/tenseal" class="social-link" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                        <a href="https://www.linkedin.com/company/tenseal" class="social-link" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                        <a href="https://www.instagram.com/tenseal" class="social-link" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section" style="position: relative; z-index: 10; background: var(--bg-tertiary);">
    <div class="container text-center">
        <h2 class="section-title">Frequently Asked Questions</h2>
        <p class="section-subtitle" style="margin: 0 auto 4rem;">Quick answers to common questions</p>

        <div style="max-width: 1400px; margin: 0 auto; text-align: left;">
            @foreach([
                ['How does escrow work?', 'Escrow holds your payment securely until both parties fulfill their obligations. Funds are only released when delivery is confirmed, protecting both buyer and seller.'],
                ['What are your fees?', 'Our fees are transparent and competitive. Pricing varies based on transaction size and type. Contact us for a detailed quote or view our pricing page.'],
                ['How long does a transaction take?', 'Most transactions complete within 1-3 business days after delivery confirmation. Complex transactions may take longer depending on the terms agreed upon.'],
                ['What happens if there\'s a dispute?', 'Our expert mediation team reviews all evidence from both parties and makes a fair decision based on the transaction terms and submitted proof.'],
            ] as $i => $faq)
            <div class="card" style="{{ $i < 3 ? 'margin-bottom: 1.5rem;' : '' }} padding: 2rem;">
                <h3 style="font-size: 1.25rem; margin-bottom: 1rem; color: var(--accent-primary);">
                    <i class="fas fa-question-circle"></i> {{ $faq[0] }}
                </h3>
                <p style="color: var(--text-secondary);">{{ $faq[1] }}</p>
            </div>
            @endforeach
        </div>

        <div style="margin-top: 3rem;">
            <p style="font-size: 1.125rem; margin-bottom: 1.5rem; color: var(--text-secondary);">Can't find what you're looking for?</p>
            <a href="{{ route('landing.faq') }}" class="btn btn-primary"><i class="fas fa-book"></i> View Full FAQ</a>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
document.getElementById('contactForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const submitBtn = this.querySelector('button[type="submit"]');
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
    try {
        await new Promise(resolve => setTimeout(resolve, 1500));
        window.TensealApp.showSuccess('Message sent successfully! We\'ll get back to you soon.');
        this.reset();
    } catch (error) {
        window.TensealApp.showError('Failed to send message. Please try again.');
    } finally {
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i class="fas fa-paper-plane"></i> Send Message';
    }
});
</script>
@endpush