// Agent Team — 6 named digital employees with friendly illustrated portraits
// (via DiceBear), colored ring, live indicator, meta + quote.

// Single source of truth for every agent's identity. Exposed on window so
// Hero, LiveDemo, Architecture and any future surface can stay in sync.
const AGENT_PROFILE = {
  'Sofia':  { color: '#f59e0b', gender: 'f', seed: 'sofia-soleil-marseille' },
  'Léo':    { color: '#c4622a', gender: 'm', seed: 'leo-vieuxport-1987' },
  'Anaïs':  { color: '#d97706', gender: 'f', seed: 'anais-aix-clinique' },
  'Hugo':   { color: '#3b6cf5', gender: 'm', seed: 'hugo-azur-debug' },
  'Iris':   { color: '#2d8a6e', gender: 'f', seed: 'iris-cassis-jade' },
  'Théo':   { color: '#8b8ea0', gender: 'm', seed: 'theo-ardoise-lundi' },
};

window.AGENT_PROFILE = AGENT_PROFILE;
// Polished editorial illustrations (Lorelei on DiceBear).
// Gender is enforced via hair + beard params so portraits match the name.
window.AGENT_AVATAR_URL = (name) => {
  const p = AGENT_PROFILE[name];
  if (!p) return '';
  const bg = p.color.replace('#', '');
  const base = `https://api.dicebear.com/9.x/lorelei/svg?seed=${encodeURIComponent(p.seed)}&backgroundColor=${bg}&radius=50`;
  if (p.gender === 'm') {
    // Short hair variants + beards. Earrings off so faces read clearly masculine.
    return base
      + '&hair=variant01,variant02,variant03,variant04,variant05,variant07,variant08,variant11'
      + '&beard=variant01,variant02'
      + '&beardProbability=85'
      + '&earringsProbability=0';
  }
  // Long / styled hair for the feminine agents.
  return base
    + '&hair=variant13,variant15,variant17,variant19,variant23,variant25,variant27,variant31,variant35,variant40'
    + '&beardProbability=0';
};

const AGENTS = [
  {
    name: 'Sofia',
    role: "Accueil & réservation automatique",
    canaux: 'WhatsApp · Webchat · SMS',
    langues: 'FR · EN · IT',
    specialite: 'Gestion de calendrier',
    quote: "Je n’oublie aucune demande. Même celles qui arrivent à 23h47 un dimanche.",
  },
  {
    name: 'Léo',
    role: "Vente B2B & qualification de leads",
    canaux: 'Email · LinkedIn · Site',
    langues: 'FR · EN',
    specialite: 'Devis automatique',
    quote: "Je qualifie, je propose, je relance. Mais je passe la main dès que ça mérite une voix humaine.",
  },
  {
    name: 'Anaïs',
    role: "Prise de RDV & suivi post-soin",
    canaux: 'WhatsApp · SMS · Webchat',
    langues: 'FR · EN',
    specialite: 'Suivi des protocoles',
    quote: "Je rappelle Mme Dupont 48h après son injection pour vérifier que tout va bien. Sans qu'elle ait à demander.",
  },
  {
    name: 'Hugo',
    role: "Support technique & N1",
    canaux: 'Slack · Email · Webchat',
    langues: 'FR · EN',
    specialite: 'Base de connaissances auto-enrichie',
    quote: "J’apprends de chaque ticket résolu. Le mois prochain, je connaîtrai votre produit mieux que vous.",
  },
  {
    name: 'Iris',
    role: "Prospection & génération de leads",
    canaux: 'Email · LinkedIn',
    langues: 'FR · EN',
    specialite: 'Séquences personnalisées',
    quote: "Pas de templates copiés-collés. J’écris un message par prospect, parce que les gens sentent quand c’est de la pub.",
  },
  {
    name: 'Théo',
    role: "Reporting & automatisation interne",
    canaux: 'Slack · Email',
    langues: 'FR · EN',
    specialite: 'Tableaux de bord automatisés',
    quote: "Chaque lundi à 9h, votre semaine est résumée. KPIs, alertes, actions à prendre — sans bruit.",
  },
];

const AgentTeam = () => {
  const spotlightRef = useSpotlight();
  return (
  <section ref={spotlightRef} className="team spotlight grain grain--dark" data-screen-label="04 Agent team">
    <div className="team__head">
      <div>
        <span className="b-marker b-marker--inv b-marker--amber">
          <span className="b-marker__br">[</span> 03 / L'équipe <span className="b-marker__br">]</span>
        </span>
        <h2 className="team__title">
          Rencontrez les agents qui <em>travaillent</em> chez nos clients.
        </h2>
      </div>
      <p className="team__intro">
        Chaque agent a un nom, un poste, des langues, des canaux et un caractère adapté à votre marque. On les configure ensemble, et ils sont opérationnels en trois semaines.
      </p>
    </div>

    <div className="team__grid">
      {AGENTS.map(a => {
        const p = AGENT_PROFILE[a.name];
        return (
        <article key={a.name} className="agent-card" style={{ '--agent-color': p.color }}>
          <div className="agent-card__flood" aria-hidden="true"></div>

          <header className="agent-card__head">
            <div className="agent-card__photo">
              <img src={window.AGENT_AVATAR_URL(a.name)} alt={`Portrait de ${a.name}`} loading="lazy" />
            </div>
            <div className="agent-card__info">
              <span className="agent-card__live"><span></span>en ligne</span>
              <h3 className="agent-card__name">{a.name}</h3>
              <p className="agent-card__role">{a.role}</p>
            </div>
          </header>

          <div className="agent-card__meta">
            <div className="agent-card__meta-row">
              <span className="agent-card__meta-lbl">Canaux</span>
              <span className="agent-card__meta-val">{a.canaux}</span>
            </div>
            <div className="agent-card__meta-row">
              <span className="agent-card__meta-lbl">Langues</span>
              <span className="agent-card__chips">
                {a.langues.split('·').map(l => (
                  <span key={l} className="agent-card__chip">{l.trim()}</span>
                ))}
              </span>
            </div>
            <div className="agent-card__meta-row">
              <span className="agent-card__meta-lbl">Métier</span>
              <span className="agent-card__meta-val">{a.specialite}</span>
            </div>
          </div>

          <p className="agent-card__quote">{a.quote}</p>
        </article>
        );
      })}
    </div>
  </section>
  );
};

window.AgentTeam = AgentTeam;