// Shared primitives: Nav, Footer, MonoLabel, Arrow, Lightbox, etc.
const { useState, useEffect, useRef, useCallback, useMemo } = React;

// --------- Arrow svg
function Arrow({ size = 18 }) {
  return (
    <svg className="arrow" viewBox="0 0 24 12" width={size} height={size * 12 / 24} fill="none" stroke="currentColor" strokeWidth="1.2" aria-hidden="true">
      <line x1="0" y1="6" x2="22" y2="6" />
      <polyline points="17,1 23,6 17,11" />
    </svg>
  );
}

function Eyebrow({ children, accent = true }) {
  return (
    <span className="eyebrow">
      {accent && <span className="dot"></span>}
      {children}
    </span>
  );
}

// --------- Logo (inline SVG version of the brand mark, simplified to "DI" wordmark style)
function Logo({ inverted = false, size = 28 }) {
  const c = inverted ? "#FFFFFF" : "#15161A";
  // Recolor the mark — accent on the infinity dot ('i').
  return (
    <a href="#/" onClick={(e) => { e.preventDefault(); window.DI_NAV?.go("home"); }} aria-label="Design Infinity — Home" style={{ display: "inline-flex", alignItems: "center", gap: "0.75rem" }}>
      <svg viewBox="0 0 219 81" width={size * 2.7} height={size} fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M156.664 14.7075C150.075 14.7268 146.594 18.0501 143.525 22.0957C142.027 20.3215 140.469 18.5774 138.777 16.9982C134.613 13.1091 129.747 10.9476 125.18 10.1923C121.112 9.52485 113.363 8.8547 106.684 12.2302C102.038 14.5812 100.17 19.0718 99.9449 22.1616V40.3079H94.7059V43.2357H99.9449V61.9698C99.9449 64.0544 99.5883 65.5128 98.8779 66.3396C98.1675 67.1663 96.8646 67.581 94.9664 67.581H94.769V68.1083H101.24C104.213 68.1083 105.7 66.183 105.7 62.3406V43.2385H111.065V40.3107H105.7V23.815C105.702 20.8515 106.245 17.9869 108.111 15.6359C109.438 13.966 110.917 12.6394 112.93 11.6562C116.946 9.69788 121.48 10.7306 122.84 11.1426C126.933 12.3757 130.836 14.6554 134.424 18.0061C136.936 20.3544 139.161 22.8181 141.342 25.1169C138.201 29.5278 134.808 34.1063 128.164 36.0893C125.57 36.8583 122.923 37.0725 120.588 36.8199C118.21 36.5672 116.639 35.0236 115.98 34.2931C113.882 31.942 113.103 28.0969 114.302 24.3891L109.512 25.2982C108.988 29.0005 110.837 31.5905 113.758 34.3452C115.401 35.897 118.962 37.6685 121.845 38.4623C124.579 39.2148 127.912 39.1407 131.478 38.0778C137.685 36.2266 141.325 31.7031 144.274 27.5009C146.314 29.4674 147.67 30.6676 150.849 32.7797C153.748 34.7133 157.204 35.8668 162.278 35.5015C171.064 34.8726 173.577 26.0837 169.986 21.3102C167.644 18.2039 163.535 14.6883 156.666 14.7103L156.664 14.7075ZM160.545 34.4716C158.416 34.7545 151.8 34.9879 145.977 25.062C149.206 20.4231 152.505 16.3884 159.239 16.2676C159.813 16.2593 160.441 16.3225 161.077 16.4049C162.624 16.6191 164.906 17.4431 166.127 19.0581C169.94 24.1062 167.731 33.5268 160.548 34.4688L160.545 34.4716Z" fill="var(--accent)"/>
        <path d="M61.9989 67.5152H56.2991C53.7399 67.5152 52.459 66.1008 52.459 63.2773V16.471C52.459 14.1694 52.1709 12.5709 51.5867 11.6646C51.0025 10.7582 49.8641 10.3105 48.169 10.3105H47.8289V9.51953H57.5416V61.58C57.5416 63.6152 57.8406 65.0296 58.4441 65.8206C59.0448 66.6116 60.1749 67.0071 61.8316 67.0071H61.9989V67.5152Z" fill={c}/>
        <path d="M57.484 3.10907C57.484 3.97423 57.1823 4.70206 56.5816 5.28432C55.9754 5.86659 55.243 6.16047 54.379 6.16047C53.515 6.16047 52.7771 5.86659 52.1764 5.28432C51.573 4.70206 51.274 3.97148 51.274 3.10907C51.274 2.24666 51.573 1.5051 52.1764 0.906355C52.7771 0.299372 53.5095 0 54.379 0C55.2485 0 55.9754 0.299372 56.5816 0.906355C57.1796 1.5051 57.484 2.24117 57.484 3.10907Z" fill={c}/>
        <path d="M93.5044 66.9497L93.4496 67.5155H88.0295C85.4703 67.5155 84.1921 66.0461 84.1921 63.1045V52.7034C84.1921 49.2373 83.926 46.8423 83.3966 45.5268C82.8288 44.0546 81.7097 43.3213 80.0475 43.3213C78.7611 43.3213 77.4581 44.0574 76.136 45.5268C73.714 48.2348 72.5044 50.9127 72.5044 53.5494V67.5155H67.5369V47.7844C67.5369 44.0162 66.0694 41.9618 63.1345 41.6239V40.8329H72.5071V47.8998H73.127C75.6835 42.7747 78.9613 40.2095 82.9523 40.2095C86.9433 40.2095 89.2172 42.7912 89.2172 47.9547V61.9208C89.2172 63.8049 89.5079 65.115 90.0949 65.8511C90.6792 66.5844 91.7599 66.9497 93.3398 66.9497H93.5099H93.5044Z" fill={c}/>
        <path d="M126.79 67.5152H121.085C118.526 67.5152 117.247 66.1008 117.247 63.2773V47.7869C117.247 45.4853 116.954 43.8868 116.372 42.9832C115.791 42.0769 114.65 41.6265 112.957 41.6265H112.62V40.8354H122.33V61.5827C122.33 63.6179 122.629 65.0324 123.235 65.8234C123.839 66.6144 124.969 67.0099 126.623 67.0099H126.793V67.518L126.79 67.5152Z" fill={c}/>
        <path d="M156.288 66.9497L156.233 67.5155H150.813C148.254 67.5155 146.973 66.0461 146.973 63.1045V52.7034C146.973 49.2373 146.709 46.8423 146.18 45.5268C145.612 44.0546 144.496 43.3213 142.831 43.3213C141.544 43.3213 140.239 44.0574 138.919 45.5268C136.497 48.2348 135.288 50.9127 135.288 53.5494V67.5155H130.318V47.7844C130.318 44.0162 128.85 41.9618 125.912 41.6239V40.8329H135.288V47.8998H135.908C138.467 42.7747 141.742 40.2095 145.733 40.2095C149.724 40.2095 152.003 42.7912 152.003 47.9547V61.9208C152.003 63.8049 152.294 65.115 152.876 65.8511C153.463 66.5844 154.541 66.9497 156.123 66.9497H156.293H156.288Z" fill={c}/>
        <path d="M171.306 67.5152H165.603C163.044 67.5152 161.763 66.1008 161.763 63.2773V47.7869C161.763 45.4853 161.472 43.8868 160.891 42.9832C160.306 42.0769 159.165 41.6265 157.473 41.6265H157.133V40.8354H166.845V61.5827C166.845 63.6179 167.144 65.0324 167.751 65.8234C168.351 66.6144 169.481 67.0099 171.135 67.0099H171.306V67.518V67.5152Z" fill={c}/>
        <path d="M189.996 42.8076H182.373V61.6324C182.373 63.7472 182.631 65.1589 183.147 65.8703C183.66 66.5871 184.856 66.9469 186.735 66.9469H187.231V67.5127H180.755C178.487 67.5127 177.351 65.5874 177.351 61.7505V42.8076H173.02C172.556 42.695 172.326 42.4478 172.326 42.0716C172.326 41.6596 172.556 41.3932 173.006 41.2833C177.971 41.2421 180.459 36.9108 180.459 28.2812H182.379V41.2833H190.001V42.8104L189.996 42.8076Z" fill={c}/>
        <path d="M218.945 42.6039L208.462 69.7286C208.121 70.7475 207.518 72.3021 206.654 74.3839C204.69 78.4351 202.016 80.462 198.625 80.462H195.29V79.8413H197.492C198.809 79.8413 200.128 79.292 201.445 78.1934C202.762 77.0975 203.722 75.6913 204.322 73.9857L205.793 69.8934L196.87 47.9019C196.003 45.7926 195.326 44.4495 194.837 43.8865C194.045 42.9801 192.84 42.527 191.222 42.527H190.885V41.7387H199.55L208.319 64.263L216.91 41.9062C217.099 41.3762 217.436 41.1152 217.925 41.1152C218.641 41.1152 219 41.4613 219 42.1479C219 42.266 218.978 42.4143 218.94 42.6066L218.945 42.6039Z" fill={c}/>
        <path d="M9.58936 6.10547C13.6654 6.10547 16.5811 7.02281 18.3394 8.852C20.1003 10.6839 20.9808 13.7793 20.9808 18.138C20.9808 23.3125 19.741 26.7621 17.2641 28.5007C15.5937 29.6872 12.6203 30.2777 8.33857 30.2777H5.45573C4.85502 30.2777 4.34484 30.0442 3.92516 29.5828C3.50824 29.1186 3.29977 28.5171 3.29977 27.7728V10.8734C3.29977 9.13489 3.14891 8.02255 2.84993 7.53366C2.45494 6.90746 1.55251 6.59435 0.139891 6.59435H0V6.10822H9.58661L9.58936 6.10547ZM9.38089 29.0582C12.5051 29.0582 14.683 28.226 15.9091 26.5561C17.042 25.0043 17.6098 22.2331 17.6098 18.2451C17.6098 14.2572 17.0584 11.3458 15.9612 9.72539C14.8613 8.1022 12.8288 7.28922 9.8664 7.28922H6.70652V29.0582H9.38089Z" fill={c}/>
        <path d="M37.2355 29.7535C35.7296 30.333 34.1743 30.6214 32.5724 30.6214C29.8761 30.6214 27.7668 29.8331 26.2362 28.2566C24.7056 26.6829 23.9376 24.5021 23.9376 21.7199C23.9376 16.2268 26.3816 13.4775 31.264 13.4775C33.0936 13.4775 34.6214 13.9774 35.8475 14.9744C36.9612 15.9 37.5152 16.9546 37.5152 18.1357C37.5152 18.6959 37.3123 19.1436 36.909 19.4952C36.5031 19.8412 35.9545 20.017 35.2578 20.017H29.2178C27.967 20.017 27.3389 20.657 27.3389 21.9314C27.3389 23.6699 27.8052 25.2464 28.7323 26.6581C29.9858 28.5835 31.8017 29.5447 34.1688 29.5447C34.6351 29.5447 35.2194 29.4651 35.9298 29.303C36.6375 29.141 37.0626 29.0586 37.2025 29.0586C37.3424 29.0586 37.4467 29.119 37.5152 29.2344V29.3745C37.5152 29.5338 37.422 29.6628 37.2355 29.7562V29.7535ZM32.2707 19.1107C33.7738 19.1107 34.5282 18.6712 34.5282 17.7896C34.5282 16.8613 34.1963 16.0291 33.5407 15.2848C32.8796 14.5459 32.0869 14.1724 31.1571 14.1724C28.8886 14.1724 27.6516 15.8203 27.4431 19.1107H32.2707Z" fill={c}/>
        <path d="M48.9041 16.9186C48.5557 15.2047 47.4119 14.3478 45.4671 14.3478C44.5153 14.3478 43.7583 14.6032 43.1932 15.1141C42.6227 15.625 42.3402 16.2841 42.3402 17.0971C42.3402 18.0254 43.3304 19.0938 45.3108 20.2996C47.2885 21.5025 48.4762 22.2908 48.8711 22.6616C49.8449 23.5432 50.3304 24.6308 50.3304 25.9299C50.3304 27.3444 49.8147 28.4732 48.7834 29.3192C47.752 30.1678 46.3559 30.5881 44.5976 30.5881C43.3276 30.5881 42.1564 30.3216 41.0921 29.7888C40.165 29.3494 39.7015 28.9429 39.7015 28.5748C39.7015 28.2508 39.866 28.086 40.1897 28.086C40.2363 28.086 40.3378 28.1327 40.5051 28.226C41.9617 29.083 43.2124 29.5114 44.2548 29.5114C46.4793 29.5114 47.5874 28.6765 47.5874 27.0066C47.5874 26.081 47.1239 25.2735 46.1995 24.5759C46.1529 24.5292 45.042 23.8563 42.8668 22.5599C40.6862 21.2608 39.5972 19.8244 39.5972 18.2479C39.5972 16.8334 40.1129 15.6799 41.1443 14.7845C42.1756 13.8946 43.5114 13.4497 45.1544 13.4497C46.7975 13.4497 48.1525 13.7161 49.2195 14.2462V16.9241H48.9068L48.9041 16.9186Z" fill={c}/>
        <path d="M74.035 30.8656C74.035 33.3237 73.5303 35.0705 72.5208 36.1005C71.5169 37.1332 69.7724 37.6468 67.2955 37.6468H66.4946V37.2293H67.194C68.5792 37.2293 69.5612 36.8173 70.129 35.9961C70.694 35.1721 70.9793 33.8428 70.9793 32.0136V27.5972H70.631C69.4981 29.6132 67.9813 30.6211 66.0831 30.6211C64.185 30.6211 62.7532 29.8906 61.656 28.4294C60.5534 26.9655 60.0048 24.977 60.0048 22.4475C60.0048 19.5773 60.5341 17.3526 61.5847 15.7899C62.638 14.2244 64.0918 13.4443 65.946 13.4443C67.4958 13.4443 68.9084 14.0705 70.1811 15.3202C71.0397 16.1799 72.3234 16.6193 74.0377 16.6413V30.8656H74.035ZM70.9766 18.4156C70.0961 16.0316 68.8233 14.8368 67.1584 14.8368C64.6788 14.8368 63.4417 17.2098 63.4417 21.9641C63.4417 26.7183 64.6321 29.2341 67.0157 29.2341C68.2199 29.2341 69.1799 28.7123 69.8986 27.6686C70.6172 26.6249 70.9766 25.1775 70.9766 23.3209V18.4183V18.4156Z" fill={c}/>
        <path d="M94.0448 29.893L94.0119 30.2391H90.6764C89.102 30.2391 88.3148 29.3355 88.3148 27.5282V21.1288C88.3148 18.9948 88.1502 17.5254 87.8238 16.7124C87.4754 15.806 86.7924 15.3556 85.7638 15.3556C84.9738 15.3556 84.1702 15.806 83.3555 16.7124C81.8688 18.3823 81.1255 20.0275 81.1255 21.6507V30.2391H78.0671V18.1049C78.0671 15.7841 77.1647 14.5234 75.3571 14.3147V13.8258H81.1227V18.1736H81.5013C83.0757 15.0205 85.0918 13.4468 87.5467 13.4468C90.0017 13.4468 91.4006 15.0343 91.4006 18.2093V26.8004C91.4006 27.9594 91.5789 28.7669 91.9382 29.2173C92.3003 29.6705 92.9668 29.8957 93.9378 29.8957H94.042L94.0448 29.893Z" fill={c}/>
      </svg>
    </a>
  );
}

