'use client';

import { useState, useEffect, useRef } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { gsap, useGSAP, syncLenisScrollTrigger } from '../story/gsapkit';
import { Ico } from '../story/Ico';

const INK = '#0a0a0a';
const BLUE = '#2F6BFF';

const NAV = [
  {
    title: 'Earn',
    color: '#C8FF37', // lime
    links: [
      { label: 'Walk to Earn', href: '#how-it-works' },
      { label: 'Play & Win', href: '#how-it-works' },
      { label: 'Refer Friends', href: '#how-it-works' },
    ],
  },
  {
    title: 'Spend',
    color: '#FF2E88', // pink
    links: [
      { label: 'The Difference', href: '#difference' },
      { label: 'How It Works', href: '#how-it-works' },
      { label: 'The Loop', href: '#the-loop' },
    ],
  },
  {
    title: 'Live',
    color: '#8B3DFF', // purple
    links: [
      { label: 'The Vision', href: '#the-vision' },
      { label: 'The Why', href: '#the-why' },
      { label: 'Our Belief', href: '#our-belief' },
    ],
  },
];

const SOCIALS = [
  {
    label: 'Instagram', href: 'https://instagram.com/lytsup', bg: '#FF2E88',
    icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>,
  },
  {
    label: 'X / Twitter', href: 'https://twitter.com/lytsup', bg: '#8B3DFF',
    icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M13.98 10.62 20.54 3h-1.55l-5.7 6.62L8.74 3H3.5l6.88 10.01L3.5 21h1.55l6.01-6.99L15.87 21h5.24l-7.13-10.38zm-2.13 2.47-.7-1-5.54-7.93H8l4.47 6.4.7 1 5.82 8.32h-2.39l-4.74-6.79z"/></svg>,
  },
  {
    label: 'YouTube', href: 'https://www.youtube.com/@lytsup', bg: '#FF6B35',
    icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M21.8 8s-.2-1.38-.8-1.99c-.76-.8-1.61-.8-2-.85C16.2 5 12 5 12 5s-4.2 0-7 .17c-.39.05-1.24.05-2 .85C2.4 6.62 2.2 8 2.2 8S2 9.62 2 11.24v1.52c0 1.62.2 3.24.2 3.24s.2 1.38.8 1.99c.76.8 1.76.77 2.2.85C6.8 19 12 19.03 12 19.03s4.2-.01 7-.22c.39-.05 1.24-.05 2-.85.6-.61.8-1.99.8-1.99S22 14.38 22 12.76v-1.52C22 9.62 21.8 8 21.8 8zm-11.87 6.59V8.79l5.4 2.82-5.4 2.98z"/></svg>,
  },
];

/* Kinetic ticker phrases + the giant wordmark letters */
const TICKER = ['Earn', 'Spend', 'Live More', 'Make Everyday Count', 'Join The Loop', 'Real Value'];

function Star({ size = 22, color = INK }: { size?: number; color?: string }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true" style={{ flexShrink: 0 }}>
      <path d="M12 0l2.5 8.2L22 6l-5.4 6.2L22 18l-7.5-2.2L12 24l-2.5-8.2L2 18l5.4-6.2L2 6l7.5 2.2z" />
    </svg>
  );
}

