Cofounder (Long Page)

BackCofounder (Long Page)Marketing

100%

import { FeatureRow } from "@/components/feature-row/feature-row";
import { StatTile } from "@/components/stat-tile/stat-tile";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  InsetPanel,
  InsetPanelBody,
  InsetPanelFooter,
  InsetPanelHeader,
} from "@/components/ui/inset-panel";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { IconPlaceholder } from "@/edmi/icon-placeholder";
import {
  chart,
  footer,
  footerSceneArt,
  grassArt,
  grow,
  guide,
  header,
  hero,
  intro,
  joiners,
  joinersFooter,
  launch,
  meterSteps,
  meterZones,
  metrics,
  operate,
  type Pixels,
  pixelRects,
  sky,
  skyArt,
  stages,
  tools,
  toolsArt,
  workspace,
} from "./data";

const wordmark = "font-['Instrument_Serif',Georgia,serif]";
const glass =
  "border-white/45 bg-white/25 text-white shadow-none hover:bg-white/35";

function Scene({
  art,
  className,
  fit = "xMidYMid slice",
}: {
  art: Pixels;
  className?: string;
  fit?: string;
}) {
  return (
    <svg
      viewBox={`0 0 ${art.w} ${art.h}`}
      preserveAspectRatio={fit}
      shapeRendering="crispEdges"
      aria-hidden="true"
      className={className}
    >
      {pixelRects(art).map((r, i) => (
        <rect
          // biome-ignore lint/suspicious/noArrayIndexKey: static pixel list
          key={i}
          x={r.x}
          y={r.y}
          width={r.w}
          height={r.h}
          fill={r.fill}
        />
      ))}
    </svg>
  );
}

function Eyebrow({ children }: { children: string }) {
  return (
    <div className="font-mono text-[13px] tracking-[2px] text-muted-foreground uppercase">
      {children}
    </div>
  );
}

function Heading({
  lead,
  muted,
  className = "",
}: {
  lead: string;
  muted?: string;
  className?: string;
}) {
  return (
    <h2
      className={`font-normal tracking-[-1.2px] text-foreground-2 dark:text-muted-foreground-2 ${className}`}
    >
      {lead}
      {muted ? (
        <>
          {" "}
          <span className="text-muted-foreground">{muted}</span>
        </>
      ) : null}
    </h2>
  );
}

function Rows({ rows }: { rows: { index: string; title: string }[] }) {
  return (
    <div className="flex flex-col gap-2">
      {rows.map((r) => (
        <FeatureRow
          key={r.index}
          elevation="raised"
          index={r.index}
          title={r.title}
        />
      ))}
    </div>
  );
}

function Copy({
  eyebrow,
  lead,
  muted,
  body,
  rows,
  className = "",
}: {
  eyebrow: string;
  lead: string;
  muted: string;
  body: string;
  rows: { index: string; title: string }[];
  className?: string;
}) {
  return (
    <div className="flex flex-col gap-7">
      <Eyebrow>{eyebrow}</Eyebrow>
      <Heading
        lead={lead}
        muted={muted}
        className={`leading-[1.15] ${className}`}
      />
      <p className="max-w-[520px] text-[17px] leading-relaxed text-foreground-2 md:text-[19px]">
        {body}
      </p>
      <Rows rows={rows} />
    </div>
  );
}

const wrap = "mx-auto w-full max-w-[1700px] px-5 md:px-10";

export default function EditorialLongExample() {
  return (
    <div className="min-h-svh overflow-x-clip bg-background text-foreground">
      {/* Sky hero */}
      <section
        className="relative isolate min-h-[760px] overflow-hidden text-white md:min-h-[1100px]"
        style={{ background: sky.gradient }}
      >
        <Scene art={skyArt} className="absolute inset-0 -z-10 size-full" />
        <div className={`${wrap} relative z-10 pt-6 pb-24`}>
          <div className="flex items-center justify-between gap-4">
            <span className={`${wordmark} text-[34px] text-white`}>
              Stockbreak
            </span>
            <div className="flex items-center gap-3">
              <div
                className={`hidden h-11 items-center rounded-[10px] border px-2 text-base lg:flex ${glass}`}
              >
                <span className="px-3.5 text-white/70">{header.lead}</span>
                {header.steps.map((s) => (
                  <a key={s.label} href={s.href} className="px-3.5">
                    {s.label}
                  </a>
                ))}
              </div>
              {header.links.map((l) => (
                <Button
                  key={l.label}
                  variant="ghost"
                  className={`hidden h-11 px-5 text-base md:inline-flex ${glass}`}
                  nativeButton={false}
                  render={<a href={l.href} />}
                >
                  {l.label}
                </Button>
              ))}
              <Button elevation="raised" className="h-11 px-[18px] text-base">
                {header.cta}
              </Button>
            </div>
          </div>

          <div className="mt-24 max-w-[760px] md:mt-[132px]">
            <h1 className="text-[40px] leading-[1.08] font-normal tracking-[-1.5px] md:text-[68px] md:tracking-[-2px]">
              {sky.title}
            </h1>
            <p className="mt-8 max-w-[640px] text-[17px] leading-normal text-white/90 md:mt-10 md:text-[19px]">
              {sky.body}
            </p>
            <div className="mt-9 flex flex-wrap gap-3.5">
              <Button
                elevation="raised"
                size="lg"
                className="h-14 px-6 text-lg"
              >
                {sky.primary}
              </Button>
              <Button
                variant="ghost"
                size="lg"
                className={`h-14 px-6 text-lg ${glass}`}
              >
                {sky.secondary}
              </Button>
            </div>
          </div>

          <div className="absolute top-[330px] right-[8%] hidden flex-col gap-3 lg:flex">
            {sky.tasks.map((t) => (
              <div
                key={t.name}
                className="flex h-[46px] w-[300px] items-center gap-2 rounded-lg border border-emerald-700 bg-emerald-950 px-3.5 text-[13px] whitespace-nowrap text-emerald-100 [transform:perspective(500px)_rotateY(-12deg)]"
              >
                <span className="size-1.5 shrink-0 rounded-full bg-emerald-400" />
                <span className="opacity-80">{t.label}</span>
                <b className="font-semibold text-white">{t.name}</b>
              </div>
            ))}
          </div>
        </div>
      </section>

      <main
        className={`${wrap} flex flex-col gap-28 pt-16 pb-24 md:gap-40 md:pt-24`}
      >
        {/* Hero workspace */}
        <section className="flex flex-col gap-16">
          <h2 className="text-center text-[34px] leading-[1.12] font-normal tracking-[-1.2px] text-foreground-2 md:text-[60px] md:tracking-[-1.5px] dark:text-muted-foreground-2">
            {hero.lead}
            <br />
            <span className="text-muted-foreground">{hero.muted}</span>
          </h2>

          <Card
            elevation="floating"
            className="mx-auto w-full max-w-[1420px] gap-0 overflow-hidden rounded-[22px] p-0 lg:h-[780px] lg:flex-row"
          >
            <div className="relative hidden flex-1 overflow-hidden bg-[radial-gradient(var(--border-2)_1px,transparent_1px)] [background-size:14px_14px] md:block">
              <div className="absolute inset-x-0 top-0 z-10 flex h-[68px] items-center justify-between px-5">
                <div className="flex items-center gap-3.5">
                  <Badge
                    variant="secondary"
                    className="h-9 gap-2.5 px-3 text-[13px]"
                  >
                    <span className="inline-flex size-[22px] items-center justify-center rounded-full bg-border font-mono text-[9px]">
                      {workspace.initials}
                    </span>
                    {workspace.project}
                    <IconPlaceholder
                      lucide="ChevronDownIcon"
                      tabler="IconChevronDown"
                      hugeicons="ArrowDown01Icon"
                      phosphor="CaretDownIcon"
                      remixicon="RiArrowDownSLine"
                      className="size-3"
                    />
                  </Badge>
                  <span className="font-mono text-[13px] text-muted-foreground">
                    {workspace.zoom}
                  </span>
                </div>
                <div className="flex gap-3.5 text-foreground-2">
                  <IconPlaceholder
                    lucide="FolderIcon"
                    tabler="IconFolder"
                    hugeicons="Folder01Icon"
                    phosphor="FolderIcon"
                    remixicon="RiFolderLine"
                    className="size-4"
                  />
                  <IconPlaceholder
                    lucide="SearchIcon"
                    tabler="IconSearch"
                    hugeicons="SearchIcon"
                    phosphor="MagnifyingGlassIcon"
                    remixicon="RiSearchLine"
                    className="size-4"
                  />
                </div>
              </div>
              <div
                className="absolute top-0 left-1/2 -translate-x-1/2"
                style={{ width: workspace.stage.w, height: workspace.stage.h }}
              >
                <svg
                  width={workspace.stage.w}
                  height={workspace.stage.h}
                  viewBox="0 0 960 780"
                  className="absolute inset-0"
                  aria-hidden="true"
                >
                  <circle
                    cx="490"
                    cy="390"
                    r="240"
                    fill="none"
                    stroke="var(--border)"
                    strokeWidth="1.5"
                  />
                  <path
                    d="M490 90 V690 M190 390 H790 M317.2 217.2 L662.8 562.8 M662.8 217.2 L317.2 562.8 M317.2 217.2 H227.2 M662.8 217.2 H752.8 M317.2 562.8 H227.2 M662.8 562.8 H752.8"
                    fill="none"
                    stroke="var(--border)"
                    strokeWidth="1.5"
                    strokeDasharray="4 5"
                  />
                </svg>
                {workspace.ghosts.map(([x, y]) => (
                  <div
                    key={`${x}-${y}`}
                    className="absolute h-[50px] w-[66px] rounded-lg border border-border-2 bg-muted"
                    style={{ left: x, top: y }}
                  />
                ))}
                {workspace.nodes.map((n) => (
                  <Card
                    key={n.label}
                    elevation="raised"
                    className="absolute h-12 w-[92px] items-center justify-center gap-0 rounded-[10px] p-0 text-sm"
                    style={{ left: n.x, top: n.y }}
                  >
                    {n.label}
                  </Card>
                ))}
                <Card
                  elevation="raised"
                  className={`${wordmark} absolute h-12 w-[104px] items-center justify-center gap-0 rounded-[10px] p-0 text-[17px]`}
                  style={{ left: workspace.center.x, top: workspace.center.y }}
                >
                  {workspace.center.label}
                </Card>
                <span className="absolute top-[316px] left-[476px] size-7 rounded-full bg-brand shadow-[0_0_0_5px_var(--brand-soft)]" />
                {workspace.chips.map((c) => (
                  <div
                    key={`${c.x}-${c.y}`}
                    className="absolute flex items-center gap-2 rounded-[7px] border border-border bg-card px-2 py-1 text-[11px]"
                    style={{ left: c.x, top: c.y }}
                  >
                    <span className="flex items-center gap-1">
                      <span className="size-1.5 rounded-full bg-destructive" />
                      {c.a}
                    </span>
                    <span className="flex items-center gap-1">
                      <span className="size-1.5 rounded-full bg-info" />
                      {c.b}
                    </span>
                    <span className="flex items-center gap-1">
                      <span className="size-1.5 rounded-full bg-brand" />
                      {c.c}
                    </span>
                  </div>
                ))}
              </div>
              <div className="absolute bottom-4 left-5 flex items-center gap-2 font-mono text-[11px] text-muted-foreground">
                <IconPlaceholder
                  lucide="FolderIcon"
                  tabler="IconFolder"
                  hugeicons="Folder01Icon"
                  phosphor="FolderIcon"
                  remixicon="RiFolderLine"
                  className="size-3"
                />
                {workspace.path}
              </div>
            </div>

            <Card
              elevation="raised"
              className="m-2 shrink-0 gap-0 overflow-hidden rounded-2xl p-0 lg:w-[436px]"
            >
              <Tabs
                defaultValue="Home"
                className="border-b border-border-2 p-3.5"
              >
                <TabsList className="flex-wrap">
                  {workspace.tabs.map((t) => (
                    <TabsTrigger key={t} value={t}>
                      {t}
                    </TabsTrigger>
                  ))}
                </TabsList>
              </Tabs>
              <div className="flex flex-1 flex-col gap-3 overflow-hidden px-4 py-3.5 text-[13.5px] leading-[1.55] text-foreground-2">
                {workspace.thread.map((m) => {
                  if (m.kind === "user") {
                    return (
                      <div
                        key={m.text}
                        className="max-w-[300px] self-end rounded-xl border border-border-2 bg-muted px-4 py-3.5 text-foreground"
                      >
                        {m.text}
                      </div>
                    );
                  }
                  if (m.kind === "task") {
                    return (
                      <Card
                        key={m.name}
                        elevation="raised"
                        size="sm"
                        className="flex-row items-center gap-2.5 rounded-[10px] px-3.5 py-3 text-[13px]"
                      >
                        <span className="font-semibold whitespace-nowrap text-foreground">
                          {m.name}
                        </span>
                        <span className="min-w-0 flex-1 truncate text-muted-foreground">
                          {m.detail}
                        </span>
                        <Badge
                          variant={
                            m.status === "Running" ? "info" : "secondary"
                          }
                        >
                          {m.status}
                        </Badge>
                      </Card>
                    );
                  }
                  return (
                    <div key={m.text} className="flex gap-2.5">
                      <IconPlaceholder
                        lucide="SparklesIcon"
                        tabler="IconSparkles"
                        hugeicons="SparklesIcon"
                        phosphor="SparkleIcon"
                        remixicon="RiSparklingLine"
                        className="mt-1 size-3.5 shrink-0 text-muted-foreground"
                      />
                      <p>
                        {m.text}
                        <b className="font-semibold text-foreground">
                          {m.bold}
                        </b>
                        {m.tail}
                      </p>
                    </div>
                  );
                })}
              </div>
              <Card
                elevation="raised"
                className="m-3.5 mt-1.5 flex-row items-center gap-2.5 rounded-xl py-2.5 pr-2.5 pl-4"
              >
                <span className="min-w-0 flex-1 truncate text-sm">
                  {workspace.prompt}
                </span>
                <Button
                  elevation="raised"
                  size="icon"
                  className="size-[30px] rounded-lg"
                  aria-label="Send"
                >
                  <IconPlaceholder
                    lucide="ArrowUpIcon"
                    tabler="IconArrowUp"
                    hugeicons="ArrowUp02Icon"
                    phosphor="ArrowUpIcon"
                    remixicon="RiArrowUpLine"
                    className="size-3.5"
                  />
                </Button>
              </Card>
            </Card>
          </Card>

          <div className="mx-auto grid w-full max-w-[1420px] gap-8 md:grid-cols-3 md:gap-12">
            {hero.columns.map((c) => (
              <p
                key={c.title}
                className="text-[17px] leading-[1.45] text-foreground-2 md:text-[19px]"
              >
                <b className="font-semibold text-foreground">{c.title} — </b>
                {c.body}
              </p>
            ))}
          </div>
          <div className="mx-auto flex max-w-3xl flex-col items-center gap-6 text-center md:flex-row md:text-left">
            <p className="text-xl leading-snug text-foreground-2">
              {hero.closing}
            </p>
            <Button
              elevation="raised"
              size="lg"
              className="h-14 shrink-0 px-6 text-lg"
            >
              {hero.closingCta}
            </Button>
          </div>
        </section>

        {/* What Stockbreak does */}
        <section className="flex flex-col gap-7">
          <Eyebrow>{intro.eyebrow}</Eyebrow>
          <h2 className="text-[40px] leading-[1.12] font-normal tracking-[-1.4px] md:text-[56px]">
            <span className="text-foreground-2 dark:text-muted-foreground-2">
              {intro.lead}
            </span>
            <br />
            <span className="text-muted-foreground">{intro.muted}</span>
          </h2>
          <p className="max-w-[640px] text-[17px] leading-normal text-foreground-2 md:text-[19px]">
            {intro.body}
          </p>
        </section>

        {/* 1.0 Launch */}
        <section className="grid items-start gap-12 lg:grid-cols-[470px_1fr] lg:gap-16">
          <Copy
            {...launch}
            className="text-[34px] tracking-[-1px] md:text-[40px]"
          />
          <Card
            elevation="floating"
            className="gap-0 overflow-hidden rounded-[14px] bg-[radial-gradient(var(--border)_1px,transparent_1px)] [background-size:14px_14px] p-0 md:flex-row"
          >
            {stages.map((s, i) => (
              <div
                key={s.title}
                className={`flex min-h-[420px] flex-1 flex-col md:h-[520px] ${i > 0 ? "border-t-2 border-border md:border-t-0 md:border-l-2" : ""}`}
              >
                <div className="flex justify-between px-4 py-3.5 font-mono text-[11px] text-muted-foreground">
                  <span>{s.title}</span>
                  <span>{s.count}</span>
                </div>
                <div
                  className="flex flex-1 flex-col gap-3 px-3 pb-6"
                  style={{ paddingTop: Math.max(s.top - 48, 8) }}
                >
                  {s.tasks.map((t, ti) => (
                    <Card
                      key={t.name}
                      elevation="raised"
                      size="sm"
                      className={`h-[54px] flex-row items-center gap-3 rounded-[10px] px-3 py-0 ${"active" in t ? "" : "opacity-55"} ${s.pinLast && ti === s.tasks.length - 1 ? "mt-auto" : ""}`}
                    >
                      <span className="inline-flex size-7 items-center justify-center rounded-[7px] border border-border-2 bg-muted text-foreground-2">
                        <IconPlaceholder
                          lucide="SparklesIcon"
                          tabler="IconSparkles"
                          hugeicons="SparklesIcon"
                          phosphor="SparkleIcon"
                          remixicon="RiSparklingLine"
                          className="size-3.5"
                        />
                      </span>
                      <div className="min-w-0 flex-1">
                        <div className="truncate text-[13px] font-medium">
                          {t.name}
                        </div>
                        <div className="truncate text-[11px] text-muted-foreground">
                          {t.sub}
                        </div>
                      </div>
                      <IconPlaceholder
                        lucide="ArrowUpRightIcon"
                        tabler="IconArrowUpRight"
                        hugeicons="ArrowUpRight01Icon"
                        phosphor="ArrowUpRightIcon"
                        remixicon="RiArrowRightUpLine"
                        className="size-3 text-muted-foreground"
                      />
                    </Card>
                  ))}
                </div>
              </div>
            ))}
          </Card>
        </section>

        {/* 2.0 Grow */}
        <section className="grid items-start gap-12 lg:grid-cols-[1fr_520px] lg:gap-16">
          <div className="relative order-2 flex flex-col gap-4 lg:order-1 lg:block lg:h-[480px]">
            <Card
              elevation="floating"
              className="gap-0 rounded-2xl px-[26px] py-[22px] lg:absolute lg:top-[70px] lg:left-0 lg:h-[380px] lg:w-[600px]"
            >
              <div className="mb-3.5 flex items-center gap-3 text-sm">
                <span className="inline-flex size-7 items-center justify-center rounded-lg border border-border-2 bg-muted text-xs font-semibold">
                  {grow.email.initials}
                </span>
                {grow.email.title}
              </div>
              {grow.email.fields.map((f) => (
                <div
                  key={f.label}
                  className="flex gap-10 border-t border-border-2 py-3 text-[13px]"
                >
                  <span className="w-[60px] text-muted-foreground">
                    {f.label}
                  </span>
                  <span className="font-semibold">{f.value}</span>
                </div>
              ))}
              <p className="mt-4 text-[13px] leading-[1.6] text-foreground-2">
                {grow.email.body}
              </p>
            </Card>
            <Card
              elevation="floating"
              className="gap-0 overflow-hidden rounded-2xl p-0 lg:absolute lg:top-0 lg:left-[410px] lg:w-[300px]"
            >
              <div className="flex items-center justify-between border-b border-border-2 px-4 py-3 text-xs">
                {grow.report.title}
                <IconPlaceholder
                  lucide="PlusIcon"
                  tabler="IconPlus"
                  hugeicons="Add01Icon"
                  phosphor="PlusIcon"
                  remixicon="RiAddLine"
                  className="size-3 text-muted-foreground"
                />
              </div>
              <div className="p-[18px]">
                <div className="text-xs text-muted-foreground">
                  {grow.report.label}
                </div>
                <div className="flex items-baseline gap-2">
                  <span className="text-5xl tracking-[-2px]">
                    {grow.report.value}
                  </span>
                  <Badge variant="success">{grow.report.delta}</Badge>
                </div>
                <div className="mt-2 h-[26px] overflow-hidden rounded border border-border-2 bg-muted">
                  <div
                    className="h-full bg-brand"
                    style={{ width: `${grow.report.fill}%` }}
                  />
                </div>
                <div className="mt-2 flex gap-3.5 text-[10px] text-muted-foreground">
                  <span className="flex items-center gap-1">
                    <span className="size-1.5 rounded-full bg-brand" />
                    {grow.report.legend[0]}
                  </span>
                  <span className="flex items-center gap-1">
                    <span className="size-1.5 rounded-full bg-muted-foreground-2" />
                    {grow.report.legend[1]}
                  </span>
                </div>
                {grow.report.rows.map((r) => (
                  <div
                    key={r.label}
                    className="mt-3 flex items-center justify-between text-xs"
                  >
                    <span className="text-foreground-2">{r.label}</span>
                    <span className="flex items-center gap-1.5">
                      {r.badge ? (
                        <Badge
                          variant={
                            r.tone === "destructive" ? "destructive" : "success"
                          }
                        >
                          {r.badge}
                        </Badge>
                      ) : null}
                      {r.value}
                    </span>
                  </div>
                ))}
                <Button
                  variant="secondary"
                  elevation="raised"
                  size="sm"
                  className="mt-4 w-full"
                >
                  {grow.report.cta}
                </Button>
              </div>
            </Card>
          </div>
          <div className="order-1 lg:order-2">
            <Copy
              {...grow}
              className="text-[34px] tracking-[-1px] md:text-[50px]"
            />
          </div>
        </section>

        {/* 3.0 Operate */}
        <section className="grid items-start gap-12 lg:grid-cols-[500px_1fr] lg:gap-16">
          <Copy
            {...operate}
            className="text-[34px] tracking-[-1px] md:text-[50px]"
          />
          <div className="relative flex flex-col gap-4 lg:mt-24 lg:block lg:h-[640px]">
            <Card
              elevation="floating"
              className="gap-0 rounded-2xl px-[26px] py-7 lg:w-[760px]"
            >
              <div className="grid gap-8 sm:grid-cols-3">
                {metrics.map((m) => (
                  <StatTile
                    key={m.label}
                    className="w-auto border-0 bg-transparent p-0 shadow-none"
                    label={m.label}
                    value={m.value}
                    delta={m.delta}
                    meter={{
                      value: m.fill,
                      steps: meterSteps,
                      zones: meterZones,
                    }}
                  />
                ))}
              </div>
              <div className="mt-9 text-[15px]">{chart.title}</div>
              <div className="mt-3.5 flex gap-2.5">
                <div className="flex h-32 flex-col justify-between font-mono text-[10px] text-muted-foreground">
                  {chart.yAxis.map((y) => (
                    <span key={y}>{y}</span>
                  ))}
                </div>
                <div className="min-w-0 flex-1 lg:max-w-[640px]">
                  <svg
                    viewBox="0 0 690 150"
                    className="h-auto w-full overflow-visible"
                    role="img"
                    aria-label="Time series"
                  >
                    <path d={chart.grid} fill="none" stroke="var(--border-2)" />
                    <path
                      d={chart.ticks}
                      fill="none"
                      stroke="var(--foreground-2)"
                      strokeWidth="1.5"
                    />
                    {chart.series.map((s) => (
                      <path
                        key={s.label}
                        d={s.d}
                        fill="none"
                        stroke={s.color}
                        strokeWidth="2.5"
                      />
                    ))}
                  </svg>
                  <div className="mt-1 flex justify-between font-mono text-[10px] text-muted-foreground">
                    {chart.xAxis.map((x) => (
                      <span key={x}>{x}</span>
                    ))}
                  </div>
                </div>
              </div>
              <div className="mt-[18px] flex gap-4 text-[13px]">
                {chart.series.map((s) => (
                  <span key={s.label} className="flex items-center gap-1.5">
                    <span
                      className="size-2 rounded-full"
                      style={{ background: s.color }}
                    />
                    {s.label}
                  </span>
                ))}
              </div>
            </Card>
            <InsetPanel
              elevation="floating"
              className="lg:absolute lg:top-[160px] lg:right-0 lg:w-[380px]"
            >
              <InsetPanelHeader>
                <span className="size-3 rounded-full bg-brand" />
                Live joiners
              </InsetPanelHeader>
              <InsetPanelBody fade className="p-0">
                {joiners.map((j) => (
                  <div
                    key={j.name}
                    className="flex items-center gap-3.5 border-b border-border-2 p-4"
                  >
                    <Avatar className="size-10">
                      <AvatarFallback className="font-mono text-[13px]">
                        {j.initials}
                      </AvatarFallback>
                    </Avatar>
                    <div className="min-w-0 flex-1">
                      <div className="text-[15px] font-semibold">{j.name}</div>
                      <div className="text-[13px] text-foreground-2">
                        {j.place}
                      </div>
                    </div>
                    <Badge variant="info" className="gap-1">
                      <IconPlaceholder
                        lucide="CheckIcon"
                        tabler="IconCheck"
                        hugeicons="Tick02Icon"
                        phosphor="CheckIcon"
                        remixicon="RiCheckLine"
                        className="size-3"
                      />
                      Joined
                    </Badge>
                  </div>
                ))}
              </InsetPanelBody>
              <InsetPanelFooter className="justify-center text-sm text-foreground-2">
                <b className="font-medium text-foreground">
                  {joinersFooter.count}
                </b>
                &nbsp;{joinersFooter.text}
              </InsetPanelFooter>
            </InsetPanel>
          </div>
        </section>
      </main>

      {/* Tools */}
      <section
        className="relative isolate overflow-hidden pt-24 pb-20 text-center text-white md:pt-[190px]"
        style={{ background: tools.gradient }}
      >
        <Scene art={toolsArt} className="absolute inset-0 -z-10 size-full" />
        <div className={wrap}>
          <h2 className="text-[34px] leading-[1.15] font-normal tracking-[-1.3px] md:text-[54px]">
            {tools.title}
            <br />
            <span className="opacity-85">{tools.muted}</span>
          </h2>
          <p className="mx-auto mt-7 max-w-[600px] text-lg leading-[1.55] opacity-90">
            {tools.body}
          </p>
          <div className="mt-10 flex flex-col items-center gap-6 md:flex-row md:items-start md:justify-center md:gap-[30px]">
            {tools.points.map((p, i) => (
              <div
                key={p}
                className={`w-[250px] border-l border-white/35 px-5 text-left text-[17px] leading-normal ${i === tools.activePoint ? "text-white" : "text-white/60"}`}
              >
                {p}
              </div>
            ))}
          </div>
          <div className="mx-auto mt-14 max-w-[800px] rounded-[22px] border border-white/60 bg-sky-200/90 p-2.5 md:mt-[150px]">
            <Card
              elevation="floating"
              className="relative h-[470px] gap-0 overflow-hidden rounded-[14px] p-0 text-left"
            >
              <Card
                elevation="floating"
                className="absolute top-7 left-1/2 w-[270px] -translate-x-1/2 gap-0 rounded-xl px-[18px] py-4 md:left-[140px] md:translate-x-0"
              >
                {tools.groups.map((g, gi) => (
                  <div key={g.status}>
                    {gi > 0 ? <div className="my-3 h-px bg-border-2" /> : null}
                    <Badge
                      variant={g.tone as "warning" | "info" | "success"}
                      className="font-mono text-[10px]"
                    >
                      {g.status}
                    </Badge>
                    {g.items.map((it) => (
                      <div
                        key={it.name}
                        className="mt-2.5 flex justify-between text-xs"
                      >
                        <span>{it.name}</span>
                        <span className="text-[9px] text-muted-foreground uppercase">
                          {it.agent}
                        </span>
                      </div>
                    ))}
                  </div>
                ))}
              </Card>
              <div className="absolute inset-x-0 bottom-[18px] flex flex-wrap justify-center gap-2.5 px-3">
                {tools.dock.map((d) => (
                  <Card
                    key={d}
                    elevation="raised"
                    className="h-10 w-24 items-center justify-center gap-0 rounded-[10px] p-0 text-[13px]"
                  >
                    {d}
                  </Card>
                ))}
              </div>
            </Card>
          </div>
        </div>
      </section>

      {/* Guide */}
      <section
        className={`${wrap} flex flex-col items-center gap-8 py-24 text-center md:py-[170px]`}
      >
        <h2 className="text-[34px] leading-[1.15] font-normal tracking-[-1.4px] text-foreground-2 md:text-[56px] dark:text-muted-foreground-2">
          {guide.title}
        </h2>
        <p className="max-w-[560px] text-[19px] leading-normal text-foreground-2">
          {guide.body}
        </p>
        <Button
          elevation="raised"
          size="lg"
          className="h-[52px] px-[22px] text-[17px]"
        >
          {guide.cta}
        </Button>
        <div className="mt-10 grid w-full max-w-[880px] gap-x-10 gap-y-12 text-left sm:grid-cols-2">
          {guide.chapters.map((c) => (
            <div key={c.n} className="flex flex-col items-center gap-[18px]">
              <Card
                elevation="floating"
                className="w-full max-w-[376px] gap-0 rounded-2xl px-[22px] py-6"
              >
                <div className="text-[22px] leading-tight">
                  Chapter {c.n}
                  <br />
                  {c.title}
                </div>
                <div className="mt-[26px] mb-[18px] h-px bg-border-2" />
                <div className="font-mono text-[10px] text-muted-foreground">
                  Chapter {c.numeral}
                </div>
                <Scene
                  art={c.art}
                  className="mt-4 h-[250px] w-full overflow-hidden rounded-md"
                />
                <div className="mt-3 flex justify-between font-mono text-[10px] text-muted-foreground">
                  <span>by Stockbreak</span>
                  <span>2026</span>
                </div>
              </Card>
              <span className="font-mono text-xs text-muted-foreground">
                Read this chapter ({c.numeral})
              </span>
            </div>
          ))}
        </div>
        <Button variant="secondary" elevation="raised">
          {guide.download}
        </Button>
      </section>

      {/* Footer */}
      <footer className="relative overflow-hidden pt-8 pb-[200px]">
        <div
          className={`${wrap} grid items-start gap-14 lg:grid-cols-2 lg:gap-24 xl:px-[200px]`}
        >
          <div className="flex flex-col">
            <h2 className="text-[34px] leading-[1.15] font-normal tracking-[-1px] text-foreground-2 md:text-[46px] dark:text-muted-foreground-2">
              {footer.title}
              <br />
              <span className="text-muted-foreground">{footer.muted}</span>
            </h2>
            <div className="mt-14 flex flex-wrap gap-4 text-[17px]">
              <span className="text-muted-foreground">{header.lead}</span>
              {footer.howTo.map((h) => (
                <a key={h} href="#guide">
                  {h}
                </a>
              ))}
            </div>
            <div className="mt-8 flex gap-[100px] text-[17px]">
              {footer.columns.map((col) => (
                <div key={col[0]} className="flex flex-col gap-[18px]">
                  {col.map((l) => (
                    <a key={l} href="#top">
                      {l}
                    </a>
                  ))}
                </div>
              ))}
            </div>
            <div className="mt-6 flex gap-2.5">
              {footer.socials.map((s) => (
                <Button
                  key={s}
                  variant="secondary"
                  elevation="raised"
                  size="icon"
                  className="size-10 font-semibold"
                  aria-label={s}
                >
                  {s}
                </Button>
              ))}
            </div>
            <div className="mt-9 flex items-center gap-2 text-[13px] text-muted-foreground">
              Built on <Badge variant="secondary">{footer.builtOn}</Badge>{" "}
              {footer.network}
            </div>
            <div className="mt-3 text-[13px] text-muted-foreground-2">
              {footer.copyright}
            </div>
          </div>
          <Card
            elevation="floating"
            className="mx-auto w-full max-w-[360px] gap-0 rounded-[22px] p-2.5"
          >
            <div className="relative h-[460px] overflow-hidden rounded-[10px]">
              <Scene
                art={footerSceneArt}
                fit="xMidYMid slice"
                className="absolute inset-0 size-full"
              />
              <div className="absolute inset-x-2.5 bottom-2.5 rounded-lg bg-emerald-950/80 px-3.5 pt-3.5 pb-4 text-white">
                <div className="text-xl leading-tight">
                  {footer.card.lead}
                  <span className="opacity-70">{footer.card.muted}</span>
                </div>
                <Button variant="secondary" elevation="raised" className="mt-3">
                  {footer.card.cta}
                </Button>
              </div>
            </div>
          </Card>
        </div>
        <div className="absolute inset-x-0 bottom-0 h-[140px]">
          <Scene
            art={grassArt}
            fit="xMidYMax slice"
            className="absolute inset-0 size-full"
          />
          <div className="absolute inset-x-0 bottom-5 text-center text-xs text-emerald-950/70">
            {footer.hackathon}
          </div>
        </div>
      </footer>
    </div>
  );
}

