const { Section, SectionHeader, Hero, AnnouncementPill, ChipRow, CodeShowcase, CodeBlock, Carousel, PatternCard, StatTriplet, Diagram, DiagramNode, DiagramArrow } = window.SamsonAILabDesignSystem_8f27a2;

function HeroBlock({ active, onChange }) {
  const capability = window.CAPABILITIES.find((c) => c.id === active) || window.CAPABILITIES[0];
  return (
    <Section rhythm={false} rule={false} contentStyle={{ padding: 0 }}>
      <Hero
        announcement={<AnnouncementPill tag="NEW" label="Introducing durable chat agents" />}
        headline="Build and run long-lived AI workflows without managing servers"
        sub="Samson AI Lab is a platform for writing durable background tasks in TypeScript. Retries, queues, scheduling, and full run history, with no timeouts."
        ctaLabel="Start building"
        socialProof={{ icon: "github", metric: "16.1k", label: "Open source" }}
        backdrop={<CodeBlock code={capability.code} onPage style={{ height: "100%" }} />}
        chips={<ChipRow items={window.CAPABILITIES} value={active} onChange={onChange} />}
      />
    </Section>
  );
}

function ShowcaseBlock({ active }) {
  const capability = window.CAPABILITIES.find((c) => c.id === active) || window.CAPABILITIES[0];
  return (
    <Section rhythm={false} rule={false} contentStyle={{ padding: 0 }}>
      <div key={capability.id} className="ds-fade">
        <CodeShowcase code={capability.code} prose={capability.prose} linkLabel={capability.link} minHeight={380} />
      </div>
    </Section>
  );
}

function HowItWorksBlock() {
  return (
    <Section>
      <SectionHeader heading="How it works" body="Write a task, deploy it with the CLI, and trigger it from your app. The platform holds the run, retries it, and keeps its history." linkLabel="Read the docs" />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: "var(--gap-split)" }}>
        {[
          { step: "01", title: "Write the task", body: "Ordinary TypeScript with a task id and a run function.", node: <DiagramNode type="action" label="task()" /> },
          { step: "02", title: "Deploy it", body: "One CLI command per environment, or from CI.", node: <DiagramNode type="control" label="deploy" /> },
          { step: "03", title: "Trigger and watch", body: "Trigger from your app and subscribe to the run.", node: <DiagramNode type="parallel" label="trigger()" /> },
        ].map((s) => (
          <div key={s.step} style={{ borderTop: "1px solid var(--color-grid-hairline)", paddingTop: "var(--space-5)" }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xxs)", letterSpacing: "var(--tracking-wide)", color: "var(--color-text-faint)", marginBottom: "var(--space-4)" }}>{s.step}</div>
            <div style={{ marginBottom: "var(--space-4)" }}>{s.node}</div>
            <div style={{ fontSize: "var(--text-xl)", letterSpacing: "var(--tracking-xl)", fontWeight: "var(--font-weight-medium)", color: "var(--color-text-bright)" }}>{s.title}</div>
            <p style={{ marginTop: "var(--space-2)", fontSize: "var(--text-sm)", color: "var(--color-text-dimmed)" }}>{s.body}</p>
          </div>
        ))}
      </div>
      <div style={{ marginTop: "var(--space-12)", background: "var(--color-background-deep)", border: "1px solid var(--color-grid-hairline)", borderRadius: "var(--radius-md)" }}>
        <Diagram label="A task is triggered, queued, executed and recorded" gap={0} style={{ background: "transparent", flexWrap: "wrap" }}>
          <DiagramNode type="action" label="trigger()" />
          <DiagramArrow color="var(--diagram-action-border)" />
          <DiagramNode type="router" label="Queue" />
          <DiagramArrow color="var(--diagram-router-border)" />
          <DiagramNode type="control" label="Attempt" />
          <DiagramArrow color="var(--diagram-control-border)" />
          <Diagram bare direction="column" gap={8}>
            <DiagramNode type="parallel" label="Completed" />
            <DiagramNode type="neutral" label="Retry" dimmed />
          </Diagram>
          <DiagramArrow color="var(--diagram-parallel-border)" />
          <DiagramNode type="neutral" label="Run history" />
        </Diagram>
      </div>
    </Section>
  );
}

function PatternsBlock() {
  return (
    <Section>
      <SectionHeader heading="Patterns people ship" body="Five shapes cover most of what teams build here. Each one is a working example you can deploy and read." linkLabel="All examples" arrow="external" />
      <Carousel label="Architecture patterns">
        {window.PATTERNS.map((p) => (
          <PatternCard key={p.title} title={p.title} description={p.description} media={p.diagram} />
        ))}
      </Carousel>
    </Section>
  );
}

function StatsBlock() {
  return (
    <Section>
      <StatTriplet items={window.STATS} />
    </Section>
  );
}

Object.assign(window, { HeroBlock, ShowcaseBlock, HowItWorksBlock, PatternsBlock, StatsBlock });