/* global React, ReactDOM */

function SelezionaMenu() {
  return (
    <div className="drops-page" data-variant="B" data-screen-label="Seleziona Menu">
      <window.SiteHeader />
      <window.JungleBackdrop />

      <main className="section menu-select-hero">
        <div className="kicker" style={{ marginBottom: 28 }}>BENVENUTO DA DROP'S</div>
        <h1 className="display menu-select-title">
          Cosa ti<br />
          <span style={{ color: "var(--blue)" }}>va stasera?</span>
        </h1>
        <p className="menu-select-sub">
          Scegli da dove iniziare. Puoi sempre tornare indietro e cambiare idea —
          <span className="script" style={{ fontSize: 26, color: "var(--blue)", marginLeft: 6 }}>nessuna fretta.</span>
        </p>

        <div className="menu-select-grid">
          <a href="menu_it.html" className="menu-card menu-card-dinner">
            <div className="time-alert" aria-label="Disponibile fino alle 23">Solo fino alle 23!</div>
            <div className="menu-card-flag" aria-hidden="true">
              <svg viewBox="0 0 60 40" width="72" height="48">
                <rect width="60" height="40" fill="#009246" />
                <rect x="20" width="20" height="40" fill="#fff" />
                <rect x="40" width="20" height="40" fill="#ce2b37" />
              </svg>
            </div>
            <div className="menu-card-icon" aria-hidden="true">
              {/* Plate with fork & knife */}
              <svg viewBox="0 0 120 120" width="100%" height="100%">
                <circle cx="60" cy="60" r="42" fill="none" stroke="currentColor" strokeWidth="3" />
                <circle cx="60" cy="60" r="32" fill="none" stroke="currentColor" strokeWidth="1.5" opacity="0.5" />
                <g stroke="currentColor" strokeWidth="3" strokeLinecap="round">
                  <line x1="22" y1="14" x2="22" y2="48" />
                  <line x1="14" y1="14" x2="14" y2="34" />
                  <line x1="30" y1="14" x2="30" y2="34" />
                  <line x1="22" y1="48" x2="22" y2="106" />
                </g>
                <g stroke="currentColor" strokeWidth="3" strokeLinecap="round" fill="none">
                  <path d="M98 14 L98 50 Q 98 60, 92 60 L 92 106" />
                  <path d="M98 50 Q 98 60, 104 60 L 104 106" />
                </g>
              </svg>
            </div>
            <div className="menu-card-body">
              <div className="menu-card-kicker mono">Cena · 18:00 → <span className="time-highlight">23:00</span></div>
              <h2 className="display menu-card-title">Menù Dinner</h2>
              <p className="menu-card-desc">Hamburger d'autore, wrustel, fritti artigianali, pinse romane e roba dalla griglia. Tutto fatto con amore.


              </p>
              <div className="menu-card-tags">
                <span className="sticker">Burger</span>
                <span className="sticker">Polpette</span>
                <span className="sticker">Fritti</span>
                <span className="sticker">Pinse</span>
                <span className="sticker">Griglia</span>
              </div>
            </div>
            <div className="menu-card-cta mono">
              Sfoglia il menu <span className="arrow">→</span>
            </div>
          </a>

          <a href="menu_after_dinner_it.html" className="menu-card menu-card-after">
            <div className="time-alert" aria-label="Disponibile dalle 23 all'01">Dalle 23 all'01!</div>
            <div className="menu-card-flag" aria-hidden="true">
              <svg viewBox="0 0 60 40" width="72" height="48">
                <rect width="60" height="40" fill="#009246" />
                <rect x="20" width="20" height="40" fill="#fff" />
                <rect x="40" width="20" height="40" fill="#ce2b37" />
              </svg>
            </div>
            <div className="menu-card-icon" aria-hidden="true">
              {/* Cocktail glass + olive */}
              <svg viewBox="0 0 120 120" width="100%" height="100%">
                <g stroke="currentColor" strokeWidth="3" strokeLinecap="round" fill="none">
                  <path d="M16 22 L104 22 L 60 70 Z" />
                  <line x1="60" y1="70" x2="60" y2="104" />
                  <line x1="42" y1="104" x2="78" y2="104" />
                </g>
                <line x1="40" y1="14" x2="72" y2="46" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
                <circle cx="72" cy="46" r="5" fill="currentColor" />
                <ellipse cx="60" cy="22" rx="44" ry="3" fill="currentColor" opacity="0.35" />
              </svg>
            </div>
            <div className="menu-card-body">
              <div className="menu-card-kicker mono">Dopo cena · <span className="time-highlight">23:00</span> → <span className="time-highlight">01:00</span></div>
              <h2 className="display menu-card-title">Menù After Dinner</h2>
              <p className="menu-card-desc">Cocktail, birre alla spina, distillati, dolci della casa e qualcosa da mangiare per chi vuole tirare tardi.


              </p>
              <div className="menu-card-tags">
                <span className="sticker">Cocktails</span>
                <span className="sticker">Birre alla spina</span>
                <span className="sticker">Distillati</span>
                <span className="sticker">Dolci</span>
              </div>
            </div>
            <div className="menu-card-cta mono">
              Vai al bar <span className="arrow">→</span>
            </div>
          </a>

          <a href="menu_dinner_en.html" className="menu-card menu-card-dinner menu-card-en">
            <div className="time-alert" aria-label="Only until 11 PM">Only until 11 PM!</div>
            <div className="menu-card-flag" aria-hidden="true">
              {/* Union Jack — simplified but recognisable */}
              <svg viewBox="0 0 60 40" width="72" height="48">
                <rect width="60" height="40" fill="#012169" />
                <path d="M0 0 L60 40 M60 0 L0 40" stroke="#fff" strokeWidth="6" />
                <path d="M0 0 L60 40 M60 0 L0 40" stroke="#C8102E" strokeWidth="3" />
                <path d="M30 0 V40 M0 20 H60" stroke="#fff" strokeWidth="10" />
                <path d="M30 0 V40 M0 20 H60" stroke="#C8102E" strokeWidth="6" />
              </svg>
            </div>
            <div className="menu-card-icon" aria-hidden="true">
              <svg viewBox="0 0 120 120" width="100%" height="100%">
                <circle cx="60" cy="60" r="42" fill="none" stroke="currentColor" strokeWidth="3" />
                <circle cx="60" cy="60" r="32" fill="none" stroke="currentColor" strokeWidth="1.5" opacity="0.5" />
                <g stroke="currentColor" strokeWidth="3" strokeLinecap="round">
                  <line x1="22" y1="14" x2="22" y2="48" />
                  <line x1="14" y1="14" x2="14" y2="34" />
                  <line x1="30" y1="14" x2="30" y2="34" />
                  <line x1="22" y1="48" x2="22" y2="106" />
                </g>
                <g stroke="currentColor" strokeWidth="3" strokeLinecap="round" fill="none">
                  <path d="M98 14 L98 50 Q 98 60, 92 60 L 92 106" />
                  <path d="M98 50 Q 98 60, 104 60 L 104 106" />
                </g>
              </svg>
            </div>
            <div className="menu-card-body">
              <div className="menu-card-kicker mono">Dinner · 6 PM → <span className="time-highlight">11 PM</span></div>
              <h2 className="display menu-card-title">Dinner Menu</h2>
              <p className="menu-card-desc">Signature burgers, artisan fried bites, Roman pinse and stuff from the grill. All made with love.


              </p>
              <div className="menu-card-tags">
                <span className="sticker">Burgers</span>
                <span className="sticker">Meatballs</span>
                <span className="sticker">Fried</span>
                <span className="sticker">Pinse</span>
                <span className="sticker">Grill</span>
              </div>
            </div>
            <div className="menu-card-cta mono">
              Browse the menu <span className="arrow">→</span>
            </div>
          </a>

          <a href="menu_after_dinner_en.html" className="menu-card menu-card-after menu-card-en">
            <div className="time-alert" aria-label="From 11 PM to 1 AM">From 11 PM to 1 AM!</div>
            <div className="menu-card-flag" aria-hidden="true">
              <svg viewBox="0 0 60 40" width="72" height="48">
                <rect width="60" height="40" fill="#012169" />
                <path d="M0 0 L60 40 M60 0 L0 40" stroke="#fff" strokeWidth="6" />
                <path d="M0 0 L60 40 M60 0 L0 40" stroke="#C8102E" strokeWidth="3" />
                <path d="M30 0 V40 M0 20 H60" stroke="#fff" strokeWidth="10" />
                <path d="M30 0 V40 M0 20 H60" stroke="#C8102E" strokeWidth="6" />
              </svg>
            </div>
            <div className="menu-card-icon" aria-hidden="true">
              <svg viewBox="0 0 120 120" width="100%" height="100%">
                <g stroke="currentColor" strokeWidth="3" strokeLinecap="round" fill="none">
                  <path d="M16 22 L104 22 L 60 70 Z" />
                  <line x1="60" y1="70" x2="60" y2="104" />
                  <line x1="42" y1="104" x2="78" y2="104" />
                </g>
                <line x1="40" y1="14" x2="72" y2="46" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
                <circle cx="72" cy="46" r="5" fill="currentColor" />
                <ellipse cx="60" cy="22" rx="44" ry="3" fill="currentColor" opacity="0.35" />
              </svg>
            </div>
            <div className="menu-card-body">
              <div className="menu-card-kicker mono">After Dinner · <span className="time-highlight">11 PM</span> → <span className="time-highlight">1 AM</span></div>
              <h2 className="display menu-card-title">After Dinner Menu</h2>
              <p className="menu-card-desc">Cocktails, craft beers on tap, spirits, homemade desserts and something to eat for those who want to stay late.


              </p>
              <div className="menu-card-tags">
                <span className="sticker">Cocktails</span>
                <span className="sticker">Craft beers</span>
                <span className="sticker">Spirits</span>
                <span className="sticker">Desserts</span>
              </div>
            </div>
            <div className="menu-card-cta mono">
              Go to the bar <span className="arrow">→</span>
            </div>
          </a>
        </div>

        <div className="menu-select-foot mono">
          <span>O torna alla </span>
          <a href="index.html">home</a>
          <span className="hero-subtopbar-dot"> · </span>
          <span>Per prenotare un tavolo chiama </span>
          <a href="tel:+390612345678">+39 345 233 1812</a>
        </div>
      </main>

      <window.FooterSection variant="B" />
    </div>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<SelezionaMenu />);