/* global React */
const { useState, useEffect, useRef } = React;

/* =====================================================================
   TACOS AL PASTOR AZ — NEON HOUSE
   Fully redesigned to lean into the restaurant's actual neon + mural
   aesthetic. Real photography of the interior. Real neon sign + trompo
   + sugar-skull mural used as recurring graphic anchors.
   ===================================================================== */

function Proposal1Trompo({ tweaks = {} }) {
  const accent     = tweaks.accent     || "#ff3a10";   // neon red-orange
  const highlight  = tweaks.highlight  || "#ff7a3a";   // warm spill
  const magenta    = tweaks.magenta    || "#c026d3";   // backlight purple
  const cyan       = tweaks.cyan       || "#22d3ee";   // accent cool
  const headline   = tweaks.headline   || "El auténtico pastor.";
  const showMarquee = tweaks.showMarquee !== false;

  const data = window.MENU_DATA;
  const [activeCat, setActiveCat] = useState("tacos");
  const [meat, setMeat] = useState("Pastor");
  const [drawerOpen, setDrawerOpen] = useState(false);

  useEffect(() => {
    document.body.style.overflow = drawerOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [drawerOpen]);

  const active = data.categories.find((c) => c.id === activeCat);
  const s = neonStyles;
  const marquee = "TACOS · BIRRIA · BURRITOS · QUESABIRRIA · VAMPIROS · TORTAS · SURF & TURF · KETO · NACHOS · ";

  return (
    <div style={s.root} data-trompo>
      <style>{`
        :root {
          --neon-red: ${accent};
          --neon-orange: ${highlight};
          --neon-magenta: ${magenta};
          --neon-cyan: ${cyan};
        }
        @keyframes flicker {
          0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
            opacity: 1;
            text-shadow:
              0 0 4px #fff,
              0 0 10px ${highlight},
              0 0 24px ${accent},
              0 0 56px ${accent},
              0 0 90px ${accent};
          }
          20%, 24%, 55% {
            opacity: 0.78;
            text-shadow: 0 0 4px #fff, 0 0 8px ${highlight};
          }
        }
        @keyframes hum {
          0%, 100% { filter: drop-shadow(0 0 8px ${highlight}) drop-shadow(0 0 24px ${accent}) drop-shadow(0 0 56px ${accent}); }
          50%      { filter: drop-shadow(0 0 12px ${highlight}) drop-shadow(0 0 36px ${accent}) drop-shadow(0 0 80px ${accent}); }
        }
        @keyframes ambientGlow {
          0%, 100% { opacity: .55; transform: scale(1); }
          50%      { opacity: .85; transform: scale(1.05); }
        }
        @keyframes trompoSpin {
          from { transform: rotate(0deg); }
          to   { transform: rotate(360deg); }
        }
        @keyframes trompoSway {
          0%, 100% { transform: translateY(0) rotate(-1deg); }
          50%      { transform: translateY(-8px) rotate(1deg); }
        }
        @keyframes marqueeRun {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
        @keyframes liveDot {
          0%, 100% { box-shadow: 0 0 0 0 ${accent}; opacity: 1; }
          50%      { box-shadow: 0 0 0 6px rgba(255,58,16,0); opacity: .6; }
        }
        @keyframes scanline {
          0% { transform: translateY(-100%); }
          100% { transform: translateY(100%); }
        }

        [data-trompo] *::selection { background: ${accent}; color: #fff; }
        [data-trompo] a { color: inherit; text-decoration: none; }
        [data-trompo] button { font-family: inherit; cursor: pointer; }
        [data-trompo] .neon-text {
          color: #fff5ec;
          animation: flicker 7s linear infinite;
        }
        [data-trompo] .neon-magenta {
          color: #ffd9f4;
          text-shadow:
            0 0 4px #fff,
            0 0 12px ${magenta},
            0 0 32px ${magenta},
            0 0 64px ${magenta};
        }
        [data-trompo] .slat-wall {
          background-image:
            repeating-linear-gradient(90deg,
              rgba(255,255,255,0.045) 0px,
              rgba(255,255,255,0.045) 1px,
              transparent 1px,
              transparent 14px),
            radial-gradient(ellipse at 50% 50%, rgba(192,38,211,0.18), transparent 60%),
            radial-gradient(ellipse at 50% 0%, rgba(255,58,16,0.14), transparent 70%);
          background-color: #0a0610;
        }
        [data-trompo] .grain::after {
          content: "";
          position: absolute; inset: 0;
          background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
          background-size: 3px 3px;
          mix-blend-mode: overlay;
          pointer-events: none;
        }
        [data-trompo] [data-nav-link]:hover { color: ${highlight}; }
        [data-trompo] [data-cta-primary] { transition: filter 200ms ease, transform 120ms ease; }
        [data-trompo] [data-cta-primary]:hover { filter: brightness(1.15) saturate(1.1); transform: translateY(-1px); }
        [data-trompo] [data-cta-ghost] { transition: border-color 160ms ease, color 160ms ease, background 160ms ease; }
        [data-trompo] [data-cta-ghost]:hover { border-color: ${highlight}; color: ${highlight}; }
        [data-trompo] [data-meat-pill]:hover { border-color: ${highlight}; color: ${highlight}; }
        [data-trompo] [data-meat-pill][data-active="true"]:hover { color: #fff; }
        [data-trompo] [data-cat-tab]:hover { color: ${highlight}; }
        [data-trompo] [data-loc-card] { transition: border-color 200ms ease, transform 240ms ease; }
        [data-trompo] [data-loc-card]:hover { border-color: ${accent}; transform: translateY(-3px); }
        [data-trompo] [data-foot-link]:hover { color: ${highlight}; opacity: 1; }
        [data-trompo] [data-mobile-toggle] { display: none; }
        [data-trompo] [data-mobile-drawer] { display: none; }

        @media (max-width: 900px) {
          [data-trompo] [data-topbar-right] { display: none !important; }
          [data-trompo] [data-nav-links] { display: none !important; }
          [data-trompo] [data-order-btn-desktop] { display: none !important; }
          [data-trompo] [data-mobile-toggle] {
            display: flex !important; flex-direction: column;
            justify-content: center; gap: 5px; align-items: center;
            width: 44px; height: 44px;
            background: transparent; border: 1px solid ${accent}; padding: 0;
          }
          [data-trompo] [data-mobile-toggle] span {
            width: 18px; height: 1.5px; background: #fff5ec;
            transition: transform 200ms ease, opacity 200ms ease;
          }
          [data-trompo] [data-mobile-toggle][data-open="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
          [data-trompo] [data-mobile-toggle][data-open="true"] span:nth-child(2) { opacity: 0; }
          [data-trompo] [data-mobile-toggle][data-open="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
          [data-trompo] [data-mobile-drawer] {
            display: block !important;
            position: fixed; inset: 0; z-index: 100;
            background: #0a0610;
            padding: 80px 24px 40px;
            transform: translateY(-100%);
            transition: transform 320ms cubic-bezier(.4,0,.2,1);
            overflow-y: auto;
          }
          [data-trompo] [data-mobile-drawer][data-open="true"] { transform: translateY(0); }
          [data-trompo] [data-mobile-drawer] a {
            display: block; font-family: 'Anton', sans-serif;
            font-size: 36px; letter-spacing: 0.04em; padding: 18px 0;
            border-bottom: 1px solid rgba(255,255,255,0.08); color: #fff5ec;
          }
          [data-trompo] [data-mobile-drawer] [data-drawer-cta] {
            margin-top: 32px; width: 100%;
            background: ${accent}; color: #fff; border: none;
            padding: 20px; font-weight: 800; font-size: 14px; letter-spacing: 0.2em;
          }
          [data-trompo] [data-drawer-close] {
            position: absolute; top: 18px; right: 16px;
            width: 44px; height: 44px;
            background: transparent; border: 1px solid ${accent};
            color: #fff5ec; font-size: 20px;
          }

          [data-trompo] [data-nav] { padding: 14px 16px !important; }
          [data-trompo] [data-topbar-inner] { padding: 0 16px !important; font-size: 10px !important; }

          [data-trompo] [data-hero] { min-height: auto !important; padding: 40px 0 50px !important; }
          [data-trompo] [data-hero-grid] { grid-template-columns: 1fr !important; gap: 40px !important; padding: 0 20px !important; }
          [data-trompo] [data-hero-left] { padding: 0 !important; }
          [data-trompo] [data-hero-right] { height: 380px !important; }
          [data-trompo] [data-hero-h1] { font-size: clamp(56px, 14vw, 96px) !important; }
          [data-trompo] [data-hero-script] { font-size: clamp(48px, 12vw, 80px) !important; }
          [data-trompo] [data-hero-skull] { display: none !important; }

          [data-trompo] [data-marquee-track] { font-size: 26px !important; }

          [data-trompo] [data-sec-pad] { padding: 70px 20px !important; }
          [data-trompo] [data-sec-header] { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; margin-bottom: 32px !important; }
          [data-trompo] [data-sec-h2] { text-align: left !important; font-size: clamp(48px, 12vw, 72px) !important; }

          [data-trompo] [data-menu-layout] { grid-template-columns: 1fr !important; gap: 24px !important; }
          [data-trompo] [data-cat-tabs] {
            display: flex !important; flex-direction: row !important;
            overflow-x: auto; border-top: none !important; gap: 4px;
            margin: 0 -20px; padding: 0 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1) !important;
          }
          [data-trompo] [data-cat-tabs]::-webkit-scrollbar { display: none; }
          [data-trompo] [data-cat-tab] {
            flex-shrink: 0; grid-template-columns: auto !important;
            border-bottom: none !important; padding: 12px 14px !important;
          }
          [data-trompo] [data-cat-tab][data-active="true"] {
            box-shadow: inset 0 -3px 0 ${accent} !important; padding-left: 14px !important;
          }
          [data-trompo] [data-cat-num] { display: none !important; }
          [data-trompo] [data-cat-en] { display: none !important; }
          [data-trompo] [data-menu-panel] { padding: 24px !important; }
          [data-trompo] [data-menu-panel-head] { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
          [data-trompo] [data-menu-panel-es] { font-size: 44px !important; }
          [data-trompo] [data-meat-pills] { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 6px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
          [data-trompo] [data-meat-pills]::-webkit-scrollbar { display: none; }
          [data-trompo] [data-meat-pill] { flex-shrink: 0; }
          [data-trompo] [data-menu-item-name] { font-size: 19px !important; }
          [data-trompo] [data-menu-item-price] { font-size: 22px !important; }
          [data-trompo] [data-menu-item] { flex-wrap: wrap !important; }

          [data-trompo] [data-loc-grid] { grid-template-columns: 1fr !important; gap: 16px !important; }
          [data-trompo] [data-loc-card] { padding: 24px !important; }
          [data-trompo] [data-loc-name] { font-size: 32px !important; }
          [data-trompo] [data-loc-actions] { flex-direction: column !important; }
          [data-trompo] [data-loc-actions] button { width: 100%; }

          [data-trompo] [data-sig-big] { font-size: clamp(38px, 11vw, 60px) !important; }

          [data-trompo] [data-footer] { padding: 50px 20px 30px !important; }
          [data-trompo] [data-footer-grid] { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
          [data-trompo] [data-footer-bottom] { font-size: 9px !important; }
        }

        @media (max-width: 480px) {
          [data-trompo] [data-footer-grid] { grid-template-columns: 1fr !important; }
        }
      `}</style>

      {/* TOP BAR */}
      <div style={s.stickyHeader}>
        <div style={s.topbar}>
          <div style={s.topbarInner} data-topbar-inner>
            <div style={s.topbarLeft}>
              <span style={s.liveDot}></span>
              <span style={s.topbarStrong}>OPEN NOW</span>
              <span style={s.topbarSep}>·</span>
              <span style={s.topbarMuted}>Restaurant til 9PM · Truck til 1AM</span>
            </div>
            <div style={s.topbarRight} data-topbar-right>
              <span style={s.topbarMuted}>Hoy / Today</span>
              <span style={s.topbarSep}>·</span>
              <span style={s.topbarStrong}>Quesabirria $6.50</span>
            </div>
          </div>
        </div>

        {/* NAV */}
        <nav style={s.nav} data-nav>
          <div style={s.navLogo}>
            <NeonMonogram />
            <div>
              <div style={s.navLogoTop}>TACOS AL PASTOR</div>
              <div style={s.navLogoBot}>— PEORIA × GLENDALE, AZ —</div>
            </div>
          </div>
          <div style={s.navLinks} data-nav-links>
            <a style={s.navLink} data-nav-link href="#menu">Menu</a>
            <a style={s.navLink} data-nav-link href="#trompo">El Trompo</a>
            <a style={s.navLink} data-nav-link href="#locations">Locations</a>
            <a style={s.navLink} data-nav-link href="#catering">Catering</a>
          </div>
          <button style={s.orderBtn} data-cta-primary data-order-btn-desktop>
            ORDER ONLINE <span style={{ marginLeft: 8 }}>→</span>
          </button>
          <button data-mobile-toggle data-open={drawerOpen} aria-label="Menu" onClick={() => setDrawerOpen(true)}>
            <span></span><span></span><span></span>
          </button>
        </nav>
      </div>

      {/* MOBILE DRAWER */}
      <div data-mobile-drawer data-open={drawerOpen}>
        <button data-drawer-close aria-label="Close" onClick={() => setDrawerOpen(false)}>×</button>
        <a href="#menu" onClick={() => setDrawerOpen(false)}>Menu</a>
        <a href="#trompo" onClick={() => setDrawerOpen(false)}>El Trompo</a>
        <a href="#locations" onClick={() => setDrawerOpen(false)}>Locations</a>
        <a href="#catering" onClick={() => setDrawerOpen(false)}>Catering</a>
        <button data-drawer-cta onClick={() => setDrawerOpen(false)}>ORDER ONLINE →</button>
      </div>

      {/* HERO — neon wall + real photo */}
      <section style={s.hero} data-hero className="slat-wall">
        {/* ambient glow blooms */}
        <div style={{ ...s.heroGlow, top: "10%", left: "20%", background: `radial-gradient(circle, ${magenta}55 0%, transparent 60%)` }} />
        <div style={{ ...s.heroGlow, bottom: "5%", right: "10%", background: `radial-gradient(circle, ${accent}55 0%, transparent 60%)`, animationDelay: "1.2s" }} />

        <div style={s.heroGrid} data-hero-grid>
          <div style={s.heroLeft} data-hero-left>
            <div style={s.heroEyebrow}>
              <span style={s.heroEyebrowDot}></span>
              <span>EST. ARIZONA · TACOS HECHOS A MANO</span>
            </div>

            <h1 style={s.heroH1} data-hero-h1>
              <span style={s.heroH1Word}>TACOS</span>
              <br />
              <span style={s.heroH1Word}>AL PASTOR</span>
              <br />
              <span style={{ ...s.heroH1Word, ...s.heroScript }} data-hero-script className="neon-text">
                {headline}
              </span>
            </h1>

            <p style={s.heroSub}>
              Marinated pork stacked tall on the trompo, kissed by fire and sliced
              to order. Family recipes, fresh tortillas, and the salsas your abuela
              would approve of.
            </p>

            <div style={s.heroCtas}>
              <button style={s.btnPrimary} data-cta-primary>
                <span style={{ position: "relative", zIndex: 2 }}>VIEW THE MENU</span>
                <span style={s.btnPrimaryGlow}></span>
              </button>
              <button style={s.btnGhost} data-cta-ghost>RESERVE A TABLE →</button>
            </div>

            <div style={s.heroStats}>
              <Stat num="2" lab="Locations" />
              <Stat num="14+" lab="Hours daily" />
              <Stat num="$3.75" lab="Pastor taco" accent={accent} />
            </div>
          </div>

          <div style={s.heroRight} data-hero-right>
            {/* The actual interior photo as the hero centerpiece */}
            <div style={s.heroPhotoFrame}>
              <img src="assets/interior-portrait.png" alt="Tacos al Pastor AZ interior" style={s.heroPhoto} />
              <div style={s.heroPhotoBorder}></div>
              <div style={{ ...s.heroPhotoCorner, top: 14, left: 14, borderTopWidth: 2, borderLeftWidth: 2 }}></div>
              <div style={{ ...s.heroPhotoCorner, top: 14, right: 14, borderTopWidth: 2, borderRightWidth: 2 }}></div>
              <div style={{ ...s.heroPhotoCorner, bottom: 14, left: 14, borderBottomWidth: 2, borderLeftWidth: 2 }}></div>
              <div style={{ ...s.heroPhotoCorner, bottom: 14, right: 14, borderBottomWidth: 2, borderRightWidth: 2 }}></div>
              <div style={s.heroPhotoTag}>FIG. 01 — LA CASA</div>
            </div>

            {/* Floating sugar skull */}
            <img src="assets/skull.png" alt="" style={s.heroSkull} data-hero-skull />
          </div>
        </div>

        {/* Bottom marquee separator */}
        <div style={s.heroBottomSeam}></div>
      </section>

      {/* MARQUEE */}
      {showMarquee && (
        <div style={s.marqueeWrap}>
          <div style={s.marqueeTrack} data-marquee-track>
            <span>{marquee.repeat(4)}</span>
          </div>
        </div>
      )}

      {/* TROMPO SECTION — feature the real trompo image */}
      <section id="trompo" style={s.trompoSec} data-sec-pad>
        <div style={s.trompoGrid}>
          <div style={s.trompoLeft}>
            <div style={s.secLabel}>01 / EL TROMPO</div>
            <h2 style={s.trompoH2}>
              <span>The fire</span><br />
              <span className="neon-text" style={{ fontFamily: "'Pacifico', cursive", fontStyle: "normal", textTransform: "none", fontSize: "1.05em" }}>
                never stops.
              </span>
            </h2>
            <p style={s.trompoCopy}>
              Twelve hours of marinade. Achiote, guajillo, pineapple, vinegar, garlic.
              Stacked vertically on a steel spit, slow-roasted over open flame, sliced
              razor-thin onto a fresh maíz tortilla. Pineapple, onion, cilantro, lime.
              That's it. That's the whole thing.
            </p>
            <div style={s.trompoStats}>
              <div style={s.trompoStat}>
                <div style={s.trompoStatNum}>12<span style={s.trompoStatUnit}>h</span></div>
                <div style={s.trompoStatLab}>Marinated</div>
              </div>
              <div style={s.trompoStatDiv}></div>
              <div style={s.trompoStat}>
                <div style={s.trompoStatNum}>40<span style={s.trompoStatUnit}>lb</span></div>
                <div style={s.trompoStatLab}>Per spit</div>
              </div>
              <div style={s.trompoStatDiv}></div>
              <div style={s.trompoStat}>
                <div style={s.trompoStatNum}>$3<span style={s.trompoStatUnit}>.75</span></div>
                <div style={s.trompoStatLab}>Per taco</div>
              </div>
            </div>
          </div>

          <div style={s.trompoRight}>
            <div style={s.trompoStage} className="slat-wall grain">
              <div style={s.trompoBacklight}></div>
              <img src="assets/trompo.png" alt="" style={s.trompoImg} />
              <div style={s.trompoFloor}></div>
            </div>
          </div>
        </div>
      </section>

      {/* MENU */}
      <section id="menu" style={s.menuSec} data-sec-pad>
        <div style={s.secHeader} data-sec-header>
          <div style={s.secLabel}>02 / LA CARTA</div>
          <h2 style={s.secH2} data-sec-h2>
            The whole<br />
            <span className="neon-text" style={{ fontStyle: "italic" }}>menu.</span>
          </h2>
        </div>

        <div style={s.meatPicker}>
          <div style={s.meatPickerLabel}>YOUR MEAT</div>
          <div style={s.meatPills} data-meat-pills>
            {data.meats.map((m) => (
              <button
                key={m.es}
                onClick={() => setMeat(m.es)}
                data-meat-pill
                data-active={meat === m.es}
                style={{ ...s.meatPill, ...(meat === m.es ? s.meatPillActive : {}) }}
              >
                <span style={s.meatPillEs}>{m.es}</span>
                <span style={s.meatPillEn}>{m.en}</span>
              </button>
            ))}
          </div>
        </div>

        <div style={s.menuLayout} data-menu-layout>
          <div style={s.catTabs} data-cat-tabs>
            {data.categories.map((c, i) => (
              <button
                key={c.id}
                onClick={() => setActiveCat(c.id)}
                data-cat-tab
                data-active={activeCat === c.id}
                style={{ ...s.catTab, ...(activeCat === c.id ? s.catTabActive : {}) }}
              >
                <span style={s.catNum} data-cat-num>{String(i + 1).padStart(2, "0")}</span>
                <span style={s.catBody}>
                  <span style={s.catEs}>{c.es}</span>
                  <span style={s.catEn} data-cat-en>{c.en}</span>
                </span>
              </button>
            ))}
          </div>

          <div style={s.menuPanel} data-menu-panel className="grain">
            {/* faint skull watermark */}
            <img src="assets/skull.png" alt="" style={s.menuSkull} />

            <div style={s.menuPanelHead} data-menu-panel-head>
              <div>
                <div style={s.menuPanelEs} data-menu-panel-es>{active.es}</div>
                <div style={s.menuPanelEn}>{active.en}</div>
              </div>
              <div style={s.menuPanelMeat}>
                with <strong style={{ color: accent }}>{meat.toUpperCase()}</strong>
              </div>
            </div>
            {active.blurb && <p style={s.menuPanelBlurb}>{active.blurb}</p>}
            <div style={s.menuItems}>
              {active.items.map((it, i) => (
                <div key={i} style={s.menuItem} data-menu-item>
                  <div style={s.menuItemL}>
                    <div style={s.menuItemName} data-menu-item-name>{it.name}</div>
                    {it.desc && <div style={s.menuItemDesc}>{it.desc}</div>}
                  </div>
                  <div style={s.menuItemDots}></div>
                  <div style={s.menuItemPrice} data-menu-item-price>${it.price}</div>
                </div>
              ))}
            </div>
            <div style={s.menuPanelFoot}>
              add chipotle $0.50 · sour cream $0.50 · extra cheese $0.50 / $1.00
            </div>
          </div>
        </div>
      </section>

      {/* SIGNATURE NEON STRIP */}
      <section style={s.sigStrip}>
        <div style={s.sigInner}>
          <div style={s.sigBig} data-sig-big>
            <span className="neon-text">AL PASTOR</span>
            <span style={s.sigDot}>·</span>
            <span className="neon-magenta">AL PASTOR</span>
            <span style={s.sigDot}>·</span>
            <span className="neon-text">AL PASTOR</span>
          </div>
          <p style={s.sigSub}>
            The dish we're named for. Always, only, $3.75. Every day, until we run out.
          </p>
        </div>
      </section>

      {/* LOCATIONS */}
      <section id="locations" style={s.locSec} data-sec-pad>
        <div style={s.secHeader} data-sec-header>
          <div style={s.secLabel}>03 / DOS CASAS</div>
          <h2 style={s.secH2} data-sec-h2>
            Two ways<br />
            to <span className="neon-text" style={{ fontStyle: "italic" }}>find us.</span>
          </h2>
        </div>
        <div style={s.locGrid} data-loc-grid>
          {data.locations.map((loc, i) => (
            <div key={i} data-loc-card style={s.locCard} className="grain">
              <div style={s.locCardTop}>
                <div style={s.locKind}>{loc.kind.toUpperCase()}</div>
                <div style={s.locNum}>0{i + 1}</div>
              </div>
              <h3 style={s.locName} data-loc-name>{loc.name}</h3>
              <div style={s.locAddr}>{loc.address}</div>
              <div style={s.locAddr}>{loc.city}</div>
              {loc.phone && (
                <div style={s.locPhone}>
                  <span style={s.locPhoneLab}>TEL</span>
                  <span style={s.locPhoneNum}>{loc.phone}</span>
                </div>
              )}
              <div style={s.locHours}>
                {loc.hours.map(([d, h], j) => (
                  <div key={j} style={s.locHourRow}>
                    <span style={s.locHourDay}>{d}</span>
                    <span style={s.locHourTime}>{h}</span>
                  </div>
                ))}
              </div>
              <div style={s.locActions} data-loc-actions>
                <button style={s.btnPrimarySm} data-cta-primary>DIRECTIONS</button>
                <button style={s.btnGhostSm} data-cta-ghost>CALL</button>
              </div>
              {/* Glow corner */}
              <div style={{ ...s.locCorner, background: i === 0 ? accent : magenta }}></div>
            </div>
          ))}
        </div>
      </section>

      {/* INTERIOR FULL-BLEED PHOTO */}
      <section style={s.bleed}>
        <img src="assets/interior-landscape.png" alt="Tacos al Pastor AZ interior" style={s.bleedImg} />
        <div style={s.bleedOverlay}></div>
        <div style={s.bleedCaption}>
          <div style={s.secLabel}>04 / LA CASA</div>
          <div style={s.bleedTitle}>
            Come <span className="neon-text" style={{ fontStyle: "italic" }}>hungry.</span>
          </div>
          <p style={s.bleedSub}>
            Step in for the neon. Stay for the trompo. Family-run, fire-cooked,
            Arizona-proud — since day one.
          </p>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={s.footer} data-footer>
        <div style={s.footerGrid} data-footer-grid>
          <div>
            <NeonMonogram size={64} />
            <div style={s.footerTagline}>
              Family-run, fire-cooked, Arizona-proud. Ven con hambre.
            </div>
            <div style={s.footerSocial}>
              <a style={s.footerSocialLink} data-foot-link>IG</a>
              <a style={s.footerSocialLink} data-foot-link>TT</a>
              <a style={s.footerSocialLink} data-foot-link>FB</a>
            </div>
          </div>
          <div>
            <div style={s.footH}>EAT</div>
            <div style={s.footL} data-foot-link>Menu</div>
            <div style={s.footL} data-foot-link>Catering</div>
            <div style={s.footL} data-foot-link>Order Online</div>
          </div>
          <div>
            <div style={s.footH}>VISIT</div>
            <div style={s.footL} data-foot-link>Peoria Restaurant</div>
            <div style={s.footL} data-foot-link>Glendale Truck</div>
            <div style={s.footL} data-foot-link>Hours</div>
          </div>
          <div>
            <div style={s.footH}>SAY HOLA</div>
            <div style={s.footL} data-foot-link>(623) 555-0142</div>
            <div style={s.footL} data-foot-link>hola@tacosalpastor.az</div>
            <div style={s.footL} data-foot-link>Press Inquiries</div>
          </div>
        </div>
        <div style={s.footerBottom} data-footer-bottom>
          <span>© 2026 TACOS AL PASTOR AZ</span>
          <span style={{ opacity: 0.5 }}>·</span>
          <span>HECHO CON FUEGO</span>
          <span style={{ opacity: 0.5 }}>·</span>
          <span>33.5722° N · 112.2378° W</span>
        </div>
      </footer>
    </div>
  );
}

/* ─────────────── small subcomponents ─────────────── */

function Stat({ num, lab, accent }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <div style={{
        fontFamily: "'Anton', sans-serif", fontSize: 40, lineHeight: 1,
        color: accent || "#fff5ec",
        textShadow: accent ? `0 0 8px ${accent}88, 0 0 24px ${accent}55` : "none",
      }}>{num}</div>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.25em", opacity: 0.55, textTransform: "uppercase" }}>{lab}</div>
    </div>
  );
}

