'use client';

import React from 'react';
import Link from 'next/link';
import Image from 'next/image';

const ARTICLE = {
  tag: 'Analytics',
  readTime: '6 min',
  title: 'Why Footfall Data is the New Gold',
  date: 'June 2026',
  author: 'Loyaly.ai Team',
  excerpt: 'In an era where every online click is tracked, offline retailers are sitting on untapped behavioural gold, and most don\'t even know it exists.',
  sections: [
    {
      heading: 'The data gap in offline retail',
      body: 'E-commerce has always had an advantage: every click, scroll, and abandoned cart is tracked and analysed. Offline retail never had this luxury, until now. Footfall data is rapidly becoming the most valuable asset a physical store can own. It tells you not just how many people walk in, but when, where they go, how long they stay, and whether they convert.',
    },
    {
      heading: 'What footfall data actually tells you',
      body: 'A modern footfall intelligence system captures far more than a head count. It maps movement patterns through your store, identifies dwell zones, flags bottlenecks, and connects visit behaviour to purchase outcomes. When you overlay this with loyalty data: who the customer is, what they\'ve bought before, how long since their last visit, you get a complete picture that was previously impossible for offline businesses.',
    },
    {
      heading: 'Turning insights into revenue',
      body: 'The real power of footfall data emerges when it drives action. If you know that 60% of visitors who enter your electronics section but leave without buying spend more than 12 minutes near the display stands, that\'s a cue for a targeted offer. Loyaly\'s Behavision AI does exactly this: it detects intent signals and triggers personalised engagements in real time, closing the gap between visit and purchase.',
    },
    {
      heading: 'The competitive advantage is closing',
      body: 'Retailers who adopt footfall intelligence today are building a data moat that will be very hard for competitors to close later. Every day without this data is a day of lost insight. The good news: AI has made footfall analytics accessible to stores of all sizes — not just enterprise chains with seven-figure tech budgets. Loyaly brings this capability to any merchant who wants it.',
    },
  ],
  relatedArticles: [
    { n: '02', tag: 'Strategy', title: 'The End of Blind Discounts', readTime: '5 min' },
    { n: '03', tag: 'Technology', title: 'AI in Offline Retail', readTime: '8 min' },
    { n: '04', tag: 'Growth', title: 'How to Increase Repeat Customers', readTime: '4 min' },
  ],
};

