/* Vito's Wings — Story, Mission, Find Us, Catering, Loyalty */

// ============== STORY ==============
function ScreenStory({ lang }) {
  return (
    <section style={{ padding: "60px 6vw 100px" }}>
      <SectionHeader kicker={t("story_kicker", lang)} title={t("story_title", lang)} />

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56, alignItems: "start" }} className="vw-2col">
        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          {/* Chapter 1 */}
          <div>
            <div style={{ display: "flex", gap: 16, alignItems: "baseline", marginBottom: 8 }}>
              <span style={{ fontFamily: "'Anton', sans-serif", fontSize: 64, color: "#E63426", lineHeight: 0.8 }}>01</span>
              <span style={{ fontFamily: "'Anton', sans-serif", fontSize: 22, letterSpacing: "0.14em" }}>{lang === "es" ? "EL HÁBITO" : "THE HABIT"}</span>
            </div>
            <p style={{ fontSize: 17, lineHeight: 1.7, margin: 0 }}>{t("story_p1", lang)}</p>
          </div>
          {/* Chapter 2 */}
          <div>
            <div style={{ display: "flex", gap: 16, alignItems: "baseline", marginBottom: 8 }}>
              <span style={{ fontFamily: "'Anton', sans-serif", fontSize: 64, color: "#E63426", lineHeight: 0.8 }}>02</span>
              <span style={{ fontFamily: "'Anton', sans-serif", fontSize: 22, letterSpacing: "0.14em" }}>{lang === "es" ? "EL ALA CAÍDA" : "THE FALLEN WING"}</span>
            </div>
            <p style={{ fontSize: 17, lineHeight: 1.7, margin: 0 }}>{t("story_p2", lang)}</p>
          </div>
          {/* Chapter 3 */}
          <div>
            <div style={{ display: "flex", gap: 16, alignItems: "baseline", marginBottom: 8 }}>
              <span style={{ fontFamily: "'Anton', sans-serif", fontSize: 64, color: "#E63426", lineHeight: 0.8 }}>03</span>
              <span style={{ fontFamily: "'Anton', sans-serif", fontSize: 22, letterSpacing: "0.14em" }}>{lang === "es" ? "ATLANTA → TGU" : "ATLANTA → TGU"}</span>
            </div>
            <p style={{ fontSize: 17, lineHeight: 1.7, margin: 0 }}>{t("story_p3", lang)}</p>
          </div>

          {/* Timeline */}
          <div style={{ marginTop: 12, borderTop: "1px solid #0A0A0A", paddingTop: 24 }}>
            <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 16, letterSpacing: "0.2em", marginBottom: 16 }}>{lang === "es" ? "LÍNEA DE TIEMPO" : "TIMELINE"}</div>
            {[
              { y: "2021", en: "Vito the pug enters the family.", es: "Vito el pug llega a la familia." },
              { y: "2023", en: "Wing-tasting tour through Atlanta, GA.", es: "Tour de alitas por Atlanta, GA." },
              { y: "2024", en: "Vito's Wings opens in Plaza Macuelizo.", es: "Vito's Wings abre en Plaza Macuelizo." },
              { y: "2025", en: "10th sauce — Hot Honey — joins the lineup.", es: "Décima salsa — Hot Honey — se une al menú." },
              { y: "2026", en: "AI pairing assistant lands online.", es: "Llega el asistente de maridaje con IA." },
            ].map(t1 => (
              <div key={t1.y} style={{ display: "grid", gridTemplateColumns: "80px 1fr", gap: 12, padding: "10px 0", borderBottom: "1px dashed rgba(10,10,10,0.2)" }}>
                <div style={{ fontFamily: "'Anton', sans-serif", color: "#E63426", fontSize: 22 }}>{t1.y}</div>
                <div style={{ fontSize: 14 }}>{t1[lang]}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Pug sidebar */}
        <aside style={{ position: "sticky", top: 100, display: "flex", flexDirection: "column", gap: 16 }}>
          <div style={{ background: "#F1ECDD", border: "1px solid #0A0A0A", padding: 28, position: "relative" }}>
            <img src="assets/vitos-icon.png" alt="Vito" style={{ width: "100%" }} />
            <div style={{
              position: "absolute", top: -14, right: -10,
              background: "#E63426", color: "#F6F4EF",
              padding: "8px 12px", fontFamily: "'Anton', sans-serif", fontSize: 12, letterSpacing: "0.14em",
              transform: "rotate(8deg)",
            }}>★ STAFF</div>
            <div style={{ marginTop: 16, fontFamily: "'Anton', sans-serif", fontSize: 22, letterSpacing: "0.08em", textAlign: "center" }}>VITO</div>
            <div style={{ fontSize: 12, letterSpacing: "0.2em", textAlign: "center", color: "rgba(10,10,10,0.65)" }}>{t("story_pug", lang).split(" · ")[1]}</div>
          </div>
          <div style={{ background: "#0A0A0A", color: "#F6F4EF", padding: 24 }}>
            <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 16, letterSpacing: "0.18em", color: "#E63426" }}>{lang === "es" ? "DATO CURIOSO" : "FUN FACT"}</div>
            <p style={{ fontSize: 14, lineHeight: 1.6, marginTop: 10 }}>
              {lang === "es"
                ? "Vito ya no puede comer las alitas, pero supervisa la cocina cada mañana. Le pagamos en tocino."
                : "Vito can't actually eat the wings anymore, but he supervises the kitchen every morning. We pay him in bacon."}
            </p>
          </div>
        </aside>
      </div>
    </section>
  );
}

