@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-features-shell {
            padding: 156px 0 96px;
        }

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

        .dari-stock-feature-hero h1 {
            margin: 0;
            max-width: 580px;
            line-height: 1.03;
        }

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

        .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-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-feature-actions {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            margin-top: 28px;
        }

        .dari-stock-feature-hero-art {
            width: min(100%, 760px);
            height: auto;
            display: block;
            filter: drop-shadow(0 40px 60px rgba(37, 99, 235, 0.15));
        }

        .dari-stock-feature-grid {
            display: grid;
            gap: 28px;
            margin-top: 78px;
        }

        .dari-stock-demo-shell {
            display: grid;
            grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
            gap: 30px;
            align-items: center;
            margin-top: 76px;
            padding: 34px;
            border-radius: 34px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(238, 242, 255, 0.92));
            border: 1px solid rgba(148, 163, 184, 0.18);
            box-shadow: 0 26px 56px rgba(15, 23, 42, 0.07);
        }

        .dari-stock-demo-shell > * {
            min-width: 0;
        }

        .dari-stock-demo-copy h2 {
            margin: 0;
            font-size: clamp(30px, 4vw, 42px);
            line-height: 1.06;
            color: #0f172a;
        }

        .dari-stock-demo-copy p {
            margin: 16px 0 0;
            font-size: 17px;
            line-height: 1.76;
            color: #667085;
        }

        .dari-stock-demo-steps {
            display: grid;
            gap: 14px;
            margin-top: 24px;
        }

        .dari-stock-demo-step {
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .dari-stock-demo-step-index {
            flex: none;
            width: 28px;
            height: 28px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.18), rgba(14, 165, 233, 0.18));
            color: #4338ca;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 800;
            margin-top: 2px;
        }

        .dari-stock-demo-step span:last-child {
            font-size: 15px;
            line-height: 1.7;
            color: #475467;
        }

        .dari-stock-demo-video {
            position: relative;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            aspect-ratio: 16 / 10;
            min-height: 430px;
            overflow: hidden;
            border-radius: 32px;
            background:
                radial-gradient(circle at 18% 18%, rgba(244, 114, 182, 0.2), transparent 32%),
                radial-gradient(circle at 80% 20%, rgba(96, 165, 250, 0.24), transparent 34%),
                linear-gradient(180deg, #ffffff 0%, #eef2ff 100%);
            border: 1px solid rgba(148, 163, 184, 0.18);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
        }

        .dari-stock-demo-chip {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.82);
            color: white;
            font-size: 13px;
            font-weight: 700;
        }

        .dari-stock-demo-chip::before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: #4ade80;
            box-shadow: 0 0 0 8px rgba(74, 222, 128, 0.15);
        }

        .dari-stock-demo-scene {
            position: absolute;
            inset: 32px 30px 64px;
            opacity: 0;
            transform: translateY(18px) scale(0.98);
            animation: dari-stock-scene-cycle 16s infinite;
        }

        .dari-stock-demo-scene:nth-of-type(2) {
            animation-delay: 4s;
        }

        .dari-stock-demo-scene:nth-of-type(3) {
            animation-delay: 8s;
        }

        .dari-stock-demo-scene:nth-of-type(4) {
            animation-delay: 12s;
        }

        .dari-stock-demo-surface {
            position: absolute;
            inset: 20px 12px 0;
            border-radius: 28px;
            background: rgba(255, 255, 255, 0.76);
            border: 1px solid rgba(148, 163, 184, 0.12);
        }

        .dari-stock-demo-surface::after {
            content: "";
            position: absolute;
            inset: auto 12% -18px;
            height: 26px;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.14);
            filter: blur(8px);
        }

        .dari-stock-demo-title {
            position: absolute;
            top: 18px;
            left: 22px;
            font-size: 22px;
            font-weight: 800;
            color: #0f172a;
        }

        .dari-stock-demo-subtitle {
            position: absolute;
            top: 52px;
            left: 22px;
            font-size: 14px;
            color: #667085;
        }

        .dari-stock-demo-card {
            position: absolute;
            border-radius: 22px;
            background: white;
            border: 1px solid rgba(148, 163, 184, 0.16);
            box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
        }

        .dari-stock-demo-line {
            position: absolute;
            height: 12px;
            border-radius: 999px;
            background: #e2e8f0;
        }

        .dari-stock-demo-box {
            position: absolute;
            width: 74px;
            height: 74px;
            transform-style: preserve-3d;
            animation: dari-stock-float 4.6s ease-in-out infinite;
        }

        .dari-stock-demo-box::before,
        .dari-stock-demo-box::after,
        .dari-stock-demo-box span {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 16px;
        }

        .dari-stock-demo-box span {
            background: linear-gradient(135deg, #fb923c, #f59e0b);
        }

        .dari-stock-demo-box::before {
            transform: translateY(-18px) scale(0.92);
            background: linear-gradient(135deg, #fdba74, #fde68a);
        }

        .dari-stock-demo-box::after {
            transform: translateX(18px) scale(0.92);
            background: linear-gradient(135deg, #f97316, #ea580c);
        }

        .dari-stock-demo-box.is-blue span {
            background: linear-gradient(135deg, #38bdf8, #2563eb);
        }

        .dari-stock-demo-box.is-blue::before {
            background: linear-gradient(135deg, #7dd3fc, #bfdbfe);
        }

        .dari-stock-demo-box.is-blue::after {
            background: linear-gradient(135deg, #0ea5e9, #1d4ed8);
        }

        .dari-stock-demo-box.is-purple span {
            background: linear-gradient(135deg, #8b5cf6, #4f46e5);
        }

        .dari-stock-demo-box.is-purple::before {
            background: linear-gradient(135deg, #c4b5fd, #ddd6fe);
        }

        .dari-stock-demo-box.is-purple::after {
            background: linear-gradient(135deg, #7c3aed, #4338ca);
        }

        .dari-stock-demo-pill {
            position: absolute;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 34px;
            padding: 0 14px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 700;
            color: #0f172a;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(148, 163, 184, 0.16);
            box-shadow: 0 14px 22px rgba(15, 23, 42, 0.06);
        }

        .dari-stock-demo-path {
            position: absolute;
            height: 6px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(99, 102, 241, 0.26), rgba(14, 165, 233, 0.42));
        }

        .dari-stock-demo-avatar {
            position: absolute;
            width: 74px;
            height: 74px;
            border-radius: 24px;
            background: linear-gradient(135deg, #eff6ff, #ffffff);
            border: 1px solid rgba(148, 163, 184, 0.16);
            box-shadow: 0 18px 28px rgba(15, 23, 42, 0.08);
        }

        .dari-stock-demo-avatar::before {
            content: "";
            position: absolute;
            top: 16px;
            left: 25px;
            width: 24px;
            height: 24px;
            border-radius: 999px;
            background: #60a5fa;
        }

        .dari-stock-demo-avatar::after {
            content: "";
            position: absolute;
            left: 16px;
            bottom: 14px;
            width: 42px;
            height: 22px;
            border-radius: 14px 14px 10px 10px;
            background: #60a5fa;
        }

        .dari-stock-demo-timeline {
            position: absolute;
            left: 22px;
            right: 22px;
            bottom: 20px;
            height: 6px;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.2);
            overflow: hidden;
        }

        .dari-stock-demo-progress {
            width: 100%;
            height: 100%;
            transform-origin: left center;
            background: linear-gradient(90deg, #4f46e5, #0ea5e9);
            animation: dari-stock-progress 16s linear infinite;
        }

        .dari-stock-demo-scene.scene-stock .dari-stock-demo-box {
            left: 86px;
            bottom: 62px;
        }

        .dari-stock-demo-scene.scene-stock .dari-stock-demo-box.is-blue {
            left: 204px;
            bottom: 82px;
            animation-delay: 0.8s;
        }

        .dari-stock-demo-scene.scene-stock .dari-stock-demo-card {
            right: 36px;
            top: 86px;
            width: 210px;
            height: 136px;
        }

        .dari-stock-demo-scene.scene-orders .dari-stock-demo-card {
            left: 44px;
            top: 94px;
            width: 230px;
            height: 164px;
        }

        .dari-stock-demo-scene.scene-orders .dari-stock-demo-pill {
            right: 38px;
            top: 126px;
        }

        .dari-stock-demo-scene.scene-orders .dari-stock-demo-box {
            right: 72px;
            bottom: 88px;
        }

        .dari-stock-demo-scene.scene-team .dari-stock-demo-avatar:first-of-type {
            left: 72px;
            top: 132px;
        }

        .dari-stock-demo-scene.scene-team .dari-stock-demo-avatar:nth-of-type(2) {
            left: 196px;
            top: 102px;
        }

        .dari-stock-demo-scene.scene-team .dari-stock-demo-avatar:nth-of-type(3) {
            left: 320px;
            top: 148px;
        }

        .dari-stock-demo-scene.scene-team .dari-stock-demo-card {
            right: 34px;
            top: 94px;
            width: 190px;
            height: 168px;
        }

        .dari-stock-demo-scene.scene-report .dari-stock-demo-card {
            left: 48px;
            top: 96px;
            width: 246px;
            height: 170px;
        }

        .dari-stock-demo-scene.scene-report .dari-stock-demo-card.is-small {
            right: 34px;
            top: 118px;
            width: 188px;
            height: 134px;
        }

        @keyframes dari-stock-progress {
            0% {
                transform: scaleX(0);
            }
            100% {
                transform: scaleX(1);
            }
        }

        @keyframes dari-stock-scene-cycle {
            0%,
            18% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            24%,
            100% {
                opacity: 0;
                transform: translateY(18px) scale(0.98);
            }
        }

        @keyframes dari-stock-float {
            0%,
            100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        .dari-stock-feature-section {
            display: grid;
            grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
            gap: 34px;
            align-items: center;
            padding: 34px;
            border-radius: 34px;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(148, 163, 184, 0.16);
            box-shadow: 0 24px 50px rgba(15, 23, 42, 0.06);
        }

        .dari-stock-feature-section.is-reversed .dari-stock-feature-visual {
            order: 2;
        }

        .dari-stock-feature-section.is-reversed .dari-stock-feature-copy {
            order: 1;
        }

        .dari-stock-feature-label {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(79, 70, 229, 0.08);
            color: #4338ca;
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

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

        .dari-stock-feature-copy h2 {
            margin: 18px 0 0;
            font-size: clamp(30px, 4vw, 42px);
            line-height: 1.06;
            color: #0f172a;
        }

        .dari-stock-feature-copy p {
            margin: 16px 0 0;
            font-size: 17px;
            line-height: 1.76;
            color: #667085;
        }

        .dari-stock-feature-points {
            list-style: none;
            padding: 0;
            margin: 24px 0 0;
            display: grid;
            gap: 14px;
        }

        .dari-stock-feature-points li {
            display: flex;
            gap: 12px;
            font-size: 15px;
            line-height: 1.7;
            color: #475467;
        }

        .dari-stock-feature-bullet {
            flex: none;
            width: 24px;
            height: 24px;
            margin-top: 2px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.18), rgba(14, 165, 233, 0.18));
            color: #4338ca;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 800;
        }

        .dari-stock-feature-visual {
            position: relative;
        }

        .dari-stock-feature-visual img {
            display: block;
            width: 100%;
            height: auto;
        }

        .dari-stock-summary-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 18px;
            margin-top: 30px;
        }

        .dari-stock-summary-card {
            padding: 22px;
            border-radius: 26px;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(148, 163, 184, 0.16);
            box-shadow: 0 18px 36px rgba(15, 23, 42, 0.05);
        }

        .dari-stock-summary-card h3 {
            margin: 0 0 10px;
            font-size: 18px;
            color: #0f172a;
        }

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

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

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

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

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

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

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

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

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

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

        .dari-stock-feature-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-feature-hero,
            .dari-stock-demo-shell,
            .dari-stock-feature-section {
                grid-template-columns: minmax(0, 1fr);
            }

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

            .dari-stock-feature-section.is-reversed .dari-stock-feature-visual,
            .dari-stock-feature-section.is-reversed .dari-stock-feature-copy {
                order: initial;
            }

            .dari-stock-feature-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-features-shell {
                padding: 128px 0 74px;
            }

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

            .dari-stock-demo-shell {
                padding: 24px;
            }

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

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

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

            .dari-stock-feature-section {
                padding: 24px;
            }

            .dari-stock-demo-video {
                min-height: 320px;
            }

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

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

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

@section('content')
    @php
        $showRegister = ($canRegister ?? false) === true;
        $supportLink = route('landing') . '#support';
        $highlightsLink = route('landing') . '#features';
        $mobileMenuClose = "document.getElementById('marketing-nav-toggle').checked = false";
    @endphp

    <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">{{ __('Home') }}</a></li>
                        <li><a href="{{ $highlightsLink }}" class="xl">{{ __('Highlights') }}</a></li>
                        <li><a href="{{ route('landing.features') }}" class="xl" :class="{ 'mk': page === 'features' }">{{ __('Features') }}</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 === 'features', 'ok' : page === 'features' && stickyMenu }"
                            class="ek pk xl">
                            {{ __('Open the app') }}
                        </a>
                    @else
                        <a href="{{ route('login') }}"
                            :class="{ 'nk yl' : page === 'features', 'ok' : page === 'features' && stickyMenu }"
                            class="ek pk xl">
                            {{ __('Login') }}
                        </a>
                        @if ($showRegister)
                            <a href="{{ route('register') }}"
                                :class="{ 'hh/[0.15]' : page === 'features', 'sh' : page === 'features' && stickyMenu }"
                                class="lk gh dk rg tc wf xf _l gi hi">
                                {{ __('Create account') }}
                            </a>
                        @else
                            <a href="{{ $supportLink }}"
                                :class="{ 'hh/[0.15]' : page === 'features', 'sh' : page === 'features' && 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="{{ $highlightsLink }}" onclick="{{ $mobileMenuClose }}">{{ __('Highlights') }}</a>
                        <a href="{{ route('landing.features') }}" onclick="{{ $mobileMenuClose }}">{{ __('Features') }}</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-features-shell">
        <div class="bb ze ki xn 2xl:ud-px-0">
            <section class="dari-stock-feature-hero">
                <div>
                    <h1 class="fk vj zp or kk wm wb">{{ __('All the useful functions to manage your stock.') }}</h1>
                    <p>
                        {{ __('This page presents the main Dari Stock functions simply and shows how the app helps the team every day.') }}
                    </p>

                    <div class="dari-stock-feature-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="#demo" class="dari-stock-button-secondary">{{ __('View demo') }}</a>
                    </div>
                </div>

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

            <section id="demo" class="dari-stock-demo-shell">
                <div class="dari-stock-demo-copy">
                    <h2>{{ __('A simple demo to understand the app') }}</h2>
                    <p>
                        {{ __('This animation shows the main Dari Stock steps: add a product, update stock, follow an order, and manage the team.') }}
                    </p>

                    <div class="dari-stock-demo-steps">
                        <div class="dari-stock-demo-step">
                            <span class="dari-stock-demo-step-index">1</span>
                            <span>{{ __('Add products and organize your catalog.') }}</span>
                        </div>
                        <div class="dari-stock-demo-step">
                            <span class="dari-stock-demo-step-index">2</span>
                            <span>{{ __('Update quantities and see stock movements.') }}</span>
                        </div>
                        <div class="dari-stock-demo-step">
                            <span class="dari-stock-demo-step-index">3</span>
                            <span>{{ __('Follow orders, payments, and related documents.') }}</span>
                        </div>
                        <div class="dari-stock-demo-step">
                            <span class="dari-stock-demo-step-index">4</span>
                            <span>{{ __('Manage team access in the same space.') }}</span>
                        </div>
                    </div>
                </div>

                <div class="dari-stock-demo-video" aria-label="{{ __('Illustrated Dari Stock video') }}">
                    <div class="dari-stock-demo-chip">{{ __('Looped illustrated demo') }}</div>

                    <div class="dari-stock-demo-scene scene-stock">
                        <div class="dari-stock-demo-surface"></div>
                        <div class="dari-stock-demo-title">{{ __('Add products') }}</div>
                        <div class="dari-stock-demo-subtitle">{{ __('Create the base of your stock') }}</div>
                        <div class="dari-stock-demo-box"><span></span></div>
                        <div class="dari-stock-demo-box is-blue"><span></span></div>
                        <div class="dari-stock-demo-card">
                            <div class="dari-stock-demo-line" style="left: 20px; top: 22px; width: 90px;"></div>
                            <div class="dari-stock-demo-line" style="left: 20px; top: 46px; width: 142px; background: #f1f5f9;"></div>
                            <div class="dari-stock-demo-line" style="left: 20px; top: 82px; width: 56px; background: #c7d2fe;"></div>
                            <div class="dari-stock-demo-line" style="left: 84px; top: 82px; width: 86px; background: #dbeafe;"></div>
                            <div class="dari-stock-demo-line" style="left: 20px; top: 108px; width: 148px;"></div>
                        </div>
                        <div class="dari-stock-demo-pill" style="right: 42px; bottom: 58px;">{{ __('Products ready') }}</div>
                    </div>

                    <div class="dari-stock-demo-scene scene-report">
                        <div class="dari-stock-demo-surface"></div>
                        <div class="dari-stock-demo-title">{{ __('Update stock') }}</div>
                        <div class="dari-stock-demo-subtitle">{{ __('See incoming stock, outgoing stock, and levels') }}</div>
                        <div class="dari-stock-demo-card">
                            <div class="dari-stock-demo-line" style="left: 22px; top: 22px; width: 96px;"></div>
                            <div class="dari-stock-demo-line" style="left: 22px; top: 54px; width: 58px; background: #f1f5f9;"></div>
                            <div class="dari-stock-demo-line" style="left: 24px; bottom: 26px; width: 28px; height: 54px; background: #c7d2fe;"></div>
                            <div class="dari-stock-demo-line" style="left: 66px; bottom: 26px; width: 28px; height: 82px; background: #93c5fd;"></div>
                            <div class="dari-stock-demo-line" style="left: 108px; bottom: 26px; width: 28px; height: 112px; background: #4f46e5;"></div>
                            <div class="dari-stock-demo-line" style="left: 150px; bottom: 26px; width: 28px; height: 70px; background: #0ea5e9;"></div>
                            <div class="dari-stock-demo-line" style="left: 26px; bottom: 116px; width: 160px; height: 6px; background: linear-gradient(90deg, #22c55e, #4f46e5);"></div>
                        </div>
                        <div class="dari-stock-demo-card is-small">
                            <div class="dari-stock-demo-line" style="left: 20px; top: 20px; width: 70px;"></div>
                            <div class="dari-stock-demo-line" style="left: 20px; top: 46px; width: 102px; background: #f1f5f9;"></div>
                            <div class="dari-stock-demo-line" style="left: 20px; top: 82px; width: 48px; background: #4f46e5;"></div>
                            <div class="dari-stock-demo-line" style="left: 74px; top: 82px; width: 74px; background: #dbeafe;"></div>
                        </div>
                        <div class="dari-stock-demo-pill" style="right: 36px; bottom: 58px;">{{ __('Stock up to date') }}</div>
                    </div>

                    <div class="dari-stock-demo-scene scene-orders">
                        <div class="dari-stock-demo-surface"></div>
                        <div class="dari-stock-demo-title">{{ __('Track orders') }}</div>
                        <div class="dari-stock-demo-subtitle">{{ __('Link orders, payments, and delivery') }}</div>
                        <div class="dari-stock-demo-card">
                            <div class="dari-stock-demo-line" style="left: 20px; top: 20px; width: 92px;"></div>
                            <div class="dari-stock-demo-line" style="left: 20px; top: 48px; width: 132px; background: #f1f5f9;"></div>
                            <div class="dari-stock-demo-line" style="left: 20px; top: 88px; width: 48px; background: #fed7aa;"></div>
                            <div class="dari-stock-demo-line" style="left: 74px; top: 88px; width: 104px; background: #fde68a;"></div>
                            <div class="dari-stock-demo-line" style="left: 20px; bottom: 24px; width: 160px; height: 6px; background: linear-gradient(90deg, #fb923c, #8b5cf6);"></div>
                        </div>
                        <div class="dari-stock-demo-path" style="left: 304px; top: 172px; width: 180px;"></div>
                        <div class="dari-stock-demo-pill">{{ __('Payment confirmed') }}</div>
                        <div class="dari-stock-demo-box is-purple"><span></span></div>
                    </div>

                    <div class="dari-stock-demo-scene scene-team">
                        <div class="dari-stock-demo-surface"></div>
                        <div class="dari-stock-demo-title">{{ __('Manage the team') }}</div>
                        <div class="dari-stock-demo-subtitle">{{ __('Give the right access to the right person') }}</div>
                        <div class="dari-stock-demo-avatar"></div>
                        <div class="dari-stock-demo-avatar"></div>
                        <div class="dari-stock-demo-avatar"></div>
                        <div class="dari-stock-demo-card">
                            <div class="dari-stock-demo-line" style="left: 20px; top: 22px; width: 78px;"></div>
                            <div class="dari-stock-demo-line" style="left: 20px; top: 52px; width: 118px; background: #f1f5f9;"></div>
                            <div class="dari-stock-demo-line" style="left: 20px; top: 92px; width: 54px; background: #4f46e5;"></div>
                            <div class="dari-stock-demo-line" style="left: 82px; top: 92px; width: 86px; background: #dbeafe;"></div>
                            <div class="dari-stock-demo-line" style="left: 20px; top: 124px; width: 132px;"></div>
                        </div>
                        <div class="dari-stock-demo-pill" style="right: 42px; bottom: 60px;">{{ __('Clean access') }}</div>
                    </div>

                    <div class="dari-stock-demo-timeline">
                        <div class="dari-stock-demo-progress"></div>
                    </div>
                </div>
            </section>

            <section class="dari-stock-feature-grid">
                <article class="dari-stock-feature-section">
                    <div class="dari-stock-feature-copy">
                        <span class="dari-stock-feature-label">{{ __('Stock') }}</span>
                        <h2>{{ __('Follow stock, products, and movements') }}</h2>
                        <p>
                            {{ __('Dari Stock helps you see products, quantities, and movements clearly. You quickly know what comes in, what goes out, and what needs attention.') }}
                        </p>
                        <ul class="dari-stock-feature-points">
                            <li><span class="dari-stock-feature-bullet">+</span><span>{{ __('One clear view of products, available stock, and thresholds.') }}</span></li>
                            <li><span class="dari-stock-feature-bullet">+</span><span>{{ __('Movements that are easier to read so errors are reduced.') }}</span></li>
                            <li><span class="dari-stock-feature-bullet">+</span><span>{{ __('Simple actions to move faster every day.') }}</span></li>
                        </ul>
                    </div>
                    <div class="dari-stock-feature-visual">
                        <img src="{{ asset('images/landing/feature-stock-3d.svg') }}" alt="{{ __('3D illustration of stock tracking') }}" />
                    </div>
                </article>

                <article class="dari-stock-feature-section is-reversed">
                    <div class="dari-stock-feature-copy">
                        <span class="dari-stock-feature-label">{{ __('Orders') }}</span>
                        <h2>{{ __('Orders, payments, and invoices in the same place') }}</h2>
                        <p>
                            {{ __('Orders are linked to payments, invoices, and operational follow-up so you avoid unnecessary back and forth.') }}
                        </p>
                        <ul class="dari-stock-feature-points">
                            <li><span class="dari-stock-feature-bullet">+</span><span>{{ __('Clear follow-up from order to payment.') }}</span></li>
                            <li><span class="dari-stock-feature-bullet">+</span><span>{{ __('Payments and documents stay easy to find.') }}</span></li>
                            <li><span class="dari-stock-feature-bullet">+</span><span>{{ __('Less confusion between sales, operations, and billing.') }}</span></li>
                        </ul>
                    </div>
                    <div class="dari-stock-feature-visual">
                        <img src="{{ asset('images/landing/feature-orders-3d.svg') }}" alt="{{ __('3D illustration of orders and payments') }}" />
                    </div>
                </article>

                <article class="dari-stock-feature-section">
                    <div class="dari-stock-feature-copy">
                        <span class="dari-stock-feature-label">{{ __('Team') }}</span>
                        <h2>{{ __('Roles and access that are easy to manage') }}</h2>
                        <p>
                            {{ __('Dari Stock also helps you manage the team. Roles and access stay clear so everyone works with the right information.') }}
                        </p>
                        <ul class="dari-stock-feature-points">
                            <li><span class="dari-stock-feature-bullet">+</span><span>{{ __('Clear access for managers and team members.') }}</span></li>
                            <li><span class="dari-stock-feature-bullet">+</span><span>{{ __('An overview of activity from the same dashboard.') }}</span></li>
                            <li><span class="dari-stock-feature-bullet">+</span><span>{{ __('A simpler setup so the team can work with confidence.') }}</span></li>
                        </ul>
                    </div>
                    <div class="dari-stock-feature-visual">
                        <img src="{{ asset('images/landing/feature-team-3d.svg') }}" alt="{{ __('3D illustration of team access') }}" />
                    </div>
                </article>
            </section>

            <section class="dari-stock-feature-grid" style="margin-top: 72px;">
                <div>
                    <h2 class="fk vj pr kk wm" style="margin: 0; line-height: 1.05;">{{ __('What you find inside Dari Stock') }}</h2>
                    <p style="max-width: 680px; margin: 16px 0 0; font-size: 17px; line-height: 1.75; color: #667085;">
                        {{ __('Products, stock, orders, payments, and access management. This page explains the product in a simpler and more visual way.') }}
                    </p>
                </div>

                <div class="dari-stock-summary-grid">
                    <article class="dari-stock-summary-card">
                        <h3>{{ __('Products') }}</h3>
                        <p>{{ __('Group your products and review inventory more easily.') }}</p>
                    </article>
                    <article class="dari-stock-summary-card">
                        <h3>{{ __('Stock flow') }}</h3>
                        <p>{{ __('See incoming stock, outgoing stock, and movements without a separate file.') }}</p>
                    </article>
                    <article class="dari-stock-summary-card">
                        <h3>{{ __('Orders') }}</h3>
                        <p>{{ __('Find orders, payments, and invoices in the same place.') }}</p>
                    </article>
                    <article class="dari-stock-summary-card">
                        <h3>{{ __('Team') }}</h3>
                        <p>{{ __('Give each person the right access and keep a clear team overview.') }}</p>
                    </article>
                </div>
            </section>

            <footer class="dari-stock-feature-footer">
                <div class="dari-stock-feature-footer-top">
                    <div class="dari-stock-feature-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-feature-footer-copy">
                            {{ __('A simple product presentation, with visuals that quickly show what Dari Stock brings to the team.') }}
                        </p>
                    </div>

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

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

                <div class="dari-stock-feature-footer-bottom">
                    <span>{{ __('© :year Dari Stock. All rights reserved.', ['year' => now()->year]) }}</span>
                    <span>{{ __('A clear product presentation and simple support 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