<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="icon" type="image/png" sizes="32x32" href="https://aimenugenicons.s3.eu-west-1.amazonaws.com/aimenugen_icon.png">
  <title>MenuBuilder.AI - Smart Digital Menu with WhatsApp Ordering</title>
  <script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

    :root {
      --bg-primary: #ffffff;
      --bg-secondary: #f8f9fa;
      --bg-card: #ffffff;
      --border-color: #e5e7eb;
      --text-primary: #1f2937;
      --text-secondary: #6b7280;
      --accent-blue: #3b82f6;
      --accent-blue-hover: #2563eb;
      --accent-green: #10b981;
      --gradient-blue: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      --gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%);
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
      --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
      --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: var(--bg-primary);
      color: var(--text-primary);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      overflow-x: hidden;
      line-height: 1.6;
    }

    /* HEADER */
    header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border-color);
      padding: 1.25rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: var(--shadow-sm);
    }

    .logo {
      display: flex;
      align-items: center;
      font-size: 1.5rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      text-decoration: none;
    }

    .logo-menu { color: #6b7280; }
    .logo-ai { color: #3b82f6; font-weight: 700; }

    nav {
      display: flex;
      gap: 2rem;
      align-items: center;
    }

    nav a {
      color: var(--text-secondary);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s ease;
      font-size: 0.95rem;
    }

    nav a:hover { color: var(--accent-blue); }

    .lang-switch {
      background: var(--bg-secondary);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 0.5rem 1rem;
      cursor: pointer;
      font-weight: 500;
      transition: all 0.3s ease;
      font-size: 0.9rem;
    }

    .lang-switch:hover {
      border-color: var(--accent-blue);
      background: rgba(59, 130, 246, 0.05);
      color: var(--accent-blue);
    }

    /* HERO */
    .hero {
      padding: 6rem 2rem 4rem;
      text-align: center;
      background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
      background-size: 40px 40px;
      animation: grid-move 20s linear infinite;
    }

    @keyframes grid-move {
      0% { transform: translate(0, 0); }
      100% { transform: translate(40px, 40px); }
    }

    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 900px;
      margin: 0 auto;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(59, 130, 246, 0.1);
      border: 1px solid rgba(59, 130, 246, 0.2);
      border-radius: 50px;
      padding: 0.5rem 1.25rem;
      margin-bottom: 2rem;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--accent-blue);
    }

    .hero h1 {
      font-size: 3.5rem;
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 1.5rem;
      color: var(--text-primary);
    }

    .hero h1 span {
      background: var(--gradient-blue);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-subtitle {
      font-size: 1.25rem;
      color: var(--text-secondary);
      margin-bottom: 3rem;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }

    .cta-buttons {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    .cta-btn {
      padding: 1rem 2.5rem;
      border-radius: 12px;
      font-size: 1.05rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      border: none;
    }

    .cta-btn-primary {
      background: var(--gradient-blue);
      color: #ffffff;
      box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
    }

    .cta-btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
    }

    .cta-btn-secondary {
      background: transparent;
      color: var(--accent-blue);
      border: 2px solid var(--accent-blue);
    }

    .cta-btn-secondary:hover {
      background: rgba(59, 130, 246, 0.05);
    }

    /* FEATURES */
    .features {
      padding: 6rem 2rem;
      background: var(--bg-secondary);
    }

    .section-header {
      text-align: center;
      max-width: 700px;
      margin: 0 auto 4rem;
    }

    .section-title {
      font-size: 2.5rem;
      font-weight: 800;
      margin-bottom: 1rem;
      color: var(--text-primary);
    }

    .section-subtitle {
      font-size: 1.1rem;
      color: var(--text-secondary);
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    .feature-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 2rem;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }

    .feature-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--gradient-blue);
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }

    .feature-card:hover {
      transform: translateY(-8px);
      border-color: var(--accent-blue);
      box-shadow: var(--shadow-lg);
    }

    .feature-card:hover::before { transform: scaleX(1); }

    .feature-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
      display: inline-block;
    }

    .feature-title {
      font-size: 1.4rem;
      font-weight: 700;
      margin-bottom: 0.75rem;
      color: var(--text-primary);
    }

    .feature-description {
      color: var(--text-secondary);
      line-height: 1.7;
    }

    .feature-badge {
      display: inline-block;
      background: rgba(16, 185, 129, 0.1);
      color: var(--accent-green);
      font-size: 0.75rem;
      font-weight: 700;
      padding: 0.35rem 0.75rem;
      border-radius: 6px;
      margin-top: 1rem;
      border: 1px solid rgba(16, 185, 129, 0.2);
    }

    /* HOW IT WORKS */
    .how-it-works {
      padding: 6rem 2rem;
      background: var(--bg-primary);
    }

    .steps-container {
      max-width: 1000px;
      margin: 0 auto;
      display: grid;
      gap: 3rem;
    }

    .step {
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 2rem;
      align-items: start;
    }

    .step-number {
      width: 80px;
      height: 80px;
      background: var(--gradient-blue);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      font-weight: 800;
      color: #ffffff;
      box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
    }

    .step-content h3 {
      font-size: 1.5rem;
      margin-bottom: 0.75rem;
    }

    .step-content p {
      color: var(--text-secondary);
      font-size: 1.05rem;
      line-height: 1.7;
    }

    /* DEMO */
    .demo {
      padding: 6rem 2rem;
      background: var(--bg-secondary);
    }

    .demo-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      gap: 4rem;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
    }

    .qr-showcase { text-align: center; }

    .qr-wrapper {
      background: white;
      border-radius: 20px;
      padding: 2rem;
      box-shadow: var(--shadow-xl);
      margin-bottom: 1.5rem;
      display: inline-block;
    }

    canvas { display: block; }

    .qr-caption {
      font-size: 1rem;
      color: var(--text-secondary);
      font-weight: 500;
    }

    .phone-mockup {
      background: #f9fafb;
      border: 8px solid #374151;
      border-radius: 32px;
      box-shadow: var(--shadow-xl);
      max-width: 380px;
      overflow: hidden;
    }

    .phone-screen {
      background: #ffffff;
      padding: 0;
      max-height: 600px;
      overflow-y: auto;
    }

    .phone-screen::-webkit-scrollbar { width: 6px; }
    .phone-screen::-webkit-scrollbar-track { background: var(--bg-secondary); }
    .phone-screen::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }

    .menu-hero {
      position: relative;
      height: 200px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
      overflow: hidden;
    }

    .menu-hero-image {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.3;
    }

    .menu-logo-container {
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .menu-logo {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid white;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      background: white;
      margin-bottom: 0.5rem;
    }

    .menu-header {
      padding: 1rem 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .restaurant-name {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    .lang-select {
      background: var(--bg-secondary);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      padding: 0.4rem 0.6rem;
      font-size: 0.85rem;
    }

    .menu-content {
      padding: 0 1.5rem 1.5rem;
    }

    .menu-category {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 0;
      margin-bottom: 1.5rem;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .category-header {
      position: relative;
      height: 120px;
      overflow: hidden;
    }

    .category-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .category-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
      padding: 1rem;
    }

    .category-title {
      color: #ffffff;
      font-weight: 700;
      font-size: 1.1rem;
      margin: 0;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    .category-items {
      padding: 1rem;
    }

    .dish-item {
      padding: 0.75rem 0;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      gap: 1rem;
      align-items: flex-start;
    }

    .dish-item:last-child { border-bottom: none; }

    .dish-image {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      object-fit: cover;
      flex-shrink: 0;
      border: 1px solid var(--border-color);
    }

    .dish-content {
      flex: 1;
      min-width: 0;
    }

    .dish-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.4rem;
      gap: 0.5rem;
    }

    .dish-name {
      font-weight: 600;
      font-size: 0.95rem;
    }

    .dish-price {
      color: var(--accent-blue);
      font-weight: 700;
      white-space: nowrap;
    }

    .dish-desc {
      color: var(--text-secondary);
      font-size: 0.85rem;
      line-height: 1.5;
    }

    /* SOCIAL PROOF */
    .social-proof {
      padding: 4rem 2rem;
      background: var(--bg-secondary);
      text-align: center;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
      max-width: 900px;
      margin: 0 auto;
    }

    .stat { padding: 2rem; }

    .stat-number {
      font-size: 3rem;
      font-weight: 800;
      color: var(--accent-blue);
      margin-bottom: 0.5rem;
    }

    .stat-label {
      color: var(--text-secondary);
      font-size: 1rem;
    }

    /* PRICING */
    .pricing {
      padding: 6rem 2rem;
      background: var(--bg-primary);
    }

    .pricing-card {
      max-width: 600px;
      margin: 3rem auto 0;
      background: var(--bg-card);
      border: 2px solid var(--border-color);
      border-radius: 20px;
      padding: 3rem;
      position: relative;
      box-shadow: var(--shadow-lg);
    }

    .pricing-badge {
      position: absolute;
      top: -18px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--gradient-green);
      color: white;
      padding: 0.5rem 1.5rem;
      border-radius: 50px;
      font-weight: 700;
      font-size: 0.9rem;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    .price-amount {
      font-size: 4rem;
      font-weight: 800;
      background: var(--gradient-blue);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      margin-bottom: 0.5rem;
    }

    .price-period {
      color: var(--text-secondary);
      font-size: 1.1rem;
      margin-bottom: 2rem;
    }

    .price-features {
      list-style: none;
      margin-bottom: 2rem;
    }

    .price-features li {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 0;
      color: var(--text-secondary);
      font-size: 1.05rem;
    }

    .price-features li::before {
      content: '✓';
      color: var(--accent-green);
      font-weight: 700;
      font-size: 1.3rem;
    }

    .price-cta {
      width: 100%;
      padding: 1.25rem;
      background: var(--gradient-blue);
      color: #ffffff;
      border: none;
      border-radius: 12px;
      font-size: 1.1rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .price-cta:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
    }

    /* FOOTER */
    footer {
      background: var(--bg-secondary);
      border-top: 1px solid var(--border-color);
      padding: 3rem 2rem;
      text-align: center;
    }

    .footer-content { max-width: 1200px; margin: 0 auto; }

    .footer-links {
      display: flex;
      gap: 2rem;
      justify-content: center;
      margin-bottom: 2rem;
      flex-wrap: wrap;
    }

    .footer-links a {
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 0.9rem;
      transition: color 0.3s ease;
    }

    .footer-links a:hover { color: var(--accent-blue); }

    .footer-copyright {
      color: var(--text-secondary);
      font-size: 0.9rem;
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      .hero h1 { font-size: 2.5rem; }
      .hero-subtitle { font-size: 1.1rem; }
      .section-title { font-size: 2rem; }
      .features-grid { grid-template-columns: 1fr; }
      .demo-container { flex-direction: column; }
      .phone-mockup { max-width: 100%; }
      nav { gap: 1rem; }
      nav a { display: none; }
      .step { grid-template-columns: 60px 1fr; gap: 1.5rem; }
      .step-number { width: 60px; height: 60px; font-size: 1.5rem; }
      .pricing-card { padding: 2rem; }
      .price-amount { font-size: 3rem; }
    }

    /* SCROLL ANIMATIONS */
    .scroll-animate {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .scroll-animate.animate-in {
      opacity: 1;
      transform: translateY(0);
    }

    .scroll-animate-left {
      opacity: 0;
      transform: translateX(-50px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .scroll-animate-left.animate-in {
      opacity: 1;
      transform: translateX(0);
    }

    .scroll-animate-right {
      opacity: 0;
      transform: translateX(50px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .scroll-animate-right.animate-in {
      opacity: 1;
      transform: translateX(0);
    }

    .scroll-animate-scale {
      opacity: 0;
      transform: scale(0.9);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .scroll-animate-scale.animate-in {
      opacity: 1;
      transform: scale(1);
    }

    .scroll-animate:nth-child(1) { transition-delay: 0s; }
    .scroll-animate:nth-child(2) { transition-delay: 0.1s; }
    .scroll-animate:nth-child(3) { transition-delay: 0.2s; }
    .scroll-animate:nth-child(4) { transition-delay: 0.3s; }
    .scroll-animate:nth-child(5) { transition-delay: 0.4s; }
    .scroll-animate:nth-child(6) { transition-delay: 0.5s; }
    .scroll-animate:nth-child(7) { transition-delay: 0.6s; }
    .scroll-animate:nth-child(8) { transition-delay: 0.7s; }
    .scroll-animate:nth-child(9) { transition-delay: 0.8s; }

    .fade-in-up { animation: fadeInUp 0.6s ease-out; }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
</head>
<body>
  <header>
    <a href="/" class="logo">
      <span class="logo-menu">MenuBuilder</span><span class="logo-ai">.AI</span>
    </a>
    <nav>
      <a href="#features" data-he="תכונות" data-en="Features">Features</a>
      <a href="#how-it-works" data-he="איך זה עובד" data-en="How it Works">How it Works</a>
      <a href="#pricing" data-he="מחירון" data-en="Pricing">Pricing</a>
    </nav>
    <button class="lang-switch" onclick="toggleLang()">עברית</button>
  </header>

  <section class="hero">
    <div class="hero-content fade-in-up">
      <div class="hero-badge">
        <span>✨</span>
        <span data-he="3 חודשי ניסיון חינם" data-en="3 Months Free Trial">3 Months Free Trial</span>
      </div>
      
      <h1>
        <span data-he="תפריט דיגיטלי חכם עם הזמנות WhatsApp" data-en="Smart Digital Menu with WhatsApp Ordering">
          Smart Digital Menu with WhatsApp Ordering
        </span>
      </h1>
      
      <p class="hero-subtitle" data-he="צור תפריט מקצועי תוך דקות עם AI, קבל הזמנות ישירות דרך WhatsApp, והצג ביקורות של Google. הכל ללא עמלות." 
         data-en="Create a professional menu in minutes with AI, receive orders directly via WhatsApp, and display Google reviews. All without commissions.">
        Create a professional menu in minutes with AI, receive orders directly via WhatsApp, and display Google reviews. All without commissions.
      </p>
      
      <div class="cta-buttons">
        <button class="cta-btn cta-btn-primary" onclick="moveToAdminPage()">
          <span data-he="התחל חינם" data-en="Start Free">Start Free</span>
          <span>→</span>
        </button>
        <a href="https://aimenugen.com/view?id=89bdb2b5-03d3-451a-b296-f9514ce69800&lang=en" target="_blank" class="cta-btn cta-btn-secondary">
          <span>👁️</span>
          <span data-he="צפה בדמו חי" data-en="View Live Demo">View Live Demo</span>
        </a>
      </div>
    </div>
  </section>

  <section id="features" class="features">
    <div class="section-header scroll-animate">
      <h2 class="section-title" data-he="כל מה שהמסעדה שלך צריכה" data-en="Everything Your Restaurant Needs">Everything Your Restaurant Needs</h2>
      <p class="section-subtitle" data-he="מערכת ניהול תפריט מלאה עם כלים מתקדמים להגדלת המכירות" 
         data-en="Complete menu management system with advanced tools to boost sales">Complete menu management system with advanced tools to boost sales</p>
    </div>

    <div class="features-grid">
      <div class="feature-card scroll-animate">
        <div class="feature-icon">💬</div>
        <h3 class="feature-title" data-he="הזמנות WhatsApp ישירות" data-en="Direct WhatsApp Orders">Direct WhatsApp Orders</h3>
        <p class="feature-description" data-he="קבל הזמנות ישירות דרך WhatsApp ללא עמלות של 30%. הלקוחות סורקים QR, בוחרים מנות ושולחים הזמנה ישירות אליך." 
           data-en="Receive orders directly via WhatsApp without 30% commissions. Customers scan QR, select dishes, and send orders straight to you.">Receive orders directly via WhatsApp without 30% commissions. Customers scan QR, select dishes, and send orders straight to you.</p>
        <span class="feature-badge" data-he="חדש" data-en="NEW">NEW</span>
      </div>

      <div class="feature-card scroll-animate">
        <div class="feature-icon">🤖</div>
        <h3 class="feature-title" data-he="בניית תפריט עם AI" data-en="AI-Powered Menu Builder">AI-Powered Menu Builder</h3>
        <p class="feature-description" data-he="צלם את התפריט הקיים או העלה תמונה - ה-AI ממיר אותו לתפריט דיגיטלי מושלם תוך דקות. תמיכה בעברית, אנגלית וצרפתית." 
           data-en="Take a photo of your existing menu or upload an image - AI converts it to a perfect digital menu in minutes. Support for Hebrew, English, and French.">Take a photo of your existing menu or upload an image - AI converts it to a perfect digital menu in minutes. Support for Hebrew, English, and French.</p>
        <span class="feature-badge" data-he="חדש" data-en="NEW">NEW</span>
      </div>

      <div class="feature-card scroll-animate">
        <div class="feature-icon">⭐</div>
        <h3 class="feature-title" data-he="ביקורות Google אוטומטיות" data-en="Automatic Google Reviews">Automatic Google Reviews</h3>
        <p class="feature-description" data-he="חבר את Google Business והצג ביקורות אמיתיות של לקוחות בתפריט. בנה אמון והגדל מכירות." 
           data-en="Connect Google Business and display real customer reviews in your menu. Build trust and increase sales.">Connect Google Business and display real customer reviews in your menu. Build trust and increase sales.</p>
        <span class="feature-badge" data-he="חדש" data-en="NEW">NEW</span>
      </div>

      <div class="feature-card scroll-animate">
        <div class="feature-icon">🪑</div>
        <h3 class="feature-title" data-he="QR לכל שולחן" data-en="QR Code Per Table">QR Code Per Table</h3>
        <p class="feature-description" data-he="צור עד 20 קודי QR שונים לשולחנות שונים. עקוב אחר הזמנות לפי שולחן ושפר את השירות." 
           data-en="Create up to 20 unique QR codes for different tables. Track orders by table and improve service.">Create up to 20 unique QR codes for different tables. Track orders by table and improve service.</p>
        <span class="feature-badge" data-he="חדש" data-en="NEW">NEW</span>
      </div>

      <div class="feature-card scroll-animate">
        <div class="feature-icon">🎨</div>
        <h3 class="feature-title" data-he="עיצוב מותאם אישית" data-en="Custom Design">Custom Design</h3>
        <p class="feature-description" data-he="בחר צבעים, לוגו, תמונות רקע ותמונות מנות. הוסף תגיות מיוחדות (טבעוני, חריף, גלוטן) והפוך את התפריט לייחודי." 
           data-en="Choose colors, logo, background images, and dish photos. Add special tags (vegan, spicy, gluten-free) and make your menu unique.">Choose colors, logo, background images, and dish photos. Add special tags (vegan, spicy, gluten-free) and make your menu unique.</p>
      </div>

      <div class="feature-card scroll-animate">
        <div class="feature-icon">🌍</div>
        <h3 class="feature-title" data-he="רב לשוני" data-en="Multi-Language">Multi-Language</h3>
        <p class="feature-description" data-he="תרגם את התפריט שלך אוטומטית לעברית, אנגלית וצרפתית. הלקוחות בוחרים את השפה המועדפת בלחיצה אחת." 
           data-en="Automatically translate your menu to Hebrew, English, and French. Customers choose their preferred language with one click.">Automatically translate your menu to Hebrew, English, and French. Customers choose their preferred language with one click.</p>
      </div>

      <div class="feature-card scroll-animate">
        <div class="feature-icon">📱</div>
        <h3 class="feature-title" data-he="מותאם למובייל" data-en="Mobile Optimized">Mobile Optimized</h3>
        <p class="feature-description" data-he="תפריט מהיר וחלק בכל מכשיר. ממשק נוח במיוחד לסמארטפונים עם כפתורים גדולים וניווט קל." 
           data-en="Fast and smooth menu on any device. Interface optimized for smartphones with large buttons and easy navigation.">Fast and smooth menu on any device. Interface optimized for smartphones with large buttons and easy navigation.</p>
      </div>

      <div class="feature-card scroll-animate">
        <div class="feature-icon">🌓</div>
        <h3 class="feature-title" data-he="מצב בהיר/כהה" data-en="Light/Dark Mode">Light/Dark Mode</h3>
        <p class="feature-description" data-he="בחר בין מצב כהה מודרני או מצב בהיר קלאסי. התאם את העיצוב למיתוג של המסעדה שלך." 
           data-en="Choose between modern dark mode or classic light mode. Adapt the design to your restaurant's branding.">Choose between modern dark mode or classic light mode. Adapt the design to your restaurant's branding.</p>
      </div>

      <div class="feature-card scroll-animate">
        <div class="feature-icon">⚡</div>
        <h3 class="feature-title" data-he="עדכון מיידי" data-en="Instant Updates">Instant Updates</h3>
        <p class="feature-description" data-he="שנה מחירים, מנות או תיאורים והשינויים יופיעו מיד בתפריט. ללא צורך בהדפסה מחדש." 
           data-en="Change prices, dishes, or descriptions and updates appear instantly in the menu. No need to reprint.">Change prices, dishes, or descriptions and updates appear instantly in the menu. No need to reprint.</p>
      </div>
    </div>
  </section>

  <section id="how-it-works" class="how-it-works">
    <div class="section-header scroll-animate">
      <h2 class="section-title" data-he="איך זה עובד?" data-en="How Does It Work?">How Does It Work?</h2>
      <p class="section-subtitle" data-he="התחל לקבל הזמנות ב-3 שלבים פשוטים" 
         data-en="Start receiving orders in 3 simple steps">Start receiving orders in 3 simple steps</p>
    </div>

    <div class="steps-container">
      <div class="step scroll-animate-left">
        <div class="step-number">1</div>
        <div class="step-content">
          <h3 data-he="צלם או העלה תפריט" data-en="Photo or Upload Menu">Photo or Upload Menu</h3>
          <p data-he="צלם את התפריט הנוכחי שלך או העלה תמונה. ה-AI שלנו יזהה אוטומטית את כל המנות, המחירים והתיאורים - תוך פחות מדקה!" 
             data-en="Take a photo of your current menu or upload an image. Our AI will automatically detect all dishes, prices, and descriptions - in less than a minute!">Take a photo of your current menu or upload an image. Our AI will automatically detect all dishes, prices, and descriptions - in less than a minute!</p>
        </div>
      </div>

      <div class="step scroll-animate-left">
        <div class="step-number">2</div>
        <div class="step-content">
          <h3 data-he="התאם אישית ועצב" data-en="Customize and Design">Customize and Design</h3>
          <p data-he="הוסף לוגו, בחר צבעים, העלה תמונות של מנות, וחבר את Google Business לביקורות. הגדר את מספר WhatsApp וצור QR לכל שולחן." 
             data-en="Add logo, choose colors, upload dish photos, and connect Google Business for reviews. Set up WhatsApp number and create QR codes for each table.">Add logo, choose colors, upload dish photos, and connect Google Business for reviews. Set up WhatsApp number and create QR codes for each table.</p>
        </div>
      </div>

      <div class="step scroll-animate-left">
        <div class="step-number">3</div>
        <div class="step-content">
          <h3 data-he="הדפס והתחל לקבל הזמנות" data-en="Print and Start Receiving Orders">Print and Start Receiving Orders</h3>
          <p data-he="הדפס את קודי ה-QR והצב על השולחנות. לקוחות סורקים, בוחרים מנות ושולחים הזמנה ישירות ל-WhatsApp שלך - ללא עמלות!" 
             data-en="Print QR codes and place on tables. Customers scan, choose dishes, and send orders directly to your WhatsApp - no commissions!">Print QR codes and place on tables. Customers scan, choose dishes, and send orders directly to your WhatsApp - no commissions!</p>
        </div>
      </div>
    </div>
  </section>

  <section id="demo" class="demo">
    <div class="section-header scroll-animate">
      <h2 class="section-title" data-he="נסה את התפריט שלנו" data-en="Try Our Menu">Try Our Menu</h2>
      <p class="section-subtitle" data-he="סרוק את ה-QR או צפה בתצוגה המקדימה" 
         data-en="Scan the QR or view the preview">Scan the QR or view the preview</p>
    </div>

    <div class="demo-container">
      <div class="qr-showcase scroll-animate-left">
        <div class="qr-wrapper">
          <canvas id="qrcode"></canvas>
        </div>
        <p class="qr-caption" data-he="סרוק עם המצלמה שלך" data-en="Scan with your camera">Scan with your camera</p>
      </div>

      <div class="phone-mockup scroll-animate-right">
        <div class="phone-screen">
          <div class="menu-hero">
            <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&h=400&fit=crop" alt="Restaurant" class="menu-hero-image" />
            <div class="menu-logo-container">
              <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=200&h=200&fit=crop" alt="Restaurant Logo" class="menu-logo" />
            </div>
          </div>
          
          <div class="menu-header">
            <h1 id="restaurantName" class="restaurant-name">Café Aroma</h1>
            <select id="langSelect" class="lang-select" onchange="changeDemoLang(this.value)">
              <option value="en" selected>🇬🇧 English</option>
              <option value="he">🇮🇱 עברית</option>
              <option value="fr">🇫🇷 Français</option>
            </select>
          </div>
          
          <div class="menu-content">
            <div id="menuContainer"></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="social-proof">
    <div class="stats-grid">
      <div class="stat scroll-animate-scale">
        <div class="stat-number">500+</div>
        <div class="stat-label" data-he="מסעדות פעילות" data-en="Active Restaurants">Active Restaurants</div>
      </div>
      <div class="stat scroll-animate-scale">
        <div class="stat-number">10K+</div>
        <div class="stat-label" data-he="הזמנות חודשיות" data-en="Monthly Orders">Monthly Orders</div>
      </div>
      <div class="stat scroll-animate-scale">
        <div class="stat-number">0%</div>
        <div class="stat-label" data-he="עמלות" data-en="Commission Fees">Commission Fees</div>
      </div>
    </div>
  </section>

  <section id="pricing" class="pricing">
    <div class="section-header scroll-animate">
      <h2 class="section-title" data-he="מחיר פשוט ושקוף" data-en="Simple & Transparent Pricing">Simple & Transparent Pricing</h2>
      <p class="section-subtitle" data-he="התחל עם 3 חודשי ניסיון חינם לחלוטין" 
         data-en="Start with 3 months completely free">Start with 3 months completely free</p>
    </div>

    <div class="pricing-card scroll-animate-scale">
      <div class="pricing-badge" data-he="3 חודשים חינם!" data-en="3 Months Free!">3 Months Free!</div>
      
      <div class="price-amount">₪80</div>
      <div class="price-period" data-he="לחודש לאחר תקופת הניסיון" data-en="per month after trial">per month after trial</div>
      
      <ul class="price-features">
        <li data-he="הזמנות WhatsApp ללא הגבלה" data-en="Unlimited WhatsApp orders">Unlimited WhatsApp orders</li>
        <li data-he="בניית תפריט עם AI" data-en="AI menu builder">AI menu builder</li>
        <li data-he="עד 20 קודי QR לשולחנות" data-en="Up to 20 table QR codes">Up to 20 table QR codes</li>
        <li data-he="ביקורות Google אוטומטיות" data-en="Automatic Google reviews">Automatic Google reviews</li>
        <li data-he="3 שפות (עברית, אנגלית, צרפתית)" data-en="3 languages (Hebrew, English, French)">3 languages (Hebrew, English, French)</li>
        <li data-he="עיצוב מותאם אישית" data-en="Custom design">Custom design</li>
        <li data-he="תמונות מנות ללא הגבלה" data-en="Unlimited dish images">Unlimited dish images</li>
        <li data-he="עדכונים בזמן אמת" data-en="Real-time updates">Real-time updates</li>
        <li data-he="תמיכה טכנית מלאה" data-en="Full technical support">Full technical support</li>
      </ul>
      
      <button class="price-cta" onclick="moveToAdminPage()">
        <span data-he="התחל את תקופת הניסיון החינם" data-en="Start Your Free Trial">Start Your Free Trial</span>
      </button>
    </div>
  </section>

  <footer>
    <div class="footer-content">
      <div class="footer-links">
        <a href="#features" data-he="תכונות" data-en="Features">Features</a>
        <a href="#how-it-works" data-he="איך זה עובד" data-en="How it Works">How it Works</a>
        <a href="#pricing" data-he="מחירון" data-en="Pricing">Pricing</a>
        <a href="https://aimenugen.com/login" data-he="כניסה" data-en="Login">Login</a>
      </div>
      <div class="footer-copyright">
        <p data-he="© 2025 כל הזכויות שמורות ל-MenuBuilder.AI" data-en="© 2025 All rights reserved to MenuBuilder.AI">© 2025 All rights reserved to MenuBuilder.AI</p>
      </div>
    </div>
  </footer>

  <script>
    QRCode.toCanvas(document.getElementById("qrcode"), "https://aimenugen.com/view?id=89bdb2b5-03d3-451a-b296-f9514ce69800&lang=en", { width: 200, margin: 2, color: { dark: "#000000", light: "#FFFFFF" }});

    const demoMenus = {
      en: { 
        name: "Café Aroma", 
        menu: [
          { 
            category: "Main Dishes",
            categoryImage: "https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=800&h=300&fit=crop",
            items: [
              { 
                dish: "Pasta Alfredo", 
                price: "₪42", 
                desc: "Creamy Alfredo sauce with fresh parmesan cheese and garlic", 
                image: "https://images.unsplash.com/photo-1621996346565-e3dbc646d9a9?w=400&h=400&fit=crop" 
              }, 
              { 
                dish: "Grilled Salmon", 
                price: "₪59", 
                desc: "Atlantic salmon with seasonal vegetables and lemon butter sauce", 
                image: "https://images.unsplash.com/photo-1485921325833-c519f76c4927?w=400&h=400&fit=crop" 
              }, 
              { 
                dish: "Chicken Breast", 
                price: "₪48", 
                desc: "Grilled chicken breast with mushroom cream sauce and herbs", 
                image: "https://images.unsplash.com/photo-1598103442097-8b74394b95c6?w=400&h=400&fit=crop" 
              }
            ]
          }, 
          { 
            category: "Desserts",
            categoryImage: "https://images.unsplash.com/photo-1488477181946-6428a0291777?w=800&h=300&fit=crop",
            items: [
              { 
                dish: "Tiramisu", 
                price: "₪28", 
                desc: "Classic Italian dessert with mascarpone and espresso", 
                image: "https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?w=400&h=400&fit=crop" 
              }, 
              { 
                dish: "Chocolate Cake", 
                price: "₪26", 
                desc: "Rich chocolate cake with vanilla ice cream and berries", 
                image: "https://images.unsplash.com/photo-1578985545062-69928b1d9587?w=400&h=400&fit=crop" 
              }
            ]
          }
        ]
      },
      he: { 
        name: "קפה ארומה", 
        menu: [
          { 
            category: "מנות עיקריות",
            categoryImage: "https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=800&h=300&fit=crop",
            items: [
              { 
                dish: "פסטה אלפרדו", 
                price: "₪42", 
                desc: "רוטב שמנת עשיר עם גבינת פרמזן טרייה ושום", 
                image: "https://images.unsplash.com/photo-1621996346565-e3dbc646d9a9?w=400&h=400&fit=crop" 
              }, 
              { 
                dish: "סלמון על הגריל", 
                price: "₪59", 
                desc: "סלמון אטלנטי עם ירקות עונה ורוטב חמאת לימון", 
                image: "https://images.unsplash.com/photo-1485921325833-c519f76c4927?w=400&h=400&fit=crop" 
              }, 
              { 
                dish: "חזה עוף", 
                price: "₪48", 
                desc: "חזה עוף על הגריל עם רוטב פטריות שמנת ועשבי תיבול", 
                image: "https://images.unsplash.com/photo-1598103442097-8b74394b95c6?w=400&h=400&fit=crop" 
              }
            ]
          }, 
          { 
            category: "קינוחים",
            categoryImage: "https://images.unsplash.com/photo-1488477181946-6428a0291777?w=800&h=300&fit=crop",
            items: [
              { 
                dish: "טירמיסו", 
                price: "₪28", 
                desc: "קינוח איטלקי קלאסי עם מסקרפונה ואספרסו", 
                image: "https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?w=400&h=400&fit=crop" 
              }, 
              { 
                dish: "עוגת שוקולד", 
                price: "₪26", 
                desc: "עוגת שוקולד עשירה עם גלידת וניל ופירות יער", 
                image: "https://images.unsplash.com/photo-1578985545062-69928b1d9587?w=400&h=400&fit=crop" 
              }
            ]
          }
        ]
      },
      fr: { 
        name: "Café Aroma", 
        menu: [
          { 
            category: "Plats Principaux",
            categoryImage: "https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=800&h=300&fit=crop",
            items: [
              { 
                dish: "Pâtes Alfredo", 
                price: "₪42", 
                desc: "Sauce crémeuse Alfredo au parmesan frais et à l'ail", 
                image: "https://images.unsplash.com/photo-1621996346565-e3dbc646d9a9?w=400&h=400&fit=crop" 
              }, 
              { 
                dish: "Saumon Grillé", 
                price: "₪59", 
                desc: "Saumon de l'Atlantique avec légumes de saison et beurre citronné", 
                image: "https://images.unsplash.com/photo-1485921325833-c519f76c4927?w=400&h=400&fit=crop" 
              }, 
              { 
                dish: "Poulet Grillé", 
                price: "₪48", 
                desc: "Poitrine de poulet grillée, sauce champignons et herbes", 
                image: "https://images.unsplash.com/photo-1598103442097-8b74394b95c6?w=400&h=400&fit=crop" 
              }
            ]
          }, 
          { 
            category: "Desserts",
            categoryImage: "https://images.unsplash.com/photo-1488477181946-6428a0291777?w=800&h=300&fit=crop",
            items: [
              { 
                dish: "Tiramisu", 
                price: "₪28", 
                desc: "Dessert italien classique au mascarpone et espresso", 
                image: "https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?w=400&h=400&fit=crop" 
              }, 
              { 
                dish: "Gâteau au Chocolat", 
                price: "₪26", 
                desc: "Riche gâteau au chocolat avec glace vanille et fruits rouges", 
                image: "https://images.unsplash.com/photo-1578985545062-69928b1d9587?w=400&h=400&fit=crop" 
              }
            ]
          }
        ]
      }
    };

    function moveToAdminPage() { window.open('https://aimenugen.com/login', '_blank', 'noopener,noreferrer'); }

    function renderMenu(lang = "en") {
      const container = document.getElementById("menuContainer");
      const data = demoMenus[lang];
      document.getElementById("restaurantName").textContent = data.name;
      container.innerHTML = data.menu.map(cat => `
        <div class="menu-category">
          <div class="category-header">
            <img src="${cat.categoryImage}" alt="${cat.category}" class="category-image" />
            <div class="category-overlay">
              <h2 class="category-title">${cat.category}</h2>
            </div>
          </div>
          <div class="category-items">
            ${cat.items.map(it => `
              <div class="dish-item">
                <img src="${it.image}" alt="${it.dish}" class="dish-image" onerror="this.style.display='none'" />
                <div class="dish-content">
                  <div class="dish-header">
                    <span class="dish-name">${it.dish}</span>
                    <span class="dish-price">${it.price}</span>
                  </div>
                  <p class="dish-desc">${it.desc}</p>
                </div>
              </div>
            `).join("")}
          </div>
        </div>
      `).join("");
    }

    function changeDemoLang(lang) { renderMenu(lang); }
    renderMenu("en");

    let currentLang = "en";
    function toggleLang() {
      const elements = document.querySelectorAll("[data-he]");
      currentLang = currentLang === "he" ? "en" : "he";
      document.documentElement.lang = currentLang;
      document.documentElement.dir = currentLang === "he" ? "rtl" : "ltr";
      document.querySelector(".lang-switch").textContent = currentLang === "he" ? "English" : "עברית";
      const langSelect = document.getElementById("langSelect");
      langSelect.value = currentLang;
      renderMenu(currentLang);
      elements.forEach(el => {
        const newText = el.getAttribute(`data-${currentLang}`);
        if (newText) { el.textContent = newText; }
      });
    }

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
      });
    });

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate-in'); }});
    }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });

    document.querySelectorAll('.scroll-animate, .scroll-animate-left, .scroll-animate-right, .scroll-animate-scale').forEach(el => { observer.observe(el); });
  </script>
</body>
</html>