// ============== MISSION ==============
function ScreenMission({ lang }) {
  return (
    <section style={{ padding: "60px 6vw 100px" }}>
      <SectionHeader kicker={t("mission_kicker", lang)} title={t("mission_title", lang)} />

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

      <div style={{ marginTop: 60, background: "#0A0A0A", color: "#F6F4EF", padding: "48px 32px", textAlign: "center" }}>
        <div style={{ fontFamily: "'Anton', sans-serif", fontSize: "clamp(28px, 4vw, 56px)", lineHeight: 0.95, letterSpacing: "-0.01em", maxWidth: 760, 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: 16, fontSize: 13, letterSpacing: "0.22em", color: "rgba(246,244,239,0.6)" }}>
          — VITO&rsquo;S WINGS · FAMILY POLICY
        </div>
      </div>
    </section>
  );
}

// ============== FIND US ==============
function ScreenFind({ lang }) {
  return (
    <section style={{ padding: "60px 6vw 100px" }}>
      <SectionHeader kicker={t("nav_find", lang)} title={t("find_title", lang)} />

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 40 }} className="vw-2col">
        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          <Block title={lang === "es" ? "DIRECCIÓN" : "ADDRESS"}>
            <div style={{ fontSize: 18 }}>{t("find_address", lang)}</div>
          </Block>
          <Block title={lang === "es" ? "CONTACTO" : "CONTACT"}>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <a href="tel:+50492169788" style={contactLink}>📞 +504 9216-9788</a>
              <a href="https://wa.me/50492169788" target="_blank" rel="noopener" style={contactLink}>💬 WhatsApp</a>
              <a href="https://instagram.com/vitoswings" target="_blank" rel="noopener" style={contactLink}>📷 @vitoswings</a>
            </div>
          </Block>
          <Block title={t("find_hours", lang).toUpperCase()}>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 15 }}>
              <div style={{ display: "flex", justifyContent: "space-between" }}><span>{lang === "es" ? "Dom — Mié" : "Sun — Wed"}</span><span style={{ fontFamily: "'Anton', sans-serif", color: "#E63426" }}>11A — 9P</span></div>
              <div style={{ display: "flex", justifyContent: "space-between" }}><span>{lang === "es" ? "Jue — Sáb" : "Thu — Sat"}</span><span style={{ fontFamily: "'Anton', sans-serif", color: "#E63426" }}>11A — 10P</span></div>
            </div>
          </Block>
          <Block title={t("delivery_apps", lang).toUpperCase()}>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {["PedidosYa"].map(a => (
                <div key={a} style={{ border: "1px solid #0A0A0A", padding: "10px 14px", fontFamily: "'Anton', sans-serif", letterSpacing: "0.1em", fontSize: 14 }}>{a.toUpperCase()}</div>
              ))}
            </div>
          </Block>
        </div>

        <div style={{ minHeight: 540 }}>
          <EmbedMap query="Plaza Macuelizo, Tegucigalpa, Honduras" zoom={16} height={540} />
        </div>
      </div>

      {/* RESERVATIONS */}
      <ReservationForm lang={lang} />
    </section>
  );
}

