/* Bimini.jsx — dedicated "Luxury Island" page for Casa Mar y Playa (North Bimini).
 * Real data from the Hospitable property bf0d70f1; cover photo from the listing.
 * Gallery photos can be swapped for the exact Airbnb shots by editing BIMINI_PHOTOS. */

const BIMINI = {
  name: 'Casa Mar y Playa',
  alias: 'Whispering Tides',
  area: 'Rockwell Island · North Bimini, Bahamas',
  beds: 6, baths: 4.5, guests: 12, sqft: '6,501',
  lat: 25.77367664, lon: -79.26308441,
  airbnb: 'https://www.airbnb.com/h/casamaryplayabimini',
  cover: 'https://a0.muscache.com/im/pictures/hosting/Hosting-1683744000870820797/original/ab4f471e-2d6a-4661-84f6-2a4016bb3f9f.png?aki_policy=xx_large',
};

/* Gallery — the real Casa Mar y Playa photos (Google Drive, public). */
const driveImg = (id) => `https://lh3.googleusercontent.com/d/${id}=w1800`;
const BIMINI_PHOTOS = [
  { src: driveImg('1XLbccOKWPnih7iEObb5kg4ZTETE4WMsM'), cap: 'Open-plan living onto the sea', tall: false },
  { src: driveImg('1w8TfFte7Emav-xf4La_Ee-JkdRGKcsoB'), cap: 'Ocean-view primary suite', tall: true },
  { src: driveImg('1jDh1ozglXtWaNziuuJPnp-ez_rJh0iCh'), cap: 'Freestanding tub & sea breeze', tall: true },
  { src: driveImg('14FjAlf6-ETrRKIgXQTf7zbCh9yd10KMd'), cap: 'King bedroom retreat', tall: false },
  { src: driveImg('1l0DQYnFDsxHKkOYekL4XezH6nrRjEC19'), cap: 'Designer interiors', tall: false },
  { src: driveImg('19mhThh_fZw9tw7gtQf5sQKxVeQ7-5bFf'), cap: 'Master suite with a view', tall: true },
];

function BiminiHero() {
  return (
    <section className="bim-hero">
      <style>{`
        .bim-hero { position: relative; height: 92vh; min-height: 620px; overflow: hidden; }
        .bim-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: bimZoom 18s var(--ease-novus) forwards; }
        @keyframes bimZoom { to { transform: scale(1); } }
        .bim-hero .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,28,42,0.28) 0%, rgba(8,28,42,0.2) 45%, rgba(8,28,42,0.82) 100%); }
        .bim-hero .inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(40px, 8vw, 84px); color: #fff; }
        .bim-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.9); margin-bottom: 18px; }
        .bim-eyebrow .ln { width: 26px; height: 1px; background: #7FE3D6; }
        .bim-h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(46px, 7vw, 96px); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 8px; text-wrap: balance; }
        .bim-h1 em { font-style: italic; color: #8DEBDD; }
        .bim-sub { font-size: clamp(15px, 1.8vw, 19px); color: rgba(255,255,255,0.9); max-width: 560px; line-height: 1.6; }
        .bim-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 26px; }
        .bim-fact { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
          background: rgba(255,255,255,0.12); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); }
        .bim-cta { display: flex; gap: 12px; flex-wrap: wrap; }
        @media (max-width: 480px) { .bim-cta { flex-direction: column; } .bim-cta > a { text-align: center; } }
      `}</style>
      <img src={BIMINI.cover} alt="Casa Mar y Playa, North Bimini" />
      <div className="veil" />
      <div className="container inner">
        <div className="bim-eyebrow"><span className="ln" /> NOVUS · LUXURY ISLAND · THE BAHAMAS</div>
        <h1 className="bim-h1">Casa Mar y Playa, <em>Bimini</em>.</h1>
        <p className="bim-sub">A newly built 6-bedroom beachfront estate on the private Rockwell Island — turquoise water, white sand, and a heated pool steps from the sea.</p>
        <div className="bim-facts">
          <span className="bim-fact">🛏 {BIMINI.beds} bedrooms</span>
          <span className="bim-fact">🛁 {BIMINI.baths} baths</span>
          <span className="bim-fact">👥 Up to {BIMINI.guests} guests</span>
          <span className="bim-fact">🌊 Beachfront</span>
          <span className="bim-fact">📐 {BIMINI.sqft} sq ft</span>
        </div>
        <div className="bim-cta">
          <a href="booking.html" className="btn btn-on-dark" style={{ padding: '14px 30px', fontSize: 14 }}>Check availability →</a>
          <a href={BIMINI.airbnb} target="_blank" rel="noopener" className="btn" style={{ background: 'rgba(255,255,255,0.1)', color: '#fff', border: '1px solid rgba(255,255,255,0.28)', padding: '14px 26px', fontSize: 14, borderRadius: 999 }}>View on Airbnb</a>
        </div>
      </div>
    </section>
  );
}

