/* Ecosystem — featured Studio card (MAIN, MIT) with 4 sub-modules folded in,
 * flanked by the two commercial products (Platform, Cloud) as compact cards
 * marked "Coming soon".
 *
 * Layout: 2fr 1fr on desktop — Studio 2/3 width, the two small cards stacked
 * on the right. Collapses to 1-col on mobile.
 *
 * Counts that might drift come from window.SITE_STATS (icons.jsx).
 */

const EcosystemSection = () => {
  const S = window.SITE_STATS;

  // v47 — skills is the catalog; connectors + plugins live inside it.
  // Single hub link + sub-badges show the breadth without splitting
  // the identity across three cards.
  const STUDIO_MODULES = [
    {
      icon: 'chart',
      name: 'Monitor',
      badge: '',
      desc: 'Telemetry — proc, fs, net,\ntokens, costs.',
      href: '/monitor.html',
    },
    {
      icon: 'docs',
      name: 'Skills',
      badge: `${S.skillsTotal}+`,
      desc: `${S.skillsCategories} categories × ${S.skillsDomains} domains.\nBrowse the unified catalog →`,
      href: '/skills.html#catalog',
    },
  ];

  // v47 — skills category breakdown. Each chip → /skills.html#catalog
  // with the pill pre-active so clicks scope immediately.
  const SKILL_CHIPS = [
    { label: 'Templates',   count: S.skillsTemplates,   icon: 'scroll', href: '/skills.html#catalog' },
    { label: 'Connectors',  count: S.skillsConnectors,  icon: 'plug',   href: '/skills.html#catalog' },
    { label: 'Plugins',     count: S.skillsPlugins,     icon: 'bolt',   href: '/skills.html#catalog' },
    { label: 'Components',  count: S.skillsComponents,  icon: 'stack',  href: '/skills.html#catalog' },
    { label: 'SDK hooks',   count: S.skillsSdkHooks,    icon: 'code',   href: '/skills.html#catalog' },
    { label: 'Agents',      count: S.skillsAgents,      icon: 'target', href: '/skills.html#catalog' },
    { label: 'Rules',       count: S.skillsRules,       icon: 'shield', href: '/skills.html#catalog' },
    { label: 'Automations', count: S.skillsAutomations, icon: 'clock',  href: '/skills.html#catalog' },
    { label: 'Domains',     count: S.skillsDomains,     icon: 'globe',  href: '/skills.html#catalog' },
  ];

  return (
    <section style={{ paddingTop: 110, paddingBottom: 40, position: 'relative' }}>
      <Container wide>
        <div style={{ maxWidth: 720, marginBottom: 44 }}>
          <SectionLabel label="THE ECOSYSTEM" />
          <DisplayTitle size={52}>
            The Studio ships <Italic style={{ color: 'var(--accent-2)' }}>batteries-included.</Italic><br/>
            Two more on the roadmap.
          </DisplayTitle>
          <p style={{
            marginTop: 18, fontSize: 16, color: 'var(--fg-2)',
            maxWidth: 580, lineHeight: 1.55,
          }}>
            Clone one repo, get Monitor, Skills, Connectors and Plugins for
            free. Platform and Cloud are the commercial extensions — not yet
            open, not yet out.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '2fr 1fr',
          gap: 16,
          alignItems: 'stretch',
        }} className="ecosystem-grid">
          {/* LEFT: Studio featured card with nested modules */}
          <StudioFeaturedCard modules={STUDIO_MODULES} agentCount={S.agentCount} skillChips={SKILL_CHIPS} />

          {/* RIGHT: stacked commercial products */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <ComingSoonCard
              icon="saas"
              name="Platform"
              desc="Multi-tenant hub for orgs running many Studios — SSO, billing, fleet-wide policies."
            />
            <ComingSoonCard
              icon="cloud"
              name="Cloud"
              desc="Fully hosted, managed AutoArchitect. Same Studio, none of the ops."
            />
          </div>
        </div>
      </Container>
    </section>
  );
};

