@extends('layouts.app')

@section('title', 'Eversatile Core')

@section('content')
<div class="min-h-screen px-6 py-10 sm:px-8 lg:px-12">
    <div class="mx-auto flex min-h-[calc(100vh-5rem)] max-w-7xl items-center">
        <div class="grid gap-10 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
            <div class="max-w-3xl">
                <div class="inline-flex items-center gap-3 rounded-full border border-[var(--app-border)] bg-[var(--app-surface)] px-4 py-2 text-xs font-semibold uppercase tracking-[0.25em] text-[var(--app-text-muted)]">
                    <span class="h-2 w-2 rounded-full bg-[var(--app-accent)]"></span>
                    Eversatile Core
                </div>

                <h1 class="mt-8 text-5xl leading-[0.95] tracking-tight text-[var(--app-text)] sm:text-6xl lg:text-7xl">
                    Central SaaS control for every product you build.
                </h1>

                <p class="mt-6 max-w-2xl text-lg leading-8 text-[var(--app-text-muted)]">
                    Manage tenants, apps, subscriptions, billing, permissions, automation, and access from one premium control layer designed for cPanel-friendly deployment.
                </p>

                <div class="mt-8 flex flex-wrap gap-3">
                    <a href="{{ route('login') }}" class="app-button app-button-primary">Sign in</a>
                    <a href="{{ route('pricing') }}" class="app-button app-button-secondary">Choose a package</a>
                </div>
            </div>

            <div class="space-y-4">
                <div class="app-card p-6">
                    <div class="text-xs font-semibold uppercase tracking-[0.25em] text-[var(--app-text-muted)]">Platform</div>
                    <div class="mt-3 text-3xl font-semibold tracking-tight text-[var(--app-text)]">Executive clarity</div>
                    <p class="mt-3 text-sm leading-7 text-[var(--app-text-muted)]">A calm, minimal, enterprise-grade interface for serious operators.</p>
                </div>

                <div class="app-card p-6">
                    <div class="text-xs font-semibold uppercase tracking-[0.25em] text-[var(--app-text-muted)]">Access</div>
                    <div class="mt-3 text-3xl font-semibold tracking-tight text-[var(--app-text)]">Tenant-safe by design</div>
                    <p class="mt-3 text-sm leading-7 text-[var(--app-text-muted)]">Roles, permissions, and app launcher rules stay centralized and auditable.</p>
                </div>

                <div class="app-card p-6">
                    <div class="text-xs font-semibold uppercase tracking-[0.25em] text-[var(--app-text-muted)]">Billing</div>
                    <div class="mt-3 text-3xl font-semibold tracking-tight text-[var(--app-text)]">Payments ready</div>
                    <p class="mt-3 text-sm leading-7 text-[var(--app-text-muted)]">Built for invoices, payments, M-Pesa flows, and clean subscription operations.</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection