// ui_kits/website/PodcastPage.jsx
//
// Dedicated podcast page for Top Natural Tips.
// Reached via the "Podcasts" nav link. Composes a hero with the real
// podcast art, a featured Spotify embed for the latest episode, an
// episode list (with search + topic filter), and an "Listen everywhere"
// platforms strip.
//
// Episode data is real — pulled from the live Apple Podcasts feed of
// `id1830300712` and trimmed to the most relevant fields. Append more
// items to PODCAST_EPISODES to extend the list.

const SHOW = {
  spotifyId: '6RQBHMo4fI9xEveJQCUhGm',
  spotifyUrl: 'https://open.spotify.com/show/6RQBHMo4fI9xEveJQCUhGm',
  appleUrl:   'https://podcasts.apple.com/us/podcast/top-natural-tips/id1830300712',
  rssUrl:     'https://anchor.fm/s/eec6fb08/podcast/rss',
  youtubeUrl: 'https://www.youtube.com/@top_naturaltips',
  totalEpisodes: 85,
  startedYear: 2025,
};

const PODCAST_EPISODES = [
  {
    n: 85,
    title: 'Dormir mal aumenta el hambre… y la ciencia descubrió por qué',
    date: '22h',
    dateLong: '22 mayo 2026',
    minutes: 4,
    topic: 'mind',
    appleId: '1000768981057',
    excerpt: 'Dormir poco no solo afecta la energía. También cambia las hormonas del hambre (grelina y leptina), el estado de ánimo y cómo el cerebro toma decisiones. Qué hacer al día siguiente.',
  },
  {
    n: 84,
    title: 'Tus huesos a los 30: lo que nadie te dice',
    date: '2d',
    dateLong: '20 mayo 2026',
    minutes: 5,
    topic: 'body',
    appleId: '1000768639831',
    excerpt: 'La densidad ósea puede empezar a perderse mucho antes de la menopausia — y casi siempre sin síntomas. Por qué la fuerza y la proteína importan tanto después de los 30.',
  },
  {
    n: 83,
    title: 'El agotamiento de vivir buscando validación',
    date: '14 mayo',
    dateLong: '14 mayo 2026',
    minutes: 4,
    topic: 'mind',
    appleId: '1000767842599',
    excerpt: 'El "modo demostración" mantiene al sistema nervioso en alerta constante. Cómo la psicología explica el agotamiento de quien vive para la mirada ajena — y por dónde empezar a soltarlo.',
  },
  {
    n: 82,
    title: 'Metacognición: la habilidad mental que puede cambiar cómo vives',
    date: '12 mayo',
    dateLong: '12 mayo 2026',
    minutes: 5,
    topic: 'mind',
    appleId: '1000767480756',
    excerpt: 'No es saber más — es entender cómo funciona tu propia mente. Cómo se entrena, qué dice la neurociencia, y por qué pensar sobre cómo pensamos cambia cómo vivimos.',
  },
  {
    n: 81,
    title: 'Frambuesas: pequeñas pero muy poderosas',
    date: '7 mayo',
    dateLong: '7 mayo 2026',
    minutes: 3,
    topic: 'nutrition',
    appleId: '1000766682228',
    excerpt: 'Cerca de 8 g de fibra por taza, antocianinas para la inflamación y un índice glucémico bajo. Por qué esta fruta merece sitio fijo en el carrito esta primavera.',
  },
  {
    n: 80,
    title: 'El número que puede salvarte del cáncer de colon',
    date: '5 mayo',
    dateLong: '5 mayo 2026',
    minutes: 3,
    topic: 'body',
    appleId: '1000766339626',
    excerpt: 'Más fibra, menos riesgo. Lo que el World Cancer Research Fund y el British Medical Journal dicen sobre uno de los cánceres más prevenibles que existen — y qué puedes hacer hoy.',
  },
  {
    n: 79,
    title: 'Tu cerebro bajo estrés… y cómo empezar a recuperarlo',
    date: '30 abr',
    dateLong: '30 abril 2026',
    minutes: 3,
    topic: 'mind',
    appleId: '1000765010445',
    excerpt: 'BDNF, neuroplasticidad y el hipocampo. Un estudio en PNAS encontró que caminar regularmente aumenta el volumen de la zona del cerebro que regula memoria y emoción.',
  },
  {
    n: 78,
    title: 'Ser mamá también es guardar cosas… y nadie lo dice',
    date: '27 abr',
    dateLong: '27 abril 2026',
    minutes: 5,
    topic: 'mind',
    appleId: '1000763920463',
    excerpt: 'Sostener en silencio. Las madres regulan lo que sienten para proteger a sus hijos — pero ese esfuerzo también necesita un espacio para salir. Por qué cuidarte no es egoísmo.',
  },
  {
    n: 77,
    title: 'Magnesio: el mineral que casi todas tenemos bajo',
    date: '23 abr',
    dateLong: '23 abril 2026',
    minutes: 4,
    topic: 'nutrition',
    appleId: '1000763441100',
    excerpt: 'Citrato, glicinato, malato — qué forma sirve para qué. Por qué el 50% de las adultas en EE. UU. no llega a la dosis diaria, y cómo notarlo en el sueño y los calambres.',
  },
  {
    n: 76,
    title: 'Caminar después de comer: el hábito de 10 minutos',
    date: '19 abr',
    dateLong: '19 abril 2026',
    minutes: 3,
    topic: 'body',
    appleId: '1000762915443',
    excerpt: 'Una meta-revisión en Sports Medicine encontró que 10 min de caminata posprandial bajan los picos de glucosa entre un 12 y un 22%. Por qué este micro-hábito le gana al gimnasio.',
  },
  {
    n: 75,
    title: 'Por qué tu piel envejece más en otoño que en verano',
    date: '14 abr',
    dateLong: '14 abril 2026',
    minutes: 4,
    topic: 'body',
    appleId: '1000762290117',
    excerpt: 'No es el frío — es la humedad. Cómo cambia la barrera cutánea cuando baja la humedad ambiental, y por qué los humectantes ocluyentes pesan más que cualquier sérum esta temporada.',
  },
  {
    n: 74,
    title: 'La regla 80/20 con la comida (sin culpa)',
    date: '10 abr',
    dateLong: '10 abril 2026',
    minutes: 5,
    topic: 'nutrition',
    appleId: '1000761724508',
    excerpt: 'Comer "perfecto" lunes a viernes y descontrol los fines de semana no es 80/20 — es 50/50. Cómo se ve en realidad la práctica que sí sostiene resultados a largo plazo.',
  },
];

