@extends('layouts.landing')

@section('title', 'Tenseal Services — Digital Assets, Goods, Freelance & Agreement Escrow')
@section('meta_description', 'Every kind of transaction, protected. Tenseal escrow services cover digital assets, physical goods, freelance and agency services, and legal agreements — with milestones, inspection periods, and fair dispute resolution.')
@section('meta_keywords', 'escrow services Nigeria, digital asset escrow, goods escrow, freelance escrow, contract escrow, agreement escrow, Tenseal services')
@section('og_image_alt', 'Tenseal Escrow Services — Four types of protection for every deal')

@push('jsonld')
<script type="application/ld+json">
{
    "@@context": "https://schema.org",
    "@type": "ItemList",
    "name": "Tenseal Escrow Services",
    "itemListElement": [
        { "@type": "ListItem", "position": 1, "url": "{{ url('/services/digital-assets') }}", "name": "Digital Assets Escrow" },
        { "@type": "ListItem", "position": 2, "url": "{{ url('/services/goods-protection') }}", "name": "Goods Protection Escrow" },
        { "@type": "ListItem", "position": 3, "url": "{{ url('/services/services-protection') }}", "name": "Services & Freelance Escrow" },
        { "@type": "ListItem", "position": 4, "url": "{{ url('/services/agreement-protection') }}", "name": "Agreement Protection Escrow" }
    ]
}
</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": "Services", "item": "{{ url()->current() }}" }
    ]
}
</script>
@endpush

@section('content')
<section class="section" style="position: relative; z-index: 10; padding-top: 4rem; text-align: center;">
    <div class="container container-narrow">
        <div class="badge badge-primary" style="margin-bottom: 1.5rem;">
            <i class="fas fa-concierge-bell"></i> Our Services
        </div>
        <h1 class="section-title">
            Complete Protection<br>for Every Transaction
        </h1>
        <p class="section-subtitle" style="font-size: 1.25rem; max-width: 700px; margin: 0 auto 3rem;">
            From standard escrow to custom solutions, we provide comprehensive protection tailored to your specific needs.
        </p>
    </div>
</section>

<section class="section" style="position: relative; z-index: 10;">
    <div class="container">
        <div class="grid grid-2">
            @foreach([
                ['fa-shield-alt', 'Standard Escrow', 'Our core escrow service for straightforward buyer-seller transactions. Perfect for one-time purchases and sales.', ['Secure fund holding', 'Delivery verification', 'Automated release', 'Dispute resolution']],
                ['fa-tasks', 'Milestone Escrow', 'Project-based escrow with multiple payment milestones. Ideal for freelance work and long-term projects.', ['Multiple milestones', 'Partial releases', 'Progress tracking', 'Deliverable verification']],
                ['fa-recycle', 'Recurring Escrow', 'Automated escrow for subscription-based services and recurring transactions. Set it and forget it.', ['Automatic renewals', 'Scheduled releases', 'Performance tracking', 'Easy cancellation']],
                ['fa-handshake', 'Custom Escrow', 'Tailored escrow solutions for complex transactions, business deals, and unique requirements.', ['Custom conditions', 'Multi-party support', 'Complex workflows', 'Dedicated support']],
            ] as $service)
            <div class="card glass">
                <div style="display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem;">
                    <i class="fas {{ $service[0] }}" style="font-size: 3rem; color: var(--accent-primary);"></i>
                    <h3 style="font-size: 1.75rem; margin: 0;">{{ $service[1] }}</h3>
                </div>
                <p style="color: var(--text-secondary); margin-bottom: 1.5rem; font-size: 1.05rem;">
                    {{ $service[2] }}
                </p>
                <ul style="list-style: none; display: flex; flex-direction: column; gap: 0.75rem;">
                    @foreach($service[3] as $feature)
                    <li style="display: flex; align-items: center; gap: 0.75rem;">
                        <i class="fas fa-check" style="color: var(--accent-primary);"></i>
                        {{ $feature }}
                    </li>
                    @endforeach
                </ul>
            </div>
            @endforeach
        </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">Additional Services</h2>
        <p class="section-subtitle" style="margin: 0 auto 4rem;">Value-added services to enhance your escrow experience</p>

        <div class="grid grid-3">
            @foreach([
                ['fa-balance-scale', 'Dispute Resolution', 'Expert mediation team available to resolve conflicts fairly and efficiently.'],
                ['fa-file-contract', 'Smart Contracts', 'Automated contract execution based on predefined conditions and triggers.'],
                ['fa-shield-virus', 'Fraud Protection', 'Advanced verification and screening to prevent fraudulent transactions.'],
                ['fa-bell', 'Real-time Notifications', 'Instant alerts for every transaction event via email, SMS, and push notifications.'],
                ['fa-chart-line', 'Transaction Analytics', 'Detailed reporting and insights into your escrow activity and performance.'],
                ['fa-code', 'API Integration', 'Seamlessly integrate escrow into your existing platform or application.'],
            ] as $additional)
            <div class="card">
                <i class="fas {{ $additional[0] }}" style="font-size: 2.5rem; color: var(--accent-primary); margin-bottom: 1.5rem;"></i>
                <h3 style="font-size: 1.25rem; margin-bottom: 1rem;">{{ $additional[1] }}</h3>
                <p style="color: var(--text-secondary);">{{ $additional[2] }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

<section class="section" style="position: relative; z-index: 10; text-align: center;">
    <div class="container container-narrow">
        <h2 class="section-title">Ready to Protect Your Transactions?</h2>
        <p class="section-subtitle" style="margin: 0 auto 2.5rem; font-size: 1.25rem;">
            Choose the perfect escrow service for your needs
        </p>
        <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
            <a href="https://app.tenseal.co/register" class="btn btn-primary btn-lg">
                <i class="fas fa-rocket"></i> Get Started
            </a>
            <a href="{{ route('landing.contact') }}" class="btn btn-secondary btn-lg">
                <i class="fas fa-phone"></i> Talk to an Expert
            </a>
        </div>
    </div>
</section>
@endsection