ea-ai

import React, { useState, useRef, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Brain, Heart, Zap, Flame, History, Compass, Bot, Settings, HelpCircle, X, Send, Mic, Sparkles } from 'lucide-react'; // --- Data: Feature Configuration --- const FEATURES = [ { id: 'mood', title: 'Mood Sculptor', desc: 'Transform Emotional States', icon: Brain, color: 'from-blue-600 to-violet-600', text: 'text-violet-400', border: 'border-violet-500/50', shadow: 'shadow-violet-500/50' }, { id: 'empathy', title: 'Empathy Mirror', desc: 'Understand Perspectives', icon: Heart, color: 'from-teal-500 to-emerald-500', text: 'text-emerald-400', border: 'border-emerald-500/50', shadow: 'shadow-emerald-500/50' }, { id: 'reframer', title: 'Cognitive Reframer', desc: 'Challenge Negative Thoughts', icon: Zap, color: 'from-orange-500 to-yellow-500', text: 'text-orange-400', border: 'border-orange-500/50', shadow: 'shadow-orange-500/50' }, { id: 'stress', title: 'Bubble Burster', desc: 'Release Tension', icon: Flame, color: 'from-red-600 to-pink-600', text: 'text-red-400', border: 'border-red-500/50', shadow: 'shadow-red-500/50' }, { id: 'memory', title: 'Memory Harmonizer', desc: 'Integrate Past Experiences', icon: History, color: 'from-indigo-400 to-pink-400', text: 'text-pink-400', border: 'border-pink-400/50', shadow: 'shadow-pink-500/50' }, { id: 'future', title: 'Future Pathfinder', desc: 'Guide Towards Goals', icon: Compass, color: 'from-cyan-500 to-blue-500', text: 'text-cyan-400', border: 'border-cyan-400/50', shadow: 'shadow-cyan-500/50' }, ]; // --- Component: The Active Tool View (New!) --- const InteractionView = ({ feature, onClose }) => { return ( {/* 1. Header */}

{feature.title}

AI Active • Session ID: #8821X

{/* 2. Chat / Interaction Area */}

{/* AI Message */}

Welcome to the {feature.title}.

I am ready to help you process. How are you feeling right now regarding this specific area?

{/* User Message Simulation */}

{/* Avatar Placeholder */}

I'm feeling a bit overwhelmed, honestly. I need to break this down.

{/* 3. Input Console */}

<button className={`p-3 rounded-xl bg-gradient-to-br ${feature.color} text-white shadow-lg hover:scale-105 transition-transform`}>
            <Send className="w-5 h-5" />
          </button>
        </div>
        <div className="text-center mt-3 text-xs text-slate-500 flex items-center justify-center gap-2">
          <Sparkles className="w-3 h-3" /> AI model running locally in secure environment
        </div>
      </div>
    </motion.div>
  );
};

// --- Component: Dashboard Card ---
const FeatureCard = ({ feature, index, onSelect }) => (
  <motion.button
    layoutId={`card-${feature.id}`}
    onClick={() => onSelect(feature)}
    initial={{ opacity: 0, scale: 0.9 }}
    animate={{ opacity: 1, scale: 1 }}
    transition={{ delay: index * 0.1 }}
    whileHover={{ scale: 1.03, y: -5 }}
    className={`relative group overflow-hidden rounded-3xl border border-white/10 bg-slate-900/40 backdrop-blur-md p-6 text-left flex flex-col justify-between h-56 w-full hover:border-white/20 transition-all duration-300`}
  >
    <div className={`absolute inset-0 opacity-0 group-hover:opacity-10 bg-gradient-to-br ${feature.color} transition-opacity duration-500`} />
    <div className={`w-12 h-12 rounded-2xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-4 shadow-lg group-hover:scale-110 transition-transform`}>
      <feature.icon className="text-white w-6 h-6" />
    </div>
    <div className="relative z-10">
      <h3 className="text-xl font-bold text-white mb-1 tracking-wide">{feature.title}</h3>
      <p className="text-slate-400 text-sm group-hover:text-slate-200 transition-colors">{feature.desc}</p>
    </div>
  </motion.button>
);

