// Leonard's Farm: ArticleCard component
// Article / tip card for the "For New Farmers" learning section.
// Topic badge, title, short summary, optional read time. Built to tile in a grid
// so more articles can be added without breaking the layout.
function ArticleCard({ title, summary, topic, readTime, image, href = '#', onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={href}
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex',
        flexDirection: 'column',
        background: 'var(--surface-card)',
        border: '1px solid var(--border-subtle)',
        borderRadius: 'var(--radius-lg)',
        overflow: 'hidden',
        textDecoration: 'none',
        color: 'inherit',
        height: '100%',
        boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-sm)',
        transform: hover ? 'translateY(-3px)' : 'none',
        transition: 'transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out)',
      }}
    >
      {image && (
        <div style={{ height: 160, background: `center/cover no-repeat url("${image}")` }} />
      )}
      <div style={{ padding: 'var(--space-5)', display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', flex: 1 }}>
        {topic && (
          <span style={{
            alignSelf: 'flex-start',
            padding: '4px 11px', borderRadius: 'var(--radius-pill)',
            background: 'var(--water-100)', color: 'var(--water-700)',
            fontFamily: 'var(--font-body)', fontSize: 'var(--fs-xs)', fontWeight: 'var(--fw-semibold)',
          }}>
            {topic}
          </span>
        )}
        <h3 style={{ fontSize: 'var(--fs-h3)', color: hover ? 'var(--brand-primary-dark)' : 'var(--text-heading)', transition: 'color var(--dur-fast) var(--ease-out)' }}>
          {title}
        </h3>
        <p style={{ color: 'var(--text-muted)', fontSize: 'var(--fs-sm)', lineHeight: 'var(--lh-snug)', margin: 0 }}>
          {summary}
        </p>
        <span style={{
          marginTop: 'auto', paddingTop: 'var(--space-2)',
          display: 'inline-flex', alignItems: 'center', gap: '0.4em',
          fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', fontWeight: 'var(--fw-semibold)',
          color: 'var(--brand-primary)',
        }}>
          Read more
          <span aria-hidden="true" style={{ transform: hover ? 'translateX(3px)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }}>&rarr;</span>
        </span>
        {readTime && (
          <span style={{ fontSize: 'var(--fs-xs)', color: 'var(--ink-400)' }}>{readTime}</span>
        )}
      </div>
    </a>
  );
}

window.ArticleCard = ArticleCard;