// Sample data for the Cofounder-style long landing page (dark). Plain TS, no framework imports.

// Decorative pixel-art scenes of the Cofounder landing page: a fixed night palette (the board's illustration, not theme tokens).
// Each scene is a palette plus `x,y,w,h,paletteIndex` rects, drawn by the example as crisp SVG rects.

export type Pixels = { w: number; h: number; palette: string[]; rects: string };

export const skyArt: Pixels = {
  w: 2000,
  h: 1100,
  palette: [
    "#c3cad5",
    "#23699d",
    "#182f1c",
    "#1f3c22",
    "#1d3820",
    "#294526",
    "#102415",
    "#2e5027",
    "#23364e",
    "#255c91",
    "#374450",
    "#1e2023",
    "#1b3c5c",
    "#3b3c3f",
    "#26282a",
    "#2a2317",
    "#544426",
  ],
  rects:
    "1172,150,180,36,0 1136,186,288,36,0 1100,222,396,72,0 1208,114,108,36,0 1280,78,72,36,0 1100,258,396,36,1 1548,230,120,24,0 1524,254,192,24,0 1500,278,264,48,0 1572,206,72,24,0 1620,182,48,24,0 1500,302,264,24,1 948,520,120,24,0 924,544,192,24,0 900,568,264,48,0 972,496,72,24,0 1020,472,48,24,0 900,592,264,24,1 1798,330,120,24,0 1774,354,192,24,0 1750,378,264,48,0 1822,306,72,24,0 1870,282,48,24,0 1750,402,264,24,1 0,700,12,400,2 12,688,12,412,2 12,688,12,12,3 24,700,12,400,2 36,712,12,388,2 48,712,12,388,2 48,712,12,12,3 60,700,12,400,2 72,712,12,388,2 84,700,12,400,2 96,700,12,400,2 108,700,12,400,2 120,688,12,412,2 132,676,12,424,2 132,676,12,12,3 144,664,12,436,2 156,676,12,424,2 168,688,12,412,2 180,688,12,412,2 192,700,12,400,2 204,700,12,400,2 204,700,12,12,3 216,700,12,400,2 228,700,12,400,2 240,712,12,388,2 252,700,12,400,2 252,700,12,12,3 264,700,12,400,2 264,700,12,12,3 276,700,12,400,2 288,712,12,388,2 300,712,12,388,2 300,712,12,12,3 312,724,12,376,2 324,736,12,364,2 336,724,12,376,2 348,736,12,364,2 360,736,12,364,2 372,736,12,364,2 372,736,12,12,3 384,724,12,376,2 396,736,12,364,2 408,724,12,376,2 420,724,12,376,2 432,736,12,364,2 444,736,12,364,2 456,724,12,376,2 468,724,12,376,2 480,724,12,376,2 492,724,12,376,2 504,724,12,376,2 516,712,12,388,2 528,712,12,388,2 540,712,12,388,2 552,700,12,400,2 564,700,12,400,2 576,700,12,400,2 588,712,12,388,2 600,712,12,388,2 612,700,12,400,2 624,700,12,400,2 636,688,12,412,2 648,688,12,412,2 660,688,12,412,2 672,688,12,412,2 672,688,12,12,3 684,676,12,424,2 684,676,12,12,3 696,664,12,436,2 708,664,12,436,2 708,664,12,12,3 720,652,12,448,2 732,652,12,448,2 732,652,12,12,3 744,640,12,460,2 744,640,12,12,3 756,640,12,460,2 768,640,12,460,2 780,640,12,460,2 792,640,12,460,2 804,640,12,460,2 804,640,12,12,3 816,652,12,448,2 816,652,12,12,3 828,652,12,448,2 828,652,12,12,3 840,652,12,448,2 852,652,12,448,2 864,664,12,436,2 876,652,12,448,2 876,652,12,12,3 888,664,12,436,2 888,664,12,12,3 900,664,12,436,2 912,676,12,424,2 924,676,12,424,2 936,688,12,412,2 936,688,12,12,3 948,676,12,424,2 960,676,12,424,2 972,688,12,412,2 972,688,12,12,3 984,688,12,412,2 984,688,12,12,3 996,688,12,412,2 1008,688,12,412,2 1008,688,12,12,3 1020,676,12,424,2 1020,676,12,12,3 1032,676,12,424,2 1044,688,12,412,2 1056,688,12,412,2 1056,688,12,12,3 1068,676,12,424,2 1080,676,12,424,2 1092,688,12,412,2 1092,688,12,12,3 1104,676,12,424,2 1116,676,12,424,2 1116,676,12,12,3 1128,688,12,412,2 1140,700,12,400,2 1140,700,12,12,3 1152,712,12,388,2 1152,712,12,12,3 1164,724,12,376,2 1164,724,12,12,3 1176,736,12,364,2 1188,724,12,376,2 1188,724,12,12,3 1200,724,12,376,2 1212,724,12,376,2 1212,724,12,12,3 1224,724,12,376,2 1224,724,12,12,3 1236,712,12,388,2 1248,712,12,388,2 1260,724,12,376,2 1272,724,12,376,2 1272,724,12,12,3 1284,712,12,388,2 1284,712,12,12,3 1296,712,12,388,2 1296,712,12,12,3 1308,712,12,388,2 1308,712,12,12,3 1320,712,12,388,2 1332,712,12,388,2 1344,712,12,388,2 1344,712,12,12,3 1356,712,12,388,2 1368,724,12,376,2 1368,724,12,12,3 1380,712,12,388,2 1380,712,12,12,3 1392,724,12,376,2 1392,724,12,12,3 1404,724,12,376,2 1416,724,12,376,2 1416,724,12,12,3 1428,736,12,364,2 1428,736,12,12,3 1440,736,12,364,2 1452,736,12,364,2 1464,736,12,364,2 1476,724,12,376,2 1488,724,12,376,2 1488,724,12,12,3 1500,712,12,388,2 1512,700,12,400,2 1524,688,12,412,2 1524,688,12,12,3 1536,676,12,424,2 1548,664,12,436,2 1548,664,12,12,3 1560,676,12,424,2 1560,676,12,12,3 1572,688,12,412,2 1572,688,12,12,3 1584,688,12,412,2 1584,688,12,12,3 1596,676,12,424,2 1608,688,12,412,2 1620,688,12,412,2 1632,700,12,400,2 1632,700,12,12,3 1644,700,12,400,2 1656,688,12,412,2 1656,688,12,12,3 1668,688,12,412,2 1680,688,12,412,2 1692,688,12,412,2 1704,676,12,424,2 1716,688,12,412,2 1716,688,12,12,3 1728,688,12,412,2 1740,700,12,400,2 1752,700,12,400,2 1752,700,12,12,3 1764,700,12,400,2 1764,700,12,12,3 1776,700,12,400,2 1788,700,12,400,2 1788,700,12,12,3 1800,712,12,388,2 1800,712,12,12,3 1812,712,12,388,2 1824,724,12,376,2 1836,712,12,388,2 1836,712,12,12,3 1848,712,12,388,2 1860,712,12,388,2 1860,712,12,12,3 1872,700,12,400,2 1884,688,12,412,2 1884,688,12,12,3 1896,676,12,424,2 1908,688,12,412,2 1908,688,12,12,3 1920,676,12,424,2 1932,664,12,436,2 1944,664,12,436,2 1956,664,12,436,2 1968,664,12,436,2 1968,664,12,12,3 1980,664,12,436,2 1980,664,12,12,3 1992,664,12,436,2 1992,664,12,12,3 0,808,12,292,4 0,808,12,12,5 12,808,12,292,4 24,808,12,292,4 24,808,12,12,5 36,808,12,292,4 48,808,12,292,4 60,820,12,280,4 72,820,12,280,4 84,832,12,268,4 96,820,12,280,4 108,820,12,280,4 120,820,12,280,4 132,832,12,268,4 144,832,12,268,4 156,832,12,268,4 156,832,12,12,5 168,832,12,268,4 168,832,12,12,5 180,832,12,268,4 192,832,12,268,4 204,832,12,268,4 216,844,12,256,4 228,844,12,256,4 240,844,12,256,4 252,856,12,244,4 252,856,12,12,5 264,868,12,232,4 276,880,12,220,4 288,880,12,220,4 300,880,12,220,4 312,880,12,220,4 324,880,12,220,4 336,880,12,220,4 348,880,12,220,4 360,880,12,220,4 372,880,12,220,4 384,880,12,220,4 396,880,12,220,4 396,880,12,12,5 408,880,12,220,4 408,880,12,12,5 420,880,12,220,4 432,880,12,220,4 444,868,12,232,4 456,868,12,232,4 468,868,12,232,4 480,856,12,244,4 480,856,12,12,5 492,844,12,256,4 492,844,12,12,5 504,844,12,256,4 516,832,12,268,4 528,832,12,268,4 540,832,12,268,4 552,820,12,280,4 564,808,12,292,4 564,808,12,12,5 576,808,12,292,4 576,808,12,12,5 588,796,12,304,4 588,796,12,12,5 600,784,12,316,4 600,784,12,12,5 612,772,12,328,4 624,772,12,328,4 636,772,12,328,4 648,760,12,340,4 660,760,12,340,4 672,760,12,340,4 672,760,12,12,5 684,760,12,340,4 684,760,12,12,5 696,760,12,340,4 696,760,12,12,5 708,772,12,328,4 708,772,12,12,5 720,784,12,316,4 732,772,12,328,4 744,784,12,316,4 756,784,12,316,4 768,784,12,316,4 768,784,12,12,5 780,784,12,316,4 792,772,12,328,4 804,772,12,328,4 816,784,12,316,4 828,784,12,316,4 828,784,12,12,5 840,784,12,316,4 840,784,12,12,5 852,796,12,304,4 864,796,12,304,4 876,796,12,304,4 876,796,12,12,5 888,796,12,304,4 888,796,12,12,5 900,808,12,292,4 912,796,12,304,4 924,796,12,304,4 936,784,12,316,4 936,784,12,12,5 948,784,12,316,4 960,784,12,316,4 960,784,12,12,5 972,796,12,304,4 972,796,12,12,5 984,784,12,316,4 984,784,12,12,5 996,796,12,304,4 1008,784,12,316,4 1020,772,12,328,4 1020,772,12,12,5 1032,760,12,340,4 1032,760,12,12,5 1044,760,12,340,4 1044,760,12,12,5 1056,760,12,340,4 1068,772,12,328,4 1080,784,12,316,4 1080,784,12,12,5 1092,784,12,316,4 1104,796,12,304,4 1116,784,12,316,4 1128,772,12,328,4 1140,772,12,328,4 1152,784,12,316,4 1164,772,12,328,4 1176,772,12,328,4 1188,772,12,328,4 1188,772,12,12,5 1200,784,12,316,4 1200,784,12,12,5 1212,784,12,316,4 1212,784,12,12,5 1224,772,12,328,4 1236,760,12,340,4 1248,772,12,328,4 1260,760,12,340,4 1260,760,12,12,5 1272,760,12,340,4 1284,760,12,340,4 1284,760,12,12,5 1296,772,12,328,4 1296,772,12,12,5 1308,772,12,328,4 1320,784,12,316,4 1320,784,12,12,5 1332,784,12,316,4 1344,772,12,328,4 1344,772,12,12,5 1356,760,12,340,4 1356,760,12,12,5 1368,760,12,340,4 1380,760,12,340,4 1392,760,12,340,4 1404,772,12,328,4 1416,784,12,316,4 1416,784,12,12,5 1428,796,12,304,4 1428,796,12,12,5 1440,796,12,304,4 1440,796,12,12,5 1452,808,12,292,4 1464,820,12,280,4 1476,820,12,280,4 1488,820,12,280,4 1500,820,12,280,4 1512,808,12,292,4 1524,796,12,304,4 1524,796,12,12,5 1536,796,12,304,4 1548,796,12,304,4 1560,784,12,316,4 1572,772,12,328,4 1572,772,12,12,5 1584,772,12,328,4 1596,772,12,328,4 1608,772,12,328,4 1608,772,12,12,5 1620,784,12,316,4 1620,784,12,12,5 1632,784,12,316,4 1644,784,12,316,4 1644,784,12,12,5 1656,784,12,316,4 1668,784,12,316,4 1680,784,12,316,4 1692,784,12,316,4 1704,772,12,328,4 1716,784,12,316,4 1728,784,12,316,4 1740,772,12,328,4 1752,784,12,316,4 1752,784,12,12,5 1764,796,12,304,4 1776,808,12,292,4 1788,808,12,292,4 1800,796,12,304,4 1812,796,12,304,4 1824,796,12,304,4 1836,808,12,292,4 1848,796,12,304,4 1848,796,12,12,5 1860,808,12,292,4 1872,796,12,304,4 1872,796,12,12,5 1884,796,12,304,4 1896,808,12,292,4 1908,796,12,304,4 1920,796,12,304,4 1920,796,12,12,5 1932,796,12,304,4 1944,796,12,304,4 1944,796,12,12,5 1956,808,12,292,4 1968,808,12,292,4 1980,808,12,292,4 1992,796,12,304,4 720,976,12,12,2 396,892,12,12,2 1452,1000,12,12,2 192,988,12,12,6 1440,856,12,12,2 708,832,12,12,2 1440,964,12,12,2 1452,904,12,12,2 456,844,12,12,2 456,1084,12,12,2 1188,1036,12,12,6 192,820,12,12,2 120,868,12,12,6 816,940,12,12,2 1188,1024,12,12,7 1212,1036,12,12,2 1356,808,12,12,7 288,772,12,12,6 1512,832,12,12,7 1332,1048,12,12,2 924,916,12,12,2 1176,976,12,12,7 1632,976,12,12,7 1788,844,12,12,7 84,1084,12,12,7 1860,1012,12,12,2 492,1024,12,12,7 1656,1096,12,12,2 1740,796,12,12,2 648,1000,12,12,2 816,868,12,12,6 192,940,12,12,2 1476,784,12,12,7 204,916,12,12,6 60,868,12,12,7 1272,1084,12,12,6 132,988,12,12,2 132,904,12,12,2 1800,880,12,12,2 852,952,12,12,6 108,868,12,12,6 228,796,12,12,2 1644,772,12,12,6 1248,868,12,12,2 804,808,12,12,2 120,1084,12,12,7 960,892,12,12,6 1152,904,12,12,7 1596,904,12,12,2 1824,1012,12,12,2 312,988,12,12,2 828,916,12,12,2 720,868,12,12,7 792,952,12,12,7 1680,880,12,12,6 1272,976,12,12,7 60,904,12,12,2 1800,1000,12,12,6 180,1000,12,12,2 1020,928,12,12,7 1080,988,12,12,2 852,1036,12,12,7 60,976,12,12,6 60,892,12,12,7 1920,928,12,12,7 1812,988,12,12,7 540,892,12,12,6 960,1048,12,12,7 1824,856,12,12,7 1152,796,12,12,6 1740,1012,12,12,2 396,868,12,12,2 672,1000,12,12,7 732,880,12,12,6 1332,1000,12,12,2 288,796,12,12,2 984,880,12,12,2 684,928,12,12,6 240,880,12,12,2 1992,832,12,12,2 1380,856,12,12,6 360,772,12,12,2 576,880,12,12,2 552,1084,12,12,7 1044,1060,12,12,2 252,1060,12,12,2 1056,976,12,12,6 1284,868,12,12,2 828,928,12,12,7 1944,916,12,12,7 1284,976,12,12,7 108,916,12,12,6 612,760,12,12,7 1908,952,12,12,7 1716,1024,12,12,6 96,1036,12,12,7 1584,868,12,12,2 1044,1096,12,12,6 204,1084,12,12,2 876,796,12,12,6 132,772,12,12,2 1572,832,12,12,7 1764,772,12,12,6 1476,1036,12,12,6 516,952,12,12,7 732,1012,12,12,6 1608,964,12,12,7 156,988,12,12,6 1044,808,12,12,7 1656,940,12,12,6 1080,844,12,12,6 372,964,12,12,6 516,844,12,12,7 384,1072,12,12,6 1488,1000,12,12,2 1224,772,12,12,7 756,856,12,12,2 1608,952,12,12,7 156,940,12,12,7 0,1084,12,12,6 384,772,12,12,6 144,784,12,12,7 96,1084,12,12,2 264,952,12,12,2 1500,880,12,12,6 960,784,12,12,7 1176,1000,12,12,7 1800,868,12,12,7 804,832,12,12,7 1308,796,12,12,6 1704,760,12,12,2 1164,1060,12,12,6 1740,820,12,12,6 1140,928,12,12,2 1992,1060,12,12,2 1164,1000,12,12,6 1908,1096,12,12,7 156,892,12,12,2 1524,1048,12,12,2 960,916,12,12,2 1284,928,12,12,6 744,832,12,12,2 828,1024,12,12,2 216,1060,12,12,7 684,916,12,12,6 84,880,12,12,7 1716,1060,12,12,7 372,928,12,12,2 372,1072,12,12,2 1620,1060,12,12,7 324,1036,12,12,7 1728,964,12,12,6 1800,1024,12,12,6 1452,808,12,12,6 1188,772,12,12,2 276,976,12,12,6 1152,820,12,12,6 1044,1072,12,12,6 72,1084,12,12,6 1476,1072,12,12,2 520,600,30,120,8 526,608,6,6,9 560,630,30,90,8 566,638,6,6,9 600,648,30,72,8 606,656,6,6,9 640,660,30,60,8 646,668,6,6,9 680,660,30,60,8 686,668,6,6,9 720,660,30,60,8 726,668,6,6,9 760,600,30,120,8 766,608,6,6,9 800,660,30,60,8 806,668,6,6,9 840,630,30,90,8 846,638,6,6,9 880,660,30,60,8 886,668,6,6,9 920,660,30,60,8 926,668,6,6,9 960,648,30,72,8 966,656,6,6,9 1000,648,30,72,8 1006,656,6,6,9 1040,660,30,60,8 1046,668,6,6,9 760,560,18,160,10 766,520,6,40,10 1200,640,330,200,11 1216,656,298,168,12 1240,690,120,36,1 1380,740,100,30,1 1130,840,480,24,13 1160,864,420,14,14 1620,850,260,60,15 1630,860,240,14,16",
};

export const toolsArt: Pixels = {
  w: 2000,
  h: 1180,
  palette: ["#c3cad5", "#23699d", "#246ca2", "#182f1c", "#1f3c22", "#294526"],
  rects:
    "48,480,120,24,0 24,504,192,24,0 0,528,264,48,0 72,456,72,24,0 120,432,48,24,0 0,552,264,24,1 1772,400,180,36,0 1736,436,288,36,0 1700,472,396,72,0 1808,364,108,36,0 1880,328,72,36,0 1700,508,396,36,2 0,772,12,328,3 12,784,12,316,3 24,784,12,316,3 24,784,12,12,4 36,796,12,304,3 48,796,12,304,3 48,796,12,12,4 60,796,12,304,3 60,796,12,12,4 72,784,12,316,3 84,796,12,304,3 96,796,12,304,3 108,784,12,316,3 108,784,12,12,4 120,784,12,316,3 132,772,12,328,3 144,772,12,328,3 156,772,12,328,3 168,772,12,328,3 180,760,12,340,3 192,760,12,340,3 204,748,12,352,3 216,748,12,352,3 228,748,12,352,3 228,748,12,12,4 240,736,12,364,3 252,736,12,364,3 1988,504,12,12,5 1892,924,12,12,3 1928,492,12,12,5 1772,360,12,12,3 1892,840,12,12,3 1904,948,12,12,3 1976,492,12,12,3 1832,744,12,12,4 1820,708,12,12,3 1784,324,12,12,5 1988,792,12,12,3 1808,120,12,12,3 1832,444,12,12,3 1820,564,12,12,4 1832,948,12,12,5 1832,396,12,12,5 1832,708,12,12,4 1760,672,12,12,4 1820,336,12,12,4 1784,624,12,12,4 1988,120,12,12,5 1880,216,12,12,4 1892,588,12,12,4 1880,396,12,12,4 1940,384,12,12,3 1856,144,12,12,5 1892,732,12,12,3 1964,756,12,12,4 1904,1008,12,12,3 1928,180,12,12,5 1820,420,12,12,3 1844,828,12,12,4 1952,660,12,12,5 1856,828,12,12,3 1976,684,12,12,4 1772,780,12,12,3 1832,636,12,12,5 1988,672,12,12,3 1880,540,12,12,5 1964,252,12,12,4 1880,588,12,12,3 1784,348,12,12,5 1868,852,12,12,3 1772,240,12,12,5 1964,732,12,12,3 1844,648,12,12,4 1928,756,12,12,3 1772,168,12,12,4 1880,432,12,12,3 1976,312,12,12,5 1916,276,12,12,3 1916,684,12,12,3 1772,756,12,12,4 1808,816,12,12,5 1820,912,12,12,4 1940,600,12,12,4 1856,564,12,12,4 1904,336,12,12,3 1904,936,12,12,3 1940,636,12,12,3 1784,864,12,12,4 1952,960,12,12,5 1892,216,12,12,4 1976,168,12,12,4 1892,972,12,12,5 1856,864,12,12,4 1868,636,12,12,5 1820,1008,12,12,3 1940,960,12,12,4 1880,540,12,12,4 1868,888,12,12,5 1892,648,12,12,4 1892,744,12,12,4 1820,804,12,12,4 1880,912,12,12,3 1952,372,12,12,3 1892,852,12,12,4 1784,756,12,12,3 1988,1008,12,12,5 1916,576,12,12,5 1964,528,12,12,5 1760,420,12,12,3 1976,792,12,12,5 1820,456,12,12,5 1820,180,12,12,4 1844,372,12,12,3 1808,288,12,12,4 1820,852,12,12,3 1964,168,12,12,4 1928,648,12,12,4",
};

export const chapter1Art: Pixels = {
  w: 376,
  h: 250,
  palette: [
    "#1a3451",
    "#7c3e1d",
    "#5f3022",
    "#8d4a20",
    "#673722",
    "#5f5f65",
    "#4e281f",
    "#6d4d17",
  ],
  rects:
    "0,0,376,250,0 68,170,120,24,1 44,194,192,24,1 20,218,264,48,1 92,146,72,24,1 140,122,48,24,1 20,242,264,24,2 254,180,120,24,3 230,204,192,24,3 206,228,264,48,3 278,156,72,24,3 326,132,48,24,3 206,252,264,24,4 176,40,24,100,5 176,28,24,12,6 182,140,12,30,7",
};

export const chapter2Art: Pixels = {
  w: 376,
  h: 250,
  palette: ["#495b6d", "#1b4466", "#c3cad5", "#23699d", "#3a3f44", "#594719"],
  rects:
    "0,0,376,250,0 24,24,328,190,1 108,50,120,24,2 84,74,192,24,2 60,98,264,48,2 132,26,72,24,2 180,2,48,24,2 60,122,264,24,3 24,210,328,14,4 148,160,14,50,5 208,140,14,70,5",
};

export const chapter3Art: Pixels = {
  w: 376,
  h: 250,
  palette: ["#193859", "#c3cad5", "#23699d", "#545c66", "#3f444a"],
  rects:
    "0,0,376,250,0 68,30,120,24,1 44,54,192,24,1 20,78,264,48,1 92,6,72,24,1 140,-18,48,24,1 20,102,264,24,2 234,80,120,24,1 210,104,192,24,1 186,128,264,48,1 258,56,72,24,1 306,32,48,24,1 186,152,264,24,2 138,180,100,40,3 178,130,20,50,4",
};

export const chapter4Art: Pixels = {
  w: 376,
  h: 250,
  palette: ["#193e64", "#c3cad5", "#23699d", "#254426", "#241f19"],
  rects:
    "0,0,376,250,0 88,30,120,24,1 64,54,192,24,1 40,78,264,48,1 112,6,72,24,1 160,-18,48,24,1 40,102,264,24,2 0,200,376,50,3 185,40,6,160,4 118,60,140,6,4",
};

export const footerSceneArt: Pixels = {
  w: 340,
  h: 460,
  palette: [
    "#183c63",
    "#c3cad5",
    "#23699d",
    "#254426",
    "#2e1f0e",
    "#614b13",
    "#182f1c",
    "#0c0c0c",
  ],
  rects:
    "0,0,340,460,0 228,60,120,24,1 204,84,192,24,1 180,108,264,48,1 252,36,72,24,1 300,12,48,24,1 180,132,264,24,2 0,380,340,80,3 120,120,120,120,4 96,144,24,72,5 240,144,24,72,5 144,96,72,24,5 144,240,72,24,5 176,264,8,120,6 170,120,20,20,7",
};

