// Features — six pillars, right side is empty for image.
const Features = () => {
  const [active, setActive] = React.useState(0);
  const listRef = React.useRef(null);
  const itemRefs = React.useRef([]);
  const isMobile = useResponsive();



  const pillars = [
    {
      title: 'Use your existing CCTV',
      icon: 'camera',
      body: 'No costly upgrades required.',
      illustration: (
        <svg width="100%" height="100%" viewBox="0 0 240 150" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="bgGrad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stopColor="#1a1530" /><stop offset="100%" stopColor="#0E0E10" /></linearGradient>
            <style>{`
              @keyframes bf-camera-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
              @keyframes bf-lens-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
              .bf-camera { animation: bf-camera-pulse 2s ease-in-out infinite; }
              .bf-lens { transform-origin: 120px 80px; animation: bf-lens-rotate 8s linear infinite; }
            `}</style>
          </defs>
          <rect width="240" height="150" fill="url(#bgGrad1)" />
          <g className="bf-camera">
            <rect x="60" y="40" width="120" height="80" rx="8" fill="none" stroke="#9146FF" strokeWidth="2" />
            <circle cx="120" cy="80" r="24" fill="none" stroke="#BF94FF" strokeWidth="2" className="bf-lens" />
            <circle cx="120" cy="80" r="16" fill="none" stroke="#BF94FF" strokeWidth="1" opacity="0.5" />
          </g>
        </svg>
      ),
    },
    {
      title: 'Every recording becomes insight',
      icon: 'database',
      body: 'Not wasted storage.',
      illustration: (
        <svg width="100%" height="100%" viewBox="0 0 240 150" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="bgGrad2" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stopColor="#1a1530" /><stop offset="100%" stopColor="#0E0E10" /></linearGradient>
            <style>{`
              @keyframes bf-data-flow { 0% { dashOffset: 20; } 100% { dashOffset: 0; } }
              @keyframes bf-sparkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
              .bf-data-line { animation: bf-data-flow 2s linear infinite; stroke-dasharray: 20; }
              .bf-sparkle { animation: bf-sparkle 1.5s ease-in-out infinite; }
            `}</style>
          </defs>
          <rect width="240" height="150" fill="url(#bgGrad2)" />
          <ellipse cx="80" cy="50" rx="28" ry="14" fill="none" stroke="#9146FF" strokeWidth="2" />
          <path d="M 52 50 L 52 90 A 28 14 0 0 0 108 90 L 108 50" fill="none" stroke="#9146FF" strokeWidth="2" />
          <ellipse cx="80" cy="90" rx="28" ry="14" fill="none" stroke="#9146FF" strokeWidth="2" />
          <path d="M 140 75 L 165 75" stroke="#BF94FF" strokeWidth="2" className="bf-data-line" markerEnd="url(#arrowhead2)" />
          <defs><marker id="arrowhead2" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto"><polygon points="0 0, 10 3, 0 6" fill="#BF94FF" /></marker></defs>
          <circle cx="190" cy="75" r="3" fill="#BF94FF" className="bf-sparkle" />
          <line x1="190" y1="55" x2="190" y2="65" stroke="#BF94FF" strokeWidth="1.5" className="bf-sparkle" />
          <line x1="190" y1="85" x2="190" y2="95" stroke="#BF94FF" strokeWidth="1.5" className="bf-sparkle" style={{ animationDelay: '0.3s' }} />
          <line x1="170" y1="75" x2="180" y2="75" stroke="#BF94FF" strokeWidth="1.5" className="bf-sparkle" style={{ animationDelay: '0.6s' }} />
          <line x1="200" y1="75" x2="210" y2="75" stroke="#BF94FF" strokeWidth="1.5" className="bf-sparkle" style={{ animationDelay: '0.9s' }} />
        </svg>
      ),
    },
    {
      title: 'Works with any camera',
      icon: 'check-circle',
      body: 'No compatibility worries.',
      illustration: (
        <svg width="100%" height="100%" viewBox="0 0 240 150" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="bgGrad3" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stopColor="#1a1530" /><stop offset="100%" stopColor="#0E0E10" /></linearGradient>
            <style>{`
              @keyframes bf-camera-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
              @keyframes bf-checkmark-draw { from { strokeDashoffset: 30; } to { strokeDashoffset: 0; } }
              .bf-cam1 { animation: bf-camera-float 3s ease-in-out infinite; }
              .bf-cam2 { animation: bf-camera-float 3s ease-in-out infinite 0.3s both; }
              .bf-cam3 { animation: bf-camera-float 3s ease-in-out infinite 0.6s both; }
              .bf-check { stroke-dasharray: 30; animation: bf-checkmark-draw 1.5s ease-out 0.5s forwards; }
            `}</style>
          </defs>
          <rect width="240" height="150" fill="url(#bgGrad3)" />
          <g className="bf-cam1" style={{ transformOrigin: '50px 75px' }}>
            <rect x="30" y="50" width="40" height="50" rx="4" fill="none" stroke="#9146FF" strokeWidth="2" />
            <circle cx="50" cy="75" r="12" fill="none" stroke="#BF94FF" strokeWidth="1.5" />
            <circle cx="50" cy="35" r="8" fill="none" stroke="#BF94FF" strokeWidth="1.5" />
          </g>
          <g className="bf-cam2" style={{ transformOrigin: '120px 85px' }}>
            <circle cx="120" cy="60" r="25" fill="none" stroke="#9146FF" strokeWidth="2" />
            <ellipse cx="120" cy="85" rx="25" ry="8" fill="none" stroke="#9146FF" strokeWidth="2" />
            <circle cx="120" cy="60" r="12" fill="none" stroke="#BF94FF" strokeWidth="1.5" />
          </g>
          <g className="bf-cam3" style={{ transformOrigin: '190px 70px' }}>
            <rect x="165" y="55" width="50" height="30" rx="15" fill="none" stroke="#9146FF" strokeWidth="2" />
            <circle cx="188" cy="70" r="10" fill="none" stroke="#BF94FF" strokeWidth="1.5" />
          </g>
        </svg>
      ),
    },
    {
      title: 'Guard, reporter, and assistant',
      icon: 'shield-alert',
      body: 'More than just monitoring.',
      illustration: (
        <svg width="100%" height="100%" viewBox="0 0 240 150" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="bgGrad4" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stopColor="#1a1530" /><stop offset="100%" stopColor="#0E0E10" /></linearGradient>
            <style>{`
              @keyframes bf-shield-glow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(145,70,255,0.4)); } 50% { filter: drop-shadow(0 0 12px rgba(145,70,255,0.8)); } }
              @keyframes bf-icon-appear { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
              .bf-shield { animation: bf-shield-glow 2.5s ease-in-out infinite; }
              .bf-guard { animation: bf-icon-appear 0.6s ease-out 0.2s both; }
              .bf-reporter { animation: bf-icon-appear 0.6s ease-out 0.4s both; }
              .bf-assistant { animation: bf-icon-appear 0.6s ease-out 0.6s both; }
            `}</style>
          </defs>
          <rect width="240" height="150" fill="url(#bgGrad4)" />
          <path d="M 120 35 L 85 55 L 85 85 Q 85 110 120 125 Q 155 110 155 85 L 155 55 Z" fill="none" stroke="#9146FF" strokeWidth="2" className="bf-shield" />
          <g className="bf-guard">
            <circle cx="95" cy="70" r="8" fill="none" stroke="#BF94FF" strokeWidth="1.5" />
            <path d="M 95 66 L 95 74" stroke="#BF94FF" strokeWidth="1" />
          </g>
          <g className="bf-reporter">
            <rect x="110" y="62" width="14" height="18" rx="1" fill="none" stroke="#BF94FF" strokeWidth="1.5" />
            <line x1="113" y1="67" x2="121" y2="67" stroke="#BF94FF" strokeWidth="1" />
            <line x1="113" y1="72" x2="121" y2="72" stroke="#BF94FF" strokeWidth="1" />
          </g>
          <g className="bf-assistant">
            <path d="M 135 75 L 145 75 Q 150 75 150 70 L 150 62 Q 150 57 145 57 L 135 57 Q 130 57 130 62 L 130 70 Q 130 75 135 75 L 133 82 L 130 75" fill="none" stroke="#BF94FF" strokeWidth="1.5" />
          </g>
        </svg>
      ),
    },
    {
      title: 'Smarter results with more compute',
      icon: 'zap',
      body: 'Allocate more hardware, get better analytics.',
      illustration: (
        <svg width="100%" height="100%" viewBox="0 0 240 150" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="bgGrad5" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stopColor="#1a1530" /><stop offset="100%" stopColor="#0E0E10" /></linearGradient>
            <style>{`
              @keyframes bf-stack-shift { 0% { transform: translateY(0px); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0px); } }
              @keyframes bf-bar-grow { from { height: 0; } to { height: var(--h); } }
              .bf-core { animation: bf-stack-shift 2s ease-in-out infinite; }
              .bf-bar1 { --h: 15px; animation: bf-bar-grow 1.5s ease-out 0s both; }
              .bf-bar2 { --h: 35px; animation: bf-bar-grow 1.5s ease-out 0.2s both; }
              .bf-bar3 { --h: 55px; animation: bf-bar-grow 1.5s ease-out 0.4s both; }
            `}</style>
          </defs>
          <rect width="240" height="150" fill="url(#bgGrad5)" />
          <g className="bf-core">
            <rect x="50" y="40" width="35" height="35" rx="2" fill="none" stroke="#9146FF" strokeWidth="1.5" />
            <circle cx="67.5" cy="57.5" r="4" fill="#9146FF" />
            <rect x="50" y="50" width="35" height="35" rx="2" fill="none" stroke="#BF94FF" strokeWidth="1.5" opacity="0.7" />
            <circle cx="67.5" cy="67.5" r="4" fill="#BF94FF" />
            <rect x="50" y="60" width="35" height="35" rx="2" fill="none" stroke="#BF94FF" strokeWidth="1.5" opacity="0.4" />
            <circle cx="67.5" cy="77.5" r="4" fill="#BF94FF" opacity="0.6" />
          </g>
          <path d="M 110 75 L 135 75" stroke="#BF94FF" strokeWidth="2" />
          <rect x="145" y="85" width="8" height="15" fill="#00C853" className="bf-bar1" />
          <rect x="158" y="65" width="8" height="35" fill="#00C853" className="bf-bar2" />
          <rect x="171" y="45" width="8" height="55" fill="#00C853" className="bf-bar3" />
        </svg>
      ),
    },
    {
      title: 'Smarter analytics, locally',
      icon: 'lock',
      body: 'Faster and more private.',
      illustration: (
        <svg width="100%" height="100%" viewBox="0 0 240 150" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="bgGrad6" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stopColor="#1a1530" /><stop offset="100%" stopColor="#0E0E10" /></linearGradient>
            <style>{`
              @keyframes bf-lock-secure { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.95); } }
              @keyframes bf-speed-dash { from { dashOffset: 20; } to { dashOffset: 0; } }
              .bf-device { animation: bf-lock-secure 2s ease-in-out infinite; transform-origin: 85px 80px; }
              .bf-speed1 { stroke-dasharray: 20; animation: bf-speed-dash 1s linear infinite; }
              .bf-speed2 { stroke-dasharray: 30; animation: bf-speed-dash 1.2s linear infinite 0.3s; }
              .bf-speed3 { stroke-dasharray: 25; animation: bf-speed-dash 1.4s linear infinite 0.6s; }
            `}</style>
          </defs>
          <rect width="240" height="150" fill="url(#bgGrad6)" />
          <g className="bf-device">
            <rect x="50" y="45" width="70" height="60" rx="4" fill="none" stroke="#9146FF" strokeWidth="2" />
            <rect x="55" y="50" width="60" height="40" fill="none" stroke="#9146FF" strokeWidth="1" />
            <circle cx="85" cy="105" r="3" fill="#9146FF" />
            <rect x="70" y="65" width="30" height="25" rx="2" fill="none" stroke="#BF94FF" strokeWidth="1.5" />
            <path d="M 75 65 L 75 58 Q 75 52 80 52 Q 85 52 85 58 L 85 65" fill="none" stroke="#BF94FF" strokeWidth="1.5" />
            <circle cx="85" cy="77" r="2" fill="#BF94FF" />
          </g>
          <line x1="140" y1="60" x2="165" y2="60" stroke="#00C853" strokeWidth="2" className="bf-speed1" />
          <line x1="140" y1="75" x2="175" y2="75" stroke="#00C853" strokeWidth="2" className="bf-speed2" />
          <line x1="140" y1="90" x2="170" y2="90" stroke="#00C853" strokeWidth="2" className="bf-speed3" />
        </svg>
      ),
    },
  ];

  return (
    <Section eyebrow="Features" style={{ paddingTop: 80, paddingBottom: 100 }}>
      <Reveal>
        <h2 className="bf-section-h2" style={{
          fontSize: isMobile ? 32 : 60, fontWeight: 800, letterSpacing: '-0.025em',
          color: '#EFEFF1', margin: '0 0 8px', maxWidth: 760, lineHeight: 1.05,
        }}>
          What can you do with <span style={{ color: '#9146FF' }}>BlinkFree</span>?
        </h2>
        <p style={{ fontSize: 20, color: '#ADADB8', maxWidth: 600, margin: '0 0 56px', lineHeight: 1.55 }}>
          Six core capabilities that transform ordinary CCTV into intelligent security.
        </p>
      </Reveal>

      <div className="bf-features-grid" style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1.1fr',
        gap: isMobile ? 40 : 60,
        alignItems: 'start',
      }}>
        {/* Left column: six feature items */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }} ref={listRef}>
          {pillars.map((p, i) => (
            <div key={p.title}
              ref={(el) => { itemRefs.current[i] = el; }}
              style={{
                position: 'relative',
                padding: 16,
                borderRadius: 8,
                border: i === active ? '2px solid #9146FF' : '2px solid transparent',
                background: i === active ? 'rgba(145,70,255,0.08)' : 'transparent',
                transition: 'all 300ms',
              }}
            >
              <button
                onClick={() => setActive(i)}
                style={{
                  display: 'flex', gap: 16, alignItems: 'flex-start',
                  background: 'none', border: 'none', cursor: 'pointer',
                  fontFamily: 'inherit', color: 'inherit', padding: 0,
                  textAlign: 'left', transition: 'opacity 100ms', width: '100%',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.opacity = '0.8'; }}
                onMouseLeave={(e) => { e.currentTarget.style.opacity = '1'; }}
              >
                <div style={{
                  width: 40, height: 40, borderRadius: 6, flexShrink: 0,
                  background: i === active ? 'rgba(145,70,255,0.20)' : 'rgba(145,70,255,0.10)',
                  border: '1px solid rgba(145,70,255,0.30)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  transition: 'background 200ms',
                }}>
                  <i data-lucide={p.icon} style={{ width: 18, height: 18, color: '#BF94FF' }}></i>
                </div>
                <div style={{ flex: 1 }}>
                  <h3 style={{ fontSize: 18.75, fontWeight: 700, color: '#EFEFF1', margin: '0 0 4px' }}>{p.title}</h3>
                  <p style={{ fontSize: 16.25, color: '#ADADB8', lineHeight: 1.55, margin: 0 }}>{p.body}</p>
                </div>
              </button>
            </div>
          ))}
        </div>

        {/* Right: image placeholder */}
        <div style={{
          background: '#18181B', borderRadius: 6, border: '1px solid #2F2F35',
          aspectRatio: '16/10', display: 'flex', alignItems: 'center', justifyContent: 'center',
          overflow: 'hidden', position: 'relative',
        }}>
          {pillars[active].illustration}
        </div>
      </div>
    </Section>
  );
};

window.Features = Features;