// ============== RESERVATIONS ==============
function ReservationForm({ lang }) {
  const [pax, setPax] = useState(2);
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [date, setDate] = useState("");
  const [time, setTime] = useState("");
  const [notes, setNotes] = useState("");
  const [confirmed, setConfirmed] = useState(false);

  // sensible date floor: today
  const todayStr = React.useMemo(() => {
    const d = new Date();
    const yyyy = d.getFullYear();
    const mm = String(d.getMonth() + 1).padStart(2, "0");
    const dd = String(d.getDate()).padStart(2, "0");
    return `${yyyy}-${mm}-${dd}`;
  }, []);

  // time slots based on weekday (rough)
  const timeSlots = ["11:30", "12:00", "13:00", "14:00", "18:00", "19:00", "19:30", "20:00", "20:30", "21:00"];

  function submit(e) {
    e.preventDefault();
    if (!name || !phone || !date || !time) return;

    // Build WhatsApp message to send to restaurant
    const lines = [
      "📅 *Nueva reserva en Vito’s Wings*",
      "",
      "👤 *Nombre:* " + name,
      "📱 *WhatsApp:* " + phone,
      "📆 *Día:* " + date,
      "⏰ *Hora:* " + time,
      "👫 *Personas:* " + pax,
    ];
    if (notes) lines.push("📝 *Notas:* " + notes);
    lines.push("", "_Enviado desde vitoswings.com_");
    const msg = encodeURIComponent(lines.join("\n"));
    // Open WhatsApp chat to restaurant with pre-filled message
    const waUrl = "https://wa.me/50492169788?text=" + msg;
    window.open(waUrl, "_blank", "noopener");

    setConfirmed(true);
  }

  function reset() {
    setConfirmed(false);
    setName(""); setPhone(""); setDate(""); setTime(""); setNotes(""); setPax(2);
  }

  return (
    <div style={{ marginTop: 64, borderTop: "2px solid #0A0A0A", paddingTop: 48 }}>
      <div style={{ marginBottom: 28 }}>
        <div style={{ fontSize: 11, letterSpacing: "0.22em", color: "#E63426", fontWeight: 700 }}>▌ {lang === "es" ? "RESERVA TU MESA" : "BOOK A TABLE"}</div>
        <h3 style={{ fontFamily: "'Anton', sans-serif", fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 0.9, margin: "10px 0 0", letterSpacing: "-0.01em" }}>
          {lang === "es" ? "TE GUARDAMOS LUGAR." : "WE'LL SAVE YOU A SPOT."}
        </h3>
        <p style={{ marginTop: 10, fontSize: 14, lineHeight: 1.5, color: "rgba(10,10,10,0.65)", maxWidth: 540 }}>
          {lang === "es"
            ? "Confirmamos por WhatsApp en menos de 30 min. Grupos de 8+ llamanos directo."
            : "We'll confirm by WhatsApp in under 30 min. Groups of 8+ should call us."}
        </p>
      </div>

      {confirmed ? (
        <div style={{ background: "#0A0A0A", color: "#F6F4EF", padding: "32px 28px", display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start", position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", top: -10, right: -10, opacity: 0.08 }}>
            <img src="assets/vitos-icon.png" alt="" style={{ height: 200, filter: "invert(1)" }} />
          </div>
          <div style={{ fontSize: 11, letterSpacing: "0.22em", color: "#E63426", fontWeight: 700, position: "relative", zIndex: 1 }}>✓ {lang === "es" ? "RESERVA RECIBIDA" : "BOOKING RECEIVED"}</div>
          <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 36, lineHeight: 1, position: "relative", zIndex: 1 }}>
            {lang === "es" ? "TE ESPERAMOS, " : "SEE YOU, "}{name.split(" ")[0].toUpperCase()}.
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 14, marginTop: 6, fontSize: 13, position: "relative", zIndex: 1 }}>
            <div><div style={{ opacity: 0.55, fontSize: 10, letterSpacing: "0.22em" }}>{lang === "es" ? "DÍA" : "DATE"}</div><div style={{ fontFamily: "'Anton', sans-serif", fontSize: 20, marginTop: 2 }}>{date}</div></div>
            <div><div style={{ opacity: 0.55, fontSize: 10, letterSpacing: "0.22em" }}>{lang === "es" ? "HORA" : "TIME"}</div><div style={{ fontFamily: "'Anton', sans-serif", fontSize: 20, marginTop: 2, color: "#E63426" }}>{time}</div></div>
            <div><div style={{ opacity: 0.55, fontSize: 10, letterSpacing: "0.22em" }}>{lang === "es" ? "PERSONAS" : "GUESTS"}</div><div style={{ fontFamily: "'Anton', sans-serif", fontSize: 20, marginTop: 2 }}>{pax}</div></div>
            <div><div style={{ opacity: 0.55, fontSize: 10, letterSpacing: "0.22em" }}>{lang === "es" ? "CONTACTO" : "CONTACT"}</div><div style={{ fontFamily: "'Anton', sans-serif", fontSize: 16, marginTop: 2 }}>{phone}</div></div>
          </div>
          <div style={{ marginTop: 8, fontSize: 12, opacity: 0.7, position: "relative", zIndex: 1 }}>
            💬 {lang === "es" ? "Se abrió WhatsApp con tu reserva. Confirma enviándonos el mensaje." : "WhatsApp opened with your booking. Send the message to confirm."}
          </div>
          <button onClick={reset} style={{
            appearance: "none", marginTop: 10, border: "1px solid rgba(246,244,239,0.4)", background: "transparent",
            color: "#F6F4EF", padding: "10px 14px", fontFamily: "'Anton', sans-serif",
            fontSize: 12, letterSpacing: "0.16em", cursor: "pointer", position: "relative", zIndex: 1,
          }}>
            ← {lang === "es" ? "HACER OTRA RESERVA" : "MAKE ANOTHER"}
          </button>
        </div>
      ) : (
        <form onSubmit={submit} style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 28 }} className="vw-2col">
          {/* Left column: name + phone + date + time slots */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <ResvField label={lang === "es" ? "A NOMBRE DE" : "NAME"}>
              <input required value={name} onChange={e => setName(e.target.value)} placeholder={lang === "es" ? "Tu nombre completo" : "Your full name"} style={inputStyleR} />
            </ResvField>
            <ResvField label={lang === "es" ? "WHATSAPP" : "WHATSAPP"}>
              <input required type="tel" value={phone} onChange={e => setPhone(e.target.value)} placeholder="+504 ____-____" style={inputStyleR} />
            </ResvField>
            <ResvField label={lang === "es" ? "DÍA" : "DATE"}>
              <input required type="date" value={date} min={todayStr} onChange={e => setDate(e.target.value)} style={inputStyleR} />
            </ResvField>
            <ResvField label={lang === "es" ? "HORA" : "TIME"}>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {timeSlots.map(slot => (
                  <button type="button" key={slot} onClick={() => setTime(slot)} style={{
                    appearance: "none",
                    border: time === slot ? "2px solid #E63426" : "1px solid #0A0A0A",
                    background: time === slot ? "#E63426" : "transparent",
                    color: time === slot ? "#F6F4EF" : "#0A0A0A",
                    padding: "10px 14px", fontFamily: "'Anton', sans-serif",
                    letterSpacing: "0.06em", fontSize: 15, cursor: "pointer",
                  }}>{slot}</button>
                ))}
              </div>
            </ResvField>
            <ResvField label={lang === "es" ? "NOTAS (OPCIONAL)" : "NOTES (OPTIONAL)"}>
              <textarea value={notes} onChange={e => setNotes(e.target.value)}
                placeholder={lang === "es" ? "Cumpleaños, alergia, mesa al aire libre..." : "Birthday, allergy, outdoor table..."}
                style={{ ...inputStyleR, minHeight: 60, resize: "vertical" }} />
            </ResvField>
          </div>

          {/* Right column: guest counter + CTA */}
          <aside style={{ background: "#F1ECDD", border: "2px solid #0A0A0A", padding: 28, alignSelf: "start", boxShadow: "8px 8px 0 #0A0A0A" }} className="vw-halftone">
            <div style={{ position: "relative", background: "#F1ECDD", zIndex: 1 }}>
              <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 14, letterSpacing: "0.22em", color: "#E63426" }}>▌ {lang === "es" ? "PERSONAS" : "GUESTS"}</div>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, marginTop: 14, padding: "12px 0" }}>
                <button type="button" onClick={() => setPax(Math.max(1, pax - 1))} style={pxBtnStyle}>−</button>
                <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 80, lineHeight: 1, color: "#0A0A0A", letterSpacing: "-0.02em" }}>{pax}</div>
                <button type="button" onClick={() => setPax(Math.min(20, pax + 1))} style={pxBtnStyle}>+</button>
              </div>
              <div style={{ fontSize: 11, letterSpacing: "0.18em", color: "rgba(10,10,10,0.55)", textAlign: "center", textTransform: "uppercase" }}>
                {pax === 1 ? (lang === "es" ? "Solo tú" : "Just you") : pax >= 8 ? (lang === "es" ? `📞 grupo grande — llamanos al confirmar` : `📞 large group — we'll call to confirm`) : (lang === "es" ? "Mesa para " + pax : "Table for " + pax)}
              </div>

              <button type="submit" style={{
                marginTop: 20, width: "100%",
                appearance: "none", border: 0, background: "#E63426", color: "#F6F4EF",
                padding: "18px", fontFamily: "'Anton', sans-serif", fontSize: 17, letterSpacing: "0.14em", cursor: "pointer",
              }}>{lang === "es" ? "RESERVAR" : "BOOK TABLE"} →</button>

              <div style={{ marginTop: 14, fontSize: 11, lineHeight: 1.5, color: "rgba(10,10,10,0.55)" }}>
                {lang === "es"
                  ? "Al reservar abrirá WhatsApp con tu información lista para enviar."
                  : "Booking opens WhatsApp with your info ready to send."}
              </div>
            </div>
          </aside>
        </form>
      )}
    </div>
  );
}

