// ============================================================
// STRATEGIE 5M · 1M · 15S — landing page + lead capture
// ------------------------------------------------------------
// Paletă proprie (auriu/verde/roșu), extrasă din frame-urile
// video ale campaniei. NU folosește acid-ul verde al site-ului.
// Leads → public.strategy_leads → webhook → notify-strategy-lead
// (email către admin) + rând în admin_notifications.
// ============================================================

// ---- EDITEAZĂ AICI: tot textul + linkul video stau în blocul ăsta ----
const STG = {
  // ID-ul videoclipului YouTube (din URL: youtube.com/watch?v=ACESTA)
  videoId: 'dA8L185TXSk',

  eyebrow: 'CURS NOU · STRATEGIA MEA',
  title: 'Învață acum strategia',
  titleAccent: 'pe 15 secunde',
  lead: 'Cum citesc piața pe 5 minute, confirm pe 1 minut și execut pe 15 secunde. Pas cu pas, pe graficul tău.',

  formTitle: 'Primește oferta',
  formSub: 'Lasă-mi numele și numărul de WhatsApp. Te contactez personal.',
  formCta: 'PRIMEȘTE OFERTA',
  formFine: 'Te contactez pe WhatsApp. Fără spam, fără apeluri automate.',

  videoLabel: 'VEZI DESPRE CE E VORBA',
  videoTitle: 'Un minut și înțelegi tot',

  // pastilele din hero
  timeframes: ['5M', '1M', '15S'],

  bonusTitle: 'BONUS',
  bonusMeta: '2 × 30 MINUTE · 1 LA 1',
  bonusItems: [
    'Conceptele, aplicate pe graficul tău',
    'Cum pui trade-urile',
    'Unde le pui: intrare, SL, TP',
    'Ce să aștepți în live market',
  ],
};
// ---------------------------------------------------------------------

// Mini-grafic de lumânări, determinist (aceeași sămânță = același grafic),
// în verdele/roșul din frame-urile campaniei.
const StgCandles = ({ seed = 1, count = 18, width = 200, height = 74 }) => {
  const candles = React.useMemo(() => {
    // PRNG simplu, ca randările să fie stabile între re-render-uri
    let s = seed * 9301 + 49297;
    const rnd = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
    const out = [];
    let price = 0.5;
    for (let i = 0; i < count; i++) {
      // mean-reversion ușoară: fără ea seria se lipește de marginile clamp-ului
      // și lumânările ies fără corp
      const drift = (rnd() - 0.5) * 0.26 + (0.5 - price) * 0.07;
      const open = price;
      const close = Math.min(0.9, Math.max(0.1, price + drift));
      const spread = 0.02 + rnd() * 0.05;
      out.push({
        open, close,
        high: Math.min(1, Math.max(open, close) + spread),
        low:  Math.max(0, Math.min(open, close) - spread),
        up: close >= open,
      });
      price = close;
    }
    return out;
  }, [seed, count]);

  const step = width / count;
  const bodyW = Math.max(2, step * 0.52);
  const y = (v) => height - v * height;

  return (
    <svg className="stg-candles" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" aria-hidden="true">
      {candles.map((c, i) => {
        const cx = i * step + step / 2;
        const color = c.up ? 'var(--stg-green)' : 'var(--stg-red)';
        const top = y(Math.max(c.open, c.close));
        const bottom = y(Math.min(c.open, c.close));
        return (
          <g key={i}>
            <line x1={cx} y1={y(c.high)} x2={cx} y2={y(c.low)} stroke={color} strokeWidth="1.1"/>
            <rect x={cx - bodyW / 2} y={top} width={bodyW} height={Math.max(1.5, bottom - top)}
                  fill={color} rx="0.5"/>
          </g>
        );
      })}
    </svg>
  );
};