export const grassArt: Pixels = {
  w: 2000,
  h: 140,
  palette: ["#365521", "#416521", "#2e5027", "#4d7521"],
  rects:
    "0,40,12,100,0 12,52,12,88,0 24,64,12,76,0 36,64,12,76,0 48,64,12,76,0 60,64,12,76,0 72,52,12,88,0 84,64,12,76,0 84,64,12,12,1 96,64,12,76,0 108,52,12,88,0 120,64,12,76,0 132,52,12,88,0 144,64,12,76,0 156,64,12,76,0 156,64,12,12,1 168,52,12,88,0 168,52,12,12,1 180,40,12,100,0 192,40,12,100,0 204,40,12,100,0 204,40,12,12,1 216,28,12,112,0 228,28,12,112,0 228,28,12,12,1 240,28,12,112,0 240,28,12,12,1 252,16,12,124,0 252,16,12,12,1 264,28,12,112,0 276,40,12,100,0 276,40,12,12,1 288,40,12,100,0 300,52,12,88,0 300,52,12,12,1 312,64,12,76,0 324,64,12,76,0 336,64,12,76,0 336,64,12,12,1 348,52,12,88,0 348,52,12,12,1 360,64,12,76,0 360,64,12,12,1 372,52,12,88,0 384,52,12,88,0 396,52,12,88,0 408,40,12,100,0 408,40,12,12,1 420,40,12,100,0 432,40,12,100,0 432,40,12,12,1 444,40,12,100,0 444,40,12,12,1 456,40,12,100,0 456,40,12,12,1 468,40,12,100,0 480,40,12,100,0 480,40,12,12,1 492,28,12,112,0 504,28,12,112,0 516,28,12,112,0 528,16,12,124,0 540,28,12,112,0 552,28,12,112,0 564,28,12,112,0 564,28,12,12,1 576,16,12,124,0 588,28,12,112,0 600,40,12,100,0 600,40,12,12,1 612,40,12,100,0 612,40,12,12,1 624,40,12,100,0 636,28,12,112,0 648,28,12,112,0 660,28,12,112,0 672,28,12,112,0 684,40,12,100,0 684,40,12,12,1 696,40,12,100,0 708,52,12,88,0 708,52,12,12,1 720,52,12,88,0 732,52,12,88,0 744,52,12,88,0 756,64,12,76,0 768,64,12,76,0 768,64,12,12,1 780,64,12,76,0 780,64,12,12,1 792,52,12,88,0 804,52,12,88,0 816,40,12,100,0 816,40,12,12,1 828,40,12,100,0 840,52,12,88,0 840,52,12,12,1 852,64,12,76,0 864,64,12,76,0 864,64,12,12,1 876,52,12,88,0 888,52,12,88,0 888,52,12,12,1 900,64,12,76,0 912,52,12,88,0 924,52,12,88,0 924,52,12,12,1 936,52,12,88,0 948,52,12,88,0 960,52,12,88,0 960,52,12,12,1 972,64,12,76,0 972,64,12,12,1 984,52,12,88,0 996,40,12,100,0 1008,28,12,112,0 1020,16,12,124,0 1032,16,12,124,0 1044,16,12,124,0 1044,16,12,12,1 1056,16,12,124,0 1068,16,12,124,0 1080,16,12,124,0 1092,16,12,124,0 1104,28,12,112,0 1116,16,12,124,0 1128,16,12,124,0 1140,16,12,124,0 1152,16,12,124,0 1152,16,12,12,1 1164,16,12,124,0 1164,16,12,12,1 1176,16,12,124,0 1188,16,12,124,0 1188,16,12,12,1 1200,28,12,112,0 1200,28,12,12,1 1212,16,12,124,0 1224,28,12,112,0 1236,16,12,124,0 1248,28,12,112,0 1260,40,12,100,0 1272,28,12,112,0 1272,28,12,12,1 1284,16,12,124,0 1296,16,12,124,0 1296,16,12,12,1 1308,28,12,112,0 1320,40,12,100,0 1332,52,12,88,0 1344,64,12,76,0 1344,64,12,12,1 1356,52,12,88,0 1356,52,12,12,1 1368,52,12,88,0 1380,52,12,88,0 1392,52,12,88,0 1392,52,12,12,1 1404,64,12,76,0 1416,64,12,76,0 1428,52,12,88,0 1428,52,12,12,1 1440,52,12,88,0 1440,52,12,12,1 1452,64,12,76,0 1464,52,12,88,0 1476,40,12,100,0 1488,52,12,88,0 1500,64,12,76,0 1512,64,12,76,0 1524,64,12,76,0 1536,64,12,76,0 1548,64,12,76,0 1548,64,12,12,1 1560,52,12,88,0 1560,52,12,12,1 1572,52,12,88,0 1584,52,12,88,0 1596,52,12,88,0 1596,52,12,12,1 1608,52,12,88,0 1620,52,12,88,0 1632,64,12,76,0 1644,64,12,76,0 1656,64,12,76,0 1668,64,12,76,0 1680,52,12,88,0 1680,52,12,12,1 1692,52,12,88,0 1692,52,12,12,1 1704,52,12,88,0 1704,52,12,12,1 1716,40,12,100,0 1728,52,12,88,0 1740,52,12,88,0 1752,52,12,88,0 1752,52,12,12,1 1764,52,12,88,0 1764,52,12,12,1 1776,52,12,88,0 1788,52,12,88,0 1788,52,12,12,1 1800,64,12,76,0 1812,52,12,88,0 1812,52,12,12,1 1824,64,12,76,0 1836,64,12,76,0 1836,64,12,12,1 1848,64,12,76,0 1860,52,12,88,0 1872,40,12,100,0 1872,40,12,12,1 1884,40,12,100,0 1884,40,12,12,1 1896,52,12,88,0 1908,64,12,76,0 1920,64,12,76,0 1920,64,12,12,1 1932,64,12,76,0 1944,64,12,76,0 1956,52,12,88,0 1968,40,12,100,0 1980,40,12,100,0 1992,40,12,100,0 420,62,12,12,2 1872,86,12,12,2 360,110,12,12,3 240,62,12,12,3 144,74,12,12,2 1692,110,12,12,3 144,98,12,12,2 1800,74,12,12,3 1284,62,12,12,2 336,98,12,12,2 996,98,12,12,3 792,62,12,12,3 948,122,12,12,2 852,122,12,12,3 564,86,12,12,2 1044,98,12,12,2 1284,74,12,12,3 1584,86,12,12,3 564,74,12,12,3 1212,98,12,12,2 912,98,12,12,3 1620,86,12,12,2 276,86,12,12,3 300,86,12,12,3 168,122,12,12,2 1572,62,12,12,3 12,50,12,12,3 588,62,12,12,2 1668,86,12,12,3 540,74,12,12,3 1932,62,12,12,3 108,50,12,12,2 1980,110,12,12,2 300,50,12,12,2 1260,50,12,12,2 1800,86,12,12,2 360,86,12,12,2 1788,74,12,12,3 1452,110,12,12,2 1968,110,12,12,3 336,122,12,12,3 360,50,12,12,2 1536,74,12,12,2 1044,50,12,12,2 1932,110,12,12,3 816,62,12,12,2 228,62,12,12,3 360,62,12,12,3 1488,122,12,12,2 552,50,12,12,3 288,98,12,12,3 1896,62,12,12,3 1056,50,12,12,2 108,62,12,12,3 1908,50,12,12,2 624,122,12,12,3 1944,86,12,12,2 1284,86,12,12,3 756,62,12,12,2 816,50,12,12,2 540,110,12,12,3 168,50,12,12,3 480,98,12,12,3 120,122,12,12,3 84,74,12,12,2 660,110,12,12,3 708,86,12,12,3 420,74,12,12,3 792,122,12,12,2 1164,98,12,12,2 528,122,12,12,3 852,122,12,12,3 576,74,12,12,3 1608,62,12,12,3 1560,86,12,12,3 408,98,12,12,2 1524,86,12,12,3 228,86,12,12,2 492,50,12,12,2 1164,74,12,12,2 156,98,12,12,2 600,98,12,12,3 1836,50,12,12,3 60,50,12,12,2 1932,122,12,12,2 300,98,12,12,2 540,74,12,12,3 960,86,12,12,3 984,110,12,12,2 708,122,12,12,3 864,50,12,12,2 744,50,12,12,2 960,74,12,12,2 960,50,12,12,2 1356,122,12,12,3 528,62,12,12,3 864,86,12,12,3 1080,62,12,12,3 936,62,12,12,2 1908,74,12,12,2 1416,74,12,12,2 276,62,12,12,2 948,98,12,12,2 1356,50,12,12,3 744,122,12,12,2 348,98,12,12,3 996,122,12,12,2 1548,86,12,12,2 1032,62,12,12,3 396,110,12,12,3 1332,110,12,12,2 1212,110,12,12,3 1344,74,12,12,2 876,110,12,12,2 240,50,12,12,2 1392,122,12,12,2 660,98,12,12,3 1944,74,12,12,2 60,122,12,12,2 1788,122,12,12,3",
};

export function pixelRects(p: Pixels) {
  return p.rects.split(" ").map((r) => {
    const [x, y, w, h, c] = r.split(",").map(Number) as [
      number,
      number,
      number,
      number,
      number,
    ];
    return { x, y, w, h, fill: p.palette[c] as string };
  });
}

export type Link = { label: string; href: string };
export type Row = { index: string; title: string };

export const header = {
  lead: "How to",
  steps: [
    { label: "Start", href: "#start" },
    { label: "Build", href: "#build" },
    { label: "Sell", href: "#sell" },
    { label: "Scale", href: "#scale" },
  ] satisfies Link[],
  links: [
    { label: "Resources", href: "#resources" },
    { label: "Pricing", href: "#pricing" },
  ] satisfies Link[],
  cta: "Create an index",
};

export const sky = {
  title: "Stockbreak lets you launch an entire index with AI",
  body: "Start with an AI research thesis, then hand off weights, vault setup, rebalancing, social and fees to agents.",
  primary: "Create an index",
  secondary: "Explore indexes",
  /** Fixed night gradient behind the pixel scene. */
  gradient: "linear-gradient(180deg, #173554 0%, #163e62 55%, #194e74 100%)",
  tasks: [
    { label: "Task running", name: "rebalance NVDAx" },
    { label: "Task completed", name: "Research: megacaps" },
    { label: "Task completed", name: "Feed card + Blink" },
  ],
};

export const hero = {
  lead: "Stockbreak is an index launchpad",
  muted: "designed to turn a stock thesis into a token",
  columns: [
    {
      title: "Agentic departments",
      body: "Stockbreak is organised like an index fund — research, vault, keeper and social, with shared context.",
    },
    {
      title: "Human in the loop",
      body: "Agents work alongside you, and every on-chain action waits for your signature before it moves funds.",
    },
    {
      title: "Fully extensible",
      body: "Connect over MCP, bring your own agent wallet, or drive it from Claude, ChatGPT or your own script.",
    },
  ],
  closing:
    "Bring your thesis into the index launchpad and start with the next concrete step.",
  closingCta: "Start in Stockbreak",
};

/** The agent workspace card. Stage coordinates are for a 960x780 canvas (ring centre 490,390). */
export const workspace = {
  project: "Magnificent Four…",
  initials: "SB",
  zoom: "Z 60%",
  path: "stockbreak/indexes/magnificent-four",
  stage: { w: 960, h: 780 },
  center: { x: 438, y: 362, label: "Stockbreak" },
  nodes: [
    { label: "Research", x: 444, y: 126 },
    { label: "Rebalance", x: 444, y: 606 },
    { label: "Vault", x: 204, y: 366 },
    { label: "Keeper", x: 684, y: 366 },
    { label: "Index", x: 271, y: 193 },
    { label: "Fees", x: 617, y: 193 },
    { label: "Social", x: 271, y: 539 },
    { label: "Pre-IPO", x: 617, y: 539 },
  ],
  /** Status chips (failed, running, done) next to a node. */
  chips: [
    { x: 287, y: 165, a: 3, b: 2, c: 2 },
    { x: 693, y: 553, a: 4, b: 4, c: 3 },
    { x: 480, y: 670, a: 4, b: 3, c: 2 },
  ],
  ghosts: [
    [97, 193],
    [177, 193],
    [773, 193],
    [853, 193],
    [117, 573],
    [793, 573],
    [370, 20],
    [550, 20],
    [370, 730],
    [550, 730],
  ] as [number, number][],
  tabs: ["Home", "Index", "Vault", "Agents", "Context"],
  thread: [
    {
      kind: "assistant",
      text: "That's a great way to check the thesis. I'm screening the megacaps against your mandate — drift, liquidity on Jupiter, and whether a pre-IPO sleeve fits. Once the weights are set, I'll simulate a 30-day rebalance. ",
      bold: "I'll bring you the transaction to sign before anything moves.",
    },
    {
      kind: "task",
      name: "Research agent",
      detail: "Screening AAPLx, NVDAx, TSLAx — liquidity",
      status: "Running",
    },
    {
      kind: "task",
      name: "Vault",
      detail: "Preparing join transaction for 50 USDC",
      status: "Queued",
    },
    {
      kind: "user",
      text: "The thesis is ready. Can you turn it into an index and share it?",
    },
    {
      kind: "assistant",
      text: "Absolutely. I'm turning the thesis into a mandate: drift 5%, 1% management fee, keeper allowed. ",
      bold: "You'll review the weights before anything goes on-chain.",
      tail: " Then I'll prepare the feed card and the Blink.",
    },
    {
      kind: "task",
      name: "Index capability",
      detail: "Writing the mandate and weights…",
      status: "Running",
    },
    {
      kind: "task",
      name: "Social capability",
      detail: "Preparing feed card and Blink…",
      status: "Queued",
    },
  ] as {
    kind: "assistant" | "task" | "user";
    text?: string;
    bold?: string;
    tail?: string;
    name?: string;
    detail?: string;
    status?: string;
  }[],
  prompt: "How are the megacaps doing vs SPYx",
};

export const intro = {
  eyebrow: "What Stockbreak does",
  lead: "Keep researching the thesis.",
  muted: "Put Stockbreak to work on the index.",
  body: "Start with the outcome you need. Stockbreak brings the right index context and capabilities together, then keeps you in control of what goes on-chain.",
};

export const launch = {
  eyebrow: "1.0 — Launch",
  lead: "Stockbreak launches",
  muted: "an index with you",
  body: "Give Stockbreak the thesis you built. It turns that context into the mandate, weights, token and launch materials you need to go to market.",
  rows: [
    { index: "1.1", title: "Thesis and weights" },
    { index: "1.2", title: "Index identity" },
    { index: "1.3", title: "Vault deployment" },
    { index: "1.4", title: "Launch content" },
  ] satisfies Row[],
};

export const stages = [
  {
    title: "Thesis stage",
    count: "1/1",
    top: 220,
    pinLast: false,
    tasks: [{ name: "Initial thesis", sub: "User task", active: true }],
  },
  {
    title: "Mandate stage",
    count: "0/3",
    top: 160,
    pinLast: false,
    tasks: [
      { name: "Pick tokens + weights", sub: "Agent task" },
      { name: "Set drift + fees", sub: "Agent task" },
      { name: "Review mandate", sub: "Agent requests approval" },
    ],
  },
  {
    title: "Launch stage",
    count: "0/4",
    top: 60,
    pinLast: true,
    tasks: [
      { name: "Name + ticker", sub: "User task" },
      { name: "Deploy vault", sub: "Agent requests approval" },
      { name: "Feed card", sub: "Agent task" },
      { name: "Share Blink", sub: "Agent task" },
    ],
  },
];

export const grow = {
  eyebrow: "2.0 — Grow",
  lead: "Stockbreak finds the right holders",
  muted: "and gives them a reason to care",
  body: "Stockbreak researches the market, finds promising communities, and runs coordinated growth work with your index context built in.",
  rows: [
    { index: "2.1", title: "Community research" },
    { index: "2.2", title: "Holder discovery" },
    { index: "2.3", title: "Outreach" },
    { index: "2.4", title: "Feed posts and Blinks" },
  ] satisfies Row[],
  email: {
    title: "Share preview",
    initials: "SB",
    fields: [
      { label: "To", value: "Sarah Chen  sarah@acme.com" },
      { label: "From", value: "Dewi Lestari  dewi@stockbreak.fun" },
      { label: "Subject", value: "Join the Magnificent Four index" },
    ],
    body: "Hey Sarah, I have been following how the megacaps track SPYx, and built an index around it. Every holder can rebalance with one signature, and the keeper handles drift at 5%. It is live on devnet if you want to look at the weights before joining the vault.",
  },
  report: {
    title: "Index Campaign Report",
    label: "Join rate",
    value: "58%",
    delta: "+12%",
    fill: 58,
    legend: ["Joined 47", "Viewed 34"],
    rows: [
      { label: "Audience", value: "—" },
      { label: "Sent", value: "81" },
      { label: "Delivered", value: "79" },
      { label: "Bounced", value: "2", badge: "10%", tone: "destructive" },
      { label: "Replied", value: "6", badge: "6%", tone: "success" },
    ],
    cta: "View details",
  },
};

export const operate = {
  eyebrow: "3.0 — Operate",
  lead: "Stockbreak keeps the index moving",
  muted: "after launch",
  body: "Bring rebalancing, analytics, holder support and recurring keeper work into Stockbreak without giving up control. The same mandate keeps every part of the index moving together.",
  rows: [
    { index: "3.1", title: "Vault incorporation" },
    { index: "3.2", title: "Index analytics" },
    { index: "3.3", title: "Holder support" },
    { index: "3.4", title: "Recurring rebalances" },
  ] satisfies Row[],
};

/** Segmented meters: 44 steps, brand to 20, warning to 36, destructive after. */
export const metrics = [
  { label: "Joins", value: "234", delta: "+34%", fill: 28 / 44 },
  {
    label: "Daily active holders",
    value: "10.291",
    delta: "+8%",
    fill: 33 / 44,
  },
  { label: "AUM (USDC)", value: "49.182", delta: "+37%", fill: 38 / 44 },
];
export const meterSteps = 44;
export const meterZones = [
  { upTo: 20 / 44, color: "var(--brand)" },
  { upTo: 36 / 44, color: "var(--warning)" },
  { upTo: 1, color: "var(--destructive)" },
];

export const chart = {
  title: "Time Series",
  yAxis: ["400k", "300k", "200k", "100k"],
  xAxis: ["0 d", "5 d", "10 d", "15 d", "20 d", "25 d"],
  grid: "M0 120 H690 M0 86 H690 M0 52 H690 M0 18 H690",
  ticks:
    "M0 118 L0 125 M115 118 L115 125 M230 118 L230 125 M345 118 L345 125 M460 118 L460 125 M575 118 L575 125",
  series: [
    {
      label: "Week 1",
      color: "var(--chart-1)",
      d: "M0 86 L60 70 L120 48 L200 48 L250 36 L330 36 L400 24 L480 24 L560 24 L690 22",
    },
    {
      label: "Week 2",
      color: "var(--brand)",
      d: "M0 95 L60 85 L120 70 L200 70 L250 60 L330 60 L400 62 L480 48 L560 48 L690 40",
    },
    {
      label: "Week 3",
      color: "var(--info)",
      d: "M0 100 L60 100 L120 100 L200 102 L250 102 L330 100 L400 100 L480 100 L560 92 L690 92",
    },
  ],
};

export const joiners = [
  { name: "Noah Garcia", place: "Lisbon, PT", initials: "NG" },
  { name: "Emily Rodriguez", place: "Jakarta, ID", initials: "ER" },
  { name: "Sarah Chen", place: "Singapore, SG", initials: "SC" },
  { name: "Jordan Brown", place: "Denver, CO", initials: "JB" },
  { name: "Maya Kim", place: "Austin, TX", initials: "MK" },
];
export const joinersFooter = {
  count: "2,846",
  text: "people joined an index this week",
};

export const tools = {
  title: "All the tools and systems",
  muted: "your index needs",
  body: "Give agents the context, tools and approvals they need to keep index work moving.",
  points: [
    "You stay in control, nothing ships without your signature",
    "Run multiple tasks in the background at the same time.",
    "Customize agents with apps, skills, and schedules",
  ],
  activePoint: 1,
  gradient: "linear-gradient(180deg, #173554 0%, #163e62 55%, #194e74 100%)",
  groups: [
    {
      status: "Ready to review",
      tone: "warning",
      items: [{ name: "ICP analysis", agent: "Research agent" }],
    },
    {
      status: "Running",
      tone: "info",
      items: [{ name: "Q1 analyst report", agent: "Vault agent" }],
    },
    {
      status: "Completed",
      tone: "success",
      items: [
        { name: "Q4 drift review", agent: "Keeper agent" },
        { name: "Rebalance playbook v2", agent: "Research agent" },
        { name: "Fee conversion study", agent: "Vault agent" },
      ],
    },
  ],
  dock: ["Research", "Vault", "Keeper", "Index", "Social", "Fees", "Pre-IPO"],
};

export const guide = {
  title: "Learn how to launch an index",
  body: "Read the guide, then let Stockbreak turn each step into a roadmap, tasks, and agents.",
  cta: "Put the guide to work",
  download: "Download full guide",
  chapters: [
    { n: 1, title: "How To Launch", numeral: "I", art: chapter1Art },
    { n: 2, title: "How To Research", numeral: "II", art: chapter2Art },
    { n: 3, title: "How To Share", numeral: "III", art: chapter3Art },
    { n: 4, title: "How To Operate", numeral: "IV", art: chapter4Art },
  ] as {
    n: number;
    title: string;
    numeral: string;
    art: Pixels;
  }[],
};

export const footer = {
  title: "Run an entire index",
  muted: "with AI agents",
  howTo: ["How to launch", "How to research", "How to share", "How to operate"],
  columns: [
    ["Homepage", "Resources", "Pricing", "Careers"],
    ["Privacy Policy", "Terms of Service", "Docs", "Support"],
  ],
  socials: ["X", "in"],
  builtOn: "Solana",
  network: "devnet",
  copyright: "Copyright © 2026 Stockbreak",
  card: {
    lead: "Stockbreak is an index launchpad ",
    muted: "designed to run an entire fund.",
    cta: "Create an index",
  },
  hackathon: "Made for the Stocklana hackathon",
};

<script setup lang="ts">
import {
  ArrowUpIcon,
  ArrowUpRightIcon,
  CheckIcon,
  ChevronDownIcon,
  FolderIcon,
  PlusIcon,
  SearchIcon,
  SparklesIcon,
} from "@lucide/vue";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { FeatureRow } from "@/components/ui/feature-row";
import {
  InsetPanel,
  InsetPanelBody,
  InsetPanelFooter,
  InsetPanelHeader,
} from "@/components/ui/inset-panel";
import { StatTile } from "@/components/ui/stat-tile";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  chart,
  footer,
  footerSceneArt,
  grassArt,
  grow,
  guide,
  header,
  hero,
  intro,
  joiners,
  joinersFooter,
  launch,
  metrics,
  meterSteps,
  meterZones,
  operate,
  type Pixels,
  pixelRects,
  sky,
  skyArt,
  stages,
  tools,
  toolsArt,
  workspace,
} from "./data";

const wordmark = "font-['Instrument_Serif',Georgia,serif]";
const glass = "border-white/45 bg-white/25 text-white shadow-none hover:bg-white/35";
const wrap = "mx-auto w-full max-w-[1700px] px-5 md:px-10";
const rects = {
  sky: pixelRects(skyArt),
  tools: pixelRects(toolsArt),
  footer: pixelRects(footerSceneArt),
  grass: pixelRects(grassArt),
};
const chapters = guide.chapters.map((c) => ({ ...c, rects: pixelRects(c.art) }));
const vb = (a: Pixels) => `0 0 ${a.w} ${a.h}`;
const meter = (v: number) => ({ value: v, steps: meterSteps, zones: meterZones });
const sections = [
  { key: "launch", data: launch, cls: "text-[34px] tracking-[-1px] md:text-[40px]" },
  { key: "grow", data: grow, cls: "text-[34px] tracking-[-1px] md:text-[50px]" },
  { key: "operate", data: operate, cls: "text-[34px] tracking-[-1px] md:text-[50px]" },
];
const headingCls = "font-normal tracking-[-1.2px] text-foreground-2 dark:text-muted-foreground-2";
</script>