export default function BlogSinglePage() {
  return (
    <main style={{ background: '#ffffff', minHeight: '100vh', overflowX: 'hidden' }}>

      {/* Hero */}
      <section style={{
        padding: '140px 8% 100px', background: 'radial-gradient(ellipse 120% 90% at 50% 0%, #2c2350 0%, #211c3e 38%, #181429 100%)',
        margin: '20px', borderRadius: '32px',
        position: 'relative', overflow: 'hidden',
      }}>
        {/* Background photo */}
        <Image src="/images/stock/blog-article.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 65% 70% at 50% 48%, rgba(18,14,30,0.78) 0%, rgba(18,14,30,0.35) 60%, transparent 100%)' }} />
        <div style={{ position: 'absolute', top: '-14%', right: '8%', width: 460, height: 460, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.2) 0%, transparent 70%)', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', bottom: '-18%', left: '4%', width: 400, height: 400, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
        <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: '60px 60px', pointerEvents: 'none' }} />
        <div style={{ position: 'relative', zIndex: 2, maxWidth: 820, margin: '0 auto', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, marginBottom: 32 }}>
            <Link href="/blog_main" style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6 }}>
              ← Market Insights
            </Link>
            <span style={{ color: 'rgba(255,255,255,0.2)' }}>/</span>
            <span style={{ fontSize: 11, fontWeight: 700, color: '#f4be28', background: 'rgba(244,190,40,0.1)', border: '1px solid rgba(244,190,40,0.2)', padding: '3px 10px', borderRadius: 100, fontFamily: 'Sora, sans-serif', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{ARTICLE.tag}</span>
          </div>
          <h1 style={{ fontSize: 'clamp(36px, 6vw, 88px)', fontWeight: 800, letterSpacing: '-0.05em', lineHeight: 0.92, color: '#fff', margin: '0 0 28px', fontFamily: 'Sora, sans-serif' }}>
            {ARTICLE.title}
          </h1>
          <p style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', maxWidth: 600, margin: '0 0 40px' }}>
            {ARTICLE.excerpt}
          </p>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 20 }}>
            <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(244,190,40,0.15)', border: '1.5px solid rgba(244,190,40,0.35)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, color: '#f4be28' }}>✦</div>
            <div style={{ textAlign: 'left' }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: '#fff', fontFamily: 'Sora, sans-serif' }}>{ARTICLE.author}</div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif' }}>{ARTICLE.date} · {ARTICLE.readTime} read</div>
            </div>
          </div>
        </div>
      </section>

      {/* Article body */}
      <section style={{ padding: '80px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
        <div style={{ maxWidth: 740, margin: '0 auto' }}>
          {ARTICLE.sections.map((s, i) => (
            <div key={i} style={{ marginBottom: 56 }}>
              <h2 style={{ fontSize: 'clamp(22px, 2.5vw, 32px)', fontWeight: 800, letterSpacing: '-0.03em', color: '#0a0a0f', margin: '0 0 18px', fontFamily: 'Sora, sans-serif' }}>
                {s.heading}
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.9, color: 'rgba(0,0,0,0.6)', fontFamily: 'Sora, sans-serif', margin: 0 }}>
                {s.body}
              </p>
              {i < ARTICLE.sections.length - 1 && (
                <div style={{ height: 1, background: 'rgba(0,0,0,0.06)', marginTop: 56 }} />
              )}
            </div>
          ))}

          {/* Pull quote */}
          <blockquote style={{
            margin: '56px 0', padding: '32px 40px',
            borderLeft: '4px solid #f4be28', borderRadius: '0 16px 16px 0',
            background: '#fff8e0',
          }}>
            <p style={{ fontSize: 'clamp(18px, 2.2vw, 26px)', fontWeight: 800, color: '#0a0a0f', fontFamily: 'Sora, sans-serif', lineHeight: 1.4, margin: 0, letterSpacing: '-0.02em' }}>
              "Every day without footfall data is a day of lost insight."
            </p>
            <footer style={{ fontSize: 13, color: 'rgba(0,0,0,0.4)', fontFamily: 'Sora, sans-serif', marginTop: 12 }}>Loyaly.ai, 2026</footer>
          </blockquote>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: '80px 8%', background: '#07070d', margin: '0 20px 20px', borderRadius: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 32 }}>
        <div>
          <h2 style={{ fontSize: 'clamp(28px, 3.5vw, 52px)', fontWeight: 800, letterSpacing: '-0.04em', color: '#fff', margin: '0 0 12px', fontFamily: 'Sora, sans-serif' }}>
            Ready to see your store&apos;s data?
          </h2>
          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', margin: 0 }}>Book a 30-minute demo and see Behavision AI in action.</p>
        </div>
        <Link href="/contacts" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '16px 36px', background: '#f4be28', color: '#111', fontSize: 15, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, sans-serif', whiteSpace: 'nowrap', boxShadow: '0 8px 28px rgba(244,190,40,0.35)' }}>
          Book a Demo →
        </Link>
      </section>

      {/* Related articles */}
      <section style={{ padding: '80px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 32 }}>More from Market Insights</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 16 }}>
          {ARTICLE.relatedArticles.map((a) => (
            <Link key={a.n} href="/blog_main" style={{ textDecoration: 'none', display: 'block', padding: '28px 24px', borderRadius: 20, background: '#fafafa', border: '1px solid rgba(0,0,0,0.07)', transition: 'all 0.25s ease' }}
              onMouseEnter={e => { (e.currentTarget as HTMLAnchorElement).style.background = '#fff8e0'; (e.currentTarget as HTMLAnchorElement).style.borderColor = 'rgba(244,190,40,0.3)'; }}
              onMouseLeave={e => { (e.currentTarget as HTMLAnchorElement).style.background = '#fafafa'; (e.currentTarget as HTMLAnchorElement).style.borderColor = 'rgba(0,0,0,0.07)'; }}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                <span style={{ fontSize: 10, fontWeight: 700, color: '#f4be28', background: 'rgba(244,190,40,0.1)', border: '1px solid rgba(244,190,40,0.2)', padding: '3px 9px', borderRadius: 100, fontFamily: 'Sora, sans-serif', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{a.tag}</span>
                <span style={{ fontSize: 11, color: 'rgba(0,0,0,0.3)', fontFamily: 'Sora, sans-serif' }}>{a.readTime} read</span>
              </div>
              <h3 style={{ fontSize: 17, fontWeight: 800, color: '#0a0a0f', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em', lineHeight: 1.3, margin: 0 }}>{a.title}</h3>
            </Link>
          ))}
        </div>
      </section>
    </main>
  );
}