<x-layouts.weshare>
  <div class="min-h-[100dvh] animate-fade-in bg-background">
    <header class="relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-[hsl(var(--primary)/0.08)] via-transparent to-[hsl(var(--primary)/0.04)]"></div>

      <div class="relative max-w-5xl mx-auto px-6 pt-6 sm:pt-10">
        <div class="flex items-center justify-between">
          <a href="{{ route('guest.welcome') }}" class="flex items-center gap-2">
            <span class="w-9 h-9 rounded-[14px] bg-primary/10 flex items-center justify-center text-[18px]">💸</span>
            <span class="text-[14px] font-semibold tracking-tight text-foreground">WeShare</span>
          </a>

          <div class="flex items-center gap-2">
            <a
              href="{{ route('login') }}"
              class="inline-flex items-center justify-center px-4 py-2 rounded-full text-[14px] font-semibold text-foreground bg-secondary/60 hover:bg-secondary active:scale-[0.98] transition-transform"
            >
              Log in
            </a>
            <a
              href="{{ route('register') }}"
              class="inline-flex items-center justify-center px-4 py-2 rounded-full text-[14px] font-semibold bg-primary text-primary-foreground hover:opacity-95 active:scale-[0.98] transition-transform shadow-[0_14px_32px_hsl(var(--primary)/0.18)]"
            >
              Get started
              <x-lucide-arrow-right class="w-4 h-4 ml-1" />
            </a>
          </div>
        </div>

        <div class="pt-14 pb-12 sm:pt-16 sm:pb-16">
          <div class="max-w-2xl mx-auto text-center">
            <div class="inline-flex items-center gap-2 rounded-full border border-border/60 bg-card/60 px-3 py-1 text-[12px] font-semibold text-muted-foreground">
              <span class="w-1.5 h-1.5 rounded-full bg-success"></span>
              Split expenses, lists, and shared purchases
            </div>

            <h1 class="mt-4 text-[40px] sm:text-[52px] font-bold tracking-tight leading-[1.05] text-foreground">
              The clean way to share costs with friends
            </h1>

            <p class="mt-4 text-[17px] sm:text-[18px] leading-relaxed text-muted-foreground">
              Create groups, add expenses, track shared lists and purchases — and settle up in seconds.
            </p>

            <div class="mt-8 flex flex-col sm:flex-row gap-3 sm:justify-center">
              <a
                href="{{ route('register') }}"
                class="inline-flex items-center justify-center gap-2 rounded-2xl px-8 py-4 text-[17px] font-semibold bg-primary text-primary-foreground hover:opacity-95 active:scale-[0.98] transition-transform shadow-[0_18px_40px_hsl(var(--primary)/0.20)]"
              >
                Create free account
                <x-lucide-arrow-right class="w-5 h-5" />
              </a>
              <a
                href="{{ route('login') }}"
                class="inline-flex items-center justify-center rounded-2xl px-8 py-4 text-[17px] font-semibold bg-secondary text-secondary-foreground hover:bg-secondary/80 active:scale-[0.98] transition-transform"
              >
                I already have an account
              </a>
            </div>

            <div class="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-[13px] text-muted-foreground">
              <span class="inline-flex items-center gap-2"><span class="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center"><x-lucide-shield class="w-3.5 h-3.5 text-primary" /></span>Private by default</span>
              <span class="inline-flex items-center gap-2"><span class="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center"><x-lucide-zap class="w-3.5 h-3.5 text-primary" /></span>Fast on mobile</span>
              <span class="inline-flex items-center gap-2"><span class="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center"><x-lucide-bar-chart-3 class="w-3.5 h-3.5 text-primary" /></span>Insights included</span>
            </div>
          </div>

          <div class="mt-12 max-w-4xl mx-auto">
            <div class="apple-card p-5 sm:p-6 overflow-hidden">
              <div class="flex items-center justify-between gap-3 mb-4">
                <div class="min-w-0">
                  <p class="text-[14px] font-semibold text-foreground truncate">Preview</p>
                  <p class="text-[12px] text-muted-foreground">A simple dashboard-like snapshot</p>
                </div>
                <div class="hidden sm:flex items-center gap-2 text-[12px] text-muted-foreground">
                  <span class="px-2 py-1 rounded-full bg-secondary/70">Groups</span>
                  <span class="px-2 py-1 rounded-full bg-secondary/70">Lists</span>
                  <span class="px-2 py-1 rounded-full bg-secondary/70">Settle</span>
                </div>
              </div>

              <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div class="apple-card-inset p-4 rounded-2xl">
                  <p class="text-[11px] text-muted-foreground mb-1">Overall balance</p>
                  <p class="text-[22px] font-bold tracking-tight tabular-nums balance-positive">$128.40</p>
                  <p class="text-[12px] text-muted-foreground mt-1">Across 3 groups</p>
                </div>
                <div class="apple-card-inset p-4 rounded-2xl">
                  <p class="text-[11px] text-muted-foreground mb-1">Next to settle</p>
                  <div class="flex items-center justify-between">
                    <p class="text-[15px] font-semibold text-foreground truncate">🏠 Home</p>
                    <p class="text-[13px] font-semibold tabular-nums balance-negative">$24.10</p>
                  </div>
                  <p class="text-[12px] text-muted-foreground mt-1">2 taps to record payment</p>
                </div>
                <div class="apple-card-inset p-4 rounded-2xl">
                  <p class="text-[11px] text-muted-foreground mb-1">Shared list</p>
                  <div class="flex items-center justify-between">
                    <p class="text-[15px] font-semibold text-foreground truncate">🛒 Groceries</p>
                    <p class="text-[12px] text-muted-foreground tabular-nums">6 / 10</p>
                  </div>
                  <p class="text-[12px] text-muted-foreground mt-1">Track items, split checkout</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <section class="max-w-5xl mx-auto px-6 py-14 sm:py-16">
      <div class="max-w-2xl mx-auto text-center mb-10">
        <p class="text-[13px] font-semibold uppercase tracking-widest text-muted-foreground">Features</p>
        <h2 class="mt-3 text-[26px] sm:text-[30px] font-bold tracking-tight text-foreground">Everything you need, nothing you don’t</h2>
        <p class="mt-3 text-[15px] text-muted-foreground leading-relaxed">
          Designed for quick entry and clear balances—so everyone stays aligned.
        </p>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        @foreach ([
          ['icon' => 'users', 'title' => 'Groups', 'desc' => 'Home, trips, events—keep everyone organized.'],
          ['icon' => 'receipt', 'title' => 'Expenses', 'desc' => 'Add in seconds, split fairly, keep the history.'],
          ['icon' => 'shopping-cart', 'title' => 'Shared lists', 'desc' => 'Track items and split the checkout cleanly.'],
          ['icon' => 'bar-chart-3', 'title' => 'Insights', 'desc' => 'See totals, trends, and who paid what.'],
          ['icon' => 'wallet', 'title' => 'Settle up', 'desc' => 'Record payments and get back to zero fast.'],
          ['icon' => 'shield', 'title' => 'Private', 'desc' => 'Everything scoped to your account and space.'],
        ] as $f)
          <div class="rounded-2xl border border-border/60 bg-card p-5 space-y-3">
            <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
              <x-dynamic-component :component="'lucide-'.$f['icon']" class="w-5 h-5 text-primary" />
            </div>
            <h3 class="text-[15px] font-semibold text-foreground">{{ $f['title'] }}</h3>
            <p class="text-[13px] leading-relaxed text-muted-foreground">{{ $f['desc'] }}</p>
          </div>
        @endforeach
      </div>
    </section>

    <section class="max-w-5xl mx-auto px-6 pb-16">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div class="apple-card p-6">
          <p class="text-[13px] font-semibold uppercase tracking-widest text-muted-foreground">How it works</p>
          <h2 class="mt-3 text-[24px] sm:text-[28px] font-bold tracking-tight text-foreground">Start in under a minute</h2>
          <div class="mt-5 space-y-3">
            <div class="flex gap-3">
              <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-[13px] font-bold text-primary shrink-0">1</div>
              <div>
                <p class="text-[15px] font-semibold text-foreground">Create a group</p>
                <p class="text-[13px] text-muted-foreground mt-0.5">Home, trip, or event—invite people later.</p>
              </div>
            </div>
            <div class="flex gap-3">
              <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-[13px] font-bold text-primary shrink-0">2</div>
              <div>
                <p class="text-[15px] font-semibold text-foreground">Add expenses</p>
                <p class="text-[13px] text-muted-foreground mt-0.5">Quick amount, description, and payer.</p>
              </div>
            </div>
            <div class="flex gap-3">
              <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-[13px] font-bold text-primary shrink-0">3</div>
              <div>
                <p class="text-[15px] font-semibold text-foreground">Settle up</p>
                <p class="text-[13px] text-muted-foreground mt-0.5">See who owes who and record payments.</p>
              </div>
            </div>
          </div>
        </div>

        <div class="rounded-3xl p-8 bg-primary/5 border border-primary/10 text-center flex flex-col justify-center">
          <h2 class="text-[24px] sm:text-[28px] font-bold tracking-tight text-foreground">
            Ready to try WeShare?
          </h2>
          <p class="mt-2 text-[15px] text-muted-foreground">
            Create an account and start sharing expenses today.
          </p>
          <a
            href="{{ route('register') }}"
            class="mt-6 inline-flex items-center justify-center gap-2 rounded-2xl px-8 py-4 text-[17px] font-semibold bg-primary text-primary-foreground hover:opacity-95 active:scale-[0.98] transition-transform shadow-[0_18px_40px_hsl(var(--primary)/0.20)]"
          >
            Get started free
            <x-lucide-arrow-right class="w-5 h-5" />
          </a>
          <p class="mt-3 text-[12px] text-muted-foreground">No credit card. Just sign up.</p>
        </div>
      </div>

      <footer class="mt-10 flex flex-col sm:flex-row items-center justify-between gap-3 text-[12px] text-muted-foreground">
        <div class="flex flex-col sm:flex-row items-center gap-2 sm:gap-3">
          <p>© {{ date('Y') }} WeShare</p>
          <span class="hidden sm:inline opacity-40">•</span>
          <p>
            Developed by
            <a class="hover:text-foreground transition-colors font-medium" href="http://instagram.com/augustogsa" target="_blank" rel="noreferrer">Augusto</a>
            · Powered by
            <a class="hover:text-foreground transition-colors font-medium" href="http://criazo.com/" target="_blank" rel="noreferrer">Criazo</a>
          </p>
        </div>
        <div class="flex items-center gap-4">
          <a class="hover:text-foreground transition-colors" href="{{ route('login') }}">Log in</a>
          <a class="hover:text-foreground transition-colors" href="{{ route('register') }}">Sign up</a>
        </div>
      </footer>
    </section>
  </div>
</x-layouts.weshare>

