// ════════════════════════════════════════════════════════════════════════════
// LeadCustom — Live order notifications (social proof popup)
// ════════════════════════════════════════════════════════════════════════════
// Affiche en bas à gauche un toast "X vient de commander" toutes les ~25s.
// ════════════════════════════════════════════════════════════════════════════

function OrderNotifications() {
  const orders = React.useMemo(() => [
    { name: 'Julien M.', city: 'Lyon', offer: 'LeadFlow Artisan', time: 'il y a 3 min' },
    { name: 'Sophie R.', city: 'Bordeaux', offer: 'DealFlow Immo', time: 'il y a 7 min' },
    { name: 'Antoine L.', city: 'Paris', offer: 'AutoGrowth System', time: 'il y a 12 min' },
    { name: 'Karim H.', city: 'Marseille', offer: 'LeadFlow Artisan', time: 'il y a 18 min' },
    { name: 'Léa D.', city: 'Nantes', offer: 'AutoGrowth System', time: 'il y a 24 min' },
    { name: 'Mehdi A.', city: 'Toulouse', offer: 'DealFlow Immo', time: 'il y a 31 min' },
    { name: 'Thomas V.', city: 'Montpellier', offer: 'LeadFlow Artisan', time: 'il y a 42 min' },
    { name: 'Camille P.', city: 'Nice', offer: 'DealFlow Immo', time: 'il y a 51 min' },
    { name: 'Hugo B.', city: 'Strasbourg', offer: 'AutoGrowth System', time: 'il y a 1 h' },
    { name: 'Émilie F.', city: 'Lille', offer: 'LeadFlow Artisan', time: 'il y a 1 h' },
    { name: 'Nicolas D.', city: 'Rennes', offer: 'DealFlow Immo', time: 'il y a 2 h' },
    { name: 'Aurélie M.', city: 'Grenoble', offer: 'AutoGrowth System', time: 'il y a 2 h' },
  ], []);

  const [idx, setIdx] = React.useState(0);
  const [visible, setVisible] = React.useState(false);
  const [dismissed, setDismissed] = React.useState(false);

  React.useEffect(() => {
    if (dismissed) return;
    // First popup after 8s
    const firstTimer = setTimeout(() => setVisible(true), 8000);
    return () => clearTimeout(firstTimer);
  }, [dismissed]);

  React.useEffect(() => {
    if (dismissed) return;
    if (!visible) {
      // hidden -> show next after 18s
      const t = setTimeout(() => {
        setIdx(i => (i + 1) % orders.length);
        setVisible(true);
      }, 18000);
      return () => clearTimeout(t);
    } else {
      // visible -> hide after 7s
      const t = setTimeout(() => setVisible(false), 7000);
      return () => clearTimeout(t);
    }
  }, [visible, dismissed, orders.length]);

  if (dismissed) return null;
  const o = orders[idx];

  return (
    <div className={`order-notif ${visible ? 'order-notif--in' : ''}`}>
      <div className="order-notif-avatar">
        {o.name.split(' ').map(s => s[0]).join('')}
      </div>
      <div className="order-notif-body">
        <div className="order-notif-title">
          <strong>{o.name}</strong> à {o.city} vient de commander
        </div>
        <div className="order-notif-offer">
          <span className="order-notif-dot"></span>
          {o.offer} · <span className="order-notif-time">{o.time}</span>
        </div>
      </div>
      <button className="order-notif-close" onClick={() => setDismissed(true)} aria-label="Fermer">×</button>
    </div>
  );
}

window.OrderNotifications = OrderNotifications;