/* ============== Minassa Cars — App shell & router ============== */

function TopNav({ screen, nav }) {
  const links = [
    { id: 'home', label: 'الرئيسية' },
    { id: 'search', label: 'شراء' },
    { id: 'search', label: 'إيجار', alt: 'rent' },
    { id: 'auction', label: 'المزادات' },
  ];
  return (
    <header className="topnav only-desktop">
      <div className="wrap topnav-inner">
        <div className="brand" onClick={() => nav('home')} style={{ cursor: 'pointer' }}>
          <span className="mk"><Icon name="car" size={18} /></span> Minassa
        </div>
        <nav className="nav-links">
          <a className={screen === 'home' ? 'active' : ''} onClick={() => nav('home')}>الرئيسية</a>
          <a className={screen === 'search' ? 'active' : ''} onClick={() => nav('search')}>شراء</a>
          <a onClick={() => nav('search')}>إيجار</a>
          <a className={screen === 'auction' ? 'active' : ''} onClick={() => nav('auction')}>المزادات</a>
        </nav>
        <div className="nav-right">
          <button className="btn btn-ghost btn-sm"><Icon name="user" size={16} /> تسجيل الدخول</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={16} /> نشر إعلان</button>
        </div>
      </div>
    </header>
  );
}

function BottomNav({ screen, nav }) {
  const items = [
    { id: 'home', label: 'الرئيسية', icon: 'home' },
    { id: 'search', label: 'شراء', icon: 'search' },
    { id: 'auction', label: 'المزادات', icon: 'gavel' },
    { id: 'fav', label: 'المفضلة', icon: 'heart' },
    { id: 'acct', label: 'حسابي', icon: 'user' },
  ];
  return (
    <nav className="botnav">
      {items.map(it => (
        <button key={it.label} className={screen === it.id ? 'on' : ''} onClick={() => ['home', 'search', 'auction'].includes(it.id) && nav(it.id)}>
          <Icon name={it.icon} size={21} />
          {it.label}
        </button>
      ))}
    </nav>
  );
}

function Footer() {
  const cols = [
    ['شراء', ['سيارات مستعملة', 'SUV & 4×4', 'بيك أب', 'حسب المدينة']],
    ['إيجار', ['إيجار قصير المدى', 'إيجار طويل المدى', 'مع سائق']],
    ['المزادات', ['مزادات مباشرة', 'قادمة', 'كيف تزايد']],
    ['مساعدة', ['مركز المساعدة', 'دفع آمن', 'اتصل بنا']],
  ];
  return (
    <footer className="footer">
      <div className="wrap footer-inner">
        <div className="footer-brand">
          <div className="brand" style={{ color: '#fff' }}><span className="mk"><Icon name="car" size={18} /></span> Minassa</div>
          <p className="footer-tag">سوق السيارات الموثوق في موريتانيا — شراء وإيجار ومزادات.</p>
          <div className="footer-pay">
            <span className="pay-chip">Bankily</span>
            <span className="pay-chip">Masrvi</span>
            <span className="pay-chip">Sedad</span>
          </div>
        </div>
        <div className="footer-cols">
          {cols.map(([h, items]) => (
            <div key={h} className="footer-col">
              <div className="footer-h">{h}</div>
              {items.map(i => <a key={i}>{i}</a>)}
            </div>
          ))}
        </div>
      </div>
      <div className="wrap footer-bot">
        <span>© 2026 Minassa Cars · نواكشوط، موريتانيا</span>
        <span>الشروط · الخصوصية · Français</span>
      </div>
    </footer>
  );
}

const SCREENS = {
  home: 'الرئيسية',
  search: 'بحث',
  auction: 'مزاد',
};

function App() {
  const [screen, setScreen] = useState('home');
  const [device, setDevice] = useState('desktop');
  const scrollRef = useRef(null);

  const nav = (s) => {
    setScreen(s);
    requestAnimationFrame(() => { if (scrollRef.current) scrollRef.current.scrollTop = 0; });
  };

  const mobile = device === 'mobile';
  const Screen = { home: HomeScreen, search: SearchScreen, auction: AuctionScreen }[screen];

  const app = (
    <div className={`app ${mobile ? 'mob' : ''}`}>
      {!mobile && <TopNav screen={screen} nav={nav} />}
      <Screen mobile={mobile} nav={nav} key={screen} />
    </div>
  );

  return (
    <div className="proto">
      <div className="proto-bar">
        <div className="proto-brand"><span className="dot" /> Minassa Cars · Prototype</div>
        <div className="proto-segwrap">
          {Object.entries(SCREENS).map(([id, label]) => (
            <button key={id} className={`proto-seg ${screen === id ? 'on' : ''}`} onClick={() => nav(id)}>{label}</button>
          ))}
        </div>
        <div className="proto-spacer" />
        <div className="proto-device">
          <button className={device === 'desktop' ? 'on' : ''} onClick={() => setDevice('desktop')}><Icon name="grid" size={15} /> سطح المكتب</button>
          <button className={device === 'mobile' ? 'on' : ''} onClick={() => setDevice('mobile')}><Icon name="phone" size={15} /> موبايل</button>
        </div>
      </div>

      <div className={`proto-stage ${mobile ? 'is-mobile' : ''}`}>
        {mobile ? (
          <div className="phone">
            <div className="phone-screen" id="phone-screen">
              <div className="phone-statusbar">
                <span className="tnum">9:41</span>
                <span className="dots"><Icon name="bolt" size={13} fill="currentColor" sw={0} /> <span style={{ fontWeight: 800 }}>5G</span> <span style={{ width: 22, height: 11, border: '1.5px solid currentColor', borderRadius: 3, display: 'inline-block', position: 'relative' }} /></span>
              </div>
              <div className="viewport-mobile" ref={scrollRef}>{app}</div>
              <BottomNav screen={screen} nav={nav} />
            </div>
          </div>
        ) : (
          <div className="viewport-desktop" ref={scrollRef}>{app}</div>
        )}
      </div>
    </div>
  );
}

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