// GSP — Hero animado custom para la página Upgrade Smart (DSC → inteligente).
// Se inyecta vía data.hero.component = 'UpgradeSmartHero' (ver electronica-data.js + ProductPage.jsx).
const USH_CSS = `
  .ush{
    position:relative; min-height:100vh; display:flex; align-items:center;
    font-family:'Plus Jakarta Sans','DM Sans',system-ui,sans-serif; color:#fff;
    --navy-700:#131D33; --navy:#3F4E6D; --red:#E71A21; --red-600:#c5161c; --ease:cubic-bezier(.4,0,.2,1);
    background:
      radial-gradient(1100px 700px at 78% 38%, rgba(231,26,33,.16), transparent 60%),
      radial-gradient(900px 600px at 12% 80%, rgba(63,78,109,.30), transparent 60%),
      linear-gradient(135deg, #0E1526 0%, #131D33 48%, #1a2744 100%);
    overflow:hidden;
  }
  .ush::before{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
    background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:54px 54px; -webkit-mask-image:radial-gradient(circle at 70% 45%, #000 0%, transparent 70%); mask-image:radial-gradient(circle at 70% 45%, #000 0%, transparent 70%);
    animation:ush-grid 24s linear infinite;
  }
  @keyframes ush-grid{to{background-position:54px 54px,54px 54px}}
  .ush-wrap{position:relative; z-index:2; width:100%; max-width:1240px; margin:0 auto; padding:7rem 2.5rem 8rem;
    display:grid; grid-template-columns:1.02fr 1.1fr; gap:2rem; align-items:center}
  .ush-text{max-width:540px}
  .ush-overline{display:inline-flex; align-items:center; gap:.6rem; font-weight:700;
    font-size:.72rem; letter-spacing:3px; text-transform:uppercase; color:var(--red);
    opacity:0; transform:translateY(14px); animation:ush-rise .7s var(--ease) .1s forwards}
  .ush-overline::before{content:""; width:26px; height:2px; background:var(--red); display:inline-block}
  .ush h1{font-weight:800; font-size:clamp(2.6rem,5vw,4rem); line-height:1.05;
    letter-spacing:-.5px; margin:1.1rem 0 1.3rem; color:#fff}
  .ush h1 .ush-w{display:inline-block; margin-right:.26em; opacity:0; transform:translateY(22px); animation:ush-rise .7s var(--ease) forwards}
  .ush-accent{color:var(--red)}
  .ush-sub{font-family:'DM Sans',system-ui,sans-serif; font-size:1.08rem; line-height:1.65; color:rgba(255,255,255,.74); max-width:480px;
    opacity:0; transform:translateY(16px); animation:ush-rise .7s var(--ease) .9s forwards}
  .ush-cta{display:flex; gap:.9rem; margin-top:2rem; flex-wrap:wrap;
    opacity:0; transform:translateY(16px); animation:ush-rise .7s var(--ease) 1.1s forwards}
  .ush-btn{font-weight:700; font-size:.95rem; letter-spacing:.3px;
    padding:.95rem 1.7rem; border-radius:4px; cursor:pointer; text-decoration:none; display:inline-flex;
    align-items:center; gap:.5rem; transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease); border:1.5px solid transparent}
  .ush-btn-primary{background:var(--red); color:#fff; position:relative; overflow:hidden}
  .ush-btn-primary::after{content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-18deg)}
  .ush-btn-primary:hover{background:var(--red-600); transform:translateY(-2px); box-shadow:0 10px 26px rgba(231,26,33,.34)}
  .ush-btn-primary:hover::after{animation:ush-shine .8s var(--ease)}
  .ush-btn-outline{background:rgba(255,255,255,.04); color:#fff; border-color:rgba(255,255,255,.22)}
  .ush-btn-outline:hover{border-color:#fff; transform:translateY(-2px); background:rgba(255,255,255,.08)}
  .ush-chips{display:flex; gap:.55rem; margin-top:1.8rem; flex-wrap:wrap}
  .ush-chip{font-weight:600; font-size:.78rem; letter-spacing:.3px; color:rgba(255,255,255,.82);
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:999px;
    padding:.45rem .9rem; display:inline-flex; align-items:center; gap:.45rem; backdrop-filter:blur(8px);
    opacity:0; transform:translateY(12px); animation:ush-rise .6s var(--ease) forwards}
  .ush-chip .ush-dot{width:6px; height:6px; border-radius:50%; background:var(--red)}
  .ush-chip:nth-child(1){animation-delay:1.25s}
  .ush-chip:nth-child(2){animation-delay:1.38s}
  .ush-chip:nth-child(3){animation-delay:1.51s}
  .ush-stage{position:relative; min-height:480px; display:flex; align-items:center; justify-content:center;
    opacity:0; animation:ush-fade 1s var(--ease) .35s forwards}
  .ush-device{position:relative; width:100%; max-width:600px}
  .ush-device img{display:block; width:100%; height:auto; border-radius:14px;
    -webkit-mask-image:radial-gradient(140% 125% at 52% 50%, #000 66%, transparent 97%);
            mask-image:radial-gradient(140% 125% at 52% 50%, #000 66%, transparent 97%);
    filter:drop-shadow(0 30px 60px rgba(0,0,0,.55)); animation:ush-float 9s var(--ease) infinite}
  .ush-device .ush-wash{position:absolute; inset:0; border-radius:14px; pointer-events:none;
    background:linear-gradient(115deg, var(--navy-700) 0%, rgba(19,29,51,.45) 26%, transparent 52%),
               radial-gradient(60% 60% at 62% 44%, rgba(231,26,33,.10), transparent 70%);
    mix-blend-mode:multiply; opacity:.9}
  .ush-appcard{position:absolute; right:-22px; top:-4%; width:214px; z-index:4;
    background:linear-gradient(160deg, rgba(20,30,54,.92), rgba(10,16,30,.92));
    border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:14px 15px;
    box-shadow:0 24px 60px rgba(0,0,0,.5); backdrop-filter:blur(14px);
    opacity:0; transform:translateY(18px) scale(.96); animation:ush-cardin .8s var(--ease) 1.5s forwards, ush-float 7s var(--ease) 2.3s infinite}
  .ush-appcard .ush-ac-top{display:flex; align-items:center; gap:.5rem; margin-bottom:.7rem}
  .ush-appcard .ush-logo{width:26px; height:26px; border-radius:7px; background:var(--red); display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:.62rem; color:#fff; letter-spacing:.5px}
  .ush-appcard .ush-ac-title{font-weight:700; font-size:.82rem}
  .ush-appcard .ush-ac-sub{font-size:.66rem; color:rgba(255,255,255,.55)}
  .ush-appcard .ush-status{display:flex; align-items:center; justify-content:space-between;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:.55rem .7rem}
  .ush-appcard .ush-st-left{display:flex; align-items:center; gap:.5rem}
  .ush-appcard .ush-st-dot{width:9px; height:9px; border-radius:50%; background:#27c06a; box-shadow:0 0 10px 2px rgba(39,192,106,.6); animation:ush-blink 1.6s steps(1) infinite}
  .ush-appcard .ush-st-txt{font-weight:700; font-size:.78rem; letter-spacing:.4px}
  .ush-appcard .ush-st-arm{font-size:.62rem; color:rgba(255,255,255,.5); font-weight:600}
  .ush-appcard .ush-bars{display:flex; gap:3px; margin-top:.7rem}
  .ush-appcard .ush-bars i{flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.12)}
  .ush-appcard .ush-bars i.on{background:var(--red); animation:ush-bar 2s var(--ease) infinite}
  .ush-appcard .ush-bars i:nth-child(2).on{animation-delay:.25s}
  .ush-appcard .ush-bars i:nth-child(3).on{animation-delay:.5s}
  .ush-ba{display:inline-flex; align-items:center; gap:.6rem; margin-top:1.6rem; font-size:.74rem;
    font-weight:600; color:rgba(255,255,255,.6);
    opacity:0; transform:translateY(12px); animation:ush-rise .6s var(--ease) 1.6s forwards}
  .ush-ba b{color:#fff} .ush-ba .ush-arw{color:var(--red)}
  .ush-scroll{position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:3; text-align:center;
    opacity:0; animation:ush-fade 1s var(--ease) 1.8s forwards}
  .ush-scroll span{font-weight:600; font-size:.66rem; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.5)}
  .ush-scroll .ush-mouse{width:22px; height:34px; border:2px solid rgba(255,255,255,.4); border-radius:12px; margin:.5rem auto 0; position:relative}
  .ush-scroll .ush-mouse::after{content:""; position:absolute; top:6px; left:50%; width:3px; height:6px; background:#fff; border-radius:2px; transform:translateX(-50%); animation:ush-wheel 1.6s var(--ease) infinite}
  .ush-diag{position:absolute; bottom:0; left:0; width:100%; line-height:0; z-index:2}
  .ush-diag svg{display:block; width:100%; height:70px}
  @keyframes ush-rise{to{opacity:1; transform:translateY(0)}}
  @keyframes ush-fade{to{opacity:1}}
  @keyframes ush-shine{to{left:130%}}
  @keyframes ush-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  @keyframes ush-cardin{to{opacity:1; transform:translateY(0) scale(1)}}
  @keyframes ush-blink{0%,60%{opacity:1}61%,100%{opacity:.25}}
  @keyframes ush-bar{0%,100%{opacity:.45}50%{opacity:1}}
  @keyframes ush-wheel{0%{opacity:0; top:6px}40%{opacity:1}80%{opacity:0; top:16px}100%{opacity:0}}
  @media(max-width:880px){
    .ush-wrap{grid-template-columns:1fr; gap:3rem; padding:6rem 1.6rem 7rem; text-align:center}
    .ush-text{max-width:none; margin:0 auto}
    .ush-overline,.ush-cta,.ush-chips{justify-content:center}
    .ush-stage{min-height:380px; order:2}
    .ush-appcard{right:0; top:0}
  }
  @media(prefers-reduced-motion:reduce){ .ush *{animation-duration:.001s !important; animation-iteration-count:1 !important} }
`;