// --- Main App Component ---
export default function EcosystemDashboard() {
  const [selectedFeature, setSelectedFeature] = useState(null);

return (
    <div className="min-h-screen bg-[#050511] text-white font-sans relative overflow-hidden flex flex-col items-center justify-center p-6">
      
      {/* Background Ambience */}
      <div className="absolute inset-0 z-0 pointer-events-none">
        <div className="absolute top-[-10%] left-[20%] w-[500px] h-[500px] bg-blue-900/20 rounded-full blur-[120px] mix-blend-screen" />
        <div className="absolute bottom-[-10%] right-[20%] w-[500px] h-[500px] bg-purple-900/10 rounded-full blur-[120px] mix-blend-screen" />
      </div>

{/* Navigation */}
      <nav className="absolute top-0 w-full p-6 flex justify-between items-center z-20">
        <div className="text-xl font-bold tracking-widest text-white/80">EM-AI</div>
        <div className="flex gap-4">
          <button className="p-2 rounded-full hover:bg-white/10"><HelpCircle className="w-6 h-6 text-slate-400" /></button>
          <button className="p-2 rounded-full hover:bg-white/10"><Settings className="w-6 h-6 text-slate-400" /></button>
        </div>
      </nav>

{/* Main Dashboard Content */}
      <div className="relative z-10 w-full max-w-6xl flex flex-col items-center gap-12">
        <div className="text-center">
          <div className="relative w-24 h-24 mx-auto bg-gradient-to-b from-slate-800 to-slate-950 border border-cyan-500/50 rounded-full flex items-center justify-center shadow-[0_0_30px_rgba(6,182,212,0.3)]">
            <Bot className="w-10 h-10 text-cyan-400" />
          </div>
          <h1 className="mt-6 text-4xl md:text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-cyan-200 via-white to-purple-200">
            How are you feeling?
          </h1>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full px-4">
          {FEATURES.map((feature, index) => (
            <FeatureCard 
              key={feature.id} 
              feature={feature} 
              index={index} 
              onSelect={setSelectedFeature} 
            />
          ))}
        </div>
      </div>

{/* The Interaction Overlay */}
      <AnimatePresence>
        {selectedFeature && (
          <InteractionView 
            feature={selectedFeature} 
            onClose={() => setSelectedFeature(null)} 
          />
        )}
      </AnimatePresence>

</div>
  );
}</div><script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=67c8b63cf22ae4778cf07e92" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://cdn.prod.website-files.com/67c8b63cf22ae4778cf07e92/js/webflow.schunk.ff560088e0bd9e74.js" type="text/javascript" integrity="sha384-cEbwBly6SQ1GQaV7P9BWHyDPCeUI5dhXU22CKlbvPwO8zIPPi/av+CbzZqwavg/K" crossorigin="anonymous"></script><script src="https://cdn.prod.website-files.com/67c8b63cf22ae4778cf07e92/js/webflow.751e0867.6551f58fa950fc60.js" type="text/javascript" integrity="sha384-1dzC0J/1cXneCALthyqDxwNOGMQVz5u79cgPYtq+trc8svQGAEjWtfOWQQilgE8m" crossorigin="anonymous"></script>

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WL6KZD64"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

// helper to push GTM/GA4 events
  function pushEvent(eventName, payload = {}) {
    const out = { event: eventName };
    if (payload.day != null) {
      const d = parseInt(payload.day, 10);
      if (!Number.isNaN(d)) out.day = d;
    }
    if (payload.challenge_name) out.challenge_name = String(payload.challenge_name);
    if (typeof console !== 'undefined') console.log('[EM GTM]', out);
    window.dataLayer.push(out);
  }

// auto-bind: click any element with data-em-event="..." and optional data-day="N"
  document.addEventListener('click', function(e) {
    const el = e.target.closest('[data-em-event]');
    if (!el) return;
    const name = el.getAttribute('data-em-event');
    const day = el.getAttribute('data-day');
    if (name) pushEvent(name, { day, challenge_name: '7_days_to_calm' });
  });

// optional helpers you can call from custom code embeds or Webflow interactions:
  window.EM = {
    start(day){ pushEvent('em_convai_started', { day, challenge_name: '7_days_to_calm' }); },
    end(day){ pushEvent('em_convai_ended', { day, challenge_name: '7_days_to_calm' }); },
    unlock(day){ pushEvent('em_day_unlocked', { day, challenge_name: '7_days_to_calm' }); },
    reset(day){ pushEvent('em_day_reset', { day, challenge_name: '7_days_to_calm' }); },
    jump(day){ pushEvent('em_jump_to_today', { day, challenge_name: '7_days_to_calm' }); },
    complete(day){ pushEvent('em_day_complete', { day, challenge_name: '7_days_to_calm' }); }
  };
</script>

<!--  
<elevenlabs-convai agent-id="agent_4201k708pqxsed39y0vsz05gn66e"></elevenlabs-convai>