'use client';

import React, { useEffect, useLayoutEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { PhoneMockupImage } from './PhoneMockup';

if (typeof window !== 'undefined') gsap.registerPlugin(ScrollTrigger);

const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

export default function LiveMoreSection() {
  const panelRef = useRef<HTMLDivElement>(null);
  const phoneRef = useRef<HTMLDivElement>(null);

  useIsomorphicLayoutEffect(() => {
    if (typeof window === 'undefined') return;
    const section = panelRef.current;
    const phone = phoneRef.current;
    if (!section || !phone) return;

    const ctx = gsap.context(() => {
      gsap.fromTo(phone,
        { y: 160, opacity: 0 },
        {
          y: 0, opacity: 1, ease: 'power2.out',
          scrollTrigger: { trigger: section, start: 'top 92%', end: 'top 25%', scrub: 1.2 },
        }
      );
    }, section);

    return () => ctx.revert();
  }, []);

  return (
    <section ref={panelRef} className="fp-panel fp-light" style={{ background: '#ffffff' }}>
      <div className="fp-shell">
        <div className="fp-split" style={{ gridTemplateColumns: '0.95fr 1.05fr' }}>

          {/* Left — phone mockup: lifestyle moments feed */}
          <div ref={phoneRef} style={{ display: 'flex', justifyContent: 'center', opacity: 0, width: '100%' }}>
            <PhoneMockupImage
              src="/assets/For_people/03_live-cropped.png"
              alt="LytsUp Live More screen showing today's lifestyle moments"
              floatClassName="live-phone-shell"
              aspectRatio={1608 / 3088}
            />
          </div>

          {/* Right — headline + copy */}
          <div>
            <div style={{ marginBottom: 20 }}><span className="fp-kicker fp-rise">Live<span className="fp-kicker-num">04</span></span></div>

            <h2 className="fp-h1" style={{ color: '#171512' }}>
              <span className="fp-mask"><span>Live</span></span>
              <span className="fp-mask"><span style={{ color: '#f4be28' }}>More.</span></span>
            </h2>

            <p className="fp-rise" style={{ fontSize: 15, lineHeight: 1.8, color: '#4f463a', fontFamily: 'Sora, sans-serif', maxWidth: 420, margin: '0 0 24px' }}>
              Life isn&apos;t about collecting points. It&apos;s about collecting moments.
            </p>

            <div className="fp-rise" style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 28, maxWidth: 460 }}>
              {[
                { label: 'Walk more', icon: '🚶', bg: '#eef2ff' },
                { label: 'Explore more', icon: '🧭', bg: '#fdeef7' },
                { label: 'Meet friends', icon: '🤝', bg: '#eef9f1' },
                { label: 'Support local', icon: '🏪', bg: '#fef1e8' },
                { label: 'Discover new brands', icon: '🏷️', bg: '#fef7ea' },
                { label: 'Celebrate every day', icon: '🎊', bg: '#fdeeee' },
              ].map((tag) => (
                <div key={tag.label} className="fp-card fp-card--light">
                  <span className="fp-card-icon" style={{ background: tag.bg }}>{tag.icon}</span>
                  <span style={{ fontSize: 13, fontWeight: 700, fontFamily: 'Sora, sans-serif', color: '#171512', letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>
                    {tag.label}
                  </span>
                </div>
              ))}
            </div>

            <div className="fp-rise" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ width: 34, height: 3, borderRadius: 2, background: '#f4be28', flexShrink: 0 }} />
              <p style={{
                fontSize: 'clamp(17px, 1.7vw, 21px)', lineHeight: 1.3, color: '#171512', fontFamily: 'Sora, sans-serif',
                margin: 0, fontWeight: 800, letterSpacing: '-0.02em',
              }}>
                LytsUp rewards <span style={{ color: '#f4be28' }}>your lifestyle,</span> not just your purchases.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}