function BiminiStats() {
  const stats = [
    { n: '6', l: 'King bedrooms' }, { n: '12', l: 'Guests' }, { n: '6,501', l: 'Sq ft of living' },
    { n: '4.5', l: 'Bathrooms' }, { n: '∞', l: 'Heated pool' }, { n: '0', l: 'Steps to sand' },
  ];
  return (
    <div style={{ background: '#0B3A44' }}>
      <style>{`
        .bim-stats { display: grid; grid-template-columns: repeat(2, 1fr); }
        @media (min-width: 640px) { .bim-stats { grid-template-columns: repeat(3, 1fr); } }
        @media (min-width: 1024px) { .bim-stats { grid-template-columns: repeat(6, 1fr); } }
        .bim-stat { padding: 22px 12px; text-align: center; border-right: 1px solid rgba(141,235,221,0.16); border-bottom: 1px solid rgba(141,235,221,0.16); }
        .bim-stat-n { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 32px); color: #fff; line-height: 1; }
        .bim-stat-l { margin-top: 6px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(141,235,221,0.8); font-weight: 600; }
      `}</style>
      <div className="container"><div className="bim-stats">
        {stats.map(s => <div key={s.l} className="bim-stat"><div className="bim-stat-n">{s.n}</div><div className="bim-stat-l">{s.l}</div></div>)}
      </div></div>
    </div>
  );
}

function BiminiIntro() {
  return (
    <section style={{ padding: 'clamp(64px, 10vw, 110px) 0', background: 'var(--sand-50)' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(28px, 5vw, 64px)', alignItems: 'center' }}>
        <style>{`@media (max-width: 820px){ .bim-intro-grid { grid-template-columns: 1fr !important; } }`}</style>
        <div>
          <span className="sun-bullet" />
          <div className="overline" style={{ marginTop: 14, color: '#129e8c' }}>The estate</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(30px, 4vw, 52px)', color: 'var(--navy-900)', letterSpacing: '-0.02em', margin: '14px 0 18px', lineHeight: 1.1 }}>
            Whispering Tides, <em style={{ fontStyle: 'italic', color: 'var(--sun-coral)' }}>privately yours</em>.
          </h2>
          <p style={{ color: 'var(--ink-700)', fontSize: 16, lineHeight: 1.75, marginBottom: 16 }}>
            Set on the exclusive, gated Rockwell Island, this brand-new villa was designed for unforgettable family vacations, yacht travelers, fishing groups, and upscale island getaways. Over 6,501 sq ft of indoor–outdoor living open straight onto your own stretch of beach.
          </p>
          <p style={{ color: 'var(--ink-500)', fontSize: 15, lineHeight: 1.7 }}>
            Wake to turquoise water and white sand, swim in the heated private pool, grill at the outdoor BBQ, and watch the sun fall into the sea. Minutes from Resorts World Bimini, marinas, fishing charters, and beach clubs.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 24, flexWrap: 'wrap' }}>
            <a href="booking.html" className="btn btn-primary" style={{ padding: '13px 26px' }}>Reserve your dates →</a>
            <a href={BIMINI.airbnb} target="_blank" rel="noopener" className="btn btn-secondary" style={{ padding: '13px 24px' }}>See the reviews</a>
          </div>
        </div>
        <div style={{ borderRadius: 22, overflow: 'hidden', boxShadow: '0 24px 60px rgba(11,58,68,0.22)', aspectRatio: '4/5' }}>
          <img src={BIMINI.cover} alt="Casa Mar y Playa" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
      </div>
    </section>
  );
}

