www_mycelium_society/src/components/Foundations.jsx

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

import legal from '../assets/legal.png';
import collective from '../assets/collective.png';
import sovereign from '../assets/sovereign.png';

const Foundations = () => {

  
  const [activeImage, setActiveImage] = useState(legal);
  const [hoveredIndex, setHoveredIndex] = useState(0); // Start with first item highlighted

  const foundations = [
    {
      title: 'Legal Framework',
      line1: 'Operate as a sovereign legal entity within our digital free zone. Form businesses, manage compliance, and handle taxation, all within a transparent, compliant system designed for digital sovereignty.',
      image: legal,
    },
    {
      title: 'Collective Direction',
      line1: 'Members guide the roadmap. Every voice counts, every vote matters.',
      line2: 'Together, we decide which tools replace corporate dependencies.',
      image: collective,
    },
    {
      title: 'Sovereign Infrastructure',
      line1: 'A decentralized cloud, peer-to-peer networking protocols, and a legally recognized digital free zone. Your systems, your control, hosted on networks that cannot be shut down.',
      image: sovereign,
    },
  ];

  return (
    <section id="foundations" className="bg-gradient-to-b from-gray-900 to-black py-20 text-white">
      <div className="max-w-7xl mx-auto px-6">
        {/* Header */}
        <div className="mb-16 text-center">
          <h2 className="text-5xl font-bold text-center">
            The <span className="text-cyan-400">Foundations</span> of the
          </h2>
          <h2 className="text-5xl font-bold text-center">Mycelium Society</h2>
        </div>

        {/* Two Column Container - Using Inline Styles for Absolute Control */}
        <div style={{ display: 'flex', flexDirection: 'row', gap: '6rem', alignItems: 'center', justifyContent: 'center' }} className="flex-col lg:flex-row">
          {/* Left Column - Image */}
          <div style={{ width: '280px', flexShrink: 0 }} className="w-full lg:w-auto mb-12 lg:mb-0">
            <div className="lg:sticky lg:top-24">
              <AnimatePresence mode="wait">
                <motion.img
                  key={activeImage}
                  src={activeImage}
                  alt="Foundation illustration"
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.9 }}
                  transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
                  style={{ width: '100%', height: 'auto', display: 'block' }}
                />
              </AnimatePresence>
            </div>
          </div>

          {/* Right Column - Text Content */}
          <div style={{ flex: 1, minWidth: 0, maxWidth: '60ch' }} className="w-full">
            <div className="space-y-8">
              {foundations.map((foundation, index) => (
                <motion.div
                  key={index}
                  onMouseEnter={() => {
                    setActiveImage(foundation.image);
                    setHoveredIndex(index);
                  }}
                  onMouseLeave={() => {
                    setActiveImage(mushroom);
                    setHoveredIndex(null);
                  }}
                  className="relative group cursor-pointer"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.1 }}
                >
                  <div className={`
                    p-6 pb-8 rounded-lg transition-all duration-300 text-center
                    ${hoveredIndex === index
                      ? 'bg-gray-800/50 backdrop-blur-sm'
                      : 'bg-transparent'
                    }
                  `}>
                    <motion.div
                      className="absolute left-0 top-0 bottom-0 w-1 bg-cyan-400"
                      initial={{ scaleY: 0 }}
                      animate={{ scaleY: hoveredIndex === index ? 1 : 0 }}
                      transition={{ duration: 0.3 }}
                    />
                    
                    <h3 className={`
                      text-2xl lg:text-3xl font-bold mb-2 transition-colors duration-300
                      ${hoveredIndex === index ? 'text-cyan-400' : 'text-white'}
                    `}>
                      {foundation.title}
                    </h3>
                    
                    <p className={`
                      text-base lg:text-lg leading-relaxed transition-all duration-300
                      ${hoveredIndex === index ? 'text-gray-100' : 'text-gray-400'}
                    `}>
                      {foundation.line1}
                    </p>
                    <p className={`
                      text-base lg:text-lg leading-relaxed transition-all duration-300 mt-2 mb-12
                      ${hoveredIndex === index ? 'text-gray-100' : 'text-gray-400'}
                    `}>
                      {foundation.line2}
                    </p>
                  </div>

                  {index < foundations.length - 1 && (
                    <div className="mt-6 h-px bg-gradient-to-r from-gray-700 via-gray-600 to-transparent" />
                  )}
                </motion.div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Foundations;