// Plantilla REUTILIZABLE de página de producto — misma estructura para todo
// el ecosistema BRITXIA Tech. Agregar un producto nuevo = un objeto más en
// britxia-data.js + un .html de una línea. No se rediseña el sitio.
// Filosofía: comunicar soluciones y utilidad, no tecnología.
(function () {
  const BX = window.BX;
  const NAVY = BX.navy, ORANGE = BX.orange, CREAM = BX.cream;
  const head = '"Poppins", system-ui, sans-serif';
  const body = '"Inter", system-ui, sans-serif';
  const mono = '"JetBrains Mono", ui-monospace, monospace';
  const PANEL = '#13283d';
  const PANEL2 = '#0F2030';

  function useLang() {
    const [, rerender] = React.useState(0);
    React.useEffect(() => {
      const h = () => rerender(n => n + 1);
      window.addEventListener('langchange', h);
      return () => window.removeEventListener('langchange', h);
    }, []);
  }

  const ink = (a) => (a.accent === '#9A7B53' ? '#C7A06A' : a.accent);

  // ---------- NAV (Header compartido) ----------
  const Nav = ({ a }) => <window.BXHeader home={false} />;
  const Footer = () => <window.BXFooter />;

  // ---------- Platform badges ----------
  const PLAT_ICONS = {
    iphone:  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>,
    android: <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 16a7 7 0 0 1 14 0"/><line x1="8" y1="12" x2="8" y2="12.01"/><line x1="16" y1="12" x2="16" y2="12.01"/><line x1="3" y1="16" x2="21" y2="16"/><path d="M7 16v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-2"/></svg>,
    web:     <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>,
    watch:   <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="6" width="12" height="12" rx="3"/><path d="M9 2h6l1 4H8zM8 18l1 4h6l1-4"/><line x1="12" y1="9" x2="12" y2="12"/><line x1="12" y1="12" x2="14" y2="13"/></svg>,
  };
  const PLAT_LABELS = { iphone:'iPhone', android:'Android', web:'Web', watch:'Apple Watch\n& Wear OS' };

  const PlatformBadges = ({ platforms, accent }) => {
    if (!platforms || !platforms.length) return null;
    return (
      <div style={{ display:'flex', gap:20, alignItems:'flex-start', marginBottom:36 }}>
        {platforms.map(p => (
          <div key={p} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:4 }}>
            <span style={{ color:'rgba(248,244,238,.75)' }}>
              {PLAT_ICONS[p]}
            </span>
            <span style={{ fontFamily:body, fontSize:9, color:'rgba(248,244,238,.5)', textAlign:'center', maxWidth:64, lineHeight:1.3, whiteSpace:'pre-line' }}>
              {PLAT_LABELS[p]}
            </span>
          </div>
        ))}
      </div>
    );
  };

  const SectionHead = ({ eyebrow, title, color, sub }) => (
    <div style={{ marginBottom: 44 }}>
      <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: 2, textTransform: 'uppercase', color: color, marginBottom: 14 }}>{eyebrow}</div>
      <h2 style={{ fontFamily: head, fontWeight: 600, fontSize: 40, letterSpacing: -1, margin: 0, color: CREAM }}>{title}</h2>
      {sub && <p style={{ fontSize: 17, lineHeight: 1.6, color: 'rgba(248,244,238,0.66)', maxWidth: 620, margin: '14px 0 0' }}>{sub}</p>}
    </div>
  );

  // ── Inject responsive CSS ──────────────────────────────────────
  if (!document.getElementById('bx-prod-responsive')) {
    const r = document.createElement('style');
    r.id = 'bx-prod-responsive';
    r.textContent = `
      body{overflow-x:hidden}
      *{box-sizing:border-box}
      #app{transform:none!important;width:100%!important}
      #stage{width:100%!important;height:auto!important}
      .pp-root{width:100%!important;max-width:100vw!important}
      @media(max-width:1100px){
        .pp-hero{padding:60px 40px 72px!important;overflow:hidden!important}
        .pp-section{padding:64px 40px!important}
        .pp-features{padding:64px 40px!important}
        .pp-steps{padding:64px 40px!important}
        .pp-integ{padding:64px 40px!important;grid-template-columns:1fr!important}
        .pp-dl{padding:56px 40px!important}
        .pp-close{padding:48px 40px!important}
      }
      @media(max-width:900px){
        .pp-hero{grid-template-columns:1fr!important}
        .pp-feat-grid{grid-template-columns:1fr 1fr!important}
        .pp-steps-grid{grid-template-columns:1fr 1fr!important}
      }
      @media(max-width:768px){
        .pp-hero{padding:48px 24px 56px!important}
        .pp-hero h1{font-size:clamp(36px,9vw,52px)!important;letter-spacing:-1.5px!important}
        .pp-hero h1+div{font-size:16px!important}
        .pp-section{padding:52px 24px!important}
        .pp-features{padding:52px 24px!important}
        .pp-feat-grid{grid-template-columns:1fr!important}
        .pp-steps{padding:52px 24px!important}
        .pp-steps-grid{grid-template-columns:1fr!important}
        .pp-integ{padding:52px 24px!important}
        .pp-integ-grid{grid-template-columns:1fr!important;gap:32px!important}
        .pp-dl{padding:44px 24px!important}
        .pp-dl-btns{flex-direction:column!important;align-items:stretch!important}
        .pp-dl-btn{justify-content:center!important}
        .pp-close{padding:40px 24px!important}
        /* Hero device scaling for laptop products */
        .pp-hero .bx-laptop-mk{transform:scale(0.52)!important;transform-origin:top center!important;animation:none!important}
        /* Contain hero device area */
        .pp-hero > div:last-child{overflow:hidden!important;max-height:380px!important}
      }
      @media(max-width:640px){
        #kleo-video{ padding-left:20px!important; padding-right:20px!important; padding-bottom:52px!important; }
      }
      @media(max-width:480px){
        .pp-hero h1{font-size:clamp(28px,9.5vw,38px)!important}
        .pp-section{padding:44px 20px!important}
        .pp-features{padding:44px 20px!important}
        .pp-steps{padding:44px 20px!important}
        .pp-integ{padding:44px 20px!important}
        .pp-dl{padding:36px 20px!important}
        .pp-close{padding:36px 20px!important}
        .pp-feat-item{padding:20px!important}
        .pp-hero .bx-laptop-mk{transform:scale(0.44)!important}
        .pp-hero > div:last-child{max-height:300px!important}
      }
      @media(max-width:390px){
        .pp-section,.pp-features,.pp-steps,.pp-integ,.pp-dl,.pp-close{padding-left:16px!important;padding-right:16px!important}
        .pp-hero{padding:44px 16px 48px!important}
        .pp-hero h1{font-size:26px!important}
        .pp-hero .bx-laptop-mk{transform:scale(0.38)!important}
        .pp-hero .bx-phone-mk{transform:scale(0.82)!important;transform-origin:top center!important}
        .pp-hero > div:last-child{max-height:270px!important}
      }
      @media(max-width:340px){
        .pp-hero .bx-laptop-mk{transform:scale(0.34)!important}
        .pp-hero .bx-phone-mk{transform:scale(0.74)!important}
        .pp-hero > div:last-child{max-height:240px!important}
      }
    `;
    document.head.appendChild(r);
  }

  // ---------- Página mínima "Próximamente" (productos aún no desarrollados) ----------
  function ComingSoon({ a }) {
    const T = window.t || (k => k);
    const acc = ink(a);
    return (
      <div style={{ width: '100%', fontFamily: body, color: CREAM, background: NAVY, minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
        <Nav a={a} />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '80px 24px' }}>
          <h1 style={{ fontFamily: head, fontWeight: 700, fontSize: 56, letterSpacing: -1.5, margin: '0 0 18px', color: CREAM }}>{a.key}</h1>
          <div style={{ fontFamily: mono, fontSize: 13, fontWeight: 600, letterSpacing: 2, textTransform: 'uppercase', color: acc, marginBottom: 40 }}>{T('product.coming')}</div>
          <a href="index.html" style={{ textDecoration: 'none', fontFamily: body, fontSize: 15, fontWeight: 600, color: NAVY,
            background: ORANGE, borderRadius: 100, padding: '14px 30px' }}>{T('product.back', '← Volver a BRITXIA')}</a>
        </div>
        <Footer />
      </div>
    );
  }

  function ProductPage({ appKey }) {
    useLang();
    const T = window.t || (k => k);
    const a = BX.apps.find((x) => x.key === appKey);
    if (a.comingSoon) return <ComingSoon a={a} />;
    const pd = (window.getPD && window.getLang) ? window.getPD(window.getLang(), a.key) : a;
    const acc = ink(a);
    const Mock = window.Mockups[a.key];

    const Field = ({ label, ph, opt }) => (
      <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <span style={{ fontFamily: body, fontSize: 13, fontWeight: 600, color: 'rgba(248,244,238,0.8)' }}>
          {label}{opt && <span style={{ color: 'rgba(248,244,238,0.4)', fontWeight: 400 }}>{T('product.optional')}</span>}
        </span>
        <input placeholder={ph} style={{ fontFamily: body, fontSize: 15, color: CREAM, background: 'rgba(248,244,238,0.06)',
          border: '1px solid rgba(248,244,238,0.18)', borderRadius: 12, padding: '13px 16px', outline: 'none' }} />
      </label>
    );

    return (
      <div className="pp-root" style={{ width: '100%', fontFamily: body, color: CREAM, background: NAVY, position: 'relative' }}>
        <Nav a={a} />

        {/* ===== S1 · HERO ===== */}
        <div className="pp-hero" style={{ position: 'relative', padding: '72px 72px 84px', overflow: 'hidden',
          display: 'grid', gridTemplateColumns: '1.02fr 0.98fr', gap: 56, alignItems: 'center' }}>
          <div style={{ position: 'absolute', top: -160, left: -120, width: 640, height: 640, borderRadius: '50%',
            background: `radial-gradient(circle, ${a.accent}26, transparent 68%)`, pointerEvents: 'none' }} />
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: mono, fontSize: 12,
              letterSpacing: 1, color: 'rgba(248,244,238,0.5)', marginBottom: 26 }}>
              <a href="index.html#quienes-somos" style={{ color: 'rgba(248,244,238,0.5)', textDecoration: 'none' }}>BRITXIA Tech</a>
              <span style={{ color: acc }}>/</span>
              <span style={{ color: acc }}>{a.key}</span>
            </div>
            {a.comingSoon && (
              <div style={{ display: 'inline-block', fontFamily: mono, fontSize: 11, fontWeight: 600, letterSpacing: 1.5,
                textTransform: 'uppercase', color: acc, background: acc + '18', border: `1px solid ${acc}40`,
                borderRadius: 100, padding: '6px 16px', marginBottom: 18 }}>{T('product.coming')}</div>
            )}
            {a.key === 'KLEO' ? (
              <h1 style={{ margin:'0 0 10px' }}>
                <img src={window.KLEO_WORDMARK_DARK || 'assets/kleo-wordmark-dark.svg'} alt="KLEO" style={{ height:56, display:'block' }} />
              </h1>
            ) : (
              <h1 style={{ fontFamily: head, fontWeight: 700, fontSize: 72, letterSpacing: -2, margin: '0 0 10px', color: CREAM }}>{a.key}</h1>
            )}
            <div style={{ fontFamily: head, fontWeight: 600, fontSize: 29, letterSpacing: -0.5, lineHeight: 1.25, color: a.key === 'KLEO' ? CREAM : acc, margin: '0 0 22px' }}>{(pd.estado !== undefined ? pd.estado : a.estado) || (pd.lema !== undefined ? pd.lema : a.lema)}</div>
            <p style={{ fontSize: 18.5, lineHeight: 1.6, color: 'rgba(248,244,238,0.74)', maxWidth: 480, margin: '0 0 22px' }}>{(pd.cardBody !== undefined ? pd.cardBody : a.cardBody) || (pd.desc !== undefined ? pd.desc : a.desc)}</p>
            <PlatformBadges platforms={a.platforms} />
            {a.key === 'KLEO' && (
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, fontFamily: head, fontWeight: 600, fontSize: 18, color: acc, margin: '0 0 36px' }}>
                <img src={window.KLEO_LOGO || 'assets/kleo-logo.svg'} alt="" style={{ height: 26, width: 26, borderRadius: 6, display: 'block', flexShrink: 0 }} />
                <span>{T('kleo.demo_line', '“Ey KLEO, agenda esto.” — así de fácil.')}</span>
              </div>
            )}
            <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
              <a href="#como" className="bx-btn-primary" style={{ textDecoration: 'none', fontFamily: body, fontSize: 15, fontWeight: 600, color: NAVY,
                background: ORANGE, borderRadius: 100, padding: '15px 30px' }}>{T('product.hero_btn1')}</a>
              <a href="#funciones" className="bx-btn-ghost" style={{ textDecoration: 'none', fontFamily: body, fontSize: 15, fontWeight: 600, color: CREAM,
                border: '1.5px solid rgba(248,244,238,0.28)', borderRadius: 100, padding: '15px 28px' }}>{T('product.hero_btn2')}</a>
            </div>
          </div>
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
            <div style={{ position: 'relative' }} className={`bx-dev-float ${['BoXtore','ZUBEHÖRE'].includes(a.key)?'bx-laptop-mk':'bx-phone-mk'}`}>
              {a.key === 'KLEO' ? <window.KleoDevice /> : (Mock ? <Mock accent={a.accent} /> : null)}
            </div>
          </div>
        </div>

        {/* ===== S3 · ¿QUÉ PUEDE HACER? ===== */
        /* id para el enlace desde el hero */}
        <div id="funciones" style={{ height: 0 }} />
        <div style={{ padding: '88px 72px' }} className="pp-section pp-features">
          <SectionHead
            eyebrow={pd.funcEyebrow || T('product.feat_ey')}
            title={pd.funcTitle || (pd.funciones && pd.funciones[0] && pd.funciones[0][0]) || T('product.how_title')}
            sub={pd.funcSub}
            color={acc}
          />
          <div style={{ display: 'grid', gridTemplateColumns: (pd.funciones !== undefined ? pd.funciones : a.funciones).length >= 3 ? 'repeat(3, 1fr)' : 'repeat(2, 1fr)', gap: 22 }} className="pp-feat-grid">
            {(pd.funciones !== undefined ? pd.funciones : a.funciones).map(([grupo, items, extra]) => (
              <div key={grupo} className="bx-card-3d" style={{ background: PANEL, borderRadius: 20, border: '1px solid rgba(248,244,238,0.09)',
                padding: '30px 30px 32px', position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 4, background: a.accent }} />
                <h3 style={{ fontFamily: head, fontWeight: 600, fontSize: 20, color: CREAM, margin: '0 0 12px' }}>{grupo}</h3>
                {extra && extra.intro && (
                  <p style={{ fontFamily: body, fontSize: 14, lineHeight: 1.5, color: 'rgba(248,244,238,0.6)', margin: '0 0 18px' }}>{extra.intro}</p>
                )}
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {items.map((it) => {
                    const isArr = Array.isArray(it);
                    const title = isArr ? it[0] : it;
                    const desc  = isArr ? it[1] : null;
                    return (
                    <div key={title} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                      <span style={{ width: 6, height: 6, borderRadius: '50%', background: acc, marginTop: 8, flexShrink: 0 }} />
                      <span style={{ fontFamily: body, fontSize: 14, lineHeight: 1.45, color: 'rgba(248,244,238,0.85)' }}>
                        <strong style={{ fontWeight: 600, color: CREAM }}>{title}</strong>
                        {desc && <span style={{ color: 'rgba(248,244,238,0.55)', fontWeight: 400 }}> — {desc}</span>}
                      </span>
                    </div>
                  )})}
                </div>
                {extra && extra.cierre && (
                  <p style={{ fontFamily: head, fontSize: 14.5, fontWeight: 600, fontStyle: 'italic', color: acc, margin: '20px 0 0' }}>{extra.cierre}</p>
                )}
              </div>
            ))}
          </div>
          {a.key === 'KLEO' && (
            <div style={{ textAlign: 'center', marginTop: 48 }}>
              <p style={{ fontFamily: head, fontWeight: 600, fontSize: 20, color: CREAM, margin: '0 0 20px' }}>{T('kleo.dl_note', 'Deja la saturación mental. Descarga KLEO.')}</p>
              <a href="#pp-dl-anchor" className="bx-btn-primary" style={{ textDecoration: 'none', fontFamily: body, fontSize: 15, fontWeight: 600,
                color: NAVY, background: ORANGE, borderRadius: 100, padding: '15px 32px', display: 'inline-block' }}>{T('kleo.dl_btn', 'Descarga KLEO')}</a>
            </div>
          )}
        </div>

        {/* ===== S4 · ¿CÓMO FUNCIONA? ===== */}
        <div id="como" className="pp-steps" style={{ padding: '88px 72px', background: PANEL2, borderTop: '1px solid rgba(248,244,238,0.1)', borderBottom: '1px solid rgba(248,244,238,0.1)' }}>
          <SectionHead eyebrow={T('product.how_ey')} title={T('product.how_title')} color={acc} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }} className="pp-steps-grid">
            {(pd.flujo !== undefined ? pd.flujo : a.flujo).map(([t, d], i) => (
              <div key={t} className="bx-card-3d" style={{ background: PANEL, borderRadius: 20, border: '1px solid rgba(248,244,238,0.09)', padding: '32px 30px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
                  <div style={{ width: 46, height: 46, borderRadius: 13, background: a.accent, color: '#fff',
                    fontFamily: head, fontWeight: 700, fontSize: 20, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{i + 1}</div>
                  <span style={{ flex: 1, height: 1, background: 'rgba(248,244,238,0.12)' }} />
                </div>
                <h3 style={{ fontFamily: head, fontWeight: 600, fontSize: 21, color: CREAM, margin: '0 0 10px' }}>{t}</h3>
                <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'rgba(248,244,238,0.72)', margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>

        {a.key === 'KLEO' && (
          <div id="kleo-video" style={{
            background: NAVY,
            padding: '0 64px 80px',
          }}>
            <div style={{
              maxWidth: 780,
              margin: '0 auto',
              borderRadius: 16,
              overflow: 'hidden',
              border: '1px solid rgba(248,244,238,.08)',
              background: 'rgba(255,255,255,.03)',
              aspectRatio: '16/9',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 16,
            }}>
              <div style={{
                width: 64, height: 64, borderRadius: '50%',
                background: 'rgba(123,92,191,.2)',
                border: '1px solid rgba(123,92,191,.4)',
                display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <polygon points="9,7 19,12 9,17" fill="#7B5CBF"/>
                </svg>
              </div>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: body, fontSize: 15, fontWeight: 600, color: 'rgba(248,244,238,.7)', marginBottom: 6 }}>
                  {T('kleo.video_title')}
                </div>
                <div style={{ fontFamily: body, fontSize: 13, color: 'rgba(248,244,238,.35)' }}>
                  {T('kleo.video_sub')}
                </div>
              </div>
            </div>
          </div>
        )}

        {/* ===== DESCARGA ===== */}
        <div id="pp-dl-anchor" className="pp-dl" style={{ padding: '72px 72px', background: PANEL, textAlign: 'center', borderTop: '1px solid rgba(248,244,238,0.08)' }}>
          <h3 style={{ fontFamily: head, fontWeight: 700, fontSize: 28, letterSpacing: -0.5, color: '#fff', marginBottom: 10 }}>{T('product.dl_title')} {a.key}</h3>
          <p style={{ fontFamily: body, fontSize: 15, color: 'rgba(248,244,238,.55)', marginBottom: 40, fontStyle: 'italic' }}>{T('product.coming')}</p>
          <div className="pp-dl-btns" style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 16 }}>
            {/* App Store */}
            <button disabled style={{ display:'flex', alignItems:'center', gap:12, background:'#000', color:'#fff',
              border:'1.5px solid rgba(255,255,255,.25)', borderRadius:14, padding:'13px 26px',
              opacity:.45, cursor:'not-allowed', fontFamily:body }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
              <div style={{ textAlign:'left' }}>
                <div style={{ fontSize:9, opacity:.7, lineHeight:1 }}>{T('product.coming')}</div>
                <div style={{ fontSize:15, fontWeight:600, lineHeight:1.3 }}>{T('product.appstore')}</div>
              </div>
            </button>
            {/* Google Play */}
            <button disabled style={{ display:'flex', alignItems:'center', gap:12, background:'#000', color:'#fff',
              border:'1.5px solid rgba(255,255,255,.25)', borderRadius:14, padding:'13px 26px',
              opacity:.45, cursor:'not-allowed', fontFamily:body }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 20.5v-17c0-.83 1-.95 1.4-.43l14 8.5a.5.5 0 0 1 0 .86l-14 8.5C4 21.45 3 21.33 3 20.5z"/></svg>
              <div style={{ textAlign:'left' }}>
                <div style={{ fontSize:9, opacity:.7, lineHeight:1 }}>{T('product.coming')}</div>
                <div style={{ fontSize:15, fontWeight:600, lineHeight:1.3 }}>{T('product.play')}</div>
              </div>
            </button>
          </div>
        </div>

        {/* ===== CIERRE DE PRODUCTO ===== */}
        <div className="pp-close" style={{ padding: '60px 72px', background: PANEL2, borderTop: '1px solid rgba(248,244,238,0.1)', textAlign: 'center' }}>
          <div style={{ fontFamily: head, fontWeight: 500, fontSize: 18, color: 'rgba(248,244,238,0.7)', fontStyle: 'italic' }}>
            {(pd.pie !== undefined ? pd.pie : a.pie) || ''}
          </div>
        </div>

        <Footer />
      </div>
    );
  }

  window.ProductPage = ProductPage;
})();