// === Escena IN02 — "El suelo · cloud europeo" ===
// Duración real del mp3: 33.5s. SlideCanvas variant="light".
// El suelo lo pone el mayor cloud de Europa (nodo datacenter dentro del anillo de 12
// estrellas UE + píldora OVHcloud). Soberano y bajo ley europea. Y no lo decimos solo
// nosotros: un sello independiente (Open Trusted Cloud) lo certifica → 3 checks
// (seguridad · soberanía · portabilidad). Lo auditó un tercero. Salida: "TUS DATOS →".
// LOCUCIÓN (audio/escena-02.mp3, 33.5s):
// "El suelo lo pone el mayor proveedor de cloud de Europa. Servidores europeos, bajo ley
//  europea. No están en manos de una empresa de fuera. Tus datos no salen del continente.
//  Y esto no lo decimos solo nosotros. Un sello independiente lo certifica. Revisa la
//  seguridad. Revisa que tus datos son soberanos. Y que siempre son tuyos, y te los puedes
//  llevar cuando quieras. No te pedimos que nos creas. Lo auditó alguien de fuera. Sobre ese
//  suelo, montamos lo primero: tus datos."
function EscenaIN02({ t }){
  const T = {
    nodo:     1.50,  // "mayor proveedor de cloud de Europa" → nodo datacenter + OVHcloud + anillo 12 estrellas UE
    leyUE:    5.05,  // "bajo ley europea"                   → badge escudo "Ley UE"
    fuera:    7.65,  // "manos de una empresa de fuera"      → píldora "proveedor de fuera" con ✗ (rojo, breve)
    dentro:  10.19,  // "no salen del continente"            → anillo UE hace glow; punto "tus datos" queda dentro
    sello:   14.70,  // "sello independiente lo certifica"   → entra el sello Open Trusted Cloud (protagonista)
    check1:  17.16,  // "Revisa la seguridad"                → check 1 Seguridad
    check2:  20.11,  // "son soberanos"                      → check 2 Soberanía · RGPD
    check3:  23.00,  // "te los puedes llevar"               → check 3 Portabilidad
    auditado:27.64,  // "Lo auditó alguien de fuera"         → subtítulo bajo el sello
    salida:  30.86,  // "montamos lo primero"                → píldora salida "TUS DATOS →"
  };

  // ---- Geometría (1920×1080) ----
  const LCX = 560, LCY = 460;        // centro del cluster izquierdo (nodo + anillo)
  const RING_R = 218;                // radio de los centros de estrella
  const NODE_W = 178, NODE_H = 156;  // tarjeta datacenter

  const SCX = 1360, SCY = 428;       // centro del sello (cluster derecho)
  const SEAL_R = 128;

  // ---- Estrellas UE (bandera): 12 estrellas doradas en círculo ----
  const starPath = (R, r) => {
    let d = '';
    for (let k=0;k<10;k++){
      const ang = (-90 + k*36) * Math.PI/180;
      const rad = k%2===0 ? R : r;
      d += (k===0?'M':'L') + (Math.cos(ang)*rad).toFixed(1) + ' ' + (Math.sin(ang)*rad).toFixed(1) + ' ';
    }
    return d + 'Z';
  };
  const STARS = Array.from({length:12}, (_,i)=>{
    const a = (-90 + i*30) * Math.PI/180;
    return { x: LCX + Math.cos(a)*RING_R, y: LCY + Math.sin(a)*RING_R, i };
  });

  // ---- Nodo datacenter (protagonista del primer beat, overshoot) ----
  const nodeP = clamp((t-T.nodo)/0.6, 0, 1), nodeE = Easing.easeOutBack(nodeP);
  const ovhP  = clamp((t-(T.nodo+0.5))/0.4, 0, 1), ovhE = Easing.easeOutBack(ovhP);
  const nodeElev = (1 - clamp((t-(T.nodo+1.4))/0.6, 0, 1)); // alta al entrar, baja luego

  // ---- Ley UE ----
  const leyP = clamp((t-T.leyUE)/0.45, 0, 1), leyE = Easing.easeOutBack(leyP);

  // ---- Proveedor de fuera (apunte breve, rojo dosificado → se atenúa) ----
  const fueraP = clamp((t-T.fuera)/0.4, 0, 1), fueraE = Easing.easeOutCubic(fueraP);
  const fueraX = Easing.easeOutBack(clamp((t-(T.fuera+0.2))/0.4, 0, 1));   // la ✗ se dibuja
  const fueraFade = clamp((t-(T.dentro))/0.6, 0, 1);                        // descartado tras "dentro"
  const fueraOp = fueraP * lerp(1, 0.4, fueraFade);
  const fueraSat = lerp(1, 0.5, fueraFade);

  // ---- Anillo glow + "tus datos" dentro ----
  const glowK = Easing.easeOutCubic(clamp((t-T.dentro)/0.7, 0, 1));
  const tdP = clamp((t-T.dentro)/0.85, 0, 1), tdE = Easing.easeInOutCubic(tdP);
  const tdY = lerp(960, LCY+56, tdE);
  const tdOp = clamp(tdP*2, 0, 1);

  // ---- Conector: el sello apunta al suelo (se dibuja) ----
  const conP = Easing.easeInOutCubic(clamp((t-(T.sello+0.15))/0.9, 0, 1));

  // ---- Sello Open Trusted Cloud (protagonista 2ª mitad, elevación alta) ----
  const selP = clamp((t-T.sello)/0.65, 0, 1), selE = Easing.easeOutBack(selP);
  const selDraw = Easing.easeInOutCubic(clamp((t-(T.sello+0.35))/0.6, 0, 1)); // el check del emblema
  const selPulse = Math.sin(clamp((t-(T.sello+0.6))/1.1, 0, 1) * Math.PI);    // UN pulse de remate

  // ---- Checks ----
  const CHECKS = [
    { start:T.check1, label:'Seguridad',                        sub:'cómo se protege' },
    { start:T.check2, label:'Soberanía · RGPD',                 sub:'tus datos son soberanos' },
    { start:T.check3, label:'Portabilidad — tus datos son tuyos', sub:'te los llevas cuando quieras' },
  ];

  // ---- Auditado (subtítulo bajo el sello) ----
  const audP = Easing.easeOutCubic(clamp((t-T.auditado)/0.6, 0, 1));

  // ---- Salida ----
  const salP = clamp((t-T.salida)/0.55, 0, 1), salE = Easing.easeOutBack(salP);

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="INFRAESTRUCTURA · EL SUELO" title={<span>El mayor <span className="grad-text">cloud de Europa</span></span>}/>

      {/* ===== Anillo glow (bandera UE brillando) + glow verde "a salvo" ===== */}
      {glowK > 0 && (
        <React.Fragment>
          <div style={{position:'absolute', left:LCX-(RING_R+70), top:LCY-(RING_R+70), width:(RING_R+70)*2, height:(RING_R+70)*2, borderRadius:'50%', background:'radial-gradient(circle, rgba(255,200,61,0.28) 40%, transparent 72%)', opacity:glowK, pointerEvents:'none'}}/>
          <div style={{position:'absolute', left:LCX-(RING_R-40), top:LCY-(RING_R-40), width:(RING_R-40)*2, height:(RING_R-40)*2, borderRadius:'50%', background:'radial-gradient(circle, rgba(16,185,129,0.14) 30%, transparent 70%)', opacity:glowK, pointerEvents:'none'}}/>
        </React.Fragment>
      )}

      {/* ===== SVG capa: conector sello→suelo + estrellas UE ===== */}
      <svg width="1920" height="1080" viewBox="0 0 1920 1080" style={{position:'absolute', inset:0, pointerEvents:'none'}}>
        {/* Conector: el sello certifica el suelo (dibujado) */}
        {conP > 0 && (
          <path d={`M ${LCX+96} ${LCY-40} C 900 ${LCY-70}, 1080 ${SCY}, ${SCX-SEAL_R-6} ${SCY}`}
            stroke="#0085FF" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeDasharray={`4 8`}
            opacity={0.34*conP} />
        )}
        {/* Estrellas UE en anillo */}
        {STARS.map(s => {
          const sp = clamp((t-(T.nodo+0.15+s.i*0.05))/0.4, 0, 1);
          const se = Easing.easeOutBack(sp);
          if (sp <= 0) return null;
          return (
            <g key={s.i} transform={`translate(${s.x} ${s.y}) scale(${lerp(0.2,1,se)}) rotate(${(1-se)*90})`}
               opacity={clamp(sp*1.3,0,1)}
               style={{filter: glowK>0 ? `drop-shadow(0 0 ${(6+glowK*8).toFixed(1)}px rgba(255,200,61,0.85))` : 'none'}}>
              <path d={starPath(16, 6.6)} fill={glowK>0 ? '#FFD86B' : '#FFC83D'}/>
            </g>
          );
        })}
      </svg>

      {/* ===== Nodo datacenter con OVHcloud (dentro del anillo) ===== */}
      {nodeP > 0 && (
        <div style={{position:'absolute', left:LCX-NODE_W/2, top:LCY-NODE_H/2, width:NODE_W, height:NODE_H,
          background:'#fff', border:'1px solid #E2E8F0', borderRadius:20,
          boxShadow:`0 ${lerp(14,26,nodeElev)}px ${lerp(34,60,nodeElev)}px rgba(15,23,42,${lerp(0.10,0.18,nodeElev)})`,
          display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'flex-start', gap:12, padding:'22px 0 0',
          opacity:clamp(nodeP*1.3,0,1), transform:`translateY(${(1-nodeE)*28}px) scale(${lerp(0.82,1,nodeE)})`}}>
          {/* icono rack/datacenter */}
          <svg width="52" height="52" viewBox="0 0 48 48" fill="none">
            <rect x="10" y="8"  width="28" height="9" rx="2.5" stroke="#0085FF" strokeWidth="2.6"/>
            <rect x="10" y="21" width="28" height="9" rx="2.5" stroke="#0085FF" strokeWidth="2.6"/>
            <rect x="10" y="34" width="28" height="9" rx="2.5" stroke="#0085FF" strokeWidth="2.6"/>
            <circle cx="15" cy="12.5" r="1.6" fill="#56E16A"/>
            <circle cx="15" cy="25.5" r="1.6" fill="#56E16A"/>
            <circle cx="15" cy="38.5" r="1.6" fill="#56E16A"/>
          </svg>
          {/* píldora OVHcloud (atrezzo, navy sobre blanco) */}
          {ovhP > 0 && (
            <div className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:6, padding:'6px 12px',
              background:'#fff', border:'1px solid #E2E8F0', borderRadius:100,
              fontSize:13, fontWeight:700, color:'#123F6D', letterSpacing:'0.02em',
              boxShadow:'0 4px 12px rgba(15,23,42,0.08)',
              opacity:clamp(ovhP*1.3,0,1), transform:`scale(${lerp(0.7,1,ovhE)})`}}>
              <span style={{width:7, height:7, borderRadius:100, background:'#123F6D'}}/>
              OVHcloud
            </div>
          )}
        </div>
      )}

      {/* "tus datos" — el punto que queda DENTRO del continente ===== */}
      {tdOp > 0 && (
        <div className="f-mono" style={{position:'absolute', left:LCX, top:tdY, zIndex:8, transform:'translate(-50%,-50%)',
          display:'inline-flex', alignItems:'center', gap:8, padding:'7px 14px',
          background:'#ECFDF5', border:'1.5px solid #A7F3D0', borderRadius:100,
          fontSize:13, fontWeight:700, color:'#059669', whiteSpace:'nowrap',
          boxShadow:`0 8px 22px rgba(16,185,129,${0.14+0.14*glowK})`, opacity:tdOp}}>
          <span style={{width:8, height:8, borderRadius:100, background:'#10B981'}}/>
          tus datos
        </div>
      )}

      {/* ===== Ley UE (escudo, bajo el anillo) ===== */}
      {leyP > 0 && (
        <div style={{position:'absolute', left:LCX, top:LCY+RING_R+58, transform:`translate(-50%,0) translateY(${(1-leyE)*14}px) scale(${lerp(0.8,1,leyE)})`,
          display:'inline-flex', alignItems:'center', gap:10, padding:'9px 18px 9px 14px',
          background:'#fff', border:'1px solid rgba(16,185,129,0.35)', borderRadius:100,
          boxShadow:'0 10px 26px rgba(16,185,129,0.14)', opacity:clamp(leyP*1.3,0,1), whiteSpace:'nowrap'}}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M12 3 L19 6 V11 C19 16 15.8 19.2 12 21 C8.2 19.2 5 16 5 11 V6 Z" fill="rgba(16,185,129,0.12)" stroke="#10B981" strokeWidth="1.8" strokeLinejoin="round"/>
            <path d="M8.6 12 L11 14.3 L15.4 9.4" stroke="#10B981" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          <span className="f-plex" style={{fontSize:16, fontWeight:700, color:'#0F172A'}}>Ley europea</span>
        </div>
      )}

      {/* ===== Proveedor de fuera — apunte descartado (rojo dosificado) ===== */}
      {fueraP > 0 && (
        <div style={{position:'absolute', left:LCX, top:LCY+RING_R+118, transform:`translate(-50%,0) translateY(${(1-fueraE)*10}px)`,
          display:'inline-flex', alignItems:'center', gap:9, padding:'7px 15px',
          background:'#F8FAFC', border:'1px dashed #CBD5E1', borderRadius:100,
          opacity:fueraOp, filter:`saturate(${fueraSat})`, whiteSpace:'nowrap'}}>
          <span style={{position:'relative', width:18, height:18, flexShrink:0}}>
            <svg width="18" height="18" viewBox="0 0 18 18">
              <path d="M4 4 L14 14 M14 4 L4 14" stroke="#EF4444" strokeWidth="2.4" strokeLinecap="round"
                strokeDasharray="28" strokeDashoffset={28*(1-fueraX)}/>
            </svg>
          </span>
          <span className="f-plex" style={{fontSize:14, fontWeight:500, color:'#94A3B8', textDecoration:'line-through', textDecorationColor:'#CBD5E1'}}>Proveedor de fuera</span>
        </div>
      )}

      {/* ===== SELLO Open Trusted Cloud (protagonista 2ª mitad, elevación alta) ===== */}
      {selP > 0 && (
        <div style={{position:'absolute', left:SCX, top:SCY, transform:`translate(-50%,-50%) translateY(${(1-selE)*30}px) scale(${lerp(0.62,1,selE)*(1+0.02*selPulse)})`, opacity:clamp(selP*1.3,0,1)}}>
          {/* disco blanco elevado detrás (concéntrico con el SVG del sello) */}
          <div style={{position:'absolute', left:0, top:0, width:SEAL_R*2, height:SEAL_R*2, borderRadius:'50%',
            background:'#fff', boxShadow:`0 24px 60px rgba(15,23,42,0.16), 0 0 0 ${(6+8*selPulse).toFixed(1)}px rgba(0,133,255,${0.05+0.06*selPulse})`}}/>
          <svg width={SEAL_R*2} height={SEAL_R*2} viewBox="0 0 256 256" style={{position:'relative', display:'block'}}>
            <defs>
              <path id="otcArcTop_in02" d="M 30 128 A 98 98 0 0 1 226 128"/>
              <path id="otcArcBot_in02" d="M 226 128 A 98 98 0 0 1 30 128"/>
            </defs>
            <circle cx="128" cy="128" r="120" fill="none" stroke="#0085FF" strokeWidth="2.5"/>
            <circle cx="128" cy="128" r="110" fill="none" stroke="#CBD5E1" strokeWidth="1.5" strokeDasharray="2 6"/>
            <text fill="#0085FF" fontSize="17" fontWeight="700" letterSpacing="3.4" fontFamily="'JetBrains Mono',monospace">
              <textPath href="#otcArcTop_in02" startOffset="50%" textAnchor="middle">OPEN TRUSTED CLOUD</textPath>
            </text>
            <text fill="#94A3B8" fontSize="13" fontWeight="700" letterSpacing="3.4" fontFamily="'JetBrains Mono',monospace">
              <textPath href="#otcArcBot_in02" startOffset="50%" textAnchor="middle">· CERTIFICADO INDEPENDIENTE ·</textPath>
            </text>
            {/* emblema central: escudo + check dibujado */}
            <path d="M128 78 L162 92 V128 C162 154 146 170 128 179 C110 170 94 154 94 128 V92 Z"
              fill="rgba(0,133,255,0.08)" stroke="#0085FF" strokeWidth="3" strokeLinejoin="round"/>
            <path d="M112 128 L124 140 L146 114" stroke="#10B981" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round"
              strokeDasharray="60" strokeDashoffset={60*(1-selDraw)}/>
          </svg>
        </div>
      )}

      {/* ===== 3 checks bajo el sello ===== */}
      <div style={{position:'absolute', left:SCX-230, top:SCY+SEAL_R+40, width:460, display:'flex', flexDirection:'column', gap:14}}>
        {CHECKS.map((c,i)=>{
          const p = clamp((t-c.start)/0.5, 0, 1);
          if (p <= 0) return null;
          const e = Easing.easeOutCubic(p);
          const cs = Easing.easeOutBack(clamp((t-c.start)/0.4, 0, 1)); // círculo del check
          const dr = Easing.easeInOutCubic(clamp((t-(c.start+0.1))/0.4, 0, 1)); // el tic se dibuja
          return (
            <div key={c.label} style={{display:'flex', alignItems:'center', gap:16,
              background:'#fff', border:'1px solid #E2E8F0', borderRadius:14, padding:'12px 18px',
              boxShadow:'0 8px 22px rgba(15,23,42,0.06)',
              opacity:clamp(p*1.3,0,1), transform:`translateX(${(1-e)*-22}px)`}}>
              <div style={{width:34, height:34, borderRadius:100, flexShrink:0,
                background:'linear-gradient(180deg,#34D399,#10B981)', display:'flex', alignItems:'center', justifyContent:'center',
                boxShadow:'0 6px 16px rgba(16,185,129,0.30)', transform:`scale(${lerp(0.5,1,cs)})`}}>
                <svg width="20" height="20" viewBox="-12 -12 24 24" fill="none">
                  <path d="M -6 0.5 L -1.5 5 L 7 -5" stroke="#fff" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round"
                    strokeDasharray="22" strokeDashoffset={22*(1-dr)}/>
                </svg>
              </div>
              <div style={{flex:1, minWidth:0}}>
                <div className="f-plex" style={{fontSize:18, fontWeight:700, color:'#0F172A', letterSpacing:'-0.01em', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{c.label}</div>
                <div className="f-mono" style={{fontSize:11, fontWeight:600, color:'#94A3B8', letterSpacing:'0.5px', marginTop:2}}>{c.sub}</div>
              </div>
            </div>
          );
        })}
      </div>

      {/* ===== Auditado por un tercero ===== */}
      {audP > 0 && (
        <div style={{position:'absolute', left:SCX-230, top:SCY+SEAL_R+40+3*66+26, width:460, textAlign:'center',
          opacity:audP, transform:`translateY(${(1-audP)*10}px)`}}>
          <div className="f-plex" style={{fontSize:17, fontWeight:600, color:'#334155', letterSpacing:'-0.01em'}}>
            Auditado por un tercero. <span style={{color:'#94A3B8', fontWeight:500}}>No por nosotros.</span>
          </div>
        </div>
      )}

      {/* ===== Salida ===== */}
      {salP > 0 && (
        <div style={{position:'absolute', left:0, right:0, bottom:64, textAlign:'center',
          opacity:clamp(salP*1.3,0,1), transform:`translateY(${(1-salE)*16}px)`}}>
          <span className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:12,
            fontSize:13, fontWeight:700, letterSpacing:'2.5px', color:'#0F172A',
            background:'#fff', border:'1px solid #E2E8F0', borderRadius:100, padding:'12px 26px',
            boxShadow:'0 10px 28px rgba(15,23,42,0.08)'}}>
            TUS DATOS
            <span style={{color:'#0085FF', fontSize:16}}>→</span>
          </span>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaIN02 });