@extends('layouts.auth2')
@section('title', 'VENO Retail Cloud System')

@section('content')
@php
    $defaultFrontpage = (object) [
        'site_logo' => 'uploads/img/veno-logo.png',
        'hero_image' => 'uploads/img/veno-login-banner.png',
        'retail_image' => 'uploads/img/veno-login-banner.png',
        'hero_badge' => 'Retail Cloud POS & ERP',
        'hero_title' => 'VENO Retail Cloud System',
        'hero_subtitle' => 'A premium cloud POS and ERP system for supermarkets, groceries, fashion stores, electronics shops and general retail businesses. Manage sales, inventory, barcode, customers, suppliers, users, branches and reports from one secure cloud platform.',
        'whatsapp_number' => '971585878836',
        'phone' => '+971 58 587 8836',
        'email' => 'posveno@gmail.com',
        'website' => 'www.alnuqtaalzakeya.com',
        'location' => 'Dubai, UAE',
        'primary_color' => '#ffb300',
        'secondary_color' => '#ff9800',
        'accent_color' => '#00BCD4',
        'integrations_json' => [
            ['icon' => '💬', 'title' => 'WhatsApp', 'description' => 'Customer communication and order follow-up.'],
            ['icon' => '🛍️', 'title' => 'Noon', 'description' => 'Marketplace sales and retail order workflows.'],
            ['icon' => '🛒', 'title' => 'WooCommerce', 'description' => 'Online store product and order connection.'],
            ['icon' => '💳', 'title' => 'Payment Gateways', 'description' => 'Connect supported online payment options.'],
            ['icon' => '🧾', 'title' => 'Receipt Printers', 'description' => 'Thermal invoice and receipt printing.'],
            ['icon' => '🏷️', 'title' => 'Barcode Printers', 'description' => 'Barcode labels for products and shelves.'],
            ['icon' => '🚚', 'title' => 'Delivery Apps', 'description' => 'Connect delivery workflows for orders.'],
            ['icon' => '☁️', 'title' => 'Cloud Backups', 'description' => 'Keep your retail data secure and accessible.'],
        ],
        'pricing_json' => [
            ['name' => 'Starter', 'label' => 'Contact Us', 'description' => 'Best for single shops and small retail businesses.', 'features' => ['POS & Sales', 'Inventory Management', 'Customers & Suppliers', 'Basic Reports']],
            ['name' => 'Professional', 'label' => 'Best Value', 'description' => 'Best for growing retail companies with branches and teams.', 'features' => ['Multi Store Control', 'Advanced Reports', 'User Permissions', 'Printer Configuration']],
            ['name' => 'Enterprise', 'label' => 'Custom', 'description' => 'Best for larger companies needing custom ERP workflows.', 'features' => ['Multi Company Setup', 'Custom Modules', 'Integrations', 'Priority Support']],
        ],
    ];

    if (class_exists('\App\FrontpageSetting')) {
        $frontpage = \App\FrontpageSetting::current();
    } elseif (class_exists('\App\Models\FrontpageSetting')) {
        $frontpage = \App\Models\FrontpageSetting::current();
    } else {
        $frontpage = $defaultFrontpage;
    }

    foreach (get_object_vars($defaultFrontpage) as $key => $value) {
        if (!isset($frontpage->{$key}) || $frontpage->{$key} === null || $frontpage->{$key} === '') {
            $frontpage->{$key} = $value;
        }
    }

    $siteLogo = !empty($frontpage->site_logo) ? asset($frontpage->site_logo) : asset('uploads/img/veno-logo.png');
    $heroImage = !empty($frontpage->hero_image) ? asset($frontpage->hero_image) : asset('uploads/img/veno-login-banner.png');
    $retailImage = !empty($frontpage->retail_image) ? asset($frontpage->retail_image) : asset('uploads/img/veno-login-banner.png');
    $frontWhatsapp = preg_replace('/[^0-9]/', '', $frontpage->whatsapp_number ?: '971585878836');
@endphp
<style>
.veno-slider {
    max-width: 1180px;
    margin: 0 auto 70px;
    position: relative;
}

.veno-slide {
    display: none !important;
    margin-bottom: 0 !important;
}

.veno-slide.active {
    display: grid !important;
    animation: venoFade .5s ease;
}

