/* global React, BrandStrip, SectionHead, PageHero, WaveDivider, ICON_BY_NAME,
   IconBed, IconWaves, IconArrow, IconCheck, IconColumn, IconShield, IconAnchor,
   IconSunrise, IconCalendar, IconClose, AMENITIES, UNITS, TYPE_META, UNIT_PHOTOS */

const { useState: useStateRes, useMemo: useMemoRes, useEffect: useEffectRes, useRef: useRefRes } = React;

// BoxBrownie draft floor plan PNG exports — keyed by layout code.
// Final dimensions confirmed before lease signing.
const FP_IMAGES = {
  "A-01": "images/floor-plans/boxbrownie-20260522-type-4-01-1br.png",
  "A-02": "images/floor-plans/boxbrownie-20260522-type-4-02-1br.png",
  "A-03": "images/floor-plans/boxbrownie-20260522-type-4-03-1br.png",
  "A-04": "images/floor-plans/boxbrownie-20260522-type-4-04-1br-den.png",
  "A-05": "images/floor-plans/boxbrownie-20260522-type-4-05-2br.png",
  "A-06": "images/floor-plans/boxbrownie-20260522-type-4-06-1br.png",
  "A-07": "images/floor-plans/boxbrownie-20260522-type-4-07-1br.png",
  "PH-1": "images/floor-plans/boxbrownie-20260522-type-10-01-2br.png",
  "PH-2": "images/floor-plans/boxbrownie-20260522-type-10-02-2br.png",
  "PH-3": "images/floor-plans/boxbrownie-20260522-type-10-03-2br.png",
  "PH-4": "images/floor-plans/boxbrownie-20260522-type-10-04-2br.png",
  "PH-5": "images/floor-plans/boxbrownie-20260522-type-10-05-1br.png",
};

