@extends('layouts.app')

@section('title', 'AI Menu for Restaurants | SmartDevelop')

@push('styles')
<style>
    :root {
        --am-ink: #0d120e;
        --am-ink-2: #172019;
        --am-cream: #f5f1e8;
        --am-paper: #fffdf8;
        --am-green: #789267;
        --am-green-dark: #40543b;
        --am-gold: #dda854;
        --am-text: #172019;
        --am-muted: #687267;
        --am-line: rgba(19, 29, 21, .11);
        --am-shadow: 0 30px 80px rgba(11, 18, 12, .13);
    }

    .am-page,
    .am-page * { box-sizing: border-box; }

    .am-page {
        margin-top: -38px;
        overflow: hidden;
        color: var(--am-text);
        background: var(--am-cream);
        font-family: inherit;
    }

    .am-container {
        width: min(1200px, calc(100% - 40px));
        margin-inline: auto;
    }

    .am-section { padding: 110px 0; }
    .am-section--paper { background: var(--am-paper); }
    .am-section--dark { color: #fff; background: var(--am-ink); }

    .am-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--am-green-dark);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .15em;
        text-transform: uppercase;
    }

    .am-eyebrow::before {
        content: '';
        width: 30px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
    }

    .am-section--dark .am-eyebrow { color: var(--am-gold); }

    .am-heading { max-width: 780px; margin-bottom: 48px; }
    .am-heading--center { margin-inline: auto; text-align: center; }
    .am-heading--center .am-eyebrow::after {
        content: '';
        width: 30px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
    }

    .am-heading h2 {
        max-width: 900px;
        margin: 15px 0 17px;
        font-size: clamp(42px, 5.8vw, 72px);
        line-height: .99;
        letter-spacing: -.06em;
    }

    .am-heading p {
        max-width: 700px;
        margin: 0;
        color: var(--am-muted);
        font-size: 17px;
        line-height: 1.75;
    }

    .am-heading--center p { margin-inline: auto; }
    .am-section--dark .am-heading p { color: rgba(255,255,255,.67); }

    /* Language */
    .am-language {
        position: fixed;
        right: 18px;
        bottom: 18px;
        z-index: 80;
        display: flex;
        gap: 4px;
        padding: 5px;
        border: 1px solid var(--am-line);
        border-radius: 999px;
        background: rgba(255,255,255,.95);
        box-shadow: 0 15px 45px rgba(11,18,12,.16);
        backdrop-filter: blur(16px);
    }

    .am-language button {
        min-width: 45px;
        padding: 9px 12px;
        border: 0;
        border-radius: 999px;
        color: #667064;
        background: transparent;
        font-size: 11px;
        font-weight: 900;
        cursor: pointer;
    }

    .am-language button.active { color: #fff; background: var(--am-ink); }

    /* Buttons */
    .am-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

    .am-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 56px;
        padding: 14px 22px;
        border: 1px solid transparent;
        border-radius: 16px;
        font-weight: 900;
        text-decoration: none;
        transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
    }

    .am-btn:hover { transform: translateY(-3px); }
    .am-btn--light { color: var(--am-ink); background: #fff; box-shadow: 0 18px 45px rgba(0,0,0,.22); }
    .am-btn--primary { color: #fff; background: var(--am-green-dark); box-shadow: 0 18px 45px rgba(55,78,49,.25); }
    .am-btn--outline { color: #fff; border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.08); backdrop-filter: blur(15px); }
    .am-btn--gold { color: var(--am-ink); background: var(--am-gold); box-shadow: 0 18px 45px rgba(221,168,84,.22); }
    .am-btn--whatsapp { color: #fff; background: #187b45; box-shadow: 0 18px 45px rgba(24,123,69,.24); }
    .am-btn--email { color: var(--am-ink); border-color: var(--am-line); background: #fff; }

    .am-contact-links {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        margin-top: 20px;
    }

    .am-contact-links a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: rgba(255,255,255,.72);
        font-size: 12px;
        font-weight: 850;
        text-decoration: none;
    }

    .am-contact-links a:hover { color: #fff; }

    .am-contact-float {
        position: fixed;
        left: 18px;
        bottom: 18px;
        z-index: 79;
        display: flex;
        gap: 8px;
    }

    .am-contact-float a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 10px 14px;
        border: 1px solid var(--am-line);
        border-radius: 999px;
        color: var(--am-text);
        background: rgba(255,255,255,.96);
        box-shadow: 0 14px 40px rgba(11,18,12,.16);
        font-size: 11px;
        font-weight: 900;
        text-decoration: none;
        backdrop-filter: blur(16px);
    }

    .am-contact-float a:first-child { color: #fff; border-color: #187b45; background: #187b45; }

    /* Hero */
    .am-hero {
        position: relative;
        min-height: 820px;
        display: grid;
        align-items: center;
        overflow: hidden;
        color: #fff;
        border-radius: 0 0 52px 52px;
        background:
            linear-gradient(90deg, rgba(5,9,6,.97) 0%, rgba(5,9,6,.83) 48%, rgba(5,9,6,.28) 100%),
            url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=2200&q=88') center/cover;
    }

    .am-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 78% 18%, rgba(255,255,255,.16), transparent 26%),
            linear-gradient(180deg, transparent 60%, rgba(0,0,0,.28));
    }

    .am-hero-grid {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1.03fr .97fr;
        gap: 64px;
        align-items: center;
        padding: 0px 0 142px;
    }

    .am-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 15px;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 999px;
        background: rgba(255,255,255,.09);
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .13em;
        text-transform: uppercase;
        backdrop-filter: blur(15px);
    }

    .am-badge-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #9fd383;
        box-shadow: 0 0 0 6px rgba(159,211,131,.13);
    }

    .am-hero-copy h1 {
        max-width: 720px;
        margin: 24px 0 22px;
        font-size: clamp(58px, 7.7vw, 98px);
        line-height: .91;
        letter-spacing: -.075em;
    }

    .am-hero-copy > p {
        max-width: 650px;
        margin: 0;
        color: rgba(255,255,255,.76);
        font-size: 18px;
        line-height: 1.75;
    }

    .am-trust {
        display: flex;
        flex-wrap: wrap;
        gap: 17px;
        margin-top: 27px;
        color: rgba(255,255,255,.68);
        font-size: 12px;
        font-weight: 800;
    }

    .am-trust span::first-letter { color: #a8d58f; }
    .am-login-link { display: inline-block; margin-top: 22px; color: rgba(255,255,255,.62); font-size: 12px; font-weight: 800; }
    .am-login-link:hover { color: #fff; }

    /* Demo window */
    .am-demo-wrap { position: relative; }
    .am-demo-glow { position: absolute; inset: 12% -6% -6% 8%; border-radius: 50%; background: rgba(121,153,103,.28); filter: blur(75px); }

    .am-demo-shell {
        position: relative;
        padding: 16px;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 34px;
        background: rgba(255,255,255,.11);
        box-shadow: 0 42px 110px rgba(0,0,0,.42);
        backdrop-filter: blur(22px);
        animation: amFloat 6s ease-in-out infinite;
    }

    .am-demo-window { overflow: hidden; border-radius: 25px; color: var(--am-ink); background: #f4f1e9; }
    .am-demo-cover {
        position: relative;
        height: 215px;
        background:
            linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.75)),
            url('https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&w=1200&q=86') center/cover;
    }

    .am-demo-restaurant { position: absolute; left: 19px; right: 19px; bottom: 17px; color: #fff; }
    .am-live { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; }
    .am-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #91d177; animation: amPulse 1.8s infinite; }
    .am-demo-restaurant h3 { margin: 5px 0 2px; font-size: 27px; letter-spacing: -.04em; }
    .am-demo-restaurant small { color: rgba(255,255,255,.7); }
    .am-demo-body { padding: 15px; }

    .am-ai-card { padding: 15px; border-radius: 19px; background: #fff; box-shadow: 0 12px 35px rgba(20,30,20,.08); }
    .am-ai-head { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; margin-bottom: 12px; }
    .am-ai-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #78956a, #40563a); font-size: 11px; font-weight: 900; }
    .am-ai-head strong { display: block; font-size: 12px; }
    .am-ai-head small { display: block; margin-top: 2px; color: #879084; font-size: 9px; }
    .am-online { padding: 6px 9px; border-radius: 999px; color: #397531; background: #edf6e9; font-size: 8px; font-weight: 900; }

    .am-search-box { min-height: 50px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--am-line); border-radius: 14px; background: #fafaf7; }
    .am-search-icon { margin-right: 9px; color: var(--am-green); font-weight: 900; }
    .am-typing { min-height: 18px; color: #515b50; font-size: 11px; font-weight: 650; }
    .am-cursor { width: 2px; height: 17px; margin-left: 2px; background: var(--am-green); animation: amBlink .8s infinite; }
    .am-filters { min-height: 0; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
    .am-filter { padding: 6px 8px; border-radius: 999px; color: #46603d; background: #edf4e9; font-size: 8px; font-weight: 850; animation: amFilter .35s both; }

    .am-searching { display: none; margin-top: 10px; padding: 11px; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #121812, #253123); }
    .am-searching.active { display: block; animation: amFade .3s ease; }
    .am-searching-line { display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 800; }
    .am-mini-ai { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: var(--am-ink); background: #fff; font-size: 8px; font-weight: 900; }
    .am-progress { height: 4px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.13); }
    .am-progress span { display: block; width: 45%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #759866, #b5dc9f); animation: amProgress 1.35s infinite; }

    .am-results { display: none; margin-top: 10px; }
    .am-results.active { display: block; animation: amFade .35s ease; }
    .am-results-title { display: flex; justify-content: space-between; margin-bottom: 7px; color: #7f897c; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
    .am-results-title span { color: var(--am-green); }
    .am-result { display: grid; grid-template-columns: 54px 1fr; gap: 9px; margin-top: 7px; padding: 8px; border: 1px solid rgba(16,22,16,.07); border-radius: 13px; background: #fff; box-shadow: 0 7px 20px rgba(16,22,16,.05); opacity: 0; transform: translateY(10px) scale(.98); }
    .am-result.show { animation: amResult .45s forwards; }
    .am-result-photo { width: 54px; height: 54px; border-radius: 11px; background-position: center; background-size: cover; }
    .am-result-top { display: flex; justify-content: space-between; gap: 8px; }
    .am-result-top strong { font-size: 9px; }
    .am-match { flex-shrink: 0; padding: 4px 6px; border-radius: 999px; color: #397531; background: #edf6e9; font-size: 7px; font-weight: 900; }
    .am-result-info small { display: block; margin: 5px 0; color: #858e82; font-size: 8px; }
    .am-result-info b { font-size: 9px; }
    .am-success { margin-top: 8px; padding: 8px; border-radius: 10px; color: #397531; background: #edf6e9; text-align: center; font-size: 8px; font-weight: 900; }

    /* Proof strip */
    .am-proof { position: relative; z-index: 4; margin-top: -46px; }
    .am-proof-inner { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--am-line); border-radius: 25px; background: var(--am-paper); box-shadow: var(--am-shadow); }
    .am-proof-item { padding: 27px 25px; border-right: 1px solid var(--am-line); }
    .am-proof-item:last-child { border-right: 0; }
    .am-proof-item strong { display: block; margin-bottom: 5px; font-size: 16px; }
    .am-proof-item span { color: var(--am-muted); font-size: 12px; line-height: 1.55; }

    /* Problem and solution */
    .am-problem-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 52px; align-items: center; }
    .am-problem-photo { position: relative; min-height: 620px; overflow: hidden; border-radius: 34px; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.8)), url('https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&w=1500&q=86') center/cover; box-shadow: var(--am-shadow); }
    .am-photo-note { position: absolute; left: 24px; right: 24px; bottom: 24px; padding: 22px; border: 1px solid rgba(255,255,255,.18); border-radius: 22px; color: #fff; background: rgba(8,13,9,.65); backdrop-filter: blur(16px); }
    .am-photo-note strong { display: block; margin-bottom: 7px; font-size: 23px; }
    .am-photo-note span { color: rgba(255,255,255,.7); line-height: 1.6; }

    .am-benefits { display: grid; gap: 14px; }
    .am-benefit { display: grid; grid-template-columns: 54px 1fr; gap: 16px; padding: 19px; border: 1px solid var(--am-line); border-radius: 21px; background: rgba(255,255,255,.78); transition: transform .22s ease, box-shadow .22s ease; }
    .am-benefit:hover { transform: translateX(7px); box-shadow: 0 18px 45px rgba(20,30,20,.08); }
    .am-benefit-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; color: #fff; background: linear-gradient(145deg, var(--am-green), var(--am-green-dark)); font-weight: 900; }
    .am-benefit h3 { margin: 2px 0 6px; font-size: 19px; }
    .am-benefit p { margin: 0; color: var(--am-muted); font-size: 13px; line-height: 1.65; }

    /* Feature bento */
    .am-features { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
    .am-feature { position: relative; min-height: 270px; overflow: hidden; padding: 27px; border: 1px solid var(--am-line); border-radius: 27px; background: #fff; box-shadow: 0 15px 40px rgba(20,30,20,.05); }
    .am-feature::after { content: ''; position: absolute; right: -50px; bottom: -60px; width: 155px; height: 155px; border-radius: 50%; background: rgba(111,143,91,.08); }
    .am-feature--wide { grid-column: span 7; }
    .am-feature--narrow { grid-column: span 5; }
    .am-feature--third { grid-column: span 4; }
    .am-feature-icon { width: 57px; height: 57px; display: grid; place-items: center; margin: 25px 0 23px; border-radius: 18px; color: #fff; background: linear-gradient(145deg, var(--am-green), var(--am-green-dark)); font-size: 18px; font-weight: 900; }
    .am-feature h3 { max-width: 500px; margin: 0 0 10px; font-size: 23px; }
    .am-feature p { max-width: 520px; margin: 0; color: var(--am-muted); font-size: 14px; line-height: 1.7; }
    .am-feature--accent { color: #fff; border-color: transparent; background: linear-gradient(145deg, #111711, #2c3b29); }
    .am-feature--accent p { color: rgba(255,255,255,.66); }
    .am-feature--accent .am-feature-icon { color: var(--am-ink); background: var(--am-gold); }

    /* Steps */
    .am-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
    .am-step { position: relative; padding: 25px 20px; text-align: center; }
    .am-step:not(:last-child)::after { content: '→'; position: absolute; top: 52px; right: -15px; color: var(--am-green); font-size: 24px; font-weight: 900; }
    .am-step-number { width: 74px; height: 74px; display: grid; place-items: center; margin: 0 auto 22px; border: 8px solid var(--am-cream); border-radius: 50%; color: #fff; background: var(--am-ink); font-weight: 900; box-shadow: 0 15px 35px rgba(17,22,17,.17); }
    .am-step h3 { margin: 0 0 9px; font-size: 20px; }
    .am-step p { margin: 0; color: var(--am-muted); font-size: 13px; line-height: 1.65; }

    /* Audience */
    .am-audience { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
    .am-audience-card { min-height: 250px; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; border: 1px solid rgba(255,255,255,.11); border-radius: 25px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
    .am-audience-card span { color: var(--am-gold); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
    .am-audience-card h3 { margin: 10px 0 0; font-size: 24px; }

    /* CTA */
    .am-cta-wrap { padding: 0 0 17px; background: var(--am-paper); }
    .am-cta { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; overflow: hidden; padding: 62px; border-radius: 38px; color: #fff; background: radial-gradient(circle at 84% 15%, rgba(255,255,255,.15), transparent 27%), linear-gradient(145deg, #101610, #293925); box-shadow: var(--am-shadow); }
    .am-cta::after { content: 'AI'; position: absolute; right: 28px; bottom: -52px; color: rgba(255,255,255,.035); font-size: 240px; font-weight: 950; line-height: 1; }
    .am-cta > * { position: relative; z-index: 2; }
    .am-cta h2 { max-width: 760px; margin: 0 0 15px; font-size: clamp(42px, 5vw, 66px); line-height: .98; letter-spacing: -.06em; }
    .am-cta p { max-width: 700px; margin: 0; color: rgba(255,255,255,.68); font-size: 16px; line-height: 1.7; }
    .am-cta-actions { display: grid; gap: 12px; min-width: 240px; }
    .am-cta-login { color: rgba(255,255,255,.65); text-align: center; font-size: 12px; font-weight: 800; }

    .am-contact-section { padding: 0px 0; background: var(--am-paper); }
    .am-contact-panel { display: grid; grid-template-columns: 1fr auto; gap: 38px; align-items: center; padding: 38px 0; border-top: 1px solid var(--am-line); border-bottom: 1px solid var(--am-line); }
    .am-contact-panel h2 { margin: 0 0 10px; font-size: clamp(34px, 4vw, 52px); letter-spacing: -.05em; }
    .am-contact-panel p { margin: 0; color: var(--am-muted); line-height: 1.7; }
    .am-contact-actions { display: flex; flex-wrap: wrap; gap: 10px; }

    /* Animation */
    .am-reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
    .am-reveal.visible { opacity: 1; transform: none; }
    @keyframes amFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
    @keyframes amPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(143,212,119,.25); } 50% { box-shadow: 0 0 0 7px rgba(143,212,119,0); } }
    @keyframes amBlink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
    @keyframes amFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
    @keyframes amFilter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
    @keyframes amResult { to { opacity: 1; transform: none; } }
    @keyframes amProgress { from { transform: translateX(-120%); } to { transform: translateX(270%); } }

    @media (max-width: 1050px) {
        .am-hero-grid, .am-problem-grid { grid-template-columns: 1fr; }
        .am-demo-wrap { width: min(680px, 100%); margin-inline: auto; }
        .am-proof-inner { grid-template-columns: repeat(2, 1fr); }
        .am-proof-item:nth-child(2) { border-right: 0; }
        .am-proof-item:nth-child(-n+2) { border-bottom: 1px solid var(--am-line); }
        .am-feature--wide, .am-feature--narrow, .am-feature--third { grid-column: span 6; }
        .am-steps, .am-audience { grid-template-columns: repeat(2, 1fr); }
        .am-step:nth-child(2)::after { display: none; }
    }

    @media (max-width: 720px) {
        .am-page { margin-top: -28px; }
        .am-container { width: calc(100% - 24px); }
        .am-section { padding: 78px 0; }
        .am-hero { min-height: auto; border-radius: 0 0 34px 34px; }
        .am-hero-grid { gap: 48px; padding: 34px 0 110px; }
        .am-hero-copy h1 { font-size: clamp(50px, 16vw, 68px); }
        .am-actions .am-btn { width: 100%; }
        .am-heading h2 { font-size: 44px; }
        .am-proof { margin-top: -35px; }
        .am-proof-inner { grid-template-columns: 1fr; }
        .am-proof-item { border-right: 0; border-bottom: 1px solid var(--am-line); }
        .am-proof-item:last-child { border-bottom: 0; }
        .am-problem-photo { min-height: 430px; }
        .am-features { grid-template-columns: 1fr; }
        .am-feature--wide, .am-feature--narrow, .am-feature--third { grid-column: auto; }
        .am-steps, .am-audience { grid-template-columns: 1fr; }
        .am-step::after { display: none !important; }
        .am-audience-card { min-height: 190px; }
        .am-cta { grid-template-columns: 1fr; padding: 38px 24px; }
        .am-contact-panel { grid-template-columns: 1fr; }
        .am-contact-actions .am-btn { width: 100%; }
        .am-cta-actions { min-width: 0; }
        .am-cta-actions .am-btn { width: 100%; }
        .am-language { right: 12px; bottom: 12px; }
        .am-contact-float { left: 12px; bottom: 12px; }
        .am-contact-float a { width: 44px; padding: 10px; font-size: 0; }
        .am-contact-float a span { font-size: 16px; }
    }

    @media (prefers-reduced-motion: reduce) {
        .am-demo-shell, .am-live-dot, .am-cursor, .am-progress span { animation: none !important; }
        .am-reveal { opacity: 1; transform: none; transition: none; }
    }
</style>
@endpush

@section('content')
<main class="am-page">
    <div class="am-language" aria-label="Language selector">
        <button type="button" class="active" data-am-lang="en" aria-pressed="true">EN</button>
        <button type="button" data-am-lang="fr" aria-pressed="false">FR</button>
    </div>

    <div class="am-contact-float" aria-label="Contact SmartDevelop">
        <a href="https://wa.me/message/M3DSGPPQRYTNL1" target="_blank" rel="noopener noreferrer" aria-label="Chat with SmartDevelop on WhatsApp"><span>WA</span> <b data-am-t="whatsappShort">WhatsApp</b></a>
        <a href="mailto:info@smartdevelop.online?subject=Question%20about%20AI%20Menu" aria-label="Email SmartDevelop"><span>✉</span> <b data-am-t="emailShort">Email</b></a>
    </div>

    <section class="am-hero">
        <div class="am-container am-hero-grid">
            <div class="am-hero-copy">
                <div class="am-badge">
                    <span class="am-badge-dot"></span>
                    <span data-am-t="heroBadge">AI-powered QR menu for modern restaurants</span>
                </div>

                <h1 data-am-t="heroTitle">Help every guest find the right dish.</h1>
                <p data-am-t="heroText">Give customers a beautiful bilingual menu that understands natural requests, recommends relevant dishes and opens instantly from a QR code.</p>

                <div class="am-actions">
                    <a class="am-btn am-btn--light" href="{{ route('login') }}" data-am-t="bookDemo">Book a Free Demo</a>
                    <a class="am-btn am-btn--outline" href="#am-demo" data-am-t="seeExperience">See the Experience</a>
                </div>

                <div class="am-trust">
                    <span>✓ <span data-am-t="trust1">No app download</span></span>
                    <span>✓ <span data-am-t="trust2">Mobile and tablet ready</span></span>
                    <span>✓ <span data-am-t="trust3">English and French</span></span>
                </div>

                <div class="am-contact-links">
                    <a href="https://wa.me/message/M3DSGPPQRYTNL1" target="_blank" rel="noopener noreferrer">● <span data-am-t="questionWhatsApp">Questions? Chat on WhatsApp</span></a>
                    <a href="mailto:info@smartdevelop.online?subject=Question%20about%20AI%20Menu">✉ <span>info@smartdevelop.online</span></a>
                </div>

                <a class="am-login-link" href="{{ route('login') }}" data-am-t="ownerLogin">Already a customer? Restaurant login →</a>
            </div>

            <div class="am-demo-wrap" id="am-demo">
                <div class="am-demo-glow"></div>
                <div class="am-demo-shell">
                    <div class="am-demo-window">
                        <div class="am-demo-cover">
                            <div class="am-demo-restaurant">
                                <div class="am-live"><span class="am-live-dot"></span><span data-am-t="liveMenu">Live customer menu</span></div>
                                <h3>Maison Verde</h3>
                                <small data-am-t="openToday">Montréal · Open today</small>
                            </div>
                        </div>

                        <div class="am-demo-body">
                            <div class="am-ai-card">
                                <div class="am-ai-head">
                                    <span class="am-ai-icon">AI</span>
                                    <div>
                                        <strong data-am-t="assistant">Smart Menu Assistant</strong>
                                        <small data-am-t="intelligentSearch">Intelligent menu search</small>
                                    </div>
                                    <span class="am-online" data-am-t="online">● Online</span>
                                </div>

                                <div class="am-search-box">
                                    <span class="am-search-icon">✦</span>
                                    <div id="amTypingText" class="am-typing"></div>
                                    <span class="am-cursor"></span>
                                </div>

                                <div id="amFilters" class="am-filters"></div>

                                <div id="amSearching" class="am-searching">
                                    <div class="am-searching-line">
                                        <span class="am-mini-ai">AI</span>
                                        <span data-am-t="analyzing">Analyzing the menu...</span>
                                    </div>
                                    <div class="am-progress"><span></span></div>
                                </div>

                                <div id="amResults" class="am-results">
                                    <div class="am-results-title"><span data-am-t="matches">BEST MATCHES</span><span data-am-t="recommendations">AI RECOMMENDATIONS</span></div>

                                    <div class="am-result">
                                        <div class="am-result-photo" style="background-image:url('https://images.unsplash.com/photo-1546793665-c74683f339c1?auto=format&fit=crop&w=500&q=82')"></div>
                                        <div class="am-result-info">
                                            <div class="am-result-top"><strong>Salmon Garden Salad</strong><span class="am-match">96%</span></div>
                                            <small>473 kcal · 32g protein</small>
                                            <b>CAD 19.50</b>
                                        </div>
                                    </div>

                                    <div class="am-result">
                                        <div class="am-result-photo" style="background-image:url('https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=500&q=82')"></div>
                                        <div class="am-result-info">
                                            <div class="am-result-top"><strong>Mediterranean Bowl</strong><span class="am-match">91%</span></div>
                                            <small>510 kcal · Vegetarian</small>
                                            <b>CAD 17.99</b>
                                        </div>
                                    </div>

                                    <div class="am-success" data-am-t="success">✓ Matches the customer’s preferences</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="am-proof">
        <div class="am-container am-proof-inner">
            <div class="am-proof-item"><strong data-am-t="proof1">Scan and open</strong><span data-am-t="proof1t">A QR menu with no application required.</span></div>
            <div class="am-proof-item"><strong data-am-t="proof2">Search naturally</strong><span data-am-t="proof2t">Customers describe what they want.</span></div>
            <div class="am-proof-item"><strong data-am-t="proof3">Discover faster</strong><span data-am-t="proof3t">Relevant choices appear in seconds.</span></div>
            <div class="am-proof-item"><strong data-am-t="proof4">Manage simply</strong><span data-am-t="proof4t">Control the complete menu from one dashboard.</span></div>
        </div>
    </div>

    <section class="am-section">
        <div class="am-container am-problem-grid">
            <div class="am-problem-photo am-reveal">
                <div class="am-photo-note">
                    <strong data-am-t="built">Built for real restaurant service.</strong>
                    <span data-am-t="builtText">A clearer digital experience for guests and a practical dashboard for the team.</span>
                </div>
            </div>

            <div>
                <div class="am-heading">
                    <span class="am-eyebrow" data-am-t="why">Why AI Menu</span>
                    <h2 data-am-t="clearTitle">Make the menu easier to understand—and easier to choose from.</h2>
                    <p data-am-t="clearText">Instead of scrolling through every category, customers can search by price, ingredients, nutrition or personal preference and immediately see suitable options.</p>
                </div>

                <div class="am-benefits">
                    <article class="am-benefit am-reveal"><div class="am-benefit-icon">01</div><div><h3 data-am-t="b1">Guide customer decisions</h3><p data-am-t="b1t">Help guests narrow the menu around the details that matter to them.</p></div></article>
                    <article class="am-benefit am-reveal"><div class="am-benefit-icon">02</div><div><h3 data-am-t="b2">Present every dish professionally</h3><p data-am-t="b2t">Show photos, descriptions, prices, ingredients and nutrition in one polished experience.</p></div></article>
                    <article class="am-benefit am-reveal"><div class="am-benefit-icon">03</div><div><h3 data-am-t="b3">Answer common menu questions</h3><p data-am-t="b3t">Let customers explore preferences before they need to interrupt busy staff.</p></div></article>
                    <article class="am-benefit am-reveal"><div class="am-benefit-icon">04</div><div><h3 data-am-t="b4">Understand customer interest</h3><p data-am-t="b4t">Review search activity to learn what visitors are looking for.</p></div></article>
                </div>
            </div>
        </div>
    </section>

    <section class="am-section am-section--paper">
        <div class="am-container">
            <div class="am-heading am-heading--center">
                <span class="am-eyebrow" data-am-t="features">Complete restaurant platform</span>
                <h2 data-am-t="featuresTitle">Everything your smart menu needs. Nothing your team does not.</h2>
                <p data-am-t="featuresText">Built around practical restaurant workflows and a fast customer experience.</p>
            </div>

            <div class="am-features">
                <article class="am-feature am-feature--wide am-feature--accent am-reveal"><div class="am-feature-icon">AI</div><h3 data-am-t="f1">Natural-language menu search</h3><p data-am-t="f1t">Customers can request a healthy meal, a specific budget, high protein, vegetarian choices or dishes without selected ingredients.</p></article>
                <article class="am-feature am-feature--narrow am-reveal"><div class="am-feature-icon">QR</div><h3 data-am-t="f2">QR digital menu</h3><p data-am-t="f2t">Each restaurant receives a public menu link and downloadable QR code for tables, windows and printed material.</p></article>
                <article class="am-feature am-feature--third am-reveal"><div class="am-feature-icon">N</div><h3 data-am-t="f3">Nutrition calculation</h3><p data-am-t="f3t">Calculate calories, protein, carbohydrates and fat from ingredient quantities.</p></article>
                <article class="am-feature am-feature--third am-reveal"><div class="am-feature-icon">EN</div><h3 data-am-t="f4">English and French</h3><p data-am-t="f4t">Serve Montréal and Québec customers with a bilingual interface.</p></article>
                <article class="am-feature am-feature--third am-reveal"><div class="am-feature-icon">↗</div><h3 data-am-t="f5">Restaurant branding</h3><p data-am-t="f5t">Use the restaurant logo, colors, photos and information across the public menu.</p></article>
            </div>
        </div>
    </section>

    <section class="am-section">
        <div class="am-container">
            <div class="am-heading am-heading--center">
                <span class="am-eyebrow" data-am-t="how">How it works</span>
                <h2 data-am-t="howTitle">From setup to the table in four clear steps.</h2>
            </div>

            <div class="am-steps">
                <article class="am-step am-reveal"><div class="am-step-number">1</div><h3 data-am-t="s1">Create the restaurant</h3><p data-am-t="s1t">Add the restaurant profile, logo and public information.</p></article>
                <article class="am-step am-reveal"><div class="am-step-number">2</div><h3 data-am-t="s2">Build the menu</h3><p data-am-t="s2t">Add categories, dishes, drinks, photos, prices and descriptions.</p></article>
                <article class="am-step am-reveal"><div class="am-step-number">3</div><h3 data-am-t="s3">Add menu intelligence</h3><p data-am-t="s3t">Enter ingredients and nutrition details for smarter discovery.</p></article>
                <article class="am-step am-reveal"><div class="am-step-number">4</div><h3 data-am-t="s4">Share the QR code</h3><p data-am-t="s4t">Customers scan, browse and ask the intelligent menu assistant.</p></article>
            </div>
        </div>
    </section>

    <section class="am-section am-section--dark">
        <div class="am-container">
            <div class="am-heading">
                <span class="am-eyebrow" data-am-t="madeFor">Made for Montréal food businesses</span>
                <h2 data-am-t="audienceTitle">One flexible platform for every type of menu.</h2>
                <p data-am-t="audienceText">Whether guests order at a table, a counter or for takeaway, the same intelligent experience helps them discover the right choice.</p>
            </div>

            <div class="am-audience">
                <article class="am-audience-card am-reveal"><span>01</span><h3 data-am-t="a1">Restaurants</h3></article>
                <article class="am-audience-card am-reveal"><span>02</span><h3 data-am-t="a2">Cafés</h3></article>
                <article class="am-audience-card am-reveal"><span>03</span><h3 data-am-t="a3">Bakeries</h3></article>
                <article class="am-audience-card am-reveal"><span>04</span><h3 data-am-t="a4">Food counters</h3></article>
            </div>
        </div>
    </section>

    <section class="am-contact-section">
        <div class="am-container">
            <div class="am-contact-panel am-reveal">
                <div>
                    <h2 data-am-t="questionsTitle">Questions before your demonstration?</h2>
                    <p data-am-t="questionsText">Speak directly with SmartDevelop on WhatsApp or send us an email. We will help you understand how AI Menu can work for your restaurant.</p>
                </div>
                <div class="am-contact-actions">
                    <a class="am-btn am-btn--whatsapp" href="https://wa.me/message/M3DSGPPQRYTNL1" target="_blank" rel="noopener noreferrer" data-am-t="chatWhatsApp">Chat on WhatsApp</a>
                    <a class="am-btn am-btn--email" href="mailto:info@smartdevelop.online?subject=Question%20about%20AI%20Menu" data-am-t="sendEmail">Send an Email</a>
                </div>
            </div>
        </div>
    </section>

    <div class="am-cta-wrap">
        <div class="am-container">
            <section class="am-cta am-reveal">
                <div>
                    <h2 data-am-t="ready">See your own restaurant menu become intelligent.</h2>
                    <p data-am-t="readyText">Book a free demonstration. We will show you how the experience can look with your restaurant, your branding and your menu.</p>
                </div>
                <div class="am-cta-actions">
                    <a class="am-btn am-btn--gold" href="{{ route('login') }}" data-am-t="bookDemo">Book a Free Demo</a>
                    <a class="am-btn am-btn--whatsapp" href="https://wa.me/message/M3DSGPPQRYTNL1" target="_blank" rel="noopener noreferrer" data-am-t="chatWhatsApp">Chat on WhatsApp</a>
                    <a class="am-cta-login" href="{{ route('register') }}" data-am-t="createAccount">Or create a restaurant account</a>
                </div>
            </section>
        </div>
    </div>
</main>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const copy = {
        en: {
            heroBadge: 'AI-powered QR menu for modern restaurants',
            heroTitle: 'Help every guest find the right dish.',
            heroText: 'Give customers a beautiful bilingual menu that understands natural requests, recommends relevant dishes and opens instantly from a QR code.',
            bookDemo: 'Book a Free Demo', seeExperience: 'See the Experience', whatsappShort: 'WhatsApp', emailShort: 'Email',
            questionWhatsApp: 'Questions? Chat on WhatsApp', chatWhatsApp: 'Chat on WhatsApp', sendEmail: 'Send an Email',
            questionsTitle: 'Questions before your demonstration?', questionsText: 'Speak directly with SmartDevelop on WhatsApp or send us an email. We will help you understand how AI Menu can work for your restaurant.',
            trust1: 'No app download', trust2: 'Mobile and tablet ready', trust3: 'English and French',
            ownerLogin: 'Already a customer? Restaurant login →', liveMenu: 'Live customer menu', openToday: 'Montréal · Open today',
            assistant: 'Smart Menu Assistant', intelligentSearch: 'Intelligent menu search', online: '● Online', analyzing: 'Analyzing the menu...',
            matches: 'BEST MATCHES', recommendations: 'AI RECOMMENDATIONS', success: '✓ Matches the customer’s preferences',
            proof1: 'Scan and open', proof1t: 'A QR menu with no application required.', proof2: 'Search naturally', proof2t: 'Customers describe what they want.',
            proof3: 'Discover faster', proof3t: 'Relevant choices appear in seconds.', proof4: 'Manage simply', proof4t: 'Control the complete menu from one dashboard.',
            built: 'Built for real restaurant service.', builtText: 'A clearer digital experience for guests and a practical dashboard for the team.',
            why: 'Why AI Menu', clearTitle: 'Make the menu easier to understand—and easier to choose from.',
            clearText: 'Instead of scrolling through every category, customers can search by price, ingredients, nutrition or personal preference and immediately see suitable options.',
            b1: 'Guide customer decisions', b1t: 'Help guests narrow the menu around the details that matter to them.',
            b2: 'Present every dish professionally', b2t: 'Show photos, descriptions, prices, ingredients and nutrition in one polished experience.',
            b3: 'Answer common menu questions', b3t: 'Let customers explore preferences before they need to interrupt busy staff.',
            b4: 'Understand customer interest', b4t: 'Review search activity to learn what visitors are looking for.',
            features: 'Complete restaurant platform', featuresTitle: 'Everything your smart menu needs. Nothing your team does not.',
            featuresText: 'Built around practical restaurant workflows and a fast customer experience.',
            f1: 'Natural-language menu search', f1t: 'Customers can request a healthy meal, a specific budget, high protein, vegetarian choices or dishes without selected ingredients.',
            f2: 'QR digital menu', f2t: 'Each restaurant receives a public menu link and downloadable QR code for tables, windows and printed material.',
            f3: 'Nutrition calculation', f3t: 'Calculate calories, protein, carbohydrates and fat from ingredient quantities.',
            f4: 'English and French', f4t: 'Serve Montréal and Québec customers with a bilingual interface.',
            f5: 'Restaurant branding', f5t: 'Use the restaurant logo, colors, photos and information across the public menu.',
            how: 'How it works', howTitle: 'From setup to the table in four clear steps.',
            s1: 'Create the restaurant', s1t: 'Add the restaurant profile, logo and public information.',
            s2: 'Build the menu', s2t: 'Add categories, dishes, drinks, photos, prices and descriptions.',
            s3: 'Add menu intelligence', s3t: 'Enter ingredients and nutrition details for smarter discovery.',
            s4: 'Share the QR code', s4t: 'Customers scan, browse and ask the intelligent menu assistant.',
            madeFor: 'Made for Montréal food businesses', audienceTitle: 'One flexible platform for every type of menu.',
            audienceText: 'Whether guests order at a table, a counter or for takeaway, the same intelligent experience helps them discover the right choice.',
            a1: 'Restaurants', a2: 'Cafés', a3: 'Bakeries', a4: 'Food counters',
            ready: 'See your own restaurant menu become intelligent.',
            readyText: 'Book a free demonstration. We will show you how the experience can look with your restaurant, your branding and your menu.',
            createAccount: 'Or create a restaurant account'
        },
        fr: {
            heroBadge: 'Menu QR propulsé par l’IA pour restaurants modernes',
            heroTitle: 'Aidez chaque client à trouver le bon plat.',
            heroText: 'Offrez un magnifique menu bilingue qui comprend les demandes naturelles, recommande les plats pertinents et s’ouvre instantanément par code QR.',
            bookDemo: 'Réserver une démo gratuite', seeExperience: 'Voir l’expérience', whatsappShort: 'WhatsApp', emailShort: 'Courriel',
            questionWhatsApp: 'Des questions? Écrivez-nous sur WhatsApp', chatWhatsApp: 'Discuter sur WhatsApp', sendEmail: 'Envoyer un courriel',
            questionsTitle: 'Des questions avant votre démonstration?', questionsText: 'Discutez directement avec SmartDevelop sur WhatsApp ou envoyez-nous un courriel. Nous vous expliquerons comment AI Menu peut fonctionner pour votre restaurant.',
            trust1: 'Aucune application à télécharger', trust2: 'Adapté aux mobiles et tablettes', trust3: 'Français et anglais',
            ownerLogin: 'Déjà client? Connexion restaurant →', liveMenu: 'Menu client en direct', openToday: 'Montréal · Ouvert aujourd’hui',
            assistant: 'Assistant intelligent du menu', intelligentSearch: 'Recherche intelligente', online: '● En ligne', analyzing: 'Analyse du menu...',
            matches: 'MEILLEURS RÉSULTATS', recommendations: 'RECOMMANDATIONS IA', success: '✓ Correspond aux préférences du client',
            proof1: 'Scanner et ouvrir', proof1t: 'Un menu QR sans application.', proof2: 'Rechercher naturellement', proof2t: 'Les clients décrivent simplement leur envie.',
            proof3: 'Découvrir rapidement', proof3t: 'Les choix pertinents apparaissent en quelques secondes.', proof4: 'Gérer simplement', proof4t: 'Contrôlez tout le menu depuis un tableau de bord.',
            built: 'Conçu pour le vrai service en restaurant.', builtText: 'Une expérience plus claire pour les clients et un tableau de bord pratique pour l’équipe.',
            why: 'Pourquoi AI Menu', clearTitle: 'Rendez le menu plus facile à comprendre et le choix plus simple.',
            clearText: 'Au lieu de parcourir toutes les catégories, les clients recherchent selon le prix, les ingrédients, la nutrition ou leurs préférences et voient immédiatement les options appropriées.',
            b1: 'Guider les décisions des clients', b1t: 'Aidez les clients à réduire les choix selon les critères importants pour eux.',
            b2: 'Présenter chaque plat professionnellement', b2t: 'Affichez photos, descriptions, prix, ingrédients et nutrition dans une expérience soignée.',
            b3: 'Répondre aux questions courantes', b3t: 'Les clients explorent leurs préférences sans interrompre le personnel occupé.',
            b4: 'Comprendre les intérêts des clients', b4t: 'Consultez les recherches pour savoir ce que les visiteurs désirent.',
            features: 'Plateforme complète pour restaurant', featuresTitle: 'Tout ce dont votre menu intelligent a besoin, sans complexité inutile.',
            featuresText: 'Conçu autour des opérations réelles du restaurant et d’une expérience client rapide.',
            f1: 'Recherche en langage naturel', f1t: 'Les clients peuvent demander un repas santé, un budget précis, un plat riche en protéines, végétarien ou sans certains ingrédients.',
            f2: 'Menu numérique QR', f2t: 'Chaque restaurant reçoit un lien public et un code QR téléchargeable pour les tables, vitrines et documents imprimés.',
            f3: 'Calcul nutritionnel', f3t: 'Calculez les calories, protéines, glucides et lipides selon les quantités des ingrédients.',
            f4: 'Français et anglais', f4t: 'Servez les clients de Montréal et du Québec avec une interface bilingue.',
            f5: 'Image du restaurant', f5t: 'Utilisez le logo, les couleurs, les photos et les renseignements du restaurant dans le menu public.',
            how: 'Fonctionnement', howTitle: 'De la configuration à la table en quatre étapes simples.',
            s1: 'Créer le restaurant', s1t: 'Ajoutez le profil, le logo et les renseignements publics.',
            s2: 'Construire le menu', s2t: 'Ajoutez catégories, plats, boissons, photos, prix et descriptions.',
            s3: 'Ajouter l’intelligence du menu', s3t: 'Ajoutez les ingrédients et la nutrition pour une meilleure découverte.',
            s4: 'Partager le code QR', s4t: 'Les clients scannent, consultent et interrogent l’assistant intelligent.',
            madeFor: 'Conçu pour les commerces alimentaires de Montréal', audienceTitle: 'Une plateforme flexible pour chaque type de menu.',
            audienceText: 'À table, au comptoir ou pour emporter, la même expérience intelligente aide les clients à trouver le bon choix.',
            a1: 'Restaurants', a2: 'Cafés', a3: 'Boulangeries', a4: 'Comptoirs alimentaires',
            ready: 'Découvrez votre propre menu transformé en expérience intelligente.',
            readyText: 'Réservez une démonstration gratuite. Nous vous montrerons l’expérience avec votre restaurant, votre image et votre menu.',
            createAccount: 'Ou créer un compte restaurant'
        }
    };

    const languageButtons = document.querySelectorAll('[data-am-lang]');

    function getLanguage() {
        return localStorage.getItem('ai_menu_language') || 'en';
    }

    function setLanguage(language) {
        const selected = copy[language] ? language : 'en';
        const dictionary = copy[selected];

        document.querySelectorAll('[data-am-t]').forEach(function (element) {
            const key = element.dataset.amT;
            if (Object.prototype.hasOwnProperty.call(dictionary, key)) {
                element.textContent = dictionary[key];
            }
        });

        languageButtons.forEach(function (button) {
            const active = button.dataset.amLang === selected;
            button.classList.toggle('active', active);
            button.setAttribute('aria-pressed', active ? 'true' : 'false');
        });

        document.documentElement.lang = selected;
        localStorage.setItem('ai_menu_language', selected);
    }

    languageButtons.forEach(function (button) {
        button.addEventListener('click', function () {
            setLanguage(button.dataset.amLang);
        });
    });

    setLanguage(getLanguage());

    const revealElements = document.querySelectorAll('.am-reveal');
    if ('IntersectionObserver' in window) {
        const revealObserver = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    revealObserver.unobserve(entry.target);
                }
            });
        }, { threshold: .12 });

        revealElements.forEach(function (element) { revealObserver.observe(element); });
    } else {
        revealElements.forEach(function (element) { element.classList.add('visible'); });
    }

    const scenarios = {
        en: [
            { query: 'I want a healthy dinner under $20 without chicken', filters: ['Healthy', 'Under $20', 'No chicken'] },
            { query: 'Show me a high-protein meal', filters: ['High protein', 'Dinner', 'Healthy'] },
            { query: 'I want a vegetarian meal under $18', filters: ['Vegetarian', 'Under $18', 'Fresh'] }
        ],
        fr: [
            { query: 'Je veux un repas santé à moins de 20 $ sans poulet', filters: ['Santé', 'Moins de 20 $', 'Sans poulet'] },
            { query: 'Je veux un repas riche en protéines', filters: ['Protéines', 'Repas', 'Santé'] },
            { query: 'Je veux un repas végétarien à moins de 18 $', filters: ['Végétarien', 'Moins de 18 $', 'Frais'] }
        ]
    };

    const typingElement = document.getElementById('amTypingText');
    const filtersElement = document.getElementById('amFilters');
    const searchingElement = document.getElementById('amSearching');
    const resultsElement = document.getElementById('amResults');
    const resultCards = document.querySelectorAll('.am-result');
    let scenarioIndex = 0;

    function wait(milliseconds) {
        return new Promise(function (resolve) { window.setTimeout(resolve, milliseconds); });
    }

    function typeText(text, speed) {
        return new Promise(function (resolve) {
            typingElement.textContent = '';
            let index = 0;
            const timer = window.setInterval(function () {
                typingElement.textContent += text.charAt(index);
                index += 1;
                if (index >= text.length) {
                    window.clearInterval(timer);
                    resolve();
                }
            }, speed);
        });
    }

    function resetDemo() {
        filtersElement.innerHTML = '';
        searchingElement.classList.remove('active');
        resultsElement.classList.remove('active');
        resultCards.forEach(function (card) { card.classList.remove('show'); });
    }

    function showFilters(filters) {
        filtersElement.innerHTML = '';
        filters.forEach(function (filter, index) {
            const chip = document.createElement('span');
            chip.className = 'am-filter';
            chip.textContent = '✓ ' + filter;
            chip.style.animationDelay = (index * 130) + 'ms';
            filtersElement.appendChild(chip);
        });
    }

    async function runDemo() {
        if (!typingElement || !filtersElement || !searchingElement || !resultsElement) return;

        while (true) {
            const language = getLanguage();
            const availableScenarios = scenarios[language] || scenarios.en;
            const scenario = availableScenarios[scenarioIndex % availableScenarios.length];

            resetDemo();
            await typeText(scenario.query, 30);
            await wait(450);
            showFilters(scenario.filters);
            await wait(900);
            searchingElement.classList.add('active');
            await wait(1600);
            searchingElement.classList.remove('active');
            resultsElement.classList.add('active');
            resultCards.forEach(function (card, index) {
                window.setTimeout(function () { card.classList.add('show'); }, index * 230);
            });
            await wait(5000);
            typingElement.textContent = '';
            resetDemo();
            await wait(700);
            scenarioIndex += 1;
        }
    }

    if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
        runDemo();
    } else {
        typingElement.textContent = scenarios[getLanguage()][0].query;
        showFilters(scenarios[getLanguage()][0].filters);
        resultsElement.classList.add('active');
        resultCards.forEach(function (card) { card.classList.add('show'); });
    }
});
</script>
@endpush