// MRB Auto storefront — App shell wiring the sections together
const Icon = (props) => { const C = window.MRBAutoDesignSystem_73c751 && window.MRBAutoDesignSystem_73c751.Icon; return C ? React.createElement(C, props) : null; };

function FloatingWhatsApp() {
  return (
    <a href="https://wa.me/33761079155" target="_blank" rel="noreferrer" title="WhatsApp — Conseil & SAV"
      style={{ position: 'fixed', right: 24, bottom: 24, zIndex: 60, width: 58, height: 58, borderRadius: 'var(--radius-pill)', background: 'var(--status-success)', color: 'var(--white)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-lg)' }}>
      <Icon name="message" size={26} />
    </a>
  );
}

function Toast({ msg }) {
  if (!msg) return null;
  return (
    <div style={{ position: 'fixed', left: '50%', bottom: 28, transform: 'translateX(-50%)', zIndex: 70, display: 'flex', alignItems: 'center', gap: 10, background: 'var(--ink-900)', color: 'var(--white)', padding: '14px 22px', borderRadius: 'var(--radius-pill)', boxShadow: 'var(--shadow-xl)', fontFamily: 'var(--font-sans)', fontSize: '14px', fontWeight: 600 }}>
      <Icon name="checkCircle" size={18} color="var(--accent)" /> {msg}
    </div>
  );
}

function App() {
  const [cart, setCart] = React.useState(2);
  const [toast, setToast] = React.useState('');
  const timer = React.useRef(null);

  const notify = (m) => {
    setToast(m);
    clearTimeout(timer.current);
    timer.current = setTimeout(() => setToast(''), 2400);
  };
  const addToCart = (p) => { setCart((c) => c + 1); notify(`Ajouté au panier — ${p.title.slice(0, 38)}…`); };
  const onSelect = (sel) => notify(`${sel.marque} · ${sel.modele} · ${sel.gen} — pièces compatibles filtrées`);

  return (
    <React.Fragment>
      <window.MRBHeader cartCount={cart} />
      <main>
        <window.MRBHero onSelect={onSelect} />
        <window.MRBTrustStrip />
        <window.MRBBrandGrid onPick={(b) => notify(`Marque sélectionnée : ${b}`)} />
        <window.MRBCategoryGrid />
        <window.MRBProductRail
          eyebrow="Les plus vendus" title="Top ventes MRB Auto"
          description="Les pièces que nos clients choisissent les yeux fermés."
          link="Voir les best-sellers" items={window.MRB_DATA.bestSellers}
          bg="var(--surface-alt)" onAdd={addToCart} />
        <window.MRBWhyMRB />
        <window.MRBProductRail
          eyebrow="Fraîchement arrivés" title="Les nouveautés"
          description="De nouvelles références chaque mois, sur vos modèles préférés."
          link="Toutes les nouveautés" items={window.MRB_DATA.newArrivals}
          onAdd={addToCart} />
        <window.MRBTestimonials />
        <window.MRBNewsletter />
      </main>
      <window.MRBFooter />
      <FloatingWhatsApp />
      <Toast msg={toast} />
    </React.Fragment>
  );
}

// Wait until the design-system bundle has populated the namespace before mounting,
// so inlined/standalone builds don't render before components are registered.
(function mount() {
  const ns = window.MRBAutoDesignSystem_73c751;
  if (!ns || typeof ns.Icon !== 'function' || typeof ns.VehicleSelector !== 'function') {
    return setTimeout(mount, 30);
  }
  const el = document.getElementById('page-root');
  if (!el || el.__mounted) return;
  el.__mounted = true;
  ReactDOM.createRoot(el).render(<App />);
})();