@keyframes venoFade {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
    .veno-page {
        color: #ffffff;
        padding: 0 18px 60px;
    }

    .veno-nav {
        position: sticky;
        top: 14px;
        z-index: 9999;
        max-width: 1180px;
        margin: 0 auto 35px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        border-radius: 22px;
        background: rgba(15,23,42,.94);
        border: 1px solid rgba(255,255,255,.12);
        box-shadow: 0 20px 70px rgba(0,0,0,.28);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .veno-nav-brand img {
        height: 56px;
        width: auto;
        display: block;
    }

    .veno-nav-links {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
    }

    .veno-nav-links a {
        font-weight: 700;
        color: rgba(255,255,255,.86);
        text-decoration: none;
    }

    .veno-menu-toggle {
        display: none;
        align-items: center;
        gap: 8px;
        background: rgba(255,255,255,.10);
        border: 1px solid rgba(255,255,255,.18);
        color: #fff;
        border-radius: 14px;
        padding: 10px 14px;
        font-weight: 800;
        cursor: pointer;
    }

    .veno-menu-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        background: #ffffff;
        position: relative;
    }

    .veno-menu-toggle span:before,
    .veno-menu-toggle span:after {
        content: "";
        position: absolute;
        left: 0;
        width: 18px;
        height: 2px;
        background: #ffffff;
    }

    .veno-menu-toggle span:before { top: -6px; }
    .veno-menu-toggle span:after { top: 6px; }

    .veno-btn-primary {
    background: linear-gradient(
        135deg,
        {{ $frontpage->primary_color ?? '#ffb300' }} 0%,
        {{ $frontpage->secondary_color ?? '#ff9800' }} 100%
    );
    color: #ffffff !important;
    border: none;
    padding: 12px 20px;
    border-radius: 14px;
    text-decoration: none;
    display: inline-block;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(255,179,0,.35);
    transition: all .3s ease;
}

.veno-btn-primary:hover {
    background: linear-gradient(
        135deg,
        #ffc107 0%,
        {{ $frontpage->secondary_color ?? '#ff9800' }} 100%
    );
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(255,179,0,.45);
}

    .veno-btn-secondary {
        color: white !important;
        border: 1px solid rgba(255,255,255,.28);
        padding: 12px 20px;
        border-radius: 14px;
        font-weight: 800;
        text-decoration: none;
        display: inline-block;
        background: rgba(255,255,255,.06);
    }

    .veno-hero {
        max-width: 1180px;
        margin: 0 auto 70px;
        border-radius: 34px;
        overflow: hidden;
        background:
            radial-gradient(circle at top left, rgba(0,188,212,.24), transparent 32%),
            radial-gradient(circle at bottom right, rgba(255,143,0,.18), transparent 30%),
            linear-gradient(135deg, #020617, #04152d 45%, #06324f);
        padding: 70px 58px;
        box-shadow: 0 35px 100px rgba(0,0,0,.35);
        border: 1px solid rgba(255,255,255,.10);
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        gap: 42px;
        align-items: center;
    }

    .veno-badge {
        display: inline-block;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(255,255,255,.10);
        border: 1px solid rgba(255,255,255,.14);
        color: rgba(255,255,255,.86);
        font-weight: 700;
        margin-bottom: 20px;
    }

    .veno-hero h1 {
    font-size: 56px;
    font-weight: 900;
    line-height: 1.08;
    margin-bottom: 20px;
    color: {{ $frontpage->primary_color ?? '#ffb300' }} !important;
    text-shadow: 0 6px 28px rgba(255, 179, 0, .28) !important;
}

    .veno-hero p {
        font-size: 18px;
        line-height: 1.8;
        color: rgba(255,255,255,.82);
    }

    .veno-actions {
        margin-top: 32px;
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
    }

    .veno-hero-visual {
        border-radius: 28px;
        padding: 18px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.12);
        box-shadow: 0 30px 90px rgba(0,0,0,.35);
    }

    .veno-hero-visual img {
        width: 100%;
        border-radius: 22px;
        display: block;
    }

    .veno-section {
        max-width: 1180px;
        margin: 0 auto 80px;
    }

    .veno-section-title {
        text-align: center;
        margin-bottom: 34px;
    }

    .veno-section-title h2 {
        color: #ffffff;
        font-size: 38px;
        font-weight: 900;
        margin-bottom: 12px;
    }

    .veno-section-title p {
        color: rgba(255,255,255,.68);
        font-size: 16px;
        max-width: 760px;
        margin: 0 auto;
        line-height: 1.8;
    }

    .veno-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .veno-card,
    .veno-feature,
    .veno-flow-card,
    .veno-contact-card,
    .veno-integration-card,
    .veno-pricing-card {
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(0,0,0,.18);
        backdrop-filter: blur(14px);
    }

    .veno-card,
    .veno-feature,
    .veno-flow-card,
    .veno-contact-card {
        padding: 24px;
    }

    .veno-card-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, {{ $frontpage->accent_color ?? '#00BCD4' }}, {{ $frontpage->secondary_color ?? '#ff9800' }});
        color: #fff;
        font-size: 22px;
        margin-bottom: 16px;
    }

    .veno-card h3,
    .veno-feature strong,
    .veno-flow-card strong,
    .veno-contact-card strong {
        color: #ffffff;
        font-size: 18px;
        font-weight: 900;
        display: block;
        margin-bottom: 10px;
    }

    .veno-card p,
    .veno-feature span,
    .veno-flow-card p,
    .veno-contact-card p {
        color: rgba(255,255,255,.66);
        font-size: 14px;
        line-height: 1.7;
        margin: 0;
    }

    .veno-feature-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .veno-showcase {
    border-radius: 30px;
    padding: 20px;
    background:
        linear-gradient(135deg, rgba(0,188,212,.14), rgba(255,143,0,.08)),
        rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 90px rgba(0,0,0,.22);

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;
    overflow: hidden;
}

