@extends('layout')

@section('content')

<section id="hero-home" class="overflow-hidden py-16 md:py-24">
    <div class="container">
        <div class="flex flex-col lg:flex-row items-center gap-12">
            <div class="w-full lg:w-1/2">
                <h1 class="text-4xl md:text-5xl font-semibold leading-tight">Biznesiniz üçün mükəmməl mikro-saytı <span class="text-primary">saniyələr</span> ərzində yaradın.</h1>
                <p class="my-6 text-lg text-muted">Proqramçı lazım deyil — biznesinizə uyğun hazır şablon seçin və dəyişiklik edin. Restoranlar, bloqerlər, kiçik biznes və şəxsi səhifələr üçün.</p>

                <div class="w-full max-w-44">
                    <a href="{{ route('register') }}" class="btn btn-primary w-full text-lg py-3">Pulsuz başla</a>
                    <p class="text-center text-xs text-muted mt-2">*30 gün pulsuz</p>
                </div>
            </div>
            <div class="w-full lg:w-1/2 relative flex justify-center">
                <img src="/app/ssspiral.svg" class="animate-spin absolute left-0 top-20 pointer-events-none z-0" style="animation-duration: 20s" alt="">
                <img src="/app/phone_ui.png" class="relative z-10 drop-shadow-xl max-w-[260px] md:max-w-[300px]" alt="">
            </div>
        </div>
    </div>
</section>

<section id="possibilities-home" class="bg-surface2 py-16 md:py-20">
    <div class="container">
        <h2 class="text-center text-3xl font-semibold"><span class="text-primary">libro.az</span> ilə nələr yarada bilərsiniz?</h2>

        <ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-10">
            <li class="flex flex-col gap-1 bg-surface border border-line rounded-xl p-6 min-h-36 transition-all hover:border-primary group">
                <div class="flex justify-center mb-2"><x-icon name="link" class="w-10 h-10" /></div>
                <div class="text-center">
                    <h3 class="text-lg my-2 font-semibold">BIO Səhifə</h3>
                    <p class="text-sm px-2 text-muted transition-all group-hover:text-ink">Bütün vacib linklərinizi bir səhifədə toplayın.</p>
                </div>
            </li>

            <li class="flex flex-col gap-1 bg-surface border border-line rounded-xl p-6 min-h-36 transition-all hover:border-primary group">
                <div class="flex justify-center mb-2"><x-icon name="qr-code" class="w-10 h-10" /></div>
                <div class="text-center">
                    <h3 class="text-lg my-2 font-semibold">QR Menyu</h3>
                    <p class="text-sm px-2 text-muted transition-all group-hover:text-ink">Restoranınız üçün rəqəmsal menyu yaradın.</p>
                </div>
            </li>

            <li class="flex flex-col gap-1 bg-surface border border-line rounded-xl p-6 min-h-36 transition-all hover:border-primary group">
                <div class="flex justify-center mb-2"><x-icon name="shopping-bag" class="w-10 h-10" /></div>
                <div class="text-center">
                    <h3 class="text-lg my-2 font-semibold">Mağaza</h3>
                    <p class="text-sm px-2 text-muted transition-all group-hover:text-ink">Məhsullarınızı onlayn vitrində göstərin.</p>
                </div>
            </li>

            <li class="flex flex-col gap-1 bg-surface border border-line rounded-xl p-6 min-h-36 transition-all hover:border-primary group">
                <div class="flex justify-center mb-2"><x-icon name="globe" class="w-10 h-10" /></div>
                <div class="text-center">
                    <h3 class="text-lg my-2 font-semibold">Mini sayt</h3>
                    <p class="text-sm px-2 text-muted transition-all group-hover:text-ink">Kiçik biznesiniz üçün hazır şablon sayt.</p>
                </div>
            </li>
        </ul>
    </div>
</section>

