'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';

const NAV = [
  {
    title: 'Product',
    links: [
      { label: 'For People', href: '/for_people' },
      { label: 'For Business', href: '/use_cases' },
      { label: 'Meet the Agents', href: '/solutions_page' },
    ],
  },
  {
    title: 'Platform',
    links: [
      { label: 'Behavision AI', href: '/use_cases' },
      { label: 'SpendSense AI', href: '/use_cases' },
      { label: 'Dyscount AI', href: '/use_cases' },
    ],
  },
  {
    title: 'Company',
    links: [
      { label: 'About us', href: '/about_us' },
      { label: 'Market Insights', href: '/blog_main' },
      { label: 'Contact Us', href: '/contacts' },
    ],
  },
];

const SOCIALS = [
  {
    label: 'LinkedIn', href: 'https://www.linkedin.com/company/loyaly-ai',
    icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M19.7 3H4.3C3.58 3 3 3.58 3 4.3v15.4C3 20.42 3.58 21 4.3 21h15.4c.72 0 1.3-.58 1.3-1.3V4.3C21 3.58 20.42 3 19.7 3zM8.34 18.34H5.67V9.75h2.67v8.59zM7 8.57a1.55 1.55 0 1 1 0-3.1 1.55 1.55 0 0 1 0 3.1zm11.34 9.77h-2.67v-4.18c0-1-.02-2.28-1.39-2.28-1.39 0-1.6 1.09-1.6 2.21v4.25h-2.67V9.75h2.56v1.17h.04c.36-.68 1.23-1.39 2.53-1.39 2.7 0 3.2 1.78 3.2 4.09v4.72z"/></svg>,
  },
  {
    label: 'X / Twitter', href: 'https://twitter.com/loyalyai',
    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: 'Instagram', href: 'https://instagram.com/loyalyai',
    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 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>,
  },
  {
    label: 'YouTube', href: 'https://www.youtube.com/@loyalyai',
    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>,
  },
];

