/* Vito's Wings — Home screen (Direction C — street poster) */

function ScreenHome({ lang, goto, openItem }) {
  const sauces = window.VW_SAUCES;
  const specialties = window.VW_MENU.find(c => c.id === "specialties").items;

  return (
    <div>
      {/* ============ POSTER HERO ============ */}
      <section style={{
        padding: "20px 6vw 0",
        position: "relative",
        minHeight: "92vh",
        display: "flex", flexDirection: "column",
        background: "#F1ECDD",
      }}>
        {/* Halftone backdrop */}
        <div className="vw-halftone-fade" style={{
          position: "absolute", inset: 0, pointerEvents: "none",
        }} />

        {/* Top tagline strip — centered headline, address/est underneath */}
        <div style={{ position: "relative", zIndex: 1, borderBottom: "2px solid #0A0A0A" }}>
          <div style={{
            textAlign: "center", padding: "4px 0 8px",
            fontSize: 12, letterSpacing: "0.26em", textTransform: "uppercase",
            fontWeight: 700,
          }}>★ &nbsp; {lang === "es" ? "EL SPOT OFICIAL DE ALITAS" : "THE OFFICIAL WING SPOT"} &nbsp; ★</div>
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            paddingBottom: 10,
            fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase",
            color: "rgba(10,10,10,0.7)",
          }}>
            <span>PLAZA MACUELIZO · TGU · HN</span>
            <span>EST. 2024</span>
          </div>
        </div>

        {/* Main poster composition */}
        <div style={{ flex: 1, position: "relative", display: "flex", alignItems: "center", justifyContent: "center", padding: "40px 0", zIndex: 1 }}>
          {/* Stamp top-left */}
          <div style={{
            position: "absolute", top: 24, left: "2%",
            border: "2px solid #E63426", padding: "10px 14px",
            color: "#E63426", transform: "rotate(-8deg)", textAlign: "center",
            fontSize: 11, letterSpacing: "0.2em", fontWeight: 700,
            background: "rgba(241,236,221,0.85)",
            fontFamily: "'DM Sans', sans-serif",
          }}>
            <div>{lang === "es" ? "APROBADO" : "APPROVED"}</div>
            <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 30, color: "#E63426", letterSpacing: 0, padding: "2px 0" }}>{lang === "es" ? "POR VITO" : "BY VITO"}</div>
            <div>★ ★ ★ ★ ★</div>
          </div>

          {/* Sticker top-right */}
          <div style={{
            position: "absolute", top: 28, right: "2%",
            background: "#E63426", color: "#F6F4EF",
            padding: "12px 16px", fontSize: 10, letterSpacing: "0.22em", fontWeight: 700,
            textAlign: "center", transform: "rotate(6deg)",
            boxShadow: "4px 4px 0 #0A0A0A",
            fontFamily: "'DM Sans', sans-serif",
          }}>
            {lang === "es" ? "NUEVO" : "NEW"}<br />
            <span style={{ fontFamily: "'Anton', sans-serif", fontSize: 22, letterSpacing: 0 }}>HOT LEMON<br />PEPPER</span>
          </div>

          {/* Stacked wordmark */}
          <div style={{
            display: "flex", flexDirection: "column", alignItems: "center",
            fontFamily: "'Anton', sans-serif", lineHeight: 0.85, letterSpacing: "-0.005em",
          }}>
            <div style={{ fontSize: "clamp(96px, 18vw, 260px)", lineHeight: 0.82 }}>VITO&rsquo;S</div>
            <div style={{ margin: "4px 0" }}>
              <img src="assets/vitos-icon.png" alt="Vito the pug" style={{ height: "clamp(110px, 15vw, 200px)" }} />
            </div>
            <div style={{ fontSize: "clamp(96px, 18vw, 260px)", lineHeight: 0.82, color: "#E63426" }}>WINGS</div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, letterSpacing: "0.3em", marginTop: 16, fontWeight: 700, textAlign: "center" }}>
              {lang === "es" ? "SALSAS DE LA CASA · DOG FRIENDLY · DESDE 2024" : "HANDMADE SAUCES · DOG FRIENDLY · SINCE 2024"}
            </div>
          </div>

          {/* Sticker bottom-left */}
          <div style={{
            position: "absolute", bottom: 30, left: "2%",
            background: "#0A0A0A", color: "#F6F4EF",
            padding: "12px 14px", textAlign: "center", transform: "rotate(-5deg)",
            boxShadow: "4px 4px 0 #E63426",
          }}>
            <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 36, lineHeight: 0.85 }}>10</div>
            <div style={{ fontSize: 9, letterSpacing: "0.22em", fontFamily: "'DM Sans', sans-serif", fontWeight: 700 }}>{lang === "es" ? "SALSAS DE LA CASA" : "HOUSE SAUCES"}</div>
          </div>

          {/* Sticker CTA bottom-right */}
          <button onClick={() => goto("menu")} style={{
            position: "absolute", bottom: 30, right: "2%",
            appearance: "none",
            background: "#F6F4EF", border: "2px solid #0A0A0A", color: "#0A0A0A",
            padding: "16px 22px", textAlign: "left",
            fontFamily: "'Anton', sans-serif", fontSize: 28, letterSpacing: "0.06em",
            transform: "rotate(4deg)", boxShadow: "6px 6px 0 #0A0A0A",
            cursor: "pointer", lineHeight: 0.9,
            transition: "transform 0.15s, box-shadow 0.15s",
          }}
            onMouseEnter={e => { e.currentTarget.style.transform = "rotate(4deg) translate(-2px,-2px)"; e.currentTarget.style.boxShadow = "8px 8px 0 #0A0A0A"; }}
            onMouseLeave={e => { e.currentTarget.style.transform = "rotate(4deg)"; e.currentTarget.style.boxShadow = "6px 6px 0 #0A0A0A"; }}
          >
            {lang === "es" ? "ORDENAR" : "ORDER NOW"}
            <div style={{ fontSize: 11, letterSpacing: "0.22em", color: "#E63426", fontFamily: "'DM Sans', sans-serif", fontWeight: 700, marginTop: 4 }}>{lang === "es" ? "RECOGER · 15 MIN" : "PICKUP · 15 MIN"} →</div>
          </button>
        </div>

        {/* Bottom sauce strip */}
        <div style={{
          display: "flex", justifyContent: "center", flexWrap: "wrap", gap: "8px 18px",
          fontFamily: "'Anton', sans-serif", fontSize: 16, letterSpacing: "0.14em",
          paddingTop: 14, borderTop: "2px solid #0A0A0A",
          position: "relative", zIndex: 1,
        }}>
          {sauces.map((s, i) => (
            <React.Fragment key={s.id}>
              <span style={{ color: window.HEAT_COLOR[s.heat] || "#0A0A0A", display: "inline-flex", alignItems: "center", gap: 6 }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: window.HEAT_COLOR[s.heat] }} />
                {s[lang].toUpperCase()}
              </span>
              {i < sauces.length - 1 && <span style={{ color: "rgba(10,10,10,0.4)" }}>·</span>}
            </React.Fragment>
          ))}
        </div>
      </section>

      {/* ============ NEWSPAPER GRID ============ */}
      <section style={{ padding: "80px 6vw 60px", borderTop: "1px solid #0A0A0A", position: "relative" }}>
        <SectionHeader
          kicker={lang === "es" ? "Hoy en el mostrador" : "Today on the counter"}
          title={lang === "es" ? "Las que pides siempre." : "The ones you always order."}
        />

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: "2px solid #0A0A0A" }} className="vw-3col">
          {specialties.map((it, i) => (
            <div key={it.id} style={{
              padding: 28,
              borderRight: i < specialties.length - 1 ? "2px solid #0A0A0A" : "none",
              background: i === 1 ? "#F6F4EF" : "#F1ECDD",
              display: "flex", flexDirection: "column", gap: 12, position: "relative",
              minHeight: 320,
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 14, letterSpacing: "0.22em", color: "#E63426" }}>N° 0{i + 1}</div>
                {it.id === "alitas" && <div style={{ background: "#E63426", color: "#F6F4EF", padding: "4px 8px", fontFamily: "'Anton', sans-serif", fontSize: 11, letterSpacing: "0.18em", transform: "rotate(3deg)" }}>★ TOP SELLER</div>}
              </div>
              <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 72, lineHeight: 0.85, letterSpacing: "-0.01em" }}>
                {it[lang].toUpperCase()}
              </div>
              <p style={{ margin: 0, fontSize: 13, lineHeight: 1.6, color: "rgba(10,10,10,0.75)" }}>{it["desc_" + lang]}</p>
              <div style={{ marginTop: "auto", display: "flex", gap: 12, flexWrap: "wrap", paddingTop: 10, borderTop: "1px dashed rgba(10,10,10,0.3)" }}>
                {it.sizes.map(s => (
                  <div key={s.k} style={{ fontFamily: "'Anton', sans-serif", letterSpacing: "0.04em" }}>
                    <div style={{ fontSize: 10, letterSpacing: "0.2em", opacity: 0.6, fontFamily: "'DM Sans', sans-serif", fontWeight: 700 }}>{s.k} {lang === "es" ? "UND" : "PCS"}</div>
                    <div style={{ fontSize: 22, color: "#E63426" }}>{fmtL(s.p)}</div>
                  </div>
                ))}
              </div>
              <button onClick={() => openItem(it)} style={{
                appearance: "none", background: "#0A0A0A", color: "#F6F4EF",
                border: 0, padding: "12px 16px", fontFamily: "'Anton', sans-serif",
                fontSize: 14, letterSpacing: "0.14em", cursor: "pointer",
                display: "flex", justifyContent: "space-between", alignItems: "center",
              }}>
                <span>{t("add_to_order", lang).toUpperCase()}</span><span>+</span>
              </button>
            </div>
          ))}
        </div>
      </section>

      {/* ============ AI POSTER STRIP ============ */}
      <section style={{ padding: "80px 6vw", background: "#0A0A0A", color: "#F6F4EF", borderTop: "2px solid #0A0A0A", position: "relative", overflow: "hidden" }}>
        <div className="vw-halftone-fade" style={{ position: "absolute", inset: 0, opacity: 0.04, backgroundImage: "radial-gradient(#F6F4EF 1px, transparent 1.2px)", backgroundSize: "12px 12px" }} />
        <div style={{ position: "relative", zIndex: 1 }}>
          <div style={{ marginBottom: 32 }}>
            <div style={{ fontSize: 11, letterSpacing: "0.22em", color: "#E63426", marginBottom: 8, fontWeight: 700 }}>▌ {t("ai_title", lang).toUpperCase()}</div>
            <h2 style={{ fontFamily: "'Anton', sans-serif", fontSize: "clamp(40px, 6vw, 84px)", lineHeight: 0.88, margin: 0, letterSpacing: "-0.01em" }}>
              {lang === "es" ? "UN MENÚ QUE TE CONOCE." : "A MENU THAT KNOWS YOU."}
            </h2>
            <p style={{ marginTop: 12, fontSize: 16, lineHeight: 1.5, maxWidth: 640, color: "rgba(246,244,239,0.7)" }}>{t("ai_sub", lang)}</p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }}>
            {[
              { k: "ai_pair",    icon: "↔", desc_en: "Tell us what you're craving — we suggest sauces, sides, and a drink that pings.", desc_es: "Cuéntanos qué se te antoja — sugerimos salsas, acompañamientos y una bebida que pegue." },
              { k: "ai_combo",   icon: "▣", desc_en: "How many people, what's your budget — get a combo built around it.", desc_es: "Cuántas personas, qué presupuesto — armamos un combo a la medida." },
              { k: "ai_voice",   icon: "🎙", desc_en: "Hands greasy? Order out loud. We read it back in Spanglish.", desc_es: "Manos sucias? Ordena en voz alta. Te lo confirmamos en spanglish." },
              { k: "ai_loyalty", icon: "★", desc_en: "Earn stamps. We predict what you'll want next time and free a wing.", desc_es: "Gana sellos. Predecimos lo que vas a querer y te regalamos una alita." },
            ].map((f, i) => (
              <button key={i} onClick={() => goto("ai")} style={{
                appearance: "none", textAlign: "left",
                background: "transparent", border: "1px solid rgba(246,244,239,0.3)",
                padding: 22, cursor: "pointer", display: "flex", flexDirection: "column", gap: 8,
                color: "#F6F4EF", fontFamily: "'DM Sans', sans-serif",
                transition: "background 0.15s, border-color 0.15s, transform 0.15s",
              }}
                onMouseEnter={e => { e.currentTarget.style.background = "rgba(230,52,38,0.08)"; e.currentTarget.style.borderColor = "#E63426"; e.currentTarget.style.transform = "translate(-2px,-2px)"; }}
                onMouseLeave={e => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.borderColor = "rgba(246,244,239,0.3)"; e.currentTarget.style.transform = ""; }}
              >
                <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 36, color: "#E63426" }}>{f.icon}</div>
                <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 22, letterSpacing: "0.04em" }}>{t(f.k, lang).toUpperCase()}</div>
                <div style={{ fontSize: 13, lineHeight: 1.5, color: "rgba(246,244,239,0.7)" }}>{f["desc_" + lang]}</div>
                <div style={{ marginTop: "auto", fontSize: 11, letterSpacing: "0.22em", color: "#E63426", fontWeight: 700 }}>{lang === "es" ? "PROBAR →" : "TRY IT →"}</div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* ============ LOCATION FOOTER STRIP ============ */}
      <section style={{ padding: "80px 6vw", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "stretch", borderTop: "2px solid #0A0A0A", background: "#F1ECDD", position: "relative" }} className="vw-2col">
        <div className="vw-halftone-fade" style={{ position: "absolute", inset: 0, pointerEvents: "none" }} />
        <div style={{ position: "relative", zIndex: 1 }}>
          <div style={{ fontSize: 11, letterSpacing: "0.22em", color: "#E63426", marginBottom: 8, fontWeight: 700 }}>▌ {t("find_title", lang).toUpperCase()}</div>
          <h2 style={{ fontFamily: "'Anton', sans-serif", fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 0.9, margin: 0 }}>
            PLAZA<br />MACUELIZO.
          </h2>
          <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 8, fontSize: 15 }}>
            <div>{t("find_address", lang)}</div>
            <div>+504 9216-9788</div>
            <div>{t("hours_sw", lang)}</div>
            <div>{t("hours_ts", lang)}</div>
          </div>
          <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <GhostBtn onClick={() => goto("find")}>{lang === "es" ? "VER MAPA →" : "VIEW MAP →"}</GhostBtn>
            <a href="https://instagram.com/vitoswings" target="_blank" rel="noopener" style={{ textDecoration: "none" }}>
              <GhostBtn onClick={() => {}}>@VITOSWINGS</GhostBtn>
            </a>
          </div>
        </div>
        <div style={{ minHeight: 320 }}>
          <EmbedMap query="Plaza Macuelizo, Tegucigalpa, Honduras" zoom={16} height={320} />
        </div>
      </section>
      {/* ============ MISSION STRIP ============ */}
      <section style={{ padding: "80px 6vw", borderTop: "2px solid #0A0A0A", background: "#F6F4EF", position: "relative" }}>
        <div className="vw-halftone-fade" style={{ position: "absolute", inset: 0, pointerEvents: "none" }} />
        <div style={{ position: "relative", zIndex: 1 }}>
          <div style={{ fontSize: 11, letterSpacing: "0.22em", color: "#E63426", marginBottom: 12, fontWeight: 700 }}>▌ {t("mission_kicker", lang).toUpperCase()}</div>
          <h2 style={{ fontFamily: "'Anton', sans-serif", fontSize: "clamp(40px, 6vw, 84px)", lineHeight: 0.88, margin: 0, letterSpacing: "-0.01em", maxWidth: 900 }}>
            {t("mission_title", lang)}
          </h2>

          <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 0, border: "2px solid #0A0A0A" }}>
            {window.VW_VALUES.map((v, i) => (
              <div key={v.id} style={{
                padding: 24,
                borderRight: i < window.VW_VALUES.length - 1 ? "2px solid #0A0A0A" : "none",
                background: i % 2 === 0 ? "#F6F4EF" : "#F1ECDD",
                display: "flex", flexDirection: "column", gap: 10, minHeight: 220,
              }}>
                <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 14, letterSpacing: "0.22em", color: "#E63426" }}>0{i + 1}</div>
                <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 28, lineHeight: 0.9, letterSpacing: "-0.005em" }}>{v[lang].toUpperCase()}</div>
                <p style={{ margin: 0, fontSize: 13, lineHeight: 1.55, color: "rgba(10,10,10,0.78)" }}>{v["body_" + lang]}</p>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 32, background: "#0A0A0A", color: "#F6F4EF", padding: "32px 28px", textAlign: "center" }}>
            <div style={{ fontFamily: "'Anton', sans-serif", fontSize: "clamp(24px, 3vw, 40px)", lineHeight: 1, letterSpacing: "-0.005em", maxWidth: 820, margin: "0 auto" }}>
              {lang === "es"
                ? "“PREFERIMOS REHACER UNA ORDEN QUE VERTE SALIR A MEDIAS.”"
                : "“WE'D RATHER REMAKE AN ORDER THAN WATCH YOU LEAVE HALF-SATISFIED.”"}
            </div>
            <div style={{ marginTop: 12, fontSize: 11, letterSpacing: "0.22em", color: "rgba(246,244,239,0.55)" }}>
              — VITO&rsquo;S WINGS · {lang === "es" ? "POLÍTICA FAMILIAR" : "FAMILY POLICY"}
            </div>
          </div>
        </div>
      </section>

      {/* ============ STORY TEASER — poster style ============ */}
      <section style={{ padding: "80px 6vw", position: "relative", borderTop: "2px solid #0A0A0A", background: "#F6F4EF" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 60, alignItems: "center" }} className="vw-2col">
          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.22em", color: "#E63426", marginBottom: 12, fontWeight: 700 }}>▌ {t("story_kicker", lang).toUpperCase()}</div>
            <h2 style={{ fontFamily: "'Anton', sans-serif", fontSize: "clamp(44px, 6vw, 84px)", lineHeight: 0.86, margin: 0, letterSpacing: "-0.01em" }}>{t("story_title", lang)}</h2>
            <p style={{ marginTop: 24, fontSize: 16, lineHeight: 1.65, maxWidth: 540 }}>{t("story_p1", lang)}</p>
            <div style={{ marginTop: 24 }}>
              <GhostBtn onClick={() => goto("story")}>{lang === "es" ? "LEER LA HISTORIA →" : "READ THE STORY →"}</GhostBtn>
            </div>
          </div>
          <div style={{ position: "relative", padding: 24 }}>
            {/* Stamp behind */}
            <div style={{
              position: "absolute", top: -14, left: -10, zIndex: 1,
              background: "#E63426", color: "#F6F4EF",
              padding: "8px 12px", fontFamily: "'Anton', sans-serif", fontSize: 14, letterSpacing: "0.14em",
              transform: "rotate(-10deg)", boxShadow: "3px 3px 0 #0A0A0A",
            }}>EST. 2024</div>
            <div style={{
              background: "#F1ECDD", border: "2px solid #0A0A0A", padding: 32,
              display: "flex", flexDirection: "column", alignItems: "center", gap: 16,
              position: "relative", boxShadow: "10px 10px 0 #0A0A0A",
            }} className="vw-halftone">
              <div style={{ background: "#F1ECDD", padding: 12, position: "relative", zIndex: 1 }}>
                <img src="assets/vitos-icon.png" alt="Vito the pug" style={{ width: "70%", maxWidth: 260, display: "block", margin: "0 auto" }} />
              </div>
              <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 18, letterSpacing: "0.14em", textAlign: "center", background: "#F1ECDD", padding: "4px 8px", zIndex: 1 }}>{t("story_pug", lang)}</div>
            </div>
          </div>
        </div>
      </section>

    </div>
  );
}

window.ScreenHome = ScreenHome;