export default function Footer() {
  const [showScroll, setShowScroll] = useState(false);
  const rootRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const onScroll = () => setShowScroll(window.scrollY > 400);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useGSAP(
    () => {
      syncLenisScrollTrigger();
      const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

      if (!reduce) {
        /* Continuous continuous animations */
        gsap.to('.foot-ticker-track', { xPercent: -50, duration: 22, ease: 'none', repeat: -1 });
        gsap.to('.foot-cta-star-spin', { rotate: 360, duration: 9, ease: 'none', repeat: -1 });

        /* ── 3D Sticker Fold-Out & Stamp Burst Reveal for Footer CTA Banner ── */
        gsap.set('.lu-cta', {
          transformStyle: 'preserve-3d',
          transformOrigin: '50% 100%',
          rotationX: 35,
          rotationY: -10,
          scale: 0.85,
          y: 70,
          autoAlpha: 0,
          boxShadow: '0 40px 80px rgba(0,0,0,0.4)',
        });

        gsap.set('.foot-cta-star', { scale: 0, rotation: -180, autoAlpha: 0 });
        gsap.set('.lu-cta-pill', { y: -25, autoAlpha: 0 });
        gsap.set('.lu-cta-heading', { y: 30, rotationX: -40, autoAlpha: 0 });
        gsap.set('.lu-cta-btn', { scale: 0.6, rotationZ: -12, autoAlpha: 0 });
        gsap.set('.lu-columns > *', { y: 40, autoAlpha: 0 });

        const tl = gsap.timeline({
          scrollTrigger: {
            trigger: '.lu-cta-wrap',
            start: 'top 78%',
            once: true,
          },
          defaults: { ease: 'power3.out' },
        });

        /* Phase 1: Card Unfolds from 3D Stack */
        tl.to('.lu-cta', {
          rotationX: 0,
          rotationY: 0,
          scale: 1,
          y: 0,
          autoAlpha: 1,
          boxShadow: '8px 8px 0 0 #0a0a0a',
          duration: 0.85,
          ease: 'back.out(1.5)',
          onComplete: () => {
            gsap.set('.lu-cta', { clearProps: 'transform,transformStyle' });
          },
        })
        /* Phase 2: Pink Star Pops Out from Top Corner */
        .to(
          '.foot-cta-star',
          {
            scale: 1,
            rotation: 0,
            autoAlpha: 1,
            duration: 0.5,
            ease: 'back.out(2)',
          },
          '-=0.4'
        )
        /* Phase 3: Purple Pill Tag Drops Down */
        .to(
          '.lu-cta-pill',
          {
            y: 0,
            autoAlpha: 1,
            duration: 0.4,
            ease: 'back.out(1.8)',
          },
          '-=0.3'
        )
        /* Phase 4: Heading 3D Unrolls */
        .to(
          '.lu-cta-heading',
          {
            y: 0,
            rotationX: 0,
            autoAlpha: 1,
            duration: 0.55,
            ease: 'power4.out',
          },
          '-=0.3'
        )
        /* Phase 5: Yellow Download Button Stamps On */
        .to(
          '.lu-cta-btn',
          {
            scale: 1,
            rotationZ: 0,
            autoAlpha: 1,
            duration: 0.5,
            ease: 'back.out(2.2)',
          },
          '-=0.35'
        )
        /* Phase 6: Footer columns cascade in */
        .to(
          '.lu-columns > *',
          {
            y: 0,
            autoAlpha: 1,
            duration: 0.6,
            stagger: 0.1,
            ease: 'power3.out',
          },
          '-=0.2'
        );
      }
    },
    { scope: rootRef },
  );

  return (
    <>
      <footer ref={rootRef} className="lu-footer font-sora" style={{
        background: '#FFFDF5',
        color: INK,
        position: 'relative',
        overflow: 'hidden',
        margin: '0 var(--sec-gutter) var(--sec-gap)',
        border: `4px solid ${INK}`,
        borderRadius: 28,
        boxShadow: '0 12px 0 0 rgba(0,0,0,0.35)',
      }}>
        {/* ── KINETIC TICKER STRIP ── */}
        <div className="foot-ticker" style={{
          overflow: 'hidden',
          background: '#C8FF37',
          borderBottom: `4px solid ${INK}`,
        }}>
          <div className="foot-ticker-track" style={{ display: 'flex', width: 'max-content', willChange: 'transform' }}>
            {[0, 1].map((half) => (
              <div key={half} aria-hidden={half === 1} style={{ display: 'flex', alignItems: 'center' }}>
                {TICKER.map((t, i) => (
                  <span key={`${half}-${i}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 22, padding: '13px 22px' }}>
                    <span style={{ fontSize: 'clamp(18px, 2.4vw, 30px)', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '-0.01em', color: INK, whiteSpace: 'nowrap' }}>{t}</span>
                    <Star size={20} />
                  </span>
                ))}
              </div>
            ))}
          </div>
        </div>

        {/* ── BIG CTA STICKER CARD (3D Fold-Out Reveal) ── */}
        <div className="lu-cta-wrap" style={{ padding: '56px 48px 40px', perspective: 1200 }}>
          <div className="lu-cta" style={{
            position: 'relative',
            background: BLUE,
            color: '#fff',
            border: `4px solid ${INK}`,
            borderRadius: 24,
            boxShadow: `8px 8px 0 0 ${INK}`,
            padding: '48px 48px',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            flexWrap: 'wrap', gap: 28,
            overflow: 'hidden',
          }}>
            {/* rotating star sticker */}
            <span className="foot-cta-star" aria-hidden style={{ position: 'absolute', top: -20, right: 30, willChange: 'transform' }}>
              <span className="foot-cta-star-spin" style={{ display: 'inline-flex', background: '#FF2E88', border: `3px solid ${INK}`, borderRadius: '50%', padding: 10, boxShadow: `3px 3px 0 0 ${INK}` }}>
                <Star size={22} color="#fff" />
              </span>
            </span>

            <div style={{ maxWidth: 640 }}>
              <span className="lu-cta-pill" style={{ display: 'inline-block', background: '#8B3DFF', color: '#fff', border: `3px solid ${INK}`, borderRadius: 10, padding: '5px 12px', fontSize: 11, fontWeight: 900, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 18, boxShadow: `3px 3px 0 0 ${INK}` }}>
                Earn. Spend. Live More.
              </span>
              <h2 className="lu-cta-heading" style={{ fontSize: 'clamp(32px, 4.8vw, 62px)', fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 0.96, margin: 0 }}>
                Turn everyday moments<br />
                into <span style={{ position: 'relative', display: 'inline-block', color: '#FF2E88' }}>
                  real value.
                  <span aria-hidden style={{ position: 'absolute', left: 0, right: 0, bottom: 4, height: 6, background: '#C8FF37', zIndex: -1, borderRadius: 4 }} />
                </span>
              </h2>
            </div>

            <Link href="#how-it-works" className="lu-cta-btn" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '18px 36px', background: '#FFC72C', color: INK,
              fontSize: 17, fontWeight: 900, textTransform: 'uppercase', letterSpacing: '0.03em',
              border: `4px solid ${INK}`, borderRadius: 16, textDecoration: 'none',
              boxShadow: `5px 5px 0 0 ${INK}`, whiteSpace: 'nowrap',
              transition: 'transform 0.12s ease, box-shadow 0.12s ease',
            }}>
              Download Now
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </Link>
          </div>
        </div>

        {/* ── COLUMNS ── */}
        <div className="lu-columns" style={{
          display: 'grid',
          gridTemplateColumns: '1.6fr 1fr 1fr 1fr',
          gap: 40, padding: '24px 48px 36px',
          alignItems: 'start',
        }}>
          {/* Brand */}
          <div className="lu-brand" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
            <Link href="#intro" aria-label="LytsUp home" style={{
              display: 'inline-flex', marginBottom: 22, textDecoration: 'none',
            }}>
              <Image src="/images/lytsup_app.png" alt="LytsUp" width={2048} height={554} style={{ height: 52, width: 'auto', display: 'block' }} />
            </Link>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(10,10,10,0.6)', margin: '0 0 24px', maxWidth: 300 }}>
              Offline shopping. Online intelligence.
            </p>
            <div style={{ display: 'flex', gap: 12 }}>
              {SOCIALS.map(({ label, href, icon, bg }) => (
                <a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label}
                  className="lu-social"
                  style={{
                    width: 42, height: 42, borderRadius: 12,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    background: bg, color: '#fff', border: `3px solid ${INK}`,
                    boxShadow: `3px 3px 0 0 ${INK}`,
                    transition: 'transform 0.12s ease, box-shadow 0.12s ease',
                  }}
                >{icon}</a>
              ))}
            </div>
          </div>

          {/* Nav columns */}
          {NAV.map(col => (
            <nav key={col.title} className="lu-nav" aria-label={col.title}>
              <h4 style={{ display: 'inline-block', margin: '0 0 18px', fontSize: 12, fontWeight: 900, letterSpacing: '0.08em', textTransform: 'uppercase', color: INK, background: col.color, border: `2px solid ${INK}`, borderRadius: 8, padding: '4px 10px', boxShadow: `2px 2px 0 0 ${INK}` }}>
                {col.title}
              </h4>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {col.links.map(({ label, href }) => (
                  <li key={label}>
                    <Link href={href} className="lu-link" style={{ textDecoration: 'none', fontSize: 15, color: 'rgba(10,10,10,0.62)', fontWeight: 600, transition: 'color 0.15s, transform 0.15s', display: 'inline-block' }}
                      onMouseEnter={e => { const el = e.currentTarget as HTMLElement; el.style.color = INK; el.style.transform = 'translateX(4px)'; }}
                      onMouseLeave={e => { const el = e.currentTarget as HTMLElement; el.style.color = 'rgba(10,10,10,0.62)'; el.style.transform = 'translateX(0)'; }}
                    >{label}</Link>
                  </li>
                ))}
              </ul>
            </nav>
          ))}
        </div>

        {/* ── BOTTOM BAR ── */}
        <div className="lu-bottom" style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 14,
          padding: '18px 48px 30px',
          borderTop: '2px dashed rgba(10,10,10,0.2)',
          fontSize: 13, color: 'rgba(10,10,10,0.55)',
        }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 600 }}>
            © {new Date().getFullYear()} LytsUp. Made with
            <Ico e="♥" size={14} /> for Gen Z.
          </span>
          <div style={{ display: 'flex', gap: 20 }}>
            {[['Terms', '#'], ['Privacy', '#'], ['Cookies', '#']].map(([l, h]) => (
              <Link key={l} href={h} style={{ textDecoration: 'none', color: 'inherit', fontWeight: 600, transition: 'color 0.15s' }}
                onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = INK)}
                onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = 'rgba(10,10,10,0.55)')}
              >{l}</Link>
            ))}
          </div>
        </div>

        <style>{`
          .lu-cta-btn:hover, .lu-social:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 ${INK} !important; }
          .lu-cta-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 0 ${INK} !important; }
          @media (max-width: 900px) {
            .lu-footer { margin: 0 12px 12px; border-radius: 22px; }
            .lu-cta-wrap { padding: 32px 20px 24px !important; }
            .lu-cta { padding: 32px 26px !important; align-items: flex-start !important; }
            .lu-cta-btn { width: 100%; justify-content: center; }
            .lu-columns { grid-template-columns: 1fr 1fr !important; gap: 32px 24px !important; padding: 16px 24px 28px !important; }
            .lu-brand { grid-column: 1 / -1; }
            .lu-bottom { padding: 18px 24px 26px !important; flex-direction: column !important; align-items: flex-start !important; }
          }
          @media (max-width: 520px) {
            .lu-columns { grid-template-columns: 1fr !important; }
            .lu-cta-heading { font-size: clamp(26px, 8vw, 40px) !important; }
          }
        `}</style>
      </footer>

      {/* Scroll-to-top — neobrutalist */}
      <style>{`
        @keyframes luBounce { 0%,100% { transform: translateY(0);} 40% { transform: translateY(-4px);} 60% { transform: translateY(-2px);} }
        .lu-stt:hover { transform: translate(-2px,-2px) !important; box-shadow: 6px 6px 0 0 ${INK} !important; }
        .lu-stt:active { transform: translate(1px,1px) !important; box-shadow: 1px 1px 0 0 ${INK} !important; }
        .lu-stt-arrow { animation: luBounce 1.5s ease-in-out infinite; }
      `}</style>
      <button
        onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
        aria-label="Scroll to top"
        className="lu-stt"
        style={{
          position: 'fixed', bottom: 28, right: 28, zIndex: 9999,
          width: 60, height: 60, borderRadius: 16,
          background: '#FFC72C', color: INK, border: `3px solid ${INK}`,
          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: `4px 4px 0 0 ${INK}`,
          opacity: showScroll ? 1 : 0,
          transform: showScroll ? 'translateY(0)' : 'translateY(16px)',
          pointerEvents: showScroll ? 'auto' : 'none',
          transition: 'opacity 0.25s ease, transform 0.15s ease, box-shadow 0.15s ease',
        }}
      >
        <span className="lu-stt-arrow" style={{ display: 'flex' }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
        </span>
      </button>
    </>
  );
}
