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

export default function GareVideoprotection() {
  return (
    <div className="aff-videoprot__container">
      <div className="aff-videoprot__wrapper">
        {/* Caméra de surveillance stylisée orange */}
        <div className="aff-videoprot__icon-col">
          <svg
            viewBox="0 0 320 240"
            className="aff-videoprot__camera-svg"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            {/* Support mural */}
            <rect x="20" y="105" width="22" height="75" rx="5" fill="#f25b2a" />
            <path
              d="M38 132 H80 L95 105 H125"
              stroke="#f25b2a"
              strokeWidth="20"
              strokeLinecap="round"
              strokeLinejoin="round"
            />

            {/* Corps de la caméra orienté vers le bas à droite */}
            <g transform="rotate(18, 140, 110)">
              {/* Corps principal */}
              <rect x="35" y="55" width="165" height="70" rx="14" fill="#f25b2a" />
              {/* Parasoleil / Visière supérieure */}
              <path d="M30 48 L210 48 L195 58 L30 58 Z" fill="#f25b2a" />
              {/* Cône avant / Objectif */}
              <polygon points="198,62 250,38 250,142 198,118" fill="#f25b2a" />
              {/* Fentes d'aération & détails noirs */}
              <circle cx="65" cy="88" r="10" fill="#141416" />
              <rect x="95" y="78" width="10" height="26" rx="4" fill="#141416" />
              <rect x="120" y="78" width="10" height="26" rx="4" fill="#141416" />
              <rect x="145" y="78" width="10" height="26" rx="4" fill="#141416" />
              {/* Bague optique */}
              <rect x="250" y="44" width="14" height="92" rx="3" fill="#f25b2a" />
            </g>
          </svg>
        </div>

        {/* Textes d'information et réglementaires */}
        <div className="aff-videoprot__text-col">
          <div className="aff-videoprot__title-vigi">VIGI360</div>
          
          <h1 className="aff-videoprot__main-heading">
            POUR VOTRE SÉCURITÉ, CET ESPACE<br />
            EST ÉQUIPÉ DE VIDÉOPROTECTION.
          </h1>

          <div className="aff-videoprot__subtext-group">
            <p className="aff-videoprot__legal-line">
              En application des dispositions des textes législatifs et<br />
              règlementaires en vigueur.
            </p>
            <p className="aff-videoprot__access-line">
              Pour l'exercice du droit d'accès au enregistrements,<br />
              s'adresser à un agent d'accueil de la gare.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}