// FOOTPASS Messenger v2 · splash de démarrage
// Le monogramme F+P est construit en deux pièces qui s'emboîtent à 45°
// (cf. « Ratios & tracés de construction », identité graphique p.03) :
// la pièce F arrive du haut-droit, la pièce P du bas-gauche, le long de la diagonale.
// Couleurs brand : fond Modern Black #0F0F0F, contenu Half White #EAEAEA.

const FP_SPLASH_T = 'translate(124.348,76.800) scale(0.477867) translate(0,750) scale(0.1,-0.1)';

const FP_SPLASH_PATH_A = "M625 6710 l600 -600 1502 0 1503 0 0 -1200 0 -1200 -1200 0 -1200 0 0 -1203 0 -1202 600 -600 600 -600 0 1202 0 1202 688 4 c602 3 696 5 757 20 240 58 417 152 579 308 176 168 281 347 344 584 l27 100 3 1293 3 1292 -601 0 -600 0 0 600 0 600 -2102 0 -2103 0 600 -600z";
const FP_SPLASH_PATH_B = "M1059 5499 c-250 -36 -472 -146 -656 -322 -173 -166 -279 -347 -341 -582 l-26 -100 -3 -695 -4 -695 601 -600 600 -600 0 1203 0 1202 1200 0 1200 0 0 600 0 600 -1257 -1 c-692 -1 -1283 -5 -1314 -10z";
const FP_SPLASH_PATH_R1 = "M5012 696 c-82 -27 -141 -76 -180 -151 -23 -43 -27 -63 -27 -135 0 -100 24 -159 88 -217 66 -59 119 -78 222 -78 103 0 156 19 222 78 64 58 88 117 88 217 0 73 -4 92 -27 136 -31 60 -84 109 -147 137 -58 26 -179 32 -239 13z m197 -52 c70 -20 132 -81 152 -149 52 -181 -61 -335 -246 -335 -198 0 -314 184 -232 364 52 113 185 162 326 120z";
const FP_SPLASH_PATH_R2 = "M5000 415 l0 -175 30 0 30 0 0 76 0 77 42 -7 c60 -10 68 -20 68 -87 0 -59 0 -59 30 -59 l30 0 0 70 c0 57 -4 74 -20 90 -11 11 -16 20 -11 20 32 0 53 76 35 125 -12 30 -60 45 -149 45 l-85 0 0 -175z m168 113 c19 -19 15 -66 -7 -78 -11 -5 -38 -10 -60 -10 l-41 0 0 50 0 50 48 0 c26 0 53 -5 60 -12z";

function FPSplash({ onDone }) {
  const [leaving, setLeaving] = React.useState(false);
  // Audit onboarding P2-1 · plein rituel au premier lancement, ≤ 1,2 s ensuite
  const seen = (() => { try { return localStorage.getItem('fp_splash_seen') === '1'; } catch (e) { return false; } })();
  React.useEffect(() => {
    try { localStorage.setItem('fp_splash_seen', '1'); } catch (e) { /* ignore */ }
    const t1 = setTimeout(() => setLeaving(true), seen ? 650 : 3000);
    const t2 = setTimeout(() => { if (onDone) onDone(); }, seen ? 1150 : 3550);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);
  return (
    <div className={`fp-splash ${leaving ? 'leaving' : ''}`} data-screen-label="Splash · démarrage">
      <FPStatusBar light />
      <div className="fp-splash-mark">
        <svg viewBox="0 0 512 512" fill="#EAEAEA" aria-label="FOOTPASS">
          <defs>
            <linearGradient id="fpSpGrad" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0" stopColor="#FFFFFF" stopOpacity="0"></stop>
              <stop offset="0.5" stopColor="#FFFFFF" stopOpacity="0.4"></stop>
              <stop offset="1" stopColor="#FFFFFF" stopOpacity="0"></stop>
            </linearGradient>
            <clipPath id="fpSpClip">
              <path transform={FP_SPLASH_T} d={FP_SPLASH_PATH_A}></path>
              <path transform={FP_SPLASH_T} d={FP_SPLASH_PATH_B}></path>
            </clipPath>
          </defs>
          <g className="fp-sp-a"><path transform={FP_SPLASH_T} d={FP_SPLASH_PATH_A}></path></g>
          <g className="fp-sp-b"><path transform={FP_SPLASH_T} d={FP_SPLASH_PATH_B}></path></g>
          <g className="fp-sp-r">
            <path transform={FP_SPLASH_T} d={FP_SPLASH_PATH_R1}></path>
            <path transform={FP_SPLASH_T} d={FP_SPLASH_PATH_R2}></path>
          </g>
          <g clipPath="url(#fpSpClip)">
            <g transform="rotate(45 256 256)">
              <rect className="fp-sp-shine" x="206" y="-160" width="100" height="832" fill="url(#fpSpGrad)"></rect>
            </g>
          </g>
        </svg>
      </div>
      <div className="fp-splash-word">FOOTPASS<sup>®</sup></div>
      <div className="fp-splash-bar"><i></i></div>
    </div>
  );
}

Object.assign(window, { FPSplash });