<template>
  <div class="min-h-svh overflow-x-clip bg-background text-foreground">
    <!-- Sky hero -->
    <section
      class="relative isolate min-h-[760px] overflow-hidden text-white md:min-h-[1100px]"
      :style="{ background: sky.gradient }"
    >
      <svg
        :viewBox="vb(skyArt)"
        preserveAspectRatio="xMidYMid slice"
        shape-rendering="crispEdges"
        aria-hidden="true"
        class="absolute inset-0 -z-10 size-full"
      >
        <rect v-for="(r, i) in rects.sky" :key="i" :x="r.x" :y="r.y" :width="r.w" :height="r.h" :fill="r.fill" />
      </svg>
      <div :class="`${wrap} relative z-10 pt-6 pb-24`">
        <div class="flex items-center justify-between gap-4">
          <span :class="`${wordmark} text-[34px] text-white`">Stockbreak</span>
          <div class="flex items-center gap-3">
            <div :class="`hidden h-11 items-center rounded-[10px] border px-2 text-base lg:flex ${glass}`">
              <span class="px-3.5 text-white/70">{{ header.lead }}</span>
              <a v-for="s in header.steps" :key="s.label" :href="s.href" class="px-3.5">{{ s.label }}</a>
            </div>
            <Button
              v-for="l in header.links"
              :key="l.label"
              variant="ghost"
              as-child
              :class="`hidden h-11 px-5 text-base md:inline-flex ${glass}`"
            >
              <a :href="l.href">{{ l.label }}</a>
            </Button>
            <Button elevation="raised" class="h-11 px-[18px] text-base">{{ header.cta }}</Button>
          </div>
        </div>

        <div class="mt-24 max-w-[760px] md:mt-[132px]">
          <h1 class="text-[40px] leading-[1.08] font-normal tracking-[-1.5px] md:text-[68px] md:tracking-[-2px]">
            {{ sky.title }}
          </h1>
          <p class="mt-8 max-w-[640px] text-[17px] leading-normal text-white/90 md:mt-10 md:text-[19px]">
            {{ sky.body }}
          </p>
          <div class="mt-9 flex flex-wrap gap-3.5">
            <Button elevation="raised" size="lg" class="h-14 px-6 text-lg">{{ sky.primary }}</Button>
            <Button variant="ghost" size="lg" :class="`h-14 px-6 text-lg ${glass}`">{{ sky.secondary }}</Button>
          </div>
        </div>

        <div class="absolute top-[330px] right-[8%] hidden flex-col gap-3 lg:flex">
          <div
            v-for="t in sky.tasks"
            :key="t.name"
            class="flex h-[46px] w-[300px] items-center gap-2 rounded-lg border border-emerald-700 bg-emerald-950 px-3.5 text-[13px] whitespace-nowrap text-emerald-100 [transform:perspective(500px)_rotateY(-12deg)]"
          >
            <span class="size-1.5 shrink-0 rounded-full bg-emerald-400" />
            <span class="opacity-80">{{ t.label }}</span>
            <b class="font-semibold text-white">{{ t.name }}</b>
          </div>
        </div>
      </div>
    </section>

    <main :class="`${wrap} flex flex-col gap-28 pt-16 pb-24 md:gap-40 md:pt-24`">
      <!-- Hero workspace -->
      <section class="flex flex-col gap-16">
        <h2 class="text-center text-[34px] leading-[1.12] font-normal tracking-[-1.2px] text-foreground-2 md:text-[60px] md:tracking-[-1.5px] dark:text-muted-foreground-2">
          {{ hero.lead }}<br />
          <span class="text-muted-foreground">{{ hero.muted }}</span>
        </h2>

        <Card
          elevation="floating"
          class="mx-auto w-full max-w-[1420px] gap-0 overflow-hidden rounded-[22px] p-0 lg:h-[780px] lg:flex-row"
        >
          <div class="relative hidden flex-1 overflow-hidden bg-[radial-gradient(var(--border-2)_1px,transparent_1px)] [background-size:14px_14px] md:block">
            <div class="absolute inset-x-0 top-0 z-10 flex h-[68px] items-center justify-between px-5">
              <div class="flex items-center gap-3.5">
                <Badge variant="secondary" class="h-9 gap-2.5 px-3 text-[13px]">
                  <span class="inline-flex size-[22px] items-center justify-center rounded-full bg-border font-mono text-[9px]">{{ workspace.initials }}</span>
                  {{ workspace.project }}
                  <ChevronDownIcon class="size-3" />
                </Badge>
                <span class="font-mono text-[13px] text-muted-foreground">{{ workspace.zoom }}</span>
              </div>
              <div class="flex gap-3.5 text-foreground-2">
                <FolderIcon class="size-4" />
                <SearchIcon class="size-4" />
              </div>
            </div>
            <div
              class="absolute top-0 left-1/2 -translate-x-1/2"
              :style="{ width: `${workspace.stage.w}px`, height: `${workspace.stage.h}px` }"
            >
              <svg :width="workspace.stage.w" :height="workspace.stage.h" viewBox="0 0 960 780" class="absolute inset-0" aria-hidden="true">
                <circle cx="490" cy="390" r="240" fill="none" stroke="var(--border)" stroke-width="1.5" />
                <path
                  d="M490 90 V690 M190 390 H790 M317.2 217.2 L662.8 562.8 M662.8 217.2 L317.2 562.8 M317.2 217.2 H227.2 M662.8 217.2 H752.8 M317.2 562.8 H227.2 M662.8 562.8 H752.8"
                  fill="none"
                  stroke="var(--border)"
                  stroke-width="1.5"
                  stroke-dasharray="4 5"
                />
              </svg>
              <div
                v-for="g in workspace.ghosts"
                :key="`${g[0]}-${g[1]}`"
                class="absolute h-[50px] w-[66px] rounded-lg border border-border-2 bg-muted"
                :style="{ left: `${g[0]}px`, top: `${g[1]}px` }"
              />
              <Card
                v-for="n in workspace.nodes"
                :key="n.label"
                elevation="raised"
                class="absolute h-12 w-[92px] items-center justify-center gap-0 rounded-[10px] p-0 text-sm"
                :style="{ left: `${n.x}px`, top: `${n.y}px` }"
              >
                {{ n.label }}
              </Card>
              <Card
                elevation="raised"
                :class="`${wordmark} absolute h-12 w-[104px] items-center justify-center gap-0 rounded-[10px] p-0 text-[17px]`"
                :style="{ left: `${workspace.center.x}px`, top: `${workspace.center.y}px` }"
              >
                {{ workspace.center.label }}
              </Card>
              <span class="absolute top-[316px] left-[476px] size-7 rounded-full bg-brand shadow-[0_0_0_5px_var(--brand-soft)]" />
              <div
                v-for="c in workspace.chips"
                :key="`${c.x}-${c.y}`"
                class="absolute flex items-center gap-2 rounded-[7px] border border-border bg-card px-2 py-1 text-[11px]"
                :style="{ left: `${c.x}px`, top: `${c.y}px` }"
              >
                <span class="flex items-center gap-1"><span class="size-1.5 rounded-full bg-destructive" />{{ c.a }}</span>
                <span class="flex items-center gap-1"><span class="size-1.5 rounded-full bg-info" />{{ c.b }}</span>
                <span class="flex items-center gap-1"><span class="size-1.5 rounded-full bg-brand" />{{ c.c }}</span>
              </div>
            </div>
            <div class="absolute bottom-4 left-5 flex items-center gap-2 font-mono text-[11px] text-muted-foreground">
              <FolderIcon class="size-3" />
              {{ workspace.path }}
            </div>
          </div>

          <Card elevation="raised" class="m-2 shrink-0 gap-0 overflow-hidden rounded-2xl p-0 lg:w-[436px]">
            <Tabs default-value="Home" class="border-b border-border-2 p-3.5">
              <TabsList class="flex-wrap">
                <TabsTrigger v-for="t in workspace.tabs" :key="t" :value="t">{{ t }}</TabsTrigger>
              </TabsList>
            </Tabs>
            <div class="flex flex-1 flex-col gap-3 overflow-hidden px-4 py-3.5 text-[13.5px] leading-[1.55] text-foreground-2">
              <template v-for="(m, i) in workspace.thread" :key="i">
                <div
                  v-if="m.kind === 'user'"
                  class="max-w-[300px] self-end rounded-xl border border-border-2 bg-muted px-4 py-3.5 text-foreground"
                >
                  {{ m.text }}
                </div>
                <Card
                  v-else-if="m.kind === 'task'"
                  elevation="raised"
                  size="sm"
                  class="flex-row items-center gap-2.5 rounded-[10px] px-3.5 py-3 text-[13px]"
                >
                  <span class="font-semibold whitespace-nowrap text-foreground">{{ m.name }}</span>
                  <span class="min-w-0 flex-1 truncate text-muted-foreground">{{ m.detail }}</span>
                  <Badge :variant="m.status === 'Running' ? 'info' : 'secondary'">{{ m.status }}</Badge>
                </Card>
                <div v-else class="flex gap-2.5">
                  <SparklesIcon class="mt-1 size-3.5 shrink-0 text-muted-foreground" />
                  <p>
                    {{ m.text }}<b class="font-semibold text-foreground">{{ m.bold }}</b>{{ m.tail }}
                  </p>
                </div>
              </template>
            </div>
            <Card elevation="raised" class="m-3.5 mt-1.5 flex-row items-center gap-2.5 rounded-xl py-2.5 pr-2.5 pl-4">
              <span class="min-w-0 flex-1 truncate text-sm">{{ workspace.prompt }}</span>
              <Button elevation="raised" size="icon" class="size-[30px] rounded-lg" aria-label="Send">
                <ArrowUpIcon class="size-3.5" />
              </Button>
            </Card>
          </Card>
        </Card>

        <div class="mx-auto grid w-full max-w-[1420px] gap-8 md:grid-cols-3 md:gap-12">
          <p v-for="c in hero.columns" :key="c.title" class="text-[17px] leading-[1.45] text-foreground-2 md:text-[19px]">
            <b class="font-semibold text-foreground">{{ c.title }} — </b>{{ c.body }}
          </p>
        </div>
        <div class="mx-auto flex max-w-3xl flex-col items-center gap-6 text-center md:flex-row md:text-left">
          <p class="text-xl leading-snug text-foreground-2">{{ hero.closing }}</p>
          <Button elevation="raised" size="lg" class="h-14 shrink-0 px-6 text-lg">{{ hero.closingCta }}</Button>
        </div>
      </section>

      <!-- What Stockbreak does -->
      <section class="flex flex-col gap-7">
        <div class="font-mono text-[13px] tracking-[2px] text-muted-foreground uppercase">{{ intro.eyebrow }}</div>
        <h2 class="text-[40px] leading-[1.12] font-normal tracking-[-1.4px] md:text-[56px]">
          <span class="text-foreground-2 dark:text-muted-foreground-2">{{ intro.lead }}</span><br />
          <span class="text-muted-foreground">{{ intro.muted }}</span>
        </h2>
        <p class="max-w-[640px] text-[17px] leading-normal text-foreground-2 md:text-[19px]">{{ intro.body }}</p>
      </section>

      <!-- 1.0 Launch -->
      <section class="grid items-start gap-12 lg:grid-cols-[470px_1fr] lg:gap-16">
        <div class="flex flex-col gap-7">
          <div class="font-mono text-[13px] tracking-[2px] text-muted-foreground uppercase">{{ launch.eyebrow }}</div>
          <h2 :class="`leading-[1.15] ${headingCls} ${sections[0]!.cls}`">
            {{ launch.lead }} <span class="text-muted-foreground">{{ launch.muted }}</span>
          </h2>
          <p class="max-w-[520px] text-[17px] leading-relaxed text-foreground-2 md:text-[19px]">{{ launch.body }}</p>
          <div class="flex flex-col gap-2">
            <FeatureRow v-for="r in launch.rows" :key="r.index" elevation="raised" :index="r.index" :title="r.title" />
          </div>
        </div>
        <Card
          elevation="floating"
          class="gap-0 overflow-hidden rounded-[14px] bg-[radial-gradient(var(--border)_1px,transparent_1px)] [background-size:14px_14px] p-0 md:flex-row"
        >
          <div
            v-for="(s, i) in stages"
            :key="s.title"
            :class="`flex min-h-[420px] flex-1 flex-col md:h-[520px] ${i > 0 ? 'border-t-2 border-border md:border-t-0 md:border-l-2' : ''}`"
          >
            <div class="flex justify-between px-4 py-3.5 font-mono text-[11px] text-muted-foreground">
              <span>{{ s.title }}</span>
              <span>{{ s.count }}</span>
            </div>
            <div class="flex flex-1 flex-col gap-3 px-3 pb-6" :style="{ paddingTop: `${Math.max(s.top - 48, 8)}px` }">
              <Card
                v-for="(t, ti) in s.tasks"
                :key="t.name"
                elevation="raised"
                size="sm"
                :class="`h-[54px] flex-row items-center gap-3 rounded-[10px] px-3 py-0 ${'active' in t ? '' : 'opacity-55'} ${s.pinLast && ti === s.tasks.length - 1 ? 'mt-auto' : ''}`"
              >
                <span class="inline-flex size-7 items-center justify-center rounded-[7px] border border-border-2 bg-muted text-foreground-2">
                  <SparklesIcon class="size-3.5" />
                </span>
                <div class="min-w-0 flex-1">
                  <div class="truncate text-[13px] font-medium">{{ t.name }}</div>
                  <div class="truncate text-[11px] text-muted-foreground">{{ t.sub }}</div>
                </div>
                <ArrowUpRightIcon class="size-3 text-muted-foreground" />
              </Card>
            </div>
          </div>
        </Card>
      </section>

      <!-- 2.0 Grow -->
      <section class="grid items-start gap-12 lg:grid-cols-[1fr_520px] lg:gap-16">
        <div class="relative order-2 flex flex-col gap-4 lg:order-1 lg:block lg:h-[480px]">
          <Card
            elevation="floating"
            class="gap-0 rounded-2xl px-[26px] py-[22px] lg:absolute lg:top-[70px] lg:left-0 lg:h-[380px] lg:w-[600px]"
          >
            <div class="mb-3.5 flex items-center gap-3 text-sm">
              <span class="inline-flex size-7 items-center justify-center rounded-lg border border-border-2 bg-muted text-xs font-semibold">{{ grow.email.initials }}</span>
              {{ grow.email.title }}
            </div>
            <div v-for="f in grow.email.fields" :key="f.label" class="flex gap-10 border-t border-border-2 py-3 text-[13px]">
              <span class="w-[60px] text-muted-foreground">{{ f.label }}</span>
              <span class="font-semibold">{{ f.value }}</span>
            </div>
            <p class="mt-4 text-[13px] leading-[1.6] text-foreground-2">{{ grow.email.body }}</p>
          </Card>
          <Card
            elevation="floating"
            class="gap-0 overflow-hidden rounded-2xl p-0 lg:absolute lg:top-0 lg:left-[410px] lg:w-[300px]"
          >
            <div class="flex items-center justify-between border-b border-border-2 px-4 py-3 text-xs">
              {{ grow.report.title }}
              <PlusIcon class="size-3 text-muted-foreground" />
            </div>
            <div class="p-[18px]">
              <div class="text-xs text-muted-foreground">{{ grow.report.label }}</div>
              <div class="flex items-baseline gap-2">
                <span class="text-5xl tracking-[-2px]">{{ grow.report.value }}</span>
                <Badge variant="success">{{ grow.report.delta }}</Badge>
              </div>
              <div class="mt-2 h-[26px] overflow-hidden rounded border border-border-2 bg-muted">
                <div class="h-full bg-brand" :style="{ width: `${grow.report.fill}%` }" />
              </div>
              <div class="mt-2 flex gap-3.5 text-[10px] text-muted-foreground">
                <span class="flex items-center gap-1"><span class="size-1.5 rounded-full bg-brand" />{{ grow.report.legend[0] }}</span>
                <span class="flex items-center gap-1"><span class="size-1.5 rounded-full bg-muted-foreground-2" />{{ grow.report.legend[1] }}</span>
              </div>
              <div v-for="r in grow.report.rows" :key="r.label" class="mt-3 flex items-center justify-between text-xs">
                <span class="text-foreground-2">{{ r.label }}</span>
                <span class="flex items-center gap-1.5">
                  <Badge v-if="r.badge" :variant="r.tone === 'destructive' ? 'destructive' : 'success'">{{ r.badge }}</Badge>
                  {{ r.value }}
                </span>
              </div>
              <Button variant="secondary" elevation="raised" size="sm" class="mt-4 w-full">{{ grow.report.cta }}</Button>
            </div>
          </Card>
        </div>
        <div class="order-1 lg:order-2">
          <div class="flex flex-col gap-7">
            <div class="font-mono text-[13px] tracking-[2px] text-muted-foreground uppercase">{{ grow.eyebrow }}</div>
            <h2 :class="`leading-[1.15] ${headingCls} ${sections[1]!.cls}`">
              {{ grow.lead }} <span class="text-muted-foreground">{{ grow.muted }}</span>
            </h2>
            <p class="max-w-[520px] text-[17px] leading-relaxed text-foreground-2 md:text-[19px]">{{ grow.body }}</p>
            <div class="flex flex-col gap-2">
              <FeatureRow v-for="r in grow.rows" :key="r.index" elevation="raised" :index="r.index" :title="r.title" />
            </div>
          </div>
        </div>
      </section>

      <!-- 3.0 Operate -->
      <section class="grid items-start gap-12 lg:grid-cols-[500px_1fr] lg:gap-16">
        <div class="flex flex-col gap-7">
          <div class="font-mono text-[13px] tracking-[2px] text-muted-foreground uppercase">{{ operate.eyebrow }}</div>
          <h2 :class="`leading-[1.15] ${headingCls} ${sections[2]!.cls}`">
            {{ operate.lead }} <span class="text-muted-foreground">{{ operate.muted }}</span>
          </h2>
          <p class="max-w-[520px] text-[17px] leading-relaxed text-foreground-2 md:text-[19px]">{{ operate.body }}</p>
          <div class="flex flex-col gap-2">
            <FeatureRow v-for="r in operate.rows" :key="r.index" elevation="raised" :index="r.index" :title="r.title" />
          </div>
        </div>
        <div class="relative flex flex-col gap-4 lg:mt-24 lg:block lg:h-[640px]">
          <Card elevation="floating" class="gap-0 rounded-2xl px-[26px] py-7 lg:w-[760px]">
            <div class="grid gap-8 sm:grid-cols-3">
              <StatTile
                v-for="m in metrics"
                :key="m.label"
                class="w-auto border-0 bg-transparent p-0 shadow-none"
                :label="m.label"
                :value="m.value"
                :delta="m.delta"
                :meter="meter(m.fill)"
              />
            </div>
            <div class="mt-9 text-[15px]">{{ chart.title }}</div>
            <div class="mt-3.5 flex gap-2.5">
              <div class="flex h-32 flex-col justify-between font-mono text-[10px] text-muted-foreground">
                <span v-for="y in chart.yAxis" :key="y">{{ y }}</span>
              </div>
              <div class="min-w-0 flex-1 lg:max-w-[640px]">
                <svg viewBox="0 0 690 150" class="h-auto w-full overflow-visible" role="img" aria-label="Time series">
                  <path :d="chart.grid" fill="none" stroke="var(--border-2)" />
                  <path :d="chart.ticks" fill="none" stroke="var(--foreground-2)" stroke-width="1.5" />
                  <path v-for="s in chart.series" :key="s.label" :d="s.d" fill="none" :stroke="s.color" stroke-width="2.5" />
                </svg>
                <div class="mt-1 flex justify-between font-mono text-[10px] text-muted-foreground">
                  <span v-for="x in chart.xAxis" :key="x">{{ x }}</span>
                </div>
              </div>
            </div>
            <div class="mt-[18px] flex gap-4 text-[13px]">
              <span v-for="s in chart.series" :key="s.label" class="flex items-center gap-1.5">
                <span class="size-2 rounded-full" :style="{ background: s.color }" />
                {{ s.label }}
              </span>
            </div>
          </Card>
          <InsetPanel elevation="floating" class="lg:absolute lg:top-[160px] lg:right-0 lg:w-[380px]">
            <InsetPanelHeader>
              <span class="size-3 rounded-full bg-brand" />
              Live joiners
            </InsetPanelHeader>
            <InsetPanelBody fade class="p-0">
              <div v-for="j in joiners" :key="j.name" class="flex items-center gap-3.5 border-b border-border-2 p-4">
                <Avatar class="size-10">
                  <AvatarFallback class="font-mono text-[13px]">{{ j.initials }}</AvatarFallback>
                </Avatar>
                <div class="min-w-0 flex-1">
                  <div class="text-[15px] font-semibold">{{ j.name }}</div>
                  <div class="text-[13px] text-foreground-2">{{ j.place }}</div>
                </div>
                <Badge variant="info" class="gap-1">
                  <CheckIcon class="size-3" />
                  Joined
                </Badge>
              </div>
            </InsetPanelBody>
            <InsetPanelFooter class="justify-center text-sm text-foreground-2">
              <b class="font-medium text-foreground">{{ joinersFooter.count }}</b>
              &nbsp;{{ joinersFooter.text }}
            </InsetPanelFooter>
          </InsetPanel>
        </div>
      </section>
    </main>

    <!-- Tools -->
    <section
      class="relative isolate overflow-hidden pt-24 pb-20 text-center text-white md:pt-[190px]"
      :style="{ background: tools.gradient }"
    >
      <svg
        :viewBox="vb(toolsArt)"
        preserveAspectRatio="xMidYMid slice"
        shape-rendering="crispEdges"
        aria-hidden="true"
        class="absolute inset-0 -z-10 size-full"
      >
        <rect v-for="(r, i) in rects.tools" :key="i" :x="r.x" :y="r.y" :width="r.w" :height="r.h" :fill="r.fill" />
      </svg>
      <div :class="wrap">
        <h2 class="text-[34px] leading-[1.15] font-normal tracking-[-1.3px] md:text-[54px]">
          {{ tools.title }}<br />
          <span class="opacity-85">{{ tools.muted }}</span>
        </h2>
        <p class="mx-auto mt-7 max-w-[600px] text-lg leading-[1.55] opacity-90">{{ tools.body }}</p>
        <div class="mt-10 flex flex-col items-center gap-6 md:flex-row md:items-start md:justify-center md:gap-[30px]">
          <div
            v-for="(p, i) in tools.points"
            :key="p"
            :class="`w-[250px] border-l border-white/35 px-5 text-left text-[17px] leading-normal ${i === tools.activePoint ? 'text-white' : 'text-white/60'}`"
          >
            {{ p }}
          </div>
        </div>
        <div class="mx-auto mt-14 max-w-[800px] rounded-[22px] border border-white/60 bg-sky-200/90 p-2.5 md:mt-[150px]">
          <Card elevation="floating" class="relative h-[470px] gap-0 overflow-hidden rounded-[14px] p-0 text-left">
            <Card
              elevation="floating"
              class="absolute top-7 left-1/2 w-[270px] -translate-x-1/2 gap-0 rounded-xl px-[18px] py-4 md:left-[140px] md:translate-x-0"
            >
              <div v-for="(g, gi) in tools.groups" :key="g.status">
                <div v-if="gi > 0" class="my-3 h-px bg-border-2" />
                <Badge :variant="g.tone as 'warning' | 'info' | 'success'" class="font-mono text-[10px]">{{ g.status }}</Badge>
                <div v-for="it in g.items" :key="it.name" class="mt-2.5 flex justify-between text-xs">
                  <span>{{ it.name }}</span>
                  <span class="text-[9px] text-muted-foreground uppercase">{{ it.agent }}</span>
                </div>
              </div>
            </Card>
            <div class="absolute inset-x-0 bottom-[18px] flex flex-wrap justify-center gap-2.5 px-3">
              <Card
                v-for="d in tools.dock"
                :key="d"
                elevation="raised"
                class="h-10 w-24 items-center justify-center gap-0 rounded-[10px] p-0 text-[13px]"
              >
                {{ d }}
              </Card>
            </div>
          </Card>
        </div>
      </div>
    </section>

    <!-- Guide -->
    <section :class="`${wrap} flex flex-col items-center gap-8 py-24 text-center md:py-[170px]`">
      <h2 class="text-[34px] leading-[1.15] font-normal tracking-[-1.4px] text-foreground-2 md:text-[56px] dark:text-muted-foreground-2">
        {{ guide.title }}
      </h2>
      <p class="max-w-[560px] text-[19px] leading-normal text-foreground-2">{{ guide.body }}</p>
      <Button elevation="raised" size="lg" class="h-[52px] px-[22px] text-[17px]">{{ guide.cta }}</Button>
      <div class="mt-10 grid w-full max-w-[880px] gap-x-10 gap-y-12 text-left sm:grid-cols-2">
        <div v-for="c in chapters" :key="c.n" class="flex flex-col items-center gap-[18px]">
          <Card elevation="floating" class="w-full max-w-[376px] gap-0 rounded-2xl px-[22px] py-6">
            <div class="text-[22px] leading-tight">Chapter {{ c.n }}<br />{{ c.title }}</div>
            <div class="mt-[26px] mb-[18px] h-px bg-border-2" />
            <div class="font-mono text-[10px] text-muted-foreground">Chapter {{ c.numeral }}</div>
            <svg
              :viewBox="vb(c.art)"
              preserveAspectRatio="xMidYMid slice"
              shape-rendering="crispEdges"
              aria-hidden="true"
              class="mt-4 h-[250px] w-full overflow-hidden rounded-md"
            >
              <rect v-for="(r, i) in c.rects" :key="i" :x="r.x" :y="r.y" :width="r.w" :height="r.h" :fill="r.fill" />
            </svg>
            <div class="mt-3 flex justify-between font-mono text-[10px] text-muted-foreground">
              <span>by Stockbreak</span>
              <span>2026</span>
            </div>
          </Card>
          <span class="font-mono text-xs text-muted-foreground">Read this chapter ({{ c.numeral }})</span>
        </div>
      </div>
      <Button variant="secondary" elevation="raised">{{ guide.download }}</Button>
    </section>

    <!-- Footer -->
    <footer class="relative overflow-hidden pt-8 pb-[200px]">
      <div :class="`${wrap} grid items-start gap-14 lg:grid-cols-2 lg:gap-24 xl:px-[200px]`">
        <div class="flex flex-col">
          <h2 class="text-[34px] leading-[1.15] font-normal tracking-[-1px] text-foreground-2 md:text-[46px] dark:text-muted-foreground-2">
            {{ footer.title }}<br />
            <span class="text-muted-foreground">{{ footer.muted }}</span>
          </h2>
          <div class="mt-14 flex flex-wrap gap-4 text-[17px]">
            <span class="text-muted-foreground">{{ header.lead }}</span>
            <a v-for="h in footer.howTo" :key="h" href="#guide">{{ h }}</a>
          </div>
          <div class="mt-8 flex gap-[100px] text-[17px]">
            <div v-for="col in footer.columns" :key="col[0]" class="flex flex-col gap-[18px]">
              <a v-for="l in col" :key="l" href="#top">{{ l }}</a>
            </div>
          </div>
          <div class="mt-6 flex gap-2.5">
            <Button
              v-for="s in footer.socials"
              :key="s"
              variant="secondary"
              elevation="raised"
              size="icon"
              class="size-10 font-semibold"
              :aria-label="s"
            >
              {{ s }}
            </Button>
          </div>
          <div class="mt-9 flex items-center gap-2 text-[13px] text-muted-foreground">
            Built on <Badge variant="secondary">{{ footer.builtOn }}</Badge> {{ footer.network }}
          </div>
          <div class="mt-3 text-[13px] text-muted-foreground-2">{{ footer.copyright }}</div>
        </div>
        <Card elevation="floating" class="mx-auto w-full max-w-[360px] gap-0 rounded-[22px] p-2.5">
          <div class="relative h-[460px] overflow-hidden rounded-[10px]">
            <svg
              :viewBox="vb(footerSceneArt)"
              preserveAspectRatio="xMidYMid slice"
              shape-rendering="crispEdges"
              aria-hidden="true"
              class="absolute inset-0 size-full"
            >
              <rect v-for="(r, i) in rects.footer" :key="i" :x="r.x" :y="r.y" :width="r.w" :height="r.h" :fill="r.fill" />
            </svg>
            <div class="absolute inset-x-2.5 bottom-2.5 rounded-lg bg-emerald-950/80 px-3.5 pt-3.5 pb-4 text-white">
              <div class="text-xl leading-tight">
                {{ footer.card.lead }}<span class="opacity-70">{{ footer.card.muted }}</span>
              </div>
              <Button variant="secondary" elevation="raised" class="mt-3">{{ footer.card.cta }}</Button>
            </div>
          </div>
        </Card>
      </div>
      <div class="absolute inset-x-0 bottom-0 h-[140px]">
        <svg
          :viewBox="vb(grassArt)"
          preserveAspectRatio="xMidYMax slice"
          shape-rendering="crispEdges"
          aria-hidden="true"
          class="absolute inset-0 size-full"
        >
          <rect v-for="(r, i) in rects.grass" :key="i" :x="r.x" :y="r.y" :width="r.w" :height="r.h" :fill="r.fill" />
        </svg>
        <div class="absolute inset-x-0 bottom-5 text-center text-xs text-emerald-950/70">{{ footer.hackathon }}</div>
      </div>
    </footer>
  </div>
</template>

// Sample data for the Cofounder-style long landing page (dark). Plain TS, no framework imports.

// Decorative pixel-art scenes of the Cofounder landing page: a fixed night palette (the board's illustration, not theme tokens).
// Each scene is a palette plus `x,y,w,h,paletteIndex` rects, drawn by the example as crisp SVG rects.

export type Pixels = { w: number; h: number; palette: string[]; rects: string };

