// Overheard — replaces the Manifesto tape.
// Two stacked marquees of REAL-feeling conversation snippets, moving opposite ways.
// This is more emotional than buzzwords.

const TOP_ROW = [
  { lang: 'FR', text: "Bonjour, je voudrais réserver un cours samedi matin 🏄" },
  { lang: 'FR', text: "Il reste deux places à 10h, je vous les bloque ?" },
  { lang: 'EN', text: "Hi! Can I book a consultation for next Tuesday?" },
  { lang: 'FR', text: "Le ménage du 12 rue Paradis est terminé, photos envoyées ✓" },
  { lang: 'FR', text: "On cherche un prestataire pour 200 logements à Marseille." },
  { lang: 'FR', text: "Votre devis est prêt, je vous l'envoie par email ?" },
];
const BOTTOM_ROW = [
  { lang: 'FR', text: "Mon agent a qualifié 34 leads cette semaine." },
  { lang: 'FR', text: "Vous avez répondu en 3 secondes, c'est dingue." },
  { lang: 'EN', text: "Booked from London. Never spoke to a human, all good." },
  { lang: 'FR', text: "Le taux de no-show a été divisé par trois depuis l'agent 📈" },
  { lang: 'FR', text: "Le rappel post-soin a été envoyé automatiquement, parfait." },
  { lang: 'FR', text: "L'agenda de la clinique s'est rempli tout seul ce mois-ci." },
];

const Bubble = ({ lang, text, side }) => (
  <span className={`overheard__bubble overheard__bubble--${side}`}>
    <span className="overheard__lang">[{lang}]</span>
    <span className="overheard__text">{text}</span>
  </span>
);

const Overheard = () => {
  const top = [...TOP_ROW, ...TOP_ROW];
  const bot = [...BOTTOM_ROW, ...BOTTOM_ROW];
  return (
    <section className="overheard grain grain--dark" data-screen-label="02 Overheard">
      <div className="overheard__head">
        <span className="b-marker b-marker--inv b-marker--amber">
          <span className="b-marker__br">[</span> Entendus chez nos clients · ces dernières 48h <span className="b-marker__br">]</span>
        </span>
      </div>

      <div className="overheard__tracks">
        <div className="overheard__tape overheard__tape--ltr">
          <div className="overheard__track">
            {top.map((b, i) => <Bubble key={'t'+i} side="client" {...b} />)}
          </div>
        </div>
        <div className="overheard__tape overheard__tape--rtl">
          <div className="overheard__track">
            {bot.map((b, i) => <Bubble key={'b'+i} side="agent" {...b} />)}
          </div>
        </div>
      </div>
    </section>
  );
};

window.Overheard = Overheard;