/* global React */
/* Second half of landing page: Menu / Beer / Events / Gallery / Info / Footer */

function MenuFood({ variant }) {
  const renderCol = (title, items) =>
  <div>
      <div className="mono" style={{ fontSize: 12, marginBottom: 18, color: "var(--ochre)" }}>— {title}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
        {items.map((it) =>
      <div key={it.n} style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
            <span className="numlabel">{it.n}</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "baseline" }}>
                <div className="display" style={{ fontSize: 24, lineHeight: 1.1, display: "inline-flex", alignItems: "center", gap: 8 }}>
                  {it.name}
                  {it.spicy &&
              <svg viewBox="0 0 24 24" width="18" height="18" aria-label="Piccante" style={{ filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.4))" }}>
                      <path d="M11 3 Q 11.5 6, 13 7" fill="none" stroke="#3a6b2a" strokeWidth="2" strokeLinecap="round" />
                      <path d="M13 7 Q 18 7.5, 18.5 13 Q 19 18, 14 21 Q 9.5 22.5, 8 18 Q 7 14, 9 11 Q 11 8, 13 7 Z" fill="#e3331b" stroke="#8a1a0a" strokeWidth="0.8" />
                    </svg>
              }
                </div>
                <div className="leader"></div>
                <div className="mono" style={{ fontSize: 14 }}>€ {it.price}</div>
              </div>
              <div style={{ fontSize: 14, opacity: 0.75, marginTop: 4 }}>{it.desc}</div>
            </div>
          </div>
      )}
      </div>
    </div>;


  return (
    <section className="section" id="menu" style={{
      background: "rgba(0,0,0,0.28)",
      boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.4)"
    }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }}>
        <div style={{ position: "sticky", top: 40 }}>
          <div className="kicker">02 — Dalla cucina</div>
          <h2 className="display" style={{ fontSize: 96, lineHeight: 0.92, margin: "20px 0 24px" }}>
            Brace,<br />
            <span style={{ color: "var(--blue)" }}>fritti<br />e roba forte.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.5, maxWidth: 340 }}>
            Burger di scottona, costine al forno marinate, wrustel bavaresi, pinse,
            chili messicano e zoccolette alla Nutella. Cose buone, niente fronzoli,
            <span className="script" style={{ fontSize: 26, color: "var(--blue)" }}>ci vediamo a tavola.</span>
          </p>
          <div style={{ marginTop: 32 }}>
            <a className="btn" href="seleziona_menu.html">Vedi tutto il menu <span className="arrow">→</span></a>
          </div>
        </div>

        <div style={{ display: "grid", gap: 56 }}>
          {renderCol("Antipasti & sfizi", window.ANTIPASTI)}
          {renderCol("Burger World", window.PRIMI)}
          {renderCol("Griglia & Co.", window.BOARD)}
        </div>
      </div>
    </section>);

}