// --------- Nav
function Nav({ current, onNav }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const navItems = [
    { key: "projects", label: "Projects" },
    { key: "in-house", label: "In-house" },
    { key: "contact", label: "Contact" },
  ];

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 40,
      background: scrolled ? "rgba(255,255,255,0.92)" : "transparent",
      backdropFilter: scrolled ? "blur(8px)" : "none",
      borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
      transition: "all 200ms ease",
    }}>
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "1.1rem 0" }}>
        <Logo size={22} />
        <nav style={{ display: "flex", alignItems: "center", gap: "2.5rem" }} className="nav-desktop">
          {navItems.map((it) => (
            <a key={it.key} href={"#/" + it.key}
              onClick={(e) => { e.preventDefault(); onNav(it.key); }}
              style={{
                fontFamily: "var(--font-mono)", fontSize: "0.72rem", letterSpacing: "0.14em",
                textTransform: "uppercase", color: current === it.key ? "var(--ink)" : "var(--graphite)",
                position: "relative", padding: "0.5rem 0",
              }}>
              {it.label}
              {current === it.key && (
                <span style={{ position: "absolute", left: 0, right: 0, bottom: -2, height: 1, background: "var(--accent)" }}></span>
              )}
            </a>
          ))}
          <div style={{ width: 1, height: 24, background: "var(--line)" }}></div>
          <div style={{ display: "flex", gap: "0.4rem" }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: "0.72rem", letterSpacing: "0.14em", color: "var(--ink)" }}>EN</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: "0.72rem", letterSpacing: "0.14em", color: "var(--graphite)" }}>/</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: "0.72rem", letterSpacing: "0.14em", color: "var(--graphite)" }}>AR</span>
          </div>
          <button className="btn btn--solid" onClick={() => onNav("contact")}>
            Start a project <Arrow />
          </button>
        </nav>
        <button
          className="nav-mobile-toggle"
          onClick={() => setMenuOpen((v) => !v)}
          aria-label="Menu"
          style={{ background: "transparent", border: 0, color: "var(--ink)", display: "none" }}>
          <svg width="22" height="14" viewBox="0 0 22 14" fill="none" stroke="currentColor" strokeWidth="1.5"><line x1="0" y1="2" x2="22" y2="2" /><line x1="0" y1="12" x2="22" y2="12" /></svg>
        </button>
      </div>
      {menuOpen && (
        <div className="nav-mobile-panel" style={{ background: "var(--paper)", borderTop: "1px solid var(--line)" }}>
          <div className="container" style={{ padding: "1.5rem 0", display: "flex", flexDirection: "column", gap: "1rem" }}>
            {navItems.map((it) => (
              <a key={it.key} href={"#/" + it.key} onClick={(e) => { e.preventDefault(); onNav(it.key); setMenuOpen(false); }}
                className="display" style={{ fontSize: "1.5rem", color: current === it.key ? "var(--ink)" : "var(--graphite)" }}>{it.label}</a>
            ))}
          </div>
        </div>
      )}
      <style>{`
        @media (max-width: 880px) {
          .nav-desktop { display: none !important; }
          .nav-mobile-toggle { display: block !important; }
        }
        @media (min-width: 881px) {
          .nav-mobile-panel { display: none !important; }
        }
      `}</style>
    </header>
  );
}