function UpgradeSmartHero({ hero = {} }) {
  const words = [
    ['Transformá', '.30s'], ['tu', '.42s'], ['alarma', '.54s'], ['DSC', '.66s', true],
    ['en', '.80s'], ['inteligente', '.92s', false, true],
  ];
  const cta = hero.cta || [['Cotizar mi upgrade', '#contacto', 'primary'], ['Ver línea AX Pro', 'axpro.html', 'outline']];
  return (
    <section className="ush">
      <style dangerouslySetInnerHTML={{ __html: USH_CSS }} />
      <div className="ush-wrap">
        <div className="ush-text">
          <div className="ush-overline">{hero.overline || 'Sistemas GSP · Upgrade Smart'}</div>
          <h1>
            <span className="ush-w" style={{ animationDelay: '.30s' }}>Transformá</span>
            <span className="ush-w" style={{ animationDelay: '.42s' }}>tu</span>
            <span className="ush-w" style={{ animationDelay: '.54s' }}>alarma</span>
            <span className="ush-w" style={{ animationDelay: '.66s' }}>DSC</span><br />
            <span className="ush-w" style={{ animationDelay: '.80s' }}>en</span>
            <span className="ush-w ush-accent" style={{ animationDelay: '.92s' }}>inteligente</span>
          </h1>
          <p className="ush-sub">{hero.subtitle || 'No tires tu equipo. Modernizamos tu central DSC (y otras marcas) para que la controles desde el celular, con monitoreo 24/7 — a una fracción del costo de un sistema nuevo.'}</p>
          <div className="ush-cta">
            <a className="ush-btn ush-btn-primary" href={cta[0] ? cta[0][1] : '#contacto'}>{cta[0] ? cta[0][0] : 'Cotizar mi upgrade'}</a>
            <a className="ush-btn ush-btn-outline" href={cta[1] ? cta[1][1] : 'axpro.html'}>{cta[1] ? cta[1][0] : 'Ver línea AX Pro'}</a>
          </div>
          <div className="ush-chips">
            <span className="ush-chip"><span className="ush-dot" />Compatible DSC</span>
            <span className="ush-chip"><span className="ush-dot" />Control por app</span>
            <span className="ush-chip"><span className="ush-dot" />Monitoreo 24/7</span>
          </div>
          <div className="ush-ba"><b>Tu equipo actual</b> <span className="ush-arw">→</span> <b>controlado desde tu celular</b></div>
        </div>

        <div className="ush-stage">
          <div className="ush-device">
            <img src="dsc-kit.webp" alt="Kit de alarma DSC con teclado, panel táctil, sensores y control remoto" width="1200" height="896" />
            <div className="ush-wash" />
          </div>
          <div className="ush-appcard">
            <div className="ush-ac-top">
              <div className="ush-logo">GSP</div>
              <div>
                <div className="ush-ac-title">GSP Smart</div>
                <div className="ush-ac-sub">Central DSC · en línea</div>
              </div>
            </div>
            <div className="ush-status">
              <div className="ush-st-left">
                <span className="ush-st-dot" />
                <span className="ush-st-txt">SISTEMA ARMADO</span>
              </div>
              <span className="ush-st-arm">Casa</span>
            </div>
            <div className="ush-bars"><i className="on" /><i className="on" /><i className="on" /><i /><i /></div>
          </div>
        </div>
      </div>

      <div className="ush-scroll"><span>Descubrí más</span><div className="ush-mouse" /></div>
      <div className="ush-diag">
        <svg viewBox="0 0 1440 80" preserveAspectRatio="none"><path d="M0 80L1440 0V80H0Z" fill="#fff" /></svg>
      </div>
    </section>
  );
}
window.UpgradeSmartHero = UpgradeSmartHero;