src/components/FeeTransparencyModule.jsx

import React, { useState } from 'react';
import { Search, ChevronRight, ShieldCheck, X, DollarSign, Info, Activity } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

export default function FeeTransparencyModule({ portfolio }) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const { hiddenFees } = portfolio;
  
  // Convert percentages to an illustrative dollar amount based on a $10,000 investment over 1 year
  const illustrativeInvestment = 10000;
  const expenseRatioCost = (illustrativeInvestment * (hiddenFees.expenseRatio / 100)).toFixed(2);
  const advisoryCost = (illustrativeInvestment * (hiddenFees.advisoryFee / 100)).toFixed(2);
  const totalCost = (parseFloat(expenseRatioCost) + parseFloat(advisoryCost) + hiddenFees.tradingCosts).toFixed(2);

  return (
    <>
      <motion.div 
        whileHover={{ scale: 1.02 }}
        whileTap={{ scale: 0.98 }}
        onClick={() => setIsModalOpen(true)}
        className="h-full flex items-center justify-center"
      >
        <div className="w-full bg-gs-navy text-white rounded-[4rem] p-4 pl-6 pr-8 shadow-xl flex items-center justify-between cursor-pointer group hover:bg-gs-navy/95 transition-all border border-white/10 relative overflow-hidden">
          <div className="absolute -right-4 -top-4 w-24 h-24 bg-gs-gold/5 rounded-full blur-2xl"></div>
          
          <div className="flex items-center gap-4">
            <div className="p-3 rounded-full bg-gs-gold/20 text-gs-gold group-hover:bg-gs-gold group-hover:text-gs-navy transition-all">
              <ShieldCheck size={20} />
            </div>
            <div>
              <h2 className="text-sm font-bold tracking-tight">Radical Transparency</h2>
              <p className="text-white/40 text-[9px] uppercase font-bold tracking-[0.1em]">Fee Report</p>
            </div>
          </div>

          <div className="flex items-center gap-5">
            <div className="text-right">
              <span className="block text-xl font-bold text-gs-gold">${Math.round(totalCost)}</span>
            </div>
            <div className="p-2 rounded-full bg-white/5 text-white/40 group-hover:bg-white/10 group-hover:text-white transition-all">
              <ChevronRight size={16} />
            </div>
          </div>
        </div>
      </motion.div>

      <AnimatePresence>
        {isModalOpen && (
          <div className="fixed inset-0 z-[100] flex items-center justify-center p-6">
            <motion.div 
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setIsModalOpen(false)}
              className="absolute inset-0 bg-gs-navy/60 backdrop-blur-md"
            />
            
            <motion.div
              initial={{ opacity: 0, scale: 0.9, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.9, y: 20 }}
              className="relative bg-white rounded-[2.5rem] shadow-2xl w-full max-w-lg overflow-hidden border border-white/20"
            >
              {/* Modal Header */}
              <div className="bg-gs-navy p-8 text-white relative">
                <div className="absolute -right-10 -top-10 w-40 h-40 bg-gs-gold/10 rounded-full blur-3xl"></div>
                <div className="flex justify-between items-start relative z-10">
                  <div>
                    <div className="flex items-center gap-3 mb-2">
                      <div className="p-2 bg-gs-gold rounded-lg text-gs-navy">
                        <Search size={20} />
                      </div>
                      <span className="text-gs-gold text-[10px] font-black uppercase tracking-[0.2em]">Transparency Report</span>
                    </div>
                    <h2 className="text-3xl font-light">Radical Transparency</h2>
                    <p className="text-white/40 text-xs mt-1">Cost breakdown per $10,000 invested annually</p>
                  </div>
                  <button 
                    onClick={() => setIsModalOpen(false)}
                    className="p-2 bg-white/5 hover:bg-white/10 text-white/60 hover:text-white rounded-full transition-all"
                  >
                    <X size={20} />
                  </button>
                </div>
              </div>

              <div className="p-8 space-y-6">
                <div className="space-y-4">
                  <div className="flex justify-between items-center bg-gs-light/50 p-5 rounded-2xl border border-gray-100">
                    <div>
                      <span className="block text-xs font-bold text-gs-navy uppercase tracking-wider">Fund Expense Ratios</span>
                      <span className="text-[10px] text-gs-slate/60">{hiddenFees.expenseRatio}% blended average</span>
                    </div>
                    <span className="font-bold text-xl text-gs-navy">${expenseRatioCost}</span>
                  </div>

                  <div className="flex justify-between items-center bg-gs-light/50 p-5 rounded-2xl border border-gray-100">
                    <div>
                      <span className="block text-xs font-bold text-gs-navy uppercase tracking-wider">Platform & Advisory</span>
                      <span className="text-[10px] text-gs-slate/60">{hiddenFees.advisoryFee}% management fee</span>
                    </div>
                    <span className="font-bold text-xl text-gs-navy">${advisoryCost}</span>
                  </div>

                  <div className="flex justify-between items-center bg-gs-light/50 p-5 rounded-2xl border border-gray-100">
                    <div>
                      <span className="block text-xs font-bold text-gs-navy uppercase tracking-wider">Estimated Trading Costs</span>
                      <span className="text-[10px] text-gs-slate/60">Bid/ask spreads & execution</span>
                    </div>
                    <span className="font-bold text-xl text-gs-navy">${hiddenFees.tradingCosts.toFixed(2)}</span>
                  </div>
                </div>

                <div className="bg-gs-navy rounded-2xl p-6 text-white flex justify-between items-center shadow-lg">
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 bg-white/5 rounded-xl flex items-center justify-center text-gs-gold">
                      <Activity size={24} />
                    </div>
                    <div>
                      <p className="text-[10px] font-bold text-white/40 uppercase tracking-widest">Total Yearly Impact</p>
                      <p className="text-2xl font-bold text-gs-gold">${totalCost}</p>
                    </div>
                  </div>
                  <div className="text-right">
                    <p className="text-[9px] font-bold text-white/40 uppercase tracking-widest mb-1">Fee Rating</p>
                    <span className="px-3 py-1 bg-gs-gold text-gs-navy text-[10px] font-black uppercase rounded-lg">
                      {portfolio.feeImpact}
                    </span>
                  </div>
                </div>

                <p className="text-[11px] text-gs-slate/60 leading-relaxed italic text-center px-4">
                  "The most expensive investment is the one with hidden costs. We provide this report to ensure your capital works for you, not the middleman."
                </p>

                <button 
                  onClick={() => setIsModalOpen(false)}
                  className="w-full bg-gs-navy text-white py-4 rounded-2xl font-bold text-sm hover:bg-gs-navy/95 transition-all shadow-xl shadow-gs-navy/20 active:scale-[0.98]"
                >
                  Close Report
                </button>
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </>
  );
}