@extends('layouts.landing')

@section('title', 'About Tenseal — Africa\'s Trust Layer for Digital Commerce')
@section('meta_description', 'Tenseal is the trust layer of African commerce — unifying escrow, inventory, marketplace, and a developer API into one platform that helps buyers and sellers transact without fear. Learn our story, mission, and team.')
@section('meta_keywords', 'about Tenseal, Nigeria escrow company, African fintech, trust layer commerce, Tenseal mission, Tenseal team, escrow startup Africa')
@section('og_image_alt', 'About Tenseal — Building the trust layer for African commerce')

@push('jsonld')
<script type="application/ld+json">
{
    "@@context": "https://schema.org",
    "@type": "AboutPage",
    "url": "{{ url()->current() }}",
    "name": "About Tenseal",
    "description": "The company behind Tenseal — Africa's trust layer for escrow, inventory, marketplace and developer API.",
    "mainEntity": {
        "@type": "Organization",
        "name": "Tenseal",
        "url": "{{ url('/') }}",
        "logo": "{{ url('/assets/images/logo.png') }}",
        "sameAs": [
            "https://twitter.com/tenseal",
            "https://www.linkedin.com/company/tenseal",
            "https://www.facebook.com/tenseal",
            "https://www.instagram.com/tenseal"
        ],
        "foundingLocation": { "@type": "Place", "name": "Lagos, Nigeria" }
    }
}
</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": "About", "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-info-circle"></i> About Us
        </div>
        <h1 class="section-title" style="margin-bottom: 1.5rem;">Building Trust in Every Transaction</h1>
        <p class="section-subtitle" style="font-size: 1.25rem; max-width: 800px; margin: 0 auto;">
            We're on a mission to eliminate fraud and create a trustworthy global marketplace where buyers and sellers can trade with complete confidence.
        </p>
    </div>
</section>

<section class="section" style="position: relative; z-index: 10; background: var(--bg-tertiary);">
    <div class="container container-narrow">
        <div class="grid grid-2" style="align-items: center; gap: 4rem;">
            <div>
                <h2 style="font-size: 1.875rem; margin-bottom: 1.5rem;">Our Story</h2>
                <p style="font-size: 1.125rem; color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.8;">
                    Tenseal was born from a simple frustration: online transactions are broken. Too many deals fall apart due to lack of trust. Buyers fear sending money first. Sellers worry about non-payment.
                </p>
                <p style="font-size: 1.125rem; color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.8;">
                    We built Tenseal to solve this problem. Our platform combines the security of traditional escrow with the speed and transparency of modern technology, creating a trustless system that protects everyone.
                </p>
                <p style="font-size: 1.125rem; color: var(--text-secondary); line-height: 1.8;">
                    Today, we're proud to serve thousands of users worldwide, protecting millions in transactions across digital assets, goods, agreements and services.
                </p>
            </div>
            <div class="card glass" style="padding: 3rem; text-align: center;">
                <i class="fas fa-shield-alt" style="font-size: 4rem; color: var(--accent-primary); margin-bottom: 1.5rem;"></i>
                <h3 style="font-size: 1.5rem; margin-bottom: 1rem; color: var(--accent-primary);">Trust First</h3>
                <p style="color: var(--text-tertiary); font-size: 1.1rem;">Building the future of secure commerce</p>
            </div>
        </div>
    </div>
</section>

<section class="section" style="position: relative; z-index: 10;">
    <div class="container text-center">
        <h2 class="section-title">Our Values</h2>
        <p class="section-subtitle" style="margin: 0 auto 4rem;">The principles that guide everything we do</p>

        <div class="grid grid-3">
            @foreach([
                ['fa-lock', 'Security First', 'Bank-level encryption and multi-signature protection for every transaction. Your funds are always safe.'],
                ['fa-eye', 'Transparency', 'Complete visibility into every transaction. No hidden fees, no surprises—just honest, straightforward service.'],
                ['fa-users', 'Fairness', 'We protect both buyers and sellers equally. Our dispute resolution is unbiased and evidence-based.'],
                ['fa-bolt', 'Speed', 'Fast transaction processing, instant notifications, and rapid fund releases when conditions are met.'],
                ['fa-globe', 'Global Access', 'Multi-currency support and worldwide availability. Trade across borders with confidence.'],
                ['fa-headset', 'Support', '24/7 customer support and expert assistance. We\'re here when you need us most.'],
            ] as $value)
            <div class="card glass">
                <i class="fas {{ $value[0] }}" style="font-size: 2.25rem; color: var(--accent-primary); margin-bottom: 1.25rem;"></i>
                <h3 style="font-size: 1.5rem; margin-bottom: 1rem;">{{ $value[1] }}</h3>
                <p style="color: var(--text-secondary);">{{ $value[2] }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

<section class="section" style="position: relative; z-index: 10; background: var(--bg-tertiary); text-align: center;">
    <div class="container container-narrow">
        <h2 class="section-title">Join Us in Building Trust</h2>
        <p class="section-subtitle" style="margin: 0 auto 2.5rem; font-size: 1.25rem;">Be part of the movement to make online transactions safe for everyone</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-envelope"></i> Contact Us</a>
        </div>
    </div>
</section>
@endsection