// PodcastPage.jsx
const PodcastPage = ({ palette, t }) => {
  const P = palette;

  return (
    <div style={{ background: P.bg, color: P.text, minHeight: "100vh", paddingTop: 80 }}>
      <section style={{
        position: 'relative',
        padding: '96px 40px',
        textAlign: 'center',
        minHeight: 'calc(100vh - 80px)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundImage: "url('/assets/podcast-bg.webp')",
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
      }}>
        {/* overlay semitransparente */}
        <div style={{ position:'absolute', inset:0, background:'rgba(0,0,0,0.55)' }} />
        {/* contenido con z-index para quedar encima del overlay */}
        <div style={{ maxWidth: 620, margin: '0 auto', position:'relative', zIndex:1 }}>
          <p style={{ fontFamily: "'Lato', sans-serif", letterSpacing: '0.2em', fontSize: 11, color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', marginBottom: 12 }}>
            {t('Escuchar & Ver', 'Listen & Watch')}
          </p>
          <h1 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(2rem, 5vw, 3.5rem)', color: '#fff', marginBottom: 16 }}>
            Podcasts
          </h1>
          <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 16, color: 'rgba(255,255,255,0.85)', lineHeight: 1.8, maxWidth: 520, margin: '0 auto 32px' }}>
            {t('Encuentra todos los episodios de Ducci\'s con Cuento en el siguiente link.', 'Find all Ducci\'s con Cuento episodes at the following link.')}
          </p>
          <a href='https://duccisconcuento.taplink.bio' target='_blank' rel='noreferrer' style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            background: '#fff', color: '#1A1A1A', border: 'none',
            padding: '14px 28px', fontFamily: "'Lato', sans-serif",
            fontWeight: 700, fontSize: 13, letterSpacing: '0.1em',
            textTransform: 'uppercase', cursor: 'pointer', textDecoration: 'none',
          }}>
            <span>🌐</span>
            LinkTree — Todos los episodios
          </a>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { PodcastPage });