mintel.me/apps/web/src/components/InteractiveElements.tsx

'use client';

import React, { useEffect, useState } from 'react';

export const InteractiveElements: React.FC = () => {
  const [progress, setProgress] = useState(0);
  const [showBackToTop, setShowBackToTop] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.scrollY;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      
      if (docHeight > 0) {
        setProgress((scrollTop / docHeight) * 100);
      }

      setShowBackToTop(scrollTop > 300);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <>
      {/* Reading Progress Bar */}
      <div 
        className="reading-progress-bar" 
        style={{ 
          transform: `scaleX(${progress / 100})`,
          display: 'block'
        }} 
      />

      {/* Floating Back to Top Button */}
      <button 
        onClick={scrollToTop}
        className={`floating-back-to-top ${showBackToTop ? 'visible' : ''}`}
        aria-label="Back to top"
        style={{ display: 'flex' }}
      >
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
        </svg>
      </button>
    </>
  );
};