<section id="steps-home" class="py-16">
    <div class="container">
        <div class="mb-12">
            <h2 class="text-center text-3xl font-semibold uppercase">Cəmi 3 addıma öz saytınız</h2>
        </div>
        <ul class="grid grid-cols-1 sm:grid-cols-3 gap-8">
            <li class="flex flex-col justify-center items-center text-center">
                <div class="w-12 h-12 bg-primary font-semibold text-white text-2xl flex items-center justify-center rounded-full">1</div>
                <h4 class="text-lg my-3 font-semibold">Qeydiyyatdan keç</h4>
                <p class="text-sm text-muted">Hesabınızı yaradın və panelə daxil olun.</p>
            </li>

            <li class="flex flex-col justify-center items-center text-center">
                <div class="w-12 h-12 bg-primary font-semibold text-white text-2xl flex items-center justify-center rounded-full">2</div>
                <h4 class="text-lg my-3 font-semibold">Şablon seç</h4>
                <p class="text-sm text-muted">Hazır şablondan birini seçin və fərdiləşdirin.</p>
            </li>

            <li class="flex flex-col justify-center items-center text-center">
                <div class="w-12 h-12 bg-primary font-semibold text-white text-2xl flex items-center justify-center rounded-full">3</div>
                <h4 class="text-lg my-3 font-semibold">Paylaş</h4>
                <p class="text-sm text-muted">Linkinizi paylaşın və QR-kodla yayın.</p>
            </li>
        </ul>
    </div>
</section>

<section id="template-home" class="bg-surface2 py-16 md:py-20">
    <div class="container">
        <div class="flex flex-col lg:flex-row gap-10 justify-between items-center">
            <div class="w-full lg:w-7/12">
                <h2 class="text-3xl mb-8">Niyə <span class="text-primary">libro.az</span> bu qədər asandır?</h2>
                <ul class="flex flex-col gap-5">
                    <li class="flex items-center gap-3 group">
                        <span class="w-8 h-8 shrink-0 bg-primary text-white text-base flex items-center justify-center rounded-full transition-all group-hover:bg-primaryhover"><x-icon name="check" class="w-4 h-4" /></span>
                        <div><strong>Gözəl dizayn</strong> — Biznesinizə uyğun hazır şablonlar.</div>
                    </li>
                    <li class="flex items-center gap-3 group">
                        <span class="w-8 h-8 shrink-0 bg-primary text-white text-base flex items-center justify-center rounded-full transition-all group-hover:bg-primaryhover"><x-icon name="check" class="w-4 h-4" /></span>
                        <div><strong>Asan redaktə</strong> — Kod bilmədən hər şeyi dəyişdirin.</div>
                    </li>
                    <li class="flex items-center gap-3 group">
                        <span class="w-8 h-8 shrink-0 bg-primary text-white text-base flex items-center justify-center rounded-full transition-all group-hover:bg-primaryhover"><x-icon name="check" class="w-4 h-4" /></span>
                        <div><strong>QR-menyu</strong> — Restoranlar üçün sürətli menyu.</div>
                    </li>
                    <li class="flex items-center gap-3 group">
                        <span class="w-8 h-8 shrink-0 bg-primary text-white text-base flex items-center justify-center rounded-full transition-all group-hover:bg-primaryhover"><x-icon name="check" class="w-4 h-4" /></span>
                        <div><strong>Statistika</strong> — Səhifənizin baxışlarını izləyin.</div>
                    </li>
                    <li class="flex items-center gap-3 group">
                        <span class="w-8 h-8 shrink-0 bg-primary text-white text-base flex items-center justify-center rounded-full transition-all group-hover:bg-primaryhover"><x-icon name="check" class="w-4 h-4" /></span>
                        <div><strong>Dəstək</strong> — Hər addımda kömək edirik.</div>
                    </li>
                </ul>
            </div>
            <div class="w-full lg:w-5/12">
                <img src="/app/home_static.png" class="w-full" alt="">
            </div>
        </div>
    </div>
</section>

