function Contact() {
  const sectionRef = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  // Map view: 'map' = roadmap (default, most reliable), 'sat' = satellite.
  // Satellite is opt-in because the tile server occasionally fails to serve
  // hi-res imagery for this corner of Mauritius — roadmap always loads.
  const [mapView, setMapView] = React.useState('map');

  // Google Maps embed query — place name + area. Roadmap = t=m, Satellite = t=k.
  const mapQuery = 'After5+Lounge+Bar+Belle+Vue+Maurel+Mauritius';
  const mapSrc = mapView === 'sat'
    ? `https://maps.google.com/maps?q=${mapQuery}&t=k&z=17&output=embed`
    : `https://maps.google.com/maps?q=${mapQuery}&t=m&z=16&output=embed`;

  React.useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setVisible(true); observer.disconnect(); } },
      { threshold: 0.08 }
    );
    if (sectionRef.current) observer.observe(sectionRef.current);
    return () => observer.disconnect();
  }, []);

  const hours = [
    { days: 'Tuesday – Thursday',  time: '6:00 PM – 11:00 PM' },
    { days: 'Friday – Saturday',   time: '6:00 PM – 12:00 AM' },
    { days: 'Sunday',              time: '6:00 PM – 11:00 PM' },
    { days: 'Monday',              time: 'Closed' },
  ];

  return (
    <>
      <style>{`
        /* ── Section ── */
        .contact {
          background: #0F0F0F;
          padding: 100px 0 0;
          overflow: hidden;
        }

        /* ── Header ── */
        .contact-header {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          padding: 0 96px 64px;
          gap: 40px;
          opacity: 0; transform: translateY(16px);
          transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1) 0.1s,
                      transform 0.8s cubic-bezier(0.16,1,0.3,1) 0.1s;
        }
        .contact-header.in { opacity: 1; transform: translateY(0); }

        .contact-eyebrow {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 11px; font-weight: 400;
          letter-spacing: 0.35em; text-transform: uppercase;
          color: #E84800;
          display: flex; align-items: center; gap: 12px;
          margin-bottom: 18px;
        }
        .contact-eyebrow-rule { width: 32px; height: 1px; background: #E84800; opacity: 0.6; }

        .contact-title {
          font-family: 'Playfair Display', serif;
          font-size: clamp(32px, 3vw, 50px);
          font-weight: 400; font-style: italic;
          color: #F5F0EA;
          line-height: 1.15; letter-spacing: -0.02em;
        }

        .contact-header-rule {
          flex: 1; max-width: 200px; height: 1px;
          background: rgba(255,255,255,0.08);
          align-self: center; flex-shrink: 0;
        }

        /* ── Main grid: map left, info right ── */
        .contact-main {
          display: grid;
          grid-template-columns: 1.1fr 1fr;
          min-height: 520px;
        }

        /* ── Map panel ── */
        .contact-map {
          position: relative;
          overflow: hidden;
          background: #111;
          opacity: 0; transform: translateX(-20px);
          transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1) 0.2s,
                      transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.2s;
        }
        .contact-map.in { opacity: 1; transform: translateX(0); }

        .contact-map iframe {
          width: 100%; height: 100%;
          border: none; display: block;
          filter: brightness(0.85) saturate(1.1);
        }

        /* Orange overlay tint on map */
        .contact-map-overlay {
          position: absolute; inset: 0;
          background: rgba(232,72,0,0.04);
          pointer-events: none;
        }

        /* ── Map view toggle (overlay, top-right) ── */
        .contact-map-toggle {
          position: absolute;
          top: 20px; right: 20px;
          z-index: 3;
          display: inline-flex;
          padding: 4px;
          background: rgba(15,15,15,0.78);
          backdrop-filter: blur(12px);
          border: 1px solid rgba(255,255,255,0.1);
          border-radius: 100px;
          box-shadow: 0 4px 20px rgba(0,0,0,0.35);
        }
        .contact-map-toggle-btn {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 10px; font-weight: 500;
          letter-spacing: 0.24em; text-transform: uppercase;
          color: rgba(245,240,234,0.55);
          background: transparent;
          border: none;
          padding: 8px 16px;
          border-radius: 100px;
          cursor: pointer;
          transition: color 0.25s ease, background 0.25s ease;
        }
        .contact-map-toggle-btn:hover { color: rgba(245,240,234,0.9); }
        .contact-map-toggle-btn.active {
          background: #E84800;
          color: #fff;
        }
        .contact-map-toggle-btn.active:hover { color: #fff; }

        /* When satellite is active, drop the brightness filter so imagery reads naturally */
        .contact-map.is-sat iframe {
          filter: saturate(1.05);
        }

        /* ── Info panel ── */
        .contact-info {
          padding: 56px 80px 56px 72px;
          display: flex; flex-direction: column;
          justify-content: center;
          gap: 40px;
          opacity: 0; transform: translateX(20px);
          transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s,
                      transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s;
        }
        .contact-info.in { opacity: 1; transform: translateX(0); }

        /* Info block */
        .contact-block {}
        .contact-block-label {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 9px; font-weight: 400;
          letter-spacing: 0.4em; text-transform: uppercase;
          color: #E84800;
          display: flex; align-items: center; gap: 10px;
          margin-bottom: 16px;
        }
        .contact-block-label::before {
          content: ''; display: block;
          width: 20px; height: 1px;
          background: #E84800; opacity: 0.6; flex-shrink: 0;
        }

        /* Address */
        .contact-address {
          font-family: 'Playfair Display', serif;
          font-size: clamp(18px, 1.7vw, 24px);
          font-weight: 400; font-style: italic;
          color: #F5F0EA;
          line-height: 1.4; letter-spacing: -0.01em;
        }

        /* Hours table */
        .contact-hours {
          display: flex; flex-direction: column; gap: 0;
        }
        .contact-hour-row {
          display: flex; justify-content: space-between; align-items: baseline;
          padding: 11px 0;
          border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .contact-hour-row:first-child { border-top: 1px solid rgba(255,255,255,0.05); }
        .contact-hour-days {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 11px; font-weight: 300;
          letter-spacing: 0.08em;
          color: rgba(245,240,234,0.45);
        }
        .contact-hour-time {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 11px; font-weight: 400;
          letter-spacing: 0.06em;
          color: rgba(245,240,234,0.7);
        }
        .contact-hour-time.closed { color: rgba(245,240,234,0.22); }

        /* Contact links */
        .contact-links {
          display: flex; flex-direction: column; gap: 14px;
        }
        .contact-link {
          display: flex; align-items: center; gap: 14px;
          text-decoration: none;
          color: rgba(245,240,234,0.5);
          font-family: 'Josefin Sans', sans-serif;
          font-size: 11px; font-weight: 300;
          letter-spacing: 0.12em;
          transition: color 0.25s ease;
        }
        .contact-link:hover { color: #F5F0EA; }
        .contact-link-icon {
          width: 32px; height: 32px; border-radius: 50%;
          border: 1px solid rgba(255,255,255,0.1);
          display: flex; align-items: center; justify-content: center;
          flex-shrink: 0;
          color: rgba(255,255,255,0.4);
          transition: border-color 0.25s ease, color 0.25s ease,
                      background 0.25s ease;
        }
        .contact-link:hover .contact-link-icon {
          border-color: #E84800;
          color: #E84800;
          background: rgba(232,72,0,0.08);
        }

        /* WhatsApp CTA */
        .contact-wa-btn {
          display: inline-flex; align-items: center; gap: 12px;
          font-family: 'Josefin Sans', sans-serif;
          font-size: 11px; font-weight: 600;
          letter-spacing: 0.22em; text-transform: uppercase;
          color: #fff;
          background: #E84800;
          text-decoration: none;
          padding: 14px 32px;
          border-radius: 100px;
          box-shadow: 0 4px 24px rgba(232,72,0,0.32);
          align-self: flex-start;
          transition: background 0.22s ease,
                      transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
                      box-shadow 0.22s ease;
        }
        .contact-wa-btn:hover {
          background: #FF5C1A;
          transform: translateY(-2px);
          box-shadow: 0 8px 36px rgba(232,72,0,0.48);
        }
        .contact-wa-btn:active { transform: translateY(0); }

        /* ── Divider ── */
        .contact-divider {
          height: 1px; background: rgba(255,255,255,0.05);
          margin: 0 96px;
          opacity: 0;
          transition: opacity 0.8s ease 0.5s;
        }
        .contact-divider.in { opacity: 1; }

        /* ── Responsive ── */
        @media (max-width: 1100px) {
          .contact-info { padding: 48px 48px 48px 56px; }
        }
        @media (max-width: 900px) {
          .contact { padding: 72px 0 0; }
          .contact-header { padding: 0 32px 48px; flex-direction: column; align-items: flex-start; gap: 20px; }
          .contact-header-rule { display: none; }
          .contact-main { grid-template-columns: 1fr; }
          .contact-map { height: 56vw; min-height: 260px; }
          .contact-info { padding: 48px 32px; }
          .contact-divider { margin: 0 32px; }
          .contact-map-toggle { top: 12px; right: 12px; }
          .contact-map-toggle-btn { padding: 6px 12px; font-size: 9px; letter-spacing: 0.2em; }
        }
      `}</style>

      <section className="contact" ref={sectionRef} id="contact" aria-label="Find us — Contact">

        {/* Header */}
        <div className={`contact-header ${visible ? 'in' : ''}`}>
          <div>
            <p className="contact-eyebrow">
              <span className="contact-eyebrow-rule" />
              Find Us
            </p>
            <h2 className="contact-title">
              Come find us<br />under the palms.
            </h2>
          </div>
          <div className="contact-header-rule" />
        </div>

        {/* Map + Info */}
        <div className="contact-main">

          {/* Google Map */}
          <div className={`contact-map ${visible ? 'in' : ''} ${mapView === 'sat' ? 'is-sat' : ''}`}>
            <iframe
              key={mapView}
              src={mapSrc}
              title="After5 Lounge Bar location"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            />
            <div className="contact-map-overlay" />

            {/* View toggle overlay */}
            <div className="contact-map-toggle" role="group" aria-label="Map view">
              <button
                type="button"
                className={`contact-map-toggle-btn ${mapView === 'map' ? 'active' : ''}`}
                onClick={() => setMapView('map')}
                aria-pressed={mapView === 'map'}
              >
                Map
              </button>
              <button
                type="button"
                className={`contact-map-toggle-btn ${mapView === 'sat' ? 'active' : ''}`}
                onClick={() => setMapView('sat')}
                aria-pressed={mapView === 'sat'}
              >
                Satellite
              </button>
            </div>
          </div>

          {/* Info */}
          <div className={`contact-info ${visible ? 'in' : ''}`}>

            {/* Address */}
            <div className="contact-block">
              <p className="contact-block-label">Address</p>
              <address style={{ fontStyle: 'normal' }}>
                <span className="contact-address">
                  Bois Morand,<br />
                  Belle Vue Maurel,<br />
                  Mauritius
                </span>
              </address>
            </div>

            {/* Hours */}
            <div className="contact-block">
              <p className="contact-block-label">Opening Hours</p>
              <div className="contact-hours">
                {hours.map((h, i) => (
                  <div className="contact-hour-row" key={i}>
                    <span className="contact-hour-days">{h.days}</span>
                    <span className={`contact-hour-time${h.time === 'Closed' ? ' closed' : ''}`}>{h.time}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Contact links */}
            <div className="contact-block">
              <p className="contact-block-label">Get in Touch</p>
              <div className="contact-links">
                <a href="tel:+2302898888" className="contact-link">
                  <span className="contact-link-icon">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.38 2 2 0 0 1 3.58 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.56a16 16 0 0 0 6 6l.87-.87a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
                    </svg>
                  </span>
                  289 8888
                </a>
                <a
                  href="https://wa.me/23058582020"
                  className="contact-link"
                  target="_blank" rel="noopener noreferrer"
                >
                  <span className="contact-link-icon">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                      <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>
                  </span>
                  +230 5858 2020
                </a>
                <a
                  href="https://www.instagram.com/after5loungebar/"
                  className="contact-link"
                  target="_blank" rel="noopener noreferrer"
                >
                  <span className="contact-link-icon">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                      <circle cx="12" cy="12" r="4"/>
                      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
                    </svg>
                  </span>
                  @after5loungebar
                </a>
              </div>
            </div>

            {/* Reserve CTA */}
            <a
              href="https://wa.me/23058582020?text=Hi%2C%20I'd%20like%20to%20make%20a%20reservation%20at%20After5%20Lounge%20Bar"
              className="contact-wa-btn"
              target="_blank" rel="noopener noreferrer"
            >
              <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <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>
              Reserve a Table
            </a>

          </div>
        </div>

        <div className={`contact-divider ${visible ? 'in' : ''}`} />

      </section>
    </>
  );
}