// =====================================================
// RESIDENCES PAGE
// =====================================================
function ResidencesPage({ openTour, openApply }) {
  const [activeType, setActiveType] = useStateRes("1br");
  const [displayType, setDisplayType] = useStateRes("1br");
  const [typePhase, setTypePhase] = useStateRes("");
  const [selectedUnitId, setSelectedUnitId] = useStateRes(null);
  const [activePhotoIndex, setActivePhotoIndex] = useStateRes(0);
  const [photoViewerOpen, setPhotoViewerOpen] = useStateRes(false);
  const [floorPlanViewerOpen, setFloorPlanViewerOpen] = useStateRes(false);
  const typeTimerRef = useRefRes(null);

  const units = useMemoRes(
    () => UNITS.filter((u) => u.type === displayType),
    [displayType]
  );

  const changeType = (nextType) => {
    if (nextType === activeType) return;
    setActiveType(nextType);
    setPhotoViewerOpen(false);
    setFloorPlanViewerOpen(false);
    window.clearTimeout(typeTimerRef.current);
    setTypePhase("is-leaving");
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    typeTimerRef.current = window.setTimeout(() => {
      setSelectedUnitId(null);
      setDisplayType(nextType);
      setTypePhase("is-entering");
      window.requestAnimationFrame(() => window.requestAnimationFrame(() => setTypePhase("")));
    }, reduceMotion ? 0 : 180);
  };

  // First waitlist-open unit selected by default per type
  const selectedUnit = useMemoRes(() => {
    if (selectedUnitId) {
      const found = units.find((u) => u.unit === selectedUnitId);
      if (found) return found;
    }
    return units[0];
  }, [selectedUnitId, units]);

  const selectedHasOceanView = selectedUnit?.view && selectedUnit.view.includes("Ocean");
  const selectedPhotos = selectedUnit ? (UNIT_PHOTOS[selectedUnit.layout] || []) : [];
  const activePhoto = selectedPhotos[activePhotoIndex] || selectedPhotos[0];
  const selectedFloorPlan = selectedUnit ? FP_IMAGES[selectedUnit.layout] : null;

  useEffectRes(() => {
    setActivePhotoIndex(0);
    setPhotoViewerOpen(false);
    setFloorPlanViewerOpen(false);
  }, [selectedUnit?.unit]);

  useEffectRes(() => {
    if (!photoViewerOpen && !floorPlanViewerOpen) return undefined;
    const previousOverflow = document.body.style.overflow;
    const onKey = (e) => {
      if (e.key === "Escape") {
        setPhotoViewerOpen(false);
        setFloorPlanViewerOpen(false);
      }
      if (photoViewerOpen && selectedPhotos.length > 0 && e.key === "ArrowRight") {
        setActivePhotoIndex((i) => (i + 1) % selectedPhotos.length);
      }
      if (photoViewerOpen && selectedPhotos.length > 0 && e.key === "ArrowLeft") {
        setActivePhotoIndex((i) => (i - 1 + selectedPhotos.length) % selectedPhotos.length);
      }
    };
    document.body.style.overflow = "hidden";
    document.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = previousOverflow;
      document.removeEventListener("keydown", onKey);
    };
  }, [photoViewerOpen, floorPlanViewerOpen, selectedPhotos.length]);

  useEffectRes(() => () => window.clearTimeout(typeTimerRef.current), []);

  return (
    <div>
      <PageHero
        eyebrow="The Residences"
        title="Availability & Floor Plans"
        lede="One bedroom, one bedroom + den, and two bedroom residences — fully renovated for 2026. Select ocean-facing layouts, private balconies, and five top-floor penthouses."
        photoUrl="images/aerial-1.jpeg"
      />

      <section className="section bg-cream">
        <div className="shell">
          {/* Availability counter strip */}
          <div style={{
            display: "flex", alignItems: "center", gap: "var(--space-6)", flexWrap: "wrap",
            paddingBottom: "var(--space-6)", marginBottom: "var(--space-6)",
            borderBottom: "1px solid rgba(13,27,42,0.08)"
          }}>
            <div className="avail-counter">
              <span className="num">{UNITS.length}</span>
              <span className="lbl">residences · availability unconfirmed</span>
            </div>
            <p style={{ fontSize: 13, color: "var(--muted)", margin: 0, maxWidth: 460 }}>
              Join the waitlist to share your preferences. Tours and lease signing are not open yet;
              first residents are targeted for Fall 2026 occupancy, subject to certificate of occupancy.
            </p>
          </div>

          {/* Type tabs */}
          <div className="fp-tabs">
            {["1br", "1br_den", "2br"].map((t) => {
              const count = UNITS.filter((u) => u.type === t).length;
              return (
                <button
                  key={t}
                  className={"fp-tab" + (activeType === t ? " active" : "")}
                  onClick={() => changeType(t)}>
                  <IconBed size={18} className="ico" />
                  {TYPE_META[t].label} <span style={{ opacity: 0.6, marginLeft: 6 }}>({count})</span>
                </button>
              );
            })}
          </div>

          {/* Two-column unit list + diagram */}
          <div style={{
            display: "grid",
            gridTemplateColumns: "1.3fr 1fr",
            gap: "var(--space-7)",
            paddingTop: "var(--space-5)"
          }} className={`res-grid state-panel ${typePhase}`}>
            <div>
              <h3 style={{ fontSize: 28, marginBottom: 6 }}>{TYPE_META[displayType].label} Availability</h3>
              <p style={{ color: "var(--muted)", fontSize: 14, marginBottom: 24 }}>
                Explore {units.length} residences of this type · ocean living in a space that fits your lifestyle.
              </p>
              <div className="unit-table-wrap">
                <table className="unit-table">
                  <thead>
                    <tr>
                      <th>Photo</th>
                      <th>Unit</th>
                      <th>Floor</th>
                      <th>Layout</th>
                      <th>Balcony</th>
                      <th>Sq Ft</th>
                      <th>Status</th>
                      <th style={{ textAlign: "right" }}>Est. Rent*</th>
                    </tr>
                  </thead>
                  <tbody>
                    {units.map((u) => {
                      const photos = UNIT_PHOTOS[u.layout] || [];
                      return (
                        <tr key={u.unit}
                            className={"unit-row" + (selectedUnit && selectedUnit.unit === u.unit ? " selected" : "")}
                            onClick={() => setSelectedUnitId(u.unit)}>
                          <td>
                            {photos[0] ? (
                              <img className="unit-thumb" src={photos[0].src} alt="" loading="lazy" />
                            ) : (
                              <span className="unit-thumb-placeholder">PH</span>
                            )}
                          </td>
                          <td><strong>{u.unit}</strong></td>
                          <td>{u.floor}{u.ph ? " · PH" : ""}</td>
                          <td>{u.layout}</td>
                          <td>{u.balcony ? "Yes" : "\u2014"}</td>
                          <td>{u.sqft.toLocaleString()}</td>
                          <td>
                            <span className="status-pill waitlist">
                              Availability unconfirmed
                            </span>
                          </td>
                          <td style={{ textAlign: "right", fontWeight: 600 }}>
                            ${u.rent.toLocaleString()}*
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
              <PricingDisclosure />
              <div style={{
                marginTop: 24, padding: "14px 18px",
                background: "rgba(125,143,161,0.1)",
                border: "1px solid rgba(125,143,161,0.25)",
                fontSize: 12.5, color: "var(--muted)",
                display: "flex", gap: 10, alignItems: "flex-start"
              }}>
                <IconCalendar size={16} style={{ color: "var(--bronze)", flexShrink: 0, marginTop: 2 }} />
                <span>These plans are for browsing and do not confirm availability. Rents are estimates. Join the waitlist to share your preferences; tours and lease signing are not yet open.</span>
              </div>
            </div>

            {/* Detail panel */}
            <div style={{ position: "sticky", top: 100, alignSelf: "start" }}>
              {selectedUnit && (
                <article key={selectedUnit.unit} className="detail-card" style={{ background: "#fff", border: "1px solid rgba(13,27,42,0.08)", padding: "var(--space-6)" }}>
                  <span className="eyebrow" style={{ display: "block" }}>{TYPE_META[selectedUnit.type].label}</span>
                  <h3 style={{ marginTop: 6, fontSize: 28 }}>Unit {selectedUnit.unit}</h3>
                  <div style={{ fontSize: 12.5, letterSpacing: "0.06em", color: "var(--muted)", marginTop: 6 }}>
                    {selectedUnit.layout} ·
                    {" "}{selectedUnit.beds === 1.5 ? "1 Bed + Den" : `${selectedUnit.beds} Bed`} ·
                    {" "}{selectedUnit.baths} Bath ·
                    {" "}{selectedUnit.sqft.toLocaleString()} sq ft ·
                    {" "}Floor {selectedUnit.floor}{selectedUnit.ph ? " (Penthouse)" : ""}
                  </div>

                  {selectedPhotos.length > 0 && (
                    <div className="unit-photo-set">
                      <div className="unit-photo-head">
                        <span>Representative {selectedUnit.layout} Photos</span>
                        <span>{selectedPhotos.length} photos</span>
                      </div>
                      <div className="unit-photo-stage">
                        {selectedPhotos.length > 1 && (
                          <button
                            type="button"
                            className="unit-photo-nav prev"
                            aria-label="Previous photo"
                            onClick={() => setActivePhotoIndex((activePhotoIndex - 1 + selectedPhotos.length) % selectedPhotos.length)}>
                            {"<"}
                          </button>
                        )}
                        <button
                          type="button"
                          className="unit-photo-open"
                          aria-label="Open full-screen photo viewer"
                          onClick={() => setPhotoViewerOpen(true)}>
                          <img
                            key={activePhoto.src}
                            className="unit-photo-main media-swap"
                            src={activePhoto.src}
                            alt={activePhoto.alt}
                          />
                        </button>
                        {selectedPhotos.length > 1 && (
                          <button
                            type="button"
                            className="unit-photo-nav next"
                            aria-label="Next photo"
                            onClick={() => setActivePhotoIndex((activePhotoIndex + 1) % selectedPhotos.length)}>
                            {">"}
                          </button>
                        )}
                      </div>
                      <div className="unit-photo-strip" aria-label={`${selectedUnit.layout} representative interior photos`}>
                        {selectedPhotos.map((photo, i) => (
                          <button
                            type="button"
                            key={photo.src}
                            className={"unit-photo-thumb" + (i === activePhotoIndex ? " active" : "")}
                            aria-label={`Show photo ${i + 1}`}
                            onClick={() => {
                              setActivePhotoIndex(i);
                              setPhotoViewerOpen(true);
                            }}>
                            <img src={photo.src} alt={photo.alt} loading="lazy" />
                          </button>
                        ))}
                      </div>
                    </div>
                  )}

                  {selectedPhotos.length > 0 && activePhoto && (
                    <div
                      className={"unit-photo-viewer" + (photoViewerOpen ? " open" : "")}
                      role="dialog"
                      aria-modal="true"
                      aria-label={`${selectedUnit.layout} photo viewer`}
                      aria-hidden={!photoViewerOpen}
                      onClick={() => setPhotoViewerOpen(false)}>
                      <div className="unit-photo-viewer-content" onClick={(e) => e.stopPropagation()}>
                        <button
                          type="button"
                          className="unit-photo-viewer-close"
                          aria-label="Close photo viewer"
                          onClick={() => setPhotoViewerOpen(false)}>
                          <IconClose size={20} />
                        </button>
                        {selectedPhotos.length > 1 && (
                          <button
                            type="button"
                            className="unit-photo-viewer-nav prev"
                            aria-label="Previous photo"
                            onClick={() => setActivePhotoIndex((activePhotoIndex - 1 + selectedPhotos.length) % selectedPhotos.length)}>
                            {"<"}
                          </button>
                        )}
                        <img
                          key={activePhoto.src}
                          className="unit-photo-viewer-img media-swap"
                          src={activePhoto.src}
                          alt={activePhoto.alt}
                        />
                        {selectedPhotos.length > 1 && (
                          <button
                            type="button"
                            className="unit-photo-viewer-nav next"
                            aria-label="Next photo"
                            onClick={() => setActivePhotoIndex((activePhotoIndex + 1) % selectedPhotos.length)}>
                            {">"}
                          </button>
                        )}
                        <div className="unit-photo-viewer-footer">
                          <span>{selectedUnit.layout} · Unit {selectedUnit.unit}</span>
                          <span>{activePhotoIndex + 1} of {selectedPhotos.length}</span>
                        </div>
                        <div className="unit-photo-viewer-strip" aria-label="Photo viewer thumbnails">
                          {selectedPhotos.map((photo, i) => (
                            <button
                              type="button"
                              key={photo.src}
                              className={"unit-photo-viewer-thumb" + (i === activePhotoIndex ? " active" : "")}
                              aria-label={`Show photo ${i + 1}`}
                              onClick={() => setActivePhotoIndex(i)}>
                              <img src={photo.src} alt={photo.alt} loading="lazy" />
                            </button>
                          ))}
                        </div>
                      </div>
                    </div>
                  )}

                  {/* Floor plan diagram */}
                  {selectedFloorPlan ? (
                    <button type="button" className="fp-diagram fp-diagram-open" style={{
                      margin: "20px 0", aspectRatio: "5/4",
                      background: "var(--linen)",
                      border: "1px solid rgba(13,27,42,0.1)",
                      backgroundImage: `url(${selectedFloorPlan})`,
                      backgroundSize: "contain",
                      backgroundRepeat: "no-repeat",
                      backgroundPosition: "center"
                    }} aria-label={`Open Unit ${selectedUnit.unit} floor plan full screen`} onClick={() => setFloorPlanViewerOpen(true)} />
                  ) : (
                    <div className="placeholder fp-diagram" style={{ margin: "20px 0", aspectRatio: "5/4" }}>
                      <div className="ph-tag">UNIT {selectedUnit.unit} · FLOOR PLAN</div>
                    </div>
                  )}

                  {selectedFloorPlan && (
                    <div
                      className={"unit-photo-viewer floor-plan-viewer" + (floorPlanViewerOpen ? " open" : "")}
                      role="dialog"
                      aria-modal="true"
                      aria-label={`Unit ${selectedUnit.unit} floor plan viewer`}
                      aria-hidden={!floorPlanViewerOpen}
                      onClick={() => setFloorPlanViewerOpen(false)}>
                      <div className="unit-photo-viewer-content" onClick={(e) => e.stopPropagation()}>
                        <button
                          type="button"
                          className="unit-photo-viewer-close"
                          aria-label="Close floor plan viewer"
                          onClick={() => setFloorPlanViewerOpen(false)}>
                          <IconClose size={20} />
                        </button>
                        <img
                          className="floor-plan-viewer-img"
                          src={selectedFloorPlan}
                          alt={`Unit ${selectedUnit.unit} floor plan`}
                        />
                        <div className="unit-photo-viewer-footer">
                          <span>{selectedUnit.layout} · Unit {selectedUnit.unit}</span>
                          <span>Floor plan</span>
                        </div>
                      </div>
                    </div>
                  )}

                  <h4 style={{ fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--navy)", fontWeight: 600, marginBottom: 14 }}>
                    Features
                  </h4>
                  <ul className="fp-feature-list">
                    <li><IconWaves className="ico" /> {selectedUnit.view}</li>
                    {!selectedUnit.balcony ? (
                      <li><IconColumn className="ico" /> Floor-to-ceiling windows</li>
                    ) : (
                      <li><IconColumn className="ico" /> Imported European windows</li>
                    )}
                    {selectedUnit.balcony && (
                      <li>
                        <IconCheck className="ico" />
                        {selectedHasOceanView
                          ? "Large European sliding balcony door with floor-to-ceiling ocean view"
                          : "Large European sliding balcony door"}
                      </li>
                    )}
                    <li><IconAnchor className="ico" /> Fully renovated 2026</li>
                    <li><IconCheck className="ico" /> Stainless appliances · Quartz counters</li>
                    {selectedUnit.balcony && <li><IconCheck className="ico" /> Private balcony</li>}
                    <li><IconCheck className="ico" /> Shared laundry on every floor</li>
                    <li><IconCheck className="ico" /> Multi-zone mini-split heating & cooling</li>
                    {selectedUnit.ph && <li><IconCheck className="ico" /> Top-floor penthouse residence</li>}
                  </ul>

                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 24, paddingTop: 20, borderTop: "1px solid rgba(13,27,42,0.08)" }}>
                    <div>
                      <div className="eyebrow" style={{ fontSize: 10 }}>Est. Rent*</div>
                      <div className="serif" style={{ fontSize: 36, color: "var(--navy)", fontWeight: 600 }}>
                        ${selectedUnit.rent.toLocaleString()}<span style={{ fontSize: 14, color: "var(--muted)", fontFamily: "var(--sans)", fontWeight: 400 }}>/mo</span>
                      </div>
                    </div>
                  </div>
                  <PricingDisclosure compact />
                  <div style={{ display: "grid", gap: 10, marginTop: 18 }}>
                    <button className="btn btn-navy" onClick={openTour}>Join Waitlist</button>
                  </div>
                </article>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Resident benefits row */}
      <section className="section-tight bg-linen">
        <div className="shell">
          <div className="card-grid cols-4" style={{ gap: 0 }}>
            {[
              { ico: IconWaves, lbl: "Oceanfront Living", sub: "Steps from beach and Boardwalk." },
              { ico: IconColumn, lbl: "Timeless Architecture", sub: "Classic design with modern comfort." },
              { ico: IconShield, lbl: "Security & Service", sub: "Attentive on-site management." },
              { ico: IconAnchor, lbl: "Anchor Stability", sub: "Built on a legacy of quality." },
            ].map((it) => (
              <div className="amenity" key={it.lbl}>
                <it.ico size={36} />
                <div className="lbl">{it.lbl}</div>
                <div className="desc">{it.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <BrandStrip />
    </div>
  );
}

// =====================================================
// AMENITIES PAGE
// =====================================================
function AmenitiesPage({ openTour, navTo }) {
  return (
    <div>
      <PageHero
        eyebrow="Amenities & Resident Services"
        title="Designed for comfort. Built for everyday living."
        photoUrl="images/aerial-1.jpeg"
      />

      <section className="section bg-cream">
        <div className="shell">
          <SectionHead
            eyebrow="Resident Privileges"
            title="Every detail considered."
            lede="From rooftop fitness and indoor pickleball to secure access, package service, EV-ready parking, and fully renovated residences — our amenities are designed for the way you actually live."
          />

          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, border: "1px solid rgba(13,27,42,0.08)", background: "#fff" }} className="amenities-grid">
            {AMENITIES.map((a, i) => {
              const Ico = ICON_BY_NAME[a.icon] || IconWaves;
              const isLastOdd = AMENITIES.length % 2 === 1 && i === AMENITIES.length - 1;
              return (
                <div key={a.label}
                     style={{
                       display: "grid",
                       gridTemplateColumns: "auto 1fr",
                       gap: 24,
                       padding: 36,
                       gridColumn: isLastOdd ? "1 / -1" : undefined,
                       borderRight: !isLastOdd && i % 2 === 0 ? "1px solid rgba(13,27,42,0.08)" : "none",
                       borderBottom: i < AMENITIES.length - (AMENITIES.length % 2 === 0 ? 2 : 1) ? "1px solid rgba(13,27,42,0.08)" : "none"
                     }}>
                  <div style={{
                    width: 64, height: 64,
                    border: "1px solid var(--bronze)",
                    color: "var(--bronze)",
                    display: "grid", placeItems: "center",
                    flexShrink: 0
                  }}>
                    <Ico size={32} />
                  </div>
                  <div>
                    <h3 style={{ fontSize: 22, color: "var(--navy)", marginBottom: 8 }}>{a.label}</h3>
                    <p style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.6, margin: 0 }}>{a.desc}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Rooftop feature */}
      <section className="section bg-navy">
        <div className="shell">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-8)", alignItems: "center" }} className="intro-grid">
            <div className="placeholder dark" style={{ aspectRatio: "5/4" }}>
              <div className="ph-tag">ROOFTOP FITNESS · OCEAN-VIEW</div>
            </div>
            <div>
              <span className="eyebrow on-dark">Top of the House</span>
              <h2 style={{ marginTop: 14, color: "var(--linen-2)" }}>A rooftop made for residents.</h2>
              <WaveDivider onDark />
              <p className="lede" style={{ marginTop: 20, color: "rgba(245,242,237,0.82)" }}>
                The full top floor is yours. A modern fitness center looks out across the Atlantic.
                A year-round indoor pickleball court means no rain delays, no wait lists, no club fees.
              </p>
              <ul style={{ listStyle: "none", padding: 0, margin: "28px 0 0", display: "grid", gap: 12 }}>
                {[
                  "Cardio & strength equipment with ocean views",
                  "Year-round indoor pickleball court",
                  "Yoga and stretching area",
                  "Resident-only access · Open 5am – 11pm"
                ].map((t) => (
                  <li key={t} style={{ display: "flex", gap: 12, alignItems: "center", color: "rgba(245,242,237,0.82)", fontSize: 14 }}>
                    <IconCheck size={16} style={{ color: "var(--bronze-soft)" }} /> {t}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Parking feature */}
      <section className="section bg-cream">
        <div className="shell">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-8)", alignItems: "center" }} className="intro-grid">
            <div>
              <span className="eyebrow">Parking & Transit</span>
              <h2 style={{ marginTop: 14 }}>Three stories of secure parking.</h2>
              <WaveDivider />
              <p className="lede" style={{ marginTop: 20 }}>
                A dedicated three-story garage with a car elevator means your space is reserved,
                covered, and steps from your door — a rarity on the boardwalk.
              </p>
              <ul style={{ listStyle: "none", padding: 0, margin: "28px 0 0", display: "grid", gap: 12 }}>
                {[
                  "Reserved resident spaces",
                  "Three-story secure garage with car elevator",
                  "Four to six planned EV charging spots",
                  "Secure indoor bike storage room",
                  "ButterflyMX building access control",
                  "Easy access to NJ Transit and the Atlantic City Expressway"
                ].map((t) => (
                  <li key={t} style={{ display: "flex", gap: 12, alignItems: "center", fontSize: 14 }}>
                    <IconCheck size={16} style={{ color: "var(--bronze)" }} /> {t}
                  </li>
                ))}
              </ul>
            </div>
            <div className="placeholder" style={{ aspectRatio: "5/4" }}>
              <div className="ph-tag">PARKING GARAGE · CAR ELEVATOR</div>
            </div>
          </div>
        </div>
      </section>

      <BrandStrip />
    </div>
  );
}

Object.assign(window, { ResidencesPage, AmenitiesPage });