// ui_kits/website/SectionPage.jsx
//
// Editorial section page used for Salud / Belleza / Nutrición / Ejercicio.
// Layout:
//   1. Hero strip — section name + description, tinted with the category color
//   2. Featured story — one large horizontal card
//   3. Library — grid of the remaining posts in that section
//
// Variations live behind Tweaks (`sectionHero` and `sectionFeatured`):
//   - sectionHero:      'minimal' | 'colorful' | 'imagery'
//   - sectionFeatured:  'horizontal' | 'split'

// Per-category palette for hero + accents. Each entry: a darker "strong"
// shade used for type, a "wash" used for the hero background tint, and a
// "soft" used for decorative shapes.
const SECTION_PALETTE = {
  Health:    { strong: '#1F4F40', accent: '#6FA98C', wash: '#E6F0EA', soft: '#C8E0D2' },
  Beauty:    { strong: '#8C5048', accent: '#D9A29B', wash: '#FBEFEC', soft: '#F0D2CB' },
  Nutrition: { strong: '#8A6224', accent: '#E8B458', wash: '#FBF2E0', soft: '#F5DDA8' },
  Exercise:  { strong: '#345A85', accent: '#6E97C2', wash: '#E5EEF7', soft: '#BFD3E8' },
};

const sectionStyles = {
  // ---- Hero variants ---------------------------------------------------
  hero: {
    position: 'relative',
    padding: '64px 0 56px',
    borderBottom: '1px solid var(--color-divider)',
    overflow: 'hidden',
  },
  heroInner: {
    maxWidth: 1200, margin: '0 auto', padding: '0 32px',
    position: 'relative', zIndex: 2,
  },
  breadcrumb: {
    display: 'flex', alignItems: 'center', gap: 8,
    fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
    letterSpacing: '0.14em', textTransform: 'uppercase',
    color: 'var(--color-fg-muted)',
    marginBottom: 22,
  },
  breadcrumbLink: {
    color: 'inherit', textDecoration: 'none', cursor: 'pointer',
    transition: 'color 200ms var(--ease-out)',
  },
  breadcrumbSep: { opacity: 0.4 },
  eyebrow: {
    fontFamily: 'var(--font-sans)', fontWeight: 700,
    fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase',
    marginBottom: 12,
  },
  title: {
    fontFamily: 'var(--font-serif)', fontWeight: 700,
    fontSize: 72, lineHeight: 1, letterSpacing: '-0.02em',
    margin: 0,
    textWrap: 'balance',
  },
  desc: {
    fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
    fontSize: 22, lineHeight: 1.45,
    maxWidth: '52ch', marginTop: 22,
    color: 'var(--color-fg)',
    textWrap: 'pretty',
  },
  // Soft decorative circle for colorful hero
  decorCircle: {
    position: 'absolute',
    right: -120, top: '50%', transform: 'translateY(-50%)',
    width: 420, height: 420, borderRadius: '50%',
    pointerEvents: 'none',
    zIndex: 1,
  },
  // Leaf mark watermark — positioned to bleed off the right edge of the hero
  watermark: {
    position: 'absolute',
    right: -40, top: '50%', transform: 'translateY(-50%)',
    pointerEvents: 'none',
    zIndex: 1,
  },

  // ---- Featured story --------------------------------------------------
  featuredWrap: {
    background: '#fff',
    padding: '72px 0 24px',
  },
  featuredInner: {
    maxWidth: 1200, margin: '0 auto', padding: '0 32px',
  },
  featuredEyebrowRow: {
    display: 'flex', alignItems: 'center', gap: 14,
    marginBottom: 24,
  },
  featuredEyebrow: {
    fontFamily: 'var(--font-sans)', fontWeight: 700,
    fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase',
    color: 'var(--color-fg-muted)',
  },
  featuredRule: { flex: 1, height: 1, background: 'var(--color-divider)' },

  // Split-screen variant of the featured story
  splitGrid: {
    display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 32,
    alignItems: 'center',
  },
  splitArt: {
    gridColumn: '1 / span 7',
    aspectRatio: '16 / 10', borderRadius: 16, overflow: 'hidden',
    position: 'relative',
  },
  splitBody: { gridColumn: '8 / span 5' },
  splitTitle: {
    fontFamily: 'var(--font-serif)', fontWeight: 700,
    fontSize: 40, lineHeight: 1.1, letterSpacing: '-0.01em',
    margin: '12px 0 14px', color: 'var(--color-fg-strong)',
    textWrap: 'balance',
  },
  splitExcerpt: {
    fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.6,
    color: 'var(--color-fg)', margin: 0,
    textWrap: 'pretty',
  },
  splitMeta: {
    fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700,
    letterSpacing: '0.14em', textTransform: 'uppercase',
    color: 'var(--color-fg-muted)',
  },
  splitCta: { marginTop: 22 },

  // ---- Library --------------------------------------------------------
  library: { background: 'var(--brand-cream)', padding: '72px 0 96px' },
  libraryInner: { maxWidth: 1200, margin: '0 auto', padding: '0 32px' },
  libraryHead: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
    marginBottom: 36,
  },
  libraryTitle: { fontFamily: 'var(--font-serif)', fontSize: 36, fontWeight: 700, margin: 0, color: 'var(--color-fg-strong)' },
  libraryCount: {
    fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700,
    letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--color-fg-muted)',
  },
  grid: {
    display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28,
  },
  empty: {
    padding: '48px', textAlign: 'center',
    fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20,
    color: 'var(--color-fg-muted)',
    background: '#fff', border: '1px dashed var(--color-divider)',
    borderRadius: 12,
  },
};

