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

  const facts = [
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/>
        </svg>
      ),
      label: 'Open Six Nights',
      detail: 'Tue – Sun · from 6 PM',
    },
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
        </svg>
      ),
      label: 'Belle Vue Maurel',
      detail: 'Bois Morand, Mauritius',
    },
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
          <path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1-.5 2V21"/>
        </svg>
      ),
      label: 'Est. August 2025',
      detail: 'Belle Vue Maurel\'s newest venue',
    },
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
          <path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>
        </svg>
      ),
      label: 'Live Entertainment',
      detail: 'Music, DJs & special events',
    },
  ];

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

        /* ── Main grid: text left, image right ── */
        .about-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0;
          min-height: 74vh;
        }

        /* ── Left: text panel ── */
        .about-text {
          padding: 0 80px 0 96px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          opacity: 0; transform: translateX(-24px);
          transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1) 0.15s,
                      transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.15s;
        }
        .about-text.in { opacity: 1; transform: translateX(0); }

        .about-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: 24px;
        }
        .about-eyebrow-rule { width: 32px; height: 1px; background: #E84800; opacity: 0.6; }

        .about-title {
          font-family: 'Playfair Display', serif;
          font-size: clamp(34px, 3.4vw, 56px);
          font-weight: 400; font-style: italic;
          color: #F5F0EA;
          line-height: 1.12; letter-spacing: -0.02em;
          margin-bottom: 32px;
        }

        .about-body {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 14px; font-weight: 300;
          letter-spacing: 0.05em; line-height: 2;
          color: rgba(245,240,234,0.48);
          max-width: 460px;
          margin-bottom: 20px;
        }

        /* Horizontal rule with dot */
        .about-rule {
          display: flex; align-items: center; gap: 16px;
          margin: 36px 0;
        }
        .about-rule-line { flex: 1; height: 1px; background: rgba(255,255,255,0.06); }
        .about-rule-dot {
          width: 4px; height: 4px; border-radius: 50%;
          background: rgba(232,72,0,0.4); flex-shrink: 0;
        }

        /* ── Fact items ── */
        .about-facts {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 28px 32px;
        }

        .about-fact {
          display: flex;
          align-items: flex-start;
          gap: 16px;
        }

        .about-fact-icon {
          color: #E84800;
          flex-shrink: 0;
          margin-top: 2px;
          opacity: 0.85;
        }

        .about-fact-label {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 12px; font-weight: 600;
          letter-spacing: 0.1em; text-transform: uppercase;
          color: rgba(245,240,234,0.75);
          display: block;
          margin-bottom: 4px;
        }

        .about-fact-detail {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 11px; font-weight: 300;
          letter-spacing: 0.08em;
          color: rgba(245,240,234,0.32);
          display: block;
          line-height: 1.5;
        }

        /* ── Right: image panel ── */
        .about-img-panel {
          position: relative;
          overflow: hidden;
          opacity: 0; transform: translateX(24px);
          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;
        }
        .about-img-panel.in { opacity: 1; transform: translateX(0); }

        .about-img {
          width: 100%; height: 100%;
          object-fit: cover; object-position: center;
          display: block;
          transform: scale(1.04);
          transition: transform 8s ease;
        }
        .about-img-panel.in .about-img { transform: scale(1); }

        /* Gradient blending into section bg */
        .about-img-overlay {
          position: absolute; inset: 0;
          background: linear-gradient(
            to left,
            rgba(10,10,10,0) 40%,
            rgba(10,10,10,0.4) 100%
          );
          pointer-events: none;
        }

        /* Orange vertical accent on left edge of image */
        .about-img-edge {
          position: absolute; top: 10%; left: 0; bottom: 10%;
          width: 1px;
          background: linear-gradient(to bottom, transparent, #E84800 40%, #E84800 60%, transparent);
          opacity: 0.4;
        }


        /* ── Responsive ── */
        @media (max-width: 900px) {
          .about { padding: 72px 0; }
          .about-grid { grid-template-columns: 1fr; min-height: auto; }
          .about-img-panel { height: 64vw; min-height: 280px; order: -1; }
          .about-img-overlay {
            background: linear-gradient(to bottom, rgba(10,10,10,0) 50%, rgba(10,10,10,0.5) 100%);
          }
          .about-text { padding: 48px 32px; }
          .about-quote { left: 16px; bottom: 16px; }
        }
        @media (max-width: 480px) {
          .about-facts { grid-template-columns: 1fr; }
          .about-title { font-size: 30px; }
          .about-quote { display: none; }
        }
      `}</style>

      <section className="about" ref={sectionRef} id="about" aria-label="About After5 Lounge Bar">
        <div className="about-grid">

          {/* Left: text */}
          <div className={`about-text ${visible ? 'in' : ''}`}>
            <p className="about-eyebrow">
              <span className="about-eyebrow-rule" />
              Our Story
            </p>
            <h2 className="about-title">
              Heritage, reimagined<br />under the palms.
            </h2>
            <p className="about-body">
              After5 Lounge Bar is housed within a historic building that once played a
              vital role in the northern sugar estate. Over time, the structure has served
              multiple purposes, reflecting the region's rich industrial heritage. Carefully
              preserved, it retains much of its original character and architectural
              integrity, enhanced by the surrounding palm trees that lend a distinctive
              tropical charm.
            </p>
            <p className="about-body">
              Today, the space has been thoughtfully reimagined into a contemporary lounge
              while respecting its historical essence. From à la carte dining experiences
              to private and corporate events, the venue caters to a wide range of
              occasions — a seamless blend of heritage, nature and modern design that
              creates a refined and inviting atmosphere.
            </p>

            <div className="about-rule">
              <div className="about-rule-line" />
              <div className="about-rule-dot" />
              <div className="about-rule-line" />
            </div>

            <div className="about-facts">
              {facts.map((f, i) => (
                <div className="about-fact" key={i}>
                  <span className="about-fact-icon">{f.icon}</span>
                  <div>
                    <span className="about-fact-label">{f.label}</span>
                    <span className="about-fact-detail">{f.detail}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Right: image */}
          <div className={`about-img-panel ${visible ? 'in' : ''}`}>
            <img
              src="./brand_assets/svarga/svarga-07.webp"
              alt="After5 Lounge Bar — heritage stone arch entrance under the palms"
              className="about-img"
            />
            <div className="about-img-overlay" />
            <div className="about-img-edge" />

          </div>

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