// ============================================================
// FORMULARUL DE LEAD
// ============================================================
const StgLeadForm = ({ user }) => {
  const [name, setName]   = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [busy, setBusy]   = React.useState(false);
  const [err, setErr]     = React.useState('');
  const [done, setDone]   = React.useState(false);

  // Pre-completează pentru userii logați — un câmp mai puțin de tastat.
  React.useEffect(() => {
    if (user?.name && !name) setName(user.name);
  }, [user]); // eslint-disable-line react-hooks/exhaustive-deps

  const digits = phone.replace(/\D/g, '');
  const valid = name.trim().length >= 2 && digits.length >= 9;

  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;                       // blochează dublu-click
    setErr('');

    if (!name.trim())        { setErr('Scrie-ți numele.'); return; }
    if (name.trim().length < 2) { setErr('Numele pare prea scurt.'); return; }
    if (digits.length < 9)   { setErr('Numărul de telefon pare incomplet.'); return; }
    if (!window.sb)          { setErr('Backend-ul nu e configurat. Verifică config.js.'); return; }

    setBusy(true);
    let uid = null;
    try {
      const { data } = await window.sb.auth.getSession();
      uid = data?.session?.user?.id ?? null;
    } catch { /* vizitator anonim — e ok */ }

    const { error } = await window.sb.from('strategy_leads').insert({
      user_id: uid,
      name: name.trim(),
      phone: phone.trim(),
      source: 'strategie-5m-1m-15s',
    });
    setBusy(false);

    if (error) {
      // Detaliul tehnic merge în consolă; vizitatorul primește ceva pe înțeles.
      console.error('[strategy_leads] insert failed:', error);
      setErr('Nu am putut trimite datele. Mai încearcă o dată, iar dacă tot nu merge scrie-mi direct pe Instagram sau WhatsApp.');
      return;
    }
    setDone(true);
  };

  if (done) {
    return (
      <div className="stg-form-card stg-form-done">
        <div className="stg-done-icon"><Icon name="check" size={26} stroke={2.6}/></div>
        <h3>Gata, te-am notat.</h3>
        <p>Te contactez personal pe WhatsApp, la numărul <span className="mono">{phone.trim()}</span>.</p>
        <p className="stg-done-hint">Între timp, uită-te la videoclipul de mai jos — îți explic exact ce urmează.</p>
      </div>
    );
  }

  return (
    <form className="stg-form-card" onSubmit={submit} noValidate>
      <h3 className="stg-form-title">{STG.formTitle}</h3>
      <p className="stg-form-sub">{STG.formSub}</p>

      <label className="stg-label" htmlFor="stg-name">NUME</label>
      <input
        id="stg-name"
        className="stg-input"
        type="text"
        autoComplete="name"
        placeholder="Numele tău"
        value={name}
        onChange={(e) => setName(e.target.value)}
        disabled={busy}
      />

      <label className="stg-label" htmlFor="stg-phone">NUMĂR WHATSAPP</label>
      <input
        id="stg-phone"
        className="stg-input mono"
        type="tel"
        inputMode="tel"
        autoComplete="tel"
        placeholder="+40 7XX XXX XXX"
        value={phone}
        onChange={(e) => setPhone(e.target.value)}
        disabled={busy}
      />

      {err && <div className="stg-form-err"><Icon name="warn" size={14}/><span>{err}</span></div>}

      <button className="stg-cta" type="submit" disabled={busy || !valid}>
        {busy ? 'SE TRIMITE…' : STG.formCta}
      </button>

      <p className="stg-form-fine">{STG.formFine}</p>
    </form>
  );
};

// ============================================================
// SECȚIUNEA VIDEO
// ============================================================
const StgVideo = () => {
  const [play, setPlay] = React.useState(false);
  const watchUrl = `https://www.youtube.com/watch?v=${STG.videoId}`;
  const embedUrl = `https://www.youtube-nocookie.com/embed/${STG.videoId}?rel=0&modestbranding=1&autoplay=1`;
  const thumbUrl = `https://i.ytimg.com/vi/${STG.videoId}/maxresdefault.jpg`;

  return (
    <div className="stg-video-block">
      <div className="stg-eyebrow"><span className="stg-dot"/>{STG.videoLabel}</div>
      <h2 className="stg-h2">{STG.videoTitle}</h2>

      <div className="stg-video-frame">
        {play ? (
          <iframe
            src={embedUrl}
            title={STG.videoTitle}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          />
        ) : (
          // Facade: nu încărcăm YouTube până nu apasă cineva Play (pagină mai rapidă).
          <button className="stg-video-poster" onClick={() => setPlay(true)} aria-label="Pornește videoclipul">
            <img src={thumbUrl} alt="" loading="lazy"
                 onError={(e) => { e.currentTarget.style.display = 'none'; }}/>
            <span className="stg-play"><Icon name="play" size={26}/></span>
          </button>
        )}
      </div>

      <a className="stg-video-link" href={watchUrl} target="_blank" rel="noopener noreferrer">
        <Icon name="youtube" size={15}/>
        <span>Deschide videoclipul pe YouTube</span>
        <Icon name="arrowUR" size={13}/>
      </a>
    </div>
  );
};

