const { useState, useEffect, useRef } = React;

// ═══════════════════════════════════════════════════════════
// DESIGN SYSTEM & ICONS
// ═══════════════════════════════════════════════════════════

const Icon = ({ name, size = 24, color = "currentColor" }) => {
  const icons = {
    logo: <svg viewBox="0 0 40 40" width={size} height={size} fill={color}><circle cx="20" cy="20" r="18" opacity="0.2"/><path d="M20 6L28 12v16H12V12l8-6z"/></svg>,
    home: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>,
    briefcase: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 7v-2a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>,
    arrow_right: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>,
    search: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>,
    menu: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>,
    x: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
    bell: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>,
    user: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>,
    settings: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6M4.22 4.22l4.24 4.24m3.08 3.08l4.24 4.24M1 12h6m6 0h6M4.22 19.78l4.24-4.24m3.08-3.08l4.24-4.24"/></svg>,
    download: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>,
    check: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><polyline points="20 6 9 17 4 12"/></svg>,
    plus: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>,
    trash: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>,
    edit: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>,
    eye: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>,
    shield: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>,
    trendingUp: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>,
    users: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
    info: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>,
    calendar: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>,
    mapPin: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
    phone: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
    mail: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>,
    logOut: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>,
    chartBar: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/></svg>,
    checkCircle: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>,
    alertCircle: <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>,
  };
  return icons[name] || null;
};

// ═══════════════════════════════════════════════════════════
// HEADER COMPONENT
// ═══════════════════════════════════════════════════════════

