// pages/learn.jsx — Learn hub + playbook layout. No invented horticulture bodies.

var LEARN_SECTIONS = [
  { id: 'guides', label: 'Guides' },
  { id: 'playbooks', label: 'Playbooks' },
  { id: 'checklists', label: 'Checklists' },
  { id: 'ideas', label: 'Ideas' },
  { id: 'product', label: 'Product education' },
  { id: 'maintenance', label: 'Maintenance' },
  { id: 'inspiration', label: 'Inspiration' },
];

function LearnSectionNav({ active }) {
  return (
    <nav className="os-learn-nav" aria-label="Learn sections">
      {LEARN_SECTIONS.map(function (s) {
        return (
          <a
            key={s.id}
            href={'#/learn?section=' + s.id}
            className={active === s.id ? 'is-on' : ''}
          >
            {s.label}
          </a>
        );
      })}
    </nav>
  );
}

function LearnPage() {
  var route = useRoute();
  var section = route.query.section || 'product';

  React.useEffect(function () {
    if (window.CustomerSeo && window.CustomerSeo.applyPage) window.CustomerSeo.applyPage('learn');
    return function () { if (window.CustomerSeo) window.CustomerSeo.applyDefault(); };
  }, []);

  var cats = (window.HAP && HAP.CATEGORIES) || [];
  var playbooks = [];
  if (window.CustomerOs && window.CustomerOs.listPlaybooks) {
    var pb = window.CustomerOs.listPlaybooks();
    if (pb && pb.ok && Array.isArray(pb.playbooks)) playbooks = pb.playbooks;
  }

  return (
    <main className="os-page">
      <section className="os-section">
        <div className="os-wrap">
          <PageHeader
            eyebrow="Learn"
            title="Garden education"
            note="Product education links to live categories. Other sections wait on a CMS — we will not invent how-to copy."
          />
          <LearnSectionNav active={section} />

          {section === 'product' ? (
            <div>
              <SectionHeader title="Shop by category" />
              <div className="os-cat-grid">
                {cats.map(function (c) {
                  return (
                    <a key={c.slug} className="os-learn-card" href={'#/collections/' + c.slug}>
                      <h3 className="serif" style={{ margin: 0 }}>{c.name}</h3>
                      <p style={{ color: 'var(--muted)', margin: 0, fontSize: '.85rem' }}>Open the live collection</p>
                    </a>
                  );
                })}
              </div>
            </div>
          ) : section === 'playbooks' && playbooks.length ? (
            <div className="os-cat-grid">
              {playbooks.map(function (p) {
                return (
                  <a key={p.id} className="os-learn-card" href={'#/learn/' + p.slug}>
                    <h3 className="serif" style={{ margin: 0 }}>{p.title}</h3>
                    <p style={{ color: 'var(--muted)', margin: 0, fontSize: '.85rem' }}>{p.summary || 'Open playbook'}</p>
                  </a>
                );
              })}
            </div>
          ) : (
            <div className="os-cms-empty">
              <h2 className="serif" style={{ fontSize: '1.4rem', color: 'var(--foreground)' }}>
                {LEARN_SECTIONS.filter(function (s) { return s.id === section; })[0].label}
              </h2>
              <p style={{ marginTop: 8 }}>This section has no published CMS entries yet.</p>
              <p style={{ marginTop: 8 }}>
                Playbook pages use <code>#/learn/:slug</code> when content exists.{' '}
                <a href="#/learn/pathway-basics" style={{ color: 'var(--primary)' }}>Open playbook layout</a>
              </p>
            </div>
          )}

          <div style={{ marginTop: 20 }}>
            <RinpoPrompt text="Looking for a specific pebble or path idea?" seed="Help me learn about pebbles and path stones." />
          </div>
        </div>
      </section>
    </main>
  );
}

function LearnPlaybookPage() {
  var route = useRoute();
  var slug = route.params.slug || '';
  var record = null;
  if (window.CustomerOs && window.CustomerOs.playbookBySlug) {
    var hit = window.CustomerOs.playbookBySlug(slug);
    if (hit && hit.ok) record = hit.playbook;
  }

  React.useEffect(function () {
    if (window.CustomerSeo && window.CustomerSeo.applyPage) {
      window.CustomerSeo.applyPage('learn', slug + ' — Learn — Ambady Pebbles Garden');
    }
    if (window.CustomerOs && window.CustomerOs.emit) {
      window.CustomerOs.emit({ eventType: 'playbook_view', entityType: 'playbook', entityId: slug });
    }
    return function () { if (window.CustomerSeo) window.CustomerSeo.applyDefault(); };
  }, [slug]);

  return (
    <main className="os-page">
      <section className="os-section">
        <div className="os-wrap" style={{ maxWidth: 760 }}>
          <div className="crumb" style={{ marginBottom: 16 }}>
            <a href="#/learn">Learn</a><span className="sep">/</span><span className="here">{slug}</span>
          </div>
          <PageHeader
            eyebrow="Playbook"
            title={record ? record.title : slug.replace(/-/g, ' ')}
            note={record ? (record.summary || '') : 'Playbook layout is ready. There is no published how-to body for this slug — we will not invent horticulture.'}
          />
          {record ? (
            <p style={{ color: 'var(--muted)' }}>{record.summary}</p>
          ) : (
            <div className="os-cms-empty">
              No CMS article is attached to this playbook yet.
            </div>
          )}
          <div style={{ marginTop: 16, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <a className="btn btn--secondary" href="#/learn">Back to Learn</a>
            <button type="button" className="btn btn--ghost" onClick={function () { window.askRinpo('Help me with ' + slug); }}>Ask RINPO</button>
          </div>
        </div>
      </section>
    </main>
  );
}

window.LearnPage = LearnPage;
window.LearnPlaybookPage = LearnPlaybookPage;
window.LEARN_SECTIONS = LEARN_SECTIONS;