function NeonMonogram({ size = 48 }) {
  // Stylized "T" inside a glowing ring — stand-in for a brand mark
  return (
    <div style={{
      width: size, height: size, borderRadius: "50%",
      border: "1.5px solid var(--neon-red)",
      boxShadow: "0 0 0 1px rgba(255,58,16,0.25), 0 0 20px rgba(255,58,16,0.45), inset 0 0 12px rgba(255,58,16,0.25)",
      display: "flex", alignItems: "center", justifyContent: "center",
      background: "rgba(10,6,16,0.6)",
      flexShrink: 0,
    }}>
      <span style={{
        fontFamily: "'Pacifico', cursive",
        fontSize: size * 0.55, lineHeight: 1, color: "#fff5ec",
        textShadow: "0 0 4px #fff, 0 0 10px var(--neon-orange), 0 0 18px var(--neon-red)",
        marginTop: -size * 0.04,
      }}>T</span>
    </div>
  );
}

/* ─────────────── styles ─────────────── */

const neonStyles = {
  root: {
    width: "100%", background: "#0a0610", color: "#fff5ec",
    fontFamily: "'Inter', system-ui, sans-serif",
  },
  stickyHeader: {
    position: "sticky", top: 0, zIndex: 50,
    background: "rgba(10,6,16,0.92)", backdropFilter: "blur(12px)",
    borderBottom: "1px solid rgba(255,58,16,0.25)",
  },
  topbar: {
    background: "linear-gradient(90deg, var(--neon-red) 0%, #ff5a1f 50%, var(--neon-magenta) 100%)",
    color: "#0a0610",
    fontSize: 11, fontWeight: 700, letterSpacing: "0.12em",
    padding: "9px 0",
  },
  topbarInner: {
    maxWidth: 1400, margin: "0 auto", padding: "0 40px",
    display: "flex", justifyContent: "space-between", alignItems: "center",
    gap: 24, fontFamily: "'JetBrains Mono', monospace",
  },
  topbarLeft:  { display: "flex", alignItems: "center", gap: 10, whiteSpace: "nowrap" },
  topbarRight: { display: "flex", alignItems: "center", gap: 10, whiteSpace: "nowrap" },
  liveDot: {
    width: 7, height: 7, borderRadius: "50%", background: "#0a0610",
    animation: "liveDot 1.6s ease-in-out infinite",
  },
  topbarStrong: { fontWeight: 800, letterSpacing: "0.18em" },
  topbarMuted:  { opacity: 0.78, fontWeight: 600 },
  topbarSep:    { opacity: 0.5 },

  nav: {
    maxWidth: 1400, margin: "0 auto", padding: "16px 40px",
    display: "flex", alignItems: "center", justifyContent: "space-between",
  },
  navLogo: { display: "flex", alignItems: "center", gap: 14 },
  navLogoTop: { fontFamily: "'Anton', sans-serif", fontSize: 22, letterSpacing: "0.06em", lineHeight: 1, color: "#fff5ec" },
  navLogoBot: { fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "var(--neon-orange)", letterSpacing: "0.3em", marginTop: 5 },
  navLinks: { display: "flex", gap: 36 },
  navLink: { fontSize: 13, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "#fff5ec" },
  orderBtn: {
    background: "var(--neon-red)", color: "#fff", border: "none",
    padding: "14px 22px", fontWeight: 800, fontSize: 12, letterSpacing: "0.18em",
    boxShadow: "0 0 0 1px rgba(255,255,255,0.06), 0 0 24px rgba(255,58,16,0.45)",
  },

  /* HERO */
  hero: {
    position: "relative", overflow: "hidden",
    minHeight: 760, padding: "70px 0 100px",
  },
  heroGlow: {
    position: "absolute", width: 540, height: 540, filter: "blur(30px)",
    animation: "ambientGlow 5s ease-in-out infinite",
    pointerEvents: "none", zIndex: 0,
  },
  heroGrid: {
    position: "relative", zIndex: 2,
    maxWidth: 1400, margin: "0 auto", padding: "0 40px",
    display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 60,
    alignItems: "center",
  },
  heroLeft: {},
  heroEyebrow: {
    display: "inline-flex", alignItems: "center", gap: 10,
    fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
    color: "var(--neon-orange)", letterSpacing: "0.28em", textTransform: "uppercase",
    marginBottom: 28,
    padding: "6px 14px",
    border: "1px solid rgba(255,122,58,0.4)",
    borderRadius: 999,
    background: "rgba(255,58,16,0.06)",
  },
  heroEyebrowDot: {
    width: 6, height: 6, borderRadius: "50%", background: "var(--neon-orange)",
    boxShadow: "0 0 8px var(--neon-orange), 0 0 16px var(--neon-red)",
  },
  heroH1: {
    fontFamily: "'Anton', 'Bebas Neue', sans-serif",
    fontSize: "clamp(72px, 9vw, 148px)", lineHeight: 0.88, letterSpacing: "-0.015em",
    margin: 0, fontWeight: 400,
  },
  heroH1Word: { display: "inline-block" },
  heroScript: {
    fontFamily: "'Pacifico', cursive",
    fontSize: "0.78em", lineHeight: 1, fontStyle: "normal",
    textTransform: "none", letterSpacing: 0,
    marginTop: 8,
  },
  heroSub: {
    fontFamily: "'Fraunces', Georgia, serif", fontStyle: "italic",
    fontSize: 20, lineHeight: 1.55, maxWidth: 520, marginTop: 28,
    color: "rgba(255,245,236,0.78)",
  },
  heroCtas: { display: "flex", gap: 14, marginTop: 36, alignItems: "center", flexWrap: "wrap" },
  btnPrimary: {
    position: "relative", overflow: "hidden",
    background: "var(--neon-red)", color: "#fff", border: "none",
    padding: "18px 30px", fontSize: 13, letterSpacing: "0.22em", fontWeight: 800,
    boxShadow: "0 0 0 1px rgba(255,255,255,0.08), 0 0 32px rgba(255,58,16,0.5)",
  },
  btnPrimaryGlow: {
    position: "absolute", inset: 0,
    background: "radial-gradient(circle at 50% 100%, rgba(255,255,255,0.35), transparent 70%)",
    pointerEvents: "none",
  },
  btnGhost: {
    background: "transparent", color: "#fff5ec",
    border: "1px solid rgba(255,245,236,0.4)",
    padding: "18px 28px", fontSize: 13, letterSpacing: "0.22em", fontWeight: 800,
  },
  heroStats: {
    display: "flex", gap: 50, marginTop: 60, paddingTop: 28,
    borderTop: "1px solid rgba(255,58,16,0.2)",
    flexWrap: "wrap",
  },

  heroRight: { position: "relative", height: 640 },
  heroPhotoFrame: {
    position: "relative", width: "100%", height: "100%",
    overflow: "hidden",
    boxShadow: "0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,58,16,0.3), 0 0 60px rgba(255,58,16,0.25)",
  },
  heroPhoto: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
  heroPhotoBorder: {
    position: "absolute", inset: 8, border: "1px solid rgba(255,245,236,0.25)",
    pointerEvents: "none",
  },
  heroPhotoCorner: {
    position: "absolute", width: 18, height: 18,
    borderColor: "var(--neon-orange)", borderStyle: "solid", borderWidth: 0,
  },
  heroPhotoTag: {
    position: "absolute", left: 16, bottom: 16,
    fontFamily: "'JetBrains Mono', monospace", fontSize: 9,
    color: "rgba(255,245,236,0.7)", letterSpacing: "0.3em",
    background: "rgba(10,6,16,0.7)", padding: "5px 10px",
    border: "1px solid rgba(255,58,16,0.4)",
  },
  heroSkull: {
    position: "absolute", right: -50, top: -40,
    width: 200, height: "auto", opacity: 0.95,
    zIndex: 3,
    filter: "drop-shadow(0 0 18px rgba(192,38,211,0.55)) drop-shadow(0 8px 18px rgba(0,0,0,0.5))",
    pointerEvents: "none",
  },
  heroBottomSeam: {
    position: "absolute", left: 0, right: 0, bottom: 0, height: 1,
    background: "linear-gradient(90deg, transparent, var(--neon-red) 30%, var(--neon-magenta) 70%, transparent)",
    boxShadow: "0 0 24px rgba(255,58,16,0.6), 0 0 48px rgba(192,38,211,0.45)",
  },

  /* MARQUEE */
  marqueeWrap: {
    background: "var(--neon-red)", color: "#0a0610",
    overflow: "hidden", padding: "16px 0",
    boxShadow: "0 0 60px rgba(255,58,16,0.5), inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.3)",
    borderTop: "1px solid #0a0610", borderBottom: "1px solid #0a0610",
  },
  marqueeTrack: {
    fontFamily: "'Anton', sans-serif", fontSize: 30, letterSpacing: "0.05em",
    whiteSpace: "nowrap", animation: "marqueeRun 40s linear infinite",
  },

  /* TROMPO SECTION */
  trompoSec: {
    maxWidth: 1400, margin: "0 auto", padding: "120px 40px",
    position: "relative",
  },
  trompoGrid: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" },
  trompoLeft: {},
  trompoH2: {
    fontFamily: "'Anton', sans-serif", fontSize: "clamp(64px, 8vw, 120px)",
    lineHeight: 0.92, margin: "12px 0 28px", letterSpacing: "-0.01em",
  },
  trompoCopy: {
    fontFamily: "'Fraunces', Georgia, serif", fontStyle: "italic",
    fontSize: 19, lineHeight: 1.6, color: "rgba(255,245,236,0.82)", maxWidth: 540,
  },
  trompoStats: {
    display: "flex", alignItems: "center", gap: 24,
    marginTop: 40, paddingTop: 28, borderTop: "1px solid rgba(255,58,16,0.25)",
    flexWrap: "wrap",
  },
  trompoStat: {},
  trompoStatNum: {
    fontFamily: "'Anton', sans-serif", fontSize: 56, lineHeight: 1,
    color: "#fff5ec",
    textShadow: "0 0 8px var(--neon-orange), 0 0 24px var(--neon-red)",
  },
  trompoStatUnit: { fontSize: 24, color: "var(--neon-orange)", marginLeft: 4 },
  trompoStatLab: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.25em",
    opacity: 0.6, marginTop: 8, textTransform: "uppercase",
  },
  trompoStatDiv: { width: 1, height: 50, background: "rgba(255,58,16,0.3)" },

  trompoRight: {},
  trompoStage: {
    position: "relative", height: 620, overflow: "hidden",
    border: "1px solid rgba(255,58,16,0.3)",
    boxShadow: "0 30px 80px rgba(0,0,0,0.5), inset 0 0 80px rgba(192,38,211,0.2)",
  },
  trompoBacklight: {
    position: "absolute", left: "50%", top: "50%",
    transform: "translate(-50%, -50%)",
    width: 380, height: 380, borderRadius: "50%",
    background: "radial-gradient(circle, rgba(255,58,16,0.7) 0%, rgba(192,38,211,0.4) 40%, transparent 70%)",
    filter: "blur(30px)",
    animation: "ambientGlow 4s ease-in-out infinite",
  },
  trompoImg: {
    position: "absolute", left: "50%", top: 30,
    transform: "translateX(-50%)",
    height: "85%", width: "auto",
    animation: "trompoSway 6s ease-in-out infinite",
    transformOrigin: "top center",
    filter: "drop-shadow(0 0 30px rgba(255,58,16,0.55)) drop-shadow(0 20px 30px rgba(0,0,0,0.6))",
  },
  trompoFloor: {
    position: "absolute", left: 0, right: 0, bottom: 0, height: 90,
    background: "linear-gradient(180deg, transparent, rgba(255,58,16,0.18) 60%, rgba(192,38,211,0.18))",
  },

  /* MENU */
  menuSec: { maxWidth: 1400, margin: "0 auto", padding: "100px 40px" },
  secHeader: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 40, marginBottom: 56 },
  secLabel: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "var(--neon-orange)",
    letterSpacing: "0.3em", whiteSpace: "nowrap", flexShrink: 0, paddingBottom: 8,
  },
  secH2: {
    fontFamily: "'Anton', sans-serif", fontSize: "clamp(56px, 7vw, 104px)",
    lineHeight: 0.92, margin: 0, textAlign: "right", letterSpacing: "-0.01em",
  },

  meatPicker: { marginBottom: 40 },
  meatPickerLabel: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "var(--neon-orange)", letterSpacing: "0.3em", marginBottom: 14 },
  meatPills: { display: "flex", gap: 10, flexWrap: "wrap" },
  meatPill: {
    background: "rgba(255,255,255,0.02)", color: "#fff5ec",
    border: "1px solid rgba(255,245,236,0.18)",
    padding: "12px 20px", display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 4,
    transition: "border-color 160ms ease, background 160ms ease, color 160ms ease",
    whiteSpace: "nowrap",
  },
  meatPillActive: {
    background: "var(--neon-red)", borderColor: "var(--neon-red)", color: "#fff",
    boxShadow: "0 0 24px rgba(255,58,16,0.55)",
  },
  meatPillEs: { fontFamily: "'Anton', sans-serif", fontSize: 18, letterSpacing: "0.04em" },
  meatPillEn: { fontSize: 9, letterSpacing: "0.2em", opacity: 0.7, fontFamily: "'JetBrains Mono', monospace" },

  menuLayout: { display: "grid", gridTemplateColumns: "320px 1fr", gap: 40 },
  catTabs: { display: "flex", flexDirection: "column", borderTop: "1px solid rgba(255,58,16,0.25)" },
  catTab: {
    display: "grid", gridTemplateColumns: "30px 1fr", alignItems: "baseline", gap: 12,
    background: "transparent", color: "#fff5ec", border: "none",
    borderBottom: "1px solid rgba(255,58,16,0.18)", padding: "16px 12px 16px 0",
    textAlign: "left", position: "relative",
  },
  catTabActive: {
    color: "var(--neon-orange)",
    boxShadow: "inset 3px 0 0 var(--neon-red)",
    paddingLeft: 14,
    background: "rgba(255,58,16,0.06)",
  },
  catBody: { display: "flex", flexDirection: "column", gap: 2 },
  catNum: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, opacity: 0.45 },
  catEs: { fontFamily: "'Anton', sans-serif", fontSize: 22, letterSpacing: "0.03em", lineHeight: 1 },
  catEn: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, opacity: 0.5, letterSpacing: "0.15em" },

  menuPanel: {
    position: "relative", overflow: "hidden",
    background: "linear-gradient(180deg, rgba(20,8,28,0.9), rgba(10,6,16,0.95))",
    border: "1px solid rgba(255,58,16,0.25)",
    padding: "40px",
    boxShadow: "0 30px 80px rgba(0,0,0,0.4), inset 0 0 60px rgba(192,38,211,0.08)",
  },
  menuSkull: {
    position: "absolute", right: -60, bottom: -60,
    width: 320, height: "auto", opacity: 0.07,
    pointerEvents: "none",
    filter: "blur(0.4px)",
  },
  menuPanelHead: {
    display: "flex", justifyContent: "space-between", alignItems: "flex-end",
    paddingBottom: 24, borderBottom: "1px solid rgba(255,58,16,0.25)",
    marginBottom: 24, position: "relative", zIndex: 2,
  },
  menuPanelEs: {
    fontFamily: "'Anton', sans-serif", fontSize: 64, lineHeight: 0.95,
    color: "#fff5ec",
  },
  menuPanelEn: { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.3em", color: "var(--neon-orange)", marginTop: 6 },
  menuPanelMeat: { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.2em", opacity: 0.85 },
  menuPanelBlurb: { fontSize: 16, lineHeight: 1.6, color: "rgba(255,245,236,0.7)", maxWidth: 600, margin: "0 0 30px", position: "relative", zIndex: 2 },
  menuItems: { display: "flex", flexDirection: "column", gap: 18, position: "relative", zIndex: 2 },
  menuItem: { display: "flex", alignItems: "baseline", gap: 14 },
  menuItemL: { flexShrink: 0 },
  menuItemName: { fontFamily: "'Anton', sans-serif", fontSize: 24, letterSpacing: "0.03em" },
  menuItemDesc: { fontSize: 13, opacity: 0.6, marginTop: 4, maxWidth: 360 },
  menuItemDots: { flex: 1, borderBottom: "1px dotted rgba(255,58,16,0.35)", marginBottom: 4 },
  menuItemPrice: {
    fontFamily: "'Anton', sans-serif", fontSize: 26, color: "#fff5ec",
    textShadow: "0 0 8px var(--neon-orange), 0 0 18px var(--neon-red)",
  },
  menuPanelFoot: {
    marginTop: 36, paddingTop: 20, borderTop: "1px solid rgba(255,58,16,0.18)",
    fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", opacity: 0.55,
    position: "relative", zIndex: 2,
  },

  /* SIGNATURE STRIP */
  sigStrip: {
    background: "linear-gradient(180deg, #0a0610 0%, #150820 50%, #0a0610 100%)",
    padding: "100px 20px",
    overflow: "hidden", position: "relative",
    borderTop: "1px solid rgba(255,58,16,0.25)",
    borderBottom: "1px solid rgba(255,58,16,0.25)",
  },
  sigInner: { maxWidth: 1400, margin: "0 auto", textAlign: "center" },
  sigBig: {
    fontFamily: "'Pacifico', cursive",
    fontSize: "clamp(48px, 9vw, 132px)",
    lineHeight: 1.05, letterSpacing: "-0.01em",
    display: "flex", justifyContent: "center", alignItems: "center", gap: 32,
    flexWrap: "wrap",
  },
  sigDot: { color: "var(--neon-orange)", fontFamily: "'Anton', sans-serif", opacity: 0.5 },
  sigSub: {
    maxWidth: 600, margin: "32px auto 0", fontSize: 16, lineHeight: 1.6,
    color: "rgba(255,245,236,0.75)",
    fontFamily: "'Fraunces', Georgia, serif", fontStyle: "italic",
  },

  /* LOCATIONS */
  locSec: { maxWidth: 1400, margin: "0 auto", padding: "100px 40px" },
  locGrid: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 30 },
  locCard: {
    position: "relative", overflow: "hidden",
    background: "linear-gradient(180deg, rgba(20,8,28,0.7), rgba(10,6,16,0.9))",
    border: "1px solid rgba(255,58,16,0.22)",
    padding: 40,
    boxShadow: "0 20px 60px rgba(0,0,0,0.4)",
  },
  locCardTop: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 30, position: "relative", zIndex: 2 },
  locKind: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.3em",
    background: "var(--neon-red)", color: "#0a0610", padding: "6px 12px",
    boxShadow: "0 0 20px rgba(255,58,16,0.5)",
  },
  locNum: { fontFamily: "'Anton', sans-serif", fontSize: 48, color: "rgba(255,255,255,0.08)" },
  locName: {
    fontFamily: "'Anton', sans-serif", fontSize: 48, margin: "0 0 14px", letterSpacing: "0.02em",
    position: "relative", zIndex: 2,
  },
  locAddr: { fontSize: 15, opacity: 0.75, lineHeight: 1.55, position: "relative", zIndex: 2 },
  locPhone: {
    marginTop: 18, display: "flex", alignItems: "center", gap: 12,
    fontFamily: "'JetBrains Mono', monospace", fontSize: 13,
    flexWrap: "wrap", position: "relative", zIndex: 2,
  },
  locPhoneLab: {
    fontSize: 9, letterSpacing: "0.3em", color: "var(--neon-orange)",
    border: "1px solid rgba(255,122,58,0.5)", padding: "3px 7px",
  },
  locPhoneNum: { whiteSpace: "nowrap" },
  locHours: {
    marginTop: 30, paddingTop: 24, borderTop: "1px solid rgba(255,58,16,0.2)",
    display: "grid", gap: 10, position: "relative", zIndex: 2,
  },
  locHourRow: {
    display: "grid", gridTemplateColumns: "110px 1fr", alignItems: "baseline",
    fontFamily: "'JetBrains Mono', monospace", fontSize: 12,
  },
  locHourDay: { color: "rgba(255,245,236,0.55)", letterSpacing: "0.1em" },
  locHourTime: { color: "#fff5ec", fontWeight: 600, letterSpacing: "0.05em", whiteSpace: "nowrap" },
  locActions: { display: "flex", gap: 10, marginTop: 30, position: "relative", zIndex: 2 },

  btnPrimarySm: {
    background: "var(--neon-red)", color: "#fff", border: "none",
    padding: "12px 20px", fontSize: 11, letterSpacing: "0.18em", fontWeight: 800,
    boxShadow: "0 0 20px rgba(255,58,16,0.4)",
  },
  btnGhostSm: {
    background: "transparent", color: "#fff5ec", border: "1px solid rgba(255,245,236,0.3)",
    padding: "12px 20px", fontSize: 11, letterSpacing: "0.18em", fontWeight: 800,
  },

  locCorner: {
    position: "absolute", right: -120, bottom: -120,
    width: 240, height: 240, borderRadius: "50%",
    filter: "blur(80px)", opacity: 0.5, pointerEvents: "none",
  },

  /* FULL-BLEED INTERIOR */
  bleed: { position: "relative", height: "70vh", minHeight: 480, overflow: "hidden" },
  bleedImg: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
  bleedOverlay: {
    position: "absolute", inset: 0,
    background: "linear-gradient(90deg, rgba(10,6,16,0.85) 0%, rgba(10,6,16,0.3) 50%, rgba(10,6,16,0.7) 100%)",
  },
  bleedCaption: {
    position: "absolute", left: 60, bottom: 60, right: 60,
    maxWidth: 600, zIndex: 2,
  },
  bleedTitle: {
    fontFamily: "'Anton', sans-serif", fontSize: "clamp(48px, 6vw, 96px)",
    lineHeight: 0.92, margin: "12px 0 18px",
  },
  bleedSub: {
    fontFamily: "'Fraunces', Georgia, serif", fontStyle: "italic",
    fontSize: 18, lineHeight: 1.55, color: "rgba(255,245,236,0.85)",
  },

  /* FOOTER */
  footer: {
    background: "#050309", padding: "80px 40px 40px",
    borderTop: "1px solid rgba(255,58,16,0.25)",
  },
  footerGrid: { maxWidth: 1400, margin: "0 auto", display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 40 },
  footerTagline: { marginTop: 16, fontSize: 13, opacity: 0.6, maxWidth: 280, lineHeight: 1.5 },
  footerSocial: { display: "flex", gap: 8, marginTop: 22 },
  footerSocialLink: {
    width: 36, height: 36,
    border: "1px solid rgba(255,58,16,0.4)",
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 700, letterSpacing: "0.1em",
    color: "var(--neon-orange)",
    cursor: "pointer",
  },
  footH: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "var(--neon-orange)", letterSpacing: "0.3em", marginBottom: 18 },
  footL: { fontSize: 14, padding: "6px 0", opacity: 0.7, cursor: "pointer" },
  footerBottom: {
    maxWidth: 1400, margin: "60px auto 0", paddingTop: 24,
    borderTop: "1px solid rgba(255,58,16,0.2)",
    fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.2em", opacity: 0.45,
    display: "flex", gap: 14, flexWrap: "wrap",
  },
};

window.Proposal1Trompo = Proposal1Trompo;