function BiminiGallery() {
  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(56px, 9vw, 96px) 0', background: '#fff' }}>
      <style>{`
        .bim-gal-head { text-align: center; max-width: 620px; margin: 0 auto clamp(30px,5vw,46px); }
        .bim-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 10px; line-height: 1.1; }
        .bim-gal-title em { font-style: italic; color: #129e8c; }
        .bim-masonry { columns: 3 280px; column-gap: 14px; }
        .bim-shot { position: relative; break-inside: avoid; margin-bottom: 14px; border-radius: 16px; overflow: hidden; cursor: zoom-in; box-shadow: 0 4px 18px rgba(11,58,68,0.1); background: var(--sand-200); }
        .bim-shot img { width: 100%; display: block; transition: transform 800ms var(--ease-novus); }
        .bim-shot:hover img { transform: scale(1.06); }
        .bim-shot .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 14px; color: #fff; font-size: 13px; font-weight: 600; background: linear-gradient(180deg, transparent, rgba(8,28,42,0.8)); opacity: 0; transform: translateY(8px); transition: all 300ms var(--ease-novus); }
        .bim-shot:hover .cap { opacity: 1; transform: translateY(0); }
        .bim-lb { position: fixed; inset: 0; z-index: 200; background: rgba(6,22,30,0.93); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: bimLb 240ms ease; }
        @keyframes bimLb { from { opacity: 0; } to { opacity: 1; } }
        .bim-lb img { max-width: 92vw; max-height: 84vh; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
        .bim-lb .cap { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.9); font-size: 14px; font-weight: 600; }
        .bim-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) { .bim-masonry { columns: 2 140px; column-gap: 10px; } .bim-shot { margin-bottom: 10px; border-radius: 12px; } }
      `}</style>
      <div className="container">
        <div className="bim-gal-head">
          <span className="sun-bullet" />
          <div className="overline" style={{ marginTop: 14, color: '#129e8c' }}>The villa</div>
          <h2 className="bim-gal-title">A look <em>inside</em>.</h2>
          <p style={{ color: 'var(--ink-500)', fontSize: 15, lineHeight: 1.6, margin: 0 }}>Tap any frame to view full-screen.</p>
        </div>
        <div className="bim-masonry">
          {BIMINI_PHOTOS.map((s, i) => (
            <div key={i} className="bim-shot" onClick={() => setActive(s)}>
              <img src={s.src} alt={s.cap} loading="lazy" style={{ aspectRatio: s.tall ? '3/4' : '4/3', objectFit: 'cover' }} />
              <div className="cap">{s.cap}</div>
            </div>
          ))}
        </div>
      </div>
      {active && (
        <div className="bim-lb" onClick={() => setActive(null)}>
          <button className="x" onClick={() => setActive(null)} aria-label="Close">×</button>
          <img src={active.src} alt={active.cap} onClick={(e) => e.stopPropagation()} />
          <div className="cap">{active.cap}</div>
        </div>
      )}
    </section>
  );
}