.veno-showcase img {
    width: 100%;
    max-width: 1400px;
    height: auto;
    object-fit: contain;

    display: block;
    margin: auto;

    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.12);
}

    /* Modern infographic workflow */
    .veno-flow-modern {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }

    .veno-flow-modern:before {
        content: "";
        position: absolute;
        top: 46px;
        left: 12%;
        right: 12%;
        height: 3px;
        background: linear-gradient(90deg, {{ $frontpage->accent_color ?? '#00BCD4' }}, {{ $frontpage->secondary_color ?? '#ff9800' }}, {{ $frontpage->secondary_color ?? '#ff9800' }});
        opacity: .65;
        border-radius: 99px;
    }

    .veno-flow-step {
        position: relative;
        z-index: 2;
        padding: 24px;
        min-height: 230px;
        border-radius: 26px;
        background:
            radial-gradient(circle at top left, rgba(0,188,212,.16), transparent 40%),
            rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.12);
        box-shadow: 0 25px 70px rgba(0,0,0,.20);
        backdrop-filter: blur(14px);
        transition: .25s ease;
    }

    .veno-flow-step:hover {
        transform: translateY(-6px);
        border-color: rgba(0,188,212,.45);
        box-shadow: 0 30px 90px rgba(0,188,212,.12);
    }

    .veno-flow-number {
        width: 54px;
        height: 54px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(
135deg,
{{ $frontpage->primary_color ?? '#ffb300' }},
{{ $frontpage->secondary_color ?? '#ff9800' }}
);
        color: #ffffff;
        font-weight: 900;
        font-size: 18px;
        box-shadow: 0 14px 35px rgba(0,188,212,.28);
        margin-bottom: 18px;
    }

    .veno-flow-icon {
        font-size: 34px;
        margin-bottom: 14px;
    }

    .veno-flow-step strong {
        display: block;
        color: #ffffff;
        font-size: 18px;
        font-weight: 900;
        margin-bottom: 10px;
    }

    .veno-flow-step p {
        color: rgba(255,255,255,.68);
        font-size: 14px;
        line-height: 1.7;
        margin: 0;
    }

    /* Integration icons */
    .veno-integrations-icons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }

    .veno-integration-card {
        padding: 24px;
        text-align: center;
        transition: .25s ease;
    }

    .veno-integration-card:hover {
        transform: translateY(-5px);
        border-color: rgba(255,143,0,.45);
    }

    .veno-integration-icon {
        width: 62px;
        height: 62px;
        margin: 0 auto 16px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
            linear-gradient(135deg, rgba(0,188,212,.24), rgba(255,143,0,.22)),
            rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.12);
        font-size: 30px;
    }

    .veno-integration-card strong {
        color: #ffffff;
        display: block;
        font-size: 16px;
        font-weight: 900;
        margin-bottom: 8px;
    }

    .veno-integration-card span {
        color: rgba(255,255,255,.64);
        font-size: 13px;
        line-height: 1.6;
        display: block;
    }

    /* Modern pricing cards */
    .veno-pricing-modern {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .veno-pricing-card {
        position: relative;
        padding: 30px;
        overflow: hidden;
        transition: .25s ease;
    }

    .veno-pricing-card.featured {
        border-color: rgba(0,188,212,.50);
        transform: translateY(-10px);
        background:
            radial-gradient(circle at top right, rgba(0,188,212,.22), transparent 35%),
            rgba(255,255,255,.10);
    }

    .veno-pricing-card:hover {
        transform: translateY(-6px);
        border-color: rgba(0,188,212,.40);
    }

    .veno-pricing-card.featured:hover {
        transform: translateY(-14px);
    }

    .veno-plan-badge {
        position: absolute;
        top: 18px;
        right: 18px;
        padding: 7px 12px;
        border-radius: 999px;
        background: linear-gradient(
135deg,
{{ $frontpage->primary_color ?? '#ffb300' }},
{{ $frontpage->secondary_color ?? '#ff9800' }}
);
        color: #ffffff;
        font-size: 12px;
        font-weight: 900;
    }

    .veno-pricing-card h3 {
        color: #ffffff;
        font-size: 24px;
        font-weight: 900;
        margin-bottom: 10px;
    }

    .veno-price-tag {
        color: {{ $frontpage->accent_color ?? '#00BCD4' }};
        font-size: 34px;
        font-weight: 900;
        margin: 18px 0;
    }

    .veno-price-desc {
        color: rgba(255,255,255,.66);
        line-height: 1.7;
        min-height: 48px;
    }

    .veno-pricing-card ul {
        list-style: none;
        padding: 0;
        margin: 24px 0;
    }

    .veno-pricing-card li {
        color: rgba(255,255,255,.76);
        margin-bottom: 12px;
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

    .veno-pricing-card li:before {
        content: "✓";
        color: {{ $frontpage->accent_color ?? '#00BCD4' }};
        font-weight: 900;
    }

    .veno-contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .veno-contact-card input,
    .veno-contact-card textarea {
        width: 100%;
        border: 1px solid rgba(255,255,255,.14);
        background: rgba(255,255,255,.08);
        color: #ffffff;
        border-radius: 14px;
        padding: 13px 14px;
        margin-bottom: 12px;
        outline: none;
    }

    .veno-contact-card input::placeholder,
    .veno-contact-card textarea::placeholder {
        color: rgba(255,255,255,.52);
    }

    .veno-contact-card textarea {
        min-height: 110px;
        resize: vertical;
    }

    .veno-footer {
        max-width: 1180px;
        margin: 0 auto;
        padding: 28px;
        border-radius: 24px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.10);
        color: rgba(255,255,255,.70);
        display: grid;
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 20px;
    }

    .veno-footer strong {
        color: #ffffff;
    }

    .veno-footer a {
        color: rgba(255,255,255,.70);
        display: block;
        margin-top: 8px;
        text-decoration: none;
    }

    .veno-copyright {
        max-width: 1180px;
        margin: 18px auto 0;
        padding: 18px 22px;
        border-radius: 18px;
        background: rgba(255,255,255,.045);
        border: 1px solid rgba(255,255,255,.08);
        color: rgba(255,255,255,.58);
        display: flex;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
        font-size: 13px;
    }

    .veno-whatsapp {
        position: fixed;
        right: 22px;
        bottom: 22px;
        z-index: 9999;
        background: #25D366;
        color: #ffffff !important;
        padding: 14px 18px;
        border-radius: 999px;
        font-weight: 900;
        text-decoration: none;
        box-shadow: 0 20px 50px rgba(37,211,102,.35);
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .veno-whatsapp i {
        font-size: 19px;
    }

    @media(max-width: 991px) {
        .veno-hero,
        .veno-contact-grid {
            grid-template-columns: 1fr;
        }

        .veno-grid,
        .veno-feature-list,
        .veno-flow-modern,
        .veno-integrations-icons,
        .veno-pricing-modern {
            grid-template-columns: repeat(2, 1fr);
        }

        .veno-flow-modern:before {
            display: none;
        }

        .veno-hero h1 {
            font-size: 42px;
        }

        .veno-footer {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media(max-width: 768px) {
        .veno-page {
            padding: 0 12px 40px;
        }

        .veno-nav {
            top: 8px;
            margin-bottom: 24px;
            flex-wrap: wrap;
            padding: 12px 14px;
            border-radius: 18px;
        }

        .veno-nav-brand img {
            height: 46px;
        }

        .veno-menu-toggle {
            display: flex;
        }

        .veno-nav-links {
            display: none;
            width: 100%;
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            padding-top: 16px;
        }

        .veno-nav-links.active {
            display: flex;
        }

        .veno-nav-links a {
            display: block;
            text-align: center;
            padding: 12px;
            border-radius: 12px;
            background: rgba(255,255,255,.08);
        }

        .veno-nav-links .veno-btn-primary {
            width: 100%;
            text-align: center;
        }

        .veno-hero {
            padding: 38px 22px;
            border-radius: 26px;
        }

        .veno-hero h1 {
            font-size: 34px;
        }

        .veno-hero p {
            font-size: 15px;
        }

        .veno-actions {
            flex-direction: column;
        }

        .veno-actions a {
            width: 100%;
            text-align: center;
        }

        .veno-grid,
        .veno-feature-list,
        .veno-flow-modern,
        .veno-integrations-icons,
        .veno-pricing-modern,
        .veno-footer {
            grid-template-columns: 1fr;
        }

        .veno-pricing-card.featured {
            transform: none;
        }

        .veno-pricing-card.featured:hover {
            transform: translateY(-6px);
        }

        .veno-section-title h2 {
            font-size: 30px;
        }

        .veno-copyright {
            text-align: center;
            justify-content: center;
        }

        .veno-whatsapp {
            right: 14px;
            bottom: 14px;
            padding: 12px 14px;
            font-size: 13px;
        }
    }
    .veno-client-logos {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.veno-client-logo {
    min-height: 105px;
    border-radius: 22px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    text-decoration: none;
    transition: .25s ease;
}

.veno-client-logo:hover {
    transform: translateY(-5px);
    border-color: rgba(255,179,0,.45);
}

.veno-client-logo img {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
}

@media(max-width: 991px) {
    .veno-client-logos { grid-template-columns: repeat(3, 1fr); }
}

@media(max-width: 768px) {
    .veno-client-logos { grid-template-columns: repeat(2, 1fr); }
}
</style>

<div class="veno-page">

    <div class="veno-nav">
        <a href="{{ url('/') }}" class="veno-nav-brand">
            <img src="{{ $siteLogo }}" alt="{{ $frontpage->hero_title }}">
        </a>

        <button type="button" class="veno-menu-toggle" onclick="toggleVenoMenu()" aria-controls="venoMobileMenu" aria-expanded="false">
            <span></span> Menu
        </button>

        <div class="veno-nav-links" id="venoMobileMenu">
            <a href="{{ url('/') }}">Home</a>
            <a href="#features">Features</a>
            <a href="#workflow">Workflow</a>
            <a href="#pricing">Pricing</a>
            <a href="#integrations">Integrations</a>
            <a href="#contact">Contact</a>

            @if(config('constants.SHOW_REPAIR_STATUS_LOGIN_SCREEN') && Route::has('repair-status'))
                <a href="{{ action([\Modules\Repair\Http\Controllers\CustomerRepairStatusController::class, 'index']) }}">
                    Repair Status
                </a>
            @endif

            <a href="{{ route('login') }}">Sign In</a>

            @if (config('constants.allow_registration'))
                <a href="{{ route('business.getRegister') }}" class="veno-btn-primary">Register</a>
            @endif
        </div>
    </div>

    @php
    $slides = [];

    if (class_exists('\App\FrontpageSlide')) {
        \App\FrontpageSlide::seedDefaults();

        $slides = \App\FrontpageSlide::where('is_active', 1)
            ->orderBy('sort_order')
            ->get();
    }
@endphp

@if(isset($slides) && count($slides)) <div class="veno-slider">
@foreach($slides as $slide) <section class="veno-hero"> <div> <span class="veno-badge">{{ $slide->badge ?: $frontpage->hero_badge }}</span>

                <h1>{{ $slide->title ?: $frontpage->hero_title }}</h1>

                <p>{{ $slide->subtitle ?: $frontpage->hero_subtitle }}</p>

                <div class="veno-actions">
                    <a href="#demo-request" class="veno-btn-primary">
                        Request Demo
                    </a>

                    <a href="https://wa.me/{{ $frontWhatsapp }}" target="_blank" class="veno-btn-secondary">
                        WhatsApp
                    </a>

                    <a href="{{ route('login') }}" class="veno-btn-secondary">
                        Sign In
                    </a>
                </div>
            </div>

            <div class="veno-hero-visual">
                <img src="{{ asset($slide->image ?: 'uploads/img/veno-login-banner.png') }}"
                     alt="{{ $slide->title }}">
            </div>
        </section>
    @endforeach
</div>

@else
<section class="veno-hero">
    <div>
        <span class="veno-badge">{{ $frontpage->hero_badge }}</span>

        <h1>{{ $frontpage->hero_title }}</h1>

        <p>{{ $frontpage->hero_subtitle }}</p>

        <div class="veno-actions">
            <a href="#demo-request" class="veno-btn-primary">
                Request Demo
            </a>

            <a href="https://wa.me/{{ $frontWhatsapp }}" target="_blank" class="veno-btn-secondary">
                WhatsApp
            </a>

            <a href="{{ route('login') }}" class="veno-btn-secondary">
                Sign In
            </a>
        </div>
    </div>

    <div class="veno-hero-visual">
        <img src="{{ $heroImage }}" alt="{{ $frontpage->hero_title }}">
    </div>
</section>
@endif

    <section class="veno-section" id="features">
        <div class="veno-section-title">
            <h2>Everything Retail Businesses Need</h2>
            <p>VENO Retail Cloud System gives your business full control over cashier operations, inventory, branches and reporting.</p>
        </div>

        <div class="veno-grid">
            <div class="veno-card"><div class="veno-card-icon">🧾</div><h3>Fast POS Billing</h3><p>Touch-friendly cashier screen for fast sales, discounts, returns and receipts.</p></div>
            <div class="veno-card"><div class="veno-card-icon">📦</div><h3>Inventory Control</h3><p>Track stock, transfers, purchase, expiry, variants, brands and categories.</p></div>
            <div class="veno-card"><div class="veno-card-icon">🏪</div><h3>Multi Store</h3><p>Manage multiple branches with separated stock, users, reports and printers.</p></div>
            <div class="veno-card"><div class="veno-card-icon">🏢</div><h3>Multi Company</h3><p>Run multiple businesses from one system with secure permissions.</p></div>
            <div class="veno-card"><div class="veno-card-icon">📊</div><h3>Reports</h3><p>Sales, profit, tax, stock, payments, expenses and daily register reports.</p></div>
            <div class="veno-card"><div class="veno-card-icon">👥</div><h3>Customers & Suppliers</h3><p>Manage balances, payments, purchase history, sales history and ledgers.</p></div>
        </div>
    </section>

    <section class="veno-section">
        <div class="veno-section-title">
            <h2>Perfect For Many Retail Types</h2>
            <p>One system for different retail industries and store sizes.</p>
        </div>

        <div class="veno-feature-list">
            <div class="veno-feature"><strong>Supermarket / Grocery</strong><span>Barcode, quick sales, stock alerts, purchase and supplier control.</span></div>
            <div class="veno-feature"><strong>Fashion & Boutique</strong><span>Sizes, colors, variants, customer history and multi-branch selling.</span></div>
            <div class="veno-feature"><strong>Electronics Stores</strong><span>Warranty, serial items, inventory tracking and customer invoices.</span></div>
            <div class="veno-feature"><strong>General Retail</strong><span>Flexible POS, inventory, reports and cloud management for any retail business.</span></div>
        </div>
    </section>

    <section class="veno-section" id="workflow">
        <div class="veno-section-title">
            <h2>Retail Workflow Designed For Speed</h2>
            <p>A clear business flow from product setup to cashier operations, stock control and management reports.</p>
        </div>

        <div class="veno-flow-modern">
            <div class="veno-flow-step">
                <div class="veno-flow-number">01</div>
                <div class="veno-flow-icon">🏷️</div>
                <strong>Add Products</strong>
                <p>Create products with barcode, category, brand, price, tax, variants and stock quantity.</p>
            </div>

            <div class="veno-flow-step">
                <div class="veno-flow-number">02</div>
                <div class="veno-flow-icon">🧾</div>
                <strong>Sell From POS</strong>
                <p>Cashiers sell quickly with touch screen, barcode scanner, discounts and receipt printing.</p>
            </div>

            <div class="veno-flow-step">
                <div class="veno-flow-number">03</div>
                <div class="veno-flow-icon">📦</div>
                <strong>Track Stock</strong>
                <p>Inventory updates automatically after every sale, purchase, return or branch transfer.</p>
            </div>

            <div class="veno-flow-step">
                <div class="veno-flow-number">04</div>
                <div class="veno-flow-icon">📊</div>
                <strong>Analyze Reports</strong>
                <p>Owners see sales, profit, payments, tax, expenses and branch performance instantly.</p>
            </div>
        </div>
    </section>

    <section class="veno-section">
        <div class="veno-section-title">
            <h2>Modern Retail Dashboard</h2>
            <p>Clean interface for cashiers, managers, accountants and business owners.</p>
        </div>

        <div class="veno-showcase">
            <img src="{{ $retailImage }}" alt="{{ $frontpage->hero_title }}">
        </div>
    </section>

    <section class="veno-section" id="integrations">
        <div class="veno-section-title">
            <h2>Powerful Retail Integrations</h2>
            <p>Connect your retail system with sales channels, communication tools, printers and payment services.</p>
        </div>

        <div class="veno-integrations-icons">
            @foreach(($frontpage->integrations_json ?: []) as $integration)
                <div class="veno-integration-card">
                    <div class="veno-integration-icon">{{ $integration['icon'] ?? '' }}</div>
                    <strong>{{ $integration['title'] ?? '' }}</strong>
                    <span>{{ $integration['description'] ?? '' }}</span>
                </div>
            @endforeach
        </div>
    </section>
@php
$testimonials = \App\FrontpageTestimonial::where('is_active', 1)
    ->orderBy('sort_order')
    ->get();
@endphp

@if($testimonials->count())
<section class="veno-section" id="testimonials">
    <div class="veno-section-title">
        <h2>What Our Clients Say</h2>
        <p>Trusted by businesses using VENO Cloud System.</p>
    </div>

    <div class="veno-grid">
        @foreach($testimonials as $item)
            <div class="veno-card">
                @if($item->photo)
                    <img src="{{ asset($item->photo) }}"
                         style="width:70px;height:70px;border-radius:50%;object-fit:cover;margin-bottom:15px;">
                @endif

                <h3>{{ $item->client_name }}</h3>
                <p>{{ $item->company_name }}</p>

                <div style="color:#ffb300;margin:12px 0;font-size:18px;">
                    {{ str_repeat('★', $item->rating) }}
                </div>

                <p>{{ $item->review }}</p>
            </div>
        @endforeach
    </div>
</section>
@endif
@php
$clientLogos = class_exists('\App\FrontpageClientLogo')
    ? \App\FrontpageClientLogo::where('is_active', 1)->orderBy('sort_order')->get()
    : collect();
@endphp

@if($clientLogos->count())
<section class="veno-section" id="clients">
    <div class="veno-section-title">
        <h2>Trusted By Businesses</h2>
        <p>VENO Cloud System is built for modern companies across the UAE.</p>
    </div>

    <div class="veno-client-logos">
        @foreach($clientLogos as $client)
            @if($client->website)
                <a href="{{ $client->website }}" target="_blank" class="veno-client-logo">
                    @if($client->logo)
                        <img src="{{ asset($client->logo) }}" alt="{{ $client->company_name }}">
                    @else
                        <strong>{{ $client->company_name }}</strong>
                    @endif
                </a>
            @else
                <div class="veno-client-logo">
                    @if($client->logo)
                        <img src="{{ asset($client->logo) }}" alt="{{ $client->company_name }}">
                    @else
                        <strong>{{ $client->company_name }}</strong>
                    @endif
                </div>
            @endif
        @endforeach
    </div>
</section>
@endif
    <section class="veno-section" id="pricing">
        <div class="veno-section-title">
            <h2>Modern Retail Packages</h2>
            <p>Choose the best VENO Retail package based on your store size, users and branches.</p>
        </div>

        <div class="veno-pricing-modern">
            @foreach(($frontpage->pricing_json ?: []) as $index => $price)
                <div class="veno-pricing-card {{ $index == 1 ? 'featured' : '' }}">
                    @if($index == 1)
                        <span class="veno-plan-badge">Most Popular</span>
                    @endif

                    <h3>{{ $price['name'] ?? '' }}</h3>
                    <div class="veno-price-tag">{{ $price['label'] ?? '' }}</div>
                    <p class="veno-price-desc">{{ $price['description'] ?? '' }}</p>

                    <ul>
                        @foreach(($price['features'] ?? []) as $feature)
                            <li>{{ $feature }}</li>
                        @endforeach
                    </ul>

                    <a href="https://wa.me/{{ $frontWhatsapp }}" class="{{ $index == 1 ? 'veno-btn-primary' : 'veno-btn-secondary' }}" style="width:100%;text-align:center;">
                        {{ $index == 1 ? 'Request Demo' : 'Contact Sales' }}
                    </a>
                </div>
            @endforeach
        </div>
    </section>

    <section class="veno-section" id="demo-request">
        <div class="veno-section-title">
            <h2>Request a Retail Demo</h2>
            <p>Tell us about your retail business and our team will contact you soon.</p>
        </div>

        <div class="veno-contact-grid">
            <div class="veno-contact-card">
                <strong>Contact VENO</strong>
                <p style="margin-top:12px;">Premium Cloud ERP & POS Platform for UAE retail businesses.</p>
                <p style="margin-top:18px;">Phone: {{ $frontpage->phone }}</p>
                <p>Email: {{ $frontpage->email }}</p>
                <p>Website: {{ $frontpage->website }}</p>

                <div class="veno-actions">
                    <a href="https://wa.me/{{ $frontWhatsapp }}" class="veno-btn-primary">WhatsApp</a>
                    <a href="{{ route('login') }}" class="veno-btn-secondary">Sign In</a>
                </div>
            </div>

            <div class="veno-contact-card">
                @if ($errors->any())
    <div style="
        background:#dc3545;
        color:white;
        padding:15px;
        border-radius:12px;
        margin-bottom:20px;
    ">
        <strong>Please fix the following errors:</strong>
        <ul style="margin-top:10px;">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
                @if(session('success_message'))
    <div style="
        background:#25D366;
        color:white;
        padding:15px;
        border-radius:12px;
        margin-bottom:20px;
        font-weight:bold;
        text-align:center;
    ">
        {{ session('success_message') }}
    </div>
@endif
    <form method="POST" action="{{ route('frontpage-leads.public.store') }}">
        @csrf

        <input type="hidden" name="source" value="retail_page">
        <input type="hidden" name="requested_product" value="VENO Retail Cloud System">

        <input type="text" name="name" placeholder="Your Name" required>
        <input type="text" name="company_name" placeholder="Company Name">
        <input type="text" name="phone" placeholder="Phone Number">
        <input type="email" name="email" placeholder="Email Address">
        <textarea name="message" placeholder="Tell us about your retail business"></textarea>

        <button type="submit" class="veno-btn-primary" style="width:100%;text-align:center;">
            Submit Request
        </button>
    </form>
</div>
        </div>
    </section>

    <footer class="veno-footer">
        <div>
            <strong>VENO Retail Cloud System</strong>
            <a>Premium Cloud ERP & POS Platform</a>
            <a>{{ $frontpage->location }}</a>
        </div>

        <div>
            <strong>Quick Links</strong>
            <a href="{{ url('/') }}">Home</a>
            <a href="#features">Retail Features</a>
            <a href="#contact">Request Demo</a>
        </div>

        <div>
            <strong>Contact</strong>
            <a>{{ $frontpage->phone }}</a>
            <a>{{ $frontpage->email }}</a>
            <a>{{ $frontpage->website }}</a>
        </div>
    </footer>

    <div class="veno-copyright">
        <div>© {{ date('Y') }} VENO Cloud System. All rights reserved.</div>
        <div>Powered by Alnuqta Al Zakeya Information Technology & Cash Tech F.Z.E</div>
    </div>

</div>

<a href="https://wa.me/{{ $frontWhatsapp }}" class="veno-whatsapp">
    <i class="fab fa-whatsapp"></i>
    WhatsApp
</a>

<script>
    function toggleVenoMenu() {
        var menu = document.getElementById('venoMobileMenu');
        var button = document.querySelector('.veno-menu-toggle');

        if (menu) {
            menu.classList.toggle('active');
        }

        if (button) {
            var isOpen = menu && menu.classList.contains('active');
            button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        var links = document.querySelectorAll('#venoMobileMenu a');

        links.forEach(function (link) {
            link.addEventListener('click', function () {
                var menu = document.getElementById('venoMobileMenu');
                var button = document.querySelector('.veno-menu-toggle');

                if (window.innerWidth <= 768 && menu) {
                    menu.classList.remove('active');
                }

                if (button) {
                    button.setAttribute('aria-expanded', 'false');
                }
            });
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var slides = document.querySelectorAll('.veno-slide');
        var current = 0;

        if (slides.length > 1) {
            setInterval(function () {
                slides[current].classList.remove('active');
                current = (current + 1) % slides.length;
                slides[current].classList.add('active');
            }, 5000);
        }
    });
</script>
@endsection