/* LuxuryRentals.jsx — Page content for luxury-rentals.html */

function LuxuryRentalsHero() {
  return (
    <section style={{ position: 'relative', height: '78vh', minHeight: 560, overflow: 'hidden' }}>
      <img src="https://images.unsplash.com/photo-1582719508461-905c673771fd?w=2000&q=80"
           alt="Miami luxury skyline" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(15,42,66,0.25) 0%, rgba(15,42,66,0.85) 100%)',
      }} />
      <div className="container" style={{
        position: 'relative', zIndex: 2, height: '100%',
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
        paddingBottom: 80, color: '#fff',
      }}>
        <div className="brandline" style={{ fontSize: 12, color: 'rgba(255,255,255,0.86)', marginBottom: 20, display: 'inline-flex', gap: 12, alignItems: 'center' }}>
          <span style={{ width: 24, height: 1, background: 'var(--horizon-200)' }} />
          NOVUS RESIDENTIALS · LUXURY RENTALS
        </div>
        <h1 style={{
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 'clamp(48px, 6.4vw, 84px)', lineHeight: 1.04,
          color: '#fff', letterSpacing: '-0.02em', margin: '0 0 18px', textWrap: 'balance',
          maxWidth: 880,
        }}>
          High-rise living, <em style={{ fontStyle: 'italic' }}>refined</em>.
        </h1>
        <p style={{ color: 'rgba(255,255,255,0.86)', fontSize: 18, maxWidth: 580, lineHeight: 1.6 }}>
          Two of Miami's most coveted addresses, hosted by Novus — Aston Martin Residences in Downtown and Aria on the Bay in Edgewater.
        </p>
      </div>
    </section>
  );
}

function LuxuryRentalsBody() {
  const panels = [
    {
      photo: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1500&q=80',
      badge: '66-story tower · Downtown',
      title: 'Aston Martin Residences',
      body: 'A 66-story tower designed by Aston Martin, on Biscayne Bay\u2019s deepest waterfront. Inside our 2-bedroom unit: floor-to-ceiling glass, art-deco influences, a private balcony framing the bay. Building amenities feel pulled from a five-star resort — infinity pool, spa, gym, theater room, a private yacht marina for residents.',
      facts: ['2 bedrooms · 2 baths', 'Bay views, 50+ floors up', 'Spa + infinity pool + gym', 'Private marina + valet', '24/7 concierge & security'],
      cta: { href: 'property.html?id=aston-martin', label: 'See the residence' },
    },
    {
      photo: '../../assets/properties/aria-on-the-bay-bedroom.png',
      badge: 'Edgewater · Biscayne Bay',
      title: 'Aria on the Bay',
      body: 'A modern apartment in Edgewater with two resort-style pools, hot tub, spa, BBQ areas, and a private theater for residents. Inside: Bosch kitchen, designer furnishings, and a wide balcony you\u2019ll spend every sunset on. Steps from the Design District and a quick drive to South Beach.',
      facts: ['2 bedrooms · 2 baths', 'Bay balcony at sunset', 'Bosch appliances', 'Two resort pools + spa', 'BBQ area + theater room'],
      cta: { href: 'property.html?id=aria-on-the-bay', label: 'See the residence' },
    },
  ];
  return (
    <ScrollStory
      eyebrow={{
        overline: 'The portfolio',
        title: 'Two addresses. One standard.',
        intro: 'Both buildings are five-star residences in their own right — Novus operates premium units inside them, with the same concierge, cleaning, and turn-down standards we run across our villas.',
      }}
      panels={panels}
    />
  );
}