function MenuBeer({ variant }) {
  return (
    <section className="section" id="birre" style={{
      background: variant === "A" ?
      "linear-gradient(180deg, rgba(10,30,60,0.55), rgba(10,30,60,0.55)), rgba(0,0,0,0.45)" :
      "linear-gradient(180deg, rgba(10,30,60,0.45), rgba(10,30,60,0.45)), rgba(0,0,0,0.55)",
      color: "var(--ink)",
      boxShadow: "inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.4)"
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56 }}>
        <div>
          <div className="kicker">03 — Lineup taps</div>
          <h2 className="display" style={{ fontSize: 120, lineHeight: 0.9, margin: "16px 0 0" }}>
            Sette spine.<br />
            <span style={{ color: "var(--ochre)" }}>Da Monaco a Dublino.</span>
          </h2>
        </div>
        <div style={{ maxWidth: 320, lineHeight: 1.5, fontSize: "20px", fontWeight: "400" }}>
          Tre Hofbräu direttamente da München, le artigianali di ECB,
          la Guinness servita come si deve. Sei spine fisse più due
          a rotazione — <em>chiedi al banco</em>.
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginBottom: 64 }}>
        {window.TAPS.map((t) =>
        <div key={t.n} style={{
          border: "1.5px solid currentColor",
          borderRadius: 4,
          padding: 24,
          position: "relative",
          background: "color-mix(in oklab, currentColor 6%, transparent)"
        }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
              <div className="display" style={{ fontSize: 64, lineHeight: 1, color: variant === "A" ? "var(--ochre)" : "var(--ochre)" }}>
                {String(t.n).padStart(2, "0")}
              </div>
              <span className="sticker">{t.origin}</span>
            </div>
            <div className="display" style={{ fontSize: 28, lineHeight: 1.1 }}>{t.name}</div>
            <div className="mono" style={{ fontSize: 11, opacity: 0.7, marginTop: 6 }}>{t.style}</div>
            <div style={{ fontSize: 14, lineHeight: 1.4, marginTop: 16, opacity: 0.9 }}>{t.note}</div>
            <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px dashed currentColor", display: "flex", justifyContent: "space-between", fontSize: 13 }} className="mono">
              <span>{t.big}</span>
              <span>{t.small}</span>
            </div>
          </div>
        )}
      </div>

      {/* Cocktails strip */}
      <div className="kicker" style={{ marginBottom: 24 }}>Dal bar · cocktails</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "8px 40px" }}>
        {window.COCKTAILS.map((c) =>
        <div key={c.name} style={{ display: "flex", alignItems: "baseline", padding: "12px 0", borderBottom: "1px dashed color-mix(in oklab, currentColor 30%, transparent)" }}>
            <div>
              <div className="display" style={{ fontSize: 22 }}>{c.name}</div>
              <div style={{ fontSize: 13, opacity: 0.7, marginTop: 2 }}>{c.ing}</div>
            </div>
            <div className="leader"></div>
            <div className="mono">€ {c.price}</div>
          </div>
        )}
      </div>
    </section>);

}

function Events({ variant }) {
  return (
    <section className="section paper" id="eventi">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56 }}>
        <div>
          <div className="kicker">04 — Cosa succede</div>
          <h2 className="display" style={{ fontSize: 112, lineHeight: 0.9, margin: "16px 0 0" }}>
            Eventi &<br />
            <span style={{ color: "var(--blue)" }}>live music.</span>
          </h2>
        </div>
        <div style={{ textAlign: "right" }}>
          <div className="mono" style={{ fontSize: 12, opacity: 0.6 }}>Settimana 21</div>
          <div className="display" style={{ fontSize: 28 }}>maggio 2026</div>
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column" }}>
        {window.EVENTS.map((e, i) =>
        <a href="#" key={i} style={{
          display: "grid",
          gridTemplateColumns: "120px 1fr auto",
          alignItems: "center",
          gap: 40,
          padding: "32px 0",
          borderBottom: "1.5px solid currentColor",
          borderTop: i === 0 ? "1.5px solid currentColor" : "none",
          color: "inherit",
          textDecoration: "none",
          transition: "padding .2s ease"
        }}
        onMouseEnter={(e) => e.currentTarget.style.paddingLeft = "16px"}
        onMouseLeave={(e) => e.currentTarget.style.paddingLeft = "0"}>
          
            <div>
              <div className="display" style={{ fontSize: 56, lineHeight: 1, color: "var(--blue)" }}>{e.day}</div>
              <div className="mono" style={{ fontSize: 11, marginTop: 4 }}>{e.date}</div>
            </div>
            <div>
              <div className="display" style={{ fontSize: 42, lineHeight: 1.05 }}>{e.title}</div>
              <div style={{ fontSize: 15, opacity: 0.75, marginTop: 6 }}>{e.dj}</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div className="mono" style={{ fontSize: 13 }}>{e.hour}</div>
              <div style={{ marginTop: 12, fontSize: 24 }}>→</div>
            </div>
          </a>
        )}
      </div>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 48 }}>
        <p style={{ fontSize: 17, maxWidth: 520, margin: 0 }}>
          Vuoi suonare da noi? Siamo sempre alla ricerca di band, dj set su vinile, surf-rock,
          dub, reggae. <span className="script" style={{ fontSize: 26, color: "var(--blue)" }}>Scrivici.</span>
        </p>
        <a className="btn btn-primary" href="mailto:booking@dropsfregene.it">Booking <span className="arrow">→</span></a>
      </div>
    </section>);

}

