'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import GSAPAnimator from '@/components/GSAPAnimator';
import { useReveal } from '@/hooks/useReveal';
import ScrollStack, { ScrollStackItem } from '@/components/ScrollStack';

function RevealBlock({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
  const { ref, visible } = useReveal();
  return (
    <div ref={ref} style={{
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(52px)',
      transition: `opacity 0.9s cubic-bezier(0.22,1,0.36,1) ${delay}s, transform 0.9s cubic-bezier(0.22,1,0.36,1) ${delay}s`,
    }}>{children}</div>
  );
}

const PRODUCTS = [
  {
    n: '01', title: 'Behavision', subtitle: 'AI Powered Footfall Analytics', color: '#f4be28',
    desc: 'AI powered footfall analytics and behavioral intelligence for physical retail. Behavision turns every camera and sensor you already have into a live map of how customers move, where they linger, and what makes them walk away, so store layout and staffing decisions are based on evidence, not guesswork.',
    capabilities: [
      'Real-time footfall counting, accurate to 98% across every entry point',
      'Dwell-time and zone heatmaps that show exactly where attention concentrates',
      'Entry-to-purchase funnel tracking that flags where shoppers drop off',
    ],
    metric: { val: '3.2×', lbl: 'conversion uplift' },
    tags: ['Footfall Tracking', 'Heatmaps', 'Behavior Analysis'],
  },
  {
    n: '02', title: 'SpendSense', subtitle: 'Customer Spending Intelligence', color: '#10B981',
    desc: 'Deep, continuously updating intelligence on how your customers spend. SpendSense studies basket size, purchase frequency, and category preferences across every visit, surfacing the high-value segments and the early warning signs of churn well before a customer stops coming back.',
    capabilities: [
      'Automatic customer segmentation by spend, frequency, and loyalty tier',
      'Predictive churn scoring that flags at-risk high-value shoppers early',
      'Revenue opportunity alerts triggered by shifting basket-size trends',
    ],
    metric: { val: '68%', lbl: 'retention improvement' },
    tags: ['Spending Trends', 'Revenue Analytics', 'Customer Value'],
  },
  {
    n: '03', title: 'Dyscount', subtitle: 'Smart Discount Engine', color: '#EF4444',
    desc: 'A discount engine that treats margin as a budget, not an afterthought. Dyscount decides who gets an offer, how deep it goes, and when it fires, targeting the customers most likely to convert while capping every discount so promotions never quietly eat into profit.',
    capabilities: [
      'Dynamic offer targeting based on real-time purchase intent signals',
      'Margin-safe discount caps enforced per product, category, or campaign',
      'A/B tested offer formats that keep conversion up without overspending',
    ],
    metric: { val: '41%', lbl: 'discount waste reduced' },
    tags: ['Smart Discounts', 'Offer Automation', 'Margin Protection'],
  },
  {
    n: '04', title: 'Identiq', subtitle: 'Consumer Loyalty Platform', color: '#f4be28',
    desc: 'The consumer-facing app that closes the loop. Identiq turns daily logins, walking challenges, and quick mini-games into LYTs, Loyaly’s reward tokens, redeemable instantly at any partner store, so every idle moment on a phone becomes a reason to walk into a real one.',
    capabilities: [
      'Daily login and step-challenge rewards that build a lasting habit loop',
      'Game based offers like Spin Wheel, Scratch Card, and Maze Challenge',
      'Instant offline redemption at any partner store, no card required',
    ],
    metric: { val: '50K+', lbl: 'active shoppers' },
    tags: ['Daily Rewards', 'Game Based Offers', 'Offline Redemption'],
  },
];

const CAPS = [
  {
    n: '01', title: 'Merchant Campaign Platform', color: '#f4be28',
    desc: 'Register your store, upload products and inventory, then launch interactive promotional campaigns in minutes. Define maximum discounts per product and track performance in real time.',
    metrics: [{ val: '5+', lbl: 'Game formats' }, { val: '1-click', lbl: 'Campaign setup' }],
  },
  {
    n: '02', title: 'Game Based Discount Engine', color: '#a78bfa',
    desc: 'Select a product, choose a game (Maze, Spin Wheel, Scratch Card, or Match Master) and set a maximum discount. Customers play once and discover their reward only after completing the game.',
    metrics: [{ val: '4×', lbl: 'Engagement lift' }, { val: '100%', lbl: 'Margin controlled' }],
  },
  {
    n: '03', title: 'Smart Coupon System', color: '#34d399',
    desc: 'Generate daily surprise coupons through the Battery Challenge and other activities. Offer flat discounts, BOGO, percentage-off deals, festival specials, and brand promotions, fresh every day.',
    metrics: [{ val: '6', lbl: 'Coupon types' }, { val: 'Daily', lbl: 'Fresh surprises' }],
  },
  {
    n: '04', title: 'Footfall & Campaign Analytics', color: '#f97316',
    desc: 'Track which campaigns drove store visits, measure conversion rates, monitor repeat footfall, and optimize your promotional budget with a real-time analytics dashboard.',
    metrics: [{ val: '98%', lbl: 'Count accuracy' }, { val: '<9ms', lbl: 'Real-time latency' }],
  },
];

export default function SolutionsPage() {
  const [hovered, setHovered] = useState<number | null>(null);

  return (
    <main style={{ background: '#ffffff', minHeight: '100vh', overflowX: 'hidden' }}>
      <GSAPAnimator />

      {/* ── HERO ── */}
      <section style={{
        minHeight: '92vh', background: 'radial-gradient(ellipse 120% 90% at 70% 0%, #2c2350 0%, #211c3e 38%, #181429 100%)',
        display: 'flex', alignItems: 'center',
        padding: '120px 8% 100px',
        margin: '20px', borderRadius: '32px',
        position: 'relative', overflow: 'hidden',
      }}>
        {/* Background photo */}
        <Image src="/images/stock/solutions.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(24,20,41,0.1) 0%, rgba(24,20,41,0.55) 85%)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 65% at 50% 48%, rgba(18,14,30,0.78) 0%, rgba(18,14,30,0.35) 60%, transparent 100%)' }} />
        {/* Accent blobs */}
        <div style={{ position: 'absolute', top: '-12%', left: '4%', width: 480, height: 480, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.2) 0%, transparent 70%)', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', bottom: '-14%', right: '0%', width: 440, height: 440, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
        {/* Animated rings */}
        {[600, 900, 1200].map((s, i) => (
          <div key={i} style={{
            position: 'absolute', top: '50%', right: '-10%',
            width: s, height: s, borderRadius: '50%',
            border: '1px solid rgba(244,190,40,0.07)',
            transform: 'translateY(-50%)',
            pointerEvents: 'none',
          }} />
        ))}

        <div style={{ width: '100%', position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
          <div style={{ maxWidth: 760 }}>
            <h1 data-gsap="heading" style={{ fontSize: 'clamp(52px, 8.5vw, 130px)', fontWeight: 800, letterSpacing: '-0.05em', lineHeight: 0.88, color: '#fff', margin: '0 0 36px', fontFamily: 'Sora, sans-serif' }}>
              Built for<br />Modern<br />
              <span style={{ color: '#f4be28' }}>Retail Growth.</span>
            </h1>
            <p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.6vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', maxWidth: 540, margin: '0 auto 52px' }}>
              Instead of waiting for customers to walk in, create exciting reasons for them to come, with game based campaigns, smart coupons, and a loyalty ecosystem that rewards every visit.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' }}>
              <Link href="/contacts" style={{ 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)' }}>Explore Solutions →</Link>
              <Link href="/contacts" style={{ padding: '18px 40px', background: 'rgba(255,255,255,0.06)', color: '#fff', fontSize: 16, fontWeight: 700, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, sans-serif', border: '1px solid rgba(255,255,255,0.12)', backdropFilter: 'blur(12px)' }}>Book Demo</Link>
            </div>
          </div>
        </div>
      </section>

      {/* ── CAPABILITIES ── */}
      <section style={{ padding: '140px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
        <RevealBlock>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 80, flexWrap: 'wrap', gap: 24 }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 16 }}>Capabilities</div>
              <h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: 0, fontFamily: 'Sora, sans-serif' }}>
                Four tools.<br />One merchant platform.
              </h2>
            </div>
            <p style={{ fontSize: 16, color: 'rgba(0,0,0,0.45)', fontFamily: 'Sora, sans-serif', maxWidth: 360, lineHeight: 1.7 }}>
              Every tool works independently and amplifies the others, giving merchants a complete system to attract, engage, and retain customers.
            </p>
          </div>
        </RevealBlock>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {CAPS.map((cap, i) => (
            <RevealBlock key={i} delay={i * 0.08}>
              <div
                onMouseEnter={() => setHovered(i)}
                onMouseLeave={() => setHovered(null)}
                className="sp-cap-row"
                style={{
                  display: 'grid', gridTemplateColumns: '80px 1fr 1fr auto',
                  alignItems: 'center', gap: '4vw',
                  padding: '40px 0',
                  borderBottom: '1px solid rgba(0,0,0,0.07)',
                  cursor: 'default',
                  transition: 'all 0.3s ease',
                }}
              >
                <span style={{ fontSize: 13, fontWeight: 700, color: hovered === i ? cap.color : 'rgba(0,0,0,0.2)', fontFamily: 'Sora, sans-serif', letterSpacing: '0.06em', transition: 'color 0.3s' }}>{cap.n}</span>
                <h3 style={{ fontSize: 'clamp(22px, 2.8vw, 40px)', fontWeight: 800, color: hovered === i ? '#0a0a0f' : 'rgba(0,0,0,0.8)', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em', margin: 0, transition: 'color 0.3s' }}>{cap.title}</h3>
                <p style={{ fontSize: 15, color: 'rgba(0,0,0,0.45)', fontFamily: 'Sora, sans-serif', margin: 0, lineHeight: 1.6, maxWidth: 340 }}>{cap.desc}</p>
                <div style={{ display: 'flex', gap: 28 }}>
                  {cap.metrics.map((m, j) => (
                    <div key={j} style={{ textAlign: 'right' }}>
                      <div style={{ fontSize: 22, fontWeight: 900, color: cap.color, fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em' }}>{m.val}</div>
                      <div style={{ fontSize: 11, color: 'rgba(0,0,0,0.35)', fontFamily: 'Sora, sans-serif', marginTop: 3 }}>{m.lbl}</div>
                    </div>
                  ))}
                </div>
              </div>
            </RevealBlock>
          ))}
        </div>
      </section>

      {/* ── OUR PRODUCTS ── */}
      <section style={{ padding: '140px 8%', background: '#07070d', margin: '0 20px 20px', borderRadius: 24, overflow: 'hidden', position: 'relative' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(244,190,40,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(244,190,40,0.025) 1px,transparent 1px)', backgroundSize: '64px 64px', pointerEvents: 'none' }} />
        <RevealBlock>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 20, position: 'relative' }}>Our Products</div>
          <h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: '0 0 20px', fontFamily: 'Sora, sans-serif', position: 'relative', maxWidth: 700 }}>
            Four products.<br />One ecosystem.
          </h2>
          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.45)', fontFamily: 'Sora, sans-serif', maxWidth: 460, lineHeight: 1.7, marginBottom: 80, position: 'relative' }}>
            Each product solves a distinct part of the retail journey, and together they form one connected platform, from footfall to spend to loyalty.
          </p>
        </RevealBlock>

        <div style={{ position: 'relative' }}>
          <ScrollStack useWindowScroll itemDistance={160} itemScale={0.035} itemStackDistance={40} baseScale={0.86} blurAmount={1.2}>
            {PRODUCTS.map((p, i) => (
              <ScrollStackItem key={i}>
                <div style={{
                  background: `linear-gradient(155deg, #14141c 0%, #0c0c12 100%)`,
                  border: `1px solid ${p.color}40`,
                  borderRadius: 28, padding: 'clamp(28px, 3.2vw, 48px)', height: '100%', boxSizing: 'border-box',
                }}>
                  <div className="sp-product-grid" style={{ display: 'grid', gridTemplateColumns: '1.35fr 1fr', gap: 'clamp(28px, 4vw, 56px)', alignItems: 'start' }}>

                    {/* Left — identity + description */}
                    <div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
                        <span style={{ fontSize: 13, fontWeight: 800, color: p.color, fontFamily: 'Sora, sans-serif', letterSpacing: '0.05em' }}>{p.n}</span>
                        <span style={{ width: 24, height: 1, background: `${p.color}66`, display: 'block' }} />
                        <span style={{ fontSize: '0.7rem', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: p.color, fontFamily: 'Sora, sans-serif' }}>{p.subtitle}</span>
                      </div>
                      <h3 style={{ fontSize: 'clamp(1.8rem, 2.8vw, 2.8rem)', fontWeight: 800, letterSpacing: '-0.03em', color: '#fff', margin: '0 0 16px', fontFamily: 'Sora, sans-serif' }}>{p.title}</h3>
                      <p style={{ fontSize: 15, lineHeight: 1.75, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif', margin: '0 0 24px', maxWidth: 480 }}>{p.desc}</p>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                        {p.tags.map((tag) => (
                          <span key={tag} style={{
                            padding: '6px 14px', borderRadius: 100, fontSize: '0.72rem', fontWeight: 600,
                            color: 'rgba(255,255,255,0.7)', background: 'rgba(255,255,255,0.05)',
                            border: '1px solid rgba(255,255,255,0.1)', fontFamily: 'Sora, sans-serif',
                          }}>{tag}</span>
                        ))}
                      </div>
                    </div>

                    {/* Right — metric + capabilities */}
                    <div>
                      <div style={{
                        padding: 'clamp(18px, 2vw, 24px)', borderRadius: 18, marginBottom: 18,
                        background: `${p.color}12`, border: `1px solid ${p.color}35`,
                      }}>
                        <div style={{ fontSize: 'clamp(1.8rem, 2.6vw, 2.4rem)', fontWeight: 900, color: p.color, fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em', lineHeight: 1 }}>{p.metric.val}</div>
                        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.45)', fontFamily: 'Sora, sans-serif', marginTop: 6, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{p.metric.lbl}</div>
                      </div>

                      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                        {p.capabilities.map((cap) => (
                          <div key={cap} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                            <span style={{
                              width: 18, height: 18, borderRadius: '50%', flexShrink: 0, marginTop: 2,
                              display: 'flex', alignItems: 'center', justifyContent: 'center',
                              background: `${p.color}18`, border: `1px solid ${p.color}45`,
                            }}>
                              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke={p.color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
                            </span>
                            <span style={{ fontSize: 13.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.65)', fontFamily: 'Sora, sans-serif' }}>{cap}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </ScrollStackItem>
            ))}
          </ScrollStack>
        </div>
      </section>

      {/* ── WHY IT MATTERS ── */}
      <section style={{ padding: '140px 8%', background: '#07070d', margin: '0 20px 20px', borderRadius: 24, overflow: 'hidden', position: 'relative' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(244,190,40,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(244,190,40,0.025) 1px,transparent 1px)', backgroundSize: '64px 64px', pointerEvents: 'none' }} />
        <RevealBlock>
          <blockquote style={{
            margin: 0, padding: 0,
            fontSize: 'clamp(32px, 5vw, 72px)', fontWeight: 900,
            letterSpacing: '-0.04em', lineHeight: 1.05,
            color: '#fff', fontFamily: 'Sora, sans-serif',
            maxWidth: 900,
          }}>
            "Every digital interaction should lead to a{' '}
            <span style={{ color: '#f4be28' }}>meaningful in-store experience.</span>"
          </blockquote>
          <div style={{ height: 2, width: 80, background: '#f4be28', margin: '48px 0 32px' }} />
          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', margin: 0 }}>Loyaly.ai, 2025</p>
        </RevealBlock>
      </section>

      {/* ── FINAL CTA ── */}
      <section className="sp-cta-grid" style={{ padding: '140px 8%', background: '#fff8e8', margin: '0 20px 20px', borderRadius: 24, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6vw', alignItems: 'center' }}>
        <RevealBlock>
          <h2 style={{ fontSize: 'clamp(36px, 5vw, 68px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 24px', fontFamily: 'Sora, sans-serif' }}>
            See every solution working together.
          </h2>
          <p style={{ fontSize: 16, color: 'rgba(0,0,0,0.5)', fontFamily: 'Sora, sans-serif', margin: '0 0 40px', lineHeight: 1.7 }}>
            Get a tailored walkthrough of how Loyaly.ai&apos;s merchant platform, game campaigns, and coupon engine fit your specific retail format.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <Link href="/contacts" style={{ padding: '18px 40px', background: '#f4be28', color: '#111', fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, sans-serif', boxShadow: '0 12px 40px rgba(244,190,40,0.3)' }}>Book Demo →</Link>
            <Link href="/contacts" style={{ padding: '18px 40px', background: 'transparent', color: '#111', fontSize: 16, fontWeight: 700, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, sans-serif', border: '1.5px solid rgba(0,0,0,0.15)' }}>Explore Solutions</Link>
          </div>
        </RevealBlock>
        <RevealBlock delay={0.15}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {[
              { v: '10K+', l: 'Partner stores' }, { v: '50K+', l: 'Active users' },
              { v: '98%', l: 'Uptime SLA' }, { v: '<9ms', l: 'Response time' },
            ].map((s, i) => (
              <div key={i} style={{ padding: '32px 28px', background: '#fff', borderRadius: 20, boxShadow: '0 4px 32px rgba(0,0,0,0.06)', border: '1px solid rgba(0,0,0,0.05)' }}>
                <div style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', fontWeight: 900, color: '#0a0a0f', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.04em' }}>{s.v}</div>
                <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.4)', fontFamily: 'Sora, sans-serif', marginTop: 8 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </RevealBlock>
      </section>

      <style>{`
        @media (max-width: 860px) {
          .sp-cap-row { grid-template-columns: 1fr !important; gap: 14px !important; padding: 28px 0 !important; }
          .sp-cap-row > div:last-child { justify-content: flex-start !important; }
          .sp-cta-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .sp-product-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 480px) {
          .sp-cta-grid > div > div { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </main>
  );
}