const Header = ({ page, setPage, isLoggedIn, setIsLoggedIn, userType, userName }) => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const handleLogout = () => {
    setIsLoggedIn(false);
    setPage('home');
    setMobileMenuOpen(false);
  };

  return (
    <div style={{ background: 'white', borderBottom: '1px solid #E2E8F0', position: 'sticky', top: 0, zIndex: 100 }}>
      <div className="container flex items-center justify-between" style={{ height: 70 }}>
        <div className="flex items-center gap-8" style={{ cursor: 'pointer', minWidth: 200 }} onClick={() => setPage('home')}>
          <Icon name="logo" size={32} color="#C8960C" />
          <h3 style={{ margin: 0, fontFamily: "'Playfair Display', serif", fontSize: 18, fontWeight: 700 }}>Premier Hospitality</h3>
        </div>

        {!isLoggedIn && (
          <div className="flex items-center gap-16">
            <button className="btn btn-ghost" onClick={() => setPage('login')} style={{ fontSize: 14 }}>Sign In</button>
            <button className="btn btn-primary" onClick={() => setPage('register')} style={{ fontSize: 14 }}>Get Started</button>
          </div>
        )}

        {isLoggedIn && (
          <div className="flex items-center gap-24">
            <div className="flex items-center gap-12">
              <Icon name="bell" size={20} color="#718096" style={{ cursor: 'pointer' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div className="avatar" style={{ background: '#FDF3D0', color: '#C8960C' }}>{userName?.charAt(0)}</div>
                <div style={{ fontSize: 13 }}>
                  <div style={{ fontWeight: 600 }}>{userName}</div>
                  <div style={{ color: '#718096', fontSize: 12 }}>{userType === 'admin' ? 'Admin' : 'Travel Company'}</div>
                </div>
              </div>
              <button className="btn btn-ghost" onClick={handleLogout} style={{ fontSize: 12, padding: '8px 12px' }}>
                <Icon name="logOut" size={16} />
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

// ═══════════════════════════════════════════════════════════
// HOME PAGE
// ═══════════════════════════════════════════════════════════

const HomePage = ({ setPage }) => (
  <div>
    {/* Hero Section */}
    <section className="section hero-gradient" style={{ color: 'white' }}>
      <div className="container">
        <div className="grid-2" style={{ alignItems: 'center', minHeight: '500px' }}>
          <div>
            <h1 className="playfair" style={{ marginBottom: 24, lineHeight: 1.2 }}>
              Simplify Your Travel & MICE Operations
            </h1>
            <p style={{ fontSize: 18, marginBottom: 32, opacity: 0.95 }}>
              Connect with verified suppliers. Get competitive bids. Manage everything in one platform. Reduce costs by 30% while saving time.
            </p>
            <div className="flex gap-16">
              <button className="btn btn-primary" onClick={() => setPage('register')}>Get Started</button>
              <button className="btn btn-ghost" style={{ color: 'white', borderColor: 'white' }} onClick={() => setPage('login')}>Sign In</button>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 400 }}>
            <div style={{ background: 'rgba(255,255,255,0.1)', borderRadius: 16, width: '100%', height: '100%', border: '2px solid rgba(255,255,255,0.2)' }} />
          </div>
        </div>
      </div>
    </section>

    {/* Features Section */}
    <section className="section section-light">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <h2 className="playfair" style={{ marginBottom: 16 }}>Why Choose Premier Hospitality</h2>
          <p style={{ fontSize: 16, color: '#718096', maxWidth: 600, margin: '0 auto' }}>
            The most efficient platform for travel companies and MICE professionals
          </p>
        </div>
        <div className="grid-3">
          {[
            { icon: 'briefcase', title: 'Easy RFP Management', desc: 'Post requirements and receive competitive bids in minutes' },
            { icon: 'users', title: 'Verified Suppliers', desc: 'Connect with quality hotels, transporters, and service providers' },
            { icon: 'trendingUp', title: 'Cost Savings', desc: 'Reduce operational costs through competitive bidding' },
            { icon: 'shield', title: 'Transparent Pricing', desc: 'Clear quotes with no hidden charges or surprises' },
            { icon: 'calendar', title: 'Real-time Tracking', desc: 'Monitor all your bookings and suppliers from one dashboard' },
            { icon: 'download', title: 'Instant Reports', desc: 'Export data and generate comprehensive reports instantly' },
          ].map((item, i) => (
            <div key={i} className="card hover-lift" style={{ padding: 32 }}>
              <Icon name={item.icon} size={32} color="#C8960C" style={{ marginBottom: 16 }} />
              <h4 style={{ marginBottom: 8 }}>{item.title}</h4>
              <p style={{ color: '#718096', fontSize: 14, margin: 0 }}>{item.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* How It Works */}
    <section className="section section-dark" style={{ color: 'white' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <h2 className="playfair" style={{ marginBottom: 16 }}>How It Works</h2>
          <p style={{ fontSize: 16, opacity: 0.9, maxWidth: 600, margin: '0 auto' }}>
            Simple steps to connect suppliers and close deals
          </p>
        </div>
        <div className="grid-4">
          {[
            { step: '1', title: 'Post RFP', desc: 'Share your requirements and budget' },
            { step: '2', title: 'Get Quotes', desc: 'Suppliers submit competitive bids' },
            { step: '3', title: 'Compare', desc: 'Review and compare all proposals' },
            { step: '4', title: 'Book Now', desc: 'Confirm and manage your booking' },
          ].map((item, i) => (
            <div key={i} style={{ textAlign: 'center' }}>
              <div style={{
                width: 60, height: 60, borderRadius: '50%',
                background: '#C8960C', display: 'flex', alignItems: 'center',
                justifyContent: 'center', margin: '0 auto 24px', fontSize: 28, fontWeight: 700
              }}>
                {item.step}
              </div>
              <h4 style={{ marginBottom: 8 }}>{item.title}</h4>
              <p style={{ opacity: 0.8, fontSize: 13, margin: 0 }}>{item.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Testimonials */}
    <section className="section section-light">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <h2 className="playfair" style={{ marginBottom: 16 }}>What Our Users Say</h2>
        </div>
        <div className="grid-3">
          {[
            { name: 'Rajesh Kumar', company: 'Global Travels Inc.', quote: 'Saved 40% on supplier costs within first month.' },
            { name: 'Priya Sharma', company: 'Elite MICE Events', quote: 'Best platform for managing group travel logistics.' },
            { name: 'Amit Patel', company: 'Business Travel Solutions', quote: 'Transparent pricing and reliable partners.' },
          ].map((item, i) => (
            <div key={i} className="card" style={{ padding: 24 }}>
              <div style={{ marginBottom: 16 }}>
                {'★★★★★'.split('').map((s, i) => <span key={i} style={{ color: '#C8960C', fontSize: 14 }}>★</span>)}
              </div>
              <p style={{ marginBottom: 16, fontStyle: 'italic', color: '#4A5568' }}>"{item.quote}"</p>
              <div style={{ fontWeight: 600, fontSize: 13 }}>{item.name}</div>
              <div style={{ fontSize: 12, color: '#718096' }}>{item.company}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  </div>
);

// ═══════════════════════════════════════════════════════════
// AUTH PAGE (Login/Register)
// ═══════════════════════════════════════════════════════════

const AuthPage = ({ mode, setPage, setIsLoggedIn, setUserType, setUserName }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [fullName, setFullName] = useState('');
  const [company, setCompany] = useState('');
  const [type, setType] = useState('client');
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (mode === 'login') {
      if (!email || !password) {
        setError('Please fill in all fields');
        return;
      }
      setIsLoggedIn(true);
      setUserType(type === 'supplier' ? 'supplier' : 'client');
      setUserName(email.split('@')[0]);
      setPage(type === 'supplier' ? 'supplier-dashboard' : 'client-dashboard');
    } else {
      if (!email || !password || !fullName || !company) {
        setError('Please fill in all fields');
        return;
      }
      setIsLoggedIn(true);
      setUserType(type);
      setUserName(fullName);
      setPage(type === 'supplier' ? 'supplier-dashboard' : 'client-dashboard');
    }
    setError('');
  };

  return (
    <div style={{ minHeight: '100vh', background: '#FAF7F2', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div style={{ maxWidth: 420, width: '100%', background: 'white', padding: 40, borderRadius: 16, boxShadow: '0 4px 12px rgba(0,0,0,0.08)' }}>
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <Icon name="logo" size={40} color="#C8960C" style={{ marginBottom: 16 }} />
          <h2 className="playfair" style={{ fontSize: 28, marginBottom: 8 }}>{mode === 'login' ? 'Welcome Back' : 'Create Account'}</h2>
          <p style={{ color: '#718096', fontSize: 14 }}>
            {mode === 'login' ? 'Sign in to your account' : 'Join Premier Hospitality'}
          </p>
        </div>

        {error && <div style={{ background: '#FFF5F5', border: '1px solid #FC8181', color: '#C53030', padding: 12, borderRadius: 8, marginBottom: 16, fontSize: 13 }}>{error}</div>}

        <form onSubmit={handleSubmit}>
          {mode === 'register' && (
            <>
              <div style={{ marginBottom: 16 }}>
                <label style={{ display: 'block', fontSize: 12, fontWeight: 500, color: '#4A5568', marginBottom: 6 }}>Account Type</label>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                  {[
                    { value: 'client', label: 'Travel Company' },
                    { value: 'supplier', label: 'Supplier' },
                  ].map(opt => (
                    <label key={opt.value} style={{ display: 'flex', alignItems: 'center', padding: 8, border: '1px solid #E2E8F0', borderRadius: 8, cursor: 'pointer', background: type === opt.value ? '#FDF3D0' : 'transparent' }}>
                      <input type="radio" value={opt.value} checked={type === opt.value} onChange={(e) => setType(e.target.value)} style={{ marginRight: 8 }} />
                      <span style={{ fontSize: 13 }}>{opt.label}</span>
                    </label>
                  ))}
                </div>
              </div>

              <div style={{ marginBottom: 16 }}>
                <label>Full Name</label>
                <input type="text" placeholder="Your name" value={fullName} onChange={(e) => setFullName(e.target.value)} />
              </div>

              <div style={{ marginBottom: 16 }}>
                <label>Company Name</label>
                <input type="text" placeholder="Company" value={company} onChange={(e) => setCompany(e.target.value)} />
              </div>
            </>
          )}

          <div style={{ marginBottom: 16 }}>
            <label>Email Address</label>
            <input type="email" placeholder="your@email.com" value={email} onChange={(e) => setEmail(e.target.value)} />
          </div>

          <div style={{ marginBottom: 24 }}>
            <label>Password</label>
            <input type="password" placeholder="••••••••" value={password} onChange={(e) => setPassword(e.target.value)} />
          </div>

          <button type="submit" className="btn btn-primary w-full" style={{ marginBottom: 16 }}>
            {mode === 'login' ? 'Sign In' : 'Create Account'}
          </button>

          <div style={{ textAlign: 'center', fontSize: 13, color: '#718096' }}>
            {mode === 'login' ? (
              <>
                Don't have an account? <span style={{ color: '#C8960C', cursor: 'pointer', fontWeight: 600 }} onClick={() => setPage('register')}>Sign up</span>
              </>
            ) : (
              <>
                Already have an account? <span style={{ color: '#C8960C', cursor: 'pointer', fontWeight: 600 }} onClick={() => setPage('login')}>Sign in</span>
              </>
            )}
          </div>
        </form>

        <button className="btn btn-ghost w-full" style={{ marginTop: 16 }} onClick={() => setPage('home')}>
          Back to Home
        </button>
      </div>
    </div>
  );
};

// ═══════════════════════════════════════════════════════════
// CLIENT DASHBOARD
// ═══════════════════════════════════════════════════════════

const ClientDashboard = ({ setPage, setIsLoggedIn, userName }) => {
  const [activeTab, setActiveTab] = useState('overview');
  const [rfps, setRfps] = useState([
    { id: 1, title: 'Delhi to Goa Corporate Trip', destination: 'Goa', status: 'active', quotes: 8, budget: '₹50,000 - ₹75,000' },
    { id: 2, title: 'Mumbai Conference Setup', destination: 'Mumbai', status: 'active', quotes: 5, budget: '₹100,000 - ₹150,000' },
    { id: 3, title: 'Bangalore Team Outing', destination: 'Bangalore', status: 'completed', quotes: 12, budget: '₹75,000 - ₹100,000' },
  ]);
  const [quotes, setQuotes] = useState([
    { id: 1, rfp: 'Delhi to Goa Corporate Trip', supplier: 'Hotel Paradise Goa', amount: '₹65,000', status: 'pending' },
    { id: 2, rfp: 'Delhi to Goa Corporate Trip', supplier: 'Sunset Resorts', amount: '₹58,000', status: 'pending' },
    { id: 3, rfp: 'Delhi to Goa Corporate Trip', supplier: 'Beachfront Hotels', amount: '₹72,000', status: 'accepted' },
  ]);
  const [bookings, setBookings] = useState([
    { id: 1, ref: 'BK001', supplier: 'Beachfront Hotels', amount: '₹72,000', status: 'confirmed', date: '15 May - 18 May 2026' },
    { id: 2, ref: 'BK002', supplier: 'Business Hotels India', amount: '₹125,000', status: 'in-progress', date: '20 May - 22 May 2026' },
  ]);
  const [showNewRfpForm, setShowNewRfpForm] = useState(false);
  const [newRfpData, setNewRfpData] = useState({ title: '', destination: '', pax: '', budget: '', requirements: '' });

  const renderTab = () => {
    switch (activeTab) {
      case 'overview':
        return (
          <div>
            <div style={{ marginBottom: 32 }}>
              <h2 className="playfair" style={{ marginBottom: 24 }}>Dashboard Overview</h2>
              <div className="grid-4">
                {[
                  { label: 'Total RFPs', value: '12', icon: 'briefcase' },
                  { label: 'Active Quotes', value: '8', icon: 'chartBar' },
                  { label: 'Confirmed Bookings', value: '5', icon: 'checkCircle' },
                  { label: 'Total Saved', value: '₹2,40,000', icon: 'trendingUp' },
                ].map((item, i) => (
                  <div key={i} className="card" style={{ padding: 24 }}>
                    <Icon name={item.icon} size={24} color="#C8960C" style={{ marginBottom: 12 }} />
                    <div style={{ fontSize: 12, color: '#718096', marginBottom: 4 }}>{item.label}</div>
                    <div style={{ fontSize: 28, fontWeight: 700, fontFamily: "'Playfair Display', serif" }}>{item.value}</div>
                  </div>
                ))}
              </div>
            </div>

            <div className="grid-2" style={{ gap: 24 }}>
              <div>
                <h3 style={{ marginBottom: 16 }}>Recent RFPs</h3>
                {rfps.slice(0, 2).map(rfp => (
                  <div key={rfp.id} className="card" style={{ padding: 16, marginBottom: 12 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 8 }}>
                      <div>
                        <h4 style={{ margin: 0, marginBottom: 4 }}>{rfp.title}</h4>
                        <div style={{ fontSize: 12, color: '#718096' }}>{rfp.destination}</div>
                      </div>
                      <span className="tag tag-gold">{rfp.status}</span>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
                      <div>{rfp.quotes} quotes received</div>
                      <div>{rfp.budget}</div>
                    </div>
                  </div>
                ))}
              </div>

              <div>
                <h3 style={{ marginBottom: 16 }}>Top Suppliers</h3>
                {[
                  { name: 'Beachfront Hotels', rating: 4.8, reviews: 45 },
                  { name: 'Business Hotels India', rating: 4.6, reviews: 32 },
                  { name: 'Sunset Resorts', rating: 4.5, reviews: 28 },
                ].map((s, i) => (
                  <div key={i} className="card" style={{ padding: 16, marginBottom: 12 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <div>
                        <h4 style={{ margin: 0, marginBottom: 4 }}>{s.name}</h4>
                        <div style={{ fontSize: 12, color: '#718096' }}>{s.reviews} reviews</div>
                      </div>
                      <div style={{ fontSize: 18, color: '#C8960C', fontWeight: 700 }}>{s.rating}★</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        );

      case 'rfps':
        return (
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
              <h2 className="playfair">RFP Management</h2>
              <button className="btn btn-primary" onClick={() => setShowNewRfpForm(!showNewRfpForm)}>
                <Icon name="plus" size={16} />
                New RFP
              </button>
            </div>

            {showNewRfpForm && (
              <div className="card" style={{ padding: 24, marginBottom: 24, background: '#FDF3D0' }}>
                <h3 style={{ marginBottom: 16 }}>Create New RFP</h3>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <input placeholder="RFP Title" value={newRfpData.title} onChange={(e) => setNewRfpData({...newRfpData, title: e.target.value})} />
                  <input placeholder="Destination" value={newRfpData.destination} onChange={(e) => setNewRfpData({...newRfpData, destination: e.target.value})} />
                  <input type="number" placeholder="Number of Participants" value={newRfpData.pax} onChange={(e) => setNewRfpData({...newRfpData, pax: e.target.value})} />
                  <input placeholder="Budget Range (e.g., 50000-75000)" value={newRfpData.budget} onChange={(e) => setNewRfpData({...newRfpData, budget: e.target.value})} />
                </div>
                <textarea placeholder="Requirements/Details" style={{ marginTop: 16, minHeight: 100 }} value={newRfpData.requirements} onChange={(e) => setNewRfpData({...newRfpData, requirements: e.target.value})} />
                <div style={{ marginTop: 16, display: 'flex', gap: 12 }}>
                  <button className="btn btn-primary">Publish RFP</button>
                  <button className="btn btn-ghost" onClick={() => setShowNewRfpForm(false)}>Cancel</button>
                </div>
              </div>
            )}

            <div style={{ marginTop: 24 }}>
              {rfps.map(rfp => (
                <div key={rfp.id} className="card" style={{ padding: 20, marginBottom: 12 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 12 }}>
                    <div>
                      <h3 style={{ margin: 0, marginBottom: 4 }}>{rfp.title}</h3>
                      <div style={{ fontSize: 13, color: '#718096' }}>Location: {rfp.destination} • Budget: {rfp.budget}</div>
                    </div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <span className="tag tag-gold">{rfp.status}</span>
                      <button className="btn btn-ghost btn-sm">View Quotes</button>
                    </div>
                  </div>
                  <div style={{ background: '#FAF7F2', padding: 12, borderRadius: 8, marginTop: 12 }}>
                    <div style={{ fontSize: 12, color: '#718096' }}><strong>{rfp.quotes}</strong> quotes received • Last updated 2 hours ago</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        );

      case 'quotes':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Quotes Received</h2>
            <div style={{ overflowX: 'auto' }}>
              <table>
                <thead>
                  <tr>
                    <th>RFP Title</th>
                    <th>Supplier</th>
                    <th>Quote Amount</th>
                    <th>Status</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  {quotes.map(quote => (
                    <tr key={quote.id}>
                      <td><strong>{quote.rfp}</strong></td>
                      <td>{quote.supplier}</td>
                      <td style={{ fontWeight: 600 }}>{quote.amount}</td>
                      <td>
                        <span className={`tag ${quote.status === 'accepted' ? 'tag-success' : 'tag-warning'}`}>
                          {quote.status}
                        </span>
                      </td>
                      <td>
                        <button className="btn btn-ghost btn-sm">View Details</button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        );

      case 'bookings':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Bookings</h2>
            {bookings.map(booking => (
              <div key={booking.id} className="card" style={{ padding: 20, marginBottom: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ marginBottom: 8 }}>
                      <span style={{ fontSize: 12, color: '#718096' }}>Booking Reference:</span>
                      <strong style={{ marginLeft: 8, fontFamily: "'Space Mono', monospace" }}>{booking.ref}</strong>
                    </div>
                    <h3 style={{ margin: 0, marginBottom: 4 }}>{booking.supplier}</h3>
                    <div style={{ fontSize: 13, color: '#718096', marginBottom: 12 }}>{booking.date}</div>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>₹{booking.amount}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <span className={`tag ${booking.status === 'confirmed' ? 'tag-success' : 'tag-info'}`}>{booking.status}</span>
                    <div style={{ marginTop: 12, display: 'flex', gap: 8, flexDirection: 'column' }}>
                      <button className="btn btn-ghost btn-sm">View Details</button>
                      <button className="btn btn-ghost btn-sm"><Icon name="download" size={14} /> Download</button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        );

      case 'profile':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Profile Settings</h2>
            <div className="card" style={{ padding: 24 }}>
              <div style={{ marginBottom: 20 }}>
                <label>Company Name</label>
                <input type="text" defaultValue="Global Travels Inc." />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Contact Email</label>
                <input type="email" defaultValue="contact@globaltravels.com" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Phone Number</label>
                <input type="tel" defaultValue="+91 98765 43210" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Address</label>
                <input type="text" defaultValue="New Delhi, India" />
              </div>
              <button className="btn btn-primary">Save Changes</button>
            </div>
          </div>
        );

      default:
        return <div>Coming soon...</div>;
    }
  };

  return (
    <div style={{ display: 'flex', minHeight: 'calc(100vh - 70px)', background: '#FAF7F2' }}>
      {/* Sidebar */}
      <div className="sidebar" style={{ width: 250, padding: '24px 0', flexShrink: 0 }}>
        <div style={{ padding: '0 16px', marginBottom: 32 }}>
          <h4 style={{ fontSize: 12, fontWeight: 700, textTransform: 'uppercase', color: '#718096', margin: '0 0 16px 0' }}>Travel Company</h4>
        </div>
        {[
          { name: 'overview', label: 'Overview', icon: 'home' },
          { name: 'rfps', label: 'RFPs', icon: 'briefcase' },
          { name: 'quotes', label: 'Quotes', icon: 'chartBar' },
          { name: 'bookings', label: 'Bookings', icon: 'calendar' },
          { name: 'profile', label: 'Profile', icon: 'user' },
        ].map(item => (
          <div key={item.name} className={`sidebar-item ${activeTab === item.name ? 'active' : ''}`} onClick={() => setActiveTab(item.name)}>
            <Icon name={item.icon} size={18} />
            {item.label}
          </div>
        ))}
        <div style={{ padding: '0 16px', marginTop: 'auto', paddingBottom: 24 }}>
          <button className="btn btn-ghost w-full" onClick={() => { setIsLoggedIn(false); setPage('home'); }} style={{ fontSize: 13 }}>
            <Icon name="logOut" size={14} />
            Sign Out
          </button>
        </div>
      </div>

      {/* Main Content */}
      <div style={{ flex: 1, padding: 40, overflowY: 'auto' }}>
        <div style={{ background: 'white', borderRadius: 16, padding: 40 }} className="card">
          {renderTab()}
        </div>
      </div>
    </div>
  );
};

// ═══════════════════════════════════════════════════════════
// SUPPLIER DASHBOARD
// ═══════════════════════════════════════════════════════════

const SupplierDashboard = ({ setPage, setIsLoggedIn, userName }) => {
  const [activeTab, setActiveTab] = useState('overview');
  const [availableRfps, setAvailableRfps] = useState([
    { id: 1, title: 'Delhi to Goa Corporate Trip', destination: 'Goa', pax: 50, budget: '₹50,000 - ₹75,000', category: 'Hotel' },
    { id: 2, title: 'Mumbai Conference Setup', destination: 'Mumbai', pax: 100, budget: '₹100,000 - ₹150,000', category: 'Hotel' },
    { id: 3, title: 'Bangalore Team Outing', destination: 'Bangalore', pax: 30, budget: '₹75,000 - ₹100,000', category: 'Transport' },
  ]);
  const [myQuotes, setMyQuotes] = useState([
    { id: 1, rfp: 'Delhi to Goa Corporate Trip', amount: '₹58,000', status: 'pending', date: '3 hours ago' },
    { id: 2, rfp: 'Mumbai Conference Setup', amount: '₹125,000', status: 'accepted', date: '1 day ago' },
    { id: 3, rfp: 'Previous Event', amount: '₹72,000', status: 'completed', date: '1 week ago' },
  ]);
  const [supplyerBookings, setSupplierBookings] = useState([
    { id: 1, ref: 'BK001', client: 'Global Travels', amount: '₹72,000', status: 'confirmed', date: '15 May - 18 May 2026' },
    { id: 2, ref: 'BK002', client: 'Business Events', amount: '₹125,000', status: 'in-progress', date: '20 May - 22 May 2026' },
  ]);

  const renderTab = () => {
    switch (activeTab) {
      case 'overview':
        return (
          <div>
            <div style={{ marginBottom: 32 }}>
              <h2 className="playfair" style={{ marginBottom: 24 }}>Dashboard Overview</h2>
              <div className="grid-4">
                {[
                  { label: 'Active Quotes', value: '8', icon: 'briefcase' },
                  { label: 'Accepted Quotes', value: '3', icon: 'checkCircle' },
                  { label: 'Confirmed Bookings', value: '12', icon: 'calendar' },
                  { label: 'Revenue This Month', value: '₹5,80,000', icon: 'trendingUp' },
                ].map((item, i) => (
                  <div key={i} className="card" style={{ padding: 24 }}>
                    <Icon name={item.icon} size={24} color="#C8960C" style={{ marginBottom: 12 }} />
                    <div style={{ fontSize: 12, color: '#718096', marginBottom: 4 }}>{item.label}</div>
                    <div style={{ fontSize: 28, fontWeight: 700, fontFamily: "'Playfair Display', serif" }}>{item.value}</div>
                  </div>
                ))}
              </div>
            </div>

            <div className="grid-2" style={{ gap: 24 }}>
              <div>
                <h3 style={{ marginBottom: 16 }}>Available Opportunities</h3>
                {availableRfps.slice(0, 2).map(rfp => (
                  <div key={rfp.id} className="card" style={{ padding: 16, marginBottom: 12 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 8 }}>
                      <div>
                        <h4 style={{ margin: 0, marginBottom: 4 }}>{rfp.title}</h4>
                        <div style={{ fontSize: 12, color: '#718096' }}>{rfp.destination} • {rfp.pax} pax</div>
                      </div>
                      <span className="tag tag-gold">{rfp.category}</span>
                    </div>
                    <div style={{ fontSize: 12, fontWeight: 600, color: '#0F766E' }}>{rfp.budget}</div>
                  </div>
                ))}
              </div>

              <div>
                <h3 style={{ marginBottom: 16 }}>Performance Metrics</h3>
                {[
                  { label: 'Quote Success Rate', value: '75%' },
                  { label: 'Average Rating', value: '4.7★' },
                  { label: 'Response Time', value: '2.5 hrs' },
                  { label: 'Completion Rate', value: '98%' },
                ].map((m, i) => (
                  <div key={i} className="card" style={{ padding: 16, marginBottom: 12 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <div style={{ fontSize: 12, color: '#718096' }}>{m.label}</div>
                      <div style={{ fontSize: 18, fontWeight: 700, color: '#C8960C' }}>{m.value}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        );

      case 'opportunities':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Available Opportunities</h2>
            {availableRfps.map(rfp => (
              <div key={rfp.id} className="card" style={{ padding: 20, marginBottom: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 16 }}>
                  <div>
                    <h3 style={{ margin: 0, marginBottom: 8 }}>{rfp.title}</h3>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, fontSize: 13, color: '#718096' }}>
                      <div>📍 {rfp.destination}</div>
                      <div>👥 {rfp.pax} participants</div>
                      <div>💰 {rfp.budget}</div>
                    </div>
                  </div>
                  <span className="tag tag-gold">{rfp.category}</span>
                </div>
                <button className="btn btn-primary">Submit Quote</button>
              </div>
            ))}
          </div>
        );

      case 'quotes':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>My Quotes</h2>
            <div style={{ overflowX: 'auto' }}>
              <table>
                <thead>
                  <tr>
                    <th>RFP Title</th>
                    <th>Quote Amount</th>
                    <th>Status</th>
                    <th>Submitted</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  {myQuotes.map(quote => (
                    <tr key={quote.id}>
                      <td><strong>{quote.rfp}</strong></td>
                      <td style={{ fontWeight: 600 }}>{quote.amount}</td>
                      <td>
                        <span className={`tag ${quote.status === 'accepted' ? 'tag-success' : quote.status === 'completed' ? 'tag-info' : 'tag-warning'}`}>
                          {quote.status}
                        </span>
                      </td>
                      <td style={{ fontSize: 12, color: '#718096' }}>{quote.date}</td>
                      <td>
                        <button className="btn btn-ghost btn-sm">View</button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        );

      case 'bookings':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Confirmed Bookings</h2>
            {supplyerBookings.map(booking => (
              <div key={booking.id} className="card" style={{ padding: 20, marginBottom: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ marginBottom: 8 }}>
                      <span style={{ fontSize: 12, color: '#718096' }}>Booking Reference:</span>
                      <strong style={{ marginLeft: 8, fontFamily: "'Space Mono', monospace" }}>{booking.ref}</strong>
                    </div>
                    <h3 style={{ margin: 0, marginBottom: 4 }}>{booking.client}</h3>
                    <div style={{ fontSize: 13, color: '#718096', marginBottom: 12 }}>{booking.date}</div>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>₹{booking.amount}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <span className={`tag ${booking.status === 'confirmed' ? 'tag-success' : 'tag-info'}`}>{booking.status}</span>
                    <div style={{ marginTop: 12 }}>
                      <button className="btn btn-ghost btn-sm">View Details</button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        );

      case 'profile':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Supplier Profile</h2>
            <div className="card" style={{ padding: 24 }}>
              <div style={{ marginBottom: 20 }}>
                <label>Company Name</label>
                <input type="text" defaultValue="Hotel Paradise Goa" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Company Type</label>
                <select defaultValue="hotel">
                  <option value="hotel">Hotel</option>
                  <option value="transport">Transport</option>
                  <option value="catering">Catering</option>
                </select>
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Contact Email</label>
                <input type="email" defaultValue="info@hotelparagoa.com" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Phone Number</label>
                <input type="tel" defaultValue="+91 83270 12345" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Location</label>
                <input type="text" defaultValue="Goa, India" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>GST Number</label>
                <input type="text" defaultValue="18AABCS1234H1Z1" />
              </div>
              <button className="btn btn-primary">Save Changes</button>
            </div>
          </div>
        );

      default:
        return <div>Coming soon...</div>;
    }
  };

  return (
    <div style={{ display: 'flex', minHeight: 'calc(100vh - 70px)', background: '#FAF7F2' }}>
      {/* Sidebar */}
      <div className="sidebar" style={{ width: 250, padding: '24px 0', flexShrink: 0 }}>
        <div style={{ padding: '0 16px', marginBottom: 32 }}>
          <h4 style={{ fontSize: 12, fontWeight: 700, textTransform: 'uppercase', color: '#718096', margin: '0 0 16px 0' }}>Supplier</h4>
        </div>
        {[
          { name: 'overview', label: 'Overview', icon: 'home' },
          { name: 'opportunities', label: 'Opportunities', icon: 'briefcase' },
          { name: 'quotes', label: 'My Quotes', icon: 'chartBar' },
          { name: 'bookings', label: 'Bookings', icon: 'calendar' },
          { name: 'profile', label: 'Profile', icon: 'user' },
        ].map(item => (
          <div key={item.name} className={`sidebar-item ${activeTab === item.name ? 'active' : ''}`} onClick={() => setActiveTab(item.name)}>
            <Icon name={item.icon} size={18} />
            {item.label}
          </div>
        ))}
        <div style={{ padding: '0 16px', marginTop: 'auto', paddingBottom: 24 }}>
          <button className="btn btn-ghost w-full" onClick={() => { setIsLoggedIn(false); setPage('home'); }} style={{ fontSize: 13 }}>
            <Icon name="logOut" size={14} />
            Sign Out
          </button>
        </div>
      </div>

      {/* Main Content */}
      <div style={{ flex: 1, padding: 40, overflowY: 'auto' }}>
        <div style={{ background: 'white', borderRadius: 16, padding: 40 }} className="card">
          {renderTab()}
        </div>
      </div>
    </div>
  );
};

// ═══════════════════════════════════════════════════════════
// ADMIN DASHBOARD
// ═══════════════════════════════════════════════════════════

const AdminDashboard = ({ setPage, setIsLoggedIn, userName }) => {
  const [activeTab, setActiveTab] = useState('overview');
  const [allRfps, setAllRfps] = useState([
    { id: 1, client: 'Global Travels', title: 'Delhi to Goa Corporate Trip', destination: 'Goa', status: 'active', quotes: 8, budget: '₹50,000' },
    { id: 2, client: 'Business Events', title: 'Mumbai Conference Setup', destination: 'Mumbai', status: 'active', quotes: 5, budget: '₹100,000' },
    { id: 3, client: 'Elite Tours', title: 'Bangalore Team Outing', destination: 'Bangalore', status: 'completed', quotes: 12, budget: '₹75,000' },
  ]);
  const [suppliers, setSuppliers] = useState([
    { id: 1, name: 'Hotel Paradise Goa', type: 'Hotel', city: 'Goa', verified: true, rating: 4.8, bookings: 45 },
    { id: 2, name: 'Business Hotels India', type: 'Hotel', city: 'Mumbai', verified: true, rating: 4.6, bookings: 32 },
    { id: 3, name: 'Express Transport', type: 'Transport', city: 'Delhi', verified: false, rating: 4.3, bookings: 18 },
  ]);

  const renderTab = () => {
    switch (activeTab) {
      case 'overview':
        return (
          <div>
            <div style={{ marginBottom: 32 }}>
              <h2 className="playfair" style={{ marginBottom: 24 }}>Platform Overview</h2>
              <div className="grid-4">
                {[
                  { label: 'Total RFPs', value: '234', icon: 'briefcase' },
                  { label: 'Active Suppliers', value: '87', icon: 'users' },
                  { label: 'Total Revenue', value: '₹24.5M', icon: 'trendingUp' },
                  { label: 'Success Rate', value: '94.2%', icon: 'checkCircle' },
                ].map((item, i) => (
                  <div key={i} className="card" style={{ padding: 24 }}>
                    <Icon name={item.icon} size={24} color="#C8960C" style={{ marginBottom: 12 }} />
                    <div style={{ fontSize: 12, color: '#718096', marginBottom: 4 }}>{item.label}</div>
                    <div style={{ fontSize: 28, fontWeight: 700, fontFamily: "'Playfair Display', serif" }}>{item.value}</div>
                  </div>
                ))}
              </div>
            </div>

            <div className="grid-2" style={{ gap: 24, marginBottom: 24 }}>
              <div>
                <h3 style={{ marginBottom: 16 }}>Recent RFPs</h3>
                {allRfps.slice(0, 3).map(rfp => (
                  <div key={rfp.id} className="card" style={{ padding: 16, marginBottom: 12 }}>
                    <div style={{ marginBottom: 8 }}>
                      <h4 style={{ margin: 0, marginBottom: 4 }}>{rfp.title}</h4>
                      <div style={{ fontSize: 12, color: '#718096' }}>{rfp.client}</div>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
                      <span>{rfp.quotes} quotes</span>
                      <span className="tag tag-gold">{rfp.status}</span>
                    </div>
                  </div>
                ))}
              </div>

              <div>
                <h3 style={{ marginBottom: 16 }}>Top Performing Suppliers</h3>
                {suppliers.filter(s => s.verified).slice(0, 3).map((s, i) => (
                  <div key={i} className="card" style={{ padding: 16, marginBottom: 12 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                      <h4 style={{ margin: 0 }}>{s.name}</h4>
                      <span style={{ color: '#C8960C', fontWeight: 700 }}>{s.rating}★</span>
                    </div>
                    <div style={{ fontSize: 12, color: '#718096' }}>{s.bookings} bookings</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        );

      case 'rfps':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>All RFPs</h2>
            <div style={{ overflowX: 'auto' }}>
              <table>
                <thead>
                  <tr>
                    <th>RFP Title</th>
                    <th>Client</th>
                    <th>Destination</th>
                    <th>Budget</th>
                    <th>Quotes</th>
                    <th>Status</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  {allRfps.map(rfp => (
                    <tr key={rfp.id}>
                      <td><strong>{rfp.title}</strong></td>
                      <td>{rfp.client}</td>
                      <td>{rfp.destination}</td>
                      <td>{rfp.budget}</td>
                      <td>{rfp.quotes}</td>
                      <td><span className="tag tag-gold">{rfp.status}</span></td>
                      <td><button className="btn btn-ghost btn-sm">View</button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        );

      case 'suppliers':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Supplier Management</h2>
            {suppliers.map(supplier => (
              <div key={supplier.id} className="card" style={{ padding: 20, marginBottom: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                  <div style={{ flex: 1 }}>
                    <h3 style={{ margin: 0, marginBottom: 8 }}>{supplier.name}</h3>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, fontSize: 13, color: '#718096' }}>
                      <div>Type: {supplier.type}</div>
                      <div>Location: {supplier.city}</div>
                      <div>Bookings: {supplier.bookings}</div>
                    </div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ marginBottom: 8 }}>
                      <span className={`tag ${supplier.verified ? 'tag-success' : 'tag-warning'}`}>
                        {supplier.verified ? 'Verified' : 'Pending'}
                      </span>
                    </div>
                    <div style={{ fontSize: 18, color: '#C8960C', fontWeight: 700, marginBottom: 12 }}>{supplier.rating}★</div>
                    <div style={{ display: 'flex', gap: 8, flexDirection: 'column' }}>
                      {!supplier.verified && <button className="btn btn-primary btn-sm">Approve</button>}
                      <button className="btn btn-ghost btn-sm">View Details</button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        );

      case 'revenue':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Revenue & Analytics</h2>
            <div className="grid-2" style={{ gap: 24, marginBottom: 24 }}>
              <div className="card" style={{ padding: 24 }}>
                <h3 style={{ marginBottom: 16 }}>Monthly Revenue</h3>
                <div style={{ fontSize: 32, fontWeight: 700, fontFamily: "'Playfair Display', serif", marginBottom: 16 }}>₹24.5M</div>
                <div style={{ fontSize: 13, color: '#0F766E' }}>↑ 12% from last month</div>
              </div>
              <div className="card" style={{ padding: 24 }}>
                <h3 style={{ marginBottom: 16 }}>Commission Rate</h3>
                <div style={{ fontSize: 32, fontWeight: 700, fontFamily: "'Playfair Display', serif", marginBottom: 16 }}>15%</div>
                <button className="btn btn-ghost btn-sm">Adjust Rate</button>
              </div>
            </div>

            <h3 style={{ marginBottom: 16 }}>Recent Transactions</h3>
            {[
              { id: 1, rfp: 'Delhi to Goa Trip', supplier: 'Hotel Paradise', amount: '₹72,000', date: 'Today' },
              { id: 2, rfp: 'Mumbai Conference', supplier: 'Business Hotels', amount: '₹125,000', date: 'Yesterday' },
              { id: 3, rfp: 'Bangalore Outing', supplier: 'Sunset Resorts', amount: '₹80,000', date: '2 days ago' },
            ].map(tx => (
              <div key={tx.id} className="card" style={{ padding: 16, marginBottom: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <div style={{ fontWeight: 600 }}>{tx.rfp}</div>
                  <div style={{ fontSize: 12, color: '#718096' }}>{tx.supplier} • {tx.date}</div>
                </div>
                <div style={{ fontSize: 16, fontWeight: 700 }}>{tx.amount}</div>
              </div>
            ))}
          </div>
        );

      case 'settings':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Platform Settings</h2>
            <div className="card" style={{ padding: 24 }}>
              <div style={{ marginBottom: 20 }}>
                <label>Platform Name</label>
                <input type="text" defaultValue="Premier Hospitality" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Commission Rate (%)</label>
                <input type="number" defaultValue="15" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Currency</label>
                <input type="text" defaultValue="INR" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Support Email</label>
                <input type="email" defaultValue="support@premierhospitality.com" />
              </div>
              <button className="btn btn-primary">Save Settings</button>
            </div>
          </div>
        );

      default:
        return <div>Coming soon...</div>;
    }
  };

  return (
    <div style={{ display: 'flex', minHeight: 'calc(100vh - 70px)', background: '#FAF7F2' }}>
      {/* Sidebar */}
      <div className="sidebar" style={{ width: 250, padding: '24px 0', flexShrink: 0 }}>
        <div style={{ padding: '0 16px', marginBottom: 32 }}>
          <h4 style={{ fontSize: 12, fontWeight: 700, textTransform: 'uppercase', color: '#718096', margin: '0 0 16px 0' }}>Admin Panel</h4>
        </div>
        {[
          { name: 'overview', label: 'Overview', icon: 'home' },
          { name: 'rfps', label: 'All RFPs', icon: 'briefcase' },
          { name: 'suppliers', label: 'Suppliers', icon: 'users' },
          { name: 'revenue', label: 'Revenue', icon: 'trendingUp' },
        ].map(item => (
          <div key={item.name} className={`sidebar-item ${activeTab === item.name ? 'active' : ''}`} onClick={() => setActiveTab(item.name)}>
            <Icon name={item.icon} size={18} />
            {item.label}
          </div>
        ))}
        <div className="sidebar-section" style={{ marginTop: 32 }}>System</div>
        {[
          { name: 'settings', label: 'Settings', icon: 'settings' },
        ].map(item => (
          <div key={item.name} className={`sidebar-item ${activeTab === item.name ? 'active' : ''}`} onClick={() => setActiveTab(item.name)}>
            <Icon name={item.icon} size={18} />
            {item.label}
          </div>
        ))}
        <div style={{ padding: '0 16px', marginTop: 'auto', paddingBottom: 24 }}>
          <button className="btn btn-ghost w-full" onClick={() => { setIsLoggedIn(false); setPage('home'); }} style={{ fontSize: 13 }}>
            <Icon name="logOut" size={14} />
            Sign Out
          </button>
        </div>
      </div>

      {/* Main Content */}
      <div style={{ flex: 1, padding: 40, overflowY: 'auto' }}>
        <div style={{ background: 'white', borderRadius: 16, padding: 40 }} className="card">
          {renderTab()}
        </div>
      </div>
    </div>
  );
};

// ═══════════════════════════════════════════════════════════
// MAIN APP
// ═══════════════════════════════════════════════════════════

function App() {
  const [page, setPage] = useState('home');
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [userType, setUserType] = useState(null);
  const [userName, setUserName] = useState('');

  return (
    <div>
      <Header page={page} setPage={setPage} isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} userType={userType} userName={userName} />
      
      {page === 'home' && <HomePage setPage={setPage} />}
      {page === 'login' && <AuthPage mode="login" setPage={setPage} setIsLoggedIn={setIsLoggedIn} setUserType={setUserType} setUserName={setUserName} />}
      {page === 'register' && <AuthPage mode="register" setPage={setPage} setIsLoggedIn={setIsLoggedIn} setUserType={setUserType} setUserName={setUserName} />}
      {page === 'client-dashboard' && isLoggedIn && <ClientDashboard setPage={setPage} setIsLoggedIn={setIsLoggedIn} userName={userName} />}
      {page === 'supplier-dashboard' && isLoggedIn && <SupplierDashboard setPage={setPage} setIsLoggedIn={setIsLoggedIn} userName={userName} />}
      {page === 'admin-dashboard' && isLoggedIn && <AdminDashboard setPage={setPage} setIsLoggedIn={setIsLoggedIn} userName={userName} />}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);