function Gallery({ variant }) {
  return (
    <section className="section paper" id="gallery" style={{
      background: "rgba(0,0,0,0.28)",
      boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.4)"
    }}>
      {/* Instagram-style profile header */}
      <div style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 32, alignItems: "center", marginBottom: 56 }}>
        <div style={{
          width: 132, height: 132, borderRadius: "50%",
          padding: 4,
          background: "conic-gradient(from 90deg, #ffb648, #ff5d39, #d94a2e, #c98a3a, #ffb648)"
        }}>
          <div style={{ width: "100%", height: "100%", borderRadius: "50%", padding: 4, background: "var(--wood-base)" }}>
            <div style={{
              width: "100%", height: "100%", borderRadius: "50%",
              background: "#fff", display: "grid", placeItems: "center", overflow: "hidden"
            }}>
              <img src="assets/logo.png" alt="@dropsfregene" style={{ width: "112%", height: "112%", objectFit: "contain", marginLeft: "-6%", marginTop: "-3%" }} />
            </div>
          </div>
        </div>

        <div>
          <div className="kicker" style={{ marginBottom: 8 }}>04 — Dal nostro feed</div>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 8 }}>
            <div className="display" style={{ fontSize: 48, lineHeight: 1 }}>@dropsfregene</div>
            <span className="sticker">Verified ✓</span>
          </div>
          <div style={{ display: "flex", gap: 32, marginTop: 12, fontSize: 16 }}>
            <div><strong style={{ fontFamily: "Alfa Slab One, serif", fontSize: 22 }}>248</strong> <span style={{ opacity: 0.7 }}>Post</span></div>
            <div><strong style={{ fontFamily: "Alfa Slab One, serif", fontSize: 22 }}>1.247</strong> <span style={{ opacity: 0.7 }}>Follower</span></div>
            <div><strong style={{ fontFamily: "Alfa Slab One, serif", fontSize: 22 }}>312</strong> <span style={{ opacity: 0.7 }}>Seguiti</span></div>
          </div>
          <p style={{ fontSize: 15, lineHeight: 1.5, margin: "12px 0 0", maxWidth: 520, opacity: 0.85 }}>
            Drop's Food &amp; Beer · Fregene Beach · Surf · Skate · Birre artigianali · Live music. <br />
            📍 Via Marotta 130 — aperto fino a tardi.
          </p>
        </div>

        <a href="https://instagram.com/dropsfregene" className="btn btn-primary" style={{ alignSelf: "start" }}>
          Segui <span className="arrow">→</span>
        </a>
      </div>

      {/* Live Instagram feed via Behold.so widget — auto-syncs with @dropsfregene */}
      <div id="instagram-feed-embed">
        <behold-widget feed-id="62FsR9w265I0ZO1MAP7p"></behold-widget>
      </div>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 48, gap: 24, flexWrap: "wrap" }}>
        <div className="mono" style={{ fontSize: 11, opacity: 0.55, maxWidth: 560, lineHeight: 1.5 }}>FEED SINCRONIZZATO IN AUTOMATICO CON IL PROFILO @DROPSFREGENE

        </div>
        <a className="btn" href="https://instagram.com/dropsfregene">Vedi tutto su Instagram <span className="arrow">↗</span></a>
      </div>
    </section>);

}

