'use client';

import React, { useRef, useState, useEffect } from 'react';
import Link from 'next/link';
import GSAPAnimator from '@/components/GSAPAnimator';
import { useReveal } from '@/hooks/useReveal';

const PRODUCTS = [
  {
    name: 'Behavision',
    tag: 'Footfall AI',
    desc: 'Track footfall, measure conversions, and understand in-store behavior with precision heatmaps and dwell-time analytics.',
    metric: '3.2×', metricLabel: 'conversion uplift',
    color: '#f4be28',
  },
  {
    name: 'SpendSense',
    tag: 'Spend Intelligence',
    desc: 'Analyze spending patterns and identify high-value customers before your competition does.',
    metric: '68%', metricLabel: 'retention improvement',
    color: '#a78bfa',
  },
  {
    name: 'Dyscount',
    tag: 'Smart Discounts',
    desc: 'Deliver targeted discounts that actually convert — without killing your margins.',
    metric: '41%', metricLabel: 'discount waste reduced',
    color: '#34d399',
  },
];

const OUTCOMES = [
  { stat: '3.2×', label: 'Conversion rate increase' },
  { stat: '68%', label: 'Customer retention boost' },
  { stat: '41%', label: 'Discount spend saved' },
  { stat: '9ms', label: 'Real-time decision latency' },
];

const WHO = [
  {
    label: 'Retail Stores',
    icon: <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#f4be28" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9l1-4h16l1 4"/><path d="M3 9h18v11a1 1 0 01-1 1H4a1 1 0 01-1-1V9z"/><path d="M9 21V12h6v9"/><path d="M3 9a2 2 0 002 2 2 2 0 002-2 2 2 0 002 2 2 2 0 002-2 2 2 0 002 2 2 2 0 002-2"/></svg>,
  },
  {
    label: 'Shopping Malls',
    icon: <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#f4be28" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="7" width="20" height="14" rx="1"/><path d="M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2"/><path d="M12 12v3"/><path d="M8 12h8"/></svg>,
  },
  {
    label: 'QSR Chains',
    icon: <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#f4be28" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M18 8h1a4 4 0 010 8h-1"/><path d="M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg>,
  },
  {
    label: 'Franchise Businesses',
    icon: <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#f4be28" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="19" cy="19" r="2"/><path d="M12 7v4M12 11l-5 6M12 11l5 6"/></svg>,
  },
];

