@extends('layouts.marketing')

@push('head')
    <style>
        .dari-stock-fixed-header {
            position: fixed;
            inset: 0 0 auto;
            z-index: 110;
            padding-top: 14px;
        }

        .dari-stock-header-shell {
            padding: 14px 18px;
            border-radius: 28px;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(148, 163, 184, 0.18);
            box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
            backdrop-filter: blur(18px);
            overflow: visible;
        }

        .dari-stock-header-shell .sc {
            color: #667085;
        }

        .dari-stock-header-shell .xl,
        .dari-stock-header-shell .ek.pk.xl {
            font-weight: 600;
        }

        .dari-stock-brand-subtitle {
            white-space: nowrap;
        }

        .dari-stock-desktop-nav {
            min-width: 0;
        }

        .dari-stock-mobile-menu-button {
            display: none;
            width: 48px;
            height: 48px;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            border: 1px solid rgba(148, 163, 184, 0.26);
            background: rgba(255, 255, 255, 0.96);
            color: #0f172a;
            box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
        }

        .dari-stock-mobile-nav {
            position: fixed;
            inset: 0;
            z-index: 140;
            display: none;
        }

        .dari-stock-mobile-overlay {
            position: absolute;
            inset: 0;
            border: 0;
            background: rgba(15, 23, 42, 0.42);
            backdrop-filter: blur(8px);
        }

        .dari-stock-mobile-sheet {
            position: absolute;
            top: 16px;
            right: 16px;
            left: 16px;
            padding: 20px;
            border-radius: 26px;
            background: rgba(255, 255, 255, 0.98);
            border: 1px solid rgba(148, 163, 184, 0.18);
            box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
        }

        .dari-stock-mobile-sheet nav {
            display: grid;
            gap: 10px;
        }

        .dari-stock-mobile-sheet a {
            display: block;
            padding: 14px 16px;
            border-radius: 16px;
            color: #0f172a;
            font-weight: 700;
            background: rgba(248, 250, 252, 0.95);
        }

        .dari-stock-mobile-sheet a:hover {
            background: rgba(238, 242, 255, 0.95);
        }

        .dari-stock-mobile-actions {
            display: grid;
            gap: 10px;
            margin-top: 18px;
        }

        .dari-stock-shell {
            padding: 156px 0 96px;
        }

        .dari-stock-success-overlay {
            position: fixed;
            inset: 0;
            z-index: 120;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(15, 23, 42, 0.42);
            backdrop-filter: blur(8px);
        }

        .dari-stock-success-modal {
            width: 100%;
            max-width: 460px;
            padding: 30px 28px;
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.96);
            border: 1px solid rgba(148, 163, 184, 0.18);
            box-shadow: 0 28px 60px rgba(15, 23, 42, 0.16);
            text-align: center;
        }

        .dari-stock-success-badge {
            width: 70px;
            height: 70px;
            margin: 0 auto 18px;
            border-radius: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(14, 165, 233, 0.16));
            color: #16a34a;
            font-size: 30px;
            font-weight: 800;
        }

        .dari-stock-success-modal h3 {
            margin: 0;
            font-size: 30px;
            line-height: 1.08;
            color: #0f172a;
        }

        .dari-stock-success-modal p {
            margin: 14px 0 0;
            font-size: 16px;
            line-height: 1.75;
            color: #667085;
        }

        .dari-stock-success-actions {
            display: flex;
            justify-content: center;
            margin-top: 24px;
        }

        .dari-stock-hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
            gap: 48px;
            align-items: center;
        }

        .dari-stock-hero-copy h1 {
            margin: 0;
            max-width: 560px;
            line-height: 1.02;
        }

        .dari-stock-hero-copy p {
            max-width: 560px;
            margin: 18px 0 0;
            font-size: 18px;
            line-height: 1.72;
            color: #667085;
        }

        .dari-stock-hero-kicker {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 9px 14px;
            border-radius: 999px;
            background: rgba(79, 70, 229, 0.09);
            color: #4338ca;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.02em;
        }

        .dari-stock-hero-kicker::before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: linear-gradient(135deg, #4f46e5, #0ea5e9);
        }

        .dari-stock-hero-actions {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            margin-top: 28px;
        }

        .dari-stock-button,
        .dari-stock-button-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 52px;
            padding: 0 22px;
            border-radius: 16px;
            font-weight: 700;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        }

        .dari-stock-button {
            background: linear-gradient(135deg, #4f46e5, #2563eb);
            color: white;
            box-shadow: 0 18px 30px rgba(79, 70, 229, 0.2);
        }

        .dari-stock-button:hover,
        .dari-stock-button-secondary:hover {
            transform: translateY(-1px);
        }

        .dari-stock-button-secondary {
            background: white;
            color: #0f172a;
            border: 1px solid rgba(148, 163, 184, 0.26);
            box-shadow: 0 14px 26px rgba(15, 23, 42, 0.06);
        }

        .dari-stock-hero-caption {
            margin-top: 18px;
            max-width: 500px;
            font-size: 15px;
            line-height: 1.7;
            color: #475467;
        }

        .dari-stock-audience-card {
            margin-top: 24px;
            max-width: 540px;
            padding: 20px 22px;
            border-radius: 24px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 242, 255, 0.94));
            border: 1px solid rgba(148, 163, 184, 0.18);
            box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
        }

        .dari-stock-audience-card h2 {
            margin: 0;
            font-size: 19px;
            line-height: 1.3;
            color: #0f172a;
        }

        .dari-stock-audience-card p {
            margin: 10px 0 0;
            font-size: 15px;
            line-height: 1.7;
            color: #475467;
        }

        .dari-stock-audience-card a {
            margin-top: 16px;
        }

        .dari-stock-hero-visual {
            position: relative;
            min-height: 560px;
            display: flex;
            align-items: center;
            justify-content: center;
            isolation: isolate;
        }

        .dari-stock-hero-visual::before,
        .dari-stock-hero-visual::after {
            content: "";
            position: absolute;
            border-radius: 999px;
            z-index: -2;
            filter: blur(18px);
        }

        .dari-stock-hero-visual::before {
            width: 300px;
            height: 300px;
            left: 6%;
            top: 10%;
            background: radial-gradient(circle, rgba(244, 114, 182, 0.23) 0%, rgba(244, 114, 182, 0) 72%);
        }

        .dari-stock-hero-visual::after {
            width: 360px;
            height: 360px;
            right: 0;
            top: 2%;
            background: radial-gradient(circle, rgba(96, 165, 250, 0.26) 0%, rgba(96, 165, 250, 0) 72%);
        }

        .dari-stock-hero-art {
            width: min(100%, 780px);
            height: auto;
            filter: drop-shadow(0 38px 56px rgba(37, 99, 235, 0.16));
        }

        .dari-stock-section {
            margin-top: 88px;
        }

        .dari-stock-section-heading {
            max-width: 620px;
            margin-bottom: 26px;
        }

        .dari-stock-section-heading h2 {
            margin: 0;
            font-size: clamp(32px, 4vw, 46px);
            line-height: 1.05;
            color: #0f172a;
            font-weight: 800;
        }

        .dari-stock-section-heading p {
            margin: 16px 0 0;
            font-size: 17px;
            line-height: 1.75;
            color: #667085;
        }

        .dari-stock-atouts-grid,
        .dari-stock-preview-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 22px;
        }

        .dari-stock-card {
            padding: 26px;
            border-radius: 28px;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(148, 163, 184, 0.18);
            box-shadow: 0 24px 50px rgba(15, 23, 42, 0.06);
        }

        .dari-stock-card h3 {
            margin: 16px 0 0;
            font-size: 22px;
            line-height: 1.15;
            color: #0f172a;
        }

        .dari-stock-card p {
            margin: 12px 0 0;
            font-size: 15px;
            line-height: 1.7;
            color: #667085;
        }

        .dari-stock-icon {
            width: 58px;
            height: 58px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.14), rgba(14, 165, 233, 0.16));
        }

        .dari-stock-preview-card {
            overflow: hidden;
            padding: 0;
        }

        .dari-stock-preview-card img {
            display: block;
            width: 100%;
            height: 240px;
            object-fit: cover;
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(238, 242, 255, 0.95));
        }

        .dari-stock-preview-copy {
            padding: 22px 24px 24px;
        }

        .dari-stock-support-grid {
            display: grid;
            grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
            gap: 22px;
        }

        .dari-stock-info-list {
            display: grid;
            gap: 18px;
        }

        .dari-stock-info-item h4 {
            margin: 0 0 6px;
            font-size: 18px;
            color: #0f172a;
        }

        .dari-stock-info-item p {
            margin: 0;
            font-size: 15px;
            line-height: 1.7;
            color: #667085;
        }

        .dari-stock-form-message {
            margin-bottom: 18px;
            padding: 16px 18px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.78);
        }

        .dari-stock-form-message p {
            margin: 8px 0 0;
        }

        .dari-stock-form-grid {
            display: grid;
            gap: 16px;
        }

        .dari-stock-footer {
            margin-top: 88px;
            padding-top: 34px;
            border-top: 1px solid rgba(148, 163, 184, 0.18);
            display: grid;
            gap: 28px;
        }

        .dari-stock-footer-top {
            display: flex;
            justify-content: space-between;
            gap: 28px;
            flex-wrap: wrap;
            align-items: flex-start;
        }

        .dari-stock-footer-brand {
            max-width: 360px;
        }

        .dari-stock-footer-copy {
            margin: 16px 0 0;
            font-size: 15px;
            line-height: 1.75;
            color: #667085;
        }

        .dari-stock-footer-meta {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 22px;
            min-width: min(100%, 520px);
        }

        .dari-stock-footer-group h4 {
            margin: 0 0 12px;
            font-size: 14px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #0f172a;
        }

        .dari-stock-footer-group p {
            margin: 0;
            font-size: 14px;
            line-height: 1.8;
            color: #667085;
        }

        .dari-stock-footer-links {
            display: grid;
            gap: 10px;
            color: #667085;
        }

        .dari-stock-footer-links a:hover {
            color: #0f172a;
        }

        .dari-stock-footer-bottom {
            padding-top: 22px;
            border-top: 1px solid rgba(148, 163, 184, 0.18);
            display: flex;
            justify-content: space-between;
            gap: 14px 24px;
            flex-wrap: wrap;
            font-size: 13px;
            line-height: 1.7;
            color: #98a2b3;
        }

        @media (max-width: 1023px) {
            #marketing-nav-toggle:checked ~ .dari-stock-mobile-nav {
                display: block;
            }

            .dari-stock-brand-subtitle {
                white-space: normal;
            }

            .dari-stock-desktop-nav {
                display: none !important;
            }

            .dari-stock-mobile-menu-button {
                display: inline-flex;
            }

            .dari-stock-hero-grid,
            .dari-stock-support-grid {
                grid-template-columns: minmax(0, 1fr);
            }

            .dari-stock-hero-visual {
                min-height: 420px;
            }

            .dari-stock-atouts-grid,
            .dari-stock-preview-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .dari-stock-footer-meta {
                width: 100%;
            }
        }

        @media (max-width: 767px) {
            .dari-stock-fixed-header {
                padding-top: 10px;
            }

            .dari-stock-header-shell {
                padding: 12px 14px;
                border-radius: 22px;
            }

            .dari-stock-brand-subtitle {
                display: none;
            }

            .dari-stock-shell {
                padding: 128px 0 74px;
            }

            .dari-stock-hero-grid {
                gap: 28px;
            }

            .dari-stock-hero-copy p {
                font-size: 16px;
            }

            .dari-stock-hero-actions {
                flex-direction: column;
                align-items: stretch;
            }

            .dari-stock-button,
            .dari-stock-button-secondary {
                width: 100%;
            }

            .dari-stock-hero-visual {
                min-height: 300px;
            }

            .dari-stock-atouts-grid,
            .dari-stock-preview-grid {
                grid-template-columns: minmax(0, 1fr);
            }

            .dari-stock-footer-meta {
                grid-template-columns: minmax(0, 1fr);
            }

            .dari-stock-footer-bottom {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $showRegister = ($canRegister ?? false) === true;
        $supportLink = '#support';
        $caisseUrl = config('services.caisse.url');
        $mobileMenuClose = "document.getElementById('marketing-nav-toggle').checked = false";
        $isFrench = app()->getLocale() === 'fr';
    @endphp

    @if (session('success'))
        <div
            x-data="{ open: true }"
            x-show="open"
            x-transition.opacity
            class="dari-stock-success-overlay"
        >
            <div
                @click.outside="open = false"
                x-transition.scale
                class="dari-stock-success-modal"
            >
                <div class="dari-stock-success-badge">&#10003;</div>
                <h3>{{ __('Email sent successfully') }}</h3>
                <p>{{ session('success') }}</p>
                <div class="dari-stock-success-actions">
                    <button
                        type="button"
                        class="dari-stock-button"
                        @click="open = false"
                        onclick="this.closest('.dari-stock-success-overlay').style.display='none'"
                    >
                        {{ __('Close') }}
                    </button>
                </div>
            </div>
        </div>
    @endif

    <header class="g s r vd ya cj dari-stock-fixed-header"
        :class="{ 'hh sm _k dj bl ll' : stickyMenu }"
        @scroll.window="stickyMenu = (window.pageYOffset > 20) ? true : false">
        <div class="bb ze ki xn 2xl:ud-px-0 oo wf yf i dari-stock-header-shell">
            <input id="marketing-nav-toggle" type="checkbox" class="sr-only" />

            <div class="vd to/4 tc wf yf">
                <a href="{{ route('landing') }}">
                    <x-branding.logo
                        class="tc wf yf"
                        subtitle="{{ __('The home of your stock') }}"
                        title-class="ek kk wm"
                        subtitle-class="sc dari-stock-brand-subtitle"
                        image-class="h-11 w-11"
                    />
                </a>

                <label for="marketing-nav-toggle" class="po rc dari-stock-mobile-menu-button" aria-label="{{ __('Open menu') }}">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                        <path d="M3.33337 5H16.6667M3.33337 10H16.6667M3.33337 15H16.6667" stroke="currentColor"
                            stroke-width="1.5" stroke-linecap="round" />
                    </svg>
                </label>
            </div>

            <div class="vd wo/4 sd qo f ho oo wf yf dari-stock-desktop-nav">
                <nav>
                    <ul class="tc _o sf yo cg ep">
                        <li><a href="{{ route('landing') }}" class="xl" :class="{ 'mk': page === 'home' }">{{ __('Home') }}</a></li>
                        <li><a href="#features" class="xl">{{ __('Highlights') }}</a></li>
                        <li><a href="{{ route('landing.features') }}" class="xl">{{ __('Features') }}</a></li>
                        <li><a href="{{ $caisseUrl }}" class="xl">{{ __('Caisse') }}</a></li>
                        <li><a href="{{ $supportLink }}" class="xl">{{ __('Contact') }}</a></li>
                    </ul>
                </nav>

                <div class="tc wf ig pb no">
                    @auth
                        <a href="{{ route('dashboard') }}"
                            :class="{ 'nk yl' : page === 'home', 'ok' : page === 'home' && stickyMenu }"
                            class="ek pk xl">
                            {{ __('Open the app') }}
                        </a>
                    @else
                        <a href="{{ route('login') }}"
                            :class="{ 'nk yl' : page === 'home', 'ok' : page === 'home' && stickyMenu }"
                            class="ek pk xl">
                            {{ __('Login') }}
                        </a>
                        @if ($showRegister)
                            <a href="{{ route('register') }}"
                                :class="{ 'hh/[0.15]' : page === 'home', 'sh' : page === 'home' && stickyMenu }"
                                class="lk gh dk rg tc wf xf _l gi hi">
                                {{ __('Create account') }}
                            </a>
                        @else
                            <a href="{{ $supportLink }}"
                                :class="{ 'hh/[0.15]' : page === 'home', 'sh' : page === 'home' && stickyMenu }"
                                class="lk gh dk rg tc wf xf _l gi hi">
                                {{ __('Request access') }}
                            </a>
                        @endif
                    @endauth
                </div>
            </div>

            <div class="dari-stock-mobile-nav">
                <label for="marketing-nav-toggle" class="dari-stock-mobile-overlay" aria-label="{{ __('Close menu') }}"></label>

                <div class="dari-stock-mobile-sheet">
                    <div class="mb-4 flex justify-end">
                        <label for="marketing-nav-toggle" class="po rc dari-stock-mobile-menu-button" aria-label="{{ __('Close menu') }}">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                                <path d="M5 5L15 15M15 5L5 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                            </svg>
                        </label>
                    </div>
                    <nav>
                        <a href="{{ route('landing') }}" onclick="{{ $mobileMenuClose }}">{{ __('Home') }}</a>
                        <a href="#features" onclick="{{ $mobileMenuClose }}">{{ __('Highlights') }}</a>
                        <a href="{{ route('landing.features') }}" onclick="{{ $mobileMenuClose }}">{{ __('Features') }}</a>
                        <a href="{{ $caisseUrl }}" onclick="{{ $mobileMenuClose }}">{{ __('Caisse') }}</a>
                        <a href="{{ $supportLink }}" onclick="{{ $mobileMenuClose }}">{{ __('Contact') }}</a>
                    </nav>

                    <div class="dari-stock-mobile-actions">
                        @auth
                            <a href="{{ route('dashboard') }}" class="dari-stock-button" onclick="{{ $mobileMenuClose }}">{{ __('Open the app') }}</a>
                        @else
                            <a href="{{ route('login') }}" class="dari-stock-button" onclick="{{ $mobileMenuClose }}">{{ __('Login') }}</a>
                            @if ($showRegister)
                                <a href="{{ route('register') }}" class="dari-stock-button-secondary" onclick="{{ $mobileMenuClose }}">{{ __('Create account') }}</a>
                            @else
                                <a href="{{ $supportLink }}" class="dari-stock-button-secondary" onclick="{{ $mobileMenuClose }}">{{ __('Request access') }}</a>
                            @endif
                        @endauth
                    </div>
                </div>
            </div>
        </div>
    </header>

    <main class="dari-stock-shell">
        <div class="bb ze ki xn 2xl:ud-px-0">
            <section class="dari-stock-hero-grid">
                <div class="dari-stock-hero-copy">
                    <span class="dari-stock-hero-kicker">{{ __('Simple, clear, effective') }}</span>
                    <h1 class="fk vj zp or kk wm wb">{{ __('Manage your stock more easily.') }}</h1>
                    <p>
                        {{ __('Dari Stock brings products, orders, payments, and access together in one workspace that is easy to use.') }}
                    </p>

                    <div class="dari-stock-hero-actions">
                        @auth
                            <a href="{{ route('dashboard') }}" class="dari-stock-button">{{ __('Open the app') }}</a>
                        @else
                            <a href="{{ route('login') }}" class="dari-stock-button">{{ __('Enter Dari Stock') }}</a>
                        @endauth
                        <a href="{{ route('landing.features') }}" class="dari-stock-button-secondary">{{ __('View features') }}</a>
                    </div>

                    <p class="dari-stock-hero-caption">
                        {{ __('Everything is in one place to help your team work faster with fewer mistakes.') }}
                    </p>

                    <div class="dari-stock-audience-card">
                        <h2>{{ $isFrench ? 'Vous avez un cafe ou un restaurant ?' : 'Do you run a cafe or restaurant?' }}</h2>
                        <p>{{ $isFrench ? 'Cliquez ici pour ouvrir Caisse, la version pensee pour le service en cafe, les commandes restaurant, les tables et les ventes du jour.' : 'Click here to open Caisse, the version built for cafe service, restaurant orders, tables, and daily sales.' }}</p>
                        <a href="{{ $caisseUrl }}" class="dari-stock-button-secondary">{{ $isFrench ? 'Ouvrir Caisse pour cafes et restaurants' : 'Open Caisse for cafes and restaurants' }}</a>
                    </div>
                </div>

                <div class="dari-stock-hero-visual">
                    <img src="{{ asset('landing/base/images/dari-stock-hero-3d.svg') }}" alt="{{ __('3D illustration of Dari Stock') }}"
                        class="dari-stock-hero-art" />
                </div>
            </section>

            <section id="features" class="dari-stock-section">
                <div class="dari-stock-section-heading">
                    <h2>{{ __('Why use Dari Stock?') }}</h2>
                    <p>{{ __('See your stock, orders, and team more clearly without jumping from one tool to another.') }}</p>
                </div>

                <div class="dari-stock-atouts-grid">
                    <article class="dari-stock-card">
                        <span class="dari-stock-icon">
                            <img src="{{ asset('landing/base/images/icon-01.svg') }}" alt="{{ __('Icon') }}" />
                        </span>
                        <h3>{{ __('Stock always up to date') }}</h3>
                        <p>{{ __('Check quantities, incoming stock, and outgoing stock at a glance.') }}</p>
                    </article>

                    <article class="dari-stock-card">
                        <span class="dari-stock-icon">
                            <img src="{{ asset('landing/base/images/icon-02.svg') }}" alt="{{ __('Icon') }}" />
                        </span>
                        <h3>{{ __('Well-organized orders') }}</h3>
                        <p>{{ __('Keep orders, payments, and documents in the same place.') }}</p>
                    </article>

                    <article class="dari-stock-card">
                        <span class="dari-stock-icon">
                            <img src="{{ asset('landing/base/images/icon-03.svg') }}" alt="{{ __('Icon') }}" />
                        </span>
                        <h3>{{ __('Simple team access') }}</h3>
                        <p>{{ __('Give each person the right access and follow activity more easily.') }}</p>
                    </article>
                </div>
            </section>

            <section class="dari-stock-section">
                <div class="dari-stock-section-heading">
                    <h2>{{ __('A quick look at the app') }}</h2>
                    <p>{{ __('This page shows the essentials. The features page explains the product in more detail.') }}</p>
                </div>

                <div class="dari-stock-preview-grid">
                    <article class="dari-stock-card dari-stock-preview-card">
                        <img src="{{ asset('images/landing/feature-stock-3d.svg') }}" alt="{{ __('3D stock visualization') }}" />
                        <div class="dari-stock-preview-copy">
                            <h3>{{ __('Stock and warehouse') }}</h3>
                            <p>{{ __('Find products, quantities, and stock movements in one place.') }}</p>
                        </div>
                    </article>

                    <article class="dari-stock-card dari-stock-preview-card">
                        <img src="{{ asset('images/landing/feature-orders-3d.svg') }}" alt="{{ __('3D order visualization') }}" />
                        <div class="dari-stock-preview-copy">
                            <h3>{{ __('Orders and payments') }}</h3>
                            <p>{{ __('Track orders, invoices, and payments easily.') }}</p>
                        </div>
                    </article>

                    <article class="dari-stock-card dari-stock-preview-card">
                        <img src="{{ asset('images/landing/feature-team-3d.svg') }}" alt="{{ __('3D team visualization') }}" />
                        <div class="dari-stock-preview-copy">
                            <h3>{{ __('Team and visibility') }}</h3>
                            <p>{{ __('Manage roles and access so each person sees what they need.') }}</p>
                        </div>
                    </article>
                </div>

                <div class="dari-stock-hero-actions" style="margin-top: 28px;">
                    <a href="{{ route('landing.features') }}" class="dari-stock-button">{{ __('Explore the features page') }}</a>
                </div>
            </section>

            <section id="support" class="dari-stock-section">
                <div class="dari-stock-section-heading">
                    <h2>{{ __('Need help or access?') }}</h2>
                    <p>
                        {{ __('Fill out the form below or write to us directly at') }}
                        <a href="mailto:{{ config('support.email') }}">{{ config('support.email') }}</a>.
                    </p>
                </div>

                <div class="dari-stock-support-grid">
                    <article class="dari-stock-card">
                        <div class="dari-stock-info-list">
                            <div class="dari-stock-info-item">
                                <h4>{{ __('Quick presentation') }}</h4>
                                <p>{{ __('The homepage shows the essentials and points to a more complete page if needed.') }}</p>
                            </div>
                            <div class="dari-stock-info-item">
                                <h4>{{ __('Simple access') }}</h4>
                                <p>{{ __('Log in directly or send a request if you do not have access yet.') }}</p>
                            </div>
                            <div class="dari-stock-info-item">
                                <h4>{{ __('Support email') }}</h4>
                                <p><a href="mailto:{{ config('support.email') }}">{{ config('support.email') }}</a></p>
                            </div>
                            <div class="dari-stock-info-item">
                                <h4>{{ __('Detailed features page') }}</h4>
                                <p>{{ __('The features page presents the product in more depth, with more examples.') }}</p>
                            </div>
                        </div>
                    </article>

                    <article class="dari-stock-card">
                        @if (session('success'))
                            <div class="dari-stock-form-message" style="border: 1px solid rgba(80, 200, 120, 0.35);">
                                <strong>{{ __('Message sent.') }}</strong>
                                <p>{{ session('success') }}</p>
                            </div>
                        @endif

                        @if ($errors->any())
                            <div class="dari-stock-form-message" style="border: 1px solid rgba(255, 107, 107, 0.35);">
                                <strong>{{ __('A small correction is needed.') }}</strong>
                                <p>{{ $errors->first() }}</p>
                            </div>
                        @endif

                        <form action="{{ route('contact.submit') }}" method="POST" class="dari-stock-form-grid">
                            @csrf
                            <div>
                                <label class="rc ac" for="name">{{ __('Full name') }}</label>
                                <input
                                    type="text"
                                    name="name"
                                    id="name"
                                    value="{{ old('name') }}"
                                    placeholder="{{ __('Your name') }}"
                                    class="vd ph sg zk xm _g ch pm hm dm dn em pl/50 xi mi"
                                />
                            </div>

                            <div>
                                <label class="rc ac" for="email">{{ __('Email address') }}</label>
                                <input
                                    type="email"
                                    name="email"
                                    id="email"
                                    value="{{ old('email') }}"
                                    placeholder="{{ __('you@example.com') }}"
                                    class="vd ph sg zk xm _g ch pm hm dm dn em pl/50 xi mi"
                                />
                            </div>

                            <div>
                                <label class="rc ac" for="message">{{ __('Message') }}</label>
                                <textarea
                                    placeholder="{{ __('Explain your need simply: access, setup, or question.') }}"
                                    rows="6"
                                    name="message"
                                    id="message"
                                    class="vd ph sg zk xm _g ch pm hm dm dn em pl/50 ci"
                                >{{ old('message') }}</textarea>
                            </div>

                            <div class="dari-stock-hero-actions" style="margin-top: 4px;">
                                <button type="submit" class="dari-stock-button">{{ __('Send request') }}</button>
                            </div>
                        </form>
                    </article>
                </div>
            </section>

            <footer class="dari-stock-footer">
                <div class="dari-stock-footer-top">
                    <div class="dari-stock-footer-brand">
                        <a href="{{ route('landing') }}">
                            <x-branding.logo
                                class="tc wf yf"
                        subtitle="{{ __('The home of your stock') }}"
                                title-class="ek kk wm"
                                subtitle-class="sc"
                                image-class="h-11 w-11"
                            />
                        </a>
                        <p class="dari-stock-footer-copy">
                            {{ __('Dari Stock brings stock, orders, payments, and access together in one simple space designed for teams that want to save time.') }}
                        </p>
                    </div>

                    <div class="dari-stock-footer-meta">
                        <div class="dari-stock-footer-group">
                            <h4>{{ __('Navigation') }}</h4>
                            <div class="dari-stock-footer-links">
                                <a href="{{ route('landing') }}">{{ __('Home') }}</a>
                                <a href="#features">{{ __('Highlights') }}</a>
                                <a href="{{ route('landing.features') }}">{{ __('Features') }}</a>
                                <a href="#support">{{ __('Contact') }}</a>
                            </div>
                        </div>

                        <div class="dari-stock-footer-group">
                            <h4>{{ __('Support') }}</h4>
                            <p><a href="mailto:{{ config('support.email') }}">{{ config('support.email') }}</a></p>
                            <p>{{ __('For access requests, questions, and onboarding support.') }}</p>
                        </div>
                    </div>
                </div>

                <div class="dari-stock-footer-bottom">
                    <span>{{ __('© :year Dari Stock. All rights reserved.', ['year' => now()->year]) }}</span>
                    <span>{{ __('A simple solution to manage stock, orders, and access.') }}</span>
                </div>
            </footer>
        </div>
    </main>

    <button
        class="xc wf xf ie ld vg sr gh tr g sa ta _a"
        @click="window.scrollTo({top: 0, behavior: 'smooth'})"
        @scroll.window="scrollTop = (window.pageYOffset > 50) ? true : false"
        :class="{ 'uc' : scrollTop }">
        <svg class="uh se qd" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path
                d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5-12.5-32.8-12.5-45.3 0s-12.5-32.8 0-45.3l192-192z" />
        </svg>
    </button>
@endsection