// --------- Footer
function Footer({ onNav }) {
  return (
    <footer className="bg-ink" style={{ paddingTop: "5rem", paddingBottom: "2rem", marginTop: 0, color: "var(--paper)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "2rem", paddingBottom: "4rem" }}>
          <div style={{ gridColumn: "span 5" }}>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)" }}><span className="dot"></span>Start a project</div>
            <h2 className="display" style={{ fontSize: "clamp(2rem, 4vw, 3.25rem)", marginTop: "1rem", lineHeight: 1, color: "var(--paper)" }}>
              We design, manufacture<br/>and build — in&nbsp;house.
            </h2>
            <p style={{ marginTop: "1.5rem", color: "rgba(255,255,255,0.65)", maxWidth: "32rem" }}>
              Tell us about your space, sector and timeline. We'll get back within one working day with a project lead and the right division.
            </p>
            <div style={{ marginTop: "2rem", display: "flex", gap: "0.75rem", flexWrap: "wrap" }}>
              <button className="btn btn--accent" onClick={() => onNav("contact")}>Start a project <Arrow /></button>
              <a className="btn btn--ghost-light" href="mailto:info@design-infinity.com">info@design-infinity.com</a>
            </div>
            <div style={{ marginTop: "1rem" }}>
              <span className="wa-disabled">WhatsApp — pending verified number</span>
            </div>
          </div>

          <div style={{ gridColumn: "span 3" }} className="footer-col">
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)" }}>Dubai HQ</div>
            <p style={{ marginTop: "1rem", color: "rgba(255,255,255,0.85)", lineHeight: 1.5 }}>
              Office No. 212, Hamsah Complex<br/>P.O. Box 62522, Dubai, UAE
            </p>
            <a href="tel:+97143795902" style={{ marginTop: "1rem", display: "inline-block", color: "var(--paper)", fontFamily: "var(--font-mono)", fontSize: "0.85rem" }}>+971 4 379 5902</a>
          </div>
          <div style={{ gridColumn: "span 3" }} className="footer-col">
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)" }}>Abu Dhabi</div>
            <p style={{ marginTop: "1rem", color: "rgba(255,255,255,0.85)", lineHeight: 1.5 }}>
              Unit D101, Hanging Garden Tower<br/>Sector E3, Al Nahlah St, Al Danah
            </p>
            <a href="tel:+97124482286" style={{ marginTop: "1rem", display: "inline-block", color: "var(--paper)", fontFamily: "var(--font-mono)", fontSize: "0.85rem" }}>+971 2 448 2286</a>
          </div>
        </div>

        <hr style={{ border: 0, borderTop: "1px solid rgba(255,255,255,0.12)", margin: "0 0 2rem" }} />

        <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "2rem", alignItems: "end" }}>
          <div style={{ gridColumn: "span 4" }}>
            <Logo inverted size={20} />
          </div>
          <div style={{ gridColumn: "span 5" }} className="footer-meta">
            <div style={{ display: "flex", gap: "1.5rem", flexWrap: "wrap" }}>
              <a href="#" onClick={(e) => { e.preventDefault(); onNav("projects"); }} className="eyebrow" style={{ color: "rgba(255,255,255,0.5)" }}>Projects</a>
              <a href="#" onClick={(e) => { e.preventDefault(); onNav("in-house"); }} className="eyebrow" style={{ color: "rgba(255,255,255,0.5)" }}>In-house</a>
              <a href="#" onClick={(e) => { e.preventDefault(); onNav("contact"); }} className="eyebrow" style={{ color: "rgba(255,255,255,0.5)" }}>Contact</a>
              <span className="eyebrow" style={{ color: "rgba(255,255,255,0.5)" }}>Careers</span>
            </div>
          </div>
          <div style={{ gridColumn: "span 3", textAlign: "right" }} className="footer-meta">
            <div style={{ display: "inline-flex", gap: "0.75rem" }}>
              {["IG", "FB", "IN", "YT"].map((s) => (
                <span key={s} className="eyebrow" style={{
                  color: "rgba(255,255,255,0.6)",
                  border: "1px solid rgba(255,255,255,0.2)",
                  width: 32, height: 32, display: "inline-flex", alignItems: "center", justifyContent: "center", borderRadius: "50%",
                }}>{s}</span>
              ))}
            </div>
          </div>
        </div>

        <div style={{ marginTop: "3rem", display: "flex", justifyContent: "space-between", gap: "1rem", flexWrap: "wrap" }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: "0.7rem", color: "rgba(255,255,255,0.4)" }}>© 2026 Design Infinity LLC · Established 2012 · Dubai & Abu Dhabi</span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: "0.7rem", color: "rgba(255,255,255,0.4)" }}>ISO 9001 / 14001 / 45001 · SUPERBRANDS · LEED Platinum credentials</span>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          footer .container > div:first-child { grid-template-columns: 1fr !important; }
          footer .container > div:first-child > div { grid-column: span 12 !important; }
        }
      `}</style>
    </footer>
  );
}

// --------- Lightbox
function Lightbox({ images, index, onClose, onIndex }) {
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowLeft") onIndex((index - 1 + images.length) % images.length);
      if (e.key === "ArrowRight") onIndex((index + 1) % images.length);
    };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [index, images.length, onClose, onIndex]);

  return (
    <div className="lightbox" onClick={onClose}>
      <img src={images[index]} alt="" onClick={(e) => e.stopPropagation()} />
      <button className="lightbox-close" onClick={onClose} aria-label="Close">×</button>
      <button className="lightbox-nav prev" onClick={(e) => { e.stopPropagation(); onIndex((index - 1 + images.length) % images.length); }} aria-label="Previous">‹</button>
      <button className="lightbox-nav next" onClick={(e) => { e.stopPropagation(); onIndex((index + 1) % images.length); }} aria-label="Next">›</button>
      <div className="lightbox-counter">{String(index + 1).padStart(2, "0")} / {String(images.length).padStart(2, "0")}</div>
    </div>
  );
}

Object.assign(window, { Arrow, Eyebrow, Logo, Nav, Footer, Lightbox });
