@extends('layouts.public')

@section('title', 'How to use ChatSell OS – Tutorial')
@section('metaDescription', 'Learn how to use ChatSell OS: inbox, pipeline, quotes, orders, and AI. No login required.')

@section('content')
<div class="mx-auto max-w-4xl px-4 py-12 sm:py-16">
    <div class="mb-12 text-center">
        <h1 class="text-4xl font-bold tracking-tight text-white sm:text-5xl">
            How ChatSell OS works
        </h1>
        <p class="mt-4 text-lg text-slate-400">
            A short guide to every part of your workspace. Read this before or after you sign up.
        </p>
    </div>

    <nav class="mb-14 rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur">
        <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">On this page</p>
        <ul class="mt-4 space-y-2 text-sm">
            <li><a href="#dashboard" class="text-emerald-400 hover:underline">Dashboard</a></li>
            <li><a href="#inbox" class="text-emerald-400 hover:underline">Inbox</a></li>
            <li><a href="#pipeline" class="text-emerald-400 hover:underline">Pipeline</a></li>
            <li><a href="#contacts" class="text-emerald-400 hover:underline">Contacts</a></li>
            <li><a href="#products" class="text-emerald-400 hover:underline">Products</a></li>
            <li><a href="#quotes" class="text-emerald-400 hover:underline">Quotes</a></li>
            <li><a href="#orders" class="text-emerald-400 hover:underline">Orders</a></li>
            <li><a href="#ai" class="text-emerald-400 hover:underline">AI assistant</a></li>
            <li><a href="#reports" class="text-emerald-400 hover:underline">Reports</a></li>
            <li><a href="#settings" class="text-emerald-400 hover:underline">Settings</a></li>
        </ul>
    </nav>

    <div class="space-y-14">
        <section id="dashboard" class="scroll-mt-24">
            <div class="rounded-2xl border border-white/10 bg-slate-900/50 p-6 sm:p-8">
                <h2 class="text-2xl font-semibold text-white">Dashboard</h2>
                <p class="mt-2 text-slate-400">Your home screen after you sign in.</p>
                <p class="mt-4 text-slate-300 leading-relaxed">
                    The dashboard gives you a quick overview: recent activity, AI suggestions for what to do next, and shortcuts to your inbox, pipeline, and orders. Use it to see at a glance where to focus your time.
                </p>
            </div>
        </section>

        <section id="inbox" class="scroll-mt-24">
            <div class="rounded-2xl border border-white/10 bg-slate-900/50 p-6 sm:p-8">
                <h2 class="text-2xl font-semibold text-white">Inbox</h2>
                <p class="mt-2 text-slate-400">All your chats in one place.</p>
                <p class="mt-4 text-slate-300 leading-relaxed">
                    Every conversation from your connected channels (e.g. Instagram, WhatsApp) appears here. You can assign conversations to team members, see who replied last, and use AI to suggest replies. No more switching between apps to see who wrote.
                </p>
            </div>
        </section>

        <section id="pipeline" class="scroll-mt-24">
            <div class="rounded-2xl border border-white/10 bg-slate-900/50 p-6 sm:p-8">
                <h2 class="text-2xl font-semibold text-white">Pipeline</h2>
                <p class="mt-2 text-slate-400">See who’s ready to buy.</p>
                <p class="mt-4 text-slate-300 leading-relaxed">
                    Leads move through stages from first contact to won or lost. You can drag and drop leads between stages, see which deals need attention, and track progress. The pipeline keeps your team aligned on what’s hot and what’s not.
                </p>
            </div>
        </section>

        <section id="contacts" class="scroll-mt-24">
            <div class="rounded-2xl border border-white/10 bg-slate-900/50 p-6 sm:p-8">
                <h2 class="text-2xl font-semibold text-white">Contacts</h2>
                <p class="mt-2 text-slate-400">One list for every customer.</p>
                <p class="mt-4 text-slate-300 leading-relaxed">
                    Contacts are created from your chats or added manually. You’ll see their name, phone, email, and linked conversations. When you create a quote or order, you pick a contact so everything stays connected.
                </p>
            </div>
        </section>

        <section id="products" class="scroll-mt-24">
            <div class="rounded-2xl border border-white/10 bg-slate-900/50 p-6 sm:p-8">
                <h2 class="text-2xl font-semibold text-white">Products</h2>
                <p class="mt-2 text-slate-400">Your catalog for quotes and orders.</p>
                <p class="mt-4 text-slate-300 leading-relaxed">
                    Add your products with name, price, and optional description. When you create a quote or order, you choose from this list so amounts are correct and consistent. You can also track stock if you use inventory.
                </p>
            </div>
        </section>

        <section id="quotes" class="scroll-mt-24">
            <div class="rounded-2xl border border-white/10 bg-slate-900/50 p-6 sm:p-8">
                <h2 class="text-2xl font-semibold text-white">Quotes</h2>
                <p class="mt-2 text-slate-400">Send a price without leaving the conversation.</p>
                <p class="mt-4 text-slate-300 leading-relaxed">
                    Create a quote for a contact, add product lines, and send it. The quote is linked to the contact and conversation so you know the context. When the customer says yes, you can turn the quote into an order in one click.
                </p>
            </div>
        </section>

        <section id="orders" class="scroll-mt-24">
            <div class="rounded-2xl border border-white/10 bg-slate-900/50 p-6 sm:p-8">
                <h2 class="text-2xl font-semibold text-white">Orders</h2>
                <p class="mt-2 text-slate-400">From chat to order in a few clicks.</p>
                <p class="mt-4 text-slate-300 leading-relaxed">
                    Orders are created from a quote or from scratch. You can track status, add payment info, and print or export for your records. The AI can also suggest an order from a conversation so you don’t have to re-type what the customer asked for.
                </p>
            </div>
        </section>

        <section id="ai" class="scroll-mt-24">
            <div class="rounded-2xl border border-white/10 bg-slate-900/50 p-6 sm:p-8">
                <h2 class="text-2xl font-semibold text-white">AI assistant</h2>
                <p class="mt-2 text-slate-400">Suggestions you approve before sending.</p>
                <p class="mt-4 text-slate-300 leading-relaxed">
                    The AI can suggest reply text, highlight next steps, and even draft an order from a chat. Nothing is sent automatically—your team reviews and edits every suggestion. That way you sell faster without losing the human touch.
                </p>
            </div>
        </section>

        <section id="reports" class="scroll-mt-24">
            <div class="rounded-2xl border border-white/10 bg-slate-900/50 p-6 sm:p-8">
                <h2 class="text-2xl font-semibold text-white">Reports</h2>
                <p class="mt-2 text-slate-400">Where your sales come from.</p>
                <p class="mt-4 text-slate-300 leading-relaxed">
                    Reports show you performance by source, revenue, and activity. Use them to see which channels or stages bring the most results so you can focus your effort where it pays off.
                </p>
            </div>
        </section>

        <section id="settings" class="scroll-mt-24">
            <div class="rounded-2xl border border-white/10 bg-slate-900/50 p-6 sm:p-8">
                <h2 class="text-2xl font-semibold text-white">Settings</h2>
                <p class="mt-2 text-slate-400">Channels, billing, users, and AI.</p>
                <p class="mt-4 text-slate-300 leading-relaxed">
                    In settings you connect your Instagram and WhatsApp accounts, manage your plan and billing, add team members and roles, and configure how the AI behaves. Only users with the right role can change these.
                </p>
            </div>
        </section>
    </div>

    <div class="mt-16 rounded-2xl border border-emerald-500/30 bg-emerald-500/10 p-8 text-center">
        <h2 class="text-xl font-semibold text-white">Ready to try it?</h2>
        <p class="mt-2 text-slate-300">Create your workspace and start selling from chat.</p>
        <div class="mt-6 flex flex-wrap items-center justify-center gap-4">
            <a href="{{ route('register') }}" class="rounded-xl bg-emerald-500 px-6 py-3 text-sm font-semibold text-slate-950 transition hover:bg-emerald-400">Start free</a>
            <a href="{{ route('login') }}" class="rounded-xl border border-white/20 px-6 py-3 text-sm font-semibold text-white transition hover:bg-white/5">Sign in</a>
        </div>
    </div>
</div>
@endsection