// Topic palette — mapped to the Salud / Belleza / Nutrición category colors
const TOPIC_META = {
  mind:      { color: '#B19CD9', label: { es: 'Mente',     en: 'Mind' } },
  body:      { color: '#6FA98C', label: { es: 'Cuerpo',    en: 'Body' } },
  nutrition: { color: '#E8B458', label: { es: 'Nutrición', en: 'Nutrition' } },
};

// ============================================================
// Styles
// ============================================================

const podPageStyles = {
  // ---- Hero ----
  hero: {
    position: 'relative',
    background: 'var(--brand-leaf)',
    color: '#fff',
    overflow: 'hidden',
    padding: '64px 0 64px',
  },
  heroInner: {
    maxWidth: 1200, margin: '0 auto', padding: '0 32px',
    display: 'grid', gridTemplateColumns: '440px 1fr', gap: 72,
    alignItems: 'center', position: 'relative', zIndex: 2,
  },
  heroDecor1: {
    position: 'absolute',
    right: -200, top: -180,
    width: 620, height: 620, borderRadius: '50%',
    background: 'radial-gradient(circle, rgba(143,207,174,0.22), transparent 60%)',
    pointerEvents: 'none',
  },
  heroDecor2: {
    position: 'absolute',
    left: -160, bottom: -200,
    width: 480, height: 480, borderRadius: '50%',
    background: 'radial-gradient(circle, rgba(194,106,74,0.18), transparent 60%)',
    pointerEvents: 'none',
  },
  // Cover art column
  coverWrap: {
    position: 'relative',
    width: 440, height: 440,
  },
  coverShadow: {
    position: 'absolute', inset: 0,
    transform: 'translate(18px, 22px) rotate(-2deg)',
    background: 'var(--brand-leaf)',
    borderRadius: 24,
    opacity: 0.55,
  },
  cover: {
    position: 'relative',
    width: '100%', height: '100%',
    borderRadius: 24,
    overflow: 'hidden',
    boxShadow: '0 30px 80px rgba(0,0,0,0.35), 0 2px 0 rgba(255,255,255,0.08) inset',
    border: '1px solid rgba(255,255,255,0.12)',
  },
  coverImg: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' },
  coverBadge: {
    position: 'absolute', top: 16, left: 16,
    background: 'rgba(0,0,0,0.55)',
    color: '#fff',
    fontFamily: 'var(--font-sans)',
    fontSize: 11, fontWeight: 700,
    letterSpacing: '0.18em', textTransform: 'uppercase',
    padding: '6px 12px', borderRadius: 999,
    backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
  },
  coverPlay: {
    position: 'absolute',
    right: 18, bottom: 18,
    width: 68, height: 68, borderRadius: '50%',
    background: 'var(--brand-coral)',
    color: '#fff',
    border: 'none',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    cursor: 'pointer',
    boxShadow: '0 14px 30px rgba(194,106,74,0.45)',
    transition: 'transform 200ms var(--ease-out)',
  },
  // Hero text column
  heroEyebrow: {
    fontFamily: 'var(--font-sans)', fontWeight: 700,
    fontSize: 12, letterSpacing: '0.28em', textTransform: 'uppercase',
    color: 'var(--brand-mint)',
    display: 'flex', alignItems: 'center', gap: 12,
    marginBottom: 22,
  },
  heroEyebrowDot: { width: 6, height: 6, borderRadius: '50%', background: 'var(--brand-coral)', boxShadow: '0 0 0 6px rgba(194,106,74,0.18)' },
  heroKicker: {
    fontFamily: 'var(--font-serif)',
    fontStyle: 'italic',
    fontWeight: 400,
    fontSize: 22, opacity: 0.78,
    margin: '0 0 14px',
  },
  heroTitle: {
    fontFamily: 'var(--font-serif)', fontWeight: 700,
    fontSize: 60, lineHeight: 1.04, letterSpacing: '-0.015em',
    margin: 0,
    color: '#fff',
    textWrap: 'balance',
  },
  heroSub: {
    fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.7,
    margin: '24px 0 0',
    color: 'rgba(255,255,255,0.85)',
    maxWidth: '52ch',
    textWrap: 'pretty',
  },
  heroCtas: { display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' },
  ctaSpotify: {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    background: '#1DB954', color: '#fff',
    padding: '14px 22px', borderRadius: 999,
    border: 'none', cursor: 'pointer',
    fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 700,
    letterSpacing: '0.04em',
    textDecoration: 'none',
    transition: 'transform 160ms var(--ease-out), background 200ms var(--ease-out)',
  },
  ctaApple: {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    background: '#fff', color: '#0f0f0f',
    padding: '14px 22px', borderRadius: 999,
    border: 'none', cursor: 'pointer',
    fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 700,
    letterSpacing: '0.04em',
    textDecoration: 'none',
    transition: 'transform 160ms var(--ease-out)',
  },
  ctaGhost: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    background: 'transparent',
    color: 'rgba(255,255,255,0.9)',
    padding: '14px 18px', borderRadius: 999,
    border: '1.5px solid rgba(255,255,255,0.35)',
    cursor: 'pointer',
    fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600,
    letterSpacing: '0.04em',
  },
  // ---- Hero footer ----
  heroFooter: {
    marginTop: 32,
    display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap',
    paddingTop: 24,
    borderTop: '1px solid rgba(255,255,255,0.14)',
  },
  hostBlock: { display: 'flex', alignItems: 'center', gap: 14 },
  hostAvatar: {
    width: 48, height: 48, borderRadius: '50%',
    background: 'linear-gradient(135deg, var(--brand-mint), var(--brand-leaf))',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: '#fff', fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 20,
    border: '2px solid rgba(255,255,255,0.3)',
  },
  hostLabel: {
    fontFamily: 'var(--font-sans)', fontSize: 11,
    letterSpacing: '0.18em', textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.65)',
  },
  hostName: { fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 18, color: '#fff' },
  statsDivider: { width: 1, height: 36, background: 'rgba(255,255,255,0.18)' },
  stat: { display: 'flex', flexDirection: 'column', gap: 4 },
  statValue: { fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 24, color: '#fff', lineHeight: 1 },
  statLabel: { fontFamily: 'var(--font-sans)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.65)' },

  // ---- Featured / Spotify embed ----
  featuredWrap: {
    background: 'var(--brand-cream)',
    padding: '88px 0 56px',
    position: 'relative',
  },
  featuredInner: { maxWidth: 1200, margin: '0 auto', padding: '0 32px' },
  featuredEyebrowRow: {
    display: 'flex', alignItems: 'center', gap: 14,
    marginBottom: 28,
  },
  featuredEyebrow: {
    fontFamily: 'var(--font-sans)', fontWeight: 700,
    fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase',
    color: 'var(--brand-leaf-deep)',
  },
  featuredRule: { flex: 1, height: 1, background: 'var(--color-divider)' },
  featuredCard: {
    background: '#fff',
    borderRadius: 24,
    boxShadow: '0 18px 40px rgba(31,79,64,0.10)',
    overflow: 'hidden',
    display: 'grid', gridTemplateColumns: '1fr 360px',
    border: '1px solid var(--color-divider)',
  },
  featuredEmbed: { position: 'relative', minHeight: 360, background: '#000' },
  featuredEmbedIframe: {
    width: '100%', height: '100%', minHeight: 360,
    border: 'none', display: 'block',
  },
  featuredMeta: { padding: '32px 36px', display: 'flex', flexDirection: 'column', justifyContent: 'center' },
  featuredEpNum: {
    fontFamily: 'var(--font-mono)',
    fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
    color: 'var(--color-fg-subtle)',
    marginBottom: 12,
  },
  featuredTitle: {
    fontFamily: 'var(--font-serif)', fontWeight: 700,
    fontSize: 28, lineHeight: 1.18, letterSpacing: '-0.01em',
    color: 'var(--color-fg-strong)', margin: 0,
    textWrap: 'balance',
  },
  featuredExcerpt: {
    fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.65,
    color: 'var(--color-fg)', margin: '14px 0 0',
  },
  featuredFooter: {
    marginTop: 22, paddingTop: 18,
    borderTop: '1px solid var(--color-divider)',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    gap: 12,
  },

  // ---- Episode list ----
  listWrap: { background: 'var(--brand-cream)', padding: '40px 0 96px' },
  listInner: { maxWidth: 1200, margin: '0 auto', padding: '0 32px' },
  listHead: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
    marginBottom: 36, flexWrap: 'wrap', gap: 16,
  },
  listTitle: {
    fontFamily: 'var(--font-serif)', fontWeight: 700,
    fontSize: 40, lineHeight: 1.15, letterSpacing: '-0.01em',
    color: 'var(--color-fg-strong)', margin: 0,
  },
  listCount: {
    fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700,
    letterSpacing: '0.18em', textTransform: 'uppercase',
    color: 'var(--color-fg-muted)',
  },
  controls: {
    display: 'grid', gridTemplateColumns: '320px 1fr',
    gap: 24, alignItems: 'center',
    marginBottom: 28,
  },
  searchWrap: { position: 'relative' },
  searchInput: {
    width: '100%',
    padding: '14px 14px 14px 44px',
    borderRadius: 999,
    border: '1px solid var(--color-divider)',
    background: '#fff',
    fontFamily: 'var(--font-sans)', fontSize: 14,
    color: 'var(--color-fg-strong)',
    outline: 'none',
  },
  searchIcon: { position: 'absolute', left: 16, top: '50%', transform: 'translateY(-50%)', color: 'var(--color-fg-subtle)' },
  filters: { display: 'flex', gap: 8, justifyContent: 'flex-end', flexWrap: 'wrap' },
  chip: (active) => ({
    fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700,
    letterSpacing: '0.12em', textTransform: 'uppercase',
    padding: '8px 14px', borderRadius: 999,
    border: '1px solid ' + (active ? 'transparent' : 'var(--color-divider)'),
    background: active ? 'var(--brand-leaf-deep)' : '#fff',
    color: active ? '#fff' : 'var(--color-fg-muted)',
    cursor: 'pointer',
    transition: 'all 160ms var(--ease-out)',
  }),

  list: { display: 'flex', flexDirection: 'column', gap: 0 },
  epRow: (active) => ({
    display: 'grid',
    gridTemplateColumns: '54px 88px 1fr 120px 48px',
    gap: 24, alignItems: 'center',
    padding: '24px 24px',
    borderBottom: '1px solid var(--color-divider)',
    background: active ? '#fff' : 'transparent',
    borderRadius: active ? 14 : 0,
    boxShadow: active ? '0 8px 24px rgba(31,79,64,0.08)' : 'none',
    transition: 'background 200ms var(--ease-out), box-shadow 200ms var(--ease-out)',
    cursor: 'pointer',
  }),
  epNum: {
    fontFamily: 'var(--font-mono)',
    fontWeight: 500,
    fontSize: 14, color: 'var(--color-fg-subtle)',
    letterSpacing: '0.02em',
    fontVariantNumeric: 'tabular-nums',
  },
  epPlayBtn: (playing) => ({
    width: 48, height: 48, borderRadius: '50%',
    background: playing ? 'var(--brand-coral)' : '#fff',
    color: playing ? '#fff' : 'var(--brand-leaf-deep)',
    border: '1.5px solid ' + (playing ? 'var(--brand-coral)' : 'var(--color-border)'),
    cursor: 'pointer',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    transition: 'all 160ms var(--ease-out)',
    boxShadow: playing ? '0 8px 18px rgba(194,106,74,0.30)' : '0 1px 2px rgba(31,79,64,0.06)',
    flexShrink: 0,
  }),
  epBody: { minWidth: 0 },
  epTopRow: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 },
  epTopic: (color) => ({
    fontFamily: 'var(--font-sans)', fontWeight: 700,
    fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
    color: '#fff', background: color,
    padding: '3px 9px', borderRadius: 999,
  }),
  epDate: {
    fontFamily: 'var(--font-sans)', fontSize: 12,
    letterSpacing: '0.06em', color: 'var(--color-fg-subtle)',
  },
  epTitle: {
    fontFamily: 'var(--font-serif)', fontWeight: 600,
    fontSize: 20, lineHeight: 1.3, letterSpacing: '-0.005em',
    color: 'var(--color-fg-strong)', margin: '0 0 4px',
  },
  epExcerpt: {
    fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.55,
    color: 'var(--color-fg-muted)', margin: 0,
    display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden',
  },
  epDuration: {
    fontFamily: 'var(--font-mono)',
    fontVariantNumeric: 'tabular-nums',
    fontSize: 13, fontWeight: 500,
    color: 'var(--color-fg-muted)',
    textAlign: 'right',
  },
  epMore: {
    width: 32, height: 32, borderRadius: '50%',
    background: 'transparent', border: 'none',
    color: 'var(--color-fg-subtle)',
    cursor: 'pointer',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  },

  // ---- About show ----
  aboutWrap: { background: '#fff', padding: '96px 0' },
  aboutInner: {
    maxWidth: 1200, margin: '0 auto', padding: '0 32px',
    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
    alignItems: 'flex-start',
  },
  aboutTitle: {
    fontFamily: 'var(--font-serif)', fontWeight: 700,
    fontSize: 44, lineHeight: 1.1, letterSpacing: '-0.015em',
    color: 'var(--color-fg-strong)', margin: '12px 0 22px',
    textWrap: 'balance',
  },
  aboutBody: {
    fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.7,
    color: 'var(--color-fg)', margin: 0,
    textWrap: 'pretty',
  },
  bullets: { display: 'flex', flexDirection: 'column', gap: 28 },
  bullet: {
    display: 'grid', gridTemplateColumns: '56px 1fr', gap: 20,
    alignItems: 'flex-start',
    padding: '24px 0',
    borderTop: '1px solid var(--color-divider)',
  },
  bulletIcon: {
    width: 56, height: 56, borderRadius: 14,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  },
  bulletTitle: { fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 22, margin: '4px 0 6px', color: 'var(--color-fg-strong)' },
  bulletBody: { fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.65, color: 'var(--color-fg-muted)', margin: 0 },

  // ---- Platforms strip ----
  platformsWrap: {
    background: 'var(--brand-leaf-deep)', color: '#fff',
    padding: '64px 0 80px',
    position: 'relative', overflow: 'hidden',
  },
  platformsInner: { maxWidth: 1200, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 2 },
  platformsHead: { textAlign: 'center', marginBottom: 40 },
  platformsEyebrow: {
    fontFamily: 'var(--font-sans)', fontWeight: 700,
    fontSize: 12, letterSpacing: '0.28em', textTransform: 'uppercase',
    color: 'var(--brand-mint)', marginBottom: 14,
  },
  platformsTitle: {
    fontFamily: 'var(--font-serif)', fontWeight: 700,
    fontSize: 36, lineHeight: 1.15, letterSpacing: '-0.01em',
    color: '#fff', margin: 0,
  },
  platformsGrid: {
    display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14,
  },
  platformCard: {
    background: 'rgba(255,255,255,0.06)',
    border: '1px solid rgba(255,255,255,0.12)',
    borderRadius: 14,
    padding: '24px 16px',
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
    textDecoration: 'none', color: '#fff',
    fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600,
    letterSpacing: '0.04em',
    transition: 'background 200ms var(--ease-out), transform 200ms var(--ease-out)',
    cursor: 'pointer',
  },
};

