// pages/garden.jsx — My Garden (Phase 02: CustomerOs projects)

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

  var projects = [];
  if (window.CustomerOs && window.CustomerOs.listProjects) {
    var res = window.CustomerOs.listProjects();
    if (res && res.ok && Array.isArray(res.projects)) projects = res.projects;
  }

  return (
    <main className="os-page">
      <section className="os-section">
        <div className="os-wrap">
          <PageHeader
            eyebrow="My Garden"
            title="Your garden workspace"
            note="Projects belong to your Ambady customer identity. Sign in to save a plan."
          />
          {projects.length === 0 ? (
            <EmptyState
              icon="leaf"
              title="Start your first garden project"
              note="Create a project from the planner. Nothing is invented — only what you save."
              cta={{ label: 'Create project', href: '#/plan' }}
            />
          ) : (
            <div className="os-cat-grid">
              {projects.map(function (p) {
                return (
                  <ProjectCard
                    key={p.id}
                    title={p.name}
                    note={(p.projectType || '') + ' · ' + (p.status || '')}
                    href="#/garden"
                  />
                );
              })}
            </div>
          )}
          <div style={{ marginTop: 8 }}>
            <RinpoPrompt text="Not sure where to begin?" seed="Help me start my first garden project." />
          </div>
          <p style={{ fontSize: '.78rem', color: 'var(--muted)', marginTop: 16 }}>
            Add to My Garden on a product page saves the SKU onto your latest project. It does not purchase.
          </p>
        </div>
      </section>
    </main>
  );
}

window.GardenPage = GardenPage;