function BiminiAmenities() {
  const items = [
    { icon: 'wave', t: 'Beachfront access', s: 'Your own stretch of white-sand beach and turquoise shallows.' },
    { icon: 'pool', t: 'Heated private pool', s: 'Swim any time of year with the outdoor deck and loungers.' },
    { icon: 'jacuzzi', t: 'Jacuzzi & fire pit', s: 'Soak under the stars, then gather around the fire pit.' },
    { icon: 'bbq', t: 'Outdoor BBQ & alfresco dining', s: 'Grill and dine outdoors with sea breeze and sunset views.' },
    { icon: 'shower', t: 'Alfresco shower', s: 'Rinse off after the beach in a private outdoor shower.' },
    { icon: 'bed', t: '6 king bedrooms', s: 'Sleeps up to 12 in king suites with resort-style baths.' },
    { icon: 'chef', t: 'Full chef-ready kitchen', s: 'Modern appliances, ready for a private chef or home cooking.' },
    { icon: 'car', t: 'Free parking & A/C', s: 'On-site parking, full air conditioning, washer, fast Wi-Fi & TVs.' },
  ];
  return (
    <section style={{ padding: 'clamp(64px, 10vw, 100px) 0', background: 'linear-gradient(160deg, #0B3A44 0%, #0E4A52 100%)', position: 'relative', overflow: 'hidden' }}>
      <style>{`
        .bim-am-glow { position: absolute; top: -120px; right: -120px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(141,235,221,0.18), transparent 70%); pointer-events: none; }
        .bim-am-head { max-width: 720px; margin-bottom: clamp(30px,6vw,52px); position: relative; z-index: 1; }
        .bim-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; }
        .bim-am-title em { font-style: italic; color: #8DEBDD; }
        .bim-am-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
        .bim-am-tile { padding: 26px 22px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; transition: all 380ms var(--ease-novus); }
        .bim-am-tile:hover { background: rgba(255,255,255,0.09); border-color: rgba(141,235,221,0.45); transform: translateY(-4px); }
        .bim-am-ic { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #2FB6A4, #0E8C7C); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: 0 8px 22px rgba(20,158,140,0.35); }
        .bim-am-tile h3 { font-family: var(--font-display); font-weight: 400; font-size: 20px; color: #fff; margin: 0 0 6px; letter-spacing: -0.01em; }
        .bim-am-tile p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.7); margin: 0; }
      `}</style>
      <div className="bim-am-glow" />
      <div className="container">
        <div className="bim-am-head">
          <div className="overline" style={{ color: '#8DEBDD' }}>What's included</div>
          <h2 className="bim-am-title">Resort living, <em>private island</em>.</h2>
        </div>
        <div className="bim-am-grid">
          {items.map(it => (
            <div key={it.t} className="bim-am-tile">
              <div className="bim-am-ic"><BimIcon name={it.icon} /></div>
              <h3>{it.t}</h3><p>{it.s}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BimIcon({ name }) {
  const p = {
    wave: 'M2 6c2 0 2 2 4 2s2-2 4-2 2 2 4 2 2-2 4-2 2 2 4 2M2 12c2 0 2 2 4 2s2-2 4-2 2 2 4 2 2-2 4-2 2 2 4 2M2 18c2 0 2 2 4 2s2-2 4-2 2 2 4 2 2-2 4-2 2 2 4 2',
    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',
    jacuzzi: 'M4 12h16v4a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-4zM7 12V7a2 2 0 0 1 4 0M9 4v1M13 6v1M17 5v1',
    bbq: 'M8 3l1 3M16 3l-1 3M4 7h16l-1.5 6a6 6 0 0 1-13 0L4 7zM9 19l-1 2M15 19l1 2',
    shower: 'M4 13h12M10 13V6a3 3 0 0 1 6 0M8 17v1M12 17v2M16 17v1',
    bed: 'M2 18v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5M2 18h20M4 11V7a1 1 0 0 1 1-1h6v5',
    chef: 'M6 13a4 4 0 1 1 6.7-4.3M18 13a4 4 0 1 0-6.7-4.3M9 13h6v9H9z',
    car: 'M5 11l2-5h10l2 5M3 16h18v-3a2 2 0 0 0-1-1.7L19 11H5l-1 .3A2 2 0 0 0 3 13v3zM7 19v-3M17 19v-3',
  };
  return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d={p[name] || p.wave} /></svg>;
}

function BiminiLocation() {
  const [wx, setWx] = React.useState(null);
  React.useEffect(() => {
    let alive = true;
    fetch(`https://api.open-meteo.com/v1/forecast?latitude=${BIMINI.lat}&longitude=${BIMINI.lon}&current=temperature_2m,weather_code&temperature_unit=fahrenheit`)
      .then(r => r.json()).then(d => { if (alive && d && d.current) setWx(d.current); }).catch(() => {});
    return () => { alive = false; };
  }, []);
  const code = wx && wx.weather_code;
  const wxm = code == null ? null : code === 0 ? ['Clear', '☀️'] : code <= 3 ? ['Partly cloudy', '⛅'] : code <= 48 ? ['Foggy', '🌫️'] : code <= 67 ? ['Rain', '🌧️'] : code <= 82 ? ['Showers', '🌦️'] : ['Storms', '⛈️'];
  const nearby = [
    ['Resorts World Bimini', '~10 min'], ['Bimini Big Game Club Marina', '~12 min'],
    ['Radio Beach', '~9 min'], ['Healing Hole & mangroves', '~15 min'],
    ['Fishing & diving charters', 'On request'], ['South Bimini airport (BIM)', '~20 min + ferry'],
  ];
  return (
    <section style={{ padding: 'clamp(64px, 10vw, 100px) 0', background: 'var(--sand-100)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 620, margin: '0 auto clamp(28px,5vw,44px)' }}>
          <span className="sun-bullet" />
          <div className="overline" style={{ marginTop: 14, color: '#129e8c' }}>The island</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(28px,3.6vw,48px)', color: 'var(--navy-900)', letterSpacing: '-0.02em', margin: '14px 0 0', lineHeight: 1.1 }}>
            North Bimini, <em style={{ fontStyle: 'italic', color: 'var(--sun-coral)' }}>50 miles from Miami</em>.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 18, alignItems: 'stretch' }}>
          <style>{`@media (max-width: 820px){ .bim-loc-grid { grid-template-columns: 1fr !important; } }`}</style>
          <div style={{ borderRadius: 20, overflow: 'hidden', minHeight: 320, boxShadow: '0 12px 36px rgba(11,58,68,0.14)' }}>
            <iframe title="Map" width="100%" height="100%" style={{ border: 0, minHeight: 320, display: 'block' }} loading="lazy"
              src={`https://www.openstreetmap.org/export/embed.html?bbox=${BIMINI.lon - 0.06}%2C${BIMINI.lat - 0.04}%2C${BIMINI.lon + 0.06}%2C${BIMINI.lat + 0.04}&layer=mapnik&marker=${BIMINI.lat}%2C${BIMINI.lon}`} />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ background: '#fff', borderRadius: 16, padding: 20, border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-500)', fontWeight: 600 }}>Right now in Bimini</div>
                <div style={{ fontSize: 13, color: 'var(--ink-700)', marginTop: 4 }}>{wxm ? wxm[0] : 'Loading weather…'}</div>
              </div>
              {wxm && <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><span style={{ fontSize: 30 }}>{wxm[1]}</span><span style={{ fontFamily: 'var(--font-display)', fontSize: 34, color: 'var(--navy-900)' }}>{Math.round(wx.temperature_2m)}°</span></div>}
            </div>
            <div style={{ background: '#fff', borderRadius: 16, padding: '8px 20px', border: '1px solid var(--line)', flex: 1 }}>
              {nearby.map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '12px 0', borderTop: '1px solid var(--line)', fontSize: 14 }}>
                  <span style={{ color: 'var(--ink-700)' }}>{k}</span><span style={{ color: 'var(--navy-900)', fontWeight: 600, whiteSpace: 'nowrap' }}>{v}</span>
                </div>
              ))}
            </div>
            <a href={`https://maps.google.com/?q=${BIMINI.lat},${BIMINI.lon}`} target="_blank" rel="noopener" className="btn btn-primary" style={{ justifyContent: 'center' }}>Open in Google Maps →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function BiminiExperiences() {
  const exps = [
    { img: 'https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=1200&q=80', t: 'Deep-sea fishing', s: 'Bimini is the big-game capital of the world — charters at your door.' },
    { img: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=1200&q=80', t: 'Sandbar & snorkel', s: 'Boat to the sandbars, swim with rays, snorkel the reefs.' },
    { img: 'https://images.unsplash.com/photo-1505228395891-9a51e7e86bf6?w=1200&q=80', t: 'Sunset yacht cruise', s: 'Golden-hour cruises along the Bimini chain.' },
    { img: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1200&q=80', t: 'Private chef & dining', s: 'Fresh-caught dinners cooked and served on your terrace.' },
  ];
  return (
    <section style={{ padding: 'clamp(64px, 10vw, 100px) 0', background: 'var(--sand-50)' }}>
      <style>{`
        .bim-xp-head { max-width: 700px; margin-bottom: clamp(28px,5vw,44px); }
        .bim-xp-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px,3.8vw,50px); color: var(--navy-900); letter-spacing: -0.02em; margin: 14px 0 0; line-height: 1.1; }
        .bim-xp-title em { font-style: italic; color: #129e8c; }
        .bim-xp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
        .bim-xp { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 8px 26px rgba(11,58,68,0.14); }
        .bim-xp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-novus); }
        .bim-xp:hover img { transform: scale(1.08); }
        .bim-xp::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(8,28,42,0.88) 100%); }
        .bim-xp .b { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: #fff; }
        .bim-xp h3 { font-family: var(--font-display); font-weight: 400; font-size: 21px; margin: 0 0 6px; }
        .bim-xp p { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.84); margin: 0; }
      `}</style>
      <div className="container">
        <div className="bim-xp-head">
          <div className="overline" style={{ color: 'var(--sun-coral)' }}>On the island</div>
          <h2 className="bim-xp-title">Days you'll <em>remember</em>.</h2>
        </div>
        <div className="bim-xp-grid">
          {exps.map(x => (
            <div key={x.t} className="bim-xp">
              <img src={x.img} alt={x.t} loading="lazy" />
              <div className="b"><h3>{x.t}</h3><p>{x.s}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BiminiCTA() {
  return (
    <section style={{ padding: 'clamp(64px, 10vw, 110px) 0', background: 'linear-gradient(135deg, #0B3A44 0%, #0E4A52 100%)', position: 'relative', overflow: 'hidden' }}>
      <style>{`
        .bim-cta-orb { position: absolute; bottom: -120px; left: -80px; width: 460px; height: 460px; border-radius: 999px; opacity: 0.16; background: radial-gradient(circle, #8DEBDD, transparent 70%); filter: blur(50px); pointer-events: none; }
      `}</style>
      <div className="bim-cta-orb" />
      <div className="container" style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
        <span className="sun-bullet" style={{ boxShadow: '0 0 0 8px rgba(141,235,221,0.14)' }} />
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(32px,4.4vw,58px)', color: '#fff', margin: '16px auto', letterSpacing: '-0.015em', lineHeight: 1.1, maxWidth: 760, textWrap: 'balance' }}>
          Your private island awaits.
        </h2>
        <p style={{ color: 'rgba(255,255,255,0.66)', fontSize: 'clamp(15px,1.8vw,18px)', maxWidth: 540, margin: '0 auto clamp(26px,5vw,38px)', lineHeight: 1.65 }}>
          Tell us your dates and group size — we'll handle transfers from Miami, provisioning, and every experience on the water.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="booking.html" className="btn btn-on-dark" style={{ padding: '14px 30px', fontSize: 14 }}>Check availability →</a>
          <a href={BIMINI.airbnb} target="_blank" rel="noopener" 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 }}>View on Airbnb</a>
        </div>
      </div>
    </section>
  );
}

window.BiminiHero = BiminiHero;
window.BiminiStats = BiminiStats;
window.BiminiIntro = BiminiIntro;
window.BiminiGallery = BiminiGallery;
window.BiminiAmenities = BiminiAmenities;
window.BiminiLocation = BiminiLocation;
window.BiminiExperiences = BiminiExperiences;
window.BiminiCTA = BiminiCTA;