// Leonard's Farm: CropCard component
// Image on top, crop name, one-line description.
// Tap or click the card to expand it inline and reveal the season, a short
// growing note and one practical tip. Tap again to collapse. Works on touch
// (it toggles on click, not hover). Falls back to a solid green panel when the
// image is missing or fails to load, so it never shows a broken-image icon.
function CropCard({ name, description, image, season, note, tip, height = 200 }) {
  const [hover, setHover] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const hasMore = !!(note || tip || season);

  const toggle = () => setOpen((o) => !o);
  const onKey = (e) => {
    if (hasMore && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); toggle(); }
  };

  return (
    <article
      role={hasMore ? 'button' : undefined}
      tabIndex={hasMore ? 0 : undefined}
      aria-expanded={hasMore ? open : undefined}
      onClick={hasMore ? toggle : undefined}
      onKeyDown={hasMore ? onKey : undefined}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: 'var(--surface-card)',
        border: '1px solid var(--border-subtle)',
        borderRadius: 'var(--radius-lg)',
        overflow: 'hidden',
        boxShadow: hover || open ? 'var(--shadow-lg)' : 'var(--shadow-sm)',
        transform: hover && !open ? 'translateY(-4px)' : 'none',
        transition: 'transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out)',
        display: 'flex',
        flexDirection: 'column',
        cursor: hasMore ? 'pointer' : 'default',
      }}
    >
      <div style={{
        position: 'relative',
        height,
        backgroundColor: 'var(--green-500)',
        background: image
          ? `var(--green-500) center/cover no-repeat url("${image}")`
          : 'linear-gradient(150deg, var(--green-300), var(--green-500))',
      }}>
        {season && (
          <div style={{ position: 'absolute', top: 12, left: 12 }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: '0.4em',
              padding: '5px 12px', borderRadius: 'var(--radius-pill)',
              background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(4px)',
              fontFamily: 'var(--font-body)', fontSize: 'var(--fs-xs)',
              fontWeight: 'var(--fw-semibold)', color: 'var(--green-700)',
            }}>
              <span aria-hidden="true" style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--lime-500)' }} />
              {season}
            </span>
          </div>
        )}
      </div>

      <div style={{ padding: 'var(--space-5)' }}>
        <h3 style={{ fontSize: 'var(--fs-h3)' }}>{name}</h3>
        <p style={{ marginTop: 'var(--space-2)', color: 'var(--text-muted)', fontSize: 'var(--fs-sm)', lineHeight: 'var(--lh-snug)' }}>
          {description}
        </p>

        {hasMore && (
          <React.Fragment>
            {/* smooth height transition via grid-rows 0fr -> 1fr (no fixed max-height) */}
            <div style={{
              display: 'grid',
              gridTemplateRows: open ? '1fr' : '0fr',
              transition: 'grid-template-rows var(--dur) var(--ease-out)',
            }}>
              <div style={{ overflow: 'hidden' }}>
                <div style={{
                  marginTop: 'var(--space-4)', paddingTop: 'var(--space-4)',
                  borderTop: '1px solid var(--border-subtle)',
                  display: 'flex', flexDirection: 'column', gap: 'var(--space-3)',
                }}>
                  {note && (
                    <p style={{ color: 'var(--text-body)', fontSize: 'var(--fs-sm)', lineHeight: 'var(--lh-body)' }}>
                      {note}
                    </p>
                  )}
                  {tip && (
                    <div style={{
                      background: 'var(--lime-100)', borderRadius: 'var(--radius-md)',
                      padding: '10px 14px', display: 'flex', flexDirection: 'column', gap: 4,
                    }}>
                      <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-xs)', fontWeight: 'var(--fw-semibold)', letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--green-700)' }}>Grower&rsquo;s tip</span>
                      <span style={{ fontSize: 'var(--fs-sm)', color: 'var(--ink-700)', lineHeight: 'var(--lh-snug)' }}>{tip}</span>
                    </div>
                  )}
                </div>
              </div>
            </div>

            {/* affordance row: cue that the card opens */}
            <div style={{
              marginTop: 'var(--space-4)',
              display: 'inline-flex', alignItems: 'center', gap: '0.45em',
              fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', fontWeight: 'var(--fw-semibold)',
              color: 'var(--brand-primary)',
            }}>
              {open ? 'Show less' : 'How we grow it'}
              <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur) var(--ease-out)' }}>
                <path d="M6 9l6 6 6-6" />
              </svg>
            </div>
          </React.Fragment>
        )}
      </div>
    </article>
  );
}

window.CropCard = CropCard;