'use client';

import React, { useRef, useEffect } from 'react';
import Image from 'next/image';

function useMagnetic<T extends HTMLElement>(strength = 12) {
  const ref = useRef<T | null>(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onMove = (e: MouseEvent) => {
      const rect = el.getBoundingClientRect();
      const x = ((e.clientX - rect.left) / rect.width - 0.5) * strength * 2;
      const y = ((e.clientY - rect.top) / rect.height - 0.5) * strength * 2;
      el.style.transform = `translate(${x}px, ${y}px)`;
    };
    const onLeave = () => { el.style.transform = 'translate(0,0)'; };
    el.addEventListener('mousemove', onMove);
    el.addEventListener('mouseleave', onLeave);
    return () => {
      el.removeEventListener('mousemove', onMove);
      el.removeEventListener('mouseleave', onLeave);
    };
  }, [strength]);
  return ref;
}

export default function HeroSection() {
  const magSecondary = useMagnetic<HTMLButtonElement>(8);

  return (
    <section className="fp-panel" style={{ background: 'radial-gradient(ellipse 100% 85% at 78% 30%, #3a2b66 0%, #2a2150 45%, #1c1838 100%)' }}>

      {/* Background photo */}
      <Image src="/assets/images/stock/app-hero.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9, zIndex: 0 }} />
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 90% 80% at 78% 42%, rgba(58,43,102,0.15) 0%, rgba(42,33,80,0.35) 55%, rgba(28,24,56,0.55) 100%)', zIndex: 0 }} />
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 55% 65% at 30% 48%, rgba(18,14,30,0.7) 0%, rgba(18,14,30,0.3) 60%, transparent 100%)', zIndex: 0 }} />

      {/* Ambient orbs + grid */}
      <div className="fp-deco" style={{ position: 'absolute', inset: 0, zIndex: 0 }}>
        <div style={{
          position: 'absolute', top: '14%', left: '58%', width: 460, height: 460, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(244,190,40,0.13) 0%, transparent 70%)', animation: 'fpOrbFloat 7s ease-in-out infinite',
        }} />
        <div style={{
          position: 'absolute', bottom: '8%', right: '6%', width: 280, height: 280, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(130,88,200,0.18) 0%, transparent 70%)', animation: 'fpOrb2Float 9s ease-in-out infinite',
        }} />
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px)',
          backgroundSize: '80px 80px', maskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 80%)',
          WebkitMaskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 80%)',
        }} />
      </div>

      <div className="fp-shell">
        <div className="fp-split" style={{ gridTemplateColumns: '1fr', justifyItems: 'center', textAlign: 'center' }}>

          {/* Text column */}
          <div style={{ maxWidth: 720 }}>
            <h1 className="fp-headline" style={{
              fontSize: 'clamp(40px, 5.4vw, 82px)', fontWeight: 800, lineHeight: 1.02,
              letterSpacing: '-0.045em', color: '#fff', margin: '50px 0 28px', fontFamily: 'Sora, sans-serif',
            }}>
              <span className="fp-mask"><span>Earn LYTs.</span></span>
              <span className="fp-mask"><span className="fp-shimmer">Lit Yourself.</span></span>
            </h1>

            <p className="fp-content fp-subtext" style={{
              fontSize: 'clamp(16px, 1.4vw, 19px)', lineHeight: 1.7, fontWeight: 400,
              color: 'rgba(255,255,255,0.6)', maxWidth: 640, margin: '0 auto 16px', fontFamily: 'Sora, sans-serif',
            }}>
              Every purchase unlocks more than points. Earn <strong>LYTs</strong>, discover experiences, and make every shopping trip count.
            </p>

            <p className="fp-content fp-subtext" style={{
              fontSize: 'clamp(14px, 1.2vw, 16px)', lineHeight: 1.7, fontWeight: 400,
              color: 'rgba(255,255,255,0.45)', maxWidth: 560, margin: '0 auto 40px', fontFamily: 'Sora, sans-serif',
            }}>
              Shop nearby, collect LYTs, unlock exclusive drops, and become part of a living ecosystem designed around you.
            </p>

            <div className="fp-content fp-cta" style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center' }}>
              <button className="fp-btn fp-btn-primary">
                Start Earning LYTs
              </button>
              <button
                ref={magSecondary}
                className="fp-btn fp-btn-ghost fp-magnetic"
              >
                Explore Nearby
              </button>
            </div>

            {/* LYT Quick Facts */}
            <div className="fp-content fp-cta" style={{
              display: 'flex',
              gap: 16,
              justifyContent: 'center',
              flexWrap: 'wrap',
              margin: '36px auto 0',
              maxWidth: 600,
            }}>
              {[
                { val: '10+ Ways', label: 'To earn Lyts' },
                { val: 'Instant Spend', label: 'No delay at checkout' },
                { val: '10,000+', label: 'Partner brands' }
              ].map((item, idx) => (
                <div key={idx} style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                  fontSize: 13,
                  fontFamily: 'Sora, sans-serif',
                  background: 'rgba(255, 255, 255, 0.03)',
                  border: '1px solid rgba(244, 190, 40, 0.22)',
                  padding: '8px 16px',
                  borderRadius: '100px',
                  backdropFilter: 'blur(8px)',
                }}>
                  <span style={{ color: '#f4be28', fontWeight: 800 }}>{item.val}</span>
                  <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'rgba(255,255,255,0.25)' }} />
                  <span style={{ color: 'rgba(255,255,255,0.5)', fontSize: 11.5 }}>{item.label}</span>
                </div>
              ))}
            </div>

            {/* Trust row */}
            <div className="fp-content fp-cta" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, marginTop: 32 }}>
              <div style={{ display: 'flex' }}>
                {['#f4be28', '#4ade80', '#a855f7', '#3b82f6'].map((c, i) => (
                  <div key={i} style={{ width: 30, height: 30, borderRadius: '50%', background: c, border: '2px solid #0a0a12', marginLeft: i > 0 ? -9 : 0, opacity: 0.9 }} />
                ))}
              </div>
              <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.42)', fontFamily: 'Sora, sans-serif' }}>
                <strong style={{ color: 'rgba(255,255,255,0.75)', fontWeight: 700 }}>50,000+</strong> Lytians earning and living more, every day
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Scroll hint */}
      <div style={{
        position: 'absolute', bottom: 38, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, zIndex: 10,
        color: 'rgba(255,255,255,0.3)', fontSize: 10, fontFamily: 'Sora, sans-serif', letterSpacing: '0.16em', textTransform: 'uppercase',
      }}>
        <span>Scroll</span>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ animation: 'fpScrollHint 1.6s ease-in-out infinite' }}>
          <polyline points="6 9 12 15 18 9" />
        </svg>
      </div>
    </section>
  );
}