function RevealBlock({ children, delay = 0, className = '' }: { children: React.ReactNode; delay?: number; className?: string }) {
  const { ref, visible } = useReveal();
  return (
    <div ref={ref} className={className} style={{
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(48px)',
      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>
  );
}

export default function ForBusinessPage() {
  const [activeProduct, setActiveProduct] = useState(0);
  const [countVisible, setCountVisible] = useState(false);
  const statsRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = statsRef.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setCountVisible(true); obs.disconnect(); } }, { threshold: 0.2 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

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

      {/* ── HERO ── */}
      <section style={{
        minHeight: '100vh', background: '#07070d',
        display: 'flex', alignItems: 'center',
        padding: '120px 8% 100px', position: 'relative', overflow: 'hidden',
        margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
      }}>
        {/* Grid bg */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          backgroundImage: 'linear-gradient(rgba(244,190,40,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(244,190,40,0.03) 1px,transparent 1px)',
          backgroundSize: '72px 72px',
        }} />

        <div style={{ width: '100%', position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: '6vw' }}>
          <div style={{ maxWidth: 680 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 32,
              background: 'rgba(244,190,40,0.08)', border: '1px solid rgba(244,190,40,0.2)',
              borderRadius: 100, padding: '8px 20px',
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', display: 'block' }} />
              <span style={{ fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.55)', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase' }}>For Business</span>
            </div>

            <h1 data-gsap="heading" style={{
              fontSize: 'clamp(52px, 8vw, 120px)', fontWeight: 900,
              letterSpacing: '-0.05em', lineHeight: 0.9,
              color: '#ffffff', margin: '0 0 32px', fontFamily: 'Sora, sans-serif',
            }}>
              Turn Footfall<br />
              <span style={{
                background: 'linear-gradient(105deg,#f4be28 0%,#fff8e0 45%,#f4be28 60%,#ff9500 100%)',
                backgroundSize: '200% auto', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
                animation: 'shimmer 3s linear infinite',
              }}>Into Revenue.</span>
            </h1>

            <p data-gsap="text" style={{
              fontSize: 'clamp(16px, 1.6vw, 21px)', lineHeight: 1.7, color: 'rgba(255,255,255,0.45)',
              fontFamily: 'Manrope, sans-serif', maxWidth: 560, margin: '0 0 52px',
            }}>
              Loyaly.ai gives you complete visibility and control over your retail operations — understanding customers from entry to purchase.
            </p>

            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <Link href="/contacts" style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                padding: '18px 40px', background: '#f4be28', color: '#111',
                fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none',
                fontFamily: 'Manrope, sans-serif', boxShadow: '0 16px 60px rgba(244,190,40,0.3)',
              }}>Book a Demo →</Link>
              <Link href="/contacts" style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                padding: '18px 40px', background: 'rgba(255,255,255,0.06)', color: '#fff',
                fontSize: 16, fontWeight: 700, borderRadius: 100, textDecoration: 'none',
                fontFamily: 'Manrope, sans-serif', border: '1px solid rgba(255,255,255,0.12)',
                backdropFilter: 'blur(12px)',
              }}>Talk to Sales</Link>
            </div>
          </div>
          {/* Real-time analytics widget */}
          <div className="pw-widget-col" style={{ flexShrink: 0, width: 340 }}>
            <div style={{
              borderRadius: 24, padding: '22px',
              background: 'linear-gradient(145deg,#0e0e13 0%,#16161d 100%)',
              border: '1px solid rgba(244,190,40,0.15)',
              boxShadow: '0 40px 100px rgba(0,0,0,0.6)',
            }}>
              {/* Header */}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                <div style={{ fontSize: 13, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif' }}>Live Analytics</div>
                <span style={{ fontSize: 10, color: '#4ade80', fontWeight: 700, background: 'rgba(74,222,128,0.1)', border: '1px solid rgba(74,222,128,0.25)', padding: '4px 10px', borderRadius: 100, fontFamily: 'Manrope, sans-serif' }}>● LIVE</span>
              </div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.28)', fontFamily: 'Manrope, sans-serif', marginBottom: 16 }}>Coimbatore Flagship Store</div>
              {/* Main visitors stat */}
              <div style={{ marginBottom: 16, padding: '16px', borderRadius: 16, background: 'rgba(244,190,40,0.07)', border: '1px solid rgba(244,190,40,0.2)' }}>
                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.38)', fontFamily: 'Manrope, sans-serif', marginBottom: 4 }}>Visitors Today</div>
                <div style={{ fontSize: 38, fontWeight: 900, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.04em', lineHeight: 1 }}>2,847</div>
                <div style={{ fontSize: 11, color: '#4ade80', fontWeight: 700, fontFamily: 'Manrope, sans-serif', marginTop: 8 }}>↑ +12% vs yesterday</div>
              </div>
              {/* Mini bar chart */}
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 48, marginBottom: 16, padding: '0 4px' }}>
                {[30, 45, 38, 55, 62, 50, 70, 80, 65, 90, 75, 60].map((h, i) => (
                  <div key={i} style={{ flex: 1, height: `${h}%`, borderRadius: '3px 3px 0 0', background: i === 9 ? '#f4be28' : `rgba(244,190,40,${0.15 + i * 0.04})` }} />
                ))}
              </div>
              {/* Metric rows */}
              {[
                { label: 'Conversion Rate', val: '34.8%', delta: '+3.2×', color: '#f4be28' },
                { label: 'Avg Basket Value', val: '₹1,240', delta: '+18%', color: '#a78bfa' },
                { label: 'Customer Retention', val: '68%', delta: '+12%', color: '#4ade80' },
                { label: 'Discount Savings', val: '41%', delta: 'saved', color: '#34d399' },
              ].map((m, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '9px 0', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.42)', fontFamily: 'Manrope, sans-serif' }}>{m.label}</span>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                    <span style={{ fontSize: 13, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif' }}>{m.val}</span>
                    <span style={{ fontSize: 10, fontWeight: 700, color: m.color, background: `${m.color}15`, padding: '2px 7px', borderRadius: 6, fontFamily: 'Manrope, sans-serif' }}>{m.delta}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── CHALLENGE ── */}
      <section style={{ padding: '140px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
        <RevealBlock>
          <div style={{ maxWidth: 200, height: 2, background: '#f4be28', marginBottom: 48 }} />
        </RevealBlock>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8vw', alignItems: 'center' }}>
          <RevealBlock>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 24 }}>The Challenge</div>
            <h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 28px', fontFamily: 'Sora, sans-serif' }}>
              You're Getting<br />Visitors. But<br />
              <em style={{ fontStyle: 'normal', color: '#c9960f' }}>Missing Revenue.</em>
            </h2>
          </RevealBlock>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {[
              "You don't know who walks into your store.",
              "You don't know what they're looking for.",
              "You don't know why they leave.",
              "And your discounts? Just guesswork.",
            ].map((line, i) => (
              <RevealBlock key={i} delay={i * 0.1}>
                <div style={{
                  padding: '24px 0',
                  borderBottom: '1px solid rgba(0,0,0,0.07)',
                  display: 'flex', gap: 20, alignItems: 'flex-start',
                }}>
                  <span style={{ fontSize: 12, fontWeight: 700, color: '#f4be28', fontFamily: 'Sora, sans-serif', marginTop: 3, flexShrink: 0 }}>0{i + 1}</span>
                  <span style={{ fontSize: 'clamp(16px, 1.6vw, 22px)', fontWeight: 600, color: '#1a1a1a', fontFamily: 'Manrope, sans-serif', lineHeight: 1.4 }}>{line}</span>
                </div>
              </RevealBlock>
            ))}
          </div>
        </div>
      </section>

      {/* ── PRODUCTS ── */}
      <section style={{ padding: '140px 8%', background: '#07070d', margin: '0 20px 20px', borderRadius: 24 }}>
        <RevealBlock>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 20 }}>Our Products</div>
          <h2 style={{ fontSize: 'clamp(40px, 5.5vw, 80px)', fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.92, color: '#fff', margin: '0 0 80px', fontFamily: 'Sora, sans-serif', maxWidth: 700 }}>
            AI-Powered Retail Intelligence.
          </h2>
        </RevealBlock>

        {/* Tab selector */}
        <div style={{ display: 'flex', gap: 4, marginBottom: 48, background: 'rgba(255,255,255,0.04)', borderRadius: 100, padding: 4, width: 'fit-content', border: '1px solid rgba(255,255,255,0.08)' }}>
          {PRODUCTS.map((p, i) => (
            <button key={i} onClick={() => setActiveProduct(i)} style={{
              padding: '10px 24px', borderRadius: 100, border: 'none', cursor: 'pointer',
              background: activeProduct === i ? p.color : 'transparent',
              color: activeProduct === i ? '#111' : 'rgba(255,255,255,0.45)',
              fontSize: 14, fontWeight: 700, fontFamily: 'Manrope, sans-serif',
              transition: 'all 0.3s cubic-bezier(0.22,1,0.36,1)',
            }}>{p.name}</button>
          ))}
        </div>

        {/* Product detail */}
        {PRODUCTS.map((p, i) => (
          <div key={i} style={{
            display: activeProduct === i ? 'grid' : 'none',
            gridTemplateColumns: '1fr 1fr', gap: '6vw', alignItems: 'center',
          }}>
            <div>
              <div style={{
                display: 'inline-block', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: p.color, fontFamily: 'Manrope, sans-serif',
                marginBottom: 20, background: `${p.color}15`, padding: '6px 14px', borderRadius: 100,
                border: `1px solid ${p.color}30`,
              }}>{p.tag}</div>
              <h3 style={{ fontSize: 'clamp(32px, 4vw, 60px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: '0 0 24px', fontFamily: 'Sora, sans-serif' }}>{p.name}</h3>
              <p style={{ fontSize: 18, lineHeight: 1.75, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif', margin: '0 0 40px' }}>{p.desc}</p>
              <Link href="/contacts" style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '14px 28px', background: p.color, color: '#111',
                fontSize: 14, fontWeight: 800, borderRadius: 100, textDecoration: 'none',
                fontFamily: 'Manrope, sans-serif',
              }}>Learn More →</Link>
            </div>
            <div style={{
              background: 'rgba(255,255,255,0.03)', border: `1px solid ${p.color}20`,
              borderRadius: 24, padding: '48px', textAlign: 'center',
              boxShadow: `0 0 80px ${p.color}08`,
            }}>
              <div style={{ fontSize: 'clamp(60px, 9vw, 110px)', fontWeight: 900, color: p.color, fontFamily: 'Sora, sans-serif', letterSpacing: '-0.05em', lineHeight: 1 }}>{p.metric}</div>
              <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', marginTop: 12, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{p.metricLabel}</div>
            </div>
          </div>
        ))}
      </section>

      {/* ── OUTCOMES ── */}
      <section ref={statsRef} style={{ padding: '140px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
        <RevealBlock>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 20 }}>Outcomes</div>
          <h2 style={{ fontSize: 'clamp(36px, 5vw, 68px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 80px', fontFamily: 'Sora, sans-serif' }}>
            Real Results.<br />Not Assumptions.
          </h2>
        </RevealBlock>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 2 }}>
          {OUTCOMES.map((o, i) => (
            <RevealBlock key={i} delay={i * 0.1}>
              <div style={{
                padding: '48px 32px',
                background: i % 2 === 0 ? '#07070d' : '#f4be28',
                borderRadius: i === 0 ? '24px 0 0 24px' : i === 3 ? '0 24px 24px 0' : 0,
              }}>
                <div style={{ fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 900, color: i % 2 === 0 ? '#f4be28' : '#111', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.04em', lineHeight: 1 }}>{o.stat}</div>
                <div style={{ fontSize: 14, color: i % 2 === 0 ? 'rgba(255,255,255,0.45)' : 'rgba(0,0,0,0.55)', fontFamily: 'Manrope, sans-serif', marginTop: 14, lineHeight: 1.5 }}>{o.label}</div>
              </div>
            </RevealBlock>
          ))}
        </div>
      </section>

      {/* ── WHO IT'S FOR ── */}
      <section style={{ padding: '140px 8%', background: '#07070d', margin: '0 20px 20px', borderRadius: 24 }}>
        <RevealBlock>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 20 }}>Who It's For</div>
          <h2 style={{ fontSize: 'clamp(36px, 5vw, 68px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: '0 0 80px', fontFamily: 'Sora, sans-serif', maxWidth: 600 }}>
            Built for every format of physical retail.
          </h2>
        </RevealBlock>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }}>
          {WHO.map((w, i) => (
            <RevealBlock key={i} delay={i * 0.1}>
              <div style={{
                padding: '48px 32px',
                background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)',
                borderRadius: 20, backdropFilter: 'blur(12px)',
                transition: 'all 0.3s ease',
              }}>
                <div style={{ marginBottom: 20 }}>{w.icon}</div>
                <div style={{ fontSize: 20, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif' }}>{w.label}</div>
              </div>
            </RevealBlock>
          ))}
        </div>
      </section>

      {/* ── FINAL CTA ── */}
      <section style={{ padding: '160px 8%', background: '#f4be28', margin: '0 20px 20px', borderRadius: 24, textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: '-20%', left: '50%', transform: 'translateX(-50%)', width: '120%', height: '140%', background: 'radial-gradient(ellipse,rgba(255,255,255,0.15) 0%,transparent 60%)', pointerEvents: 'none' }} />
        <RevealBlock>
          <h2 style={{ fontSize: 'clamp(44px, 7vw, 100px)', fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.92, color: '#111', margin: '0 0 24px', fontFamily: 'Sora, sans-serif', position: 'relative', zIndex: 2 }}>
            Ready to Transform<br />Your Retail Business?
          </h2>
          <p style={{ fontSize: 18, color: 'rgba(0,0,0,0.55)', fontFamily: 'Manrope, sans-serif', margin: '0 auto 52px', maxWidth: 480, position: 'relative', zIndex: 2 }}>Schedule a demo and see your store's potential in 30 minutes.</p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', position: 'relative', zIndex: 2 }}>
            <Link href="/contacts" style={{ padding: '18px 44px', background: '#111', color: '#f4be28', fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif' }}>Schedule a Demo</Link>
            <Link href="/contacts" style={{ padding: '18px 44px', background: 'rgba(0,0,0,0.1)', color: '#111', fontSize: 16, fontWeight: 700, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif', border: '1px solid rgba(0,0,0,0.15)' }}>Talk to Sales</Link>
          </div>
        </RevealBlock>
      </section>

      <style>{`
        @keyframes shimmer { 0%{background-position:200% center} 100%{background-position:-200% center} }
        @keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
      `}</style>
    </main>
  );
}
