// Architecture — animated constellation of channels → router → agents.
// Pure SVG with SMIL <animateMotion> on traveling dots. No JS animation.

const CHANNELS = ['WhatsApp', 'Telegram', 'Email', 'Slack', 'SMS', 'LinkedIn'];
const AGENTS_ARCH_NAMES = ['Sofia', 'Léo', 'Anaïs', 'Hugo', 'Iris', 'Théo'];

const Architecture = () => {
  const spotlightRef = useSpotlight();

  // Layout
  const W = 1200, H = 620;
  const colX_L = 180, colX_R = W - 180;
  const routerX = W / 2, routerY = H / 2;
  const slotY = (i, n) => 80 + i * ((H - 160) / (n - 1));
  const AGENTS_ARCH = AGENTS_ARCH_NAMES.map(name => ({
    name,
    color: (window.AGENT_PROFILE && window.AGENT_PROFILE[name] && window.AGENT_PROFILE[name].color) || '#888',
    avatar: (window.AGENT_AVATAR_URL && window.AGENT_AVATAR_URL(name)) || '',
  }));

  // Build paths channel → router → agent
  const pathL = (y) => `M ${colX_L} ${y} C ${colX_L + 220} ${y}, ${routerX - 220} ${routerY}, ${routerX - 24} ${routerY}`;
  const pathR = (y) => `M ${routerX + 24} ${routerY} C ${routerX + 220} ${routerY}, ${colX_R - 220} ${y}, ${colX_R} ${y}`;

  return (
    <section ref={spotlightRef} className="arch spotlight grain grain--dark" data-screen-label="03 Architecture">

      <div className="arch__head">
        <span className="b-marker b-marker--inv b-marker--amber">
          <span className="b-marker__br">[</span> 02 / Architecture <span className="b-marker__br">]</span>
        </span>
        <h2 className="arch__title">
          Un <em>cerveau</em>. Vos canaux. Vos agents.
        </h2>
        <p className="arch__sub">
          Un seul agent ou une équipe entière : l'architecture reste la même. Chaque message entrant est analysé en 200 ms, puis routé vers l'agent le plus compétent — ou vers un humain si nécessaire. Aucun message perdu, aucun doublon.
        </p>
      </div>

      <div className="arch__stage">
        <svg viewBox={`0 0 ${W} ${H}`} className="arch__svg" preserveAspectRatio="xMidYMid meet" aria-hidden="true">

          <defs>
            <clipPath id="arch-clip-circle" clipPathUnits="objectBoundingBox">
              <circle cx="0.5" cy="0.5" r="0.5" />
            </clipPath>
          </defs>

          {/* connection paths */}
          <g className="arch__lines">
            {CHANNELS.map((_, i) => {
              const y = slotY(i, CHANNELS.length);
              return <path key={'l'+i} id={`pL${i}`} d={pathL(y)} fill="none" stroke="rgba(245,158,11,0.18)" strokeWidth="1.2" />;
            })}
            {AGENTS_ARCH.map((_, i) => {
              const y = slotY(i, AGENTS_ARCH.length);
              return <path key={'r'+i} id={`pR${i}`} d={pathR(y)} fill="none" stroke="rgba(245,158,11,0.18)" strokeWidth="1.2" />;
            })}
          </g>

          {/* traveling dots */}
          <g className="arch__travelers">
            {CHANNELS.map((_, i) => (
              <circle key={'tl'+i} r="3.5" fill="#f59e0b" opacity="0.9">
                <animateMotion dur="3.6s" repeatCount="indefinite" begin={`${i * 0.35}s`}>
                  <mpath href={`#pL${i}`} />
                </animateMotion>
                <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="3.6s" begin={`${i * 0.35}s`} repeatCount="indefinite" />
              </circle>
            ))}
            {AGENTS_ARCH.map((_, i) => (
              <circle key={'tr'+i} r="3.5" fill="#f59e0b" opacity="0.9">
                <animateMotion dur="3.6s" repeatCount="indefinite" begin={`${1.6 + i * 0.35}s`}>
                  <mpath href={`#pR${i}`} />
                </animateMotion>
                <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="3.6s" begin={`${1.6 + i * 0.35}s`} repeatCount="indefinite" />
              </circle>
            ))}
          </g>

          {/* channel nodes (left column) */}
          {CHANNELS.map((c, i) => {
            const y = slotY(i, CHANNELS.length);
            return (
              <g key={'c'+i} transform={`translate(${colX_L}, ${y})`} className="arch__node arch__node--channel">
                <circle r="6" fill="#0f1117" stroke="rgba(245,240,232,0.4)" strokeWidth="1.2" />
                <circle r="2.5" fill="rgba(245,240,232,0.7)" />
                <text x="-22" y="5" textAnchor="end" className="arch__label">{c}</text>
              </g>
            );
          })}

          {/* router node (center) */}
          <g transform={`translate(${routerX}, ${routerY})`} className="arch__router">
            <circle r="68" fill="rgba(245,158,11,0.06)" stroke="rgba(245,158,11,0.25)" strokeWidth="1" />
            <circle r="42" fill="rgba(245,158,11,0.10)" stroke="rgba(245,158,11,0.35)" strokeWidth="1">
              <animate attributeName="r" values="42;46;42" dur="2.4s" repeatCount="indefinite" />
              <animate attributeName="opacity" values="1;0.6;1" dur="2.4s" repeatCount="indefinite" />
            </circle>
            <circle r="22" fill="#f59e0b" />
            <text textAnchor="middle" y="-86" className="arch__router-label">ROUTEUR</text>
            <text textAnchor="middle" y="106" className="arch__router-meta">~200 ms · 40+ compétences</text>
          </g>

          {/* agent nodes (right column) */}
          {AGENTS_ARCH.map((a, i) => {
            const y = slotY(i, AGENTS_ARCH.length);
            return (
              <g key={'a'+i} transform={`translate(${colX_R}, ${y})`} className="arch__node arch__node--agent">
                <circle r="22" fill={a.color} />
                <image href={a.avatar} x="-20" y="-20" width="40" height="40" clipPath="url(#arch-clip-circle)" preserveAspectRatio="xMidYMid slice" />
                <text x="32" y="5" className="arch__label arch__label--agent">{a.name}</text>
              </g>
            );
          })}

          {/* column headers */}
          <text x={colX_L} y="42" textAnchor="end" className="arch__col-head">[ Canaux ]</text>
          <text x={routerX} y="42" textAnchor="middle" className="arch__col-head">[ Cerveau ]</text>
          <text x={colX_R} y="42" textAnchor="start" className="arch__col-head">[ Agents ]</text>

        </svg>
      </div>

      <div className="arch__stats">
        <span className="arch__stat-line">
          <b>200<i>ms</i></b> de routage
        </span>
        <span className="arch__stat-sep">/</span>
        <span className="arch__stat-line">
          <b>40<i>+</i></b> compétences
        </span>
        <span className="arch__stat-sep">/</span>
        <span className="arch__stat-line">
          <b>8</b> canaux simultanés
        </span>
        <span className="arch__stat-sep">/</span>
        <span className="arch__stat-line">
          <b>0</b> donnée hors UE (RGPD)
        </span>
      </div>

    </section>
  );
};

window.Architecture = Architecture;