@extends('layouts.public')

@section('title', 'ChatSell OS – Sell more from chat')
@section('metaDescription', 'One place for all your sales conversations. Turn Instagram and WhatsApp leads into quotes and orders, with AI that helps your team close more deals.')

@section('content')
<div class="relative overflow-hidden">
    {{-- Hero --}}
    <section class="relative px-4 pt-12 pb-20 sm:px-6 sm:pt-20 sm:pb-28 lg:px-8">
        <div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_50%_-20%,rgba(16,185,129,0.25),transparent)]" aria-hidden="true"></div>
        <div class="relative mx-auto max-w-4xl text-center">
            <p class="inline-flex items-center gap-2 rounded-full border border-emerald-400/30 bg-emerald-500/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-emerald-300">
                One inbox · AI that helps · Quotes & orders
            </p>
            <h1 class="mt-8 text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">
                Turn every chat into more sales
            </h1>
            <p class="mx-auto mt-6 max-w-2xl text-lg leading-8 text-slate-400">
                Bring Instagram and WhatsApp into one place. See your pipeline, send quotes, create orders, and let AI suggest replies so your team responds faster and closes more deals.
            </p>
            <div class="mt-10 flex flex-wrap items-center justify-center gap-4">
                <a href="{{ route('register') }}" class="inline-flex rounded-xl bg-emerald-500 px-8 py-4 text-base font-semibold text-slate-950 shadow-lg shadow-emerald-500/25 transition hover:bg-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 focus:ring-offset-slate-950">
                    Start free
                </a>
                <a href="{{ route('tutorial') }}" class="inline-flex rounded-xl border border-white/20 bg-white/5 px-8 py-4 text-base font-semibold text-white transition hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/20 focus:ring-offset-2 focus:ring-offset-slate-950">
                    See how it works
                </a>
            </div>
        </div>
    </section>

    {{-- Benefits strip --}}
    <section class="border-y border-white/10 bg-white/5 py-10">
        <div class="mx-auto grid max-w-5xl grid-cols-1 gap-8 px-4 sm:grid-cols-3 sm:px-6 lg:px-8">
            <div class="text-center">
                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/20 text-emerald-400 ring-1 ring-emerald-400/30">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a2 2 0 01-2-2v-6a2 2 0 012-2h2V8z"/></svg>
                </div>
                <h3 class="mt-4 text-lg font-semibold text-white">Never miss a lead</h3>
                <p class="mt-2 text-sm text-slate-400">All conversations in one inbox so nothing slips through.</p>
            </div>
            <div class="text-center">
                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-blue-500/20 text-blue-400 ring-1 ring-blue-400/30">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                </div>
                <h3 class="mt-4 text-lg font-semibold text-white">Close deals faster</h3>
                <p class="mt-2 text-sm text-slate-400">Pipeline, quotes, and orders without switching tools.</p>
            </div>
            <div class="text-center">
                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-violet-500/20 text-violet-400 ring-1 ring-violet-400/30">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
                </div>
                <h3 class="mt-4 text-lg font-semibold text-white">Less admin, more selling</h3>
                <p class="mt-2 text-sm text-slate-400">AI suggests replies; you stay in control of every message.</p>
            </div>
        </div>
    </section>

    {{-- Features grid --}}
    <section class="py-20 sm:py-28">
        <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Everything you need to sell from chat</h2>
                <p class="mt-4 text-lg text-slate-400">One workspace for conversations, leads, and orders.</p>
            </div>
            <div class="mt-14 grid gap-6 sm:grid-cols-2 lg:mt-16">
                <div class="rounded-2xl border border-white/10 bg-slate-900/50 p-6 transition hover:border-emerald-500/30 hover:bg-slate-900/70 sm:p-8">
                    <h3 class="text-lg font-semibold text-white">Unified inbox</h3>
                    <p class="mt-2 text-slate-400">See every conversation, assign to your team, and reply from one screen. No more jumping between apps.</p>
                </div>
                <div class="rounded-2xl border border-white/10 bg-slate-900/50 p-6 transition hover:border-blue-500/30 hover:bg-slate-900/70 sm:p-8">
                    <h3 class="text-lg font-semibold text-white">Sales pipeline</h3>
                    <p class="mt-2 text-slate-400">Move leads from first contact to won. Know exactly where each deal stands and what to do next.</p>
                </div>
                <div class="rounded-2xl border border-white/10 bg-slate-900/50 p-6 transition hover:border-violet-500/30 hover:bg-slate-900/70 sm:p-8">
                    <h3 class="text-lg font-semibold text-white">Quotes & orders</h3>
                    <p class="mt-2 text-slate-400">Create quotes and orders linked to the conversation. Less re-typing, fewer errors, faster checkout.</p>
                </div>
                <div class="rounded-2xl border border-white/10 bg-slate-900/50 p-6 transition hover:border-amber-500/30 hover:bg-slate-900/70 sm:p-8">
                    <h3 class="text-lg font-semibold text-white">AI sales assistant</h3>
                    <p class="mt-2 text-slate-400">AI drafts replies and highlights next steps. Your team approves every message—you keep the relationship.</p>
                </div>
            </div>
        </div>
    </section>

    {{-- CTA --}}
    <section class="border-t border-white/10 py-20 sm:py-28">
        <div class="mx-auto max-w-3xl px-4 text-center sm:px-6 lg:px-8">
            <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Ready to sell more from chat?</h2>
            <p class="mt-4 text-lg text-slate-400">Start your workspace in minutes. No credit card required.</p>
            <div class="mt-10 flex flex-wrap items-center justify-center gap-4">
                <a href="{{ route('register') }}" class="inline-flex rounded-xl bg-emerald-500 px-8 py-4 text-base font-semibold text-slate-950 transition hover:bg-emerald-400">
                    Create your workspace
                </a>
                <a href="{{ route('login') }}" class="inline-flex rounded-xl border border-white/20 px-8 py-4 text-base font-semibold text-white transition hover:bg-white/5">
                    I already have an account
                </a>
            </div>
        </div>
    </section>
</div>
@endsection