function MiamiStripe() {
  const tiles = [
    { name: 'Design District', img: 'https://images.unsplash.com/photo-1571503600375-15bb0f0c8be0?w=900&q=80' },
    { name: 'Brickell', img: 'https://images.unsplash.com/photo-1535498730771-e735b998cd64?w=900&q=80' },
    { name: 'South Beach', img: 'https://images.unsplash.com/photo-1582719508461-905c673771fd?w=900&q=80' },
    { name: 'Biscayne Bay', img: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=900&q=80' },
  ];
  return (
    <section style={{ padding: '64px 0', background: 'var(--sand-100)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 36 }}>
          <span className="sun-bullet" />
          <div className="overline" style={{ marginTop: 14 }}>The neighborhoods</div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: 'clamp(28px, 3vw, 40px)', color: 'var(--navy-900)',
            margin: '12px auto 12px', letterSpacing: '-0.01em', maxWidth: 640, textWrap: 'balance',
          }}>Walk to the best of Miami.</h2>
          <p style={{ color: 'var(--ink-500)', fontSize: 15, maxWidth: 580, margin: '0 auto', lineHeight: 1.6 }}>
            From galleries in the Design District to oysters in Brickell — both addresses sit at the center of what makes Miami feel like Miami.
          </p>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
          gap: 12,
        }}>
          {tiles.map(t => (
            <div key={t.name} className="hover-zoom" style={{
              position: 'relative', borderRadius: 14, overflow: 'hidden',
              aspectRatio: '3/4', background: 'var(--sand-200)',
              cursor: 'pointer',
            }}>
              <img src={t.img} alt={t.name} style={{
                width: '100%', height: '100%', objectFit: 'cover',
                transition: 'transform 800ms var(--ease-novus)',
              }} />
              <div style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(180deg, transparent 50%, rgba(10,31,51,0.75) 100%)',
              }} />
              <div style={{
                position: 'absolute', left: 14, bottom: 14, color: '#fff',
                fontFamily: 'var(--font-display)', fontSize: 'clamp(16px, 2vw, 22px)',
                letterSpacing: '-0.01em', textShadow: '0 1px 4px rgba(0,0,0,0.4)',
              }}>{t.name}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LuxuryReviewsBlock() {
  const reviews = window.MORE_REVIEWS.filter(r => /Aston|Aria|sunset|spa|balcony|Bosch|downtown/i.test(r.text)).slice(0, 6)
    .concat(window.MORE_REVIEWS.slice(0, 3)).slice(0, 6);
  return (
    <section style={{ padding: '96px 0', background: 'var(--sand-50)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 36 }}>
          <span className="sun-bullet" />
          <div className="overline" style={{ marginTop: 14 }}>What guests say</div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: 'clamp(28px, 3vw, 40px)', color: 'var(--navy-900)',
            margin: '12px auto 0', letterSpacing: '-0.01em',
          }}>Reviews from this past year</h2>
        </div>
        <ReviewsGrid reviews={reviews} cols={3} />
      </div>
    </section>
  );
}

/* Stat strip below hero — mirrors the Experiences page rhythm */
function LuxuryStats() {
  const stats = [
    { n: '2', l: 'Signature towers' },
    { n: '4.96★', l: 'Guest rating' },
    { n: '66', l: 'Floors at Aston Martin' },
    { n: '24/7', l: 'Building concierge' },
    { n: '< 20 min', l: 'Host response' },
  ];
  return (
    <div style={{ background: 'var(--navy-900)', borderBottom: '1px solid rgba(165,207,230,0.14)' }}>
      <style>{`
        .lux-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
        @media (min-width: 640px) { .lux-stats-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (min-width: 1024px) { .lux-stats-grid { grid-template-columns: repeat(5, 1fr); } }
        .lux-stat-item { padding: 16px 12px; text-align: center; border-right: 1px solid rgba(165,207,230,0.12); border-bottom: 1px solid rgba(165,207,230,0.12); }
        @media (min-width: 1024px) { .lux-stat-item { padding: 24px 12px; border-bottom: 0; } }
        .lux-stat-item:last-child { border-right: 0; }
        .lux-stat-num { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2.8vw, 28px); color: #fff; letter-spacing: -0.01em; line-height: 1.05; }
        .lux-stat-label { margin-top: 4px; font-size: 10px; color: rgba(165,207,230,0.7); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
      `}</style>
      <div className="container">
        <div className="lux-stats-grid">
          {stats.map(s => (
            <div key={s.l} className="lux-stat-item">
              <div className="lux-stat-num">{s.n}</div>
              <div className="lux-stat-label">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* What every residence includes — building + Novus service layer */
function LuxuryAmenities() {
  const items = [
    { icon: 'pool', title: 'Resort amenities', body: 'Infinity and resort pools, spa, hot tub, and a full gym — building amenities pulled straight from a five-star resort.' },
    { icon: 'concierge', title: '24/7 concierge', body: 'Building concierge and security around the clock, layered with the Novus host who answers in under 20 minutes.' },
    { icon: 'view', title: 'Bay-view interiors', body: 'Floor-to-ceiling glass, designer furnishings, and balconies framing Biscayne Bay at sunset.' },
    { icon: 'chef', title: 'Chef-grade kitchens', body: 'Bosch and Wolf appliance suites, ready for a private chef or your own long-stay cooking.' },
    { icon: 'boat', title: 'Marina & valet', body: 'Private resident marina at Aston Martin, valet parking, and assigned spaces across both addresses.' },
    { icon: 'clean', title: 'Hotel-grade service', body: 'The same housekeeping, linen, and turn-down standard we run across every Novus villa.' },
  ];
  return (
    <section style={{ padding: 'clamp(64px, 10vw, 100px) 0', background: 'var(--navy-900)', position: 'relative', overflow: 'hidden' }}>
      <style>{`
        .lux-am-glow { position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(245,166,89,0.16), transparent 70%); pointer-events: none; }
        .lux-am-head { max-width: 720px; margin-bottom: clamp(32px, 6vw, 56px); position: relative; z-index: 1; }
        .lux-am-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 52px); color: #fff; letter-spacing: -0.02em; margin: 14px 0 0; line-height: 1.1; }
        .lux-am-title em { font-style: italic; color: var(--sun-amber); }
        .lux-am-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
        .lux-am-tile { padding: 30px 26px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; transition: all 400ms var(--ease-novus); }
        .lux-am-tile:hover { background: rgba(255,255,255,0.08); border-color: rgba(245,166,89,0.4); transform: translateY(-4px); }
        .lux-am-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--sunset-gradient-warm); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: 0 8px 24px rgba(245,166,89,0.3); }
        .lux-am-tile h3 { font-family: var(--font-display); font-weight: 400; font-size: 21px; color: #fff; margin: 0 0 8px; letter-spacing: -0.01em; }
        .lux-am-tile p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.68); margin: 0; }
      `}</style>
      <div className="lux-am-glow" />
      <div className="container">
        <div className="lux-am-head">
          <div className="overline" style={{ color: 'var(--sun-amber)' }}>What's included</div>
          <h2 className="lux-am-title">Five-star buildings, <em>Novus service</em>.</h2>
        </div>
        <div className="lux-am-grid">
          {items.map(it => (
            <div key={it.title} className="lux-am-tile">
              <div className="lux-am-icon"><LuxIcon name={it.icon} /></div>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LuxIcon({ name }) {
  const paths = {
    pool: 'M2 18s2-1 4-1 3 1 6 1 4-1 6-1 4 1 4 1M2 22s2-1 4-1 3 1 6 1 4-1 6-1 4 1 4 1M6 14V5a2 2 0 0 1 2-2h3v11M18 14V5a2 2 0 0 0-2-2h-3v11',
    concierge: 'M21 11.5a8.4 8.4 0 0 1-8.4 8.4 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.6a8.4 8.4 0 0 1-.9-3.8 8.4 8.4 0 0 1 8.4-8.5 8.4 8.4 0 0 1 8.5 8.4z',
    view: 'M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
    chef: 'M6 13a4 4 0 1 1 6.7-4.3M18 13a4 4 0 1 0-6.7-4.3M9 13h6v9H9z',
    boat: 'M2 20s4-3 10-3 10 3 10 3M5 17l7-12 7 12M12 5v12',
    clean: 'M3 6h18l-2 14H5L3 6zM10 11v5M14 11v5M9 6V3h6v3',
  };
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d={paths[name] || paths.view} />
    </svg>
  );
}

/* Booking FAQ — calm, transactional brand voice */
function LuxuryFAQ() {
  const faqs = [
    { q: 'How long can I stay?', a: 'Both residences welcome short stays and extended stays alike. Monthly and longer bookings are common at Aston Martin and Aria — pricing adjusts for length, and the concierge stays with you the whole time.' },
    { q: 'Do I get full building access?', a: 'Yes. As a Novus guest you have resident-level access to building amenities — pools, spa, gym, theater, and marina — plus the building’s own 24/7 concierge and security.' },
    { q: 'Is parking included?', a: 'Assigned or valet parking is included at both addresses. Let us know how many vehicles and we’ll arrange spaces before you arrive.' },
    { q: 'Can you arrange a chef or transfers?', a: 'Of course. Private chefs, airport transfers, the Galeon 500 yacht, and in-villa spa are all a message away — usually arranged within minutes.' },
  ];
  return (
    <section style={{ padding: 'clamp(64px, 10vw, 100px) 0', background: 'var(--sand-50)' }}>
      <style>{`
        .lux-faq-wrap { max-width: 820px; margin: 0 auto; }
        .lux-faq-head { text-align: center; margin-bottom: clamp(32px, 6vw, 44px); }
        .lux-faq-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 48px); color: var(--navy-900); letter-spacing: -0.02em; margin: 14px 0 0; line-height: 1.1; }
        .lux-faq-title em { font-style: italic; color: var(--sun-coral); }
        .lux-faq-item { border-bottom: 1px solid var(--line); }
        .lux-faq-q { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; text-align: left; font-family: var(--font-display); font-weight: 400; font-size: clamp(18px, 2vw, 22px); color: var(--navy-900); letter-spacing: -0.01em; transition: color 200ms var(--ease-novus); }
        .lux-faq-q:hover { color: var(--navy-700); }
        .lux-faq-ic { flex-shrink: 0; width: 24px; height: 24px; color: var(--sun-coral); transition: transform 300ms var(--ease-novus); }
        .lux-faq-item.open .lux-faq-ic { transform: rotate(45deg); }
        .lux-faq-a { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 380ms var(--ease-novus), opacity 300ms var(--ease-novus); }
        .lux-faq-item.open .lux-faq-a { max-height: 320px; opacity: 1; }
        .lux-faq-a-in { padding: 0 4px 22px; font-size: 15px; line-height: 1.7; color: var(--ink-700); }
      `}</style>
      <div className="container">
        <div className="lux-faq-wrap">
          <div className="lux-faq-head">
            <span className="sun-bullet" />
            <div className="overline" style={{ marginTop: 14 }}>Good to know</div>
            <h2 className="lux-faq-title">Before you <em>book</em>.</h2>
          </div>
          {faqs.map((f, i) => <LuxFaqItem key={i} q={f.q} a={f.a} />)}
        </div>
      </div>
    </section>
  );
}

function LuxFaqItem({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div className={`lux-faq-item ${open ? 'open' : ''}`}>
      <button className="lux-faq-q" onClick={() => setOpen(o => !o)} aria-expanded={open}>
        <span>{q}</span>
        <svg className="lux-faq-ic" width="24" height="24" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
          <path d="M12 5v14M5 12h14" />
        </svg>
      </button>
      <div className="lux-faq-a"><div className="lux-faq-a-in">{a}</div></div>
    </div>
  );
}

/* Closing CTA band */
function LuxuryCTA() {
  return (
    <section style={{ padding: 'clamp(64px, 10vw, 100px) 0', background: 'linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%)', position: 'relative', overflow: 'hidden' }}>
      <style>{`
        .lux-cta-orb { position: absolute; top: -80px; right: -80px; width: 480px; height: 480px; border-radius: 999px; opacity: 0.12; background: var(--sunset-gradient); filter: blur(60px); pointer-events: none; }
        .lux-cta-content { position: relative; z-index: 1; text-align: center; }
        .lux-cta-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.4vw, 58px); color: #fff; margin: 16px auto; letter-spacing: -0.015em; line-height: 1.1; max-width: 780px; text-wrap: balance; }
        .lux-cta-desc { color: rgba(255,255,255,0.62); font-size: clamp(15px, 1.8vw, 18px); max-width: 560px; margin: 0 auto clamp(28px, 6vw, 40px); line-height: 1.65; }
        .lux-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
        @media (max-width: 480px) { .lux-cta-buttons { flex-direction: column; } .lux-cta-buttons > a { flex: 1; text-align: center; } }
      `}</style>
      <div className="lux-cta-orb" />
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div className="lux-cta-content">
          <span className="sun-bullet" style={{ boxShadow: '0 0 0 8px rgba(252,172,100,0.12)' }} />
          <h2 className="lux-cta-title">A residence, or the whole <em style={{ fontStyle: 'italic' }}>collection</em>?</h2>
          <p className="lux-cta-desc">
            Tell us your dates and party size. We’ll match you to the right address and handle the rest —
            book directly with us for the best rate.
          </p>
          <div className="lux-cta-buttons">
            <a href="booking.html" className="btn btn-on-dark" style={{ padding: '14px 30px', fontSize: 14 }}>
              Check availability →
            </a>
            <a href="contact.html" className="btn" style={{
              background: 'rgba(255,255,255,0.08)', color: 'rgba(255,255,255,0.82)',
              border: '1px solid rgba(255,255,255,0.2)', padding: '14px 26px', fontSize: 14, borderRadius: 999,
            }}>
              Talk to a host
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================== IMMERSIVE GALLERY (masonry + lightbox) ===================== */
function LuxuryGallery() {
  const shots = [
    { src: 'https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?auto=format&fit=crop&w=1500&q=80', cap: 'Biscayne Bay from above', tall: true },
    { src: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1500&q=80', cap: 'Aston Martin · living room' },
    { src: '../../assets/properties/aston-martin-balcony.png', cap: 'Aston Martin · private balcony' },
    { src: '../../assets/properties/aria-on-the-bay-living-room.png', cap: 'Aria on the Bay · living', tall: true },
    { src: 'https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=1500&q=80', cap: 'Villa Artemis · sunset' },
    { src: '../../assets/properties/aria-on-the-bay-bedroom.png', cap: 'Aria · primary suite' },
    { src: 'https://images.unsplash.com/photo-1613977257363-707ba9348227?auto=format&fit=crop&w=1500&q=80', cap: 'Villa Gaia · pool deck', tall: true },
    { src: '../../assets/properties/villa-gaia-pool.png', cap: 'Resort-style pool' },
    { src: 'https://images.unsplash.com/photo-1540541338287-41700207dee6?w=1200&q=80', cap: 'Designer interiors' },
    { src: 'https://images.unsplash.com/photo-1551918120-9739cb430c6d?w=1200&q=80', cap: 'Spa & wellness', tall: true },
    { src: '../../assets/properties/villa-helios-dining.png', cap: 'Chef-grade kitchen' },
    { src: 'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=1200&q=80', cap: 'Sunset over the bay' },
  ];
  const [active, setActive] = React.useState(null);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setActive(null); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  return (
    <section style={{ padding: 'clamp(64px, 10vw, 100px) 0', background: 'var(--sand-50)' }}>
      <style>{`
        .lux-gal-head { text-align: center; max-width: 640px; margin: 0 auto clamp(32px, 6vw, 48px); }
        .lux-gal-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 48px); color: var(--navy-900); letter-spacing: -0.02em; margin: 14px 0 12px; line-height: 1.1; }
        .lux-gal-title em { font-style: italic; color: var(--sun-coral); }
        .lux-masonry { columns: 4 260px; column-gap: 14px; }
        .lux-gal-item { position: relative; break-inside: avoid; margin-bottom: 14px; border-radius: 16px; overflow: hidden; cursor: zoom-in; box-shadow: 0 4px 16px rgba(15,42,66,0.08); background: var(--sand-200); }
        .lux-gal-item img { width: 100%; display: block; transition: transform 800ms var(--ease-novus); }
        .lux-gal-item:hover img { transform: scale(1.06); }
        .lux-gal-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 14px; color: #fff; font-size: 13px; font-weight: 600;
          background: linear-gradient(180deg, transparent, rgba(10,31,51,0.78)); opacity: 0; transform: translateY(8px); transition: all 300ms var(--ease-novus); }
        .lux-gal-item:hover .lux-gal-cap { opacity: 1; transform: translateY(0); }
        .lux-lb { position: fixed; inset: 0; z-index: 200; background: rgba(8,20,32,0.92); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: lbIn 240ms ease; }
        @keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
        .lux-lb img { max-width: 92vw; max-height: 84vh; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
        .lux-lb-cap { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.9); font-size: 14px; font-weight: 600; }
        .lux-lb-x { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(255,255,255,0.14); color: #fff; font-size: 22px; }
        @media (max-width: 600px) { .lux-masonry { columns: 2 140px; column-gap: 10px; } .lux-gal-item { margin-bottom: 10px; border-radius: 12px; } }
      `}</style>
      <div className="container">
        <div className="lux-gal-head">
          <span className="sun-bullet" />
          <div className="overline" style={{ marginTop: 14 }}>The visuals</div>
          <h2 className="lux-gal-title">Step <em>inside</em>.</h2>
          <p style={{ color: 'var(--ink-500)', fontSize: 15, lineHeight: 1.6, margin: 0 }}>
            Bay-view balconies, resort pools, designer interiors. Tap any frame to view it full-screen.
          </p>
        </div>
        <div className="lux-masonry">
          {shots.map((s, i) => (
            <div key={i} className="lux-gal-item" onClick={() => setActive(s)}>
              <img src={s.src} alt={s.cap} loading="lazy" style={{ aspectRatio: s.tall ? '3/4' : '4/3', objectFit: 'cover' }} />
              <div className="lux-gal-cap">{s.cap}</div>
            </div>
          ))}
        </div>
      </div>
      {active && (
        <div className="lux-lb" onClick={() => setActive(null)}>
          <button className="lux-lb-x" onClick={() => setActive(null)} aria-label="Close">×</button>
          <img src={active.src.replace('width=1500', 'width=2400').replace('width=1200', 'width=2000')} alt={active.cap} onClick={(e) => e.stopPropagation()} />
          <div className="lux-lb-cap">{active.cap}</div>
        </div>
      )}
    </section>
  );
}

/* ===================== SIGNATURE EXPERIENCES (photo cards) ===================== */
function LuxurySignatureExperiences() {
  const exps = [
    { img: 'https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1200&q=80', tag: 'On the water', title: 'Galeon 500 yacht day', body: 'A full day on Biscayne Bay aboard our 50-ft Galeon — captain, sandbar stops, sunset return.', price: 'From $2,500' },
    { img: 'https://images.unsplash.com/photo-1556909212-d5b604d0c90d?w=1200&q=80', tag: 'In-residence', title: 'Private chef dinner', body: 'A bespoke tasting menu cooked in your kitchen — sourcing, service, and cleanup handled.', price: 'From $350' },
    { img: 'https://images.unsplash.com/photo-1540555700478-4be289fbecef?w=1200&q=80', tag: 'Wellness', title: 'In-villa spa', body: 'Massage, facials, and recovery therapies brought to your balcony at golden hour.', price: 'From $280' },
    { img: 'https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?w=1200&q=80', tag: 'Arrival', title: 'Luxury transfers', body: 'Black-car airport pickups and chauffeured days across Miami — on your schedule.', price: 'From $120' },
  ];
  return (
    <section style={{ padding: 'clamp(64px, 10vw, 100px) 0', background: 'var(--sand-100)' }}>
      <style>{`
        .lux-xp-head { max-width: 720px; margin-bottom: clamp(32px, 6vw, 48px); }
        .lux-xp-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 52px); color: var(--navy-900); letter-spacing: -0.02em; margin: 14px 0 0; line-height: 1.1; }
        .lux-xp-title em { font-style: italic; color: var(--sun-amber); }
        .lux-xp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
        .lux-xp-card { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3/4; cursor: pointer; box-shadow: 0 8px 28px rgba(15,42,66,0.12); }
        .lux-xp-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-novus); }
        .lux-xp-card:hover img { transform: scale(1.08); }
        .lux-xp-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,51,0.05) 30%, rgba(10,31,51,0.9) 100%); }
        .lux-xp-body { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; color: #fff; }
        .lux-xp-tag { align-self: flex-start; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,0.18); backdrop-filter: blur(6px); margin-bottom: 10px; }
        .lux-xp-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 23px; margin: 0 0 6px; letter-spacing: -0.01em; }
        .lux-xp-card p { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.82); margin: 0 0 12px; }
        .lux-xp-price { font-size: 13px; font-weight: 700; color: var(--sun-amber); display: flex; align-items: center; justify-content: space-between; }
        .lux-xp-price .go { width: 30px; height: 30px; border-radius: 999px; background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; transition: all 300ms var(--ease-novus); }
        .lux-xp-card:hover .go { background: var(--sun-amber); color: var(--navy-900); transform: translateX(2px); }
      `}</style>
      <div className="container">
        <div className="lux-xp-head">
          <div className="overline" style={{ color: 'var(--sun-coral)' }}>Beyond the stay</div>
          <h2 className="lux-xp-title">Experiences, <em>arranged</em>.</h2>
        </div>
        <div className="lux-xp-grid">
          {exps.map(x => (
            <a key={x.title} href="experiences.html" className="lux-xp-card">
              <img src={x.img} alt={x.title} loading="lazy" />
              <div className="lux-xp-body">
                <span className="lux-xp-tag">{x.tag}</span>
                <h3>{x.title}</h3>
                <p>{x.body}</p>
                <div className="lux-xp-price">
                  <span>{x.price}</span>
                  <span className="go"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===================== TOWER COMPARISON (interactive) ===================== */
function LuxuryTowerCompare() {
  const towers = {
    aston: {
      name: 'Aston Martin Residences', area: 'Downtown · Biscayne Blvd', floors: '66 floors',
      img: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1500&q=80',
      tagline: 'A sail-shaped icon on the deepest waterfront downtown.',
      rows: [['Bedrooms', '2 bd · 2 ba'], ['View', 'Bay + skyline, 50+ floors'], ['Pool', 'Sky infinity pool'], ['Signature', 'Private resident yacht marina'], ['Parking', 'Valet + assigned'], ['Best for', 'Skyline lovers, special occasions']],
      href: 'property.html?id=aston-martin',
    },
    aria: {
      name: 'Aria on the Bay', area: 'Edgewater · Design District', floors: '53 floors',
      img: '../../assets/properties/aria-on-the-bay-living-room.png',
      tagline: 'Twin resort pools and sunset balconies steps from the Design District.',
      rows: [['Bedrooms', '2 bd · 2 ba'], ['View', 'Bay balcony at sunset'], ['Pool', 'Two resort pools + spa'], ['Signature', 'Private theater + BBQ terraces'], ['Parking', 'Assigned garage'], ['Best for', 'Design lovers, longer stays']],
      href: 'property.html?id=aria-on-the-bay',
    },
  };
  const [sel, setSel] = React.useState('aston');
  const t = towers[sel];
  return (
    <section style={{ padding: 'clamp(64px, 10vw, 100px) 0', background: 'var(--sand-50)' }}>
      <style>{`
        .lux-cmp-head { text-align: center; max-width: 640px; margin: 0 auto clamp(28px, 5vw, 40px); }
        .lux-cmp-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 48px); color: var(--navy-900); letter-spacing: -0.02em; margin: 14px 0 0; line-height: 1.1; }
        .lux-cmp-title em { font-style: italic; color: var(--sun-amber); }
        .lux-cmp-tabs { display: inline-flex; background: var(--sand-200); padding: 5px; border-radius: 999px; margin: 0 auto 28px; }
        .lux-cmp-tab { border: 0; cursor: pointer; padding: 11px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-500); background: transparent; transition: all 280ms var(--ease-novus); font-family: inherit; }
        .lux-cmp-tab.on { background: var(--navy-900); color: #fff; box-shadow: 0 6px 16px rgba(15,42,66,0.18); }
        .lux-cmp-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 16px 48px rgba(15,42,66,0.12); background: #fff; }
        .lux-cmp-photo { position: relative; min-height: 420px; }
        .lux-cmp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
        .lux-cmp-photo .badge { position: absolute; top: 18px; left: 18px; background: rgba(10,31,51,0.55); backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 13px; border-radius: 999px; }
        .lux-cmp-info { padding: clamp(26px, 4vw, 40px); }
        .lux-cmp-info h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.6vw, 34px); color: var(--navy-900); margin: 0 0 6px; letter-spacing: -0.01em; }
        .lux-cmp-info .area { font-size: 13px; color: var(--sun-coral); font-weight: 600; letter-spacing: 0.04em; }
        .lux-cmp-info .tag { font-size: 15px; color: var(--ink-700); line-height: 1.6; margin: 14px 0 18px; }
        .lux-cmp-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; }
        .lux-cmp-row .k { color: var(--ink-500); }
        .lux-cmp-row .v { color: var(--navy-900); font-weight: 600; text-align: right; }
        @media (max-width: 820px) { .lux-cmp-card { grid-template-columns: 1fr; } .lux-cmp-photo { min-height: 280px; } }
      `}</style>
      <div className="container">
        <div className="lux-cmp-head">
          <span className="sun-bullet" />
          <div className="overline" style={{ marginTop: 14 }}>Compare</div>
          <h2 className="lux-cmp-title">Which tower is <em>yours</em>?</h2>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div className="lux-cmp-tabs">
            <button className={`lux-cmp-tab ${sel === 'aston' ? 'on' : ''}`} onClick={() => setSel('aston')}>Aston Martin</button>
            <button className={`lux-cmp-tab ${sel === 'aria' ? 'on' : ''}`} onClick={() => setSel('aria')}>Aria on the Bay</button>
          </div>
        </div>
        <div className="lux-cmp-card">
          <div className="lux-cmp-photo">
            <img src={t.img} alt={t.name} />
            <span className="badge">{t.floors}</span>
          </div>
          <div className="lux-cmp-info">
            <div className="area">{t.area}</div>
            <h3>{t.name}</h3>
            <div className="tag">{t.tagline}</div>
            {t.rows.map(([k, v]) => (
              <div key={k} className="lux-cmp-row"><span className="k">{k}</span><span className="v">{v}</span></div>
            ))}
            <a href={t.href} className="btn btn-primary" style={{ marginTop: 22, display: 'inline-flex' }}>See the residence →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.LuxuryRentalsHero = LuxuryRentalsHero;
window.LuxuryRentalsBody = LuxuryRentalsBody;
window.LuxuryStats = LuxuryStats;
window.LuxuryAmenities = LuxuryAmenities;
window.MiamiStripe = MiamiStripe;
window.LuxuryReviewsBlock = LuxuryReviewsBlock;
window.LuxuryFAQ = LuxuryFAQ;
window.LuxuryCTA = LuxuryCTA;
window.LuxuryGallery = LuxuryGallery;
window.LuxurySignatureExperiences = LuxurySignatureExperiences;
window.LuxuryTowerCompare = LuxuryTowerCompare;