export const skyArt: Pixels = {
  w: 2000,
  h: 1100,
  palette: [
    "#c3cad5",
    "#23699d",
    "#182f1c",
    "#1f3c22",
    "#1d3820",
    "#294526",
    "#102415",
    "#2e5027",
    "#23364e",
    "#255c91",
    "#374450",
    "#1e2023",
    "#1b3c5c",
    "#3b3c3f",
    "#26282a",
    "#2a2317",
    "#544426",
  ],
  rects:
    "1172,150,180,36,0 1136,186,288,36,0 1100,222,396,72,0 1208,114,108,36,0 1280,78,72,36,0 1100,258,396,36,1 1548,230,120,24,0 1524,254,192,24,0 1500,278,264,48,0 1572,206,72,24,0 1620,182,48,24,0 1500,302,264,24,1 948,520,120,24,0 924,544,192,24,0 900,568,264,48,0 972,496,72,24,0 1020,472,48,24,0 900,592,264,24,1 1798,330,120,24,0 1774,354,192,24,0 1750,378,264,48,0 1822,306,72,24,0 1870,282,48,24,0 1750,402,264,24,1 0,700,12,400,2 12,688,12,412,2 12,688,12,12,3 24,700,12,400,2 36,712,12,388,2 48,712,12,388,2 48,712,12,12,3 60,700,12,400,2 72,712,12,388,2 84,700,12,400,2 96,700,12,400,2 108,700,12,400,2 120,688,12,412,2 132,676,12,424,2 132,676,12,12,3 144,664,12,436,2 156,676,12,424,2 168,688,12,412,2 180,688,12,412,2 192,700,12,400,2 204,700,12,400,2 204,700,12,12,3 216,700,12,400,2 228,700,12,400,2 240,712,12,388,2 252,700,12,400,2 252,700,12,12,3 264,700,12,400,2 264,700,12,12,3 276,700,12,400,2 288,712,12,388,2 300,712,12,388,2 300,712,12,12,3 312,724,12,376,2 324,736,12,364,2 336,724,12,376,2 348,736,12,364,2 360,736,12,364,2 372,736,12,364,2 372,736,12,12,3 384,724,12,376,2 396,736,12,364,2 408,724,12,376,2 420,724,12,376,2 432,736,12,364,2 444,736,12,364,2 456,724,12,376,2 468,724,12,376,2 480,724,12,376,2 492,724,12,376,2 504,724,12,376,2 516,712,12,388,2 528,712,12,388,2 540,712,12,388,2 552,700,12,400,2 564,700,12,400,2 576,700,12,400,2 588,712,12,388,2 600,712,12,388,2 612,700,12,400,2 624,700,12,400,2 636,688,12,412,2 648,688,12,412,2 660,688,12,412,2 672,688,12,412,2 672,688,12,12,3 684,676,12,424,2 684,676,12,12,3 696,664,12,436,2 708,664,12,436,2 708,664,12,12,3 720,652,12,448,2 732,652,12,448,2 732,652,12,12,3 744,640,12,460,2 744,640,12,12,3 756,640,12,460,2 768,640,12,460,2 780,640,12,460,2 792,640,12,460,2 804,640,12,460,2 804,640,12,12,3 816,652,12,448,2 816,652,12,12,3 828,652,12,448,2 828,652,12,12,3 840,652,12,448,2 852,652,12,448,2 864,664,12,436,2 876,652,12,448,2 876,652,12,12,3 888,664,12,436,2 888,664,12,12,3 900,664,12,436,2 912,676,12,424,2 924,676,12,424,2 936,688,12,412,2 936,688,12,12,3 948,676,12,424,2 960,676,12,424,2 972,688,12,412,2 972,688,12,12,3 984,688,12,412,2 984,688,12,12,3 996,688,12,412,2 1008,688,12,412,2 1008,688,12,12,3 1020,676,12,424,2 1020,676,12,12,3 1032,676,12,424,2 1044,688,12,412,2 1056,688,12,412,2 1056,688,12,12,3 1068,676,12,424,2 1080,676,12,424,2 1092,688,12,412,2 1092,688,12,12,3 1104,676,12,424,2 1116,676,12,424,2 1116,676,12,12,3 1128,688,12,412,2 1140,700,12,400,2 1140,700,12,12,3 1152,712,12,388,2 1152,712,12,12,3 1164,724,12,376,2 1164,724,12,12,3 1176,736,12,364,2 1188,724,12,376,2 1188,724,12,12,3 1200,724,12,376,2 1212,724,12,376,2 1212,724,12,12,3 1224,724,12,376,2 1224,724,12,12,3 1236,712,12,388,2 1248,712,12,388,2 1260,724,12,376,2 1272,724,12,376,2 1272,724,12,12,3 1284,712,12,388,2 1284,712,12,12,3 1296,712,12,388,2 1296,712,12,12,3 1308,712,12,388,2 1308,712,12,12,3 1320,712,12,388,2 1332,712,12,388,2 1344,712,12,388,2 1344,712,12,12,3 1356,712,12,388,2 1368,724,12,376,2 1368,724,12,12,3 1380,712,12,388,2 1380,712,12,12,3 1392,724,12,376,2 1392,724,12,12,3 1404,724,12,376,2 1416,724,12,376,2 1416,724,12,12,3 1428,736,12,364,2 1428,736,12,12,3 1440,736,12,364,2 1452,736,12,364,2 1464,736,12,364,2 1476,724,12,376,2 1488,724,12,376,2 1488,724,12,12,3 1500,712,12,388,2 1512,700,12,400,2 1524,688,12,412,2 1524,688,12,12,3 1536,676,12,424,2 1548,664,12,436,2 1548,664,12,12,3 1560,676,12,424,2 1560,676,12,12,3 1572,688,12,412,2 1572,688,12,12,3 1584,688,12,412,2 1584,688,12,12,3 1596,676,12,424,2 1608,688,12,412,2 1620,688,12,412,2 1632,700,12,400,2 1632,700,12,12,3 1644,700,12,400,2 1656,688,12,412,2 1656,688,12,12,3 1668,688,12,412,2 1680,688,12,412,2 1692,688,12,412,2 1704,676,12,424,2 1716,688,12,412,2 1716,688,12,12,3 1728,688,12,412,2 1740,700,12,400,2 1752,700,12,400,2 1752,700,12,12,3 1764,700,12,400,2 1764,700,12,12,3 1776,700,12,400,2 1788,700,12,400,2 1788,700,12,12,3 1800,712,12,388,2 1800,712,12,12,3 1812,712,12,388,2 1824,724,12,376,2 1836,712,12,388,2 1836,712,12,12,3 1848,712,12,388,2 1860,712,12,388,2 1860,712,12,12,3 1872,700,12,400,2 1884,688,12,412,2 1884,688,12,12,3 1896,676,12,424,2 1908,688,12,412,2 1908,688,12,12,3 1920,676,12,424,2 1932,664,12,436,2 1944,664,12,436,2 1956,664,12,436,2 1968,664,12,436,2 1968,664,12,12,3 1980,664,12,436,2 1980,664,12,12,3 1992,664,12,436,2 1992,664,12,12,3 0,808,12,292,4 0,808,12,12,5 12,808,12,292,4 24,808,12,292,4 24,808,12,12,5 36,808,12,292,4 48,808,12,292,4 60,820,12,280,4 72,820,12,280,4 84,832,12,268,4 96,820,12,280,4 108,820,12,280,4 120,820,12,280,4 132,832,12,268,4 144,832,12,268,4 156,832,12,268,4 156,832,12,12,5 168,832,12,268,4 168,832,12,12,5 180,832,12,268,4 192,832,12,268,4 204,832,12,268,4 216,844,12,256,4 228,844,12,256,4 240,844,12,256,4 252,856,12,244,4 252,856,12,12,5 264,868,12,232,4 276,880,12,220,4 288,880,12,220,4 300,880,12,220,4 312,880,12,220,4 324,880,12,220,4 336,880,12,220,4 348,880,12,220,4 360,880,12,220,4 372,880,12,220,4 384,880,12,220,4 396,880,12,220,4 396,880,12,12,5 408,880,12,220,4 408,880,12,12,5 420,880,12,220,4 432,880,12,220,4 444,868,12,232,4 456,868,12,232,4 468,868,12,232,4 480,856,12,244,4 480,856,12,12,5 492,844,12,256,4 492,844,12,12,5 504,844,12,256,4 516,832,12,268,4 528,832,12,268,4 540,832,12,268,4 552,820,12,280,4 564,808,12,292,4 564,808,12,12,5 576,808,12,292,4 576,808,12,12,5 588,796,12,304,4 588,796,12,12,5 600,784,12,316,4 600,784,12,12,5 612,772,12,328,4 624,772,12,328,4 636,772,12,328,4 648,760,12,340,4 660,760,12,340,4 672,760,12,340,4 672,760,12,12,5 684,760,12,340,4 684,760,12,12,5 696,760,12,340,4 696,760,12,12,5 708,772,12,328,4 708,772,12,12,5 720,784,12,316,4 732,772,12,328,4 744,784,12,316,4 756,784,12,316,4 768,784,12,316,4 768,784,12,12,5 780,784,12,316,4 792,772,12,328,4 804,772,12,328,4 816,784,12,316,4 828,784,12,316,4 828,784,12,12,5 840,784,12,316,4 840,784,12,12,5 852,796,12,304,4 864,796,12,304,4 876,796,12,304,4 876,796,12,12,5 888,796,12,304,4 888,796,12,12,5 900,808,12,292,4 912,796,12,304,4 924,796,12,304,4 936,784,12,316,4 936,784,12,12,5 948,784,12,316,4 960,784,12,316,4 960,784,12,12,5 972,796,12,304,4 972,796,12,12,5 984,784,12,316,4 984,784,12,12,5 996,796,12,304,4 1008,784,12,316,4 1020,772,12,328,4 1020,772,12,12,5 1032,760,12,340,4 1032,760,12,12,5 1044,760,12,340,4 1044,760,12,12,5 1056,760,12,340,4 1068,772,12,328,4 1080,784,12,316,4 1080,784,12,12,5 1092,784,12,316,4 1104,796,12,304,4 1116,784,12,316,4 1128,772,12,328,4 1140,772,12,328,4 1152,784,12,316,4 1164,772,12,328,4 1176,772,12,328,4 1188,772,12,328,4 1188,772,12,12,5 1200,784,12,316,4 1200,784,12,12,5 1212,784,12,316,4 1212,784,12,12,5 1224,772,12,328,4 1236,760,12,340,4 1248,772,12,328,4 1260,760,12,340,4 1260,760,12,12,5 1272,760,12,340,4 1284,760,12,340,4 1284,760,12,12,5 1296,772,12,328,4 1296,772,12,12,5 1308,772,12,328,4 1320,784,12,316,4 1320,784,12,12,5 1332,784,12,316,4 1344,772,12,328,4 1344,772,12,12,5 1356,760,12,340,4 1356,760,12,12,5 1368,760,12,340,4 1380,760,12,340,4 1392,760,12,340,4 1404,772,12,328,4 1416,784,12,316,4 1416,784,12,12,5 1428,796,12,304,4 1428,796,12,12,5 1440,796,12,304,4 1440,796,12,12,5 1452,808,12,292,4 1464,820,12,280,4 1476,820,12,280,4 1488,820,12,280,4 1500,820,12,280,4 1512,808,12,292,4 1524,796,12,304,4 1524,796,12,12,5 1536,796,12,304,4 1548,796,12,304,4 1560,784,12,316,4 1572,772,12,328,4 1572,772,12,12,5 1584,772,12,328,4 1596,772,12,328,4 1608,772,12,328,4 1608,772,12,12,5 1620,784,12,316,4 1620,784,12,12,5 1632,784,12,316,4 1644,784,12,316,4 1644,784,12,12,5 1656,784,12,316,4 1668,784,12,316,4 1680,784,12,316,4 1692,784,12,316,4 1704,772,12,328,4 1716,784,12,316,4 1728,784,12,316,4 1740,772,12,328,4 1752,784,12,316,4 1752,784,12,12,5 1764,796,12,304,4 1776,808,12,292,4 1788,808,12,292,4 1800,796,12,304,4 1812,796,12,304,4 1824,796,12,304,4 1836,808,12,292,4 1848,796,12,304,4 1848,796,12,12,5 1860,808,12,292,4 1872,796,12,304,4 1872,796,12,12,5 1884,796,12,304,4 1896,808,12,292,4 1908,796,12,304,4 1920,796,12,304,4 1920,796,12,12,5 1932,796,12,304,4 1944,796,12,304,4 1944,796,12,12,5 1956,808,12,292,4 1968,808,12,292,4 1980,808,12,292,4 1992,796,12,304,4 720,976,12,12,2 396,892,12,12,2 1452,1000,12,12,2 192,988,12,12,6 1440,856,12,12,2 708,832,12,12,2 1440,964,12,12,2 1452,904,12,12,2 456,844,12,12,2 456,1084,12,12,2 1188,1036,12,12,6 192,820,12,12,2 120,868,12,12,6 816,940,12,12,2 1188,1024,12,12,7 1212,1036,12,12,2 1356,808,12,12,7 288,772,12,12,6 1512,832,12,12,7 1332,1048,12,12,2 924,916,12,12,2 1176,976,12,12,7 1632,976,12,12,7 1788,844,12,12,7 84,1084,12,12,7 1860,1012,12,12,2 492,1024,12,12,7 1656,1096,12,12,2 1740,796,12,12,2 648,1000,12,12,2 816,868,12,12,6 192,940,12,12,2 1476,784,12,12,7 204,916,12,12,6 60,868,12,12,7 1272,1084,12,12,6 132,988,12,12,2 132,904,12,12,2 1800,880,12,12,2 852,952,12,12,6 108,868,12,12,6 228,796,12,12,2 1644,772,12,12,6 1248,868,12,12,2 804,808,12,12,2 120,1084,12,12,7 960,892,12,12,6 1152,904,12,12,7 1596,904,12,12,2 1824,1012,12,12,2 312,988,12,12,2 828,916,12,12,2 720,868,12,12,7 792,952,12,12,7 1680,880,12,12,6 1272,976,12,12,7 60,904,12,12,2 1800,1000,12,12,6 180,1000,12,12,2 1020,928,12,12,7 1080,988,12,12,2 852,1036,12,12,7 60,976,12,12,6 60,892,12,12,7 1920,928,12,12,7 1812,988,12,12,7 540,892,12,12,6 960,1048,12,12,7 1824,856,12,12,7 1152,796,12,12,6 1740,1012,12,12,2 396,868,12,12,2 672,1000,12,12,7 732,880,12,12,6 1332,1000,12,12,2 288,796,12,12,2 984,880,12,12,2 684,928,12,12,6 240,880,12,12,2 1992,832,12,12,2 1380,856,12,12,6 360,772,12,12,2 576,880,12,12,2 552,1084,12,12,7 1044,1060,12,12,2 252,1060,12,12,2 1056,976,12,12,6 1284,868,12,12,2 828,928,12,12,7 1944,916,12,12,7 1284,976,12,12,7 108,916,12,12,6 612,760,12,12,7 1908,952,12,12,7 1716,1024,12,12,6 96,1036,12,12,7 1584,868,12,12,2 1044,1096,12,12,6 204,1084,12,12,2 876,796,12,12,6 132,772,12,12,2 1572,832,12,12,7 1764,772,12,12,6 1476,1036,12,12,6 516,952,12,12,7 732,1012,12,12,6 1608,964,12,12,7 156,988,12,12,6 1044,808,12,12,7 1656,940,12,12,6 1080,844,12,12,6 372,964,12,12,6 516,844,12,12,7 384,1072,12,12,6 1488,1000,12,12,2 1224,772,12,12,7 756,856,12,12,2 1608,952,12,12,7 156,940,12,12,7 0,1084,12,12,6 384,772,12,12,6 144,784,12,12,7 96,1084,12,12,2 264,952,12,12,2 1500,880,12,12,6 960,784,12,12,7 1176,1000,12,12,7 1800,868,12,12,7 804,832,12,12,7 1308,796,12,12,6 1704,760,12,12,2 1164,1060,12,12,6 1740,820,12,12,6 1140,928,12,12,2 1992,1060,12,12,2 1164,1000,12,12,6 1908,1096,12,12,7 156,892,12,12,2 1524,1048,12,12,2 960,916,12,12,2 1284,928,12,12,6 744,832,12,12,2 828,1024,12,12,2 216,1060,12,12,7 684,916,12,12,6 84,880,12,12,7 1716,1060,12,12,7 372,928,12,12,2 372,1072,12,12,2 1620,1060,12,12,7 324,1036,12,12,7 1728,964,12,12,6 1800,1024,12,12,6 1452,808,12,12,6 1188,772,12,12,2 276,976,12,12,6 1152,820,12,12,6 1044,1072,12,12,6 72,1084,12,12,6 1476,1072,12,12,2 520,600,30,120,8 526,608,6,6,9 560,630,30,90,8 566,638,6,6,9 600,648,30,72,8 606,656,6,6,9 640,660,30,60,8 646,668,6,6,9 680,660,30,60,8 686,668,6,6,9 720,660,30,60,8 726,668,6,6,9 760,600,30,120,8 766,608,6,6,9 800,660,30,60,8 806,668,6,6,9 840,630,30,90,8 846,638,6,6,9 880,660,30,60,8 886,668,6,6,9 920,660,30,60,8 926,668,6,6,9 960,648,30,72,8 966,656,6,6,9 1000,648,30,72,8 1006,656,6,6,9 1040,660,30,60,8 1046,668,6,6,9 760,560,18,160,10 766,520,6,40,10 1200,640,330,200,11 1216,656,298,168,12 1240,690,120,36,1 1380,740,100,30,1 1130,840,480,24,13 1160,864,420,14,14 1620,850,260,60,15 1630,860,240,14,16",
};

export const toolsArt: Pixels = {
  w: 2000,
  h: 1180,
  palette: ["#c3cad5", "#23699d", "#246ca2", "#182f1c", "#1f3c22", "#294526"],
  rects:
    "48,480,120,24,0 24,504,192,24,0 0,528,264,48,0 72,456,72,24,0 120,432,48,24,0 0,552,264,24,1 1772,400,180,36,0 1736,436,288,36,0 1700,472,396,72,0 1808,364,108,36,0 1880,328,72,36,0 1700,508,396,36,2 0,772,12,328,3 12,784,12,316,3 24,784,12,316,3 24,784,12,12,4 36,796,12,304,3 48,796,12,304,3 48,796,12,12,4 60,796,12,304,3 60,796,12,12,4 72,784,12,316,3 84,796,12,304,3 96,796,12,304,3 108,784,12,316,3 108,784,12,12,4 120,784,12,316,3 132,772,12,328,3 144,772,12,328,3 156,772,12,328,3 168,772,12,328,3 180,760,12,340,3 192,760,12,340,3 204,748,12,352,3 216,748,12,352,3 228,748,12,352,3 228,748,12,12,4 240,736,12,364,3 252,736,12,364,3 1988,504,12,12,5 1892,924,12,12,3 1928,492,12,12,5 1772,360,12,12,3 1892,840,12,12,3 1904,948,12,12,3 1976,492,12,12,3 1832,744,12,12,4 1820,708,12,12,3 1784,324,12,12,5 1988,792,12,12,3 1808,120,12,12,3 1832,444,12,12,3 1820,564,12,12,4 1832,948,12,12,5 1832,396,12,12,5 1832,708,12,12,4 1760,672,12,12,4 1820,336,12,12,4 1784,624,12,12,4 1988,120,12,12,5 1880,216,12,12,4 1892,588,12,12,4 1880,396,12,12,4 1940,384,12,12,3 1856,144,12,12,5 1892,732,12,12,3 1964,756,12,12,4 1904,1008,12,12,3 1928,180,12,12,5 1820,420,12,12,3 1844,828,12,12,4 1952,660,12,12,5 1856,828,12,12,3 1976,684,12,12,4 1772,780,12,12,3 1832,636,12,12,5 1988,672,12,12,3 1880,540,12,12,5 1964,252,12,12,4 1880,588,12,12,3 1784,348,12,12,5 1868,852,12,12,3 1772,240,12,12,5 1964,732,12,12,3 1844,648,12,12,4 1928,756,12,12,3 1772,168,12,12,4 1880,432,12,12,3 1976,312,12,12,5 1916,276,12,12,3 1916,684,12,12,3 1772,756,12,12,4 1808,816,12,12,5 1820,912,12,12,4 1940,600,12,12,4 1856,564,12,12,4 1904,336,12,12,3 1904,936,12,12,3 1940,636,12,12,3 1784,864,12,12,4 1952,960,12,12,5 1892,216,12,12,4 1976,168,12,12,4 1892,972,12,12,5 1856,864,12,12,4 1868,636,12,12,5 1820,1008,12,12,3 1940,960,12,12,4 1880,540,12,12,4 1868,888,12,12,5 1892,648,12,12,4 1892,744,12,12,4 1820,804,12,12,4 1880,912,12,12,3 1952,372,12,12,3 1892,852,12,12,4 1784,756,12,12,3 1988,1008,12,12,5 1916,576,12,12,5 1964,528,12,12,5 1760,420,12,12,3 1976,792,12,12,5 1820,456,12,12,5 1820,180,12,12,4 1844,372,12,12,3 1808,288,12,12,4 1820,852,12,12,3 1964,168,12,12,4 1928,648,12,12,4",
};

export const chapter1Art: Pixels = {
  w: 376,
  h: 250,
  palette: [
    "#1a3451",
    "#7c3e1d",
    "#5f3022",
    "#8d4a20",
    "#673722",
    "#5f5f65",
    "#4e281f",
    "#6d4d17",
  ],
  rects:
    "0,0,376,250,0 68,170,120,24,1 44,194,192,24,1 20,218,264,48,1 92,146,72,24,1 140,122,48,24,1 20,242,264,24,2 254,180,120,24,3 230,204,192,24,3 206,228,264,48,3 278,156,72,24,3 326,132,48,24,3 206,252,264,24,4 176,40,24,100,5 176,28,24,12,6 182,140,12,30,7",
};

export const chapter2Art: Pixels = {
  w: 376,
  h: 250,
  palette: ["#495b6d", "#1b4466", "#c3cad5", "#23699d", "#3a3f44", "#594719"],
  rects:
    "0,0,376,250,0 24,24,328,190,1 108,50,120,24,2 84,74,192,24,2 60,98,264,48,2 132,26,72,24,2 180,2,48,24,2 60,122,264,24,3 24,210,328,14,4 148,160,14,50,5 208,140,14,70,5",
};

export const chapter3Art: Pixels = {
  w: 376,
  h: 250,
  palette: ["#193859", "#c3cad5", "#23699d", "#545c66", "#3f444a"],
  rects:
    "0,0,376,250,0 68,30,120,24,1 44,54,192,24,1 20,78,264,48,1 92,6,72,24,1 140,-18,48,24,1 20,102,264,24,2 234,80,120,24,1 210,104,192,24,1 186,128,264,48,1 258,56,72,24,1 306,32,48,24,1 186,152,264,24,2 138,180,100,40,3 178,130,20,50,4",
};

export const chapter4Art: Pixels = {
  w: 376,
  h: 250,
  palette: ["#193e64", "#c3cad5", "#23699d", "#254426", "#241f19"],
  rects:
    "0,0,376,250,0 88,30,120,24,1 64,54,192,24,1 40,78,264,48,1 112,6,72,24,1 160,-18,48,24,1 40,102,264,24,2 0,200,376,50,3 185,40,6,160,4 118,60,140,6,4",
};

export const footerSceneArt: Pixels = {
  w: 340,
  h: 460,
  palette: [
    "#183c63",
    "#c3cad5",
    "#23699d",
    "#254426",
    "#2e1f0e",
    "#614b13",
    "#182f1c",
    "#0c0c0c",
  ],
  rects:
    "0,0,340,460,0 228,60,120,24,1 204,84,192,24,1 180,108,264,48,1 252,36,72,24,1 300,12,48,24,1 180,132,264,24,2 0,380,340,80,3 120,120,120,120,4 96,144,24,72,5 240,144,24,72,5 144,96,72,24,5 144,240,72,24,5 176,264,8,120,6 170,120,20,20,7",
};

export const grassArt: Pixels = {
  w: 2000,
  h: 140,
  palette: ["#365521", "#416521", "#2e5027", "#4d7521"],
  rects:
    "0,40,12,100,0 12,52,12,88,0 24,64,12,76,0 36,64,12,76,0 48,64,12,76,0 60,64,12,76,0 72,52,12,88,0 84,64,12,76,0 84,64,12,12,1 96,64,12,76,0 108,52,12,88,0 120,64,12,76,0 132,52,12,88,0 144,64,12,76,0 156,64,12,76,0 156,64,12,12,1 168,52,12,88,0 168,52,12,12,1 180,40,12,100,0 192,40,12,100,0 204,40,12,100,0 204,40,12,12,1 216,28,12,112,0 228,28,12,112,0 228,28,12,12,1 240,28,12,112,0 240,28,12,12,1 252,16,12,124,0 252,16,12,12,1 264,28,12,112,0 276,40,12,100,0 276,40,12,12,1 288,40,12,100,0 300,52,12,88,0 300,52,12,12,1 312,64,12,76,0 324,64,12,76,0 336,64,12,76,0 336,64,12,12,1 348,52,12,88,0 348,52,12,12,1 360,64,12,76,0 360,64,12,12,1 372,52,12,88,0 384,52,12,88,0 396,52,12,88,0 408,40,12,100,0 408,40,12,12,1 420,40,12,100,0 432,40,12,100,0 432,40,12,12,1 444,40,12,100,0 444,40,12,12,1 456,40,12,100,0 456,40,12,12,1 468,40,12,100,0 480,40,12,100,0 480,40,12,12,1 492,28,12,112,0 504,28,12,112,0 516,28,12,112,0 528,16,12,124,0 540,28,12,112,0 552,28,12,112,0 564,28,12,112,0 564,28,12,12,1 576,16,12,124,0 588,28,12,112,0 600,40,12,100,0 600,40,12,12,1 612,40,12,100,0 612,40,12,12,1 624,40,12,100,0 636,28,12,112,0 648,28,12,112,0 660,28,12,112,0 672,28,12,112,0 684,40,12,100,0 684,40,12,12,1 696,40,12,100,0 708,52,12,88,0 708,52,12,12,1 720,52,12,88,0 732,52,12,88,0 744,52,12,88,0 756,64,12,76,0 768,64,12,76,0 768,64,12,12,1 780,64,12,76,0 780,64,12,12,1 792,52,12,88,0 804,52,12,88,0 816,40,12,100,0 816,40,12,12,1 828,40,12,100,0 840,52,12,88,0 840,52,12,12,1 852,64,12,76,0 864,64,12,76,0 864,64,12,12,1 876,52,12,88,0 888,52,12,88,0 888,52,12,12,1 900,64,12,76,0 912,52,12,88,0 924,52,12,88,0 924,52,12,12,1 936,52,12,88,0 948,52,12,88,0 960,52,12,88,0 960,52,12,12,1 972,64,12,76,0 972,64,12,12,1 984,52,12,88,0 996,40,12,100,0 1008,28,12,112,0 1020,16,12,124,0 1032,16,12,124,0 1044,16,12,124,0 1044,16,12,12,1 1056,16,12,124,0 1068,16,12,124,0 1080,16,12,124,0 1092,16,12,124,0 1104,28,12,112,0 1116,16,12,124,0 1128,16,12,124,0 1140,16,12,124,0 1152,16,12,124,0 1152,16,12,12,1 1164,16,12,124,0 1164,16,12,12,1 1176,16,12,124,0 1188,16,12,124,0 1188,16,12,12,1 1200,28,12,112,0 1200,28,12,12,1 1212,16,12,124,0 1224,28,12,112,0 1236,16,12,124,0 1248,28,12,112,0 1260,40,12,100,0 1272,28,12,112,0 1272,28,12,12,1 1284,16,12,124,0 1296,16,12,124,0 1296,16,12,12,1 1308,28,12,112,0 1320,40,12,100,0 1332,52,12,88,0 1344,64,12,76,0 1344,64,12,12,1 1356,52,12,88,0 1356,52,12,12,1 1368,52,12,88,0 1380,52,12,88,0 1392,52,12,88,0 1392,52,12,12,1 1404,64,12,76,0 1416,64,12,76,0 1428,52,12,88,0 1428,52,12,12,1 1440,52,12,88,0 1440,52,12,12,1 1452,64,12,76,0 1464,52,12,88,0 1476,40,12,100,0 1488,52,12,88,0 1500,64,12,76,0 1512,64,12,76,0 1524,64,12,76,0 1536,64,12,76,0 1548,64,12,76,0 1548,64,12,12,1 1560,52,12,88,0 1560,52,12,12,1 1572,52,12,88,0 1584,52,12,88,0 1596,52,12,88,0 1596,52,12,12,1 1608,52,12,88,0 1620,52,12,88,0 1632,64,12,76,0 1644,64,12,76,0 1656,64,12,76,0 1668,64,12,76,0 1680,52,12,88,0 1680,52,12,12,1 1692,52,12,88,0 1692,52,12,12,1 1704,52,12,88,0 1704,52,12,12,1 1716,40,12,100,0 1728,52,12,88,0 1740,52,12,88,0 1752,52,12,88,0 1752,52,12,12,1 1764,52,12,88,0 1764,52,12,12,1 1776,52,12,88,0 1788,52,12,88,0 1788,52,12,12,1 1800,64,12,76,0 1812,52,12,88,0 1812,52,12,12,1 1824,64,12,76,0 1836,64,12,76,0 1836,64,12,12,1 1848,64,12,76,0 1860,52,12,88,0 1872,40,12,100,0 1872,40,12,12,1 1884,40,12,100,0 1884,40,12,12,1 1896,52,12,88,0 1908,64,12,76,0 1920,64,12,76,0 1920,64,12,12,1 1932,64,12,76,0 1944,64,12,76,0 1956,52,12,88,0 1968,40,12,100,0 1980,40,12,100,0 1992,40,12,100,0 420,62,12,12,2 1872,86,12,12,2 360,110,12,12,3 240,62,12,12,3 144,74,12,12,2 1692,110,12,12,3 144,98,12,12,2 1800,74,12,12,3 1284,62,12,12,2 336,98,12,12,2 996,98,12,12,3 792,62,12,12,3 948,122,12,12,2 852,122,12,12,3 564,86,12,12,2 1044,98,12,12,2 1284,74,12,12,3 1584,86,12,12,3 564,74,12,12,3 1212,98,12,12,2 912,98,12,12,3 1620,86,12,12,2 276,86,12,12,3 300,86,12,12,3 168,122,12,12,2 1572,62,12,12,3 12,50,12,12,3 588,62,12,12,2 1668,86,12,12,3 540,74,12,12,3 1932,62,12,12,3 108,50,12,12,2 1980,110,12,12,2 300,50,12,12,2 1260,50,12,12,2 1800,86,12,12,2 360,86,12,12,2 1788,74,12,12,3 1452,110,12,12,2 1968,110,12,12,3 336,122,12,12,3 360,50,12,12,2 1536,74,12,12,2 1044,50,12,12,2 1932,110,12,12,3 816,62,12,12,2 228,62,12,12,3 360,62,12,12,3 1488,122,12,12,2 552,50,12,12,3 288,98,12,12,3 1896,62,12,12,3 1056,50,12,12,2 108,62,12,12,3 1908,50,12,12,2 624,122,12,12,3 1944,86,12,12,2 1284,86,12,12,3 756,62,12,12,2 816,50,12,12,2 540,110,12,12,3 168,50,12,12,3 480,98,12,12,3 120,122,12,12,3 84,74,12,12,2 660,110,12,12,3 708,86,12,12,3 420,74,12,12,3 792,122,12,12,2 1164,98,12,12,2 528,122,12,12,3 852,122,12,12,3 576,74,12,12,3 1608,62,12,12,3 1560,86,12,12,3 408,98,12,12,2 1524,86,12,12,3 228,86,12,12,2 492,50,12,12,2 1164,74,12,12,2 156,98,12,12,2 600,98,12,12,3 1836,50,12,12,3 60,50,12,12,2 1932,122,12,12,2 300,98,12,12,2 540,74,12,12,3 960,86,12,12,3 984,110,12,12,2 708,122,12,12,3 864,50,12,12,2 744,50,12,12,2 960,74,12,12,2 960,50,12,12,2 1356,122,12,12,3 528,62,12,12,3 864,86,12,12,3 1080,62,12,12,3 936,62,12,12,2 1908,74,12,12,2 1416,74,12,12,2 276,62,12,12,2 948,98,12,12,2 1356,50,12,12,3 744,122,12,12,2 348,98,12,12,3 996,122,12,12,2 1548,86,12,12,2 1032,62,12,12,3 396,110,12,12,3 1332,110,12,12,2 1212,110,12,12,3 1344,74,12,12,2 876,110,12,12,2 240,50,12,12,2 1392,122,12,12,2 660,98,12,12,3 1944,74,12,12,2 60,122,12,12,2 1788,122,12,12,3",
};

export function pixelRects(p: Pixels) {
  return p.rects.split(" ").map((r) => {
    const [x, y, w, h, c] = r.split(",").map(Number) as [
      number,
      number,
      number,
      number,
      number,
    ];
    return { x, y, w, h, fill: p.palette[c] as string };
  });
}

export type Link = { label: string; href: string };
export type Row = { index: string; title: string };

export const header = {
  lead: "How to",
  steps: [
    { label: "Start", href: "#start" },
    { label: "Build", href: "#build" },
    { label: "Sell", href: "#sell" },
    { label: "Scale", href: "#scale" },
  ] satisfies Link[],
  links: [
    { label: "Resources", href: "#resources" },
    { label: "Pricing", href: "#pricing" },
  ] satisfies Link[],
  cta: "Create an index",
};

export const sky = {
  title: "Stockbreak lets you launch an entire index with AI",
  body: "Start with an AI research thesis, then hand off weights, vault setup, rebalancing, social and fees to agents.",
  primary: "Create an index",
  secondary: "Explore indexes",
  /** Fixed night gradient behind the pixel scene. */
  gradient: "linear-gradient(180deg, #173554 0%, #163e62 55%, #194e74 100%)",
  tasks: [
    { label: "Task running", name: "rebalance NVDAx" },
    { label: "Task completed", name: "Research: megacaps" },
    { label: "Task completed", name: "Feed card + Blink" },
  ],
};

export const hero = {
  lead: "Stockbreak is an index launchpad",
  muted: "designed to turn a stock thesis into a token",
  columns: [
    {
      title: "Agentic departments",
      body: "Stockbreak is organised like an index fund — research, vault, keeper and social, with shared context.",
    },
    {
      title: "Human in the loop",
      body: "Agents work alongside you, and every on-chain action waits for your signature before it moves funds.",
    },
    {
      title: "Fully extensible",
      body: "Connect over MCP, bring your own agent wallet, or drive it from Claude, ChatGPT or your own script.",
    },
  ],
  closing:
    "Bring your thesis into the index launchpad and start with the next concrete step.",
  closingCta: "Start in Stockbreak",
};

