// Leonard's Farm For New Farmers (learning center) section
const LFLearnHeading = SectionHeading;
const LFArticleCard = ArticleCard;
const LFLearnBtn = Button;

function Learn() {
  const [openSlug, setOpenSlug] = React.useState(null);
  const guides = window.LF_GUIDES || [];
  const openGuide = guides.find((g) => g.slug === openSlug) || null;

  return (
    <section id="learn" style={{ padding: 'var(--section-y) 0', background: 'var(--surface-page)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-5)', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div style={{ maxWidth: 620 }}>
            <LFLearnHeading eyebrow="For new farmers" title="Learn to grow on dry land" lead="Plain, practical guides from our own fields. Nine to get you started, then come see it in person." />
          </div>
        </div>
        <div style={{ marginTop: 'var(--space-7)', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 'var(--space-5)', alignItems: 'stretch' }}>
          {guides.map((g) => (
            <LFArticleCard
              key={g.slug}
              topic={g.topic}
              title={g.title}
              summary={g.summary}
              readTime={g.readTime}
              image={g.image}
              href="#learn"
              onClick={(e) => { e.preventDefault(); setOpenSlug(g.slug); }}
            />
          ))}
        </div>
      </div>

      {openGuide && (
        <ArticleReader
          guide={openGuide}
          onClose={() => setOpenSlug(null)}
          onNavigate={(slug) => setOpenSlug(slug)}
        />
      )}
    </section>
  );
}

window.Learn = Learn;