// ============================================================
// Platform SVG glyphs (filled, single-color, brand-accurate proportions)
// ============================================================

const SpotifyGlyph = ({ size = 24, color = '#1DB954' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
    <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.6 14.4a.62.62 0 0 1-.86.2c-2.36-1.44-5.32-1.77-8.81-.97a.62.62 0 1 1-.28-1.22c3.82-.87 7.1-.5 9.74 1.12.3.18.4.58.21.87zm1.23-2.74a.78.78 0 0 1-1.07.25c-2.7-1.66-6.82-2.14-10.02-1.17a.78.78 0 1 1-.46-1.5c3.65-1.1 8.18-.57 11.3 1.35.37.23.49.71.25 1.07zm.11-2.85c-3.24-1.92-8.59-2.1-11.68-1.15a.94.94 0 0 1-.55-1.8c3.55-1.08 9.46-.87 13.2 1.35.45.27.6.85.33 1.3a.94.94 0 0 1-1.3.3z"/>
  </svg>
);
const AppleGlyph = ({ size = 24, color = '#9933CC' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
    <path d="M12 2a10 10 0 0 0-2 19.78v-3.5a6.5 6.5 0 1 1 4 0v3.5A10 10 0 0 0 12 2zm0 6.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zm-1.7 9.78a1.7 1.7 0 1 0 3.4 0v3.2a1.7 1.7 0 1 1-3.4 0v-3.2z"/>
  </svg>
);
const YouTubeGlyph = ({ size = 24, color = '#FF0033' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
    <path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-2C18.88 4 12 4 12 4s-6.88 0-8.59.42a2.78 2.78 0 0 0-1.95 2A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 2C5.12 20 12 20 12 20s6.88 0 8.59-.42a2.78 2.78 0 0 0 1.95-2A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58zM9.75 15.5v-7l6 3.5z"/>
  </svg>
);
const AmazonGlyph = ({ size = 24, color = '#1CD5DB' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
    <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zM7 7.5a1 1 0 0 1 2 0v3.5a1 1 0 0 1-2 0zm10 0a1 1 0 0 1 2 0v3.5a1 1 0 0 1-2 0zm-2.5 9c-3.7 1.6-7.5.6-9.4-1.6-.4-.5.2-1.2.7-.8 1.7 1.5 5 2.4 8.2 1.1.7-.3 1.3.8.5 1.3zm1.8 1.3c-.2.5-1.2.5-1.8.3-.6-.2-.5-.7-.3-.9.7-.5 1.8-.5 2-.3.3.2.3.7.1.9z"/>
  </svg>
);
const GoogleGlyph = ({ size = 24, color = '#4285F4' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
    <path d="M12 2a10 10 0 0 0 0 20 10 10 0 0 0 0-20zm0 4.5a1.5 1.5 0 1 1-1.5 1.5A1.5 1.5 0 0 1 12 6.5zm0 4a1.5 1.5 0 1 1-1.5 1.5A1.5 1.5 0 0 1 12 10.5zm-4 0A1.5 1.5 0 1 1 6.5 12 1.5 1.5 0 0 1 8 10.5zm0 4A1.5 1.5 0 1 1 6.5 16 1.5 1.5 0 0 1 8 14.5zm4 0a1.5 1.5 0 1 1-1.5 1.5 1.5 1.5 0 0 1 1.5-1.5zm4-4a1.5 1.5 0 1 1-1.5 1.5 1.5 1.5 0 0 1 1.5-1.5z"/>
  </svg>
);
const RssGlyph = ({ size = 24, color = '#F88B00' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
    <path d="M6.5 17a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM4 11a11 11 0 0 1 11 11h-3a8 8 0 0 0-8-8zm0-7a18 18 0 0 1 18 18h-3A15 15 0 0 0 4 7z"/>
  </svg>
);
const DotsIcon = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <circle cx="5" cy="12" r="1.7"/><circle cx="12" cy="12" r="1.7"/><circle cx="19" cy="12" r="1.7"/>
  </svg>
);

// ============================================================
// PodcastPage
// ============================================================

function PodcastPage() {
  const tr = useT();
  const lang = React.useContext(LangContext);
  const player = usePodcastPlayer();
  const [filter, setFilter]   = React.useState('all');
  const [search, setSearch]   = React.useState('');
  const [copied, setCopied]   = React.useState(false);
  const [episodes, setEpisodes] = React.useState(window.BUZZSPROUT_EPISODES || PODCAST_EPISODES);
  const PAGE_SIZE = 8;
  const [visibleCount, setVisibleCount] = React.useState(PAGE_SIZE);

  // Reset pagination whenever the user changes search/filter
  React.useEffect(() => { setVisibleCount(PAGE_SIZE); }, [search, filter]);

  // Swap to live Buzzsprout data when the feed lands
  React.useEffect(() => {
    if (window.BUZZSPROUT_EPISODES && window.BUZZSPROUT_EPISODES.length) {
      setEpisodes(window.BUZZSPROUT_EPISODES);
    }
    const onUpdate = (e) => setEpisodes(e.detail);
    window.addEventListener('buzzsprout-feed-updated', onUpdate);
    return () => window.removeEventListener('buzzsprout-feed-updated', onUpdate);
  }, []);

  const [featured, ...rest] = episodes;

  const filtered = rest.filter(ep => {
    if (filter !== 'all' && ep.topic !== filter) return false;
    if (search.trim()) {
      const q = search.trim().toLowerCase();
      return ep.title.toLowerCase().includes(q) || (ep.excerpt || '').toLowerCase().includes(q);
    }
    return true;
  });

  const handleCopyRss = () => {
    try {
      navigator.clipboard.writeText(SHOW.rssUrl);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    } catch (e) { /* ignore */ }
  };

  const handlePlayEpisode = (ep) => {
    if (ep && ep.audioUrl) {
      player.toggle(ep);
    } else {
      // No audio URL yet (placeholder data). Open Apple Podcasts as fallback.
      if (ep && ep.appleId) window.open(`${SHOW.appleUrl}?i=${ep.appleId}`, '_blank', 'noopener');
      else window.open(SHOW.appleUrl, '_blank', 'noopener');
    }
  };

  return (
    <div>
      {/* ===== HERO ===== */}
      <section style={podPageStyles.hero}>
        <div style={podPageStyles.heroDecor1}></div>
        <div style={podPageStyles.heroDecor2}></div>

        <div style={podPageStyles.heroInner}>
          {/* Cover art */}
          <div style={podPageStyles.coverWrap}>
            <div style={podPageStyles.coverShadow}></div>
            <div style={podPageStyles.cover}>
              <img
                src="podcast-cover.jpg"
                alt="Top Natural Tips podcast cover art"
                style={podPageStyles.coverImg}
              />
              <span style={podPageStyles.coverBadge}>
                <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: '#FF4D4D', marginRight: 8, verticalAlign: 'middle' }}></span>
                {lang === 'es' ? 'EN VIVO ESTA SEMANA' : 'NEW THIS WEEK'}
              </span>
              <button
                style={podPageStyles.coverPlay}
                onClick={() => handlePlayEpisode(featured)}
                aria-label={tr('podp.featured.play')}
              >
                {player.isActive(featured) && player.isPlaying ? <PauseIcon size={28}/> : <PlayIcon size={28}/>}
              </button>
            </div>
          </div>

          {/* Text */}
          <div>
            <div style={podPageStyles.heroEyebrow}>
              <span style={podPageStyles.heroEyebrowDot}></span>
              {tr('podp.eyebrow')} · {tr('podp.stat.category')}
            </div>
            <div style={podPageStyles.heroKicker}>{tr('podp.kicker')}</div>
            <h1 style={podPageStyles.heroTitle}>{tr('podp.title')}</h1>
            <p style={podPageStyles.heroSub}>{tr('podp.subtitle')}</p>

            {/* Host + stats */}
            <div style={podPageStyles.heroFooter}>
              <div style={podPageStyles.hostBlock}>
                <div style={podPageStyles.hostAvatar}>P</div>
                <div>
                  <div style={podPageStyles.hostLabel}>{tr('podp.host')}</div>
                  <div style={podPageStyles.hostName}>{tr('podp.hostName')}</div>
                </div>
              </div>
              <div style={podPageStyles.statsDivider}></div>
              <div style={podPageStyles.stat}>
                <div style={podPageStyles.statValue}>{episodes.length || SHOW.totalEpisodes}</div>
                <div style={podPageStyles.statLabel}>{tr('podp.stat.episodes')}</div>
              </div>
              <div style={podPageStyles.statsDivider}></div>
              <div style={podPageStyles.stat}>
                <div style={podPageStyles.statValue}>{tr('podp.stat.language')}</div>
                <div style={podPageStyles.statLabel}>{tr('podp.stat.cadence')}</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== FEATURED EPISODE (native player) ===== */}
      <section style={podPageStyles.featuredWrap}>
        <div style={podPageStyles.featuredInner}>
          <div style={podPageStyles.featuredEyebrowRow}>
            <span style={podPageStyles.featuredEyebrow}>{tr('podp.featured.eyebrow')}</span>
            <span style={podPageStyles.featuredRule}></span>
          </div>

          {featured && (
            <NativeAudioPlayer
              episode={featured}
              fallbackArt="podcast-cover.jpg"
            />
          )}
        </div>
      </section>

      {/* ===== EPISODE LIST ===== */}
      <section style={podPageStyles.listWrap}>
        <div style={podPageStyles.listInner}>
          <div style={podPageStyles.listHead}>
            <h2 style={podPageStyles.listTitle}>{tr('podp.episodes.title')}</h2>
            <span style={podPageStyles.listCount}>
              {SHOW.totalEpisodes} {tr('podp.episodes.count')}
            </span>
          </div>

          <div style={podPageStyles.controls}>
            <div style={podPageStyles.searchWrap}>
              <span style={podPageStyles.searchIcon}><SearchIcon size={18}/></span>
              <input
                type="text"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder={tr('podp.episodes.search.placeholder')}
                style={podPageStyles.searchInput}
              />
            </div>
            <div style={podPageStyles.filters}>
              {[
                { key: 'all',       label: tr('podp.episodes.filter.all') },
                { key: 'mind',      label: tr('podp.episodes.filter.mind') },
                { key: 'body',      label: tr('podp.episodes.filter.body') },
                { key: 'nutrition', label: tr('podp.episodes.filter.nutrition') },
              ].map(f => (
                <button
                  key={f.key}
                  style={podPageStyles.chip(filter === f.key)}
                  onClick={() => setFilter(f.key)}
                >{f.label}</button>
              ))}
            </div>
          </div>

          <div style={podPageStyles.list}>
            {filtered.length === 0 && (
              <div style={{
                padding: 48, textAlign: 'center',
                fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                fontSize: 18, color: 'var(--color-fg-muted)',
                background: '#fff', border: '1px dashed var(--color-divider)',
                borderRadius: 14,
              }}>{tr('podp.episodes.empty')}</div>
            )}

            {filtered.slice(0, visibleCount).map(ep => {
              const isActive = player.isActive(ep);
              const isPlaying = isActive && player.isPlaying;
              const topic = TOPIC_META[ep.topic] || TOPIC_META.mind;
              return (
                <div
                  key={ep.id || ep.n}
                  style={podPageStyles.epRow(isActive)}
                  onClick={() => handlePlayEpisode(ep)}
                >
                  <div style={podPageStyles.epNum}>
                    #{ep.n.toString().padStart(3, '0')}
                  </div>
                  <button
                    style={podPageStyles.epPlayBtn(isPlaying)}
                    onClick={(e) => { e.stopPropagation(); handlePlayEpisode(ep); }}
                    aria-label={tr('podp.episodes.play')}
                  >
                    {isPlaying ? <PauseIcon size={20}/> : <PlayIcon size={20}/>}
                  </button>
                  <div style={podPageStyles.epBody}>
                    <div style={podPageStyles.epTopRow}>
                      <span style={podPageStyles.epTopic(topic.color)}>{topic.label[lang]}</span>
                      <span style={podPageStyles.epDate}>{ep.dateLong}</span>
                    </div>
                    <h3 style={podPageStyles.epTitle}>{ep.title}</h3>
                    <p style={podPageStyles.epExcerpt}>{ep.excerpt}</p>
                  </div>
                  <div style={podPageStyles.epDuration}>{ep.minutes}:00 min</div>
                  <a
                    href={ep.appleId ? `${SHOW.appleUrl}?i=${ep.appleId}` : SHOW.appleUrl}
                    target="_blank" rel="noopener"
                    style={podPageStyles.epMore}
                    onClick={(e) => e.stopPropagation()}
                    aria-label={tr('podp.episodes.appleLink')}
                  >
                    <DotsIcon size={18}/>
                  </a>
                  {isActive && <EpisodeProgressBar episode={ep}/>}
                </div>
              );
            })}
          </div>

          {filtered.length > visibleCount && (
            <div style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
              marginTop: 36,
            }}>
              <div style={{
                fontFamily: 'var(--font-sans)', fontSize: 12,
                letterSpacing: '0.16em', textTransform: 'uppercase',
                color: 'var(--color-fg-subtle)',
              }}>
                {tr('podp.episodes.showing')} {Math.min(visibleCount, filtered.length)} / {filtered.length}
              </div>
              <button
                onClick={() => setVisibleCount(c => c + 8)}
                style={{
                  fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 700,
                  letterSpacing: '0.06em',
                  padding: '14px 28px', borderRadius: 999,
                  background: 'var(--brand-leaf-deep)', color: '#fff',
                  border: 'none', cursor: 'pointer',
                  transition: 'transform 160ms var(--ease-out), background 200ms var(--ease-out)',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--brand-leaf)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--brand-leaf-deep)'; }}
              >
                {tr('podp.episodes.loadMore')}
              </button>
            </div>
          )}
        </div>
      </section>

      {/* ===== ABOUT THE SHOW ===== */}
      <section style={podPageStyles.aboutWrap}>
        <div style={podPageStyles.aboutInner}>
          <div>
            <div className="eyebrow">{tr('podp.about.eyebrow')}</div>
            <h2 style={podPageStyles.aboutTitle}>{tr('podp.about.title')}</h2>
            <p style={podPageStyles.aboutBody}>{tr('podp.about.body')}</p>

            <div style={{ marginTop: 32, display: 'flex', gap: 14, alignItems: 'center' }}>
              <div style={{ ...podPageStyles.hostAvatar, width: 56, height: 56, border: '2px solid var(--brand-mint)', fontSize: 22 }}>P</div>
              <div>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 18, color: 'var(--color-fg-strong)' }}>
                  {tr('podp.hostName')}
                </div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--color-fg-muted)' }}>
                  {tr('podp.hostRole')}
                </div>
              </div>
            </div>
          </div>

          <div style={podPageStyles.bullets}>
            {[
              { i: 0, color: '#B19CD9', wash: '#EFE6FB', title: tr('podp.about.b1.title'), body: tr('podp.about.b1.body'), icon: 'mind' },
              { i: 1, color: '#6FA98C', wash: '#E6F0EA', title: tr('podp.about.b2.title'), body: tr('podp.about.b2.body'), icon: 'body' },
              { i: 2, color: '#E8B458', wash: '#FBF2E0', title: tr('podp.about.b3.title'), body: tr('podp.about.b3.body'), icon: 'spark' },
            ].map(b => (
              <div key={b.i} style={podPageStyles.bullet}>
                <div style={{ ...podPageStyles.bulletIcon, background: b.wash, color: b.color }}>
                  {b.icon === 'mind' && <Icon size={28} stroke={b.color} sw={1.7}><circle cx="12" cy="12" r="3"/><path d="M12 4a4 4 0 0 0-4 4v0M12 4a4 4 0 0 1 4 4M12 20a4 4 0 0 1-4-4M12 20a4 4 0 0 0 4-4M4 12a4 4 0 0 1 4-4M20 12a4 4 0 0 0-4-4M4 12a4 4 0 0 0 4 4M20 12a4 4 0 0 1-4 4"/></Icon>}
                  {b.icon === 'body' && <Icon size={28} stroke={b.color} sw={1.7}><path d="M12 7a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM7 22l1-7 4-3 4 3 1 7M9 11l3 2 3-2"/></Icon>}
                  {b.icon === 'spark' && <Icon size={28} stroke={b.color} sw={1.7}><path d="M12 2v6M12 16v6M2 12h6M16 12h6M5 5l4 4M15 15l4 4M5 19l4-4M15 9l4-4"/></Icon>}
                </div>
                <div>
                  <h3 style={podPageStyles.bulletTitle}>{b.title}</h3>
                  <p style={podPageStyles.bulletBody}>{b.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== PLATFORMS STRIP ===== */}
      <section style={podPageStyles.platformsWrap}>
        <div style={podPageStyles.heroDecor1}></div>
        <div style={podPageStyles.platformsInner}>
          <div style={podPageStyles.platformsHead}>
            <div style={podPageStyles.platformsEyebrow}>{tr('podp.platforms.eyebrow')}</div>
            <h2 style={podPageStyles.platformsTitle}>{tr('podp.platforms.title')}</h2>
          </div>

          <div style={podPageStyles.platformsGrid}>
            <a href={SHOW.spotifyUrl} target="_blank" rel="noopener" style={podPageStyles.platformCard}>
              <SpotifyGlyph size={32}/>
              {tr('podp.platforms.spotify')}
            </a>
            <a href={SHOW.appleUrl} target="_blank" rel="noopener" style={podPageStyles.platformCard}>
              <AppleGlyph size={32} color="#fff"/>
              {tr('podp.platforms.apple')}
            </a>
            <a href="https://podcasts.google.com" target="_blank" rel="noopener" style={podPageStyles.platformCard}>
              <GoogleGlyph size={32}/>
              {tr('podp.platforms.google')}
            </a>
            <a href="https://music.amazon.com" target="_blank" rel="noopener" style={podPageStyles.platformCard}>
              <AmazonGlyph size={32}/>
              {tr('podp.platforms.amazon')}
            </a>
            <a href={SHOW.youtubeUrl} target="_blank" rel="noopener" style={podPageStyles.platformCard}>
              <YouTubeGlyph size={32}/>
              {tr('podp.platforms.yt')}
            </a>
            <a href={SHOW.rssUrl} target="_blank" rel="noopener" style={podPageStyles.platformCard}>
              <RssGlyph size={32}/>
              {tr('podp.platforms.rss')}
            </a>
          </div>

          <div style={{
            marginTop: 56, padding: '36px 40px',
            background: 'rgba(255,255,255,0.06)',
            border: '1px solid rgba(255,255,255,0.12)',
            borderRadius: 20,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
          }}>
            <div>
              <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 26, lineHeight: 1.2, margin: '0 0 6px', color: '#fff' }}>
                {tr('podp.cta.banner.title')}
              </h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.55, margin: 0, color: 'rgba(255,255,255,0.78)' }}>
                {tr('podp.cta.banner.body')}
              </p>
            </div>
            <div style={{ display: 'flex', gap: 12 }}>
              <a href={SHOW.spotifyUrl} target="_blank" rel="noopener" style={podPageStyles.ctaSpotify}>
                <SpotifyGlyph size={18} color="#fff"/>
                {tr('podp.cta.spotify')}
              </a>
              <a href={SHOW.appleUrl} target="_blank" rel="noopener" style={podPageStyles.ctaApple}>
                <AppleGlyph size={18} color="#0f0f0f"/>
                {tr('podp.cta.apple')}
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.PodcastPage = PodcastPage;
window.PODCAST_EPISODES = PODCAST_EPISODES;
window.PODCAST_SHOW = SHOW;