function SectionHero({ section, palette, variant }) {
  const tr = useT();
  const titleKey  = 'cat.' + section;
  const descKey   = 'section.' + section + '.desc';

  if (variant === 'colorful') {
    // Tighter brand leaves: a darker accent circle on the right, with the
    // actual logo-leaf PNG masked + tinted as a watermark inside it.
    const leafMask = {
      WebkitMaskImage: "url('leaf-mark.png')",
      maskImage:       "url('leaf-mark.png')",
      WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
      WebkitMaskPosition: 'center',  maskPosition: 'center',
      WebkitMaskSize: 'contain',     maskSize: 'contain',
    };
    return (
      <section style={{ ...sectionStyles.hero, background: palette.wash }}>
        <div style={{
          position: 'absolute',
          right: -160, top: '50%', transform: 'translateY(-50%)',
          width: 520, height: 520, borderRadius: '50%',
          background: palette.accent,
          pointerEvents: 'none', zIndex: 1,
        }}/>
        {/* Watermark — actual logo leaves, tinted to the section's strong color */}
        <div style={{
          position: 'absolute',
          right: -40, top: '50%', transform: 'translateY(-50%)',
          width: 320, height: 346,
          background: palette.strong,
          opacity: 0.42,
          pointerEvents: 'none', zIndex: 2,
          ...leafMask,
        }}/>
        <div style={sectionStyles.heroInner}>
          <Breadcrumb section={section}/>
          <div style={{ ...sectionStyles.eyebrow, color: palette.strong }}>{tr('section.eyebrow')}</div>
          <h1 style={{ ...sectionStyles.title, color: palette.strong }}>{tr(titleKey)}</h1>
          <p style={{ ...sectionStyles.desc, color: 'var(--color-fg)' }}>{tr(descKey)}</p>
        </div>
      </section>
    );
  }

  if (variant === 'imagery') {
    const leafMask = {
      WebkitMaskImage: "url('leaf-mark.png')",
      maskImage:       "url('leaf-mark.png')",
      WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
      WebkitMaskPosition: 'center',  maskPosition: 'center',
      WebkitMaskSize: 'contain',     maskSize: 'contain',
    };
    return (
      <section style={{
        ...sectionStyles.hero,
        minHeight: 420,
        display: 'flex', alignItems: 'flex-end',
        background: `linear-gradient(135deg, ${palette.accent}, ${palette.strong})`,
        color: '#fff',
      }}>
        <div style={{
          position: 'absolute', inset: 0, opacity: 0.35,
          background: 'radial-gradient(circle at 80% 20%, rgba(255,255,255,0.35), transparent 55%)',
          pointerEvents: 'none',
        }}/>
        <div style={{
          position: 'absolute',
          right: 24, top: '50%', transform: 'translateY(-50%)',
          width: 340, height: 368,
          background: '#ffffff',
          opacity: 0.18,
          pointerEvents: 'none', zIndex: 1,
          ...leafMask,
        }}/>
        <div style={sectionStyles.heroInner}>
          <div style={{ ...sectionStyles.breadcrumb, color: 'rgba(255,255,255,0.85)' }}>
            <Breadcrumb section={section} onDark/>
          </div>
          <div style={{ ...sectionStyles.eyebrow, color: 'rgba(255,255,255,0.9)' }}>{tr('section.eyebrow')}</div>
          <h1 style={{ ...sectionStyles.title, color: '#fff', textShadow: '0 2px 18px rgba(15,15,15,0.25)' }}>{tr(titleKey)}</h1>
          <p style={{ ...sectionStyles.desc, color: 'rgba(255,255,255,0.92)' }}>{tr(descKey)}</p>
        </div>
      </section>
    );
  }

  // Default — 'minimal'
  const leafMask = {
    WebkitMaskImage: "url('leaf-mark.png')",
    maskImage:       "url('leaf-mark.png')",
    WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
    WebkitMaskPosition: 'center',  maskPosition: 'center',
    WebkitMaskSize: 'contain',     maskSize: 'contain',
  };
  return (
    <section style={{ ...sectionStyles.hero, background: '#fff' }}>
      <div style={{
        position: 'absolute', left: 0, top: 0, bottom: 0, width: 4,
        background: palette.accent,
      }}/>
      <div style={{
        position: 'absolute',
        right: 40, top: '50%', transform: 'translateY(-50%)',
        width: 280, height: 304,
        background: palette.accent,
        opacity: 0.14,
        pointerEvents: 'none', zIndex: 1,
        ...leafMask,
      }}/>
      <div style={sectionStyles.heroInner}>
        <Breadcrumb section={section}/>
        <div style={{ ...sectionStyles.eyebrow, color: palette.accent }}>{tr('section.eyebrow')}</div>
        <h1 style={{ ...sectionStyles.title, color: 'var(--color-fg-strong)' }}>{tr(titleKey)}</h1>
        <p style={sectionStyles.desc}>{tr(descKey)}</p>
      </div>
    </section>
  );
}

