function Intro() {
  const sectionRef = React.useRef(null);
  const [visible, setVisible] = React.useState(false);

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

  const stats = [
    { value: '2025', label: 'Est.' },
    { value: 'Belle Vue Maurel', label: 'Mauritius' },
    { value: '6 Nights', label: 'Per Week' },
    { value: '6 PM', label: 'Opens Daily' },
  ];

  return (
    <>
      <style>{`
        .intro {
          position: relative;
          width: 100%;
          min-height: 100vh;
          display: grid;
          grid-template-columns: 1fr 1fr;
          overflow: hidden;
          background: #0C0C0C;
        }

        /* ── Left: text panel ── */
        .intro-text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 120px 80px 120px 96px;
          position: relative;
          z-index: 2;
        }

        /* Subtle background grain on text side */
        .intro-text::before {
          content: '';
          position: absolute; inset: 0;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
          opacity: 0.35; pointer-events: none;
        }

        /* Orange accent — thin vertical left border */
        .intro-text::after {
          content: '';
          position: absolute;
          left: 0; top: 20%; bottom: 20%;
          width: 1px;
          background: linear-gradient(to bottom, transparent, #E84800 40%, #E84800 60%, transparent);
          opacity: 0.4;
        }

        /* Eyebrow */
        .intro-eyebrow {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 10px; font-weight: 400;
          letter-spacing: 0.35em; text-transform: uppercase;
          color: #E84800;
          margin-bottom: 28px;
          display: flex; align-items: center; gap: 12px;
          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;
        }
        .intro-eyebrow.in { opacity: 1; transform: translateY(0); }
        .intro-eyebrow-rule {
          flex: 1; max-width: 40px; height: 1px;
          background: #E84800; opacity: 0.5;
        }

        /* Headline */
        .intro-headline {
          font-family: 'Playfair Display', serif;
          font-size: clamp(36px, 3.6vw, 54px);
          font-weight: 400; font-style: italic;
          color: #F5F0EA;
          line-height: 1.15; letter-spacing: -0.02em;
          margin-bottom: 32px;
          opacity: 0; transform: translateY(20px);
          transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1) 0.28s,
                      transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.28s;
        }
        .intro-headline.in { opacity: 1; transform: translateY(0); }

        /* Body */
        .intro-body {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 14px; font-weight: 300;
          line-height: 1.9; letter-spacing: 0.04em;
          color: rgba(245,240,234,0.52);
          max-width: 420px;
          margin-bottom: 56px;
          opacity: 0; transform: translateY(16px);
          transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1) 0.44s,
                      transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.44s;
        }
        .intro-body.in { opacity: 1; transform: translateY(0); }

        /* Stats row */
        .intro-stats {
          display: flex; gap: 0;
          border-top: 1px solid rgba(255,255,255,0.07);
          padding-top: 40px;
          opacity: 0; transform: translateY(12px);
          transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1) 0.62s,
                      transform 0.8s cubic-bezier(0.16,1,0.3,1) 0.62s;
        }
        .intro-stats.in { opacity: 1; transform: translateY(0); }

        .intro-stat {
          flex: 1;
          padding-right: 24px;
          position: relative;
        }
        .intro-stat + .intro-stat {
          padding-left: 24px; padding-right: 24px;
          border-left: 1px solid rgba(255,255,255,0.07);
        }
        .intro-stat:last-child { padding-right: 0; }

        .intro-stat-value {
          font-family: 'Playfair Display', serif;
          font-size: 20px; font-weight: 400; font-style: italic;
          color: #F5F0EA;
          letter-spacing: -0.01em;
          line-height: 1.2;
          display: block; margin-bottom: 4px;
        }
        .intro-stat-label {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 9px; font-weight: 400;
          letter-spacing: 0.22em; text-transform: uppercase;
          color: rgba(255,255,255,0.28);
          display: block;
        }

        /* ── Right: image panel ── */
        .intro-image-wrap {
          position: relative;
          overflow: hidden;
        }
        .intro-image-wrap::before {
          content: '';
          position: absolute; inset: 0; z-index: 1;
          background: linear-gradient(
            to right,
            rgba(12,12,12,0.65) 0%,
            rgba(12,12,12,0.1) 40%,
            transparent 100%
          );
        }
        .intro-img {
          width: 100%; height: 100%;
          object-fit: cover; object-position: center;
          display: block;
          transform: scale(1.04);
          opacity: 0;
          transition: transform 1.4s cubic-bezier(0.16,1,0.3,1) 0.2s,
                      opacity 1.2s ease 0.2s;
        }
        .intro-img.in {
          transform: scale(1);
          opacity: 1;
        }


        /* ── Responsive ── */
        @media (max-width: 900px) {
          .intro {
            grid-template-columns: 1fr;
            min-height: auto;
          }
          .intro-image-wrap {
            height: 55vw;
            min-height: 320px;
            order: -1;
          }
          .intro-image-wrap::before {
            background: linear-gradient(
              to bottom,
              transparent 50%,
              rgba(12,12,12,0.8) 100%
            );
          }
          .intro-text {
            padding: 56px 32px 72px;
          }
          .intro-text::after { display: none; }
.intro-stats { gap: 0; flex-wrap: wrap; }
          .intro-stat { min-width: 50%; margin-bottom: 24px; }
          .intro-stat + .intro-stat { border-left: none; }
          .intro-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.07); }
        }
      `}</style>

      <section className="intro" ref={sectionRef} id="intro" aria-label="After5 Lounge Bar introduction">
        {/* ── Left: text ── */}
        <div className="intro-text">
          <p className={`intro-eyebrow ${visible ? 'in' : ''}`}>
            <span className="intro-eyebrow-rule" />
            Welcome to After5
          </p>

          <h2 className={`intro-headline ${visible ? 'in' : ''}`}>
            Where Mauritius comes<br />alive after sundown.
          </h2>

          <p className={`intro-body ${visible ? 'in' : ''}`}>
            Nestled among palms in Belle Vue Maurel, After5 is an open-air
            lounge bar unlike anything else on the island. From the golden hour
            to midnight, we pour signature cocktails, serve fresh seafood,
            and fill the warm Mauritian night with live music.
          </p>

          <div className={`intro-stats ${visible ? 'in' : ''}`}>
            {stats.map((s, i) => (
              <div className="intro-stat" key={i}>
                <span className="intro-stat-value">{s.value}</span>
                <span className="intro-stat-label">{s.label}</span>
              </div>
            ))}
          </div>
        </div>

        {/* ── Right: image ── */}
        <div className="intro-image-wrap">
          <img
            src="./brand-assets/gallery-image-6(entrance).jpg"
            alt="After5 Lounge Bar entrance — natural stone arch at dusk"
            className={`intro-img ${visible ? 'in' : ''}`}
          />

        </div>
      </section>
    </>
  );
}