function Info({ variant }) {
  return (
    <section className="section paper" id="info">
      <div className="kicker" style={{ marginBottom: 16 }}>05 — Quando · Dove</div>
      <h2 className="display" style={{ fontSize: 144, lineHeight: 0.88, margin: "0 0 56px" }}>
        Vieni a<br />
        <span style={{ color: "var(--blue)" }}>trovarci.</span>
      </h2>

      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 56 }}>
        {/* Map */}
        <div style={{
          position: "relative",
          borderRadius: 8,
          overflow: "hidden",
          height: 520,
          border: "1.5px solid currentColor",
          background: variant === "A" ?
          "linear-gradient(135deg, #1a3454 0%, #122844 60%, #0c1d33 100%)" :
          "linear-gradient(135deg, #122036 0%, #0a1828 100%)"
        }}>
          {/* Real Google Maps embed — stylized with CSS filters to match the warm/dark template */}
          <iframe
            title="Mappa Drop's Fregene"
            src="https://www.google.com/maps?q=Via+Marotta+130+Fregene+Roma&t=&z=15&ie=UTF8&iwloc=&output=embed"
            width="100%" height="100%"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            style={{
              position: "absolute", inset: 0, border: 0,
              filter: variant === "A" ?
              "sepia(0.5) saturate(1.2) hue-rotate(-12deg) brightness(0.85) contrast(1.05)" :
              "sepia(0.65) saturate(1.4) hue-rotate(-18deg) brightness(0.78) contrast(1.1)"
            }}>
          </iframe>

          {/* Warm overlay to fuse the map with the page palette */}
          <div style={{
            position: "absolute", inset: 0, pointerEvents: "none",
            background: variant === "A" ?
            "linear-gradient(135deg, rgba(26,52,84,0.28) 0%, rgba(58,35,22,0.35) 100%)" :
            "linear-gradient(135deg, rgba(18,32,54,0.30) 0%, rgba(29,17,8,0.40) 100%)",
            mixBlendMode: "multiply"
          }} />

          {/* Drop's pin marker overlay */}
          <div style={{
            position: "absolute",
            top: "50%", left: "50%",
            transform: "translate(-50%, -100%)",
            pointerEvents: "none",
            zIndex: 2,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            gap: 4
          }}>
            <div style={{
              background: "var(--ochre, #d97a3c)",
              color: "#1a0e07",
              padding: "6px 12px",
              borderRadius: 6,
              border: "1.5px solid #1a0e07",
              fontFamily: "Space Mono, monospace",
              fontSize: 12,
              fontWeight: 700,
              letterSpacing: "0.12em",
              boxShadow: "2px 2px 0 rgba(0,0,0,0.45)",
              whiteSpace: "nowrap"
            }}>
              DROP'S
            </div>
            <svg viewBox="0 0 24 32" width="32" height="42" style={{ filter: "drop-shadow(2px 3px 0 rgba(0,0,0,0.45))" }}>
              <path d="M12 0 C5 0 0 5 0 12 C0 22 12 32 12 32 C12 32 24 22 24 12 C24 5 19 0 12 0 Z"
              fill={variant === "A" ? "#e85a3a" : "#ff5d39"} stroke="#1a0e07" strokeWidth="1.5" />
              <circle cx="12" cy="12" r="5" fill="#1a0e07" />
            </svg>
          </div>
          <a href="https://maps.google.com/?q=Via+Marotta+130+Fregene"
          className="btn btn-primary"
          style={{ position: "absolute", bottom: 20, right: 20 }}>
            Apri in Maps <span className="arrow">↗</span>
          </a>
        </div>

        {/* Info column */}
        <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
          <div>
            <div className="mono" style={{ fontSize: 12, opacity: 0.6, marginBottom: 8 }}>Indirizzo</div>
            <div className="display" style={{ fontSize: 36, lineHeight: 1.1 }}>Via Marotta 130 - Fregene (Rm)</div>
            <div style={{ fontSize: 18, marginTop: 4 }}>00054 Fregene · Roma</div>
          </div>

          <div>
            <div className="mono" style={{ fontSize: 12, opacity: 0.6, marginBottom: 12 }}>Orari</div>
            <div style={{ display: "flex", flexDirection: "column" }}>
              {window.HOURS.map((h) =>
              <div key={h.d} style={{
                display: "flex",
                justifyContent: "space-between",
                padding: "10px 0",
                borderBottom: "1px dashed color-mix(in oklab, currentColor 30%, transparent)",
                opacity: h.off ? 0.5 : 1
              }}>
                  <span style={{ fontFamily: "EB Garamond, DM Serif Text, serif", fontSize: 17 }}>{h.d}</span>
                  <span className="mono" style={{ fontSize: 13 }}>{h.h}</span>
                </div>
              )}
            </div>
          </div>

          <div>
            <div className="mono" style={{ fontSize: 12, opacity: 0.6, marginBottom: 8 }}>Contatti</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <a href="tel:+393452331812" className="card" style={{ textDecoration: "none", color: "inherit" }}>
                <div className="mono" style={{ fontSize: 11, opacity: 0.6 }}>Telefono</div>
                <div className="display" style={{ fontSize: 20, marginTop: 4 }}>+39 345 233 1812</div>
              </a>
              <a href="https://instagram.com/dropsfregene" className="card" style={{ textDecoration: "none", color: "inherit" }}>
                <div className="mono" style={{ fontSize: 11, opacity: 0.6 }}>Instagram</div>
                <div className="display" style={{ fontSize: 20, marginTop: 4 }}>@dropsfregene</div>
              </a>
            </div>
          </div>

          <a className="btn btn-primary" href="#prenota" id="prenota" style={{ alignSelf: "flex-start" }}>
            Prenota un tavolo <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>);

}

