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>,
  };
  return icons[name] || null;
};

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

const Header = ({ setPage, page, userType = null }) => {
  const [mobileOpen, setMobileOpen] = useState(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' }} 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>

        {userType === 'home' && (
          <div className="flex items-center gap-32" style={{ display: 'none' }} >
            {['about', 'features', 'pricing', 'contact'].map(item => (
              <span key={item} className="nav-link" onClick={() => setPage(item)} style={{ textTransform: 'capitalize' }}>
                {item}
              </span>
            ))}
          </div>
        )}

        <div className="flex items-center gap-16">
          {!userType && (
            <>
              <button className="btn btn-ghost" onClick={() => setPage('login')}>Sign In</button>
              <button className="btn btn-primary" onClick={() => setPage('register')}>Get Started</button>
            </>
          )}
          {userType && (
            <div className="flex items-center gap-12">
              <Icon name="bell" size={20} color="#718096" />
              <div className="avatar" style={{ background: '#FDF3D0', color: '#C8960C' }}>U</div>
            </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('demo')}>View Demo</button>
              <button className="btn btn-ghost" style={{ color: 'white', borderColor: 'white' }} onClick={() => setPage('register')}>Learn More</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, idx) => (
            <div key={idx} className="card p-24 hover-lift">
              <div style={{ background: '#FDF3D0', width: 56, height: 56, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                <Icon name={item.icon} size={28} color="#C8960C" />
              </div>
              <h4 style={{ marginBottom: 8, fontWeight: 700 }}>{item.title}</h4>
              <p style={{ color: '#718096', fontSize: 14 }}>{item.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* How It Works */}
    <section className="section section-cream">
      <div className="container">
        <h2 className="playfair" style={{ textAlign: 'center', marginBottom: 64 }}>How It Works</h2>
        <div className="grid-4">
          {[
            { num: '01', title: 'Create Account', desc: 'Sign up as a travel company or supplier' },
            { num: '02', title: 'Post Requirements', desc: 'Submit your RFP with specific details' },
            { num: '03', title: 'Get Quotes', desc: 'Receive bids from verified suppliers' },
            { num: '04', title: 'Book & Manage', desc: 'Select and manage your entire trip' },
          ].map((item, idx) => (
            <div key={idx} style={{ textAlign: 'center' }}>
              <div style={{ width: 64, height: 64, borderRadius: '50%', background: '#C8960C', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px', fontFamily: "'Playfair Display', serif", fontSize: 28, fontWeight: 700 }}>
                {item.num}
              </div>
              <h5 style={{ marginBottom: 8, fontWeight: 600 }}>{item.title}</h5>
              <p style={{ color: '#718096', fontSize: 14 }}>{item.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Pricing Section */}
    <section className="section section-light">
      <div className="container">
        <h2 className="playfair" style={{ textAlign: 'center', marginBottom: 64 }}>Transparent Pricing</h2>
        <div className="grid-3">
          {[
            { name: 'Starter', price: 'Free', features: ['Up to 5 RFPs/month', 'Basic analytics', 'Email support'] },
            { name: 'Professional', price: '$299', features: ['Unlimited RFPs', 'Advanced analytics', 'Priority support', 'Custom branding'] },
            { name: 'Enterprise', price: 'Custom', features: ['Dedicated account', 'API access', 'Custom integration', '24/7 support'] },
          ].map((plan, idx) => (
            <div key={idx} className="card p-32" style={{ textAlign: 'center', border: idx === 1 ? '2px solid #C8960C' : '1px solid #E2E8F0' }}>
              <h5 style={{ marginBottom: 8, fontWeight: 700 }}>{plan.name}</h5>
              <div style={{ fontSize: 32, fontFamily: "'Playfair Display', serif", fontWeight: 700, marginBottom: 24, color: '#C8960C' }}>
                {plan.price}
                {plan.price !== 'Custom' && <span style={{ fontSize: 14, color: '#718096' }}>/month</span>}
              </div>
              <div style={{ marginBottom: 24 }}>
                {plan.features.map((f, i) => (
                  <div key={i} className="flex items-center gap-8" style={{ marginBottom: 12, justifyContent: 'center' }}>
                    <Icon name="check" size={16} color="#0F766E" />
                    <span style={{ fontSize: 14 }}>{f}</span>
                  </div>
                ))}
              </div>
              <button className="btn btn-primary w-full" onClick={() => setPage('register')}>Get Started</button>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* CTA Section */}
    <section className="section hero-gradient" style={{ color: 'white', textAlign: 'center' }}>
      <div className="container">
        <h2 className="playfair" style={{ marginBottom: 24 }}>Ready to Transform Your Travel Business?</h2>
        <p style={{ fontSize: 18, marginBottom: 32, maxWidth: 600, margin: '0 auto 32px' }}>
          Join hundreds of travel companies already using Premier Hospitality to streamline operations and reduce costs.
        </p>
        <button className="btn btn-primary" style={{ fontSize: 16, padding: '16px 40px' }} onClick={() => setPage('register')}>
          Start Free Trial
        </button>
      </div>
    </section>
  </div>
);

// ═══════════════════════════════════════════════════════════
// AUTH PAGE
// ═══════════════════════════════════════════════════════════

const AuthPage = ({ mode, setPage }) => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    confirmPassword: '',
    userType: 'client',
    company: '',
    phone: '',
  });

  const handleChange = (field, value) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (mode === 'register' && formData.password !== formData.confirmPassword) {
      alert('Passwords do not match');
      return;
    }
    setPage('demo');
  };

  return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#FAF7F2', padding: 24 }}>
      <div className="card" style={{ width: '100%', maxWidth: 480, padding: 48 }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <Icon name="logo" size={40} color="#C8960C" />
          <h2 className="playfair" style={{ marginTop: 20, marginBottom: 8 }}>
            {mode === 'login' ? 'Welcome Back' : 'Get Started'}
          </h2>
          <p style={{ color: '#718096', fontSize: 14 }}>
            {mode === 'login' ? 'Sign in to your account' : 'Create your Premier Hospitality account'}
          </p>
        </div>

        <form onSubmit={handleSubmit}>
          {mode === 'register' && (
            <>
              <div style={{ marginBottom: 16 }}>
                <label>User Type</label>
                <select value={formData.userType} onChange={(e) => handleChange('userType', e.target.value)}>
                  <option value="client">Travel Company / Client</option>
                  <option value="supplier">Supplier / Hotel</option>
                </select>
              </div>
              <div style={{ marginBottom: 16 }}>
                <label>Full Name</label>
                <input type="text" value={formData.name} onChange={(e) => handleChange('name', e.target.value)} placeholder="John Doe" required />
              </div>
              <div style={{ marginBottom: 16 }}>
                <label>Company Name</label>
                <input type="text" value={formData.company} onChange={(e) => handleChange('company', e.target.value)} placeholder="Your Company" required />
              </div>
              <div style={{ marginBottom: 16 }}>
                <label>Phone Number</label>
                <input type="tel" value={formData.phone} onChange={(e) => handleChange('phone', e.target.value)} placeholder="+91 98765 43210" required />
              </div>
            </>
          )}

          <div style={{ marginBottom: 16 }}>
            <label>Email Address</label>
            <input type="email" value={formData.email} onChange={(e) => handleChange('email', e.target.value)} placeholder="you@company.com" required />
          </div>

          <div style={{ marginBottom: 16 }}>
            <label>Password</label>
            <input type="password" value={formData.password} onChange={(e) => handleChange('password', e.target.value)} placeholder="••••••••" required />
          </div>

          {mode === 'register' && (
            <div style={{ marginBottom: 24 }}>
              <label>Confirm Password</label>
              <input type="password" value={formData.confirmPassword} onChange={(e) => handleChange('confirmPassword', e.target.value)} placeholder="••••••••" required />
            </div>
          )}

          <button className="btn btn-primary w-full" style={{ marginBottom: 16, padding: '12px' }}>
            {mode === 'login' ? 'Sign In' : 'Create Account'}
          </button>
        </form>

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

        <div style={{ marginTop: 24, textAlign: 'center' }}>
          <span style={{ color: '#718096', fontSize: 13, cursor: 'pointer' }} onClick={() => setPage('home')}>← Back to website</span>
        </div>
      </div>
    </div>
  );
};

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

const ClientDashboard = ({ setPage }) => {
  const [activeTab, setActiveTab] = useState('overview');
  const [rfps, setRfps] = useState([
    { id: 1, title: 'Delhi to Goa - 50 Pax', status: 'active', quotes: 3, amount: '₹2,50,000', date: '2024-04-05' },
    { id: 2, title: 'Mumbai Corporate Event', status: 'completed', quotes: 5, amount: '₹5,75,000', date: '2024-04-01' },
  ]);

  const renderTab = () => {
    switch (activeTab) {
      case 'overview':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 32 }}>Dashboard</h2>
            <div className="grid-4">
              {[
                { label: 'Active RFPs', value: '5', change: '+2 this week' },
                { label: 'Total Quotes', value: '18', change: '+5 this month' },
                { label: 'Avg Savings', value: '28%', change: 'vs market rate' },
                { label: 'Bookings', value: '12', change: '3 pending' },
              ].map((stat, idx) => (
                <div key={idx} className="stat-card">
                  <div style={{ color: '#718096', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.5px', fontWeight: 600, marginBottom: 12 }}>
                    {stat.label}
                  </div>
                  <div style={{ fontSize: 32, fontFamily: "'Playfair Display', serif", fontWeight: 700, marginBottom: 8 }}>
                    {stat.value}
                  </div>
                  <div style={{ color: '#0F766E', fontSize: 12, fontWeight: 600 }}>{stat.change}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 48 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
                <h3>Recent RFPs</h3>
                <button className="btn btn-primary btn-sm">+ New RFP</button>
              </div>
              <div className="card">
                <table>
                  <thead>
                    <tr>
                      <th>RFP Title</th>
                      <th>Status</th>
                      <th>Quotes</th>
                      <th>Amount</th>
                      <th>Date</th>
                    </tr>
                  </thead>
                  <tbody>
                    {rfps.map(rfp => (
                      <tr key={rfp.id}>
                        <td style={{ fontWeight: 600 }}>{rfp.title}</td>
                        <td><span className={`tag ${rfp.status === 'active' ? 'tag-gold' : 'tag-success'}`}>{rfp.status}</span></td>
                        <td>{rfp.quotes}</td>
                        <td style={{ fontWeight: 600 }}>{rfp.amount}</td>
                        <td style={{ color: '#718096' }}>{rfp.date}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        );
      case 'rfps':
        return (
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
              <h2 className="playfair">My RFPs</h2>
              <button className="btn btn-primary">+ Create New RFP</button>
            </div>
            <div className="grid-2">
              {rfps.map(rfp => (
                <div key={rfp.id} className="card p-24 hover-lift">
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 16 }}>
                    <h4 style={{ fontWeight: 600 }}>{rfp.title}</h4>
                    <span className={`tag ${rfp.status === 'active' ? 'tag-gold' : 'tag-success'}`}>{rfp.status}</span>
                  </div>
                  <div className="divider" />
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 20 }}>
                    <div>
                      <div style={{ fontSize: 12, color: '#718096', marginBottom: 4 }}>QUOTES</div>
                      <div style={{ fontSize: 20, fontWeight: 700 }}>{rfp.quotes}</div>
                    </div>
                    <div>
                      <div style={{ fontSize: 12, color: '#718096', marginBottom: 4 }}>AMOUNT</div>
                      <div style={{ fontSize: 20, fontWeight: 700, color: '#C8960C' }}>{rfp.amount}</div>
                    </div>
                  </div>
                  <button className="btn btn-navy" style={{ width: '100%' }}>View Details</button>
                </div>
              ))}
            </div>
          </div>
        );
      case 'quotes':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 32 }}>Received Quotes</h2>
            <div className="card">
              <table>
                <thead>
                  <tr>
                    <th>Supplier</th>
                    <th>RFP</th>
                    <th>Quote Amount</th>
                    <th>Rating</th>
                    <th>Status</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    { supplier: 'Hotel Taj', rfp: 'Goa Trip', amount: '₹2,10,000', rating: '4.8/5', status: 'pending' },
                    { supplier: 'Oberoi Hotels', rfp: 'Goa Trip', amount: '₹2,45,000', rating: '4.9/5', status: 'accepted' },
                    { supplier: 'ITC Hotels', rfp: 'Goa Trip', amount: '₹1,95,000', rating: '4.6/5', status: 'pending' },
                  ].map((quote, idx) => (
                    <tr key={idx}>
                      <td style={{ fontWeight: 600 }}>{quote.supplier}</td>
                      <td>{quote.rfp}</td>
                      <td style={{ color: '#C8960C', fontWeight: 600 }}>{quote.amount}</td>
                      <td><span className="tag tag-gold">{quote.rating}</span></td>
                      <td><span className={`pill-status ${quote.status === 'accepted' ? 'pill-active' : 'pill-pending'}`}>{quote.status}</span></td>
                      <td><button className="btn btn-sm btn-primary">Review</button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        );
      case 'bookings':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 32 }}>My Bookings</h2>
            <div className="grid-2">
              {[
                { id: 1, title: 'Mumbai to Dubai - 40 Pax', hotel: 'Burj Al Arab', dates: '15-18 April', amount: '₹4,80,000', status: 'confirmed' },
                { id: 2, title: 'Delhi MICE Event', venue: 'ITC Grand Central', dates: '20-22 April', amount: '₹3,20,000', status: 'confirmed' },
              ].map(booking => (
                <div key={booking.id} className="card p-24">
                  <h4 style={{ marginBottom: 16, fontWeight: 600 }}>{booking.title}</h4>
                  <div style={{ marginBottom: 12 }}>
                    <div style={{ fontSize: 12, color: '#718096', marginBottom: 2 }}>DATES</div>
                    <div style={{ fontSize: 14 }}>{booking.dates}</div>
                  </div>
                  <div style={{ marginBottom: 12 }}>
                    <div style={{ fontSize: 12, color: '#718096', marginBottom: 2 }}>AMOUNT</div>
                    <div style={{ fontSize: 18, fontWeight: 700, color: '#C8960C' }}>{booking.amount}</div>
                  </div>
                  <div style={{ marginBottom: 16 }}>
                    <span className="tag tag-success">{booking.status}</span>
                  </div>
                  <button className="btn btn-navy" style={{ width: '100%' }}>View Itinerary</button>
                </div>
              ))}
            </div>
          </div>
        );
      case 'settings':
        return (
          <div style={{ maxWidth: 600 }}>
            <h2 className="playfair" style={{ marginBottom: 32 }}>Account Settings</h2>
            <div className="card p-24">
              <div style={{ marginBottom: 24 }}>
                <label>Company Name</label>
                <input type="text" defaultValue="Travel Ventures Inc" />
              </div>
              <div style={{ marginBottom: 24 }}>
                <label>Email</label>
                <input type="email" defaultValue="contact@travelventures.com" />
              </div>
              <div style={{ marginBottom: 24 }}>
                <label>Phone</label>
                <input type="tel" defaultValue="+91 98765 43210" />
              </div>
              <div style={{ marginBottom: 24 }}>
                <label>Preferred Currency</label>
                <select><option>INR</option><option>USD</option></select>
              </div>
              <button className="btn btn-primary">Save Changes</button>
            </div>
          </div>
        );
      default:
        return <div>Coming soon...</div>;
    }
  };

  return (
    <div style={{ display: 'flex', minHeight: '100vh', background: '#FAF7F2' }}>
      {/* Sidebar */}
      <div className="sidebar" style={{ width: 250, padding: '24px 0', flexShrink: 0 }}>
        <div style={{ padding: '0 16px', marginBottom: 32, cursor: 'pointer' }} onClick={() => setPage('home')}>
          <Icon name="logo" size={32} color="#C8960C" />
        </div>
        <div className="sidebar-section">Client Panel</div>
        {[
          { name: 'overview', label: 'Overview', icon: 'home' },
          { name: 'rfps', label: 'My RFPs', icon: 'briefcase' },
          { name: 'quotes', label: 'Quotes', icon: 'eye' },
          { name: 'bookings', label: 'Bookings', icon: 'calendar' },
        ].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 }}>Account</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={() => setPage('home')} style={{ fontSize: 13 }}>Sign Out</button>
        </div>
      </div>

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

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

const AdminDashboard = ({ setPage }) => {
  const [activeTab, setActiveTab] = useState('overview');

  const renderTab = () => {
    switch (activeTab) {
      case 'overview':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 32 }}>Admin Dashboard</h2>
            <div className="grid-4">
              {[
                { label: 'Total RFPs', value: '1,247', change: '+12% this month' },
                { label: 'Active Suppliers', value: '342', change: '+8 new suppliers' },
                { label: 'Total Revenue', value: '₹45.2L', change: '+15% YoY' },
                { label: 'Conversion Rate', value: '34%', change: '+2% from last month' },
              ].map((stat, idx) => (
                <div key={idx} className="stat-card">
                  <div style={{ color: '#718096', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.5px', fontWeight: 600, marginBottom: 12 }}>
                    {stat.label}
                  </div>
                  <div style={{ fontSize: 28, fontFamily: "'Playfair Display', serif", fontWeight: 700, marginBottom: 8 }}>
                    {stat.value}
                  </div>
                  <div style={{ color: '#0F766E', fontSize: 12, fontWeight: 600 }}>{stat.change}</div>
                </div>
              ))}
            </div>

            <div className="grid-2" style={{ marginTop: 48 }}>
              <div className="card p-24">
                <h4 style={{ marginBottom: 16, fontWeight: 600 }}>RFPs This Month</h4>
                <div style={{ height: 200, background: '#FAF7F2', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#718096' }}>
                  Chart Placeholder
                </div>
              </div>
              <div className="card p-24">
                <h4 style={{ marginBottom: 16, fontWeight: 600 }}>Revenue Trend</h4>
                <div style={{ height: 200, background: '#FAF7F2', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#718096' }}>
                  Chart Placeholder
                </div>
              </div>
            </div>
          </div>
        );
      case 'rfps':
        return (
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
              <h2 className="playfair">All RFPs</h2>
              <button className="btn btn-primary">Export</button>
            </div>
            <div className="card">
              <table>
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>Client</th>
                    <th>Title</th>
                    <th>Status</th>
                    <th>Quotes</th>
                    <th>Created</th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    { id: 'RFP-001', client: 'Travel Ventures', title: 'Goa Trip 50 Pax', status: 'active', quotes: 5, created: '2024-04-01' },
                    { id: 'RFP-002', client: 'Corporate Events Co', title: 'Mumbai Event', status: 'completed', quotes: 8, created: '2024-03-28' },
                  ].map((rfp, idx) => (
                    <tr key={idx}>
                      <td style={{ fontWeight: 600 }}>{rfp.id}</td>
                      <td>{rfp.client}</td>
                      <td>{rfp.title}</td>
                      <td><span className={`tag ${rfp.status === 'active' ? 'tag-gold' : 'tag-success'}`}>{rfp.status}</span></td>
                      <td>{rfp.quotes}</td>
                      <td style={{ color: '#718096' }}>{rfp.created}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        );
      case 'suppliers':
        return (
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
              <h2 className="playfair">Suppliers</h2>
              <button className="btn btn-primary">+ Add Supplier</button>
            </div>
            <div className="grid-3">
              {[
                { name: 'Hotel Taj', type: 'Hotel', rating: 4.8, status: 'active' },
                { name: 'Oberoi Hotels', type: 'Hotel', rating: 4.9, status: 'active' },
                { name: 'ABC Transporters', type: 'Transport', rating: 4.5, status: 'active' },
              ].map((supplier, idx) => (
                <div key={idx} className="card p-24 hover-lift">
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 16 }}>
                    <h5 style={{ fontWeight: 600 }}>{supplier.name}</h5>
                    <span className="tag tag-success">{supplier.status}</span>
                  </div>
                  <div style={{ marginBottom: 12 }}>
                    <span className="tag tag-gold">{supplier.type}</span>
                  </div>
                  <div style={{ marginBottom: 16 }}>
                    <div style={{ fontSize: 12, color: '#718096', marginBottom: 4 }}>RATING</div>
                    <div style={{ fontSize: 18, fontWeight: 700 }}>{supplier.rating}/5 ⭐</div>
                  </div>
                  <button className="btn btn-navy" style={{ width: '100%' }}>View Profile</button>
                </div>
              ))}
            </div>
          </div>
        );
      case 'revenue':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 32 }}>Revenue & Commissions</h2>
            <div className="grid-2">
              <div className="card p-24">
                <div style={{ fontSize: 12, color: '#718096', textTransform: 'uppercase', fontWeight: 600, marginBottom: 12 }}>TOTAL REVENUE</div>
                <div style={{ fontSize: 36, fontFamily: "'Playfair Display', serif", fontWeight: 700, color: '#C8960C', marginBottom: 8 }}>₹45.2L</div>
                <div style={{ color: '#0F766E', fontSize: 12, fontWeight: 600 }}>+15% from last quarter</div>
              </div>
              <div className="card p-24">
                <div style={{ fontSize: 12, color: '#718096', textTransform: 'uppercase', fontWeight: 600, marginBottom: 12 }}>PENDING PAYOUTS</div>
                <div style={{ fontSize: 36, fontFamily: "'Playfair Display', serif", fontWeight: 700, color: '#B45309', marginBottom: 8 }}>₹8.5L</div>
                <button className="btn btn-sm btn-primary">Process Payout</button>
              </div>
            </div>
          </div>
        );
      case 'settings':
        return (
          <div style={{ maxWidth: 600 }}>
            <h2 className="playfair" style={{ marginBottom: 32 }}>Platform Settings</h2>
            <div className="card p-24">
              <div style={{ marginBottom: 24 }}>
                <label>Platform Commission Rate (%)</label>
                <input type="number" defaultValue="15" />
              </div>
              <div style={{ marginBottom: 24 }}>
                <label>Min RFP Amount (₹)</label>
                <input type="number" defaultValue="50000" />
              </div>
              <div style={{ marginBottom: 24 }}>
                <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: '100vh', background: '#FAF7F2' }}>
      {/* Sidebar */}
      <div className="sidebar" style={{ width: 250, padding: '24px 0', flexShrink: 0 }}>
        <div style={{ padding: '0 16px', marginBottom: 32, cursor: 'pointer' }} onClick={() => setPage('home')}>
          <Icon name="logo" size={32} color="#C8960C" />
        </div>
        <div className="sidebar-section">Admin Panel</div>
        {[
          { name: 'overview', label: 'Overview', icon: 'home' },
          { name: 'rfps', label: '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={() => setPage('home')} style={{ fontSize: 13 }}>Sign Out</button>
        </div>
      </div>

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

// ═══════════════════════════════════════════════════════════
// DEMO SELECTOR
// ═══════════════════════════════════════════════════════════

const DemoSelector = ({ setPage, setDashType }) => (
  <div style={{ minHeight: '100vh', background: '#FAF7F2', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
    <div style={{ maxWidth: 520, width: '100%' }}>
      <div style={{ textAlign: 'center', marginBottom: 40 }}>
        <Icon name="logo" size={48} color="#C8960C" />
        <h2 className="playfair" style={{ fontSize: 28, marginTop: 20, marginBottom: 8 }}>Choose Your Dashboard</h2>
        <p style={{ color: '#718096', fontSize: 14 }}>Select which interface you'd like to explore</p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {[
          { title: 'Admin Panel', desc: 'Platform control - RFPs, suppliers, revenue, settings', icon: 'shield', type: 'admin' },
          { title: 'Client Dashboard', desc: 'Travel company view - RFPs, quotes, bookings', icon: 'briefcase', type: 'client' },
        ].map(opt => (
          <div
            key={opt.type}
            className="card hover-lift"
            style={{ padding: 24, cursor: 'pointer' }}
            onClick={() => { setDashType(opt.type); setPage('dashboard'); }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <div style={{ width: 52, height: 52, borderRadius: 14, background: '#FDF3D0', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name={opt.icon} size={24} color="#C8960C" />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 700, fontSize: 17, marginBottom: 4 }}>{opt.title}</div>
                <div style={{ fontSize: 13, color: '#718096' }}>{opt.desc}</div>
              </div>
              <Icon name="arrow_right" size={18} color="#718096" />
            </div>
          </div>
        ))}
      </div>
      <div style={{ textAlign: 'center', marginTop: 24 }}>
        <span style={{ color: '#718096', fontSize: 13, cursor: 'pointer' }} onClick={() => setPage('home')}>← Back to website</span>
      </div>
    </div>
  </div>
);

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

function App() {
  const [page, setPage] = useState('home');
  const [dashType, setDashType] = useState('admin');

  return (
    <div>
      {page === 'home' && (
        <>
          <Header setPage={setPage} page={page} />
          <HomePage setPage={setPage} />
        </>
      )}
      {page === 'login' && <AuthPage mode="login" setPage={setPage} />}
      {page === 'register' && <AuthPage mode="register" setPage={setPage} />}
      {page === 'demo' && <DemoSelector setPage={setPage} setDashType={setDashType} />}
      {page === 'dashboard' && dashType === 'client' && <ClientDashboard setPage={setPage} />}
      {page === 'dashboard' && dashType === 'admin' && <AdminDashboard setPage={setPage} />}
    </div>
  );
}

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