export default function Footer() {
  const [showScroll, setShowScroll] = useState(false);

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

  return (
    <>
      <footer className="ly-footer" style={{
        background: 'linear-gradient(to top, #3a2800 0%, #1e1600 18%, #0e0b04 36%, #07070d 58%)',
        color: '#ffffff',
        position: 'relative',
        overflow: 'hidden',
        margin: '0 20px 20px',
        borderRadius: '0 0 24px 24px',
      }}>

        {/* ── TOP CTA STRIP ── */}
        <div className="ly-footer-cta" style={{
          padding: '72px 64px 64px',
          borderBottom: '1px solid rgba(255,255,255,0.06)',
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 32,
          position: 'relative',
        }}>

          <div style={{ maxWidth: 600 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 20, display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 24, height: 1, background: '#f4be28', display: 'block' }} />Let's build together
            </div>
            <h2 className="ly-footer-heading" style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: 0, fontFamily: 'Sora, sans-serif' }}>
              Turn every visit<br />
              <span style={{ color: '#f4be28' }}>into value.</span>
            </h2>
          </div>

          <div className="ly-footer-cta-actions" style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-end' }}>
            <Link href="/contacts" className="ly-footer-cta-btn" style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              padding: '18px 40px', background: '#f4be28', color: '#111',
              fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none',
              fontFamily: 'Sora, sans-serif', boxShadow: '0 16px 48px rgba(244,190,40,0.25)',
              whiteSpace: 'nowrap',
            }}>
              Book a Demo
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </Link>
            <Link href="/contacts" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontSize: 14, fontWeight: 600, color: 'rgba(255,255,255,0.45)',
              textDecoration: 'none', fontFamily: 'Sora, sans-serif',
              borderBottom: '1px solid rgba(255,255,255,0.15)', paddingBottom: 2,
            }}>
              or talk to sales →
            </Link>
          </div>
        </div>

        {/* ── MAIN COLUMNS ── */}
        <div className="ly-footer-columns" style={{
          display: 'grid',
          gridTemplateColumns: '1.6fr 1fr 1fr 1fr',
          gap: '48px', padding: '64px 64px 48px',
          alignItems: 'start',
        }}>
          {/* Brand */}
          <div className="ly-footer-brand" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
            <Link href="/" aria-label="Loyaly.AI home" style={{ display: 'block', maxWidth: '100%', marginBottom: 18 }}>
              {/* logo-dark.png is 250x150 with the wordmark in the middle strip (y 58–107);
                  an overflow box crops the transparent top/bottom padding so it fills at size */}
              <span className="ly-footer-logo" style={{ display: 'block', width: 300, maxWidth: '100%', aspectRatio: '250 / 58', overflow: 'hidden' }}>
                <Image src="/assets/images/logo-dark.png" alt="Loyaly.AI" width={250} height={150} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 55%', display: 'block' }} />
              </span>
            </Link>
            <p style={{ fontSize: 14, lineHeight: 1.75, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif', margin: '0 0 28px', maxWidth: 280 }}>
              Offline shopping. Online intelligence.
            </p>
            <div style={{ display: 'flex', gap: 10 }}>
              {SOCIALS.map(({ label, href, icon }) => (
                <a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label}
                  style={{
                    width: 38, height: 38, borderRadius: 10,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.08)',
                    color: 'rgba(255,255,255,0.5)',
                    transition: 'all 0.2s ease',
                  }}
                  onMouseEnter={e => { const el = e.currentTarget as HTMLElement; el.style.background = 'rgba(244,190,40,0.12)'; el.style.borderColor = 'rgba(244,190,40,0.3)'; el.style.color = '#f4be28'; }}
                  onMouseLeave={e => { const el = e.currentTarget as HTMLElement; el.style.background = 'rgba(255,255,255,0.05)'; el.style.borderColor = 'rgba(255,255,255,0.08)'; el.style.color = 'rgba(255,255,255,0.5)'; }}
                >{icon}</a>
              ))}
            </div>
          </div>

          {/* Nav columns */}
          {NAV.map(col => (
            <nav key={col.title} className="ly-footer-nav" aria-label={col.title}>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.links.map(({ label, href }) => (
                  <li key={label}>
                    <Link href={href} style={{ textDecoration: 'none', fontSize: 15, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif', transition: 'color 0.2s', fontWeight: 500 }}
                      onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = '#ffffff')}
                      onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = 'rgba(255,255,255,0.5)')}
                    >{label}</Link>
                  </li>
                ))}
              </ul>
            </nav>
          ))}
        </div>

        {/* ── BOTTOM BAR ── */}
        <div className="ly-footer-bottom" style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 12,
          padding: '20px 64px 36px',
          borderTop: '1px solid rgba(255,255,255,0.05)',
          fontSize: 13, color: 'rgba(255,255,255,0.25)', fontFamily: 'Sora, sans-serif',
        }}>
          <span>© {new Date().getFullYear()} Loyaly.AI. All rights reserved.</span>
          <div style={{ display: 'flex', gap: 24 }}>
            {[['Terms', '/terms'], ['Privacy', '/privacy'], ['Cookies', '/cookies']].map(([l, h]) => (
              <Link key={l} href={h} style={{ textDecoration: 'none', color: 'inherit', transition: 'color 0.2s' }}
                onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = 'rgba(255,255,255,0.6)')}
                onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = 'rgba(255,255,255,0.25)')}
              >{l}</Link>
            ))}
          </div>
        </div>

        <style>{`
          @media (max-width: 900px) {
            .ly-footer { margin: 0 12px 12px; border-radius: 0 0 20px 20px; }
            .ly-footer-cta { padding: 48px 28px 40px !important; align-items: flex-start !important; }
            .ly-footer-cta-actions { align-items: flex-start !important; width: 100%; }
            .ly-footer-cta-btn { width: 100%; padding: 16px 28px !important; }
            .ly-footer-columns { grid-template-columns: 1fr 1fr !important; gap: 36px 24px !important; padding: 48px 28px 36px !important; }
            .ly-footer-brand { grid-column: 1 / -1; }
            .ly-footer-bottom { padding: 20px 28px 28px !important; flex-direction: column !important; align-items: flex-start !important; }
          }
          @media (max-width: 560px) {
            .ly-footer-heading { font-size: clamp(30px, 9vw, 44px) !important; }
            .ly-footer-columns { grid-template-columns: 1fr !important; gap: 32px !important; }
            .ly-footer-logo { width: 260px !important; }
            .ly-footer-bottom { gap: 16px !important; }
            .ly-footer-bottom > div { gap: 18px !important; }
          }
        `}</style>
      </footer>

      {/* Scroll-to-top */}
      <style>{`
        @keyframes sttPulseRing {
          0% { transform: scale(1); opacity: 0.6; }
          70% { transform: scale(1.55); opacity: 0; }
          100% { transform: scale(1.55); opacity: 0; }
        }
        @keyframes sttBounceArrow {
          0%, 100% { transform: translateY(0); }
          40% { transform: translateY(-5px); }
          60% { transform: translateY(-2px); }
        }
        .stt-btn:hover { transform: scale(1.1) !important; box-shadow: 0 8px 32px rgba(244,190,40,0.65) !important; }
        .stt-arrow { animation: sttBounceArrow 1.6s ease-in-out infinite; }
      `}</style>

      <div style={{
        position: 'fixed', bottom: 32, right: 32, zIndex: 9999,
        opacity: showScroll ? 1 : 0,
        transform: showScroll ? 'translateY(0)' : 'translateY(16px)',
        transition: 'opacity 0.3s ease, transform 0.3s ease',
        pointerEvents: showScroll ? 'auto' : 'none',
      }}>
        {/* Pulse ring */}
        <span style={{
          position: 'absolute', inset: 0, borderRadius: '50%',
          background: 'rgba(244,190,40,0.45)',
          animation: 'sttPulseRing 2s cubic-bezier(0.215,0.61,0.355,1) infinite',
          pointerEvents: 'none',
        }} />
        <button
          onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
          aria-label="Scroll to top"
          className="stt-btn"
          style={{
            position: 'relative',
            width: 64, height: 64, borderRadius: '50%',
            background: '#f4be28', color: '#111', border: 'none',
            cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 4px 20px rgba(244,190,40,0.4)',
            transition: 'transform 0.25s ease, box-shadow 0.25s ease',
          }}
        >
          <span className="stt-arrow" style={{ display: 'flex' }}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 19V5M5 12l7-7 7 7"/>
            </svg>
          </span>
        </button>
      </div>
    </>
  );
}