function Breadcrumb({ section, onDark = false }) {
  const tr = useT();
  const onHome = () => window.dispatchEvent(new CustomEvent('app:navigate', { detail: { view: 'home' } }));
  return (
    <div style={{ ...sectionStyles.breadcrumb, color: onDark ? 'rgba(255,255,255,0.85)' : sectionStyles.breadcrumb.color, marginBottom: 22 }}>
      <a style={sectionStyles.breadcrumbLink} onClick={onHome}>{tr('section.back')}</a>
      <span style={sectionStyles.breadcrumbSep}>/</span>
      <span>{tr('cat.' + section)}</span>
    </div>
  );
}

function FeaturedStory({ post, palette, variant, onOpenPost }) {
  const tr = useT();
  if (!post) return null;

  if (variant === 'split') {
    return (
      <section style={sectionStyles.featuredWrap}>
        <div style={sectionStyles.featuredInner}>
          <div style={sectionStyles.featuredEyebrowRow}>
            <span style={sectionStyles.featuredEyebrow}>{tr('section.featured')}</span>
            <span style={sectionStyles.featuredRule}/>
          </div>
          <div style={sectionStyles.splitGrid}>
            <div style={sectionStyles.splitArt}>
              {post.image
                ? <img src={post.image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
                : <CategoryThumb category={post.category} label={post.categoryLabel}/>}
            </div>
            <div style={sectionStyles.splitBody}>
              <div style={{ ...sectionStyles.splitMeta, color: palette.strong }}>
                {post.categoryLabel} · {post.date} · {post.readMinutes} min
              </div>
              <h2 style={sectionStyles.splitTitle}>{post.title}</h2>
              {post.excerpt && <p style={sectionStyles.splitExcerpt}>{post.excerpt}</p>}
              <button className="btn btn--primary" style={sectionStyles.splitCta} onClick={() => onOpenPost && onOpenPost(post)}>
                {tr('hero.cta.primary')} <ArrowRight size={16}/>
              </button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // Default — 'horizontal' (uses the existing BlogCard horizontal variant)
  return (
    <section style={sectionStyles.featuredWrap}>
      <div style={sectionStyles.featuredInner}>
        <div style={sectionStyles.featuredEyebrowRow}>
          <span style={sectionStyles.featuredEyebrow}>{tr('section.featured')}</span>
          <span style={sectionStyles.featuredRule}/>
        </div>
        <BlogCard post={post} variant="horizontal" onClick={() => onOpenPost && onOpenPost(post)}/>
      </div>
    </section>
  );
}

function SectionPage({ section, onOpenPost, heroVariant = 'minimal', featuredVariant = 'horizontal' }) {
  const lang = React.useContext(LangContext);
  const tr = useT();
  const palette = SECTION_PALETTE[section] || SECTION_PALETTE.Health;

  const posts = (window.SAMPLE_POSTS || [])
    .filter(p => p.category === section)
    .map(p => resolvePost(p, lang));

  const [featured, ...library] = posts;

  return (
    <div>
      <SectionHero section={section} palette={palette} variant={heroVariant}/>

      <SectionVideo section={section}/>

      <FeaturedStory
        post={featured}
        palette={palette}
        variant={featuredVariant}
        onOpenPost={onOpenPost}
      />

      <section style={sectionStyles.library}>
        <div style={sectionStyles.libraryInner}>
          <div style={sectionStyles.libraryHead}>
            <h2 style={sectionStyles.libraryTitle}>{tr('section.library')}</h2>
            <span style={sectionStyles.libraryCount}>
              {library.length} {library.length === 1
                ? (lang === 'es' ? 'artículo' : 'article')
                : (lang === 'es' ? 'artículos' : 'articles')}
            </span>
          </div>

          {library.length === 0 ? (
            <div style={sectionStyles.empty}>{tr('section.library.empty')}</div>
          ) : (
            <div style={sectionStyles.grid}>
              {library.map(p => (
                <BlogCard key={p.id} post={p} onClick={() => onOpenPost && onOpenPost(p)}/>
              ))}
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

window.SectionPage = SectionPage;
window.SECTION_PALETTE = SECTION_PALETTE;