const StudioFeaturedCard = ({ modules, agentCount, skillChips }) => {
  const [h, setH] = React.useState(false);
  return (
    <a
      href="https://github.com/syedia/autoarchitect"
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        display: 'flex', flexDirection: 'column',
        padding: 28,
        background: 'var(--bg-1)',
        border: `1px solid ${h ? 'var(--line-3)' : 'var(--line-2)'}`,
        borderRadius: 16,
        cursor: 'pointer',
        position: 'relative',
        overflow: 'hidden',
        transition: 'transform 200ms, border-color 200ms, box-shadow 200ms',
        transform: h ? 'translateY(-2px)' : 'none',
        boxShadow: h
          ? '0 30px 60px -25px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.04)'
          : 'inset 0 1px 0 rgba(255,255,255,0.03)',
      }}>
      {/* Soft accent glow decoration */}
      <div style={{
        position: 'absolute',
        top: -120, right: -120,
        width: 300, height: 300,
        background: 'radial-gradient(circle, var(--accent-soft), transparent 60%)',
        filter: 'blur(20px)',
        pointerEvents: 'none',
      }} />

      {/* Header: icon tile + badges */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 14,
        position: 'relative', zIndex: 1,
      }}>
        <div style={{
          width: 48, height: 48, borderRadius: 12,
          background: 'var(--accent-soft)',
          border: '1px solid var(--line-3)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--accent-2)',
          boxShadow: '0 0 24px var(--accent-glow)',
        }}>
          <I.compass size={22} />
        </div>
        <div>
          <div style={{
            fontSize: 22, fontWeight: 600, color: 'var(--fg-1)',
            letterSpacing: '-0.02em',
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            Studio
            <span style={{
              fontSize: 9.5, fontFamily: 'var(--font-mono)',
              padding: '2px 7px', borderRadius: 4,
              background: 'var(--accent-soft)',
              color: 'var(--accent-2)',
              letterSpacing: '0.1em',
              fontWeight: 700,
            }}>MAIN</span>
            <span style={{
              fontSize: 9.5, fontFamily: 'var(--font-mono)',
              padding: '2px 7px', borderRadius: 4,
              background: 'var(--bg-3)',
              color: 'var(--fg-2)',
              border: '1px solid var(--line-2)',
              letterSpacing: '0.1em',
              fontWeight: 700,
            }}>MIT</span>
          </div>
          <div style={{
            fontSize: 12, color: 'var(--fg-3)',
            fontFamily: 'var(--font-mono)', marginTop: 4,
            letterSpacing: '0.04em',
          }}>
            One Architect · 1 command to run
          </div>
        </div>
      </div>

      {/* Description */}
      <p style={{
        margin: '20px 0 24px', fontSize: 14.5, color: 'var(--fg-2)',
        lineHeight: 1.55, textWrap: 'pretty', maxWidth: 540,
        position: 'relative', zIndex: 1,
      }}>
        The self-hosted workspace you run on your own infra. One prompt,
        an autonomous Architect that ships, production apps out the other side.
        Architect doesn't follow a script — it picks the next move from a
        25+ tool palette, spawns ephemeral subagents when work parallelises,
        and iterates against a real workspace. <em>These four ship inside:</em>
      </p>

      {/* Nested modules — 2x2 on desktop, 1x4 on narrow */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(2, 1fr)',
        gap: 10,
        position: 'relative', zIndex: 1,
      }} className="studio-modules">
        {modules.map((m) => <StudioModuleRow key={m.name} {...m} />)}
      </div>

      {/* v47 — Skills category chips. Shows the internals of the
          Skills module — 9 categories with counts. Each chip links to
          /skills.html#catalog so users can drill into the marketplace. */}
      {skillChips && (
        <div style={{
          marginTop: 14,
          padding: '14px 14px 12px',
          border: '1px solid var(--line-1)',
          borderRadius: 10,
          background: 'var(--bg-0)',
          position: 'relative', zIndex: 1,
        }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 10,
            color: 'var(--fg-3)', letterSpacing: '0.12em',
            textTransform: 'uppercase', marginBottom: 10,
          }}>
            Inside the Skills catalog
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 6,
          }}>
            {skillChips.map((c) => {
              const Icn = I[c.icon] || I.docs;
              return (
                <a
                  key={c.label}
                  href={c.href}
                  onClick={(e) => e.stopPropagation()}
                  style={{
                    display: 'flex', alignItems: 'center', gap: 8,
                    padding: '8px 10px',
                    borderRadius: 7,
                    background: 'var(--bg-1)',
                    border: '1px solid var(--line-1)',
                    transition: 'all 160ms',
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.borderColor = 'var(--accent)';
                    e.currentTarget.style.background = 'var(--accent-soft)';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.borderColor = 'var(--line-1)';
                    e.currentTarget.style.background = 'var(--bg-1)';
                  }}
                >
                  <Icn size={12} style={{ color: 'var(--accent-2)', flexShrink: 0 }} />
                  <span style={{
                    fontSize: 11.5, color: 'var(--fg-1)',
                    fontWeight: 500, flex: 1, overflow: 'hidden',
                    textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                  }}>{c.label}</span>
                  <span style={{
                    fontSize: 10, fontFamily: 'var(--font-mono)',
                    color: 'var(--fg-3)', fontWeight: 600,
                  }}>{c.count}</span>
                </a>
              );
            })}
          </div>
        </div>
      )}

      {/* Bottom "Explore" */}
      <div style={{
        marginTop: 22,
        display: 'flex', alignItems: 'center', gap: 6,
        fontFamily: 'var(--font-mono)', fontSize: 11,
        color: h ? 'var(--accent-2)' : 'var(--fg-3)',
        letterSpacing: '0.08em', textTransform: 'uppercase',
        transition: 'color 200ms',
        position: 'relative', zIndex: 1,
      }}>
        Clone the Studio
        <I.arrow size={11} stroke={2.2} />
      </div>
    </a>
  );
};

