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

export default function AttentifsEnsemble() {
  return (
    <div className="aff-attentifs__container">
      {/* COLONNE GAUCHE : ANTHRACITE FONCÉ (ATTENTIFS ENSEMBLE + VIGIPIRATE) */}
      <div className="aff-attentifs__left-col">
        <div className="aff-attentifs__title-group">
          <div className="aff-attentifs__title-word">ATTENTIFS</div>
          <div className="aff-attentifs__title-word">ENSEMBLE</div>
        </div>

        {/* Insigne Vigipirate Officiel */}
        <div className="aff-attentifs__vigipirate-wrap">
          <svg
            viewBox="0 0 280 240"
            className="aff-attentifs__vigipirate-svg"
            xmlns="http://www.w3.org/2000/svg"
          >
            {/* Triangle noir extérieur */}
            <polygon points="140,12 268,228 12,228" fill="#1e1e1e" stroke="#1e1e1e" strokeWidth="8" strokeLinejoin="round" />
            {/* Triangle rouge intérieur */}
            <polygon points="140,42 238,206 42,206" fill="#e2001a" />
            {/* Bandeau blanc en bas */}
            <polygon points="56,182 224,182 238,206 42,206" fill="#ffffff" />
            {/* Texte VIGIPIRATE */}
            <text
              x="140"
              y="201"
              fill="#1e1e1e"
              fontSize="23"
              fontWeight="900"
              fontFamily="Achemine, Arial, sans-serif"
              textAnchor="middle"
              letterSpacing="2.5"
            >
              VIGIPIRATE
            </text>
          </svg>
        </div>
      </div>

      {/* COLONNE DROITE : GRIS MOYEN (CONSIGNES + BULLE ALERTE 3117) */}
      <div className="aff-attentifs__right-col">
        {/* Partie gauche des consignes */}
        <div className="aff-attentifs__info-section">
          <p className="aff-attentifs__info-desc">
            Si vous êtes témoin<br />
            d'une situation<br />
            qui présente un risque<br />
            pour votre sécurité<br />
            ou celle des autres<br />
            voyageurs,
          </p>

          <div className="aff-attentifs__call-action">
            <span className="aff-attentifs__call-text">APPELER* LE 3117</span>
            <span className="aff-attentifs__call-hours">24h/24 · 7j/7</span>
          </div>

          <div className="aff-attentifs__call-footnote">
            * Appel non surtaxé et enregistré
          </div>
        </div>

        {/* Partie droite avec la bulle Alerte SNCF 3117 et le smartphone */}
        <div className="aff-attentifs__bubble-section">
          <div className="aff-attentifs__bubble-wrap">
            {/* Bulle blanche à bordure rouge */}
            <div className="aff-attentifs__bubble-card">
              <div className="aff-attentifs__bubble-title">ALERTE SNCF</div>
              <div className="aff-attentifs__bubble-rows">
                <div className="aff-attentifs__bubble-line">
                  <span className="aff-attentifs__bubble-label">TÉL.</span>
                  <span className="aff-attentifs__bubble-number">3117*</span>
                </div>
                <div className="aff-attentifs__bubble-line">
                  <span className="aff-attentifs__bubble-label">SMS</span>
                  <span className="aff-attentifs__bubble-number">31177**</span>
                </div>
              </div>

              {/* Pointe de la bulle */}
              <div className="aff-attentifs__bubble-tail" />
            </div>

            {/* Smartphone Rouge d'alerte */}
            <div className="aff-attentifs__phone-badge">
              <svg viewBox="0 0 68 104" className="aff-attentifs__phone-svg" fill="none" xmlns="http://www.w3.org/2000/svg">
                {/* Corps de téléphone rouge arrondi */}
                <rect x="4" y="4" width="60" height="96" rx="14" fill="#e2001a" stroke="#ffffff" strokeWidth="4.5" />
                {/* Écran blanc */}
                <rect x="12" y="14" width="44" height="50" rx="6" fill="#ffffff" />
                {/* Point d'exclamation rouge d'urgence */}
                <rect x="30.5" y="24" width="7" height="20" rx="3.5" fill="#e2001a" />
                <circle cx="34" cy="53" r="4" fill="#e2001a" />
                {/* Touches du pavé numérique */}
                <circle cx="20" cy="74" r="3" fill="#ffffff" />
                <circle cx="34" cy="74" r="3" fill="#ffffff" />
                <circle cx="48" cy="74" r="3" fill="#ffffff" />
                <circle cx="20" cy="85" r="3" fill="#ffffff" />
                <circle cx="34" cy="85" r="3" fill="#ffffff" />
                <circle cx="48" cy="85" r="3" fill="#ffffff" />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}