<section id="plans-home" class="py-16 md:py-20">
    <div class="container">
        <h2 class="text-3xl text-center">Özünüzə uyğun tarif seçin</h2>
        <ul class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">

            <li class="bg-surface border border-line rounded-xl w-full px-5 py-6 flex flex-col">
                <div class="title text-center uppercase text-xl font-semibold">Pulsuz</div>
                <div class="price text-center flex items-end justify-center my-6"><span class="text-4xl font-semibold">0</span> <span class="text-lg ml-2">AZN</span><span class="text-muted text-sm ml-3 -translate-y-1">/ əbədi</span></div>
                <ul class="flex flex-col gap-2 flex-1">
                    <li class="flex items-center gap-3"><span class="text-primary"><x-icon name="check" class="w-4 h-4" /></span> <span class="text-sm text-muted">2 səhifə pulsuz</span></li>
                    <li class="flex items-center gap-3"><span class="text-primary"><x-icon name="check" class="w-4 h-4" /></span> <span class="text-sm text-muted">Pulsuz şablonlar</span></li>
                    <li class="flex items-center gap-3"><span class="text-primary"><x-icon name="check" class="w-4 h-4" /></span> <span class="text-sm text-muted">QR-kod</span></li>
                </ul>
                <div class="mt-6">
                    <a href="{{ route('register') }}" class="btn btn-secondary w-full">Başla</a>
                </div>
            </li>

            <li class="bg-surface border-2 border-primary md:scale-105 rounded-xl w-full px-5 py-6 flex flex-col">
                <div class="title text-center uppercase text-xl text-primary font-semibold">PRO</div>
                <div class="price text-center flex items-end justify-center my-6"><span class="text-4xl font-semibold">5.99</span> <span class="text-lg ml-2">AZN</span><span class="text-muted text-sm ml-3 -translate-y-1">/ ay</span></div>
                <ul class="flex flex-col gap-2 flex-1">
                    <li class="flex items-center gap-3"><span class="text-primary"><x-icon name="check" class="w-4 h-4" /></span> <span class="text-sm text-muted">Limitsiz səhifə</span></li>
                    <li class="flex items-center gap-3"><span class="text-primary"><x-icon name="check" class="w-4 h-4" /></span> <span class="text-sm text-muted">PRO şablonlar</span></li>
                    <li class="flex items-center gap-3"><span class="text-primary"><x-icon name="check" class="w-4 h-4" /></span> <span class="text-sm text-muted">QR-Menu</span></li>
                    <li class="flex items-center gap-3"><span class="text-primary"><x-icon name="check" class="w-4 h-4" /></span> <span class="text-sm text-muted">Dizayn edilmiş QR-menyu</span></li>
                </ul>
                <div class="mt-6">
                    <a href="{{ route('register') }}" class="btn btn-primary w-full">Başla</a>
                </div>
            </li>

            <li class="bg-surface border border-line rounded-xl w-full px-5 py-6 flex flex-col">
                <div class="title text-center uppercase text-xl font-semibold">Biznes</div>
                <div class="price text-center flex items-end justify-center my-6"><span class="text-4xl font-semibold">12.99</span> <span class="text-lg ml-2">AZN</span><span class="text-muted text-sm ml-3 -translate-y-1">/ ay</span></div>
                <ul class="flex flex-col gap-2 flex-1">
                    <li class="flex items-center gap-3"><span class="text-primary"><x-icon name="check" class="w-4 h-4" /></span> <span class="text-sm text-muted">PRO + hər şey</span></li>
                    <li class="flex items-center gap-3"><span class="text-primary"><x-icon name="check" class="w-4 h-4" /></span> <span class="text-sm text-muted">Öz domen</span></li>
                    <li class="flex items-center gap-3"><span class="text-primary"><x-icon name="check" class="w-4 h-4" /></span> <span class="text-sm text-muted">Mağaza vitrini</span></li>
                </ul>
                <div class="mt-6">
                    <a href="{{ route('register') }}" class="btn btn-secondary w-full">Başla</a>
                </div>
            </li>
        </ul>
    </div>
</section>

@endsection