const StudioModuleRow = ({ icon, name, badge, desc, href }) => {
  const [h, setH] = React.useState(false);
  const Icn = I[icon] || I.compass;
  return (
    <a
      href={href}
      onClick={(e) => e.stopPropagation()}
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '10px 12px',
        background: h ? 'var(--bg-2)' : 'var(--bg-0)',
        border: `1px solid ${h ? 'var(--line-3)' : 'var(--line-1)'}`,
        borderRadius: 10,
        transition: 'all 160ms',
      }}>
      <div style={{
        width: 28, height: 28, borderRadius: 7,
        background: 'var(--bg-3)',
        border: '1px solid var(--line-2)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--accent-2)',
        flexShrink: 0,
      }}>
        <Icn size={13} />
      </div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{
          fontSize: 12.5, fontWeight: 600, color: 'var(--fg-1)',
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          {name}
          {badge && (
            <span style={{
              fontSize: 9.5, fontFamily: 'var(--font-mono)',
              padding: '1px 5px', borderRadius: 3,
              background: 'var(--accent-soft)',
              color: 'var(--accent-2)',
              letterSpacing: '0.06em',
              fontWeight: 600,
            }}>{badge}</span>
          )}
        </div>
        <div style={{
          fontSize: 11, color: 'var(--fg-3)',
          fontFamily: 'var(--font-mono)', marginTop: 3,
          whiteSpace: 'pre-line', lineHeight: 1.45,
          paddingRight: 12,
        }}>
          {desc}
        </div>
      </div>
    </a>
  );
};

const ComingSoonCard = ({ icon, name, desc }) => {
  const [h, setH] = React.useState(false);
  const Icn = I[icon] || I.saas;
  return (
    <div
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        display: 'flex', flexDirection: 'column',
        padding: 20,
        background: 'var(--bg-1)',
        border: `1px solid ${h ? 'var(--line-2)' : 'var(--line-1)'}`,
        borderRadius: 14,
        flex: 1,
        position: 'relative',
        opacity: 0.85,
        transition: 'opacity 200ms, border-color 200ms',
      }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        marginBottom: 12,
      }}>
        <div style={{
          width: 34, height: 34, borderRadius: 9,
          background: 'var(--bg-3)',
          border: '1px solid var(--line-2)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--fg-3)',
        }}>
          <Icn size={15} />
        </div>
        <span style={{
          fontSize: 9.5, fontFamily: 'var(--font-mono)',
          padding: '3px 8px', borderRadius: 999,
          background: 'var(--bg-3)',
          color: 'var(--fg-3)',
          border: '1px solid var(--line-2)',
          letterSpacing: '0.1em',
          textTransform: 'uppercase',
          fontWeight: 600,
        }}>Coming soon</span>
      </div>
      <div style={{
        fontSize: 15.5, fontWeight: 600, color: 'var(--fg-2)',
        letterSpacing: '-0.015em', marginBottom: 5,
      }}>
        {name}
      </div>
      <p style={{
        margin: 0, fontSize: 12, color: 'var(--fg-3)',
        lineHeight: 1.5,
      }}>
        {desc}
      </p>
      <div style={{
        marginTop: 10,
        fontSize: 10, fontFamily: 'var(--font-mono)',
        color: 'var(--fg-4)',
        letterSpacing: '0.08em', textTransform: 'uppercase',
      }}>
        Commercial · not MIT
      </div>
    </div>
  );
};

window.EcosystemSection = EcosystemSection;