const inputStyleR = {
  border: "1px solid #0A0A0A", background: "#F6F4EF",
  padding: "14px 16px", fontFamily: "'DM Sans', sans-serif", fontSize: 15,
  width: "100%", boxSizing: "border-box",
};

const pxBtnStyle = {
  appearance: "none", border: "2px solid #0A0A0A", background: "#F6F4EF",
  width: 50, height: 50, fontFamily: "'Anton', sans-serif",
  fontSize: 26, cursor: "pointer", lineHeight: 1, flexShrink: 0,
};

function ResvField({ label, children }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <span style={{ fontFamily: "'Anton', sans-serif", fontSize: 14, letterSpacing: "0.2em" }}>{label}</span>
      {children}
    </label>
  );
}

const contactLink = {
  display: "block", padding: "12px 16px", border: "1px solid #0A0A0A",
  textDecoration: "none", color: "#0A0A0A", fontSize: 15,
  fontFamily: "'DM Sans', sans-serif", transition: "background 0.15s, color 0.15s",
};

function Block({ title, children }) {
  return (
    <div>
      <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 14, letterSpacing: "0.22em", color: "#E63426", marginBottom: 10, fontWeight: 600 }}>{title}</div>
      {children}
    </div>
  );
}

// ============== CATERING ==============
function ScreenCatering({ lang }) {
  const [pax, setPax] = useState(20);
  const [pack, setPack] = useState("party");
  const packs = [
    { id: "office",  en: "Office Lunch",  es: "Almuerzo Oficina", pp: 180, desc_en: "1 sandwich + fries, drink not included.", desc_es: "1 sándwich + papas, bebida no incluida." },
    { id: "party",   en: "Watch Party",   es: "Watch Party",      pp: 240, desc_en: "4 wings + boneless + nachos to share, drink included.", desc_es: "4 alitas + boneless + nachos para compartir, bebida incluida." },
    { id: "feast",   en: "Vito's Feast",  es: "Banquete Vito",    pp: 340, desc_en: "Wings, boneless, tenders, burgers, fries, drink. The works.", desc_es: "Alitas, boneless, tenders, burgers, papas, bebida. Todo." },
  ];
  const chosen = packs.find(p => p.id === pack);
  const total = chosen.pp * pax;

  return (
    <section style={{ padding: "60px 6vw 100px" }}>
      <SectionHeader kicker={t("cat_title", lang)} title={lang === "es" ? "Alitas para todos." : "Wings for the whole crew."} sub={t("cat_sub", lang)} />

      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 40 }} className="vw-2col">
        <div>
          {/* GUEST COUNT — moved above package picker */}
          <div style={{ marginBottom: 28, background: "#F1ECDD", border: "2px solid #0A0A0A", padding: 20 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
              <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 14, letterSpacing: "0.2em" }}>{lang === "es" ? "PERSONAS" : "GUESTS"}</div>
              <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 64, lineHeight: 0.85, color: "#E63426", letterSpacing: "-0.02em" }}>{pax}</div>
            </div>
            <input type="range" min="5" max="100" step="5" value={pax} onChange={e => setPax(parseInt(e.target.value, 10))} style={{ width: "100%", accentColor: "#E63426" }} />
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, letterSpacing: "0.2em", color: "rgba(10,10,10,0.5)", marginTop: 6 }}>
              <span>5</span><span>25</span><span>50</span><span>75</span><span>100</span>
            </div>
          </div>

          <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 14, letterSpacing: "0.2em", marginBottom: 12 }}>{lang === "es" ? "ELIGE UN PAQUETE" : "PICK A PACKAGE"}</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {packs.map(p => (
              <button key={p.id} onClick={() => setPack(p.id)} style={{
                appearance: "none", textAlign: "left",
                border: pack === p.id ? "2px solid #E63426" : "1px solid #0A0A0A",
                background: pack === p.id ? "rgba(230,52,38,0.05)" : "#F6F4EF",
                padding: 0, cursor: "pointer",
                display: "flex", overflow: "hidden",
              }}>
                {p.img && (
                  <div style={{
                    width: 120, minHeight: 120, flexShrink: 0,
                    backgroundImage: "url(\"" + p.img + "\")",
                    backgroundSize: "cover",
                    backgroundPosition: "center",
                    borderRight: pack === p.id ? "2px solid #E63426" : "1px solid #0A0A0A",
                  }} />
                )}
                <div style={{ flex: 1, padding: 20 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
                    <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 24, letterSpacing: "0.02em", lineHeight: 1.05 }}>{p[lang].toUpperCase()}</div>
                    <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 22, color: "#E63426", whiteSpace: "nowrap" }}>{fmtL(p.pp)}/{lang === "es" ? "px" : "pp"}</div>
                  </div>
                  <p style={{ margin: "6px 0 0", fontSize: 13, lineHeight: 1.5, color: "rgba(10,10,10,0.75)" }}>{p["desc_" + lang]}</p>
                </div>
              </button>
            ))}
          </div>
        </div>

        <aside style={{ background: "#0A0A0A", color: "#F6F4EF", padding: 28, alignSelf: "start" }}>
          <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 16, letterSpacing: "0.22em", color: "#E63426" }}>{lang === "es" ? "ESTIMADO" : "ESTIMATE"}</div>
          <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 72, lineHeight: 0.9, letterSpacing: "-0.01em", marginTop: 10 }}>{fmtL(total)}</div>
          <div style={{ fontSize: 13, opacity: 0.7, marginTop: 4 }}>{chosen[lang]} × {pax} {lang === "es" ? "personas" : "guests"}</div>
          <div style={{ borderTop: "1px solid rgba(246,244,239,0.2)", margin: "20px 0", paddingTop: 16, fontSize: 13, lineHeight: 1.6 }}>
            {lang === "es"
              ? "Pedidos para 20+ requieren 48 h. Te llamamos para confirmar menú, hora y entrega."
              : "Orders for 20+ need 48 h notice. We'll call to confirm menu, time, and drop-off."}
          </div>
          <div style={{ marginTop: 16 }}>
            <PrimaryBtn full big onClick={() => alert(lang === "es" ? "¡Te contactamos pronto!" : "We'll reach out soon!")}>{lang === "es" ? "SOLICITAR COTIZACIÓN" : "REQUEST QUOTE"} →</PrimaryBtn>
          </div>
        </aside>
      </div>
    </section>
  );
}

