/* Experiences.jsx — Page content for experiences.html (Galeon + concierge + Miami) */

function ExperiencesHero() {
  return (
    <section className="exp-hero-section">
      <style>{`
        .exp-hero-section { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--navy-900); min-height: 100vh; min-height: 100svh; }
        .exp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
        .exp-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,42,66,0.15) 0%, rgba(15,42,66,0.72) 60%, rgba(15,42,66,0.95) 100%); }
        .exp-hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(96px, 16vh, 200px) 0 max(56px, 6vh); }
        @media (min-width: 480px) { .exp-hero-content { padding-bottom: max(80px, 8vh); } }
        .exp-hero-eyebrow { font-size: 11px; color: rgba(255,255,255,0.72); margin-bottom: 18px; display: inline-flex; gap: 12px; align-items: center; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
        .exp-hero-eyebrow span { width: 24px; height: 1px; background: var(--horizon-200); }
        @media (min-width: 640px) { .exp-hero-eyebrow span { width: 28px; } }
        .exp-hero-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 6.8vw, 92px); line-height: 1.05; color: #fff; letter-spacing: -0.02em; margin: 0 0 16px; text-wrap: balance; max-width: 880px; }
        @media (max-width: 480px) { .exp-hero-title { margin-bottom: 14px; } }
        .exp-hero-desc { color: rgba(255,255,255,0.82); font-size: clamp(15px, 1.8vw, 19px); max-width: 620px; line-height: 1.65; margin: 0 0 32px; }
        @media (max-width: 480px) { .exp-hero-desc { margin-bottom: 24px; } }

        .exp-hero-trust { display: flex; gap: 28px; align-items: center; margin-bottom: 32px; flex-wrap: wrap; }
        @media (max-width: 480px) { .exp-hero-trust { gap: 16px; margin-bottom: 24px; } }
        .exp-trust-item { display: flex; align-items: center; gap: 10px; }
        .exp-trust-badge { width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 18px; }
        .exp-trust-text { display: flex; flex-direction: column; gap: 2px; }
        .exp-trust-value { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: #fff; letter-spacing: -0.01em; }
        .exp-trust-label { font-size: 11px; color: rgba(255,255,255,0.62); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }

        .exp-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
        @media (max-width: 480px) { .exp-hero-ctas { flex-direction: column; gap: 10px; } }
        .exp-hero-ctas > a { flex: 0 1 auto; }
        @media (max-width: 480px) { .exp-hero-ctas > a { flex: 1; text-align: center; } }

        .exp-hero-platforms { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; align-items: center; }
        @media (max-width: 480px) { .exp-hero-platforms { gap: 8px; margin-top: 20px; } }
        .exp-platform-badge { padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(165,207,230,0.2); display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.78); }
        .exp-platform-score { font-family: var(--font-display); font-weight: 500; color: #fff; letter-spacing: -0.01em; }
        .exp-platform-name { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
      `}</style>
      <img className="exp-hero-img" src="https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?auto=format&fit=crop&w=1500&q=80" alt="Galeon yacht on Biscayne Bay" />
      <div className="exp-hero-overlay" />
      <div className="container" style={{ position: 'relative', zIndex: 2, width: '100%', color: '#fff' }}>
        <div className="exp-hero-content">
          <div className="exp-hero-eyebrow">
            <span />
            Beyond the stay · Experiences
          </div>

          <div className="exp-hero-trust">
            <div className="exp-trust-item">
              <div className="exp-trust-badge" style={{ color: 'var(--sun-amber)' }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z" />
                </svg>
              </div>
              <div className="exp-trust-text">
                <div className="exp-trust-value">4.98</div>
                <div className="exp-trust-label">Avg Rating</div>
              </div>
            </div>
            <div className="exp-trust-item">
              <div className="exp-trust-badge" style={{ color: 'var(--horizon-200)' }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M16 19a4 4 0 0 0-8 0M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM20 19a4 4 0 0 0-3-3.9M16 3.1A4 4 0 0 1 16 11" />
                </svg>
              </div>
              <div className="exp-trust-text">
                <div className="exp-trust-value">5,200+</div>
                <div className="exp-trust-label">Guests Served</div>
              </div>
            </div>
            <div className="exp-trust-item">
              <div className="exp-trust-badge" style={{ color: 'var(--horizon-200)' }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M12 2 4 6v6c0 5 3.4 8.9 8 10 4.6-1.1 8-5 8-10V6l-8-4zM9 12l2 2 4-4" />
                </svg>
              </div>
              <div className="exp-trust-text">
                <div className="exp-trust-value">100%</div>
                <div className="exp-trust-label">Verified</div>
              </div>
            </div>
          </div>

          <h1 className="exp-hero-title">
            We can <em style={{ fontStyle: 'italic' }}>arrange</em> anything.
          </h1>
          <p className="exp-hero-desc">
            Yacht charters, private chefs, in-villa spa, drivers, concierge services.
            Your Miami curated your way, under 20 minutes by WhatsApp.
          </p>
          <div className="exp-hero-ctas">
            <a href="contact.html" className="btn btn-on-dark" style={{ padding: '13px 26px', fontSize: 14 }}>
              Request an experience →
            </a>
            <a href="#galeon" className="btn" style={{
              background: 'transparent', color: 'rgba(255,255,255,0.82)',
              border: '1px solid rgba(255,255,255,0.28)',
              padding: '13px 22px', fontSize: 14, borderRadius: 999,
            }}>
              See the Galeon
            </a>
          </div>

          <div className="exp-hero-platforms">
            <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.52)', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Trusted by</span>
            <div className="exp-platform-badge">
              <span className="exp-platform-score">4.96</span>
              <span className="exp-platform-name">Airbnb</span>
            </div>
            <div className="exp-platform-badge">
              <span className="exp-platform-score">4.98</span>
              <span className="exp-platform-name">VRBO</span>
            </div>
            <div className="exp-platform-badge">
              <span className="exp-platform-score">5.0</span>
              <span className="exp-platform-name">Google</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Stat strip below hero — responsive grid */
function ExperiencesStats() {
  const stats = [
    { n: 'Curated', l: 'Experiences' },
    { n: '4.97★', l: 'Guest rating' },
    { n: '< 20 min', l: 'Response time' },
    { n: '50+', l: 'Partners' },
    { n: '3 yrs', l: 'In Miami' },
  ];
  return (
    <div style={{
      background: 'var(--navy-900)',
      borderBottom: '1px solid rgba(165,207,230,0.14)',
    }}>
      <style>{`
        .exp-stats-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 0;
        }
        @media (min-width: 640px) {
          .exp-stats-grid { grid-template-columns: repeat(3, 1fr); }
        }
        @media (min-width: 1024px) {
          .exp-stats-grid { grid-template-columns: repeat(5, 1fr); }
        }
        .exp-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: 480px) { .exp-stat-item { padding: 18px 14px; } }
        @media (min-width: 1024px) { .exp-stat-item { padding: 24px 12px; border-bottom: 0; } }
        .exp-stat-item:last-child { border-right: 0; }
        .exp-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; }
        .exp-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="exp-stats-grid">
          {stats.map((s, i) => (
            <div key={s.l} className="exp-stat-item">
              <div className="exp-stat-num">{s.n}</div>
              <div className="exp-stat-label">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* Galeon feature with embedded YouTube */
function GaleonFeature() {
  return (
    <section id="galeon" style={{ padding: 'clamp(64px, 10vw, 104px) 0 clamp(56px, 8vw, 88px)' }}>
      <style>{`
        .galeon-header { text-align: center; margin-bottom: clamp(32px, 6vw, 52px); padding: '0 16px'; }
        .galeon-eyebrow { font-size: 11px; color: var(--sun-amber); margin-bottom: 14px; display: inline-flex; gap: 8px; align-items: center; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; }
        .galeon-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 58px); color: var(--navy-900); margin: 14px auto; letter-spacing: -0.015em; max-width: 760px; text-wrap: balance; line-height: 1.08; }
        .galeon-desc { color: var(--ink-500); font-size: clamp(15px, 1.6vw, 17px); max-width: 600px; margin: 0 auto; line-height: 1.65; }

        .galeon-video { aspect-ratio: 16/9; border-radius: 20px; overflow: hidden; box-shadow: 0 28px 72px rgba(15,42,66,0.2); max-width: 1040px; margin: 0 auto; position: relative; }
        @media (max-width: 640px) { .galeon-video { border-radius: 16px; margin: 0 8px; } }

        .galeon-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; max-width: 1040px; margin: clamp(28px, 4vw, 40px) auto 0; }
        @media (max-width: 480px) { .galeon-specs { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-left: 8px; margin-right: 8px; } }
        .galeon-spec-item { padding: 16px; border-radius: 12px; background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%); border: 1px solid rgba(0,0,0,0.06); transition: all 200ms ease; }
        @media (hover: hover) { .galeon-spec-item:hover { background: #fff; border-color: rgba(0,0,0,0.1); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,42,66,0.1); } }
        @media (min-width: 640px) { .galeon-spec-item { padding: 18px 20px; border-radius: 14px; } }
        .galeon-spec-val { font-family: var(--font-display); font-weight: 400; font-size: clamp(18px, 2vw, 28px); color: var(--navy-900); letter-spacing: -0.01em; }
        .galeon-spec-lab { margin-top: 6px; font-size: 10px; color: var(--ink-500); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

        .galeon-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; background: rgba(252,172,100,0.12); color: var(--sun-amber); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 16px; }

        .galeon-cta-group { text-align: center; margin-top: clamp(32px, 6vw, 44px); }
      `}</style>
      <div className="container">
        <div className="galeon-header">
          <div className="galeon-badge">★ 4.98 Rating · Featured Experience</div>
          <div className="overline" style={{ marginTop: 14 }}>The headline experience</div>
          <h2 className="galeon-title">Step aboard the <em style={{ fontStyle: 'italic' }}>2025 Galeon 500 Fly.</em></h2>
          <p className="galeon-desc">
            A masterpiece of modern yachting. Built for sunsets over Biscayne Bay.
            Captain &amp; crew always included. 4-hour or 8-hour charters available.
          </p>
        </div>

        <div className="galeon-video">
          <iframe
            src="https://www.youtube.com/embed/OqBlSL-Fc8Y?rel=0&modestbranding=1&color=white"
            title="Galeon 500 FLY — Novus Residentials"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
            style={{ width: '100%', height: '100%', border: 0 }}
          />
        </div>

        <div className="galeon-specs">
          {[
            { n: 'Up to 12', l: 'Guests' },
            { n: '4 or 8 hr', l: 'Charter options' },
            { n: 'Captain + crew', l: 'Always included' },
            { n: 'On-water dining', l: 'Chef add-on' },
          ].map(s => (
            <div key={s.l} className="galeon-spec-item">
              <div className="galeon-spec-val">{s.n}</div>
              <div className="galeon-spec-lab">{s.l}</div>
            </div>
          ))}
        </div>

        <div className="galeon-cta-group">
          <a href="contact.html" className="btn btn-primary" style={{ padding: '15px 30px', fontSize: 14 }}>
            Reserve the Galeon →
          </a>
        </div>
      </div>
    </section>
  );
}

/* Concierge services scroll-story — reads from HostData (host-managed) */
function ConciergeStory() {
  const [experiences, setExperiences] = React.useState(() => {
    if (typeof window === 'undefined') return [];
    if (window.HostData && window.HostData.getExperiences) {
      return window.HostData.getExperiences();
    }
    return window.NOVUS_EXPERIENCES || [];
  });

  React.useEffect(() => {
    const refresh = () => {
      if (window.HostData && window.HostData.getExperiences) {
        setExperiences(window.HostData.getExperiences());
      }
    };
    const onStorage = (e) => { if (e.key === 'novus_experiences') refresh(); };
    const onLocal = (e) => { if (e.detail?.key === 'novus_experiences') refresh(); };
    window.addEventListener('storage', onStorage);
    window.addEventListener('host-data-change', onLocal);
    return () => {
      window.removeEventListener('storage', onStorage);
      window.removeEventListener('host-data-change', onLocal);
    };
  }, []);

  // Filter out the featured Galeon (shown in its own section) and inactive items.
  const services = experiences
    .filter(e => e.status !== 'inactive' && !e.featured)
    .map(e => ({
      id: e.id,
      photo: e.photo,
      category: e.category,
      label: e.badge || e.name,
      title: e.name,
      body: e.tagline || e.description,
      facts: (e.facts || []).slice(0, 3),
      price: e.price,
      cta: e.cta || { href: 'contact.html', label: 'Inquire' },
    }));

  if (!services.length) return null;

  return (
    <section style={{ padding: 'clamp(64px, 10vw, 104px) 0 clamp(56px, 8vw, 88px)' }}>
      <style>{`
        .cs-head { text-align: center; margin-bottom: clamp(36px, 6vw, 56px); padding: 0 16px; }
        .cs-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4vw, 56px); color: var(--navy-900); margin: 14px auto 0; letter-spacing: -0.015em; line-height: 1.08; max-width: 760px; text-wrap: balance; }
        .cs-intro { color: var(--ink-500); font-size: clamp(14px, 1.6vw, 17px); line-height: 1.6; max-width: 620px; margin: 16px auto 0; text-wrap: pretty; }

        .cs-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
        @media (min-width: 600px) { .cs-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .cs-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

        .cs-card { position: relative; isolation: isolate; border-radius: 20px; overflow: hidden; aspect-ratio: 3/4; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; transition: transform 360ms var(--ease-novus), box-shadow 360ms var(--ease-novus); }
        @media (hover: hover) { .cs-card:hover { transform: translateY(-5px); box-shadow: 0 28px 60px rgba(15,42,66,0.28); } }
        .cs-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 700ms var(--ease-novus); }
        @media (hover: hover) { .cs-card:hover .cs-card-img { transform: scale(1.06); } }
        .cs-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,22,35,0.10) 0%, rgba(10,22,35,0) 32%, rgba(10,22,35,0.55) 64%, rgba(10,22,35,0.93) 100%); }

        .cs-card-top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
        .cs-cat { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 999px; background: rgba(10,22,35,0.42); border: 1px solid rgba(255,255,255,0.22); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
        .cs-price { padding: 7px 12px; border-radius: 999px; background: var(--sunset-gradient); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; box-shadow: 0 4px 14px rgba(232,123,84,0.4); }

        .cs-card-body { padding: clamp(20px, 3vw, 26px); color: #fff; }
        .cs-card-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.01em; line-height: 1.12; margin: 0 0 8px; }
        .cs-card-desc { color: rgba(255,255,255,0.82); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
        .cs-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
        .cs-fact { font-size: 11px; color: rgba(255,255,255,0.9); padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.16); }
        .cs-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #fff; }
        .cs-link svg { transition: transform 240ms var(--ease-novus); }
        @media (hover: hover) { .cs-card:hover .cs-link svg { transform: translateX(4px); } }
      `}</style>
      <div className="container">
        <div className="cs-head">
          <span className="sun-bullet" />
          <div className="overline" style={{ marginTop: 12 }}>Concierge services</div>
          <h2 className="cs-title">A short list of what we <em style={{ fontStyle: 'italic' }}>arrange</em> daily.</h2>
          <p className="cs-intro">
            If something isn't on this list, ask anyway — odds are we've done it before.
            The concierge replies inside 20 minutes by WhatsApp or in the guest portal.
          </p>
        </div>

        <div className="cs-grid">
          {services.map(s => (
            <a key={s.id} href={s.cta.href} className="cs-card">
              <img className="cs-card-img" src={s.photo} alt={s.title} loading="lazy" />
              <div className="cs-card-top">
                <span className="cs-cat">
                  <CategoryIcon name={s.category} />
                  {s.label}
                </span>
                {s.price ? <span className="cs-price">From ${s.price}</span> : null}
              </div>
              <div className="cs-card-body">
                <h3 className="cs-card-title">{s.title}</h3>
                <p className="cs-card-desc">{s.body}</p>
                {s.facts.length > 0 && (
                  <div className="cs-facts">
                    {s.facts.map(f => <span key={f} className="cs-fact">{f}</span>)}
                  </div>
                )}
                <span className="cs-link">
                  {s.cta.label}
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M5 12h14M13 5l7 7-7 7" />
                  </svg>
                </span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Category icon for concierge service cards */
function CategoryIcon({ name }) {
  const paths = {
    dining: 'M6 13a4 4 0 1 1 6.7-4.3M18 13a4 4 0 1 0-6.7-4.3M9 13h6v9H9z',
    wellness: 'M3 21c0-7 5-13 13-13 0 8-6 13-13 13zM8 16c2-3 4-5 8-7',
    transport: 'M3 13l1.8-5A2 2 0 0 1 6.7 6.6h10.6A2 2 0 0 1 19.2 8L21 13M5 13h14v4a1 1 0 0 1-1 1h-1.5a1 1 0 0 1-1-1v-1H7.5v1a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-4zM7 16h.01M17 16h.01',
    yacht: 'M2 20s4-3 10-3 10 3 10 3M5 17l7-12 7 12M12 5v12',
  };
  const d = paths[name] || 'M12 3v3M12 18v3M4 12H1M23 12h-3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1';
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d={d} />
    </svg>
  );
}

/* Reviews from guests who experienced Novus concierge */
function ExperienceReviews() {
  const reviews = window.MORE_REVIEWS || [];
  const featured = reviews.length >= 9
    ? [reviews[8], reviews[0], reviews[4], reviews[7], reviews[9], reviews[10], reviews[12], reviews[14], reviews[16]]
    : reviews.slice(0, 9);

  if (!featured.length) return null;

  const SOURCE_STYLES = {
    'Airbnb': { color: '#FF5A5F', label: 'Airbnb' },
    'VRBO': { color: '#1668E3', label: 'VRBO' },
    'Google': { color: '#34A853', label: 'Google' },
    'Direct': { color: '#0F2A42', label: 'Direct' },
  };

  return (
    <section style={{ padding: 'clamp(64px, 10vw, 96px) 0', background: 'var(--navy-900)' }}>
      <style>{`
        .reviews-header { text-align: center; margin-bottom: clamp(32px, 6vw, 48px); }
        .reviews-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); color: #fff; margin: 14px auto 12px; letter-spacing: -0.015em; max-width: 640px; line-height: 1.08; }
        .reviews-desc { color: rgba(255,255,255,0.58); font-size: 15px; max-width: 480px; margin: 0 auto; line-height: 1.65; }
        .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
        @media (min-width: 480px) { .reviews-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } }
        @media (min-width: 1024px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
        .review-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(165,207,230,0.14); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; transition: all 300ms ease; }
        @media (hover: hover) { .review-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(165,207,230,0.24); transform: translateY(-2px); } }
        @media (min-width: 480px) { .review-card { padding: 24px; } }
        .review-source-badge { position: absolute; top: 16px; right: 16px; padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 4px; }
        .review-stars { display: flex; gap: 3px; color: var(--sun-amber); }
        .review-text { margin: 0; color: rgba(255,255,255,0.84); font-size: 15px; line-height: 1.65; font-family: var(--font-display); font-style: italic; flex: 1; }
        @media (max-width: 480px) { .review-text { font-size: 14px; } }
        .review-author { padding-top: 12px; margin-top: 8px; border-top: 1px solid rgba(165,207,230,0.12); display: flex; align-items: center; gap: 10px; }
        .review-avatar { width: 36px; height: 36px; border-radius: 999px; background: var(--sunset-gradient); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-size: 15px; font-weight: 500; flex-shrink: 0; }
        .review-name { font-weight: 500; font-size: 13px; color: #fff; }
        .review-meta { font-size: 11px; color: rgba(165,207,230,0.6); margin-top: 2px; }
        .platforms { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 28px); flex-wrap: wrap; margin-top: clamp(40px, 8vw, 56px); }
        .platform-badge { padding: 16px 20px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(165,207,230,0.14); display: flex; align-items: center; gap: 12px; transition: all 200ms ease; }
        @media (hover: hover) { .platform-badge:hover { background: rgba(255,255,255,0.12); border-color: rgba(165,207,230,0.28); } }
        @media (max-width: 480px) { .platform-badge { padding: 12px 16px; } }
        .platform-score { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); color: #fff; letter-spacing: -0.01em; font-weight: 500; }
        .platform-name { font-size: 10px; font-weight: 600; color: var(--sun-amber); letter-spacing: 0.14em; text-transform: uppercase; }
        .platform-count { font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 2px; }
        .reviews-view-all { text-align: center; margin-top: clamp(32px, 6vw, 48px); }
      `}</style>
      <div className="container">
        <div className="reviews-header">
          <span className="sun-bullet" style={{ boxShadow: '0 0 0 6px rgba(252,172,100,0.18)' }} />
          <div className="overline" style={{ marginTop: 14, color: 'var(--horizon-200)' }}>Real guest reviews</div>
          <h2 className="reviews-title">What guests say about the experience.</h2>
          <p className="reviews-desc">
            Verified through Airbnb, VRBO, Google, and direct bookings. Every review is real.
          </p>
        </div>

        <div className="reviews-grid">
          {featured.map((r, i) => {
            const source = r.source || 'Direct';
            const style = SOURCE_STYLES[source] || SOURCE_STYLES['Direct'];
            return (
              <div key={i} className="review-card">
                <div className="review-source-badge" style={{ backgroundColor: style.color, color: '#fff', opacity: 0.9 }}>
                  ✓ {style.label}
                </div>
                <div className="review-stars">
                  {Array.from({ length: r.stars }).map((_, j) => (
                    <span key={j} style={{ fontSize: 13 }}>★</span>
                  ))}
                </div>
                <p className="review-text">"{r.text}"</p>
                <div className="review-author">
                  <div className="review-avatar">{r.name[0]}</div>
                  <div>
                    <div className="review-name">{r.name}</div>
                    <div className="review-meta">{r.country} · {r.date}</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        <div className="platforms">
          {[
            { platform: 'Airbnb', score: '4.96', count: 'Guest reviews' },
            { platform: 'VRBO', score: '4.98', count: '180+ reviews' },
            { platform: 'Google', score: '5.0', count: '92 reviews' },
          ].map(p => (
            <div key={p.platform} className="platform-badge">
              <div className="platform-score">{p.score}</div>
              <div>
                <div className="platform-name">{p.platform}</div>
                <div className="platform-count">{p.count}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="reviews-view-all">
          <p style={{ color: 'rgba(255,255,255,0.52)', fontSize: 14, marginBottom: 16 }}>
            Over 730+ verified reviews across all platforms
          </p>
          <a href="contact.html" className="btn btn-on-dark" style={{ padding: '13px 26px', fontSize: 14 }}>
            See all experiences →
          </a>
        </div>
      </div>
    </section>
  );
}

/* Curated Miami spots — reads from HostData (host-managed) */
function MiamiSpots() {
  const [nearby, setNearby] = React.useState(() => {
    if (typeof window === 'undefined') return [];
    if (window.HostData && window.HostData.getNearby) return window.HostData.getNearby();
    return window.NOVUS_NEARBY || [];
  });

  React.useEffect(() => {
    const refresh = () => {
      if (window.HostData && window.HostData.getNearby) setNearby(window.HostData.getNearby());
    };
    const onStorage = (e) => { if (e.key === 'novus_nearby') refresh(); };
    const onLocal = (e) => { if (e.detail?.key === 'novus_nearby') refresh(); };
    window.addEventListener('storage', onStorage);
    window.addEventListener('host-data-change', onLocal);
    return () => {
      window.removeEventListener('storage', onStorage);
      window.removeEventListener('host-data-change', onLocal);
    };
  }, []);

  const spots = nearby
    .filter(n => n.status !== 'inactive')
    .map(n => ({
      name: n.name, cat: n.category, dist: n.distance,
      img: n.photo, desc: n.description,
    }));

  if (!spots.length) return null;

  return (
    <section style={{ padding: 'clamp(64px, 10vw, 96px) 0', background: 'var(--sand-100)' }}>
      <style>{`
        .miami-header { text-align: center; margin-bottom: clamp(32px, 6vw, 40px); }
        .miami-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.2vw, 42px); color: var(--navy-900); margin: 12px auto; letter-spacing: -0.01em; max-width: 600px; }
        .miami-desc { color: var(--ink-500); font-size: 15px; max-width: 540px; margin: 0 auto; line-height: 1.65; }
        .miami-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
        @media (min-width: 480px) { .miami-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } }
        @media (min-width: 768px) { .miami-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } }
        .miami-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform 200ms var(--ease-novus), box-shadow 200ms var(--ease-novus); }
        @media (hover: hover) { .miami-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } }
        .miami-card-img { aspect-ratio: 16/10; background: var(--sand-200); overflow: hidden; }
        .miami-card-content { padding: 14px 14px; }
        @media (min-width: 480px) { .miami-card-content { padding: 16px; } }
        .miami-card-name { font-family: var(--font-display); font-size: clamp(17px, 2vw, 19px); color: var(--navy-900); letter-spacing: -0.01em; line-height: 1.2; }
        .miami-card-meta { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
        .miami-card-dist { font-size: 11px; color: var(--ink-400); flex-shrink: 0; padding-left: 8px; }
        .miami-card-cat { padding: 3px 10px; background: var(--sand-100); border-radius: 999px; font-size: 10px; color: var(--ink-500); letter-spacing: 0.12em; text-transform: uppercase; display: inline-block; margin-top: 6px; font-weight: 600; }
        .miami-card-desc { margin: 8px 0 0; font-size: 13px; color: var(--ink-700); line-height: 1.55; }
      `}</style>
      <div className="container">
        <div className="miami-header">
          <span className="sun-bullet" />
          <div className="overline" style={{ marginTop: 14 }}>Where to go</div>
          <h2 className="miami-title">The Miami we send guests to.</h2>
          <p className="miami-desc">
            From Joe's Stone Crab to the Pérez Art Museum — the spots our guests return to most.
            The concierge can book reservations anywhere.
          </p>
        </div>

        <div className="miami-grid">
          {spots.map(s => (
            <div key={s.name} className="miami-card">
              <div className="miami-card-img">
                <img src={s.img} alt={s.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              </div>
              <div className="miami-card-content">
                <div className="miami-card-meta">
                  <div className="miami-card-name">{s.name}</div>
                  <span className="miami-card-dist">{s.dist}</span>
                </div>
                <span className="miami-card-cat">{s.cat}</span>
                <p className="miami-card-desc">{s.desc}</p>
              </div>
            </div>
          ))}
        </div>

        <div style={{ textAlign: 'center', marginTop: 'clamp(40px, 8vw, 48px)' }}>
          <p style={{ color: 'var(--ink-500)', fontSize: 14, marginBottom: 16 }}>
            Need a recommendation or a reservation? The concierge is here.
          </p>
          <a href="contact.html" className="btn btn-primary" style={{ padding: '13px 26px', fontSize: 14 }}>
            Ask the concierge →
          </a>
        </div>
      </div>
    </section>
  );
}

/* Closing CTA band */
function ExperiencesCTA() {
  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>{`
        .exp-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; }
        .exp-cta-content { position: relative; z-index: 1; text-align: center; }
        .exp-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; }
        .exp-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; }
        .exp-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; flex-direction: row; }
        @media (max-width: 480px) { .exp-cta-buttons { flex-direction: column; gap: 10px; } }
        .exp-cta-buttons > a { flex: 0 1 auto; }
        @media (max-width: 480px) { .exp-cta-buttons > a { flex: 1; text-align: center; } }
        .exp-cta-note { margin-top: 24px; font-size: 12px; color: rgba(255,255,255,0.36); letter-spacing: 0.06em; }
      `}</style>
      <div className="exp-cta-orb" />
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div className="exp-cta-content">
          <span className="sun-bullet" style={{ boxShadow: '0 0 0 8px rgba(252,172,100,0.12)' }} />
          <h2 className="exp-cta-title">
            Ready to plan your <em style={{ fontStyle: 'italic' }}>perfect</em> Miami stay?
          </h2>
          <p className="exp-cta-desc">
            The concierge responds in under 20 minutes.
            Via WhatsApp, email, or the guest portal.
          </p>
          <div className="exp-cta-buttons">
            <a href="contact.html" className="btn btn-on-dark" style={{ padding: '13px 26px', fontSize: 14 }}>
              Plan my stay →
            </a>
            <a href="https://wa.me/13058483113" 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: '13px 20px', fontSize: 14, borderRadius: 999,
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
              </svg>
              WhatsApp
            </a>
          </div>
          <p className="exp-cta-note">
            Available every day · 8am – midnight Miami time
          </p>
        </div>
      </div>
    </section>
  );
}

/* Experiences FAQ — concierge logistics, calm transactional voice */
function ExperiencesFAQ() {
  const faqs = [
    { q: 'How far in advance should I book an experience?', a: 'For the Galeon yacht and private chefs, 48 hours is comfortable — but we’ve pulled together same-day charters when the calendar allows. The earlier you ask, the more we can tailor.' },
    { q: 'Can I book experiences without staying at a Novus property?', a: 'Yes. While most guests pair experiences with a villa or residence stay, the Galeon charter, private chefs, and transfers are available to book on their own. Just reach out.' },
    { q: 'How do I reach the concierge?', a: 'WhatsApp, email, or the guest portal — whichever is easiest. The concierge replies in under 20 minutes, every day between 8am and midnight Miami time.' },
    { q: 'What if I want something that isn’t listed?', a: 'Ask anyway. The list is a starting point, not a limit — if we’ve arranged it before, we’ll arrange it again, and we usually have.' },
  ];
  return (
    <section style={{ padding: 'clamp(64px, 10vw, 100px) 0', background: 'var(--sand-50)' }}>
      <style>{`
        .exp-faq-wrap { max-width: 820px; margin: 0 auto; }
        .exp-faq-head { text-align: center; margin-bottom: clamp(32px, 6vw, 44px); }
        .exp-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; }
        .exp-faq-title em { font-style: italic; color: var(--sun-coral); }
        .exp-faq-item { border-bottom: 1px solid var(--line); }
        .exp-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); }
        .exp-faq-q:hover { color: var(--navy-700); }
        .exp-faq-ic { flex-shrink: 0; width: 24px; height: 24px; color: var(--sun-coral); transition: transform 300ms var(--ease-novus); }
        .exp-faq-item.open .exp-faq-ic { transform: rotate(45deg); }
        .exp-faq-a { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 380ms var(--ease-novus), opacity 300ms var(--ease-novus); }
        .exp-faq-item.open .exp-faq-a { max-height: 320px; opacity: 1; }
        .exp-faq-a-in { padding: 0 4px 22px; font-size: 15px; line-height: 1.7; color: var(--ink-700); }
      `}</style>
      <div className="container">
        <div className="exp-faq-wrap">
          <div className="exp-faq-head">
            <span className="sun-bullet" />
            <div className="overline" style={{ marginTop: 14 }}>Good to know</div>
            <h2 className="exp-faq-title">The <em>concierge</em>, explained.</h2>
          </div>
          {faqs.map((f, i) => <ExpFaqItem key={i} q={f.q} a={f.a} />)}
        </div>
      </div>
    </section>
  );
}

function ExpFaqItem({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div className={`exp-faq-item ${open ? 'open' : ''}`}>
      <button className="exp-faq-q" onClick={() => setOpen(o => !o)} aria-expanded={open}>
        <span>{q}</span>
        <svg className="exp-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="exp-faq-a"><div className="exp-faq-a-in">{a}</div></div>
    </div>
  );
}

window.ExperiencesHero = ExperiencesHero;
window.ExperiencesStats = ExperiencesStats;
window.GaleonFeature = GaleonFeature;
window.ConciergeStory = ConciergeStory;
window.ExperienceReviews = ExperienceReviews;
window.MiamiSpots = MiamiSpots;
window.ExperiencesFAQ = ExperiencesFAQ;
window.ExperiencesCTA = ExperiencesCTA;