/** The agent workspace card. Stage coordinates are for a 960x780 canvas (ring centre 490,390). */
export const workspace = {
  project: "Magnificent Four…",
  initials: "SB",
  zoom: "Z 60%",
  path: "stockbreak/indexes/magnificent-four",
  stage: { w: 960, h: 780 },
  center: { x: 438, y: 362, label: "Stockbreak" },
  nodes: [
    { label: "Research", x: 444, y: 126 },
    { label: "Rebalance", x: 444, y: 606 },
    { label: "Vault", x: 204, y: 366 },
    { label: "Keeper", x: 684, y: 366 },
    { label: "Index", x: 271, y: 193 },
    { label: "Fees", x: 617, y: 193 },
    { label: "Social", x: 271, y: 539 },
    { label: "Pre-IPO", x: 617, y: 539 },
  ],
  /** Status chips (failed, running, done) next to a node. */
  chips: [
    { x: 287, y: 165, a: 3, b: 2, c: 2 },
    { x: 693, y: 553, a: 4, b: 4, c: 3 },
    { x: 480, y: 670, a: 4, b: 3, c: 2 },
  ],
  ghosts: [
    [97, 193],
    [177, 193],
    [773, 193],
    [853, 193],
    [117, 573],
    [793, 573],
    [370, 20],
    [550, 20],
    [370, 730],
    [550, 730],
  ] as [number, number][],
  tabs: ["Home", "Index", "Vault", "Agents", "Context"],
  thread: [
    {
      kind: "assistant",
      text: "That's a great way to check the thesis. I'm screening the megacaps against your mandate — drift, liquidity on Jupiter, and whether a pre-IPO sleeve fits. Once the weights are set, I'll simulate a 30-day rebalance. ",
      bold: "I'll bring you the transaction to sign before anything moves.",
    },
    {
      kind: "task",
      name: "Research agent",
      detail: "Screening AAPLx, NVDAx, TSLAx — liquidity",
      status: "Running",
    },
    {
      kind: "task",
      name: "Vault",
      detail: "Preparing join transaction for 50 USDC",
      status: "Queued",
    },
    {
      kind: "user",
      text: "The thesis is ready. Can you turn it into an index and share it?",
    },
    {
      kind: "assistant",
      text: "Absolutely. I'm turning the thesis into a mandate: drift 5%, 1% management fee, keeper allowed. ",
      bold: "You'll review the weights before anything goes on-chain.",
      tail: " Then I'll prepare the feed card and the Blink.",
    },
    {
      kind: "task",
      name: "Index capability",
      detail: "Writing the mandate and weights…",
      status: "Running",
    },
    {
      kind: "task",
      name: "Social capability",
      detail: "Preparing feed card and Blink…",
      status: "Queued",
    },
  ] as {
    kind: "assistant" | "task" | "user";
    text?: string;
    bold?: string;
    tail?: string;
    name?: string;
    detail?: string;
    status?: string;
  }[],
  prompt: "How are the megacaps doing vs SPYx",
};

export const intro = {
  eyebrow: "What Stockbreak does",
  lead: "Keep researching the thesis.",
  muted: "Put Stockbreak to work on the index.",
  body: "Start with the outcome you need. Stockbreak brings the right index context and capabilities together, then keeps you in control of what goes on-chain.",
};

export const launch = {
  eyebrow: "1.0 — Launch",
  lead: "Stockbreak launches",
  muted: "an index with you",
  body: "Give Stockbreak the thesis you built. It turns that context into the mandate, weights, token and launch materials you need to go to market.",
  rows: [
    { index: "1.1", title: "Thesis and weights" },
    { index: "1.2", title: "Index identity" },
    { index: "1.3", title: "Vault deployment" },
    { index: "1.4", title: "Launch content" },
  ] satisfies Row[],
};

export const stages = [
  {
    title: "Thesis stage",
    count: "1/1",
    top: 220,
    pinLast: false,
    tasks: [{ name: "Initial thesis", sub: "User task", active: true }],
  },
  {
    title: "Mandate stage",
    count: "0/3",
    top: 160,
    pinLast: false,
    tasks: [
      { name: "Pick tokens + weights", sub: "Agent task" },
      { name: "Set drift + fees", sub: "Agent task" },
      { name: "Review mandate", sub: "Agent requests approval" },
    ],
  },
  {
    title: "Launch stage",
    count: "0/4",
    top: 60,
    pinLast: true,
    tasks: [
      { name: "Name + ticker", sub: "User task" },
      { name: "Deploy vault", sub: "Agent requests approval" },
      { name: "Feed card", sub: "Agent task" },
      { name: "Share Blink", sub: "Agent task" },
    ],
  },
];

export const grow = {
  eyebrow: "2.0 — Grow",
  lead: "Stockbreak finds the right holders",
  muted: "and gives them a reason to care",
  body: "Stockbreak researches the market, finds promising communities, and runs coordinated growth work with your index context built in.",
  rows: [
    { index: "2.1", title: "Community research" },
    { index: "2.2", title: "Holder discovery" },
    { index: "2.3", title: "Outreach" },
    { index: "2.4", title: "Feed posts and Blinks" },
  ] satisfies Row[],
  email: {
    title: "Share preview",
    initials: "SB",
    fields: [
      { label: "To", value: "Sarah Chen  sarah@acme.com" },
      { label: "From", value: "Dewi Lestari  dewi@stockbreak.fun" },
      { label: "Subject", value: "Join the Magnificent Four index" },
    ],
    body: "Hey Sarah, I have been following how the megacaps track SPYx, and built an index around it. Every holder can rebalance with one signature, and the keeper handles drift at 5%. It is live on devnet if you want to look at the weights before joining the vault.",
  },
  report: {
    title: "Index Campaign Report",
    label: "Join rate",
    value: "58%",
    delta: "+12%",
    fill: 58,
    legend: ["Joined 47", "Viewed 34"],
    rows: [
      { label: "Audience", value: "—" },
      { label: "Sent", value: "81" },
      { label: "Delivered", value: "79" },
      { label: "Bounced", value: "2", badge: "10%", tone: "destructive" },
      { label: "Replied", value: "6", badge: "6%", tone: "success" },
    ],
    cta: "View details",
  },
};

export const operate = {
  eyebrow: "3.0 — Operate",
  lead: "Stockbreak keeps the index moving",
  muted: "after launch",
  body: "Bring rebalancing, analytics, holder support and recurring keeper work into Stockbreak without giving up control. The same mandate keeps every part of the index moving together.",
  rows: [
    { index: "3.1", title: "Vault incorporation" },
    { index: "3.2", title: "Index analytics" },
    { index: "3.3", title: "Holder support" },
    { index: "3.4", title: "Recurring rebalances" },
  ] satisfies Row[],
};

/** Segmented meters: 44 steps, brand to 20, warning to 36, destructive after. */
export const metrics = [
  { label: "Joins", value: "234", delta: "+34%", fill: 28 / 44 },
  {
    label: "Daily active holders",
    value: "10.291",
    delta: "+8%",
    fill: 33 / 44,
  },
  { label: "AUM (USDC)", value: "49.182", delta: "+37%", fill: 38 / 44 },
];
export const meterSteps = 44;
export const meterZones = [
  { upTo: 20 / 44, color: "var(--brand)" },
  { upTo: 36 / 44, color: "var(--warning)" },
  { upTo: 1, color: "var(--destructive)" },
];

export const chart = {
  title: "Time Series",
  yAxis: ["400k", "300k", "200k", "100k"],
  xAxis: ["0 d", "5 d", "10 d", "15 d", "20 d", "25 d"],
  grid: "M0 120 H690 M0 86 H690 M0 52 H690 M0 18 H690",
  ticks:
    "M0 118 L0 125 M115 118 L115 125 M230 118 L230 125 M345 118 L345 125 M460 118 L460 125 M575 118 L575 125",
  series: [
    {
      label: "Week 1",
      color: "var(--chart-1)",
      d: "M0 86 L60 70 L120 48 L200 48 L250 36 L330 36 L400 24 L480 24 L560 24 L690 22",
    },
    {
      label: "Week 2",
      color: "var(--brand)",
      d: "M0 95 L60 85 L120 70 L200 70 L250 60 L330 60 L400 62 L480 48 L560 48 L690 40",
    },
    {
      label: "Week 3",
      color: "var(--info)",
      d: "M0 100 L60 100 L120 100 L200 102 L250 102 L330 100 L400 100 L480 100 L560 92 L690 92",
    },
  ],
};

export const joiners = [
  { name: "Noah Garcia", place: "Lisbon, PT", initials: "NG" },
  { name: "Emily Rodriguez", place: "Jakarta, ID", initials: "ER" },
  { name: "Sarah Chen", place: "Singapore, SG", initials: "SC" },
  { name: "Jordan Brown", place: "Denver, CO", initials: "JB" },
  { name: "Maya Kim", place: "Austin, TX", initials: "MK" },
];
export const joinersFooter = {
  count: "2,846",
  text: "people joined an index this week",
};

export const tools = {
  title: "All the tools and systems",
  muted: "your index needs",
  body: "Give agents the context, tools and approvals they need to keep index work moving.",
  points: [
    "You stay in control, nothing ships without your signature",
    "Run multiple tasks in the background at the same time.",
    "Customize agents with apps, skills, and schedules",
  ],
  activePoint: 1,
  gradient: "linear-gradient(180deg, #173554 0%, #163e62 55%, #194e74 100%)",
  groups: [
    {
      status: "Ready to review",
      tone: "warning",
      items: [{ name: "ICP analysis", agent: "Research agent" }],
    },
    {
      status: "Running",
      tone: "info",
      items: [{ name: "Q1 analyst report", agent: "Vault agent" }],
    },
    {
      status: "Completed",
      tone: "success",
      items: [
        { name: "Q4 drift review", agent: "Keeper agent" },
        { name: "Rebalance playbook v2", agent: "Research agent" },
        { name: "Fee conversion study", agent: "Vault agent" },
      ],
    },
  ],
  dock: ["Research", "Vault", "Keeper", "Index", "Social", "Fees", "Pre-IPO"],
};

export const guide = {
  title: "Learn how to launch an index",
  body: "Read the guide, then let Stockbreak turn each step into a roadmap, tasks, and agents.",
  cta: "Put the guide to work",
  download: "Download full guide",
  chapters: [
    { n: 1, title: "How To Launch", numeral: "I", art: chapter1Art },
    { n: 2, title: "How To Research", numeral: "II", art: chapter2Art },
    { n: 3, title: "How To Share", numeral: "III", art: chapter3Art },
    { n: 4, title: "How To Operate", numeral: "IV", art: chapter4Art },
  ] as {
    n: number;
    title: string;
    numeral: string;
    art: Pixels;
  }[],
};

export const footer = {
  title: "Run an entire index",
  muted: "with AI agents",
  howTo: ["How to launch", "How to research", "How to share", "How to operate"],
  columns: [
    ["Homepage", "Resources", "Pricing", "Careers"],
    ["Privacy Policy", "Terms of Service", "Docs", "Support"],
  ],
  socials: ["X", "in"],
  builtOn: "Solana",
  network: "devnet",
  copyright: "Copyright © 2026 Stockbreak",
  card: {
    lead: "Stockbreak is an index launchpad ",
    muted: "designed to run an entire fund.",
    cta: "Create an index",
  },
  hackathon: "Made for the Stocklana hackathon",
};

<script lang="ts">
  import { Avatar, AvatarFallback } from "$lib/components/ui/avatar";
  import { Badge } from "$lib/components/ui/badge";
  import { Button } from "$lib/components/ui/button";
  import { Card } from "$lib/components/ui/card";
  import { FeatureRow } from "$lib/components/ui/feature-row";
  import * as InsetPanel from "$lib/components/ui/inset-panel";
  import { StatTile } from "$lib/components/ui/stat-tile";
  import * as Tabs from "$lib/components/ui/tabs";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import {
    chart,
    footer,
    footerSceneArt,
    grassArt,
    grow,
    guide,
    header,
    hero,
    intro,
    joiners,
    joinersFooter,
    launch,
    metrics,
    meterSteps,
    meterZones,
    operate,
    type Pixels,
    pixelRects,
    sky,
    skyArt,
    stages,
    tools,
    toolsArt,
    workspace,
  } from "./data";

  const wordmark = "font-['Instrument_Serif',Georgia,serif]";
  const glass = "border-white/45 bg-white/25 text-white shadow-none hover:bg-white/35";
  const wrap = "mx-auto w-full max-w-[1700px] px-5 md:px-10";
  const rects = {
    sky: pixelRects(skyArt),
    tools: pixelRects(toolsArt),
    footer: pixelRects(footerSceneArt),
    grass: pixelRects(grassArt),
  };
  const chapters = guide.chapters.map((c) => ({ ...c, rects: pixelRects(c.art) }));
  const vb = (a: Pixels) => `0 0 ${a.w} ${a.h}`;
  const meter = (v: number) => ({ value: v, steps: meterSteps, zones: meterZones });
  const headingCls = "font-normal tracking-[-1.2px] text-foreground-2 dark:text-muted-foreground-2";
  const eyebrow = "font-mono text-[13px] tracking-[2px] text-muted-foreground uppercase";
  const sections = {
    launch: "text-[34px] tracking-[-1px] md:text-[40px]",
    grow: "text-[34px] tracking-[-1px] md:text-[50px]",
    operate: "text-[34px] tracking-[-1px] md:text-[50px]",
  };
</script>

