'use client';

import React, { useRef, useEffect } from 'react';
import Link from 'next/link';

function useMagnetic() {
  const ref = useRef<HTMLAnchorElement | null>(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onMove = (e: MouseEvent) => {
      const r = el.getBoundingClientRect();
      el.style.transform = `translate(${((e.clientX - r.left) / r.width - 0.5) * 18}px,${((e.clientY - r.top) / r.height - 0.5) * 18}px) scale(1.04)`;
    };
    const onLeave = () => { el.style.transform = 'translate(0,0) scale(1)'; };
    el.addEventListener('mousemove', onMove);
    el.addEventListener('mouseleave', onLeave);
    return () => { el.removeEventListener('mousemove', onMove); el.removeEventListener('mouseleave', onLeave); };
  }, []);
  return ref;
}

const proof = [
  { val: '50K+',  label: 'Active users',   color: '#f4be28' },
  { val: '10K+',  label: 'Partner stores', color: '#16a34a' },
  { val: '₹28L+', label: 'Rewards given',  color: '#2563eb' },
  { val: '4.9★',  label: 'App rating',     color: '#9333ea' },
];

export default function FinalCTASection() {
  const mag1 = useMagnetic();
  const mag2 = useMagnetic();

  return (
    <section className="fp-panel fp-light" style={{ background: '#ffffff', textAlign: 'center' }}>

      {/* Vivid background shape */}
      <div className="fp-deco" style={{
        position: 'absolute', top: '-10%', left: '50%', transform: 'translateX(-50%)',
        width: '70%', height: '60%', borderRadius: '50%',
        background: 'radial-gradient(ellipse, rgba(244,190,40,0.12) 0%, transparent 70%)',
        zIndex: 0, filter: 'blur(50px)',
      }} />
      <div className="fp-deco" style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, textAlign: 'center', zIndex: 0, overflow: 'hidden',
      }}>
        <span style={{
          fontSize: 'clamp(130px, 24vw, 340px)', fontWeight: 900, fontFamily: 'Sora, sans-serif',
          color: 'transparent', WebkitTextStroke: '1.5px rgba(244,190,40,0.15)', letterSpacing: '-0.06em', lineHeight: 1, display: 'block',
        }}>LOYALY</span>
      </div>

      <div className="fp-shell" style={{ maxWidth: 760 }}>

        {/* Live badge */}
        <div className="fp-rise" style={{
          display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 32,
          background: '#f0fdf4', border: '1.5px solid #16a34a', borderRadius: 100, padding: '10px 22px',
        }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#16a34a', display: 'block', animation: 'fpPulse 1.5s infinite', boxShadow: '0 0 0 3px rgba(22,163,74,0.2)' }} />
          <span style={{ fontSize: 13, fontWeight: 700, color: '#16a34a', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.06em' }}>
            Now live in Coimbatore
          </span>
        </div>

        {/* Headline */}
        <h2 style={{
          fontSize: 'clamp(48px, 7.5vw, 112px)', fontWeight: 900, letterSpacing: '-0.06em', lineHeight: 0.92,
          color: '#171512', margin: '0 0 28px', fontFamily: 'Sora, sans-serif',
        }}>
          <span className="fp-mask"><span>Your rewards</span></span>
          <span className="fp-mask"><span className="fp-shimmer">are waiting.</span></span>
        </h2>

        <p className="fp-rise" style={{
          fontSize: 18, lineHeight: 1.7, color: '#4f463a', fontFamily: 'Manrope, sans-serif',
          maxWidth: 460, margin: '0 auto 48px', transitionDelay: '0.1s',
        }}>
          Download Loyaly and start earning on your very next purchase. Free. Instant. Yours.
        </p>

        {/* CTAs */}
        <div className="fp-rise" style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 56, transitionDelay: '0.2s' }}>
          <Link href="/contacts" ref={mag1} className="fp-btn fp-btn-primary">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
            Download for iOS
          </Link>
          <Link href="/contacts" ref={mag2} className="fp-btn" style={{
            padding: '17px 34px', background: '#171512', color: '#fff',
            border: 'none', borderRadius: 100,
            transition: 'all 0.35s cubic-bezier(0.34,1.56,0.64,1)',
          }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="2" y="8" width="20" height="10" rx="2"/><path d="M7.83 3l1.3 2.35M16.17 3l-1.3 2.35"/></svg>
            Get on Android
          </Link>
        </div>

        {/* Proof stats — colored chips */}
        <div className="fp-rise" style={{
          display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap', transitionDelay: '0.3s',
        }}>
          {proof.map((p, i) => (
            <div key={i} style={{
              padding: '16px 24px', borderRadius: 18, textAlign: 'center',
              background: `${p.color}0f`, border: `2px solid ${p.color}`,
              minWidth: 110,
            }}>
              <div style={{ fontSize: 'clamp(20px, 2.5vw, 28px)', fontWeight: 900, color: p.color, fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em' }}>{p.val}</div>
              <div style={{ fontSize: 11, color: 'rgba(23,21,18,0.55)', fontFamily: 'Manrope, sans-serif', marginTop: 5, letterSpacing: '0.04em' }}>{p.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}