@extends('layouts.guest')

@section('title', 'Welcome')

@section('content')
<div class="min-h-screen flex flex-col">
    <nav class="flex items-center justify-between px-6 py-4 lg:px-12">
        <div class="flex items-center gap-2">
            <span class="text-2xl font-bold text-slate-900">Smart Flow</span>
            <span class="text-slate-500 text-sm hidden sm:inline">AI Commerce & Marketing</span>
        </div>
        <div class="flex items-center gap-4">
            <a href="{{ route('login') }}" class="text-slate-600 hover:text-slate-900 font-medium">Log in</a>
            <a href="{{ route('login') }}" class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started</a>
        </div>
    </nav>
    <main class="flex-1 flex items-center justify-center px-6 py-20">
        <div class="max-w-3xl text-center">
            <h1 class="text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl lg:text-6xl">
                AI-powered commerce and marketing in one place
            </h1>
            <p class="mt-6 text-lg text-slate-600 leading-relaxed">
                Automate campaigns, manage products and orders, and generate content with AI. Built for teams that scale.
            </p>
            <div class="mt-10 flex flex-wrap items-center justify-center gap-4">
                <a href="{{ route('login') }}" class="rounded-lg bg-indigo-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-indigo-500">Sign in to your account</a>
                <a href="{{ route('login') }}" class="rounded-lg border border-slate-300 bg-white px-6 py-3 text-base font-medium text-slate-700 shadow-sm hover:bg-slate-50">Request a demo</a>
            </div>
            <div class="mt-16 grid grid-cols-2 gap-8 sm:grid-cols-4 text-left">
                <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                    <div class="text-2xl font-bold text-indigo-600">{{-- stats injected if needed --}}</div>
                    <p class="mt-1 text-sm text-slate-600">Products & digital delivery</p>
                </div>
                <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                    <p class="text-sm font-medium text-slate-900">Campaigns</p>
                    <p class="mt-1 text-sm text-slate-600">Email and messaging automation</p>
                </div>
                <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                    <p class="text-sm font-medium text-slate-900">AI Studio</p>
                    <p class="mt-1 text-sm text-slate-600">Generate copy and content</p>
                </div>
                <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                    <p class="text-sm font-medium text-slate-900">Multi-tenant</p>
                    <p class="mt-1 text-sm text-slate-600">Teams and roles</p>
                </div>
            </div>
        </div>
    </main>
    <footer class="py-6 text-center text-sm text-slate-500">
        &copy; {{ date('Y') }} Smart Flow. AI Commerce &amp; Marketing Automation.
    </footer>
</div>
@endsection