// ============================================================
// PAGINA
// ============================================================
const StrategiePage = ({ user }) => {
  return (
    <div className="stg-scope">
      {/* ---------------- HERO + FORMULAR ---------------- */}
      <section className="stg-hero-sec">
        <div className="stg-grid-bg" aria-hidden="true"/>
        <div className="container">
          <div className="stg-hero">
            <div className="stg-hero-left">
              <div className="stg-eyebrow"><span className="stg-dot"/>{STG.eyebrow}</div>

              <div className="stg-tfs" role="list">
                {STG.timeframes.map((tf, i) => (
                  <span key={tf} role="listitem"
                        className={`stg-tf ${i === 0 ? 'is-active' : ''}`}>{tf}</span>
                ))}
              </div>

              <h1 className="stg-h1">
                {STG.title}<br/>
                <span className="stg-gold-text">{STG.titleAccent}</span>
              </h1>

              <p className="stg-lead">{STG.lead}</p>

              <div className="stg-hero-chart">
                <StgCandles seed={7} count={34} width={520} height={130}/>
                <span className="stg-price-tag">19106.57</span>
              </div>
            </div>

            <div className="stg-hero-right">
              <StgLeadForm user={user}/>
            </div>
          </div>
        </div>
      </section>

      {/* ---------------- VIDEO ---------------- */}
      <section className="stg-sec">
        <div className="container">
          <StgVideo/>
        </div>
      </section>

      {/* ---------------- BONUS ---------------- */}
      <section className="stg-sec stg-sec-last">
        <div className="container">
          <div className="stg-bonus">
            <div className="stg-bonus-head">
              <div className="stg-bonus-word">{STG.bonusTitle}</div>
              <div className="stg-bonus-meta">{STG.bonusMeta}</div>
            </div>
            <div className="stg-bonus-list">
              {STG.bonusItems.map((b, i) => (
                <div className="stg-bonus-item" key={b}>
                  <span className="stg-bonus-num">{String(i + 1).padStart(2, '0')}</span>
                  <span>{b}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="stg-bottom-cta">
            <p>Gata să începi?</p>
            <button className="stg-cta stg-cta-inline" onClick={() => {
              document.querySelector('#stg-name')?.focus();
              document.querySelector('.stg-form-card')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }}>{STG.formCta}</button>
          </div>
        </div>
      </section>

      {/* ============================================================
          STILURI — paletă locală, scoasă din frame-urile campaniei.
          Totul e prefixat .stg- ca să nu atingă restul site-ului.
          ============================================================ */}
      <style>{`
        .stg-scope {
          --stg-gold:        #ECC152;
          --stg-gold-deep:   #C9A445;
          --stg-gold-light:  #FFE39A;
          --stg-gold-glow:   rgba(236, 193, 82, 0.45);
          --stg-green:       #44E392;
          --stg-red:         #F2656E;
          --stg-bg:          #04060A;
          --stg-bg-2:        #0C0E14;
          --stg-line:        rgba(236, 193, 82, 0.22);
          --stg-line-soft:   rgba(255, 255, 255, 0.08);
          background: var(--stg-bg);
          position: relative;
        }

        .stg-sec { padding: 64px 0; }
        .stg-sec-last { padding-bottom: 96px; }

        /* ---------- HERO ---------- */
        .stg-hero-sec { position: relative; padding: 70px 0 64px; overflow: hidden; }
        .stg-grid-bg {
          position: absolute; inset: 0;
          background-image:
            linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
          background-size: 96px 96px;
          mask: radial-gradient(ellipse 80% 70% at 50% 35%, #000 20%, transparent 78%);
          -webkit-mask: radial-gradient(ellipse 80% 70% at 50% 35%, #000 20%, transparent 78%);
          pointer-events: none;
        }
        .stg-hero {
          position: relative;
          display: grid;
          grid-template-columns: 1.08fr 0.92fr;
          gap: 54px;
          align-items: center;
        }

        .stg-eyebrow {
          display: inline-flex; align-items: center; gap: 9px;
          font-family: 'JetBrains Mono', monospace;
          font-size: 11px; font-weight: 700;
          letter-spacing: 0.2em;
          color: var(--stg-gold);
          text-transform: uppercase;
        }
        .stg-dot {
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--stg-gold);
          box-shadow: 0 0 10px var(--stg-gold-glow);
          animation: stgPulse 2s ease-in-out infinite;
        }
        @keyframes stgPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

        /* pastilele 5M / 1M / 15S — ca în frame-ul de analiză */
        .stg-tfs {
          display: flex; width: fit-content; gap: 4px;
          margin-top: 22px; padding: 5px;
          border-radius: 14px;
          background: rgba(255,255,255,0.045);
          border: 1px solid var(--stg-line-soft);
        }
        .stg-tf {
          padding: 8px 20px;
          border-radius: 10px;
          font-family: 'JetBrains Mono', monospace;
          font-size: 13px; font-weight: 800; letter-spacing: 0.1em;
          color: var(--text-dim);
        }
        .stg-tf.is-active {
          background: linear-gradient(180deg, var(--stg-gold) 0%, var(--stg-gold-deep) 100%);
          color: #17120A;
          box-shadow: 0 4px 18px rgba(236,193,82,0.28);
        }

        .stg-h1 {
          margin: 26px 0 0;
          font-size: clamp(38px, 5.6vw, 68px);
          font-weight: 900;
          line-height: 1.02;
          letter-spacing: -0.035em;
        }
        .stg-gold-text {
          background: linear-gradient(180deg, var(--stg-gold-light) 0%, var(--stg-gold) 45%, var(--stg-gold-deep) 100%);
          -webkit-background-clip: text; background-clip: text;
          color: transparent;
          filter: drop-shadow(0 0 22px rgba(236,193,82,0.28));
        }
        .stg-lead {
          margin: 20px 0 0;
          max-width: 520px;
          font-size: 15.5px; line-height: 1.62;
          color: var(--text-dim);
        }

        .stg-hero-chart {
          position: relative;
          margin-top: 34px;
          max-width: 520px;
          opacity: 0.85;
        }
        .stg-hero-chart .stg-candles { width: 100%; height: 130px; display: block; }
        .stg-price-tag {
          position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
          font-family: 'JetBrains Mono', monospace;
          font-size: 11px; font-weight: 700;
          color: #2A0E11;
          background: var(--stg-red);
          padding: 3px 7px; border-radius: 4px;
        }

        /* ---------- FORMULAR ---------- */
        .stg-form-card {
          position: relative;
          padding: 34px 32px 28px;
          border-radius: 22px;
          background:
            radial-gradient(130% 110% at 50% 0%, rgba(236,193,82,0.11) 0%, rgba(236,193,82,0.03) 45%, transparent 75%),
            linear-gradient(180deg, rgba(236,193,82,0.04) 0%, rgba(6,8,12,0.94) 65%);
          border: 1px solid var(--stg-line);
          box-shadow:
            0 0 42px rgba(236,193,82,0.13),
            0 26px 64px rgba(0,0,0,0.6),
            inset 0 1px 0 rgba(255,227,154,0.16);
        }
        .stg-form-card::before {
          content: '';
          position: absolute; top: 0; left: 12%; right: 12%; height: 2px;
          background: linear-gradient(90deg, transparent, var(--stg-gold), transparent);
          opacity: 0.85;
        }
        .stg-form-title {
          margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
          color: var(--stg-gold-light);
        }
        .stg-form-sub {
          margin: 8px 0 24px;
          font-size: 13.5px; line-height: 1.55; color: var(--text-dim);
        }
        .stg-label {
          display: block;
          margin-bottom: 8px;
          font-family: 'JetBrains Mono', monospace;
          font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em;
          color: var(--text-mute);
          text-transform: uppercase;
        }
        .stg-input {
          width: 100%;
          padding: 15px 16px;
          margin-bottom: 18px;
          border-radius: 12px;
          background: rgba(0,0,0,0.5);
          border: 1px solid rgba(255,255,255,0.11);
          color: var(--text);
          font-size: 15px;
          font-family: inherit;
          transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
        }
        .stg-input.mono { font-family: 'JetBrains Mono', monospace; font-size: 14px; letter-spacing: 0.04em; }
        .stg-input::placeholder { color: var(--text-faint); }
        .stg-input:focus {
          outline: none;
          border-color: var(--stg-gold);
          background: rgba(0,0,0,0.65);
          box-shadow: 0 0 0 3px rgba(236,193,82,0.14);
        }
        .stg-input:disabled { opacity: 0.55; cursor: not-allowed; }

        .stg-cta {
          width: 100%;
          margin-top: 6px;
          padding: 17px 24px;
          border: none;
          border-radius: 12px;
          background: linear-gradient(180deg, #F7D574 0%, var(--stg-gold) 55%, #DDB149 100%);
          color: #17120A;
          font-family: 'JetBrains Mono', monospace;
          font-size: 14px; font-weight: 800; letter-spacing: 0.1em;
          cursor: pointer;
          box-shadow: 0 10px 30px rgba(236,193,82,0.26);
          transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s, filter 0.25s;
        }
        .stg-cta:hover:not(:disabled) {
          transform: translateY(-2px);
          box-shadow: 0 16px 42px rgba(236,193,82,0.38);
          filter: brightness(1.05);
        }
        .stg-cta:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
        .stg-cta-inline { width: auto; padding: 16px 40px; }

        .stg-form-fine {
          margin: 14px 0 0;
          text-align: center;
          font-size: 11.5px; line-height: 1.5; color: var(--text-mute);
        }
        .stg-form-err {
          display: flex; align-items: flex-start; gap: 9px;
          margin-bottom: 14px; padding: 11px 13px;
          border-radius: 10px;
          background: rgba(242,101,110,0.1);
          border: 1px solid rgba(242,101,110,0.32);
          color: #FF9AA0;
          font-size: 13px; line-height: 1.45;
        }
        .stg-form-err svg { flex-shrink: 0; margin-top: 1px; }

        .stg-form-done { text-align: center; padding: 46px 32px 42px; }
        .stg-done-icon {
          width: 58px; height: 58px; margin: 0 auto 20px;
          border-radius: 50%;
          display: grid; place-items: center;
          background: rgba(68,227,146,0.12);
          border: 1px solid rgba(68,227,146,0.4);
          color: var(--stg-green);
        }
        .stg-form-done h3 { margin: 0; font-size: 23px; font-weight: 800; }
        .stg-form-done p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-dim); }
        .stg-done-hint { font-size: 12.5px !important; color: var(--text-mute) !important; }

        /* ---------- VIDEO ---------- */
        .stg-video-block { max-width: 880px; margin: 0 auto; text-align: center; }
        .stg-h2 {
          margin: 16px 0 28px;
          font-size: clamp(26px, 3.4vw, 40px);
          font-weight: 900; letter-spacing: -0.03em;
        }
        .stg-video-frame {
          position: relative;
          aspect-ratio: 16 / 9;
          border-radius: 20px;
          overflow: hidden;
          background: #000;
          border: 1px solid var(--stg-line);
          box-shadow: 0 0 50px rgba(236,193,82,0.12), 0 30px 70px rgba(0,0,0,0.6);
        }
        .stg-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
        .stg-video-poster {
          width: 100%; height: 100%;
          padding: 0; border: 0; background: #000;
          cursor: pointer; display: block; position: relative;
        }
        .stg-video-poster img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
        .stg-play {
          position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
          width: 76px; height: 76px; border-radius: 50%;
          display: grid; place-items: center;
          background: linear-gradient(180deg, var(--stg-gold) 0%, var(--stg-gold-deep) 100%);
          color: #17120A;
          box-shadow: 0 0 40px rgba(236,193,82,0.5);
          transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
        }
        .stg-video-poster:hover .stg-play { transform: translate(-50%, -50%) scale(1.08); }
        .stg-video-link {
          display: inline-flex; align-items: center; gap: 9px;
          margin-top: 20px; padding: 11px 20px;
          border-radius: 999px;
          border: 1px solid var(--stg-line-soft);
          background: rgba(255,255,255,0.035);
          color: var(--text-dim);
          font-size: 13px; text-decoration: none;
          transition: border-color 0.2s, color 0.2s, background 0.2s;
        }
        .stg-video-link:hover {
          border-color: var(--stg-line);
          color: var(--stg-gold-light);
          background: rgba(236,193,82,0.07);
        }



        /* ---------- BONUS ---------- */
        .stg-bonus {
          padding: 40px 38px;
          border-radius: 24px;
          background:
            radial-gradient(120% 130% at 50% 0%, rgba(236,193,82,0.12) 0%, rgba(236,193,82,0.03) 45%, transparent 76%),
            rgba(255,255,255,0.022);
          border: 1px solid var(--stg-line);
          text-align: center;
        }
        .stg-bonus-word {
          font-size: clamp(38px, 5.4vw, 64px);
          font-weight: 900; letter-spacing: 0.02em; line-height: 1;
          background: linear-gradient(180deg, var(--stg-gold-light) 0%, var(--stg-gold) 45%, var(--stg-gold-deep) 100%);
          -webkit-background-clip: text; background-clip: text;
          color: transparent;
          filter: drop-shadow(0 0 26px rgba(236,193,82,0.38));
        }
        .stg-bonus-meta {
          margin-top: 12px;
          font-family: 'JetBrains Mono', monospace;
          font-size: 13px; font-weight: 700; letter-spacing: 0.18em;
          color: var(--stg-gold);
        }
        .stg-bonus-list {
          display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
          margin-top: 32px; text-align: left;
        }
        .stg-bonus-item {
          display: flex; align-items: center; gap: 14px;
          padding: 17px 20px;
          border-radius: 14px;
          background: rgba(0,0,0,0.42);
          border: 1px solid var(--stg-line-soft);
          font-size: 15px; font-weight: 600;
        }
        .stg-bonus-num {
          flex-shrink: 0;
          width: 34px; height: 34px; border-radius: 50%;
          display: grid; place-items: center;
          background: linear-gradient(180deg, var(--stg-gold) 0%, var(--stg-gold-deep) 100%);
          color: #17120A;
          font-family: 'JetBrains Mono', monospace;
          font-size: 12px; font-weight: 800;
        }

        .stg-bottom-cta { margin-top: 44px; text-align: center; }
        .stg-bottom-cta p {
          margin: 0 0 18px;
          font-size: 20px; font-weight: 700; color: var(--text);
        }

        /* ---------- RESPONSIVE ---------- */
        @media (max-width: 1000px) {
          .stg-hero { grid-template-columns: 1fr; gap: 40px; }
          .stg-hero-chart { display: none; }
        }
        @media (max-width: 780px) {
          .stg-hero-sec { padding: 46px 0 40px; }
          .stg-sec { padding: 46px 0; }
          .stg-bonus-list { grid-template-columns: 1fr; }
          .stg-bonus { padding: 30px 20px; }
          .stg-form-card { padding: 28px 22px 24px; }
        }
        @media (max-width: 420px) {
          .stg-tfs { width: 100%; justify-content: space-between; }
          .stg-tf { flex: 1; text-align: center; padding: 8px 10px; }
        }
        @media (prefers-reduced-motion: reduce) {
          .stg-dot { animation: none; }
          .stg-cta, .stg-play { transition: none; }
          .stg-cta:hover:not(:disabled) { transform: none; }
        }
      `}</style>
    </div>
  );
};

Object.assign(window, { StrategiePage });