```jsx
'use client';

import React, { useState, useMemo, useCallback, useEffect } from 'react';
import { 
  Users, 
  Kanban, 
  CheckSquare, 
  DollarSign, 
  UploadCloud, 
  Search, 
  Bell, 
  Phone, 
  Mail, 
  ArrowLeft, 
  ArrowRight, 
  Trophy, 
  AlertCircle, 
  FileText, 
  CheckCircle2, 
  ChevronRight, 
  MoreHorizontal,
  Send,
  CreditCard,
  Building2,
  Wallet,
  ArrowDownUp,
  Banknote,
  X
} from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

// --- Mock Data ---
const INITIAL_CONTACTS = [
  { id: '1', name: 'Mark Hanson', company: 'HVAC Solutions', role: 'Owner', location: 'Chicago, IL', phone: '+1 (312) 555-0182', email: 'm.hanson@hvacsolutions.com', value: 2400, badge: 'Hot lead', badgeColor: 'text-red-400', stage: 3, avatar: 'MH', avatarBg: 'bg-red-900/30', notes: 'Wants website + SEO. Budget ~$2,500. Follow up Friday with proposal.' },
  { id: '2', name: 'Sarah Reem', company: 'GreenBuild Ltd.', role: 'Director', location: 'Austin, TX', phone: '+1 (512) 555-0231', email: 's.reem@greenbuild.com', value: 2800, badge: 'Warm', badgeColor: 'text-yellow-400', stage: 1, avatar: 'SR', avatarBg: 'bg-yellow-900/30', notes: '' },
  { id: '3', name: 'Tom Parker', company: 'Westside Woodwork', role: 'Owner', location: 'Denver, CO', phone: '+1 (720) 555-0144', email: 'tom@westsidewood.com', value: 1200, badge: 'New', badgeColor: 'text-blue-400', stage: 0, avatar: 'TP', avatarBg: 'bg-blue-900/30', notes: '' },
  { id: '4', name: 'Ana Lima', company: 'Spa Luxe Group', role: 'Manager', location: 'Miami, FL', phone: '+1 (305) 555-0376', email: 'ana.lima@spaluxe.com', value: 4200, badge: 'Warm', badgeColor: 'text-yellow-400', stage: 1, avatar: 'AL', avatarBg: 'bg-green-900/30', notes: '' },
  { id: '5', name: 'David Kim', company: 'Metro Plumbing', role: 'Owner', location: 'Seattle, WA', phone: '+1 (206) 555-0289', email: 'd.kim@metroplumb.com', value: 3500, badge: 'New', badgeColor: 'text-blue-400', stage: 0, avatar: 'DK', avatarBg: 'bg-purple-900/30', notes: '' },
  { id: '6', name: 'Ben Walsh', company: 'Walsh Roofing', role: 'Owner', location: 'Portland, OR', phone: '+1 (503) 555-0412', email: 'ben@walshroofing.com', value: 1800, badge: 'Closed', badgeColor: 'text-emerald-400', stage: 5, avatar: 'BW', avatarBg: 'bg-orange-900/30', notes: '' },
];

const STAGES = ['New', 'Follow-up', 'Meeting', 'Quote sent', 'Negotiating', 'Closed'];

const DAILY_TASKS = [
  { id: 'calls', label: '8 cold calls', current: 3, target: 8 },
  { id: 'followups', label: '5 follow-up emails', current: 2, target: 5 },
  { id: 'quotes', label: '2 quotes sent', current: 0, target: 2 },
  { id: 'meetings', label: '1 meeting booked', current: 0, target: 1 },
  { id: 'pipeline', label: 'Pipeline updated', current: 0, target: 1 },
];

const REVENUE_DATA = [
  { id: 'r1', client: 'Ben Walsh — Walsh Roofing', value: 1800, method: 'Stripe', status: 'Paid' },
  { id: 'r2', client: 'Jen Morris — City Spa', value: 2400, method: 'Bank transfer', status: 'Paid' },
];

// --- Components ---

const ProgressBar = ({ value, max, color = 'bg-emerald-500' }) => (
  <div className="w-full h-1.5 bg-gray-700/40 rounded-full overflow-hidden">
    <div 
      className={`h-full ${color} transition-all duration-700 ease-out`} 
      style={{ width: `${Math.min(100, (value / max) * 100)}%` }} 
    />
  </div>
);

const Avatar = ({ initials, bgColor, size = 'md', className = '' }) => {
  const sizes = { sm: 'w-6 h-6 text-[10px]', md: 'w-9 h-9 text-xs', lg: 'w-10 h-10 text-sm' };
  return (
    <div className={`${bgColor} ${sizes[size]} rounded-full flex items-center justify-center text-gray-200 font-medium shrink-0 border border-gray-700/50 ${className}`}>
      {initials}
    </div>
  );
};

const Button = ({ children, variant = 'primary', size = 'md', icon: Icon, className = '', onClick, disabled }) => {
  const variants = {
    primary: 'bg-[#4A90E2] hover:bg-[#3B7DD0] text-white',
    secondary: 'bg-gray-700/40 hover:bg-gray-700/60 text-gray-200 border border-gray-700/50',
    success: 'bg-emerald-600 hover:bg-emerald-500 text-white',
    danger: 'bg-red-600 hover:bg-red-500 text-white',
    ghost: 'bg-transparent hover:bg-gray-700/30 text-gray-300',
  };
  const sizes = {
    sm: 'px-2.5 py-1.5 text-xs',
    md: 'px-3 py-2 text-xs',
    lg: 'px-4 py-2.5 text-sm',
  };
  return (
    <button 
      onClick={onClick}
      disabled={disabled}
      className={`${variants[variant]} ${sizes[size]} rounded-md font-medium transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed ${className}`}
    >
      {Icon && <Icon size={14} />}
      {children}
    </button>
  );
};

const Modal = ({ isOpen, onClose, title, children }) => {
  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
      <div className="bg-[#2B2D31] border border-gray-700/50 rounded-xl w-full max-w-lg shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
        <div className="p-4 border-b border-gray-700/50 flex items-center justify-between bg-[#212121]">
          <h3 className="text-sm font-semibold text-white">{title}</h3>
          <button onClick={onClose} className="p-1 hover:bg-gray-700/50 rounded-md text-gray-400 hover:text-white transition-colors">
            <X size={16} />
          </button>
        </div>
        <div className="p-5 overflow-y-auto">
          {children}
        </div>
      </div>
    </div>
  );
};

// --- Main Application ---
export default function SalesRepCRM() {
  const [activeTab, setActiveTab] = useState('contact');
  const [contacts, setContacts] = useState(INITIAL_CONTACTS);
  const [selectedContactId, setSelectedContactId] = useState(INITIAL_CONTACTS[0].id);
  const [wins, setWins] = useState(2);
  const [tasks, setTasks] = useState(DAILY_TASKS.map(t => ({ ...t, done: false })));
  const [isInvoiceOpen, setIsInvoiceOpen] = useState(false);
  const [notification, setNotification] = useState(null);
  const [importPhase, setImportPhase] = useState('idle'); // idle, mapping, done

  const selectedContact = contacts.find(c => c.id === selectedContactId) || contacts[0];

  const showNotify = useCallback((msg, type = 'success') => {
    setNotification({ msg, type });
    setTimeout(() => setNotification(null), 3000);
  }, []);

  const updateStage = useCallback((id, newStage) => {
    setContacts(prev => prev.map(c => c.id === id ? { ...c, stage: newStage, badge: newStage === 5 ? 'Closed' : c.badge, badgeColor: newStage === 5 ? 'text-emerald-400' : c.badgeColor } : c));
  }, []);

  const handleMove = useCallback((dir) => {
    const currentStage = selectedContact.stage;
    const nextStage = dir === 'fwd' ? Math.min(5, currentStage + 1) : Math.max(0, currentStage - 1);
    if (nextStage !== currentStage) {
      updateStage(selectedContact.id, nextStage);
      showNotify(`Moved ${selectedContact.name} to ${STAGES[nextStage]}`);
      if (nextStage === 5) {
        setWins(w => w + 1);
        showNotify(`🎉 Deal closed for ${selectedContact.name}!`);
      }
    }
  }, [selectedContact, updateStage, showNotify]);

  const toggleTask = useCallback((id) => {
    setTasks(prev => {
      const updated = prev.map(t => t.id === id ? { ...t, done: !t.done } : t);
      const doneCount = updated.filter(t => t.done).length;
      setWins(doneCount); // Sync wins with tasks for this demo
      return updated;
    });
  }, []);

  const handleImport = useCallback(() => {
    if (importPhase === 'idle') {
      setImportPhase('mapping');
      showNotify('File loaded. 47 contacts detected. Please map columns.');
    } else {
      setImportPhase('done');
      showNotify('✅ 47 contacts successfully imported.');
      setTimeout(() => setImportPhase('idle'), 2000);
    }
  }, [importPhase, showNotify]);

  // --- Views ---
  const ContactView = () => {
    const c = selectedContact;
    return (
      <motion.div 
        initial={{ opacity: 0, y: 8 }} 
        animate={{ opacity: 1, y: 0 }} 
        transition={{ duration: 0.3 }}
        className="space-y-4"
      >
        {/* Header */}
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div className="flex items-center gap-3">
            <Avatar initials={c.avatar} bgColor={c.avatarBg} size="lg" />
            <div>
              <h1 className="text-base font-semibold text-white flex items-center gap-2">
                {c.name}
                <span className="text-[10px] px-2 py-0.5 rounded-full bg-gray-700/50 text-gray-300 font-medium border border-gray-700/50">
                  {c.badge}
                </span>
              </h1>
              <p className="text-xs text-gray-400 mt-0.5">{c.role} · {c.company} · {c.location}</p>
              <div className="flex items-center gap-3 mt-1.5 text-[11px] text-gray-400">
                <span className="flex items-center gap-1.5 hover:text-gray-300 cursor-pointer"><Phone size={12} /> {c.phone}</span>
                <span className="flex items-center gap-1.5 hover:text-gray-300 cursor-pointer"><Mail size={12} /> {c.email}</span>
              </div>
            </div>
          </div>
          <Button variant="secondary" icon={FileText} onClick={() => setIsInvoiceOpen(true)}>Generate Invoice</Button>
        </div>

        {/* Stage Indicator */}
        <div className="flex items-center gap-1.5 overflow-x-auto py-2 no-scrollbar">
          {STAGES.map((stage, idx) => {
            const isPast = idx < c.stage;
            const isCurrent = idx === c.stage;
            return (
              <React.Fragment key={stage}>
                <button
                  onClick={() => { updateStage(c.id, idx); showNotify(`Set to ${stage}`); if(idx===5) setWins(w=>w+1); }}
                  className={`
                    shrink-0 px-3 py-1 rounded-full text-[10px] font-medium transition-all border
                    ${isCurrent ? 'bg-[#4A90E2] border-[#4A90E2] text-white shadow-[0_0_8px_rgba(74,144,226,0.4)]' : ''}
                    ${isPast ? 'bg-gray-700/30 border-gray-700/40 text-emerald-400' : ''}
                    ${!isCurrent && !isPast ? 'bg-gray-800/40 border-gray-700/30 text-gray-500 hover:text-gray-300' : ''}
                  `}
                >
                  {stage}
                </button>
                {idx < 5 && <div className={`w-2 h-[1px] ${isPast || isCurrent ? 'bg-gray-600' : 'bg-gray-800'}`} />}
              </React.Fragment>
            );
          })}
        </div>

        {/* Actions */}
        <div className="flex flex-wrap gap-2">
          <Button variant="secondary" size="sm" icon={ArrowLeft} onClick={() => handleMove('back')} disabled={c.stage === 0}>Back</Button>
          <Button variant="primary" size="sm" icon={ArrowRight} onClick={() => handleMove('fwd')} disabled={c.stage === 5}>Forward</Button>
          <Button variant="secondary" size="sm" onClick={() => updateStage(c.id, 1)}>Follow-up</Button>
          <Button variant="secondary" size="sm" onClick={() => updateStage(c.id, 2)}>Meeting</Button>
          <Button variant="success" size="sm" icon={Trophy} onClick={() => updateStage(c.id, 5) || setWins(w=>w+1) || showNotify('Deal closed!')}>Close</Button>
          <Button variant="danger" size="sm" icon={AlertCircle} onClick={() => updateStage(c.id, 0) || showNotify('Marked as lost')}>Lost</Button>
        </div>

        {/* Content Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {/* Notes */}
          <div className="bg-[#30313D] border border-gray-700/40 rounded-xl p-3 flex flex-col gap-3">
            <div className="flex items-center gap-2 text-xs font-semibold text-gray-300">
              <FileText size={12} className="text-gray-400" />
              Call Notes
            </div>
            <textarea 
              className="w-full bg-[#212121] border border-gray-700/50 rounded-lg p-3 text-xs text-gray-300 placeholder-gray-600 focus:outline-none focus:border-[#4A90E2] focus:ring-1 focus:ring-[#4A90E2]/20 resize-none h-24 leading-relaxed"
              defaultValue={c.notes || "No notes yet..."}
            />
            <div className="flex gap-2 flex-wrap">
              {['Draft email', 'Objections', 'Meeting email'].map(action => (
                <button key={action} className="text-[10px] px-2 py-1 bg-gray-700/30 hover:bg-gray-700/50 border border-gray-700/40 rounded text-gray-400 hover:text-gray-200 transition-colors">
                  {action}
                </button>
              ))}
            </div>
          </div>

          {/* Activity */}
          <div className="bg-[#30313D] border border-gray-700/40 rounded-xl p-3 flex flex-col gap-3">
            <div className="flex items-center gap-2 text-xs font-semibold text-gray-300">
              <CheckSquare size={12} className="text-gray-400" />
              Activity History
            </div>
            <div className="space-y-3 pl-1">
              {[
                { type: 'Quote sent', detail: '$2,400 website package', time: '2 days ago', color: 'bg-yellow-400/80' },
                { type: 'Meeting', detail: 'Discussed design & scope', time: '4 days ago', color: 'bg-[#4A90E2]' },
                { type: 'Call', detail: '14 min, showed interest', time: '7 days ago', color: 'bg-[#4A90E2]' },
                { type: 'Imported', detail: 'From CSV file', time: '10 days ago', color: 'bg-gray-500' }
              ].map((item, i) => (
                <div key={i} className="flex gap-2.5 items-start">
                  <div className={`w-1.5 h-1.5 rounded-full shrink-0 mt-1 ${item.color}`} />
                  <div className="text-[11px]">
                    <span className="text-gray-200 font-medium">{item.type}</span>
                    <span className="text-gray-400 ml-1">— {item.detail}</span>
                    <div className="text-gray-600 mt-0.5 text-[10px]">{item.time}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </motion.div>
    );
  };

  const PipelineView = () => {
    return (
      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="flex flex-col gap-4 h-full">
        <div className="flex items-center justify-between">
          <h2 className="text-sm font-semibold text-white">Sales Pipeline</h2>
          <span className="text-xs text-gray-400">Total Value: <span className="text-white font-medium">$18,650</span></span>
        </div>
        <div className="flex-1 overflow-x-auto no-scrollbar pb-2">
          <div className="flex gap-3 min-w-[900px] h-full">
            {STAGES.map((stage, idx) => {
              const stageContacts = contacts.filter(c => c.stage === idx);
              return (
                <div key={stage} className="flex-1 min-w-[180px] bg-[#30313D] border border-gray-700/40 rounded-xl flex flex-col">
                  <div className="p-3 border-b border-gray-700/40 flex items-center justify-between sticky top-0 bg-[#30313D] rounded-t-xl z-10">
                    <span className="text-[11px] font-medium text-gray-300">{stage}</span>
                    <span className="bg-gray-700/40 text-gray-400 text-[10px] px-1.5 py-0.5 rounded-full">{stageContacts.length}</span>
                  </div>
                  <div className="p-2 space-y-2 overflow-y-auto flex-1">
                    {stageContacts.map(c => (
                      <div 
                        key={c.id} 
                        onClick={() => { setSelectedContactId(c.id); setActiveTab('contact'); }}
                        className="bg-[#212121] border border-gray-700/30 p-3 rounded-lg cursor-pointer hover:border-gray-600 hover:bg-[#25262C] transition-all group"
                      >
                        <div className="flex items-center gap-2 mb-1.5">
                          <Avatar initials={c.avatar} bgColor={c.avatarBg} size="sm" />
                          <div className="min-w-0">
                            <div className="text-[11px] font-medium text-white truncate">{c.name}</div>
                            <div className="text-[10px] text-gray-500 truncate">{c.company}</div>
                          </div>
                        </div>
                        <div className="flex items-center justify-between mt-2">
                          <span className="text-[10px] font-medium text-emerald-400">${c.value.toLocaleString()}</span>
                          <ChevronRight size={12} className="text-gray-600 group-hover:text-gray-400" />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <Button variant="secondary" size="sm" className="self-start" icon={Kanban} onClick={() => showNotify('Report generated')}>Full Pipeline Report</Button>
      </motion.div>
    );
  };

  const AccountabilityView = () => {
    const tasksDone = tasks.filter(t => t.done).length;
    return (
      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-5">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          {[
            { label: 'Calls made', value: '3', sub: 'Target: 8 today' },
            { label: 'Follow-ups sent', value: '2', sub: 'Target: 5 today' },
            { label: 'Deals moved', value: '1', sub: 'This week: 4' },
            { label: 'Revenue logged', value: '$1,800', sub: 'This month' }
          ].map((stat, i) => (
            <div key={i} className="bg-[#30313D] border border-gray-700/40 rounded-xl p-4 flex flex-col">
              <span className="text-[11px] text-gray-400 mb-1">{stat.label}</span>
              <span className="text-xl font-semibold text-white">{stat.value}</span>
              <span className="text-[10px] text-gray-500 mt-1">{stat.sub}</span>
            </div>
          ))}
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="bg-[#30313D] border border-gray-700/40 rounded-xl p-4">
            <div className="flex items-center justify-between mb-3">
              <span className="text-xs font-semibold text-white">Daily Targets</span>
              <span className="text-[10px] text-[#4A90E2]">{tasksDone} / 5 done</span>
            </div>
            <div className="space-y-3">
              {tasks.map(task => (
                <div key={task.id} className="flex items-center justify-between group">
                  <div className="flex items-center gap-2.5 cursor-pointer" onClick={() => toggleTask(task.id)}>
                    <div className={`w-4 h-4 rounded border flex items-center justify-center transition-all ${task.done ? 'bg-emerald-500 border-emerald-500' : 'border-gray-600 bg-gray-800/50 group-hover:border-gray-500'}`}>
                      {task.done && <CheckCircle2 size={12} className="text-white" />}
                    </div>
                    <span className={`text-[11px] ${task.done ? 'text-gray-400 line-through' : 'text-gray-300'}`}>{task.label}</span>
                  </div>
                  <span className="text-[10px] font-medium text-gray-500">{task.current} / {task.target}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="bg-[#30313D] border border-gray-700/40 rounded-xl p-4 space-y-4">
            <div className="flex items-center justify-between">
              <span className="text-xs font-semibold text-white">Monthly Quota</span>
              <span className="text-[10px] text-emerald-400">42% to goal</span>
            </div>
            {[
              { label: 'Revenue closed', val: '$4,200', pct: 42, color: 'bg-emerald-500' },
              { label: 'Calls made', val: '61%', pct: 61, color: 'bg-[#4A90E2]' },
              { label: 'Deals in pipe', val: '$16.8k', pct: 78, color: 'bg-yellow-500/80' },
              { label: 'Win rate', val: '67%', pct: 67, color: 'bg-purple-500/80' }
            ].map((prog, i) => (
              <div key={i} className="space-y-1">
                <div className="flex items-center justify-between text-[11px]">
                  <span className="text-gray-400">{prog.label}</span>
                  <span className="text-gray-200 font-medium">{prog.val}</span>
                </div>
                <ProgressBar value={prog.pct} max={100} color={prog.color} />
              </div>
            ))}
          </div>
        </div>

        <Button variant="secondary" size="sm" icon={FileText} onClick={() => showNotify('Weekly report generated')}>Generate Weekly Summary</Button>
      </motion.div>
    );
  };

  const RevenueView = () => (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-5">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <div className="bg-[#30313D] border border-gray-700/40 rounded-xl p-4"><span className="text-[11px] text-gray-400">Closed this month</span><div className="text-xl font-semibold text-white mt-1">$4,200</div><div className="text-[10px] text-gray-500">2 deals</div></div>
        <div className="bg-[#30313D] border border-gray-700/40 rounded-xl p-4"><span className="text-[11px] text-gray-400">Pipeline value</span><div className="text-xl font-semibold text-white mt-1">$16,850</div><div className="text-[10px] text-gray-500">7 active</div></div>
        <div className="bg-[#30313D] border border-gray-700/40 rounded-xl p-4"><span className="text-[11px] text-gray-400">Win rate</span><div className="text-xl font-semibold text-emerald-400 mt-1">67%</div><div className="text-[10px] text-gray-500">Up from 52%</div></div>
        <div className="bg-[#30313D] border border-gray-700/40 rounded-xl p-4"><span className="text-[11px] text-gray-400">Avg deal size</span><div className="text-xl font-semibold text-white mt-1">$2,100</div><div className="text-[10px] text-gray-500">vs $1,800 prior</div></div>
      </div>

      <div className="bg-[#30313D] border border-gray-700/40 rounded-xl overflow-hidden">
        <div className="p-3 border-b border-gray-700/40 text-xs font-semibold text-gray-300">Closed Deals</div>
        <table className="w-full text-left text-[11px]">
          <thead className="bg-[#212121] text-gray-500 uppercase tracking-wider">
            <tr>
              <th className="p-3 font-medium">Client</th>
              <th className="p-3 font-medium">Value</th>
              <th className="p-3 font-medium">Payment</th>
              <th className="p-3 font-medium">Status</th>
              <th className="p-3 font-medium text-right">Performance</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-700/30">
            {REVENUE_DATA.map(row => (
              <tr key={row.id} className="hover:bg-gray-700/20 transition-colors">
                <td className="p-3 text-gray-200 font-medium">{row.client}</td>
                <td className="p-3 text-emerald-400 font-semibold">${row.value.toLocaleString()}</td>
                <td className="p-3 text-gray-400">{row.method}</td>
                <td className="p-3"><span className="px-1.5 py-0.5 bg-emerald-900/30 text-emerald-400 rounded text-[10px] border border-emerald-800/50">Paid</span></td>
                <td className="p-3 text-right"><ProgressBar value={row.value / 30} max={1} color="bg-[#4A90E2]" /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      
      <Button variant="secondary" size="sm" icon={UploadCloud} onClick={() => showNotify('Export started...')}>Export Full Report</Button>
    </motion.div>
  );

  const ImportView = () => (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-5 max-w-3xl mx-auto">
      <h2 className="text-sm font-semibold text-white">Import Leads</h2>
      
      {importPhase === 'idle' && (
        <div 
          onClick={handleImport}
          className="border-2 border-dashed border-gray-700 hover:border-[#4A90E2] bg-[#30313D] hover:bg-[#353741] rounded-xl p-10 flex flex-col items-center justify-center cursor-pointer transition-all text-center"
        >
          <UploadCloud size={32} className="text-gray-500 mb-3" />
          <div className="text-sm font-medium text-white mb-1">Drop your file here or click to upload</div>
          <div className="text-[11px] text-gray-400 mb-4">Name, company, phone, email, industry — auto-detected</div>
          <div className="flex gap-2">
            {['.csv', '.xlsx', '.xls'].map(ext => (
              <span key={ext} className="px-2 py-1 bg-gray-800 text-gray-400 text-[10px] rounded border border-gray-700/50">{ext}</span>
            ))}
          </div>
        </div>
      )}

      {importPhase === 'mapping' && (
        <div className="bg-[#30313D] border border-gray-700/40 rounded-xl p-5 space-y-4">
          <div className="flex items-center justify-between mb-2">
            <span className="text-xs font-semibold text-white">Map columns — 47 contacts detected</span>
            <Button variant="ghost" size="sm" onClick={() => setImportPhase('idle')}>Cancel</Button>
          </div>
          {[
            { col: 'Column A: "Full Name"', to: 'Contact name' },
            { col: 'Column B: "Business"', to: 'Company name' },
            { col: 'Column C: "Phone"', to: 'Phone' },
            { col: 'Column D: "Email"', to: 'Email' },
            { col: 'Column E: "Industry"', to: 'Industry tag' },
          ].map((row, i) => (
            <div key={i} className="flex items-center gap-3 bg-[#212121] p-3 rounded-lg border border-gray-700/30">
              <span className="text-[11px] text-gray-400 font-mono w-1/3">{row.col}</span>
              <ArrowRight size={14} className="text-gray-600" />
              <select className="bg-[#30313D] border border-gray-600 text-xs text-white rounded px-2 py-1.5 w-1/2 focus:outline-none focus:border-[#4A90E2]">
                <option>{row.to}</option>
                <option>Skip</option>
                <option>Custom...</option>
              </select>
            </div>
          ))}
          <div className="flex gap-3 pt-2">
            <Button variant="primary" onClick={handleImport}>Import 47 contacts</Button>
            <Button variant="secondary" onClick={() => setImportPhase('idle')}>Cancel</Button>
          </div>
        </div>
      )}

      {importPhase === 'done' && (
        <div className="bg-emerald-900/20 border border-emerald-700/40 rounded-xl p-8 text-center space-y-3">
          <CheckCircle2 size={40} className="text-emerald-400 mx-auto" />
          <h3 className="text-base font-semibold text-emerald-300">Import Successful</h3>
          <p className="text-sm text-emerald-400/80">47 new contacts have been added to your pipeline.</p>
          <Button variant="success" onClick={() => { setActiveTab('contact'); setImportPhase('idle'); }}>View Pipeline</Button>
        </div>
      )}
    </motion.div>
  );

  return (
    <div className="flex h-screen bg-[#212121] text-gray-300 font-sans selection:bg-[#4A90E2]/30">
      <style>{`
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
      `}</style>

      {/* Sidebar */}
      <aside className="w-[220px] hidden md:flex flex-col bg-[#1A1A1D] border-r border-gray-800 shrink-0">
        <div className="p-3 border-b border-gray-800">
          <div className="relative">
            <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-500" />
            <input type="text" placeholder="Search contacts..." className="w-full bg-[#252529] border border-gray-700/40 rounded-md pl-8 pr-3 py-1.5 text-[11px] text-white placeholder-gray-500 focus:outline-none focus:border-[#4A90E2]" />
          </div>
        </div>
        
        <div className="flex-1 overflow-y-auto no-scrollbar py-2">
          <div className="px-3 py-1.5 text-[9px] font-bold text-gray-500 uppercase tracking-wider">Active Deals</div>
          {contacts.filter(c => c.stage < 5).map(c => (
            <button
              key={c.id}
              onClick={() => { setSelectedContactId(c.id); setActiveTab('contact'); }}
              className={`w-full flex items-center gap-2.5 px-3 py-2 hover:bg-gray-800/40 transition-colors text-left ${selectedContactId === c.id && activeTab === 'contact' ? 'bg-[#4A90E2]/10 border-r-2 border-[#4A90E2]' : ''}`}
            >
              <Avatar initials={c.avatar} bgColor={c.avatarBg} size="sm" />
              <div className="min-w-0">
                <div className="text-[11px] font-medium text-gray-200 truncate">{c.name}</div>
                <div className="text-[10px] text-gray-500 truncate">{c.company}</div>
              </div>
            </button>
          ))}

          <div className="px-3 py-1.5 text-[9px] font-bold text-gray-500 uppercase tracking-wider mt-2">Closed</div>
          {contacts.filter(c => c.stage === 5).map(c => (
            <button
              key={c.id}
              onClick={() => { setSelectedContactId(c.id); setActiveTab('contact'); }}
              className={`w-full flex items-center gap-2.5 px-3 py-2 hover:bg-gray-800/40 transition-colors text-left ${selectedContactId === c.id && activeTab === 'contact' ? 'bg-[#4A90E2]/10 border-r-2 border-[#4A90E2]' : ''}`}
            >
              <Avatar initials={c.avatar} bgColor={c.avatarBg} size="sm" />
              <div className="min-w-0">
                <div className="text-[11px] font-medium text-gray-400 truncate line-through">{c.name}</div>
                <div className="text-[10px] text-gray-600 truncate">{c.company}</div>
              </div>
            </button>
          ))}
        </div>

        <div className="p-3 border-t border-gray-800">
          <button onClick={() => setActiveTab('import')} className="w-full flex items-center justify-center gap-2 border border-dashed border-gray-700 hover:border-[#4A90E2] hover:text-[#4A90E2] rounded-md py-1.5 text-[11px] transition-all">
            <UploadCloud size={14} /> Import CSV / Excel
          </button>
        </div>
      </aside>

      {/* Main Layout */}
      <div className="flex-1 flex flex-col min-w-0">
        {/* Topbar */}
        <header className="bg-[#1A1A1D] border-b border-gray-800 px-4 h-12 flex items-center justify-between shrink-0 z-20">
          <nav className="flex items-center gap-1 overflow-x-auto no-scrollbar">
            {[
              { id: 'contact', label: 'Contact', icon: Users },
              { id: 'pipeline', label: 'Pipeline', icon: Kanban },
              { id: 'accountability', label: 'My day', icon: CheckSquare },
              { id: 'revenue', label: 'Revenue', icon: DollarSign },
              { id: 'import', label: 'Import', icon: UploadCloud },
            ].map(tab => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-[11px] font-medium transition-all ${
                  activeTab === tab.id 
                    ? 'bg-[#4A90E2] text-white shadow-[0_0_8px_rgba(74,144,226,0.3)]' 
                    : 'text-gray-400 hover:text-gray-200 hover:bg-gray-800'
                }`}
              >
                <tab.icon size={13} />
                <span className="hidden sm:inline">{tab.label}</span>
              </button>
            ))}
          </nav>
          <div className="flex items-center gap-3 shrink-0">
            <div className="bg-emerald-900/40 border border-emerald-700/40 text-emerald-400 text-[10px] font-semibold px-2 py-0.5 rounded-full">
              {wins} / 5 wins today
            </div>
            <div className="w-7 h-7 rounded-full bg-[#4A90E2] flex items-center justify-center text-[10px] font-bold text-white cursor-pointer hover:bg-[#3B7DD0]">JS</div>
          </div>
        </header>

        {/* Content Area */}
        <main className="flex-1 overflow-y-auto p-4 md:p-6 bg-[#212121]">
          <div className="max-w-6xl mx-auto h-full">
            {activeTab === 'contact' && <ContactView />}
            {activeTab === 'pipeline' && <PipelineView />}
            {activeTab === 'accountability' && <AccountabilityView />}
            {activeTab === 'revenue' && <RevenueView />}
            {activeTab === 'import' && <ImportView />}
          </div>
        </main>
      </div>

      {/* Invoice Modal */}
      <Modal isOpen={isInvoiceOpen} onClose={() => setIsInvoiceOpen(false)} title={`Invoice for ${selectedContact.name}`}>
        <p className="text-[11px] text-gray-400 mb-4">Auto-filled from profile. Add line items, select payment method, send.</p>
        
        <div className="bg-[#212121] border border-gray-700/40 rounded-lg p-3 mb-4 space-y-1">
          {[
            { item: 'Website design', price: 1800 },
            { item: 'SEO setup (3 months)', price: 600 }
          ].map((row, i) => (
            <div key={i} className="flex justify-between text-[11px] text-gray-300 py-0.5">
              <span>{row.item}</span>
              <span className="font-mono">${row.price.toLocaleString()}</span>
            </div>
          ))}
          <div className="flex justify-between text-xs font-semibold text-white pt-2 border-t border-gray-700/50 mt-1">
            <span>Total</span>
            <span>$2,400</span>
          </div>
        </div>

        <div className="text-[11px] font-semibold text-gray-300 mb-2">Send payment via</div>
        <div className="grid grid-cols-3 gap-2 mb-4">
          {[
            { id: 'stripe', label: 'Stripe', icon: CreditCard },
            { id: 'bank', label: 'Bank transfer', icon: Building2 },
            { id: 'paypal', label: 'PayPal', icon: Wallet },
            { id: 'wise', label: 'Wise', icon: ArrowDownUp },
            { id: 'cash', label: 'Cash / Other', icon: Banknote },
            { id: 'payoneer', label: 'Payoneer', icon: GlobeIcon },
          ].map(pm => (
            <button key={pm.id} className={`p-2 rounded-lg border text-center transition-all hover:bg-gray-700/30 ${pm.id === 'stripe' ? 'border-[#4A90E2] bg-[#4A90E2]/10' : 'border-gray-700/40'}`}>
              <pm.icon size={16} className="mx-auto mb-1 text-gray-300" />
              <span className="text-[9px] font-medium text-gray-300 block">{pm.label}</span>
            </button>
          ))}
        </div>

        <div className="flex flex-col gap-2">
          <Button variant="success" className="w-full" icon={CheckCircle2} onClick={() => { setIsInvoiceOpen(false); setWins(w => w + 1); showNotify('Payment received! Deal logged.'); }}>
            Mark as paid — received
          </Button>
          <div className="flex gap-2">
            <Button variant="primary" className="flex-1" icon={Send} onClick={() => { setIsInvoiceOpen(false); showNotify('Invoice sent to client email.'); }}>Send Invoice</Button>
            <Button variant="secondary" onClick={() => setIsInvoiceOpen(false)}>Close</Button>
          </div>
        </div>
      </Modal>

      {/* Global Notification */}
      <AnimatePresence>
        {notification && (
          <motion.div 
            initial={{ opacity: 0, y: 20 }} 
            animate={{ opacity: 1, y: 0 }} 
            exit={{ opacity: 0, y: 10 }} 
            className={`fixed bottom-6 right-6 z-50 flex items-center gap-2 px-4 py-3 rounded-lg shadow-xl border ${notification.type === 'success' ? 'bg-[#30313D] border-emerald-600/50 text-emerald-300' : 'bg-[#30313D] border-red-600/50 text-red-300'}`}
          >
            {notification.type === 'success' ? <CheckCircle2 size={16} /> : <AlertCircle size={16} />}
            <span className="text-xs font-medium">{notification.msg}</span>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

// Simple icon replacement for the grid
const GlobeIcon = ({size, className}) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
);
```