// ============== LOYALTY ==============
function ScreenLoyalty({ lang }) {
  const [stamps, setStamps] = useState(() => parseInt(localStorage.getItem("vw_stamps") || "3", 10));
  const [joined, setJoined] = useState(false);

  useEffect(() => { localStorage.setItem("vw_stamps", String(stamps)); }, [stamps]);

  return (
    <section style={{ padding: "60px 6vw 100px" }}>
      <SectionHeader kicker={t("nav_loyalty", lang)} title={t("loy_title", lang)} sub={t("loy_sub", lang)} />

      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 40 }} className="vw-2col">
        <div style={{ background: "#0A0A0A", color: "#F6F4EF", padding: 32, position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", top: -20, right: -20, opacity: 0.08 }}>
            <img src="assets/vitos-icon.png" alt="" style={{ height: 280, filter: "invert(1)" }} />
          </div>
          <div style={{ position: "relative", zIndex: 1 }}>
            <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 16, letterSpacing: "0.22em", color: "#E63426" }}>VITO'S CLUB · MEMBER #00342</div>
            <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 56, lineHeight: 0.9, marginTop: 8 }}>WING CARD</div>

            <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
              {Array(10).fill(0).map((_, i) => (
                <div key={i} style={{
                  aspectRatio: "1/1",
                  border: "2px dashed rgba(246,244,239,0.4)",
                  background: i < stamps ? "#E63426" : "transparent",
                  borderStyle: i < stamps ? "solid" : "dashed",
                  borderColor: i < stamps ? "#E63426" : "rgba(246,244,239,0.4)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "'Anton', sans-serif", fontSize: 28,
                  transition: "all 0.25s",
                }}>{i < stamps ? "★" : i + 1}</div>
              ))}
            </div>

            <div style={{ marginTop: 22, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <div>
                <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 36, color: "#E63426" }}>{stamps}/10</div>
                <div style={{ fontSize: 12, opacity: 0.7, letterSpacing: "0.18em" }}>{lang === "es" ? "ALITAS PARA EL PRÓXIMO REGALO" : "WINGS TO YOUR NEXT FREE ROUND"}</div>
              </div>
              <button onClick={() => setStamps(s => Math.min(10, s + 1))} style={{
                appearance: "none", border: "1px solid #F6F4EF", background: "transparent",
                color: "#F6F4EF", padding: "12px 16px", fontFamily: "'Anton', sans-serif",
                fontSize: 13, letterSpacing: "0.14em", cursor: "pointer",
              }}>{lang === "es" ? "+ DEMO STAMP" : "+ DEMO STAMP"}</button>
            </div>

            {stamps >= 10 && (
              <div style={{ marginTop: 16, background: "#E63426", padding: "14px 16px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ fontFamily: "'Anton', sans-serif", fontSize: 18, letterSpacing: "0.1em" }}>{lang === "es" ? "🎉 6 ALITAS GRATIS DESBLOQUEADAS" : "🎉 6 FREE WINGS UNLOCKED"}</span>
                <button onClick={() => setStamps(0)} style={{ background: "#0A0A0A", color: "#F6F4EF", border: 0, padding: "8px 12px", fontFamily: "'Anton', sans-serif", letterSpacing: "0.12em", fontSize: 12, cursor: "pointer" }}>{lang === "es" ? "CANJEAR" : "REDEEM"}</button>
              </div>
            )}
          </div>
        </div>

        <div>
          <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 14, letterSpacing: "0.22em", color: "#E63426", marginBottom: 12, fontWeight: 700 }}>▌ {lang === "es" ? "AI PERSONALIZA TU REGALO" : "AI PERSONALIZES YOUR REWARD"}</div>
          <h3 style={{ fontFamily: "'Anton', sans-serif", fontSize: 36, lineHeight: 0.95, margin: 0 }}>{lang === "es" ? "PREDECIMOS LO QUE QUIERES." : "WE PREDICT WHAT YOU'LL WANT."}</h3>
          <p style={{ marginTop: 14, fontSize: 14, lineHeight: 1.6 }}>
            {lang === "es"
              ? "Cada vez que pides, aprendemos un poco más. Tu siguiente regalo no es genérico — es lo que sabemos que vas a disfrutar más."
              : "Every order teaches us a little. Your next reward isn't generic — it's the wing we know you'll love most."}
          </p>

          <div style={{ marginTop: 22, border: "1px solid #0A0A0A", padding: 18 }}>
            <div style={{ fontSize: 11, letterSpacing: "0.22em", color: "rgba(10,10,10,0.6)" }}>{lang === "es" ? "BASADO EN TUS ÚLTIMAS 3 ÓRDENES" : "BASED ON YOUR LAST 3 ORDERS"}</div>
            <div style={{ fontFamily: "'Anton', sans-serif", fontSize: 32, marginTop: 6 }}>{lang === "es" ? "6 BONELESS · HOT HONEY · MOJITO" : "6 BONELESS · HOT HONEY · MOJITO"}</div>
            <div style={{ display: "flex", gap: 4, marginTop: 8, alignItems: "center" }}>
              {Array(5).fill(0).map((_, i) => <span key={i} style={{ color: i < 4 ? "#E63426" : "rgba(10,10,10,0.2)", fontSize: 16 }}>★</span>)}
              <span style={{ fontSize: 12, marginLeft: 6, color: "rgba(10,10,10,0.6)" }}>{lang === "es" ? "92% confianza" : "92% confidence"}</span>
            </div>
          </div>

          {!joined ? (
            <form onSubmit={e => { e.preventDefault(); setJoined(true); }} style={{ marginTop: 22, display: "flex", gap: 0 }}>
              <input required type="email" placeholder={lang === "es" ? "tu@email.com" : "you@email.com"} style={{
                flex: 1, border: "1px solid #0A0A0A", padding: "14px 16px", background: "#F6F4EF",
                fontFamily: "'DM Sans', sans-serif", fontSize: 15, outline: "none",
              }} />
              <button type="submit" style={{
                appearance: "none", border: 0, background: "#E63426", color: "#F6F4EF",
                padding: "14px 22px", fontFamily: "'Anton', sans-serif", fontSize: 14, letterSpacing: "0.14em", cursor: "pointer",
              }}>{t("loy_join", lang).toUpperCase()} →</button>
            </form>
          ) : (
            <div style={{ marginTop: 22, padding: "14px 18px", background: "#0A0A0A", color: "#F6F4EF", fontFamily: "'Anton', sans-serif", letterSpacing: "0.1em", fontSize: 16 }}>
              ✓ {lang === "es" ? "ESTÁS DENTRO. BIENVENIDO A VITO'S CLUB." : "YOU'RE IN. WELCOME TO VITO'S CLUB."}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ScreenStory, ScreenMission, ScreenFind, ScreenCatering, ScreenLoyalty });