@extends('layouts.landing')

@section('title', __('messages.about') ?? 'About Us')

@section('content')
<section class="relative overflow-hidden bg-gradient-to-br from-stone-900 via-red-900 to-stone-950 py-20 text-white">
    <div class="absolute inset-0 opacity-20">
        <div class="h-full w-full bg-[radial-gradient(circle_at_top_right,_rgba(255,255,255,0.2),_transparent_45%)]"></div>
    </div>
    <div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <p class="mb-4 inline-flex rounded-full bg-white/10 px-4 py-1 text-sm font-semibold text-red-100">About {{ config('app.name', 'Real Estate SaaS') }}</p>
        <h1 class="max-w-4xl text-4xl font-extrabold leading-tight md:text-5xl">Modern property management built for speed, visibility, and growth.</h1>
        <p class="mt-6 max-w-3xl text-lg text-red-100">We help real estate teams manage listings, tenants, leases, and payments in one clean platform that your team can actually enjoy using.</p>
    </div>
</section>

<section class="bg-white py-16">
    <div class="mx-auto grid max-w-7xl gap-6 px-4 sm:grid-cols-2 lg:grid-cols-3 sm:px-6 lg:px-8">
        <div class="rounded-2xl border border-stone-200 p-6 shadow-sm">
            <h2 class="text-xl font-bold text-stone-900">Our mission</h2>
            <p class="mt-3 text-stone-600">Make real estate operations simple and transparent for owners, managers, accountants, and tenants.</p>
        </div>
        <div class="rounded-2xl border border-stone-200 p-6 shadow-sm">
            <h2 class="text-xl font-bold text-stone-900">What we offer</h2>
            <p class="mt-3 text-stone-600">Property listing workflows, lease lifecycle tracking, payment visibility, and practical role-based dashboards.</p>
        </div>
        <div class="rounded-2xl border border-stone-200 p-6 shadow-sm">
            <h2 class="text-xl font-bold text-stone-900">Why teams choose us</h2>
            <p class="mt-3 text-stone-600">Fast setup, clear interfaces, and an architecture built to support multi-company operations securely.</p>
        </div>
    </div>
</section>

<section class="bg-stone-50 py-16">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="rounded-3xl bg-gradient-to-r from-red-700 to-stone-900 p-8 text-white md:p-10">
            <h2 class="text-3xl font-bold">Start managing smarter today</h2>
            <p class="mt-3 max-w-2xl text-red-100">Create your account, add your first properties, and get your whole team aligned in minutes.</p>
            <div class="mt-6 flex flex-wrap gap-3">
                <a href="{{ route('register') }}" class="rounded-lg bg-white px-5 py-3 text-sm font-semibold text-red-700 hover:bg-red-50">Create account</a>
                <a href="{{ route('properties.index') }}" class="rounded-lg border border-white/40 px-5 py-3 text-sm font-semibold text-white hover:bg-white/10">Browse properties</a>
            </div>
        </div>
    </div>
</section>
@endsection