'use client';

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

function Reveal({ 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(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 AboutUsPage() {
  return (
    <main style={{ background: '#ffffff', minHeight: '100vh', overflowX: 'hidden' }}>
      <GSAPAnimator />

      {/* ── HERO ── */}
      <section style={{
        minHeight: '100vh', background: 'radial-gradient(ellipse 120% 90% at 22% 0%, #3a2b5e 0%, #251c40 38%, #1a1530 100%)',
        display: 'flex', alignItems: 'center',
        padding: '120px 8% 80px',
        margin: '20px', borderRadius: '32px',
        position: 'relative', overflow: 'hidden',
      }}>
        {/* Background photo */}
        <Image src="/images/stock/about-team.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,21,48,0.1) 0%, rgba(26,21,48,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%', right: '-8%', width: 520, height: 520, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.22) 0%, transparent 70%)', filter: 'blur(10px)', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', bottom: '-15%', left: '-10%', width: 460, height: 460, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
        {/* Big ghost text */}
        <div style={{
          position: 'absolute', top: '50%', left: '50%',
          transform: 'translate(-50%,-50%)',
          fontSize: 'clamp(120px, 22vw, 320px)', fontWeight: 900,
          fontFamily: 'Sora, sans-serif', color: 'transparent',
          WebkitTextStroke: '1px rgba(244,190,40,0.08)',
          letterSpacing: '-0.06em', lineHeight: 1,
          whiteSpace: 'nowrap', userSelect: 'none',
          pointerEvents: 'none', zIndex: 0,
        }}>LOYALY</div>

        <div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
          <div style={{ maxWidth: 760 }}>
            <h1 data-gsap="heading" style={{
              fontSize: 'clamp(52px, 9vw, 140px)', fontWeight: 800,
              letterSpacing: '-0.06em', lineHeight: 0.88,
              color: '#ffffff', margin: '0 0 36px', fontFamily: 'Sora, sans-serif',
            }}>
              The People<br />
              <span style={{ color: '#f4be28' }}>Behind</span> Loyaly.
            </h1>
            <p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', maxWidth: 560, margin: '0 auto' }}>
              We're not just building a product. We're redefining retail, one store at a time.
            </p>
          </div>
        </div>
      </section>

      {/* ── OUR STORY ── */}
      <section style={{ padding: '140px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
        <div className="au-story-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8vw', alignItems: 'start' }}>
          <Reveal>
            <SectionEyebrow variant="line" style={{ marginBottom: 24 }}>Our Story</SectionEyebrow>
            <h2 style={{ fontSize: 'clamp(36px, 4.5vw, 68px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 32px', fontFamily: 'Sora, sans-serif' }}>
              We started with<br />a simple idea.
            </h2>
          </Reveal>
          <Reveal delay={0.15}>
            <p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', margin: '0 0 32px' }}>
              Offline retail deserves the same intelligence as online. A store owner in Coimbatore shouldn't be flying blind while an e-commerce algorithm knows exactly what every user wants.
            </p>
            <p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', margin: 0 }}>
              Today, we're building a connected ecosystem where businesses grow smarter and customers shop better together.
            </p>
          </Reveal>
        </div>
      </section>

      {/* ── MISSION & VISION ── */}
      <section style={{ position: 'relative', overflow: 'hidden', padding: 'clamp(60px, 9vh, 104px) 8%', background: '#07070d', margin: '0 20px 20px', borderRadius: 28 }}>
        {/* Ambient top glow */}
        <div aria-hidden style={{ position: 'absolute', top: '-24%', left: '50%', transform: 'translateX(-50%)', width: 680, height: 420, background: 'radial-gradient(ellipse, rgba(244,190,40,0.12) 0%, transparent 70%)', pointerEvents: 'none' }} />

        {/* Section header */}
        <div style={{ position: 'relative', zIndex: 1, textAlign: 'center', maxWidth: 640, margin: '0 auto clamp(44px, 6vh, 68px)' }}>
          <h2 style={{ margin: 0, fontSize: 'clamp(30px, 4.5vw, 60px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1, color: '#fff', fontFamily: 'Sora, sans-serif' }}>
            What drives <span style={{ color: '#f4be28' }}>everything</span> we do.
          </h2>
        </div>

        <div className="au-mv-grid" style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'stretch' }}>
          {[
            {
              label: 'Mission', emoji: '🎯', bg: 'linear-gradient(160deg, #ffffff 0%, #fdf4e2 100%)', textColor: '#171512',
              border: 'rgba(244,190,40,0.45)',
              pillBg: 'rgba(244,190,40,0.14)', pillText: '#8a5a14', pillBorder: 'rgba(244,190,40,0.5)',
              orb1: 'rgba(244,190,40,0.20)', orb2: 'rgba(255,152,0,0.14)',
              gfx: 'rgba(244,190,40,0.38)',
              body: 'Loyaly exists to close the gap between digital discovery and physical purchase. We give local stores the tools to compete, and give shoppers a reason to keep coming back.',
            },
            {
              label: 'Vision', emoji: '🔮', bg: 'linear-gradient(160deg, #fff7e2 0%, #ffe6a8 100%)', textColor: '#171512',
              border: 'rgba(244,190,40,0.55)',
              pillBg: '#f4be28', pillText: '#171512', pillBorder: 'rgba(201,150,15,0.6)',
              orb1: 'rgba(255,255,255,0.7)', orb2: 'rgba(244,190,40,0.3)',
              gfx: 'rgba(201,150,15,0.32)',
              body: 'Empowering every neighbourhood, making exceptional in-store experiences and real Lyts accessible to all.',
            },
          ].map((mv, i) => (
            <Reveal key={i} delay={i * 0.15}>
              <div className="au-mv-card" style={{
                position: 'relative',
                padding: 'clamp(40px, 4vw, 60px)', borderRadius: 28, background: mv.bg,
                border: `1px solid ${mv.border}`,
                boxShadow: '0 24px 60px -30px rgba(23,21,18,0.22)',
                height: '100%', minHeight: 360,
                display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', gap: 24,
                margin: 0, boxSizing: 'border-box',
              }}>
                {/* Animated background orbs (clipped to the card) */}
                <div className="au-mv-bg" aria-hidden style={{ position: 'absolute', inset: 0, borderRadius: 28, overflow: 'hidden', pointerEvents: 'none', zIndex: 0 }}>
                  <span className="au-mv-orb au-mv-orb-1" style={{ position: 'absolute', top: '-18%', left: '-12%', width: 280, height: 280, borderRadius: '50%', background: `radial-gradient(circle, ${mv.orb1} 0%, transparent 70%)` }} />
                  <span className="au-mv-orb au-mv-orb-2" style={{ position: 'absolute', bottom: '-20%', right: '-10%', width: 240, height: 240, borderRadius: '50%', background: `radial-gradient(circle, ${mv.orb2} 0%, transparent 70%)` }} />
                </div>

                {/* Pop-out corner sticker */}
                <span aria-hidden style={{ position: 'absolute', top: -22, right: -14, fontSize: 46, transform: 'rotate(12deg)', zIndex: 2 }}>{mv.emoji}</span>

                {/* Tilted sticker-pill label */}
                <span style={{
                  position: 'relative', zIndex: 1,
                  display: 'inline-flex', alignItems: 'center', gap: 7, alignSelf: 'flex-start',
                  transform: 'rotate(-2deg)', padding: '8px 16px', borderRadius: 100,
                  background: mv.pillBg, color: mv.pillText, border: `1.5px solid ${mv.pillBorder}`,
                  fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', fontFamily: 'Sora, sans-serif',
                }}>{mv.emoji} {mv.label}</span>

                <p style={{ position: 'relative', zIndex: 1, fontSize: 'clamp(21px, 2.4vw, 34px)', fontWeight: 500, lineHeight: 1.3, color: mv.textColor, fontFamily: 'Sora, sans-serif', margin: 0, letterSpacing: '-0.015em' }}>
                  {mv.body}
                </p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ── MARKET OPPORTUNITY ── */}
      <section style={{ padding: '140px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
        <div className="au-market-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8vw', alignItems: 'start' }}>
          <Reveal>
            <SectionEyebrow variant="pill" style={{ marginBottom: 24 }}>Market Opportunity</SectionEyebrow>
            <h2 style={{ fontSize: 'clamp(36px, 4.5vw, 68px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 32px', fontFamily: 'Sora, sans-serif' }}>
              13 Million Stores.<br />One Opportunity.
            </h2>
            <p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', margin: 0 }}>
              India&apos;s retail market is one of the largest and fastest-growing in the world. We&apos;re building Loyaly for the stores that power it, and the shoppers who love them.
            </p>
          </Reveal>
          <Reveal delay={0.15}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                { val: '13 Million+', label: 'Total Retail Stores Across India' },
                { val: '2 Million+', label: 'Organised & High-Footfall Stores' },
                { val: '50,000+', label: 'Stores In Our Launch Cities' },
              ].map((m) => (
                <div key={m.label} style={{ padding: '28px 32px', borderRadius: 20, background: '#faf9f6', border: '1px solid rgba(0,0,0,0.06)' }}>
                  <div style={{ fontSize: 'clamp(26px, 3vw, 40px)', fontWeight: 900, color: '#0a0a0f', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em' }}>{m.val}</div>
                  <div style={{ fontSize: 14, color: 'rgba(0,0,0,0.45)', fontFamily: 'Sora, sans-serif', marginTop: 6 }}>{m.label}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* ── TEAM ── */}
      <TeamCarousel />

      {/* ── CLOSE: POINT TO THE CREW ── */}
      <section style={{
        padding: '160px 8%', background: '#f4be28',
        margin: '0 20px 20px', borderRadius: 24,
        display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 50% 0%,rgba(255,255,255,0.2) 0%,transparent 60%)', pointerEvents: 'none' }} />
        <Reveal>
          <p style={{ fontSize: 'clamp(32px, 6vw, 90px)', fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.95, color: '#111', margin: '0 0 48px', fontFamily: 'Sora, sans-serif', position: 'relative', zIndex: 2 }}>
            "We're not just building a product. We're redefining retail."
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center', position: 'relative', zIndex: 2 }}>
            <Link href="/solutions_page" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '18px 44px', background: '#111', color: '#f4be28',
              fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none',
              fontFamily: 'Sora, sans-serif',
            }}>See Our Products →</Link>
            <Link href="/contacts" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '18px 44px', background: 'rgba(0,0,0,0.08)', color: '#111',
              fontSize: 16, fontWeight: 700, borderRadius: 100, textDecoration: 'none',
              fontFamily: 'Sora, sans-serif', border: '1px solid rgba(0,0,0,0.15)',
            }}>Join Us</Link>
          </div>
        </Reveal>
      </section>

      <style>{`
        /* Animated gradient glow ring behind each card */
        .au-mv-card::before {
          content: '';
          position: absolute;
          inset: -2px;
          border-radius: inherit;
          background: linear-gradient(130deg, #f4be28, #ff9f1c, #f4be28);
          background-size: 220% 220%;
          z-index: -1;
          filter: blur(11px);
          opacity: 0.45;
          animation: auMvGlow 7s ease-in-out infinite;
        }
        @keyframes auMvGlow {
          0%, 100% { background-position: 0% 50%; opacity: 0.35; }
          50% { background-position: 100% 50%; opacity: 0.6; }
        }
        .au-mv-orb { filter: blur(26px); will-change: transform; }
        .au-mv-orb-1 { animation: auMvDrift1 10s ease-in-out infinite; }
        .au-mv-orb-2 { animation: auMvDrift2 13s ease-in-out infinite; }
        @keyframes auMvDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(44px, -34px) scale(1.2); } }
        @keyframes auMvDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-38px, 30px) scale(1.16); } }
        .au-mv-gfx { animation: auMvGfxFloat 16s ease-in-out infinite; }
        @keyframes auMvGfxFloat {
          0%, 100% { transform: translate(0, 0) scale(0.82); }
          25% { transform: translate(-34px, -22px) scale(1); }
          50% { transform: translate(-14px, -48px) scale(1.22); }
          75% { transform: translate(-42px, -14px) scale(1); }
        }
        .au-mv-ringspin { transform-box: fill-box; transform-origin: center; animation: auMvSpin 12s linear infinite; }
        @keyframes auMvSpin { to { transform: rotate(360deg); } }
        .au-mv-ringpulse { transform-box: fill-box; transform-origin: center; animation: auMvRingPulse 4.5s ease-in-out infinite; }
        @keyframes auMvRingPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.65; } }
        .au-mv-dot { transform-box: fill-box; transform-origin: center; animation: auMvDotPulse 1.8s ease-in-out infinite; }
        .au-mv-dot-2 { animation-delay: 0.6s; }
        .au-mv-dot-3 { animation-delay: 1.2s; }
        @keyframes auMvDotPulse { 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.9); opacity: 0.2; } }
        @media (prefers-reduced-motion: reduce) {
          .au-mv-orb-1, .au-mv-orb-2, .au-mv-card::before, .au-mv-gfx, .au-mv-ringspin, .au-mv-ringpulse, .au-mv-dot { animation: none !important; }
        }
        @media (max-width: 860px) {
          .au-story-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
          .au-market-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
          .au-mv-grid { grid-template-columns: 1fr !important; }
          .au-mv-grid > div > div { padding: 48px 32px !important; min-height: 280px !important; }
        }
      `}</style>
    </main>
  );
}

/* ── Team Carousel ─────────────────────────────────────────────────────── */

const TEAM_MEMBERS = [
  { name: 'Coming Soon', role: 'Co-Founder & CEO', gradient: 'linear-gradient(160deg,#1a0a3a 0%,#4a2080 100%)', initials: '?' },
  { name: 'Coming Soon', role: 'Head of Product', gradient: 'linear-gradient(160deg,#0a1a3a 0%,#1a5080 100%)', initials: '?' },
  { name: 'Coming Soon', role: 'Lead Engineer', gradient: 'linear-gradient(160deg,#1a1200 0%,#f4be28 100%)', initials: '✦' },
  { name: 'Coming Soon', role: 'Head of Design', gradient: 'linear-gradient(160deg,#0a2a1a 0%,#1a8050 100%)', initials: '?' },
  { name: 'Coming Soon', role: 'Growth & Marketing', gradient: 'linear-gradient(160deg,#2a0a1a 0%,#80203a 100%)', initials: '?' },
];

function TeamCarousel() {
  const [active, setActive] = useState(2);

  const CARD_W = 320;
  const CARD_GAP = 24;
  const STEP = CARD_W + CARD_GAP;

  return (
    <section style={{ padding: '100px 0 120px', background: '#07070d', margin: '0 20px 20px', borderRadius: 24, overflow: 'hidden', position: 'relative' }}>
      {/* Grid bg */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', 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' }} />

      {/* Header */}
      <div style={{ textAlign: 'center', marginBottom: 72, position: 'relative', zIndex: 2, padding: '0 8%' }}>
        <SectionEyebrow variant="dot" style={{ marginBottom: 16 }}>The Team</SectionEyebrow>
        <h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: '0 0 16px', fontFamily: 'Sora, sans-serif' }}>
          Builders. Thinkers.<br />Retail obsessives.
        </h2>
        <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif', margin: 0 }}>
          Profiles coming soon. We&apos;re still busy building the future of retail.
        </p>
      </div>

      {/* Carousel viewport */}
      <div style={{ position: 'relative', zIndex: 2, height: 'clamp(380px,48vw,560px)', overflow: 'hidden' }}>
        {/* Sliding track — translate so active card is always centered */}
        <div style={{
          display: 'flex',
          gap: CARD_GAP,
          alignItems: 'center',
          height: '100%',
          position: 'absolute',
          left: '50%',
          transform: `translateX(calc(-50% - ${(active - 2) * STEP}px))`,
          transition: 'transform 0.6s cubic-bezier(0.22,1,0.36,1)',
          paddingLeft: STEP * 2,
          paddingRight: STEP * 2,
        }}>
          {TEAM_MEMBERS.map((member, i) => {
            const dist = Math.abs(i - active);
            const isActive = i === active;
            const scale = isActive ? 1 : dist === 1 ? 0.82 : 0.68;
            const blur = isActive ? 0 : dist === 1 ? 2 : 4;
            const opacity = isActive ? 1 : dist === 1 ? 0.72 : 0.42;
            const cardH = isActive ? '100%' : dist === 1 ? '82%' : '68%';

            return (
              <div
                key={i}
                onClick={() => setActive(i)}
                style={{
                  flexShrink: 0,
                  width: CARD_W,
                  height: cardH,
                  borderRadius: 32,
                  background: member.gradient,
                  cursor: isActive ? 'default' : 'pointer',
                  filter: `blur(${blur}px)`,
                  transform: `scale(${scale})`,
                  opacity,
                  transition: 'all 0.6s cubic-bezier(0.22,1,0.36,1)',
                  position: 'relative',
                  overflow: 'hidden',
                  boxShadow: isActive ? '0 40px 100px rgba(0,0,0,0.75)' : '0 10px 40px rgba(0,0,0,0.35)',
                  border: isActive ? '1.5px solid rgba(244,190,40,0.4)' : '1px solid rgba(255,255,255,0.07)',
                  alignSelf: 'center',
                }}
              >
                {/* Dark gradient overlay */}
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,transparent 45%,rgba(0,0,0,0.8) 100%)', zIndex: 2 }} />

                {/* Watermark */}
                <div style={{
                  position: 'absolute', top: '40%', left: '50%',
                  transform: 'translate(-50%,-50%)',
                  fontSize: 96, fontWeight: 900,
                  color: 'rgba(255,255,255,0.06)', fontFamily: 'Sora, sans-serif',
                  userSelect: 'none', pointerEvents: 'none', lineHeight: 1,
                }}>{member.initials}</div>

                {/* Avatar */}
                <div style={{
                  position: 'absolute', top: '35%', left: '50%',
                  transform: 'translate(-50%,-50%)',
                  width: isActive ? 76 : 52, height: isActive ? 76 : 52,
                  borderRadius: '50%',
                  background: 'rgba(255,255,255,0.07)',
                  border: `2px solid rgba(244,190,40,${isActive ? 0.4 : 0.2})`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  transition: 'all 0.6s ease', zIndex: 3,
                }}>
                  <div style={{ width: 26, height: 26, borderRadius: '50%', background: 'rgba(244,190,40,0.15)', border: '1px solid rgba(244,190,40,0.3)' }} />
                </div>

                {/* Name & role */}
                <div style={{
                  position: 'absolute', bottom: 0, left: 0, right: 0,
                  padding: '20px 22px 26px', zIndex: 4,
                  opacity: isActive ? 1 : 0,
                  transition: 'opacity 0.4s ease',
                }}>
                  <div style={{ fontSize: 17, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em', marginBottom: 4 }}>{member.name}</div>
                  <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif' }}>{member.role}</div>
                </div>

                {/* Gold dot */}
                {isActive && (
                  <div style={{ position: 'absolute', top: 18, right: 18, zIndex: 4, width: 10, height: 10, borderRadius: '50%', background: '#f4be28', boxShadow: '0 0 14px rgba(244,190,40,0.9)' }} />
                )}
              </div>
            );
          })}
        </div>

        {/* Edge fade masks */}
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'linear-gradient(90deg,#07070d 0%,transparent 18%,transparent 82%,#07070d 100%)', zIndex: 10 }} />
      </div>

      {/* Navigation dots + arrow buttons */}
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 24, marginTop: 44, position: 'relative', zIndex: 2 }}>

        {/* Left arrow */}
        <button
          onClick={() => setActive(a => Math.max(0, a - 1))}
          disabled={active === 0}
          className="carousel-arrow"
          style={{
            width: 48, height: 48, borderRadius: '50%', border: '1.5px solid rgba(244,190,40,0.35)',
            background: active === 0 ? 'rgba(255,255,255,0.04)' : 'rgba(244,190,40,0.1)',
            color: active === 0 ? 'rgba(255,255,255,0.2)' : '#f4be28',
            cursor: active === 0 ? 'default' : 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            transition: 'all 0.3s ease',
            animation: active > 0 ? 'arrowPulse 2s ease-in-out infinite' : 'none',
          }}
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M19 12H5M12 5l-7 7 7 7"/>
          </svg>
        </button>

        {/* Dots */}
        <div style={{ display: 'flex', gap: 8 }}>
          {TEAM_MEMBERS.map((_, i) => (
            <button
              key={i}
              onClick={() => setActive(i)}
              style={{
                width: i === active ? 28 : 8, height: 8,
                borderRadius: 4, border: 'none', cursor: 'pointer', padding: 0,
                background: i === active ? '#f4be28' : 'rgba(255,255,255,0.2)',
                transition: 'all 0.35s ease',
              }}
            />
          ))}
        </div>

        {/* Right arrow */}
        <button
          onClick={() => setActive(a => Math.min(TEAM_MEMBERS.length - 1, a + 1))}
          disabled={active === TEAM_MEMBERS.length - 1}
          className="carousel-arrow"
          style={{
            width: 48, height: 48, borderRadius: '50%', border: '1.5px solid rgba(244,190,40,0.35)',
            background: active === TEAM_MEMBERS.length - 1 ? 'rgba(255,255,255,0.04)' : 'rgba(244,190,40,0.1)',
            color: active === TEAM_MEMBERS.length - 1 ? 'rgba(255,255,255,0.2)' : '#f4be28',
            cursor: active === TEAM_MEMBERS.length - 1 ? 'default' : 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            transition: 'all 0.3s ease',
            animation: active < TEAM_MEMBERS.length - 1 ? 'arrowPulse 2s ease-in-out 0.3s infinite' : 'none',
          }}
        >
          <svg width="18" height="18" 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>
        </button>
      </div>

      <style>{`
        @keyframes arrowPulse {
          0%,100% { box-shadow: 0 0 0 0 rgba(244,190,40,0); transform: scale(1); }
          50% { box-shadow: 0 0 0 8px rgba(244,190,40,0.15); transform: scale(1.08); }
        }
        .carousel-arrow:hover:not(:disabled) {
          background: rgba(244,190,40,0.22) !important;
          border-color: rgba(244,190,40,0.7) !important;
          transform: scale(1.12) !important;
          box-shadow: 0 0 20px rgba(244,190,40,0.3) !important;
        }
      `}</style>
    </section>
  );
}