// ui_kits/website/BlogCard.jsx

const blogStyles = {
  card: {
    background: '#fff',
    borderRadius: 12,
    overflow: 'hidden',
    boxShadow: '0 2px 6px rgba(31,79,64,0.06)',
    transition: 'transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out)',
    cursor: 'pointer',
    display: 'flex', flexDirection: 'column',
  },
  thumb: {
    position: 'relative',
    aspectRatio: '4 / 3',
    overflow: 'hidden',
    background: 'var(--brand-mint-soft)',
  },
  thumbImg: {
    width: '100%', height: '100%', objectFit: 'cover',
    transition: 'transform 600ms var(--ease-out)',
  },
  pill: {
    position: 'absolute', top: 12, left: 12,
  },
  body: { padding: '18px 20px 22px' },
  meta: {
    fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 700,
    letterSpacing: '0.14em', textTransform: 'uppercase',
    color: '#767574',
  },
  title: {
    fontFamily: 'var(--font-serif)', fontWeight: 600,
    fontSize: 22, lineHeight: 1.25,
    color: '#383838', margin: '8px 0 14px',
  },
  excerpt: {
    fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.6,
    color: '#525150', margin: '0 0 16px',
    display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
    overflow: 'hidden',
  },
  author: { display: 'flex', alignItems: 'center', gap: 8 },
  avatar: {
    width: 24, height: 24, borderRadius: '50%',
    background: 'var(--brand-leaf)', color: '#fff',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 12,
  },
  authorName: {
    fontFamily: 'var(--font-sans)', fontSize: 13, color: '#525150',
  },
};

const CATEGORY_TINT = {
  Health:     ['#A3D0B8', '#6FA98C'],
  Beauty:     ['#EFC5BE', '#D9A29B'],
  Nutrition:  ['#F2D391', '#E8B458'],
  Exercise:   ['#A3BEDA', '#6E97C2'],
  Therapies:  ['#D5C1EE', '#B19CD9'],
};

function CategoryThumb({ category, label }) {
  const [a, b] = CATEGORY_TINT[category] || CATEGORY_TINT.Health;
  return (
    <div style={{
      width: '100%', height: '100%',
      background: `linear-gradient(135deg, ${a}, ${b})`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontFamily: 'var(--font-serif)', fontStyle: 'italic',
      fontWeight: 600,
      fontSize: 28, letterSpacing: '0.01em',
      textShadow: '0 2px 12px rgba(15,15,15,0.35)',
    }}>{label || category}</div>
  );
}

function BlogCard({ post, onClick, variant = 'default' }) {
  const { title, category, categoryLabel, date, readMinutes, author, excerpt, image } = post;
  const catDisplay = categoryLabel || category;
  const [hover, setHover] = React.useState(false);

  if (variant === 'horizontal') {
    return (
      <article
        style={{ ...blogStyles.card, flexDirection: 'row', gap: 0,
                 transform: hover ? 'translateY(-2px)' : 'none',
                 boxShadow: hover ? '0 12px 30px rgba(31,79,64,0.10)' : blogStyles.card.boxShadow }}
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        onClick={onClick}
      >
        <div style={{ ...blogStyles.thumb, aspectRatio: 'auto', width: 280, flexShrink: 0 }}>
          <div style={blogStyles.pill}><span className={`pill pill--${category.toLowerCase()}`}>{catDisplay}</span></div>
          {image
            ? <img src={image} alt="" style={blogStyles.thumbImg}/>
            : <CategoryThumb category={category} label={catDisplay}/>}
        </div>
        <div style={{ ...blogStyles.body, flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={blogStyles.meta}>{date} · {readMinutes} min</div>
          <h3 style={blogStyles.title}>{title}</h3>
          {excerpt && <p style={blogStyles.excerpt}>{excerpt}</p>}
          <div style={blogStyles.author}>
            <div style={blogStyles.avatar}>{author[0]}</div>
            <div style={blogStyles.authorName}>{author}</div>
          </div>
        </div>
      </article>
    );
  }

  return (
    <article
      style={{ ...blogStyles.card,
               transform: hover ? 'translateY(-3px)' : 'none',
               boxShadow: hover ? '0 14px 32px rgba(31,79,64,0.10)' : blogStyles.card.boxShadow }}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      onClick={onClick}
    >
      <div style={blogStyles.thumb}>
        <div style={blogStyles.pill}><span className={`pill pill--${category.toLowerCase()}`}>{catDisplay}</span></div>
        {image
          ? <img src={image} alt="" style={{ ...blogStyles.thumbImg, transform: hover ? 'scale(1.04)' : 'none' }}/>
          : <CategoryThumb category={category} label={catDisplay}/>}
      </div>
      <div style={blogStyles.body}>
        <div style={blogStyles.meta}>{date} · {readMinutes} min</div>
        <h3 style={blogStyles.title}>{title}</h3>
        <div style={blogStyles.author}>
          <div style={blogStyles.avatar}>{author[0]}</div>
          <div style={blogStyles.authorName}>{author}</div>
        </div>
      </div>
    </article>
  );
}

window.BlogCard = BlogCard;
window.CategoryThumb = CategoryThumb;