function Footer({ variant }) {
  return (
    <footer className="section" style={{
      background: "rgba(0,0,0,0.55)",
      color: "var(--ink)",
      boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
      paddingTop: 80,
      paddingBottom: 40
    }}>
      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 48, marginBottom: 64 }}>
        <div>
          <img src="assets/logo-white.png" alt="Drop's Food & Beer"
          style={{
            width: 280, height: "auto", objectFit: "contain",
            display: "block"
          }} />
          <p style={{ fontSize: 16, lineHeight: 1.5, marginTop: 20, maxWidth: 360, opacity: 0.85 }}>
            Drop's Food & Beer · Fregene Beach.
            <br />Da quando esistiamo (2024) cerchiamo di rendere il mondo un posto
            un po' più salato, un po' più rumoroso e un po' più felice.
          </p>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 11, opacity: 0.5, marginBottom: 14 }}>Menu</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
            {["Il Pub", "Cucina", "Birre & drinks", "Updates", "Prenota"].map((t) =>
            <li key={t}><a href="#" style={{ color: "inherit", textDecoration: "none", fontSize: 16 }}>{t}</a></li>
            )}
          </ul>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 11, opacity: 0.5, marginBottom: 14 }}>Trovaci</div>
          <div style={{ fontSize: 16, lineHeight: 1.6 }}>
            Via Marotta 130<br />
            00054 Fregene<br />
            Roma, Italia
          </div>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 11, opacity: 0.5, marginBottom: 14 }}>Seguici</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
            <li><a href="https://instagram.com/dropsfregene" style={{ color: "inherit", textDecoration: "none", fontSize: 16 }}>Instagram ↗</a></li>
            <li><a href="#" style={{ color: "inherit", textDecoration: "none", fontSize: 16 }}>Spotify ↗</a></li>
          </ul>
        </div>
      </div>

      <div style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        paddingTop: 32,
        borderTop: "1px solid color-mix(in oklab, currentColor 30%, transparent)",
        fontSize: 12
      }} className="mono">
        <span>© 2026 DROP'S FREGENE · ICOPOINT SRLS | P. IVA 17580201006</span>
        <span>Made with sand in shoes · Fregene Beach</span>
      </div>
    </footer>);

}

window.MenuFood = MenuFood;
window.MenuBeer = MenuBeer;
window.EventsSection = Events;
window.GallerySection = Gallery;
window.InfoSection = Info;
window.FooterSection = Footer;