function Experience() {
  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.12 }
    );
    if (sectionRef.current) observer.observe(sectionRef.current);
    return () => observer.disconnect();
  }, []);

  const cards = [
    {
      number: '01',
      label: 'Cocktails',
      title: 'Crafted to impress.',
      body: 'Signature cocktails mixed by hand, built around the flavours of the island.',
      cta: 'View Menu',
      href: '#menu',
      image: './brand_assets/cocktail/cocktail-08.webp',
      position: 'center center',
    },
    {
      number: '02',
      label: 'Fine Food',
      title: 'Fresh from the island.',
      body: 'Mediterranean plates, fresh seafood, and vibrant vegetarian dishes — all under the palms.',
      cta: 'View Menu',
      href: '#menu',
      image: './brand_assets/food/food-11.webp',
      position: 'center 40%',
    },
    {
      number: '03',
      label: 'Live Music',
      title: 'Every night, a new show.',
      body: 'Local artists, DJs, and live performers fill the open-air with music from 6 PM.',
      cta: 'See Events',
      href: '#events',
      image: './brand_assets/live-music/live-music-09.webp',
      position: 'center top',
    },
  ];

  return (
    <>
      <style>{`
        /* ── Section wrapper ── */
        .exp {
          width: 100%;
          background: #0A0A0A;
          overflow: hidden;
        }

        /* ── Section header ── */
        .exp-header {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          padding: 96px 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;
        }
        .exp-header.in { opacity: 1; transform: translateY(0); }

        .exp-header-left {}
        .exp-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: 20px;
        }
        .exp-eyebrow-rule {
          width: 32px; height: 1px;
          background: #E84800; opacity: 0.6; flex-shrink: 0;
        }
        .exp-title {
          font-family: 'Playfair Display', serif;
          font-size: clamp(34px, 3.2vw, 52px);
          font-weight: 400; font-style: italic;
          color: #F5F0EA;
          line-height: 1.15; letter-spacing: -0.02em;
        }
        .exp-header-rule {
          flex: 1; max-width: 240px; height: 1px;
          background: rgba(255,255,255,0.08);
          align-self: center; flex-shrink: 0;
        }

        /* ── Cards grid ── */
        .exp-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 2px;
          background: #0A0A0A;
        }

        /* ── Individual card ── */
        .exp-card {
          position: relative;
          height: 72vh;
          min-height: 520px;
          overflow: hidden;
          cursor: pointer;
          opacity: 0; transform: translateY(28px);
          transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1),
                      transform 0.85s cubic-bezier(0.16,1,0.3,1);
        }
        .exp-card:nth-child(1) { transition-delay: 0.15s; }
        .exp-card:nth-child(2) { transition-delay: 0.28s; }
        .exp-card:nth-child(3) { transition-delay: 0.41s; }
        .exp-card.in { opacity: 1; transform: translateY(0); }

        /* Image */
        .exp-card-img {
          position: absolute; inset: 0;
          width: 100%; height: 100%;
          object-fit: cover;
          transform: scale(1.06);
          transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
        }
        .exp-card:hover .exp-card-img {
          transform: scale(1.0);
        }

        /* Gradient overlay — always present */
        .exp-card-overlay {
          position: absolute; inset: 0; z-index: 1;
          background: linear-gradient(
            to top,
            rgba(0,0,0,0.92) 0%,
            rgba(0,0,0,0.55) 35%,
            rgba(0,0,0,0.2)  65%,
            rgba(0,0,0,0.08) 100%
          );
          transition: background 0.5s ease;
        }
        .exp-card:hover .exp-card-overlay {
          background: linear-gradient(
            to top,
            rgba(0,0,0,0.96) 0%,
            rgba(0,0,0,0.5)  35%,
            rgba(0,0,0,0.1)  65%,
            rgba(0,0,0,0.0)  100%
          );
        }

        /* Orange top accent bar — revealed on hover */
        .exp-card-accent {
          position: absolute; top: 0; left: 0; right: 0;
          height: 2px; z-index: 3;
          background: #E84800;
          transform: scaleX(0);
          transform-origin: left;
          transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
        }
        .exp-card:hover .exp-card-accent { transform: scaleX(1); }

        /* Content block */
        .exp-card-content {
          position: absolute; inset: 0; z-index: 2;
          display: flex; flex-direction: column;
          justify-content: flex-end;
          padding: 44px 40px;
        }

        /* Number */
        .exp-card-num {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 10px; font-weight: 400;
          letter-spacing: 0.3em; text-transform: uppercase;
          color: #E84800;
          margin-bottom: 10px;
          display: block;
        }

        /* Label */
        .exp-card-label {
          font-family: 'Playfair Display', serif;
          font-size: clamp(28px, 2.6vw, 38px);
          font-weight: 400; font-style: italic;
          color: #F5F0EA;
          line-height: 1.1; letter-spacing: -0.02em;
          margin-bottom: 14px;
          display: block;
        }

        /* Divider */
        .exp-card-divider {
          width: 32px; height: 1px;
          background: rgba(255,255,255,0.2);
          margin-bottom: 14px;
          transition: width 0.4s cubic-bezier(0.16,1,0.3,1),
                      background 0.3s ease;
        }
        .exp-card:hover .exp-card-divider {
          width: 52px;
          background: #E84800;
        }

        /* Body text */
        .exp-card-body {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 14px; font-weight: 300;
          letter-spacing: 0.06em; line-height: 1.8;
          color: rgba(245,240,234,0.48);
          margin-bottom: 28px;
          max-width: 280px;
          transition: color 0.3s ease;
        }
        .exp-card:hover .exp-card-body {
          color: rgba(245,240,234,0.65);
        }

        /* CTA link */
        .exp-card-cta {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 11px; font-weight: 600;
          letter-spacing: 0.28em; text-transform: uppercase;
          color: rgba(255,255,255,0.45);
          text-decoration: none;
          display: inline-flex; align-items: center; gap: 10px;
          transition: color 0.25s ease;
        }
        .exp-card-cta:hover { color: #fff; }
        .exp-card-cta-arrow {
          width: 20px; height: 1px;
          background: currentColor;
          position: relative;
          flex-shrink: 0;
          transition: width 0.35s cubic-bezier(0.16,1,0.3,1);
        }
        .exp-card-cta-arrow::after {
          content: '';
          position: absolute;
          right: 0; top: 50%;
          transform: translateY(-50%) rotate(45deg);
          width: 5px; height: 5px;
          border-right: 1px solid currentColor;
          border-top: 1px solid currentColor;
        }
        .exp-card:hover .exp-card-cta { color: #fff; }
        .exp-card:hover .exp-card-cta-arrow { width: 32px; }

        /* ── Responsive ── */
        @media (max-width: 900px) {
          .exp-header { padding: 72px 32px 48px; flex-direction: column; align-items: flex-start; }
          .exp-header-rule { display: none; }
          .exp-grid { grid-template-columns: 1fr; gap: 2px; }
          .exp-card { height: 72vw; min-height: 320px; }
        }
        @media (max-width: 480px) {
          .exp-card { height: 88vw; }
          .exp-card-content { padding: 28px 24px; }
        }
      `}</style>

      <section className="exp" ref={sectionRef} id="experience" aria-label="The After5 Experience">
        {/* Header */}
        <div className={`exp-header ${visible ? 'in' : ''}`}>
          <div className="exp-header-left">
            <p className="exp-eyebrow">
              <span className="exp-eyebrow-rule" />
              The Experience
            </p>
            <h2 className="exp-title">
              Three reasons to<br />come every night.
            </h2>
          </div>
          <div className="exp-header-rule" />
        </div>

        {/* Cards */}
        <div className="exp-grid">
          {cards.map((card, i) => (
            <div
              key={i}
              className={`exp-card ${visible ? 'in' : ''}`}
            >
              <img
                src={card.image}
                alt={card.label}
                className="exp-card-img"
                style={{ objectPosition: card.position }}
              />
              <div className="exp-card-overlay" />
              <div className="exp-card-accent" />
              <div className="exp-card-content">
                <span className="exp-card-num">{card.number}</span>
                <span className="exp-card-label">{card.label}</span>
                <div className="exp-card-divider" />
                <p className="exp-card-body">{card.body}</p>
                <a href={card.href} className="exp-card-cta">
                  {card.cta}
                  <span className="exp-card-cta-arrow" />
                </a>
              </div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}