{#snippet spark(cls: string)}
  <IconPlaceholder lucide="SparklesIcon" tabler="IconSparkles" hugeicons="SparklesIcon" phosphor="SparkleIcon" remixicon="RiSparklingLine" className={cls} />
{/snippet}

{#snippet folder(cls: string)}
  <IconPlaceholder lucide="FolderIcon" tabler="IconFolder" hugeicons="Folder01Icon" phosphor="FolderIcon" remixicon="RiFolderLine" className={cls} />
{/snippet}

<div class="min-h-svh overflow-x-clip bg-background text-foreground">
  <!-- Sky hero -->
  <section class="relative isolate min-h-[760px] overflow-hidden text-white md:min-h-[1100px]" style:background={sky.gradient}>
    <svg viewBox={vb(skyArt)} preserveAspectRatio="xMidYMid slice" shape-rendering="crispEdges" aria-hidden="true" class="absolute inset-0 -z-10 size-full">
      {#each rects.sky as r, i (i)}
        <rect x={r.x} y={r.y} width={r.w} height={r.h} fill={r.fill} />
      {/each}
    </svg>
    <div class="{wrap} relative z-10 pt-6 pb-24">
      <div class="flex items-center justify-between gap-4">
        <span class="{wordmark} text-[34px] text-white">Stockbreak</span>
        <div class="flex items-center gap-3">
          <div class="hidden h-11 items-center rounded-[10px] border px-2 text-base lg:flex {glass}">
            <span class="px-3.5 text-white/70">{header.lead}</span>
            {#each header.steps as s (s.label)}
              <a href={s.href} class="px-3.5">{s.label}</a>
            {/each}
          </div>
          {#each header.links as l (l.label)}
            <Button variant="ghost" href={l.href} class="hidden h-11 px-5 text-base md:inline-flex {glass}">{l.label}</Button>
          {/each}
          <Button elevation="raised" class="h-11 px-[18px] text-base">{header.cta}</Button>
        </div>
      </div>

      <div class="mt-24 max-w-[760px] md:mt-[132px]">
        <h1 class="text-[40px] leading-[1.08] font-normal tracking-[-1.5px] md:text-[68px] md:tracking-[-2px]">{sky.title}</h1>
        <p class="mt-8 max-w-[640px] text-[17px] leading-normal text-white/90 md:mt-10 md:text-[19px]">{sky.body}</p>
        <div class="mt-9 flex flex-wrap gap-3.5">
          <Button elevation="raised" size="lg" class="h-14 px-6 text-lg">{sky.primary}</Button>
          <Button variant="ghost" size="lg" class="h-14 px-6 text-lg {glass}">{sky.secondary}</Button>
        </div>
      </div>

      <div class="absolute top-[330px] right-[8%] hidden flex-col gap-3 lg:flex">
        {#each sky.tasks as t (t.name)}
          <div class="flex h-[46px] w-[300px] items-center gap-2 rounded-lg border border-emerald-700 bg-emerald-950 px-3.5 text-[13px] whitespace-nowrap text-emerald-100 [transform:perspective(500px)_rotateY(-12deg)]">
            <span class="size-1.5 shrink-0 rounded-full bg-emerald-400"></span>
            <span class="opacity-80">{t.label}</span>
            <b class="font-semibold text-white">{t.name}</b>
          </div>
        {/each}
      </div>
    </div>
  </section>

  <main class="{wrap} flex flex-col gap-28 pt-16 pb-24 md:gap-40 md:pt-24">
    <!-- Hero workspace -->
    <section class="flex flex-col gap-16">
      <h2 class="text-center text-[34px] leading-[1.12] font-normal tracking-[-1.2px] text-foreground-2 md:text-[60px] md:tracking-[-1.5px] dark:text-muted-foreground-2">
        {hero.lead}<br />
        <span class="text-muted-foreground">{hero.muted}</span>
      </h2>

      <Card elevation="floating" class="mx-auto w-full max-w-[1420px] gap-0 overflow-hidden rounded-[22px] p-0 lg:h-[780px] lg:flex-row">
        <div class="relative hidden flex-1 overflow-hidden bg-[radial-gradient(var(--border-2)_1px,transparent_1px)] [background-size:14px_14px] md:block">
          <div class="absolute inset-x-0 top-0 z-10 flex h-[68px] items-center justify-between px-5">
            <div class="flex items-center gap-3.5">
              <Badge variant="secondary" class="h-9 gap-2.5 px-3 text-[13px]">
                <span class="inline-flex size-[22px] items-center justify-center rounded-full bg-border font-mono text-[9px]">{workspace.initials}</span>
                {workspace.project}
                <IconPlaceholder lucide="ChevronDownIcon" tabler="IconChevronDown" hugeicons="ArrowDown01Icon" phosphor="CaretDownIcon" remixicon="RiArrowDownSLine" className="size-3" />
              </Badge>
              <span class="font-mono text-[13px] text-muted-foreground">{workspace.zoom}</span>
            </div>
            <div class="flex gap-3.5 text-foreground-2">
              {@render folder("size-4")}
              <IconPlaceholder lucide="SearchIcon" tabler="IconSearch" hugeicons="SearchIcon" phosphor="MagnifyingGlassIcon" remixicon="RiSearchLine" className="size-4" />
            </div>
          </div>
          <div class="absolute top-0 left-1/2 -translate-x-1/2" style:width="{workspace.stage.w}px" style:height="{workspace.stage.h}px">
            <svg width={workspace.stage.w} height={workspace.stage.h} viewBox="0 0 960 780" class="absolute inset-0" aria-hidden="true">
              <circle cx="490" cy="390" r="240" fill="none" stroke="var(--border)" stroke-width="1.5" />
              <path
                d="M490 90 V690 M190 390 H790 M317.2 217.2 L662.8 562.8 M662.8 217.2 L317.2 562.8 M317.2 217.2 H227.2 M662.8 217.2 H752.8 M317.2 562.8 H227.2 M662.8 562.8 H752.8"
                fill="none"
                stroke="var(--border)"
                stroke-width="1.5"
                stroke-dasharray="4 5"
              />
            </svg>
            {#each workspace.ghosts as g (`${g[0]}-${g[1]}`)}
              <div class="absolute h-[50px] w-[66px] rounded-lg border border-border-2 bg-muted" style:left="{g[0]}px" style:top="{g[1]}px"></div>
            {/each}
            {#each workspace.nodes as n (n.label)}
              <Card elevation="raised" class="absolute h-12 w-[92px] items-center justify-center gap-0 rounded-[10px] p-0 text-sm" style="left: {n.x}px; top: {n.y}px">
                {n.label}
              </Card>
            {/each}
            <Card elevation="raised" class="{wordmark} absolute h-12 w-[104px] items-center justify-center gap-0 rounded-[10px] p-0 text-[17px]" style="left: {workspace.center.x}px; top: {workspace.center.y}px">
              {workspace.center.label}
            </Card>
            <span class="absolute top-[316px] left-[476px] size-7 rounded-full bg-brand shadow-[0_0_0_5px_var(--brand-soft)]"></span>
            {#each workspace.chips as c (`${c.x}-${c.y}`)}
              <div class="absolute flex items-center gap-2 rounded-[7px] border border-border bg-card px-2 py-1 text-[11px]" style:left="{c.x}px" style:top="{c.y}px">
                <span class="flex items-center gap-1"><span class="size-1.5 rounded-full bg-destructive"></span>{c.a}</span>
                <span class="flex items-center gap-1"><span class="size-1.5 rounded-full bg-info"></span>{c.b}</span>
                <span class="flex items-center gap-1"><span class="size-1.5 rounded-full bg-brand"></span>{c.c}</span>
              </div>
            {/each}
          </div>
          <div class="absolute bottom-4 left-5 flex items-center gap-2 font-mono text-[11px] text-muted-foreground">
            {@render folder("size-3")}
            {workspace.path}
          </div>
        </div>

        <Card elevation="raised" class="m-2 shrink-0 gap-0 overflow-hidden rounded-2xl p-0 lg:w-[436px]">
          <Tabs.Root value="Home" class="border-b border-border-2 p-3.5">
            <Tabs.List class="flex-wrap">
              {#each workspace.tabs as t (t)}
                <Tabs.Trigger value={t}>{t}</Tabs.Trigger>
              {/each}
            </Tabs.List>
          </Tabs.Root>
          <div class="flex flex-1 flex-col gap-3 overflow-hidden px-4 py-3.5 text-[13.5px] leading-[1.55] text-foreground-2">
            {#each workspace.thread as m, i (i)}
              {#if m.kind === "user"}
                <div class="max-w-[300px] self-end rounded-xl border border-border-2 bg-muted px-4 py-3.5 text-foreground">{m.text}</div>
              {:else if m.kind === "task"}
                <Card elevation="raised" size="sm" class="flex-row items-center gap-2.5 rounded-[10px] px-3.5 py-3 text-[13px]">
                  <span class="font-semibold whitespace-nowrap text-foreground">{m.name}</span>
                  <span class="min-w-0 flex-1 truncate text-muted-foreground">{m.detail}</span>
                  <Badge variant={m.status === "Running" ? "info" : "secondary"}>{m.status}</Badge>
                </Card>
              {:else}
                <div class="flex gap-2.5">
                  {@render spark("mt-1 size-3.5 shrink-0 text-muted-foreground")}
                  <p>{m.text}<b class="font-semibold text-foreground">{m.bold}</b>{m.tail}</p>
                </div>
              {/if}
            {/each}
          </div>
          <Card elevation="raised" class="m-3.5 mt-1.5 flex-row items-center gap-2.5 rounded-xl py-2.5 pr-2.5 pl-4">
            <span class="min-w-0 flex-1 truncate text-sm">{workspace.prompt}</span>
            <Button elevation="raised" size="icon" class="size-[30px] rounded-lg" aria-label="Send">
              <IconPlaceholder lucide="ArrowUpIcon" tabler="IconArrowUp" hugeicons="ArrowUp02Icon" phosphor="ArrowUpIcon" remixicon="RiArrowUpLine" className="size-3.5" />
            </Button>
          </Card>
        </Card>
      </Card>

      <div class="mx-auto grid w-full max-w-[1420px] gap-8 md:grid-cols-3 md:gap-12">
        {#each hero.columns as c (c.title)}
          <p class="text-[17px] leading-[1.45] text-foreground-2 md:text-[19px]">
            <b class="font-semibold text-foreground">{c.title} — </b>{c.body}
          </p>
        {/each}
      </div>
      <div class="mx-auto flex max-w-3xl flex-col items-center gap-6 text-center md:flex-row md:text-left">
        <p class="text-xl leading-snug text-foreground-2">{hero.closing}</p>
        <Button elevation="raised" size="lg" class="h-14 shrink-0 px-6 text-lg">{hero.closingCta}</Button>
      </div>
    </section>

    <!-- What Stockbreak does -->
    <section class="flex flex-col gap-7">
      <div class={eyebrow}>{intro.eyebrow}</div>
      <h2 class="text-[40px] leading-[1.12] font-normal tracking-[-1.4px] md:text-[56px]">
        <span class="text-foreground-2 dark:text-muted-foreground-2">{intro.lead}</span><br />
        <span class="text-muted-foreground">{intro.muted}</span>
      </h2>
      <p class="max-w-[640px] text-[17px] leading-normal text-foreground-2 md:text-[19px]">{intro.body}</p>
    </section>

    <!-- 1.0 Launch -->
    <section class="grid items-start gap-12 lg:grid-cols-[470px_1fr] lg:gap-16">
      <div class="flex flex-col gap-7">
        <div class={eyebrow}>{launch.eyebrow}</div>
        <h2 class="leading-[1.15] {headingCls} {sections.launch}">{launch.lead} <span class="text-muted-foreground">{launch.muted}</span></h2>
        <p class="max-w-[520px] text-[17px] leading-relaxed text-foreground-2 md:text-[19px]">{launch.body}</p>
        <div class="flex flex-col gap-2">
          {#each launch.rows as r (r.index)}
            <FeatureRow elevation="raised" index={r.index} title={r.title} />
          {/each}
        </div>
      </div>
      <Card elevation="floating" class="gap-0 overflow-hidden rounded-[14px] bg-[radial-gradient(var(--border)_1px,transparent_1px)] [background-size:14px_14px] p-0 md:flex-row">
        {#each stages as s, i (s.title)}
          <div class="flex min-h-[420px] flex-1 flex-col md:h-[520px] {i > 0 ? 'border-t-2 border-border md:border-t-0 md:border-l-2' : ''}">
            <div class="flex justify-between px-4 py-3.5 font-mono text-[11px] text-muted-foreground">
              <span>{s.title}</span>
              <span>{s.count}</span>
            </div>
            <div class="flex flex-1 flex-col gap-3 px-3 pb-6" style:padding-top="{Math.max(s.top - 48, 8)}px">
              {#each s.tasks as t, ti (t.name)}
                <Card
                  elevation="raised"
                  size="sm"
                  class="h-[54px] flex-row items-center gap-3 rounded-[10px] px-3 py-0 {'active' in t ? '' : 'opacity-55'} {s.pinLast && ti === s.tasks.length - 1 ? 'mt-auto' : ''}"
                >
                  <span class="inline-flex size-7 items-center justify-center rounded-[7px] border border-border-2 bg-muted text-foreground-2">
                    {@render spark("size-3.5")}
                  </span>
                  <div class="min-w-0 flex-1">
                    <div class="truncate text-[13px] font-medium">{t.name}</div>
                    <div class="truncate text-[11px] text-muted-foreground">{t.sub}</div>
                  </div>
                  <IconPlaceholder lucide="ArrowUpRightIcon" tabler="IconArrowUpRight" hugeicons="ArrowUpRight01Icon" phosphor="ArrowUpRightIcon" remixicon="RiArrowRightUpLine" className="size-3 text-muted-foreground" />
                </Card>
              {/each}
            </div>
          </div>
        {/each}
      </Card>
    </section>

    <!-- 2.0 Grow -->
    <section class="grid items-start gap-12 lg:grid-cols-[1fr_520px] lg:gap-16">
      <div class="relative order-2 flex flex-col gap-4 lg:order-1 lg:block lg:h-[480px]">
        <Card elevation="floating" class="gap-0 rounded-2xl px-[26px] py-[22px] lg:absolute lg:top-[70px] lg:left-0 lg:h-[380px] lg:w-[600px]">
          <div class="mb-3.5 flex items-center gap-3 text-sm">
            <span class="inline-flex size-7 items-center justify-center rounded-lg border border-border-2 bg-muted text-xs font-semibold">{grow.email.initials}</span>
            {grow.email.title}
          </div>
          {#each grow.email.fields as f (f.label)}
            <div class="flex gap-10 border-t border-border-2 py-3 text-[13px]">
              <span class="w-[60px] text-muted-foreground">{f.label}</span>
              <span class="font-semibold">{f.value}</span>
            </div>
          {/each}
          <p class="mt-4 text-[13px] leading-[1.6] text-foreground-2">{grow.email.body}</p>
        </Card>
        <Card elevation="floating" class="gap-0 overflow-hidden rounded-2xl p-0 lg:absolute lg:top-0 lg:left-[410px] lg:w-[300px]">
          <div class="flex items-center justify-between border-b border-border-2 px-4 py-3 text-xs">
            {grow.report.title}
            <IconPlaceholder lucide="PlusIcon" tabler="IconPlus" hugeicons="Add01Icon" phosphor="PlusIcon" remixicon="RiAddLine" className="size-3 text-muted-foreground" />
          </div>
          <div class="p-[18px]">
            <div class="text-xs text-muted-foreground">{grow.report.label}</div>
            <div class="flex items-baseline gap-2">
              <span class="text-5xl tracking-[-2px]">{grow.report.value}</span>
              <Badge variant="success">{grow.report.delta}</Badge>
            </div>
            <div class="mt-2 h-[26px] overflow-hidden rounded border border-border-2 bg-muted">
              <div class="h-full bg-brand" style:width="{grow.report.fill}%"></div>
            </div>
            <div class="mt-2 flex gap-3.5 text-[10px] text-muted-foreground">
              <span class="flex items-center gap-1"><span class="size-1.5 rounded-full bg-brand"></span>{grow.report.legend[0]}</span>
              <span class="flex items-center gap-1"><span class="size-1.5 rounded-full bg-muted-foreground-2"></span>{grow.report.legend[1]}</span>
            </div>
            {#each grow.report.rows as r (r.label)}
              <div class="mt-3 flex items-center justify-between text-xs">
                <span class="text-foreground-2">{r.label}</span>
                <span class="flex items-center gap-1.5">
                  {#if r.badge}
                    <Badge variant={r.tone === "destructive" ? "destructive" : "success"}>{r.badge}</Badge>
                  {/if}
                  {r.value}
                </span>
              </div>
            {/each}
            <Button variant="secondary" elevation="raised" size="sm" class="mt-4 w-full">{grow.report.cta}</Button>
          </div>
        </Card>
      </div>
      <div class="order-1 lg:order-2">
        <div class="flex flex-col gap-7">
          <div class={eyebrow}>{grow.eyebrow}</div>
          <h2 class="leading-[1.15] {headingCls} {sections.grow}">{grow.lead} <span class="text-muted-foreground">{grow.muted}</span></h2>
          <p class="max-w-[520px] text-[17px] leading-relaxed text-foreground-2 md:text-[19px]">{grow.body}</p>
          <div class="flex flex-col gap-2">
            {#each grow.rows as r (r.index)}
              <FeatureRow elevation="raised" index={r.index} title={r.title} />
            {/each}
          </div>
        </div>
      </div>
    </section>

    <!-- 3.0 Operate -->
    <section class="grid items-start gap-12 lg:grid-cols-[500px_1fr] lg:gap-16">
      <div class="flex flex-col gap-7">
        <div class={eyebrow}>{operate.eyebrow}</div>
        <h2 class="leading-[1.15] {headingCls} {sections.operate}">{operate.lead} <span class="text-muted-foreground">{operate.muted}</span></h2>
        <p class="max-w-[520px] text-[17px] leading-relaxed text-foreground-2 md:text-[19px]">{operate.body}</p>
        <div class="flex flex-col gap-2">
          {#each operate.rows as r (r.index)}
            <FeatureRow elevation="raised" index={r.index} title={r.title} />
          {/each}
        </div>
      </div>
      <div class="relative flex flex-col gap-4 lg:mt-24 lg:block lg:h-[640px]">
        <Card elevation="floating" class="gap-0 rounded-2xl px-[26px] py-7 lg:w-[760px]">
          <div class="grid gap-8 sm:grid-cols-3">
            {#each metrics as m (m.label)}
              <StatTile class="w-auto border-0 bg-transparent p-0 shadow-none" label={m.label} value={m.value} delta={m.delta} meter={meter(m.fill)} />
            {/each}
          </div>
          <div class="mt-9 text-[15px]">{chart.title}</div>
          <div class="mt-3.5 flex gap-2.5">
            <div class="flex h-32 flex-col justify-between font-mono text-[10px] text-muted-foreground">
              {#each chart.yAxis as y (y)}<span>{y}</span>{/each}
            </div>
            <div class="min-w-0 flex-1 lg:max-w-[640px]">
              <svg viewBox="0 0 690 150" class="h-auto w-full overflow-visible" role="img" aria-label="Time series">
                <path d={chart.grid} fill="none" stroke="var(--border-2)" />
                <path d={chart.ticks} fill="none" stroke="var(--foreground-2)" stroke-width="1.5" />
                {#each chart.series as s (s.label)}
                  <path d={s.d} fill="none" stroke={s.color} stroke-width="2.5" />
                {/each}
              </svg>
              <div class="mt-1 flex justify-between font-mono text-[10px] text-muted-foreground">
                {#each chart.xAxis as x (x)}<span>{x}</span>{/each}
              </div>
            </div>
          </div>
          <div class="mt-[18px] flex gap-4 text-[13px]">
            {#each chart.series as s (s.label)}
              <span class="flex items-center gap-1.5"><span class="size-2 rounded-full" style:background={s.color}></span>{s.label}</span>
            {/each}
          </div>
        </Card>
        <InsetPanel.Root elevation="floating" class="lg:absolute lg:top-[160px] lg:right-0 lg:w-[380px]">
          <InsetPanel.Header>
            <span class="size-3 rounded-full bg-brand"></span>
            Live joiners
          </InsetPanel.Header>
          <InsetPanel.Body fade class="p-0">
            {#each joiners as j (j.name)}
              <div class="flex items-center gap-3.5 border-b border-border-2 p-4">
                <Avatar class="size-10">
                  <AvatarFallback class="font-mono text-[13px]">{j.initials}</AvatarFallback>
                </Avatar>
                <div class="min-w-0 flex-1">
                  <div class="text-[15px] font-semibold">{j.name}</div>
                  <div class="text-[13px] text-foreground-2">{j.place}</div>
                </div>
                <Badge variant="info" class="gap-1">
                  <IconPlaceholder lucide="CheckIcon" tabler="IconCheck" hugeicons="Tick02Icon" phosphor="CheckIcon" remixicon="RiCheckLine" className="size-3" />
                  Joined
                </Badge>
              </div>
            {/each}
          </InsetPanel.Body>
          <InsetPanel.Footer class="justify-center text-sm text-foreground-2">
            <b class="font-medium text-foreground">{joinersFooter.count}</b>
            &nbsp;{joinersFooter.text}
          </InsetPanel.Footer>
        </InsetPanel.Root>
      </div>
    </section>
  </main>

  <!-- Tools -->
  <section class="relative isolate overflow-hidden pt-24 pb-20 text-center text-white md:pt-[190px]" style:background={tools.gradient}>
    <svg viewBox={vb(toolsArt)} preserveAspectRatio="xMidYMid slice" shape-rendering="crispEdges" aria-hidden="true" class="absolute inset-0 -z-10 size-full">
      {#each rects.tools as r, i (i)}
        <rect x={r.x} y={r.y} width={r.w} height={r.h} fill={r.fill} />
      {/each}
    </svg>
    <div class={wrap}>
      <h2 class="text-[34px] leading-[1.15] font-normal tracking-[-1.3px] md:text-[54px]">
        {tools.title}<br />
        <span class="opacity-85">{tools.muted}</span>
      </h2>
      <p class="mx-auto mt-7 max-w-[600px] text-lg leading-[1.55] opacity-90">{tools.body}</p>
      <div class="mt-10 flex flex-col items-center gap-6 md:flex-row md:items-start md:justify-center md:gap-[30px]">
        {#each tools.points as p, i (p)}
          <div class="w-[250px] border-l border-white/35 px-5 text-left text-[17px] leading-normal {i === tools.activePoint ? 'text-white' : 'text-white/60'}">{p}</div>
        {/each}
      </div>
      <div class="mx-auto mt-14 max-w-[800px] rounded-[22px] border border-white/60 bg-sky-200/90 p-2.5 md:mt-[150px]">
        <Card elevation="floating" class="relative h-[470px] gap-0 overflow-hidden rounded-[14px] p-0 text-left">
          <Card elevation="floating" class="absolute top-7 left-1/2 w-[270px] -translate-x-1/2 gap-0 rounded-xl px-[18px] py-4 md:left-[140px] md:translate-x-0">
            {#each tools.groups as g, gi (g.status)}
              <div>
                {#if gi > 0}<div class="my-3 h-px bg-border-2"></div>{/if}
                <Badge variant={g.tone as "warning" | "info" | "success"} class="font-mono text-[10px]">{g.status}</Badge>
                {#each g.items as it (it.name)}
                  <div class="mt-2.5 flex justify-between text-xs">
                    <span>{it.name}</span>
                    <span class="text-[9px] text-muted-foreground uppercase">{it.agent}</span>
                  </div>
                {/each}
              </div>
            {/each}
          </Card>
          <div class="absolute inset-x-0 bottom-[18px] flex flex-wrap justify-center gap-2.5 px-3">
            {#each tools.dock as d (d)}
              <Card elevation="raised" class="h-10 w-24 items-center justify-center gap-0 rounded-[10px] p-0 text-[13px]">{d}</Card>
            {/each}
          </div>
        </Card>
      </div>
    </div>
  </section>

  <!-- Guide -->
  <section class="{wrap} flex flex-col items-center gap-8 py-24 text-center md:py-[170px]">
    <h2 class="text-[34px] leading-[1.15] font-normal tracking-[-1.4px] text-foreground-2 md:text-[56px] dark:text-muted-foreground-2">{guide.title}</h2>
    <p class="max-w-[560px] text-[19px] leading-normal text-foreground-2">{guide.body}</p>
    <Button elevation="raised" size="lg" class="h-[52px] px-[22px] text-[17px]">{guide.cta}</Button>
    <div class="mt-10 grid w-full max-w-[880px] gap-x-10 gap-y-12 text-left sm:grid-cols-2">
      {#each chapters as c (c.n)}
        <div class="flex flex-col items-center gap-[18px]">
          <Card elevation="floating" class="w-full max-w-[376px] gap-0 rounded-2xl px-[22px] py-6">
            <div class="text-[22px] leading-tight">Chapter {c.n}<br />{c.title}</div>
            <div class="mt-[26px] mb-[18px] h-px bg-border-2"></div>
            <div class="font-mono text-[10px] text-muted-foreground">Chapter {c.numeral}</div>
            <svg viewBox={vb(c.art)} preserveAspectRatio="xMidYMid slice" shape-rendering="crispEdges" aria-hidden="true" class="mt-4 h-[250px] w-full overflow-hidden rounded-md">
              {#each c.rects as r, i (i)}
                <rect x={r.x} y={r.y} width={r.w} height={r.h} fill={r.fill} />
              {/each}
            </svg>
            <div class="mt-3 flex justify-between font-mono text-[10px] text-muted-foreground">
              <span>by Stockbreak</span>
              <span>2026</span>
            </div>
          </Card>
          <span class="font-mono text-xs text-muted-foreground">Read this chapter ({c.numeral})</span>
        </div>
      {/each}
    </div>
    <Button variant="secondary" elevation="raised">{guide.download}</Button>
  </section>

  <!-- Footer -->
  <footer class="relative overflow-hidden pt-8 pb-[200px]">
    <div class="{wrap} grid items-start gap-14 lg:grid-cols-2 lg:gap-24 xl:px-[200px]">
      <div class="flex flex-col">
        <h2 class="text-[34px] leading-[1.15] font-normal tracking-[-1px] text-foreground-2 md:text-[46px] dark:text-muted-foreground-2">
          {footer.title}<br />
          <span class="text-muted-foreground">{footer.muted}</span>
        </h2>
        <div class="mt-14 flex flex-wrap gap-4 text-[17px]">
          <span class="text-muted-foreground">{header.lead}</span>
          {#each footer.howTo as h (h)}
            <a href="#guide">{h}</a>
          {/each}
        </div>
        <div class="mt-8 flex gap-[100px] text-[17px]">
          {#each footer.columns as col (col[0])}
            <div class="flex flex-col gap-[18px]">
              {#each col as l (l)}
                <a href="#top">{l}</a>
              {/each}
            </div>
          {/each}
        </div>
        <div class="mt-6 flex gap-2.5">
          {#each footer.socials as s (s)}
            <Button variant="secondary" elevation="raised" size="icon" class="size-10 font-semibold" aria-label={s}>{s}</Button>
          {/each}
        </div>
        <div class="mt-9 flex items-center gap-2 text-[13px] text-muted-foreground">
          Built on <Badge variant="secondary">{footer.builtOn}</Badge> {footer.network}
        </div>
        <div class="mt-3 text-[13px] text-muted-foreground-2">{footer.copyright}</div>
      </div>
      <Card elevation="floating" class="mx-auto w-full max-w-[360px] gap-0 rounded-[22px] p-2.5">
        <div class="relative h-[460px] overflow-hidden rounded-[10px]">
          <svg viewBox={vb(footerSceneArt)} preserveAspectRatio="xMidYMid slice" shape-rendering="crispEdges" aria-hidden="true" class="absolute inset-0 size-full">
            {#each rects.footer as r, i (i)}
              <rect x={r.x} y={r.y} width={r.w} height={r.h} fill={r.fill} />
            {/each}
          </svg>
          <div class="absolute inset-x-2.5 bottom-2.5 rounded-lg bg-emerald-950/80 px-3.5 pt-3.5 pb-4 text-white">
            <div class="text-xl leading-tight">{footer.card.lead}<span class="opacity-70">{footer.card.muted}</span></div>
            <Button variant="secondary" elevation="raised" class="mt-3">{footer.card.cta}</Button>
          </div>
        </div>
      </Card>
    </div>
    <div class="absolute inset-x-0 bottom-0 h-[140px]">
      <svg viewBox={vb(grassArt)} preserveAspectRatio="xMidYMax slice" shape-rendering="crispEdges" aria-hidden="true" class="absolute inset-0 size-full">
        {#each rects.grass as r, i (i)}
          <rect x={r.x} y={r.y} width={r.w} height={r.h} fill={r.fill} />
        {/each}
      </svg>
      <div class="absolute inset-x-0 bottom-5 text-center text-xs text-emerald-950/70">{footer.hackathon}</div>
    </div>
  </footer>
</div>

// Sample data for the Cofounder-style long landing page (dark). Plain TS, no framework imports.

// Decorative pixel-art scenes of the Cofounder landing page: a fixed night palette (the board's illustration, not theme tokens).
// Each scene is a palette plus `x,y,w,h,paletteIndex` rects, drawn by the example as crisp SVG rects.

export type Pixels = { w: number; h: number; palette: string[]; rects: string };

export const skyArt: Pixels = {
  w: 2000,
  h: 1100,
  palette: [
    "#c3cad5",
    "#23699d",
    "#182f1c",
    "#1f3c22",
    "#1d3820",
    "#294526",
    "#102415",
    "#2e5027",
    "#23364e",
    "#255c91",
    "#374450",
    "#1e2023",
    "#1b3c5c",
    "#3b3c3f",
    "#26282a",
    "#2a2317",
    "#544426",
  ],
  rects:
    "1172,150,180,36,0 1136,186,288,36,0 1100,222,396,72,0 1208,114,108,36,0 1280,78,72,36,0 1100,258,396,36,1 1548,230,120,24,0 1524,254,192,24,0 1500,278,264,48,0 1572,206,72,24,0 1620,182,48,24,0 1500,302,264,24,1 948,520,120,24,0 924,544,192,24,0 900,568,264,48,0 972,496,72,24,0 1020,472,48,24,0 900,592,264,24,1 1798,330,120,24,0 1774,354,192,24,0 1750,378,264,48,0 1822,306,72,24,0 1870,282,48,24,0 1750,402,264,24,1 0,700,12,400,2 12,688,12,412,2 12,688,12,12,3 24,700,12,400,2 36,712,12,388,2 48,712,12,388,2 48,712,12,12,3 60,700,12,400,2 72,712,12,388,2 84,700,12,400,2 96,700,12,400,2 108,700,12,400,2 120,688,12,412,2 132,676,12,424,2 132,676,12,12,3 144,664,12,436,2 156,676,12,424,2 168,688,12,412,2 180,688,12,412,2 192,700,12,400,2 204,700,12,400,2 204,700,12,12,3 216,700,12,400,2 228,700,12,400,2 240,712,12,388,2 252,700,12,400,2 252,700,12,12,3 264,700,12,400,2 264,700,12,12,3 276,700,12,400,2 288,712,12,388,2 300,712,12,388,2 300,712,12,12,3 312,724,12,376,2 324,736,12,364,2 336,724,12,376,2 348,736,12,364,2 360,736,12,364,2 372,736,12,364,2 372,736,12,12,3 384,724,12,376,2 396,736,12,364,2 408,724,12,376,2 420,724,12,376,2 432,736,12,364,2 444,736,12,364,2 456,724,12,376,2 468,724,12,376,2 480,724,12,376,2 492,724,12,376,2 504,724,12,376,2 516,712,12,388,2 528,712,12,388,2 540,712,12,388,2 552,700,12,400,2 564,700,12,400,2 576,700,12,400,2 588,712,12,388,2 600,712,12,388,2 612,700,12,400,2 624,700,12,400,2 636,688,12,412,2 648,688,12,412,2 660,688,12,412,2 672,688,12,412,2 672,688,12,12,3 684,676,12,424,2 684,676,12,12,3 696,664,12,436,2 708,664,12,436,2 708,664,12,12,3 720,652,12,448,2 732,652,12,448,2 732,652,12,12,3 744,640,12,460,2 744,640,12,12,3 756,640,12,460,2 768,640,12,460,2 780,640,12,460,2 792,640,12,460,2 804,640,12,460,2 804,640,12,12,3 816,652,12,448,2 816,652,12,12,3 828,652,12,448,2 828,652,12,12,3 840,652,12,448,2 852,652,12,448,2 864,664,12,436,2 876,652,12,448,2 876,652,12,12,3 888,664,12,436,2 888,664,12,12,3 900,664,12,436,2 912,676,12,424,2 924,676,12,424,2 936,688,12,412,2 936,688,12,12,3 948,676,12,424,2 960,676,12,424,2 972,688,12,412,2 972,688,12,12,3 984,688,12,412,2 984,688,12,12,3 996,688,12,412,2 1008,688,12,412,2 1008,688,12,12,3 1020,676,12,424,2 1020,676,12,12,3 1032,676,12,424,2 1044,688,12,412,2 1056,688,12,412,2 1056,688,12,12,3 1068,676,12,424,2 1080,676,12,424,2 1092,688,12,412,2 1092,688,12,12,3 1104,676,12,424,2 1116,676,12,424,2 1116,676,12,12,3 1128,688,12,412,2 1140,700,12,400,2 1140,700,12,12,3 1152,712,12,388,2 1152,712,12,12,3 1164,724,12,376,2 1164,724,12,12,3 1176,736,12,364,2 1188,724,12,376,2 1188,724,12,12,3 1200,724,12,376,2 1212,724,12,376,2 1212,724,12,12,3 1224,724,12,376,2 1224,724,12,12,3 1236,712,12,388,2 1248,712,12,388,2 1260,724,12,376,2 1272,724,12,376,2 1272,724,12,12,3 1284,712,12,388,2 1284,712,12,12,3 1296,712,12,388,2 1296,712,12,12,3 1308,712,12,388,2 1308,712,12,12,3 1320,712,12,388,2 1332,712,12,388,2 1344,712,12,388,2 1344,712,12,12,3 1356,712,12,388,2 1368,724,12,376,2 1368,724,12,12,3 1380,712,12,388,2 1380,712,12,12,3 1392,724,12,376,2 1392,724,12,12,3 1404,724,12,376,2 1416,724,12,376,2 1416,724,12,12,3 1428,736,12,364,2 1428,736,12,12,3 1440,736,12,364,2 1452,736,12,364,2 1464,736,12,364,2 1476,724,12,376,2 1488,724,12,376,2 1488,724,12,12,3 1500,712,12,388,2 1512,700,12,400,2 1524,688,12,412,2 1524,688,12,12,3 1536,676,12,424,2 1548,664,12,436,2 1548,664,12,12,3 1560,676,12,424,2 1560,676,12,12,3 1572,688,12,412,2 1572,688,12,12,3 1584,688,12,412,2 1584,688,12,12,3 1596,676,12,424,2 1608,688,12,412,2 1620,688,12,412,2 1632,700,12,400,2 1632,700,12,12,3 1644,700,12,400,2 1656,688,12,412,2 1656,688,12,12,3 1668,688,12,412,2 1680,688,12,412,2 1692,688,12,412,2 1704,676,12,424,2 1716,688,12,412,2 1716,688,12,12,3 1728,688,12,412,2 1740,700,12,400,2 1752,700,12,400,2 1752,700,12,12,3 1764,700,12,400,2 1764,700,12,12,3 1776,700,12,400,2 1788,700,12,400,2 1788,700,12,12,3 1800,712,12,388,2 1800,712,12,12,3 1812,712,12,388,2 1824,724,12,376,2 1836,712,12,388,2 1836,712,12,12,3 1848,712,12,388,2 1860,712,12,388,2 1860,712,12,12,3 1872,700,12,400,2 1884,688,12,412,2 1884,688,12,12,3 1896,676,12,424,2 1908,688,12,412,2 1908,688,12,12,3 1920,676,12,424,2 1932,664,12,436,2 1944,664,12,436,2 1956,664,12,436,2 1968,664,12,436,2 1968,664,12,12,3 1980,664,12,436,2 1980,664,12,12,3 1992,664,12,436,2 1992,664,12,12,3 0,808,12,292,4 0,808,12,12,5 12,808,12,292,4 24,808,12,292,4 24,808,12,12,5 36,808,12,292,4 48,808,12,292,4 60,820,12,280,4 72,820,12,280,4 84,832,12,268,4 96,820,12,280,4 108,820,12,280,4 120,820,12,280,4 132,832,12,268,4 144,832,12,268,4 156,832,12,268,4 156,832,12,12,5 168,832,12,268,4 168,832,12,12,5 180,832,12,268,4 192,832,12,268,4 204,832,12,268,4 216,844,12,256,4 228,844,12,256,4 240,844,12,256,4 252,856,12,244,4 252,856,12,12,5 264,868,12,232,4 276,880,12,220,4 288,880,12,220,4 300,880,12,220,4 312,880,12,220,4 324,880,12,220,4 336,880,12,220,4 348,880,12,220,4 360,880,12,220,4 372,880,12,220,4 384,880,12,220,4 396,880,12,220,4 396,880,12,12,5 408,880,12,220,4 408,880,12,12,5 420,880,12,220,4 432,880,12,220,4 444,868,12,232,4 456,868,12,232,4 468,868,12,232,4 480,856,12,244,4 480,856,12,12,5 492,844,12,256,4 492,844,12,12,5 504,844,12,256,4 516,832,12,268,4 528,832,12,268,4 540,832,12,268,4 552,820,12,280,4 564,808,12,292,4 564,808,12,12,5 576,808,12,292,4 576,808,12,12,5 588,796,12,304,4 588,796,12,12,5 600,784,12,316,4 600,784,12,12,5 612,772,12,328,4 624,772,12,328,4 636,772,12,328,4 648,760,12,340,4 660,760,12,340,4 672,760,12,340,4 672,760,12,12,5 684,760,12,340,4 684,760,12,12,5 696,760,12,340,4 696,760,12,12,5 708,772,12,328,4 708,772,12,12,5 720,784,12,316,4 732,772,12,328,4 744,784,12,316,4 756,784,12,316,4 768,784,12,316,4 768,784,12,12,5 780,784,12,316,4 792,772,12,328,4 804,772,12,328,4 816,784,12,316,4 828,784,12,316,4 828,784,12,12,5 840,784,12,316,4 840,784,12,12,5 852,796,12,304,4 864,796,12,304,4 876,796,12,304,4 876,796,12,12,5 888,796,12,304,4 888,796,12,12,5 900,808,12,292,4 912,796,12,304,4 924,796,12,304,4 936,784,12,316,4 936,784,12,12,5 948,784,12,316,4 960,784,12,316,4 960,784,12,12,5 972,796,12,304,4 972,796,12,12,5 984,784,12,316,4 984,784,12,12,5 996,796,12,304,4 1008,784,12,316,4 1020,772,12,328,4 1020,772,12,12,5 1032,760,12,340,4 1032,760,12,12,5 1044,760,12,340,4 1044,760,12,12,5 1056,760,12,340,4 1068,772,12,328,4 1080,784,12,316,4 1080,784,12,12,5 1092,784,12,316,4 1104,796,12,304,4 1116,784,12,316,4 1128,772,12,328,4 1140,772,12,328,4 1152,784,12,316,4 1164,772,12,328,4 1176,772,12,328,4 1188,772,12,328,4 1188,772,12,12,5 1200,784,12,316,4 1200,784,12,12,5 1212,784,12,316,4 1212,784,12,12,5 1224,772,12,328,4 1236,760,12,340,4 1248,772,12,328,4 1260,760,12,340,4 1260,760,12,12,5 1272,760,12,340,4 1284,760,12,340,4 1284,760,12,12,5 1296,772,12,328,4 1296,772,12,12,5 1308,772,12,328,4 1320,784,12,316,4 1320,784,12,12,5 1332,784,12,316,4 1344,772,12,328,4 1344,772,12,12,5 1356,760,12,340,4 1356,760,12,12,5 1368,760,12,340,4 1380,760,12,340,4 1392,760,12,340,4 1404,772,12,328,4 1416,784,12,316,4 1416,784,12,12,5 1428,796,12,304,4 1428,796,12,12,5 1440,796,12,304,4 1440,796,12,12,5 1452,808,12,292,4 1464,820,12,280,4 1476,820,12,280,4 1488,820,12,280,4 1500,820,12,280,4 1512,808,12,292,4 1524,796,12,304,4 1524,796,12,12,5 1536,796,12,304,4 1548,796,12,304,4 1560,784,12,316,4 1572,772,12,328,4 1572,772,12,12,5 1584,772,12,328,4 1596,772,12,328,4 1608,772,12,328,4 1608,772,12,12,5 1620,784,12,316,4 1620,784,12,12,5 1632,784,12,316,4 1644,784,12,316,4 1644,784,12,12,5 1656,784,12,316,4 1668,784,12,316,4 1680,784,12,316,4 1692,784,12,316,4 1704,772,12,328,4 1716,784,12,316,4 1728,784,12,316,4 1740,772,12,328,4 1752,784,12,316,4 1752,784,12,12,5 1764,796,12,304,4 1776,808,12,292,4 1788,808,12,292,4 1800,796,12,304,4 1812,796,12,304,4 1824,796,12,304,4 1836,808,12,292,4 1848,796,12,304,4 1848,796,12,12,5 1860,808,12,292,4 1872,796,12,304,4 1872,796,12,12,5 1884,796,12,304,4 1896,808,12,292,4 1908,796,12,304,4 1920,796,12,304,4 1920,796,12,12,5 1932,796,12,304,4 1944,796,12,304,4 1944,796,12,12,5 1956,808,12,292,4 1968,808,12,292,4 1980,808,12,292,4 1992,796,12,304,4 720,976,12,12,2 396,892,12,12,2 1452,1000,12,12,2 192,988,12,12,6 1440,856,12,12,2 708,832,12,12,2 1440,964,12,12,2 1452,904,12,12,2 456,844,12,12,2 456,1084,12,12,2 1188,1036,12,12,6 192,820,12,12,2 120,868,12,12,6 816,940,12,12,2 1188,1024,12,12,7 1212,1036,12,12,2 1356,808,12,12,7 288,772,12,12,6 1512,832,12,12,7 1332,1048,12,12,2 924,916,12,12,2 1176,976,12,12,7 1632,976,12,12,7 1788,844,12,12,7 84,1084,12,12,7 1860,1012,12,12,2 492,1024,12,12,7 1656,1096,12,12,2 1740,796,12,12,2 648,1000,12,12,2 816,868,12,12,6 192,940,12,12,2 1476,784,12,12,7 204,916,12,12,6 60,868,12,12,7 1272,1084,12,12,6 132,988,12,12,2 132,904,12,12,2 1800,880,12,12,2 852,952,12,12,6 108,868,12,12,6 228,796,12,12,2 1644,772,12,12,6 1248,868,12,12,2 804,808,12,12,2 120,1084,12,12,7 960,892,12,12,6 1152,904,12,12,7 1596,904,12,12,2 1824,1012,12,12,2 312,988,12,12,2 828,916,12,12,2 720,868,12,12,7 792,952,12,12,7 1680,880,12,12,6 1272,976,12,12,7 60,904,12,12,2 1800,1000,12,12,6 180,1000,12,12,2 1020,928,12,12,7 1080,988,12,12,2 852,1036,12,12,7 60,976,12,12,6 60,892,12,12,7 1920,928,12,12,7 1812,988,12,12,7 540,892,12,12,6 960,1048,12,12,7 1824,856,12,12,7 1152,796,12,12,6 1740,1012,12,12,2 396,868,12,12,2 672,1000,12,12,7 732,880,12,12,6 1332,1000,12,12,2 288,796,12,12,2 984,880,12,12,2 684,928,12,12,6 240,880,12,12,2 1992,832,12,12,2 1380,856,12,12,6 360,772,12,12,2 576,880,12,12,2 552,1084,12,12,7 1044,1060,12,12,2 252,1060,12,12,2 1056,976,12,12,6 1284,868,12,12,2 828,928,12,12,7 1944,916,12,12,7 1284,976,12,12,7 108,916,12,12,6 612,760,12,12,7 1908,952,12,12,7 1716,1024,12,12,6 96,1036,12,12,7 1584,868,12,12,2 1044,1096,12,12,6 204,1084,12,12,2 876,796,12,12,6 132,772,12,12,2 1572,832,12,12,7 1764,772,12,12,6 1476,1036,12,12,6 516,952,12,12,7 732,1012,12,12,6 1608,964,12,12,7 156,988,12,12,6 1044,808,12,12,7 1656,940,12,12,6 1080,844,12,12,6 372,964,12,12,6 516,844,12,12,7 384,1072,12,12,6 1488,1000,12,12,2 1224,772,12,12,7 756,856,12,12,2 1608,952,12,12,7 156,940,12,12,7 0,1084,12,12,6 384,772,12,12,6 144,784,12,12,7 96,1084,12,12,2 264,952,12,12,2 1500,880,12,12,6 960,784,12,12,7 1176,1000,12,12,7 1800,868,12,12,7 804,832,12,12,7 1308,796,12,12,6 1704,760,12,12,2 1164,1060,12,12,6 1740,820,12,12,6 1140,928,12,12,2 1992,1060,12,12,2 1164,1000,12,12,6 1908,1096,12,12,7 156,892,12,12,2 1524,1048,12,12,2 960,916,12,12,2 1284,928,12,12,6 744,832,12,12,2 828,1024,12,12,2 216,1060,12,12,7 684,916,12,12,6 84,880,12,12,7 1716,1060,12,12,7 372,928,12,12,2 372,1072,12,12,2 1620,1060,12,12,7 324,1036,12,12,7 1728,964,12,12,6 1800,1024,12,12,6 1452,808,12,12,6 1188,772,12,12,2 276,976,12,12,6 1152,820,12,12,6 1044,1072,12,12,6 72,1084,12,12,6 1476,1072,12,12,2 520,600,30,120,8 526,608,6,6,9 560,630,30,90,8 566,638,6,6,9 600,648,30,72,8 606,656,6,6,9 640,660,30,60,8 646,668,6,6,9 680,660,30,60,8 686,668,6,6,9 720,660,30,60,8 726,668,6,6,9 760,600,30,120,8 766,608,6,6,9 800,660,30,60,8 806,668,6,6,9 840,630,30,90,8 846,638,6,6,9 880,660,30,60,8 886,668,6,6,9 920,660,30,60,8 926,668,6,6,9 960,648,30,72,8 966,656,6,6,9 1000,648,30,72,8 1006,656,6,6,9 1040,660,30,60,8 1046,668,6,6,9 760,560,18,160,10 766,520,6,40,10 1200,640,330,200,11 1216,656,298,168,12 1240,690,120,36,1 1380,740,100,30,1 1130,840,480,24,13 1160,864,420,14,14 1620,850,260,60,15 1630,860,240,14,16",
};

export const toolsArt: Pixels = {
  w: 2000,
  h: 1180,
  palette: ["#c3cad5", "#23699d", "#246ca2", "#182f1c", "#1f3c22", "#294526"],
  rects:
    "48,480,120,24,0 24,504,192,24,0 0,528,264,48,0 72,456,72,24,0 120,432,48,24,0 0,552,264,24,1 1772,400,180,36,0 1736,436,288,36,0 1700,472,396,72,0 1808,364,108,36,0 1880,328,72,36,0 1700,508,396,36,2 0,772,12,328,3 12,784,12,316,3 24,784,12,316,3 24,784,12,12,4 36,796,12,304,3 48,796,12,304,3 48,796,12,12,4 60,796,12,304,3 60,796,12,12,4 72,784,12,316,3 84,796,12,304,3 96,796,12,304,3 108,784,12,316,3 108,784,12,12,4 120,784,12,316,3 132,772,12,328,3 144,772,12,328,3 156,772,12,328,3 168,772,12,328,3 180,760,12,340,3 192,760,12,340,3 204,748,12,352,3 216,748,12,352,3 228,748,12,352,3 228,748,12,12,4 240,736,12,364,3 252,736,12,364,3 1988,504,12,12,5 1892,924,12,12,3 1928,492,12,12,5 1772,360,12,12,3 1892,840,12,12,3 1904,948,12,12,3 1976,492,12,12,3 1832,744,12,12,4 1820,708,12,12,3 1784,324,12,12,5 1988,792,12,12,3 1808,120,12,12,3 1832,444,12,12,3 1820,564,12,12,4 1832,948,12,12,5 1832,396,12,12,5 1832,708,12,12,4 1760,672,12,12,4 1820,336,12,12,4 1784,624,12,12,4 1988,120,12,12,5 1880,216,12,12,4 1892,588,12,12,4 1880,396,12,12,4 1940,384,12,12,3 1856,144,12,12,5 1892,732,12,12,3 1964,756,12,12,4 1904,1008,12,12,3 1928,180,12,12,5 1820,420,12,12,3 1844,828,12,12,4 1952,660,12,12,5 1856,828,12,12,3 1976,684,12,12,4 1772,780,12,12,3 1832,636,12,12,5 1988,672,12,12,3 1880,540,12,12,5 1964,252,12,12,4 1880,588,12,12,3 1784,348,12,12,5 1868,852,12,12,3 1772,240,12,12,5 1964,732,12,12,3 1844,648,12,12,4 1928,756,12,12,3 1772,168,12,12,4 1880,432,12,12,3 1976,312,12,12,5 1916,276,12,12,3 1916,684,12,12,3 1772,756,12,12,4 1808,816,12,12,5 1820,912,12,12,4 1940,600,12,12,4 1856,564,12,12,4 1904,336,12,12,3 1904,936,12,12,3 1940,636,12,12,3 1784,864,12,12,4 1952,960,12,12,5 1892,216,12,12,4 1976,168,12,12,4 1892,972,12,12,5 1856,864,12,12,4 1868,636,12,12,5 1820,1008,12,12,3 1940,960,12,12,4 1880,540,12,12,4 1868,888,12,12,5 1892,648,12,12,4 1892,744,12,12,4 1820,804,12,12,4 1880,912,12,12,3 1952,372,12,12,3 1892,852,12,12,4 1784,756,12,12,3 1988,1008,12,12,5 1916,576,12,12,5 1964,528,12,12,5 1760,420,12,12,3 1976,792,12,12,5 1820,456,12,12,5 1820,180,12,12,4 1844,372,12,12,3 1808,288,12,12,4 1820,852,12,12,3 1964,168,12,12,4 1928,648,12,12,4",
};

export const chapter1Art: Pixels = {
  w: 376,
  h: 250,
  palette: [
    "#1a3451",
    "#7c3e1d",
    "#5f3022",
    "#8d4a20",
    "#673722",
    "#5f5f65",
    "#4e281f",
    "#6d4d17",
  ],
  rects:
    "0,0,376,250,0 68,170,120,24,1 44,194,192,24,1 20,218,264,48,1 92,146,72,24,1 140,122,48,24,1 20,242,264,24,2 254,180,120,24,3 230,204,192,24,3 206,228,264,48,3 278,156,72,24,3 326,132,48,24,3 206,252,264,24,4 176,40,24,100,5 176,28,24,12,6 182,140,12,30,7",
};

export const chapter2Art: Pixels = {
  w: 376,
  h: 250,
  palette: ["#495b6d", "#1b4466", "#c3cad5", "#23699d", "#3a3f44", "#594719"],
  rects:
    "0,0,376,250,0 24,24,328,190,1 108,50,120,24,2 84,74,192,24,2 60,98,264,48,2 132,26,72,24,2 180,2,48,24,2 60,122,264,24,3 24,210,328,14,4 148,160,14,50,5 208,140,14,70,5",
};

export const chapter3Art: Pixels = {
  w: 376,
  h: 250,
  palette: ["#193859", "#c3cad5", "#23699d", "#545c66", "#3f444a"],
  rects:
    "0,0,376,250,0 68,30,120,24,1 44,54,192,24,1 20,78,264,48,1 92,6,72,24,1 140,-18,48,24,1 20,102,264,24,2 234,80,120,24,1 210,104,192,24,1 186,128,264,48,1 258,56,72,24,1 306,32,48,24,1 186,152,264,24,2 138,180,100,40,3 178,130,20,50,4",
};

export const chapter4Art: Pixels = {
  w: 376,
  h: 250,
  palette: ["#193e64", "#c3cad5", "#23699d", "#254426", "#241f19"],
  rects:
    "0,0,376,250,0 88,30,120,24,1 64,54,192,24,1 40,78,264,48,1 112,6,72,24,1 160,-18,48,24,1 40,102,264,24,2 0,200,376,50,3 185,40,6,160,4 118,60,140,6,4",
};

export const footerSceneArt: Pixels = {
  w: 340,
  h: 460,
  palette: [
    "#183c63",
    "#c3cad5",
    "#23699d",
    "#254426",
    "#2e1f0e",
    "#614b13",
    "#182f1c",
    "#0c0c0c",
  ],
  rects:
    "0,0,340,460,0 228,60,120,24,1 204,84,192,24,1 180,108,264,48,1 252,36,72,24,1 300,12,48,24,1 180,132,264,24,2 0,380,340,80,3 120,120,120,120,4 96,144,24,72,5 240,144,24,72,5 144,96,72,24,5 144,240,72,24,5 176,264,8,120,6 170,120,20,20,7",
};

export const grassArt: Pixels = {
  w: 2000,
  h: 140,
  palette: ["#365521", "#416521", "#2e5027", "#4d7521"],
  rects:
    "0,40,12,100,0 12,52,12,88,0 24,64,12,76,0 36,64,12,76,0 48,64,12,76,0 60,64,12,76,0 72,52,12,88,0 84,64,12,76,0 84,64,12,12,1 96,64,12,76,0 108,52,12,88,0 120,64,12,76,0 132,52,12,88,0 144,64,12,76,0 156,64,12,76,0 156,64,12,12,1 168,52,12,88,0 168,52,12,12,1 180,40,12,100,0 192,40,12,100,0 204,40,12,100,0 204,40,12,12,1 216,28,12,112,0 228,28,12,112,0 228,28,12,12,1 240,28,12,112,0 240,28,12,12,1 252,16,12,124,0 252,16,12,12,1 264,28,12,112,0 276,40,12,100,0 276,40,12,12,1 288,40,12,100,0 300,52,12,88,0 300,52,12,12,1 312,64,12,76,0 324,64,12,76,0 336,64,12,76,0 336,64,12,12,1 348,52,12,88,0 348,52,12,12,1 360,64,12,76,0 360,64,12,12,1 372,52,12,88,0 384,52,12,88,0 396,52,12,88,0 408,40,12,100,0 408,40,12,12,1 420,40,12,100,0 432,40,12,100,0 432,40,12,12,1 444,40,12,100,0 444,40,12,12,1 456,40,12,100,0 456,40,12,12,1 468,40,12,100,0 480,40,12,100,0 480,40,12,12,1 492,28,12,112,0 504,28,12,112,0 516,28,12,112,0 528,16,12,124,0 540,28,12,112,0 552,28,12,112,0 564,28,12,112,0 564,28,12,12,1 576,16,12,124,0 588,28,12,112,0 600,40,12,100,0 600,40,12,12,1 612,40,12,100,0 612,40,12,12,1 624,40,12,100,0 636,28,12,112,0 648,28,12,112,0 660,28,12,112,0 672,28,12,112,0 684,40,12,100,0 684,40,12,12,1 696,40,12,100,0 708,52,12,88,0 708,52,12,12,1 720,52,12,88,0 732,52,12,88,0 744,52,12,88,0 756,64,12,76,0 768,64,12,76,0 768,64,12,12,1 780,64,12,76,0 780,64,12,12,1 792,52,12,88,0 804,52,12,88,0 816,40,12,100,0 816,40,12,12,1 828,40,12,100,0 840,52,12,88,0 840,52,12,12,1 852,64,12,76,0 864,64,12,76,0 864,64,12,12,1 876,52,12,88,0 888,52,12,88,0 888,52,12,12,1 900,64,12,76,0 912,52,12,88,0 924,52,12,88,0 924,52,12,12,1 936,52,12,88,0 948,52,12,88,0 960,52,12,88,0 960,52,12,12,1 972,64,12,76,0 972,64,12,12,1 984,52,12,88,0 996,40,12,100,0 1008,28,12,112,0 1020,16,12,124,0 1032,16,12,124,0 1044,16,12,124,0 1044,16,12,12,1 1056,16,12,124,0 1068,16,12,124,0 1080,16,12,124,0 1092,16,12,124,0 1104,28,12,112,0 1116,16,12,124,0 1128,16,12,124,0 1140,16,12,124,0 1152,16,12,124,0 1152,16,12,12,1 1164,16,12,124,0 1164,16,12,12,1 1176,16,12,124,0 1188,16,12,124,0 1188,16,12,12,1 1200,28,12,112,0 1200,28,12,12,1 1212,16,12,124,0 1224,28,12,112,0 1236,16,12,124,0 1248,28,12,112,0 1260,40,12,100,0 1272,28,12,112,0 1272,28,12,12,1 1284,16,12,124,0 1296,16,12,124,0 1296,16,12,12,1 1308,28,12,112,0 1320,40,12,100,0 1332,52,12,88,0 1344,64,12,76,0 1344,64,12,12,1 1356,52,12,88,0 1356,52,12,12,1 1368,52,12,88,0 1380,52,12,88,0 1392,52,12,88,0 1392,52,12,12,1 1404,64,12,76,0 1416,64,12,76,0 1428,52,12,88,0 1428,52,12,12,1 1440,52,12,88,0 1440,52,12,12,1 1452,64,12,76,0 1464,52,12,88,0 1476,40,12,100,0 1488,52,12,88,0 1500,64,12,76,0 1512,64,12,76,0 1524,64,12,76,0 1536,64,12,76,0 1548,64,12,76,0 1548,64,12,12,1 1560,52,12,88,0 1560,52,12,12,1 1572,52,12,88,0 1584,52,12,88,0 1596,52,12,88,0 1596,52,12,12,1 1608,52,12,88,0 1620,52,12,88,0 1632,64,12,76,0 1644,64,12,76,0 1656,64,12,76,0 1668,64,12,76,0 1680,52,12,88,0 1680,52,12,12,1 1692,52,12,88,0 1692,52,12,12,1 1704,52,12,88,0 1704,52,12,12,1 1716,40,12,100,0 1728,52,12,88,0 1740,52,12,88,0 1752,52,12,88,0 1752,52,12,12,1 1764,52,12,88,0 1764,52,12,12,1 1776,52,12,88,0 1788,52,12,88,0 1788,52,12,12,1 1800,64,12,76,0 1812,52,12,88,0 1812,52,12,12,1 1824,64,12,76,0 1836,64,12,76,0 1836,64,12,12,1 1848,64,12,76,0 1860,52,12,88,0 1872,40,12,100,0 1872,40,12,12,1 1884,40,12,100,0 1884,40,12,12,1 1896,52,12,88,0 1908,64,12,76,0 1920,64,12,76,0 1920,64,12,12,1 1932,64,12,76,0 1944,64,12,76,0 1956,52,12,88,0 1968,40,12,100,0 1980,40,12,100,0 1992,40,12,100,0 420,62,12,12,2 1872,86,12,12,2 360,110,12,12,3 240,62,12,12,3 144,74,12,12,2 1692,110,12,12,3 144,98,12,12,2 1800,74,12,12,3 1284,62,12,12,2 336,98,12,12,2 996,98,12,12,3 792,62,12,12,3 948,122,12,12,2 852,122,12,12,3 564,86,12,12,2 1044,98,12,12,2 1284,74,12,12,3 1584,86,12,12,3 564,74,12,12,3 1212,98,12,12,2 912,98,12,12,3 1620,86,12,12,2 276,86,12,12,3 300,86,12,12,3 168,122,12,12,2 1572,62,12,12,3 12,50,12,12,3 588,62,12,12,2 1668,86,12,12,3 540,74,12,12,3 1932,62,12,12,3 108,50,12,12,2 1980,110,12,12,2 300,50,12,12,2 1260,50,12,12,2 1800,86,12,12,2 360,86,12,12,2 1788,74,12,12,3 1452,110,12,12,2 1968,110,12,12,3 336,122,12,12,3 360,50,12,12,2 1536,74,12,12,2 1044,50,12,12,2 1932,110,12,12,3 816,62,12,12,2 228,62,12,12,3 360,62,12,12,3 1488,122,12,12,2 552,50,12,12,3 288,98,12,12,3 1896,62,12,12,3 1056,50,12,12,2 108,62,12,12,3 1908,50,12,12,2 624,122,12,12,3 1944,86,12,12,2 1284,86,12,12,3 756,62,12,12,2 816,50,12,12,2 540,110,12,12,3 168,50,12,12,3 480,98,12,12,3 120,122,12,12,3 84,74,12,12,2 660,110,12,12,3 708,86,12,12,3 420,74,12,12,3 792,122,12,12,2 1164,98,12,12,2 528,122,12,12,3 852,122,12,12,3 576,74,12,12,3 1608,62,12,12,3 1560,86,12,12,3 408,98,12,12,2 1524,86,12,12,3 228,86,12,12,2 492,50,12,12,2 1164,74,12,12,2 156,98,12,12,2 600,98,12,12,3 1836,50,12,12,3 60,50,12,12,2 1932,122,12,12,2 300,98,12,12,2 540,74,12,12,3 960,86,12,12,3 984,110,12,12,2 708,122,12,12,3 864,50,12,12,2 744,50,12,12,2 960,74,12,12,2 960,50,12,12,2 1356,122,12,12,3 528,62,12,12,3 864,86,12,12,3 1080,62,12,12,3 936,62,12,12,2 1908,74,12,12,2 1416,74,12,12,2 276,62,12,12,2 948,98,12,12,2 1356,50,12,12,3 744,122,12,12,2 348,98,12,12,3 996,122,12,12,2 1548,86,12,12,2 1032,62,12,12,3 396,110,12,12,3 1332,110,12,12,2 1212,110,12,12,3 1344,74,12,12,2 876,110,12,12,2 240,50,12,12,2 1392,122,12,12,2 660,98,12,12,3 1944,74,12,12,2 60,122,12,12,2 1788,122,12,12,3",
};

export function pixelRects(p: Pixels) {
  return p.rects.split(" ").map((r) => {
    const [x, y, w, h, c] = r.split(",").map(Number) as [
      number,
      number,
      number,
      number,
      number,
    ];
    return { x, y, w, h, fill: p.palette[c] as string };
  });
}

export type Link = { label: string; href: string };
export type Row = { index: string; title: string };

export const header = {
  lead: "How to",
  steps: [
    { label: "Start", href: "#start" },
    { label: "Build", href: "#build" },
    { label: "Sell", href: "#sell" },
    { label: "Scale", href: "#scale" },
  ] satisfies Link[],
  links: [
    { label: "Resources", href: "#resources" },
    { label: "Pricing", href: "#pricing" },
  ] satisfies Link[],
  cta: "Create an index",
};

export const sky = {
  title: "Stockbreak lets you launch an entire index with AI",
  body: "Start with an AI research thesis, then hand off weights, vault setup, rebalancing, social and fees to agents.",
  primary: "Create an index",
  secondary: "Explore indexes",
  /** Fixed night gradient behind the pixel scene. */
  gradient: "linear-gradient(180deg, #173554 0%, #163e62 55%, #194e74 100%)",
  tasks: [
    { label: "Task running", name: "rebalance NVDAx" },
    { label: "Task completed", name: "Research: megacaps" },
    { label: "Task completed", name: "Feed card + Blink" },
  ],
};

export const hero = {
  lead: "Stockbreak is an index launchpad",
  muted: "designed to turn a stock thesis into a token",
  columns: [
    {
      title: "Agentic departments",
      body: "Stockbreak is organised like an index fund — research, vault, keeper and social, with shared context.",
    },
    {
      title: "Human in the loop",
      body: "Agents work alongside you, and every on-chain action waits for your signature before it moves funds.",
    },
    {
      title: "Fully extensible",
      body: "Connect over MCP, bring your own agent wallet, or drive it from Claude, ChatGPT or your own script.",
    },
  ],
  closing:
    "Bring your thesis into the index launchpad and start with the next concrete step.",
  closingCta: "Start in Stockbreak",
};

/** The agent workspace card. Stage coordinates are for a 960x780 canvas (ring centre 490,390). */
export const workspace = {
  project: "Magnificent Four…",
  initials: "SB",
  zoom: "Z 60%",
  path: "stockbreak/indexes/magnificent-four",
  stage: { w: 960, h: 780 },
  center: { x: 438, y: 362, label: "Stockbreak" },
  nodes: [
    { label: "Research", x: 444, y: 126 },
    { label: "Rebalance", x: 444, y: 606 },
    { label: "Vault", x: 204, y: 366 },
    { label: "Keeper", x: 684, y: 366 },
    { label: "Index", x: 271, y: 193 },
    { label: "Fees", x: 617, y: 193 },
    { label: "Social", x: 271, y: 539 },
    { label: "Pre-IPO", x: 617, y: 539 },
  ],
  /** Status chips (failed, running, done) next to a node. */
  chips: [
    { x: 287, y: 165, a: 3, b: 2, c: 2 },
    { x: 693, y: 553, a: 4, b: 4, c: 3 },
    { x: 480, y: 670, a: 4, b: 3, c: 2 },
  ],
  ghosts: [
    [97, 193],
    [177, 193],
    [773, 193],
    [853, 193],
    [117, 573],
    [793, 573],
    [370, 20],
    [550, 20],
    [370, 730],
    [550, 730],
  ] as [number, number][],
  tabs: ["Home", "Index", "Vault", "Agents", "Context"],
  thread: [
    {
      kind: "assistant",
      text: "That's a great way to check the thesis. I'm screening the megacaps against your mandate — drift, liquidity on Jupiter, and whether a pre-IPO sleeve fits. Once the weights are set, I'll simulate a 30-day rebalance. ",
      bold: "I'll bring you the transaction to sign before anything moves.",
    },
    {
      kind: "task",
      name: "Research agent",
      detail: "Screening AAPLx, NVDAx, TSLAx — liquidity",
      status: "Running",
    },
    {
      kind: "task",
      name: "Vault",
      detail: "Preparing join transaction for 50 USDC",
      status: "Queued",
    },
    {
      kind: "user",
      text: "The thesis is ready. Can you turn it into an index and share it?",
    },
    {
      kind: "assistant",
      text: "Absolutely. I'm turning the thesis into a mandate: drift 5%, 1% management fee, keeper allowed. ",
      bold: "You'll review the weights before anything goes on-chain.",
      tail: " Then I'll prepare the feed card and the Blink.",
    },
    {
      kind: "task",
      name: "Index capability",
      detail: "Writing the mandate and weights…",
      status: "Running",
    },
    {
      kind: "task",
      name: "Social capability",
      detail: "Preparing feed card and Blink…",
      status: "Queued",
    },
  ] as {
    kind: "assistant" | "task" | "user";
    text?: string;
    bold?: string;
    tail?: string;
    name?: string;
    detail?: string;
    status?: string;
  }[],
  prompt: "How are the megacaps doing vs SPYx",
};

export const intro = {
  eyebrow: "What Stockbreak does",
  lead: "Keep researching the thesis.",
  muted: "Put Stockbreak to work on the index.",
  body: "Start with the outcome you need. Stockbreak brings the right index context and capabilities together, then keeps you in control of what goes on-chain.",
};

export const launch = {
  eyebrow: "1.0 — Launch",
  lead: "Stockbreak launches",
  muted: "an index with you",
  body: "Give Stockbreak the thesis you built. It turns that context into the mandate, weights, token and launch materials you need to go to market.",
  rows: [
    { index: "1.1", title: "Thesis and weights" },
    { index: "1.2", title: "Index identity" },
    { index: "1.3", title: "Vault deployment" },
    { index: "1.4", title: "Launch content" },
  ] satisfies Row[],
};

export const stages = [
  {
    title: "Thesis stage",
    count: "1/1",
    top: 220,
    pinLast: false,
    tasks: [{ name: "Initial thesis", sub: "User task", active: true }],
  },
  {
    title: "Mandate stage",
    count: "0/3",
    top: 160,
    pinLast: false,
    tasks: [
      { name: "Pick tokens + weights", sub: "Agent task" },
      { name: "Set drift + fees", sub: "Agent task" },
      { name: "Review mandate", sub: "Agent requests approval" },
    ],
  },
  {
    title: "Launch stage",
    count: "0/4",
    top: 60,
    pinLast: true,
    tasks: [
      { name: "Name + ticker", sub: "User task" },
      { name: "Deploy vault", sub: "Agent requests approval" },
      { name: "Feed card", sub: "Agent task" },
      { name: "Share Blink", sub: "Agent task" },
    ],
  },
];

export const grow = {
  eyebrow: "2.0 — Grow",
  lead: "Stockbreak finds the right holders",
  muted: "and gives them a reason to care",
  body: "Stockbreak researches the market, finds promising communities, and runs coordinated growth work with your index context built in.",
  rows: [
    { index: "2.1", title: "Community research" },
    { index: "2.2", title: "Holder discovery" },
    { index: "2.3", title: "Outreach" },
    { index: "2.4", title: "Feed posts and Blinks" },
  ] satisfies Row[],
  email: {
    title: "Share preview",
    initials: "SB",
    fields: [
      { label: "To", value: "Sarah Chen  sarah@acme.com" },
      { label: "From", value: "Dewi Lestari  dewi@stockbreak.fun" },
      { label: "Subject", value: "Join the Magnificent Four index" },
    ],
    body: "Hey Sarah, I have been following how the megacaps track SPYx, and built an index around it. Every holder can rebalance with one signature, and the keeper handles drift at 5%. It is live on devnet if you want to look at the weights before joining the vault.",
  },
  report: {
    title: "Index Campaign Report",
    label: "Join rate",
    value: "58%",
    delta: "+12%",
    fill: 58,
    legend: ["Joined 47", "Viewed 34"],
    rows: [
      { label: "Audience", value: "—" },
      { label: "Sent", value: "81" },
      { label: "Delivered", value: "79" },
      { label: "Bounced", value: "2", badge: "10%", tone: "destructive" },
      { label: "Replied", value: "6", badge: "6%", tone: "success" },
    ],
    cta: "View details",
  },
};

export const operate = {
  eyebrow: "3.0 — Operate",
  lead: "Stockbreak keeps the index moving",
  muted: "after launch",
  body: "Bring rebalancing, analytics, holder support and recurring keeper work into Stockbreak without giving up control. The same mandate keeps every part of the index moving together.",
  rows: [
    { index: "3.1", title: "Vault incorporation" },
    { index: "3.2", title: "Index analytics" },
    { index: "3.3", title: "Holder support" },
    { index: "3.4", title: "Recurring rebalances" },
  ] satisfies Row[],
};

/** Segmented meters: 44 steps, brand to 20, warning to 36, destructive after. */
export const metrics = [
  { label: "Joins", value: "234", delta: "+34%", fill: 28 / 44 },
  {
    label: "Daily active holders",
    value: "10.291",
    delta: "+8%",
    fill: 33 / 44,
  },
  { label: "AUM (USDC)", value: "49.182", delta: "+37%", fill: 38 / 44 },
];
export const meterSteps = 44;
export const meterZones = [
  { upTo: 20 / 44, color: "var(--brand)" },
  { upTo: 36 / 44, color: "var(--warning)" },
  { upTo: 1, color: "var(--destructive)" },
];

export const chart = {
  title: "Time Series",
  yAxis: ["400k", "300k", "200k", "100k"],
  xAxis: ["0 d", "5 d", "10 d", "15 d", "20 d", "25 d"],
  grid: "M0 120 H690 M0 86 H690 M0 52 H690 M0 18 H690",
  ticks:
    "M0 118 L0 125 M115 118 L115 125 M230 118 L230 125 M345 118 L345 125 M460 118 L460 125 M575 118 L575 125",
  series: [
    {
      label: "Week 1",
      color: "var(--chart-1)",
      d: "M0 86 L60 70 L120 48 L200 48 L250 36 L330 36 L400 24 L480 24 L560 24 L690 22",
    },
    {
      label: "Week 2",
      color: "var(--brand)",
      d: "M0 95 L60 85 L120 70 L200 70 L250 60 L330 60 L400 62 L480 48 L560 48 L690 40",
    },
    {
      label: "Week 3",
      color: "var(--info)",
      d: "M0 100 L60 100 L120 100 L200 102 L250 102 L330 100 L400 100 L480 100 L560 92 L690 92",
    },
  ],
};

export const joiners = [
  { name: "Noah Garcia", place: "Lisbon, PT", initials: "NG" },
  { name: "Emily Rodriguez", place: "Jakarta, ID", initials: "ER" },
  { name: "Sarah Chen", place: "Singapore, SG", initials: "SC" },
  { name: "Jordan Brown", place: "Denver, CO", initials: "JB" },
  { name: "Maya Kim", place: "Austin, TX", initials: "MK" },
];
export const joinersFooter = {
  count: "2,846",
  text: "people joined an index this week",
};

export const tools = {
  title: "All the tools and systems",
  muted: "your index needs",
  body: "Give agents the context, tools and approvals they need to keep index work moving.",
  points: [
    "You stay in control, nothing ships without your signature",
    "Run multiple tasks in the background at the same time.",
    "Customize agents with apps, skills, and schedules",
  ],
  activePoint: 1,
  gradient: "linear-gradient(180deg, #173554 0%, #163e62 55%, #194e74 100%)",
  groups: [
    {
      status: "Ready to review",
      tone: "warning",
      items: [{ name: "ICP analysis", agent: "Research agent" }],
    },
    {
      status: "Running",
      tone: "info",
      items: [{ name: "Q1 analyst report", agent: "Vault agent" }],
    },
    {
      status: "Completed",
      tone: "success",
      items: [
        { name: "Q4 drift review", agent: "Keeper agent" },
        { name: "Rebalance playbook v2", agent: "Research agent" },
        { name: "Fee conversion study", agent: "Vault agent" },
      ],
    },
  ],
  dock: ["Research", "Vault", "Keeper", "Index", "Social", "Fees", "Pre-IPO"],
};

export const guide = {
  title: "Learn how to launch an index",
  body: "Read the guide, then let Stockbreak turn each step into a roadmap, tasks, and agents.",
  cta: "Put the guide to work",
  download: "Download full guide",
  chapters: [
    { n: 1, title: "How To Launch", numeral: "I", art: chapter1Art },
    { n: 2, title: "How To Research", numeral: "II", art: chapter2Art },
    { n: 3, title: "How To Share", numeral: "III", art: chapter3Art },
    { n: 4, title: "How To Operate", numeral: "IV", art: chapter4Art },
  ] as {
    n: number;
    title: string;
    numeral: string;
    art: Pixels;
  }[],
};

export const footer = {
  title: "Run an entire index",
  muted: "with AI agents",
  howTo: ["How to launch", "How to research", "How to share", "How to operate"],
  columns: [
    ["Homepage", "Resources", "Pricing", "Careers"],
    ["Privacy Policy", "Terms of Service", "Docs", "Support"],
  ],
  socials: ["X", "in"],
  builtOn: "Solana",
  network: "devnet",
  copyright: "Copyright © 2026 Stockbreak",
  card: {
    lead: "Stockbreak is an index launchpad ",
    muted: "designed to run an entire fund.",
    cta: "Create an index",
  },
  hackathon: "Made for the Stocklana hackathon",
};