// About — Kalatua-style intro section.
// Structure: .about-heading-block (line + dot + H2 + body) then .about-photo-wrap (photo + curtain overlay).
// Animations (ScrollTrigger @ top 80%):
//   1. Gold line: scaleY 0→1 (transformOrigin top-center), 600ms, power3.out
//   2. Gold dot:  opacity 0→1, 300ms, delayed 400ms
//   3. Heading:   opacity 0→1, y 80→0, 700ms, power3.out (fires with line)
//   4. Body:      opacity 0→1, y 40→0, 600ms, power3.out, 200ms after heading
//   5. Photo overlay: translateX 0→100%, 800ms, power2.inOut (curtain slides off right)

function About({ data }) {
  const sectionRef = React.useRef(null);
  const lineRef    = React.useRef(null);
  const dotRef     = React.useRef(null);
  const headingRef = React.useRef(null);
  const bodyRef    = React.useRef(null);
  const photoWrapRef = React.useRef(null);
  const overlayRef   = React.useRef(null);
  const firedRef = React.useRef(false);

  React.useEffect(() => {
    if (!data || !data.about) return;
    if (firedRef.current) return;
    if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') return;
    firedRef.current = true;

    // --- Line + Dot ---
    gsap.timeline({
      scrollTrigger: {
        trigger: lineRef.current,
        start: 'top 80%',
        once: true,
      },
    })
      .to(lineRef.current, {
        scaleY: 1, transformOrigin: 'top center', duration: 0.6, ease: 'power3.out',
      }, 0)
      .to(dotRef.current, {
        opacity: 1, duration: 0.3, ease: 'power2.out',
      }, 0.4);

    // --- Heading + Body ---
    gsap.set(headingRef.current, { y: 80 });
    gsap.set(bodyRef.current,    { y: 40 });

    gsap.timeline({
      scrollTrigger: {
        trigger: headingRef.current,
        start: 'top 80%',
        once: true,
      },
    })
      .to(headingRef.current, {
        opacity: 1, y: 0, duration: 0.7, ease: 'power3.out',
      }, 0)
      .to(bodyRef.current, {
        opacity: 1, y: 0, duration: 0.6, ease: 'power3.out',
      }, 0.2);

    // --- Photo curtain wipe ---
    gsap.to(overlayRef.current, {
      x: '100%', duration: 0.8, ease: 'power2.inOut',
      scrollTrigger: {
        trigger: photoWrapRef.current,
        start: 'top 80%',
        once: true,
      },
    });

    const refresh = setTimeout(() => ScrollTrigger.refresh(), 300);
    return () => clearTimeout(refresh);
  }, [data]);

  if (!data || !data.about) return null;

  // Split heading into two lines for the amber accent on word "destination"/"experience"
  // Kalatua uses: "A <amber>Garden</amber> Hidden\nin the Heart of Pereybere"
  // Sunset Cafe heading: "A destination shaped by experience"
  // Render two-line variant: "A destination shaped\nby experience" with accent on "ocean"-equivalent.
  const about = data.about;
  // Accept explicit line1/line2 if provided, otherwise split on first comma/period.
  let line1 = about.line1, line2 = about.line2, accentText = about.accent;
  if (!line1) {
    // Default: break the Sunset Cafe heading into two roughly equal lines
    // with "experience" as the teal accent word.
    line1 = 'A destination';
    line2 = 'shaped by experience';
    accentText = 'experience';
  }

  // Build the JSX with the accent word wrapped
  const renderHeadingLine = (text, accent) => {
    if (!accent || !text.includes(accent)) return text;
    const idx = text.indexOf(accent);
    return (
      <React.Fragment>
        {text.slice(0, idx)}
        <span className="about-heading-amber">{accent}</span>
        {text.slice(idx + accent.length)}
      </React.Fragment>
    );
  };

  return (
    <section id="about" ref={sectionRef}>
      {/* Heading block */}
      <div className="about-heading-block">
        {/* Vertical teal line + dot */}
        <div className="about-line-wrap">
          <div className="about-gold-line" ref={lineRef}></div>
          <div className="about-gold-dot" ref={dotRef}></div>
        </div>

        {/* H2 */}
        <h2 className="about-heading" ref={headingRef}>
          {renderHeadingLine(line1, accentText)}
          <br />
          {renderHeadingLine(line2, accentText)}
        </h2>

        {/* Body */}
        <p className="about-body" ref={bodyRef}>
          {about.body}
        </p>
      </div>

      {/* Full-width panoramic photo with cream curtain overlay */}
      <div className="about-photo-wrap" ref={photoWrapRef}>
        <img
          src={about.image}
          alt="Sunset Restaurant interior"
          loading="lazy"
          decoding="async"
        />
        <div className="about-photo-overlay" ref={overlayRef}></div>
      </div>
    </section>
  );
}