import React from 'react';
import './DepartEnCoursAFL.css';

export default function DepartEnCoursAFL() {
  return (
    <div className="aff-dep-afl__container">
      {/* RUBAN SUPÉRIEUR RAYÉ BLANC ET ROUGE */}
      <div className="aff-dep-afl__hazard-stripes" />

      {/* CONTENU PRINCIPAL */}
      <div className="aff-dep-afl__content">
        {/* Panneau d'interdiction blanc à gauche */}
        <div className="aff-dep-afl__icon-col">
          <svg
            viewBox="0 0 240 240"
            className="aff-dep-afl__no-entry-svg"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            {/* Cercle blanc extérieur */}
            <circle cx="120" cy="120" r="105" stroke="#ffffff" strokeWidth="18" />
            
            {/* Silhouette du piéton marchant avec valise */}
            <g fill="#ffffff">
              {/* Tête */}
              <circle cx="126" cy="62" r="15" />
              {/* Corps marchant */}
              <path d="M116 84 C116 84, 134 84, 138 98 L152 144 L140 148 L128 110 L118 132 L112 186 L98 184 L106 126 L96 112 Z" />
              {/* Jambe droite enjambant */}
              <path d="M122 134 L138 180 C138 180, 146 186, 140 190 C134 194, 126 188, 126 188 L114 148 Z" />
              {/* Bras gauche */}
              <path d="M128 88 L146 114 L138 120 L122 96 Z" />
              {/* Bras droit tenant la valise */}
              <path d="M116 86 L98 116 L88 110" stroke="#ffffff" strokeWidth="8" strokeLinecap="round" strokeLinejoin="round" fill="none" />
              {/* Valise inclinée */}
              <g transform="rotate(-15, 80, 140)">
                <rect x="58" y="122" width="38" height="52" rx="7" fill="#ffffff" />
                <path d="M70 122 V112 H84 V122" stroke="#ffffff" strokeWidth="6" fill="none" />
              </g>
            </g>

            {/* Barre diagonale blanche d'interdiction */}
            <line x1="46" y1="46" x2="194" y2="194" stroke="#ffffff" strokeWidth="18" strokeLinecap="round" />
          </svg>
        </div>

        {/* Textes d'alerte et de consigne à droite */}
        <div className="aff-dep-afl__text-col">
          <div className="aff-dep-afl__heading-group">
            <div className="aff-dep-afl__title-main">DÉPARTS</div>
            <div className="aff-dep-afl__title-sub">EN COURS</div>
          </div>

          <div className="aff-dep-afl__instructions">
            <p className="aff-dep-afl__instruction-line">Pour votre sécurité</p>
            <p className="aff-dep-afl__instruction-line">merci de vous éloigner</p>
            <p className="aff-dep-afl__instruction-line">de la bordure du quai.</p>
          </div>
        </div>
      </div>
    </div>
  );
}