Stockbreak - Sidebar

BackStockbreak - SidebarApp

100%

import { AppHeader } from "@/components/app-header/app-header";
import { WatchlistItem } from "@/components/watchlist-item/watchlist-item";
import { Button } from "@/components/ui/button";
import { ElevationProvider } from "@/components/ui/elevation";
import { Input } from "@/components/ui/input";
import { Kbd } from "@/components/ui/kbd";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { type ReactElement, useEffect, useRef, useState } from "react";
import { IconPlaceholder } from "@/edmi/icon-placeholder";
import {
  appNav,
  type PageId,
  pageIds,
  pageNav,
  pageTitles,
  sidebarNav,
  watchlist,
} from "./data";
import { AgentsPage } from "./react/AgentsPage";
import { CreatePage } from "./react/CreatePage";
import { ExplorePage } from "./react/ExplorePage";
import { FaucetPage } from "./react/FaucetPage";
import { FeedPage } from "./react/FeedPage";
import { IndexDetailPage } from "./react/IndexDetailPage";
import { LandingPage } from "./react/LandingPage";
import { LeaderboardPage } from "./react/LeaderboardPage";
import { MarketsPage } from "./react/MarketsPage";
import { PortfolioPage } from "./react/PortfolioPage";
import { ProfilePage } from "./react/ProfilePage";

const pages: Record<PageId, () => ReactElement> = {
  markets: MarketsPage,
  explore: ExplorePage,
  index: IndexDetailPage,
  leaderboard: LeaderboardPage,
  create: CreatePage,
  feed: FeedPage,
  agents: AgentsPage,
  portfolio: PortfolioPage,
  profile: ProfilePage,
  faucet: FaucetPage,
  landing: LandingPage,
};

const navIcons = {
  dashboard: (
    <IconPlaceholder
      lucide="LayoutDashboardIcon"
      tabler="IconLayoutDashboard"
      hugeicons="DashboardSquare01Icon"
      phosphor="SquaresFourIcon"
      remixicon="RiDashboardLine"
      className="size-4"
    />
  ),
  explore: (
    <IconPlaceholder
      lucide="GlobeIcon"
      tabler="IconWorld"
      hugeicons="Globe02Icon"
      phosphor="GlobeIcon"
      remixicon="RiGlobalLine"
      className="size-4"
    />
  ),
  feed: (
    <IconPlaceholder
      lucide="ListIcon"
      tabler="IconList"
      hugeicons="ListViewIcon"
      phosphor="ListIcon"
      remixicon="RiListUnordered"
      className="size-4"
    />
  ),
  leaderboard: (
    <IconPlaceholder
      lucide="StarIcon"
      tabler="IconStar"
      hugeicons="StarIcon"
      phosphor="StarIcon"
      remixicon="RiStarLine"
      className="size-4"
    />
  ),
  agents: (
    <IconPlaceholder
      lucide="SparklesIcon"
      tabler="IconSparkles"
      hugeicons="SparklesIcon"
      phosphor="SparkleIcon"
      remixicon="RiSparklingLine"
      className="size-4"
    />
  ),
  create: (
    <IconPlaceholder
      lucide="PlusIcon"
      tabler="IconPlus"
      hugeicons="PlusSignIcon"
      phosphor="PlusIcon"
      remixicon="RiAddLine"
      className="size-4"
    />
  ),
  portfolio: (
    <IconPlaceholder
      lucide="WalletIcon"
      tabler="IconWallet"
      hugeicons="Wallet01Icon"
      phosphor="WalletIcon"
      remixicon="RiWalletLine"
      className="size-4"
    />
  ),
  settings: (
    <IconPlaceholder
      lucide="SettingsIcon"
      tabler="IconSettings"
      hugeicons="Settings01Icon"
      phosphor="GearIcon"
      remixicon="RiSettingsLine"
      className="size-4"
    />
  ),
} as const;

// Stockbreak: one multi-page app, two shells. Navigation is internal state: hash links (`#/<page>`) and
// `data-go="<page>"` buttons are intercepted at the root, so pages stay plain markup.
export default function StockbreakExample({
  layout = "navbar",
}: {
  layout?: "navbar" | "sidebar";
}) {
  const [page, setPage] = useState<PageId>("markets");
  const scroller = useRef<HTMLDivElement>(null);
  // Landing is the marketing page of the navbar layout (logo); the sidebar layout has no landing.
  const current: PageId =
    layout === "sidebar" && page === "landing" ? "markets" : page;
  const View = pages[current];

  // biome-ignore lint/correctness/useExhaustiveDependencies: scroll back to the top whenever the page changes
  useEffect(() => {
    window.scrollTo(0, 0);
    scroller.current?.scrollTo(0, 0);
  }, [current]);

  const intercept = (e: React.MouseEvent) => {
    const el = (e.target as HTMLElement).closest<HTMLElement>(
      "[data-go], a[href^='#/']",
    );
    if (!el) return;
    const to = el.dataset.go ?? el.getAttribute("href")?.slice(2) ?? "";
    if (!(pageIds as string[]).includes(to)) return;
    e.preventDefault();
    setPage(to as PageId);
  };

  if (layout === "sidebar") {
    return (
      <ElevationProvider mode="layered">
        <SidebarProvider
          className="h-svh min-h-0 overflow-hidden bg-background text-foreground"
          style={{ "--sidebar-width": "16rem" } as React.CSSProperties}
          onClick={intercept}
        >
          <Sidebar variant="inset" collapsible="offcanvas">
            <SidebarHeader className="gap-3 px-3 pt-4">
              <div className="flex items-center justify-between">
                <a
                  href="#/markets"
                  className="flex items-center gap-2 font-brand text-xl font-semibold tracking-[-0.4px]"
                >
                  <span className="inline-flex size-7 items-center justify-center rounded-lg border border-transparent bg-primary text-primary-foreground [background-image:var(--r1-p-face)] shadow-btn-raised-primary [background-origin:border-box]">
                    <IconPlaceholder
                      lucide="ChartLineIcon"
                      tabler="IconChartLine"
                      hugeicons="ChartLineData01Icon"
                      phosphor="ChartLineUpIcon"
                      remixicon="RiLineChartLine"
                      className="size-[15px]"
                    />
                  </span>
                  Stockbreak
                </a>
                <SidebarTrigger />
              </div>
              <div className="relative">
                <Input
                  readOnly
                  placeholder="Search"
                  aria-label="Search"
                  className="pr-12"
                />
                <Kbd className="absolute top-1/2 right-2 -translate-y-1/2">
                  ⌘K
                </Kbd>
              </div>
            </SidebarHeader>
            <SidebarContent className="px-2">
              <SidebarGroup>
                <SidebarGroupContent>
                  <SidebarMenu>
                    {sidebarNav.map((item) => (
                      <SidebarMenuItem key={item.label}>
                        <SidebarMenuButton
                          render={<a href={item.href} />}
                          isActive={item.href === pageNav[current]}
                          className="h-9"
                        >
                          {navIcons[item.icon]}
                          <span>{item.label}</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    ))}
                  </SidebarMenu>
                </SidebarGroupContent>
              </SidebarGroup>
              <SidebarGroup>
                <SidebarGroupLabel className="text-[11.5px] tracking-[0.6px] uppercase">
                  My watchlist
                </SidebarGroupLabel>
                <SidebarGroupContent className="flex flex-col gap-0.5">
                  {watchlist.map((w, i) => (
                    <WatchlistItem
                      key={w.symbol}
                      href="#/index"
                      active={current === "index" && i === 0}
                      {...w}
                    />
                  ))}
                </SidebarGroupContent>
              </SidebarGroup>
            </SidebarContent>
            <SidebarFooter className="px-3 pb-4">
              <a
                href="#/faucet"
                className="block rounded-xl border border-border bg-card p-3"
              >
                <div className="text-[13.5px] font-medium">
                  Get devnet USDC ↗
                </div>
                <div className="text-xs text-muted-foreground">
                  Fund your wallet at /faucet
                </div>
              </a>
            </SidebarFooter>
          </Sidebar>
          <SidebarInset className="min-h-0 min-w-0 overflow-hidden bg-background">
            <header className="flex h-16 shrink-0 items-center justify-between gap-3 border-b border-border px-4 md:px-7">
              <div className="flex min-w-0 items-center gap-2 text-[15px]">
                <SidebarTrigger className="md:hidden" />
                <span className="text-muted-foreground max-sm:hidden">
                  Dashboard
                </span>
                <span className="text-muted-foreground max-sm:hidden">/</span>
                <span>{pageTitles[current]}</span>
              </div>
              <div className="flex items-center gap-2">
                <Button
                  elevation="raised"
                  variant="outline"
                  className="max-sm:hidden"
                  data-go="faucet"
                >
                  Devnet
                </Button>
                <Button data-go="create">
                  Create index
                  <IconPlaceholder
                    lucide="PlusIcon"
                    tabler="IconPlus"
                    hugeicons="PlusSignIcon"
                    phosphor="PlusIcon"
                    remixicon="RiAddLine"
                  />
                </Button>
              </div>
            </header>
            <div
              ref={scroller}
              className="min-h-0 flex-1 overflow-y-auto overscroll-contain"
            >
              <View />
            </div>
          </SidebarInset>
        </SidebarProvider>
      </ElevationProvider>
    );
  }

  return (
    <ElevationProvider mode="layered">
      {/* biome-ignore lint/a11y/noStaticElementInteractions lint/a11y/useKeyWithClickEvents: delegated navigation for links and data-go buttons, which are keyboard-activatable themselves */}
      <div
        className="min-h-svh bg-background text-foreground"
        onClick={intercept}
      >
        {current === "landing" ? (
          <View />
        ) : (
          <>
            <div className="border-b border-border">
              <div className="mx-auto flex max-w-[1328px] items-center gap-2 px-4 py-3 md:px-10">
                <AppHeader
                  name="Stockbreak"
                  network="Devnet"
                  className="flex-1 border-0 bg-transparent px-0 py-0 shadow-none"
                  href="#/landing"
                  items={appNav}
                  active={pageNav[current]}
                  onConnect={() => setPage("profile")}
                  onNetworkClick={() => setPage("faucet")}
                />
              </div>
            </div>
            <View />
          </>
        )}
      </div>
    </ElevationProvider>
  );
}

import { AgentCard } from "@/components/agent-card/agent-card";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useState } from "react";
import { IconPlaceholder } from "@/edmi/icon-placeholder";
import {
  agentsAgents as agents,
  agentsApiKeyNote as apiKeyNote,
  agentsClients as clients,
  agentsHeaderSnippet as headerSnippet,
  agentsMcpUrl as mcpUrl,
} from "../data";

function CopyIcon() {
  return (
    <IconPlaceholder
      lucide="CopyIcon"
      tabler="IconCopy"
      hugeicons="Copy01Icon"
      phosphor="CopyIcon"
      remixicon="RiFileCopyLine"
    />
  );
}

export function AgentsPage() {
  const [client, setClient] = useState(clients[0]?.value ?? "");
  const current = clients.find((c) => c.value === client) ?? clients[0];

  return (
    <div className="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
      <div className="flex flex-wrap items-end justify-between gap-4">
        <div>
          <h1 className="text-[44px] leading-tight font-normal tracking-[-1.5px]">
            AI
          </h1>
          <p className="mt-1 text-lg text-muted-foreground">
            AIs that research, prepare and manage indexes. The vault program,
            not the AI, decides what is allowed.
          </p>
        </div>
        <Button elevation="raised" variant="outline">
          How agents work
        </Button>
      </div>

      <div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_480px]">
        <div className="flex min-w-0 flex-col gap-8">
          <section className="flex flex-col gap-3">
            <h2 className="text-xl font-normal tracking-[-0.3px]">
              Your agents
            </h2>
            <div className="rounded-xl border border-dashed border-border bg-transparent p-6">
              <p className="text-[14px]">
                Sign in with your wallet (one message signature, no fee) to
                manage your agents.
              </p>
              <Button elevation="raised" variant="outline" className="mt-3">
                Sign in
              </Button>
            </div>
          </section>

          <section className="flex flex-col gap-3">
            <h2 className="text-xl font-normal tracking-[-0.3px]">
              All agents <span className="text-muted-foreground">·</span>{" "}
              {agents.length}
            </h2>
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
              {agents.map((a) => (
                <AgentCard
                  key={a.name}
                  elevation="raised"
                  name={a.name}
                  address={a.address}
                  tag={a.tag}
                  stats={a.stats}
                >
                  {a.note}
                </AgentCard>
              ))}
            </div>
          </section>

          <section className="flex flex-col gap-3">
            <h2 className="text-xl font-normal tracking-[-0.3px]">
              Latest from agents
            </h2>
            <div className="rounded-xl border border-dashed border-border bg-transparent p-6 text-[14px]">
              Nothing yet. Agents post here when they rebalance or change
              weights.
            </div>
          </section>
        </div>

        <div className="flex min-w-0 flex-col gap-6">
          <Card className="gap-4 px-6">
            <div>
              <h2 className="text-xl font-normal tracking-[-0.3px]">
                Connect an agent
              </h2>
              <p className="mt-1 text-[13px] text-muted-foreground">
                Add this MCP server to your AI. It can research and prepare
                actions you sign.
              </p>
            </div>
            <InputGroup>
              <InputGroupInput
                readOnly
                value={mcpUrl}
                aria-label="MCP server URL"
                className="font-mono text-[13px]"
              />
              <InputGroupAddon align="inline-end">
                <InputGroupButton
                  size="icon-xs"
                  aria-label="Copy URL"
                  onClick={() => navigator.clipboard?.writeText(mcpUrl)}
                >
                  <CopyIcon />
                </InputGroupButton>
              </InputGroupAddon>
            </InputGroup>
            <Tabs value={client} onValueChange={(v) => setClient(String(v))}>
              <TabsList variant="default" elevation="raised" className="w-full">
                {clients.map((c) => (
                  <TabsTrigger key={c.value} value={c.value}>
                    {c.label}
                  </TabsTrigger>
                ))}
              </TabsList>
            </Tabs>
            <div className="flex items-center justify-between text-[13px]">
              <span>{current?.label}</span>
              <Button
                variant="ghost"
                size="icon-sm"
                aria-label={`Copy ${current?.label} steps`}
                onClick={() =>
                  navigator.clipboard?.writeText(
                    current?.steps.join("\n") ?? "",
                  )
                }
              >
                <CopyIcon />
              </Button>
            </div>
            <pre className="overflow-x-auto rounded-lg border border-sk-bd bg-sk-bg p-4 font-mono text-[12.5px] leading-relaxed shadow-sunken">
              {current?.steps.join("\n")}
            </pre>
            <div className="rounded-xl border border-dashed border-border p-4">
              <div className="text-sm font-semibold">
                Let it act as your agent
              </div>
              <p className="mt-1.5 text-[12.5px] leading-relaxed text-muted-foreground">
                {apiKeyNote}
              </p>
              <pre className="mt-3 overflow-x-auto rounded-lg border border-sk-bd bg-sk-bg p-3.5 font-mono text-[12px] shadow-sunken">
                {headerSnippet}
              </pre>
            </div>
          </Card>

          <Card className="gap-3 px-6">
            <h2 className="text-xl font-normal tracking-[-0.3px]">
              Bring your own wallet
            </h2>
            <p className="text-[13px] leading-relaxed text-muted-foreground">
              Already run an agent with its own keys? Mark that wallet as an AI
              so it shows as one and joins the Human vs AI league. One
              signature, no fee.
            </p>
            <Button elevation="raised" variant="outline" className="self-start">
              Register wallet
            </Button>
          </Card>
        </div>
      </div>
    </div>
  );
}

import { AllocationBar } from "@/components/allocation-bar/allocation-bar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Slider } from "@/components/ui/slider";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useMemo, useState } from "react";
import { IconPlaceholder } from "@/edmi/icon-placeholder";
import {
  createAssets as assets,
  createDefaults as defaults,
  createRebalance as rebalance,
  type createStepValue as StepValue,
  createSteps as steps,
} from "../data";

function equalWeights(symbols: string[]) {
  const base = symbols.length ? Math.floor(100 / symbols.length) : 0;
  const rest = symbols.length ? 100 - base * symbols.length : 0;
  return Object.fromEntries(
    symbols.map((s, i) => [s, base + (i === 0 ? rest : 0)]),
  );
}

export function CreatePage() {
  const [step, setStep] = useState<StepValue>("assets");
  const [query, setQuery] = useState("");
  const [selected, setSelected] = useState<string[]>([]);
  const [weights, setWeights] = useState<Record<string, number>>({});
  const [rebalanceOn, setRebalanceOn] = useState(defaults.rebalance);
  const [drift, setDrift] = useState(defaults.drift);
  const [name, setName] = useState("");
  const [symbol, setSymbol] = useState("");
  const [fee, setFee] = useState(String(defaults.fee));

  const visible = useMemo(
    () =>
      assets.filter((a) =>
        `${a.symbol} ${a.name}`.toLowerCase().includes(query.toLowerCase()),
      ),
    [query],
  );
  const stepIndex = steps.findIndex((s) => s.value === step);
  const total = selected.reduce((sum, s) => sum + (weights[s] ?? 0), 0);

  function toggle(sym: string, on: boolean) {
    const next = on ? [...selected, sym] : selected.filter((s) => s !== sym);
    setSelected(next);
    setWeights(equalWeights(next));
  }

  const go = (delta: number) => {
    const next = steps[stepIndex + delta];
    if (next) setStep(next.value);
  };

  return (
    <div className="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
      <div>
        <h1 className="text-[44px] leading-tight font-normal tracking-[-1.5px]">
          Create index
        </h1>
        <p className="mt-1 text-lg text-muted-foreground">
          Pick assets, set weights and rules. The vault program enforces them.
        </p>
      </div>

      <div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_400px]">
        <div className="flex min-w-0 flex-col gap-4">
          <Tabs value={step} onValueChange={(v) => setStep(v as StepValue)}>
            <TabsList variant="pills" elevation="raised" className="flex-wrap">
              {steps.map((s, i) => (
                <TabsTrigger key={s.value} value={s.value} className="gap-2">
                  <span className="inline-flex size-[18px] items-center justify-center rounded-full border border-border bg-muted font-mono text-[10.5px] text-muted-foreground">
                    {i + 1}
                  </span>
                  {s.label}
                </TabsTrigger>
              ))}
            </TabsList>
          </Tabs>

          {step === "assets" ? (
            <>
              <InputGroup className="h-11">
                <InputGroupAddon>
                  <IconPlaceholder
                    lucide="SearchIcon"
                    tabler="IconSearch"
                    hugeicons="SearchIcon"
                    phosphor="MagnifyingGlassIcon"
                    remixicon="RiSearchLine"
                  />
                </InputGroupAddon>
                <InputGroupInput
                  placeholder="Search assets"
                  aria-label="Search assets"
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                />
              </InputGroup>
              <Card className="gap-0 px-6 py-0">
                <ul>
                  {visible.map((a) => (
                    <li
                      key={a.symbol}
                      className="border-b border-border-2 last:border-b-0"
                    >
                      <label
                        htmlFor={`asset-${a.symbol}`}
                        className="flex cursor-pointer items-center gap-3.5 py-3.5"
                      >
                        <span className="inline-flex size-10 shrink-0 items-center justify-center rounded-full border border-border bg-muted font-mono text-xs">
                          {a.symbol.charAt(0)}
                        </span>
                        <div className="min-w-0 flex-1">
                          <div className="flex items-center gap-2">
                            <span className="font-mono text-[15px] font-semibold">
                              {a.symbol}
                            </span>
                            {a.tag ? (
                              <Badge variant="secondary">{a.tag}</Badge>
                            ) : null}
                          </div>
                          <div className="truncate text-[13px] text-muted-foreground">
                            {a.detail}
                          </div>
                        </div>
                        <span className="font-mono text-[15px] font-semibold">
                          {a.price}
                        </span>
                        <Checkbox
                          id={`asset-${a.symbol}`}
                          elevation="raised"
                          aria-label={`Select ${a.symbol}`}
                          checked={selected.includes(a.symbol)}
                          onCheckedChange={(v) => toggle(a.symbol, v === true)}
                        />
                      </label>
                    </li>
                  ))}
                  {visible.length === 0 ? (
                    <li className="py-10 text-center text-sm text-muted-foreground">
                      No assets match “{query}”.
                    </li>
                  ) : null}
                </ul>
              </Card>
            </>
          ) : null}

          {step === "weights" ? (
            <Card className="gap-4 px-6">
              <div>
                <h2 className="text-xl font-normal tracking-[-0.3px]">
                  Weights
                </h2>
                <p className="text-[13px] text-muted-foreground">
                  Target allocation per asset. Total{" "}
                  <span className="font-mono">{total}%</span>.
                </p>
              </div>
              {selected.length === 0 ? (
                <p className="py-6 text-sm text-muted-foreground">
                  Pick assets in step 1 first.
                </p>
              ) : (
                <ul className="flex flex-col gap-5">
                  {selected.map((s) => (
                    <li key={s} className="flex items-center gap-4">
                      <span className="w-28 font-mono text-[13px] font-semibold">
                        {s}
                      </span>
                      <Slider
                        elevation="raised"
                        aria-label={`${s} weight`}
                        value={[weights[s] ?? 0]}
                        onValueChange={(v) => {
                          const n = Array.isArray(v) ? (v[0] ?? 0) : v;
                          setWeights((w) => ({ ...w, [s]: n }));
                        }}
                      />
                      <span className="w-12 text-right font-mono text-[13px]">
                        {weights[s] ?? 0}%
                      </span>
                    </li>
                  ))}
                </ul>
              )}
            </Card>
          ) : null}

          {step === "strategy" ? (
            <Card className="gap-5 px-6">
              <h2 className="text-xl font-normal tracking-[-0.3px]">
                Strategy
              </h2>
              <Field>
                <FieldLabel htmlFor="rebalance">Rebalance</FieldLabel>
                <Select
                  value={rebalanceOn}
                  items={rebalance}
                  onValueChange={(v) => setRebalanceOn(String(v))}
                >
                  <SelectTrigger
                    id="rebalance"
                    elevation="raised"
                    className="w-full sm:w-60"
                  >
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent alignItemWithTrigger={false}>
                    {rebalance.map((r) => (
                      <SelectItem key={r.value} value={r.value}>
                        {r.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <FieldDescription>
                  When the keeper brings weights back to target.
                </FieldDescription>
              </Field>
              <Field>
                <FieldLabel htmlFor="drift" className="w-full">
                  Drift limit
                  <span className="ml-auto font-mono text-[13px] font-normal">
                    {drift}%
                  </span>
                </FieldLabel>
                <Slider
                  id="drift"
                  elevation="raised"
                  min={1}
                  max={20}
                  aria-label="Drift limit"
                  value={[drift]}
                  onValueChange={(v) =>
                    setDrift(Array.isArray(v) ? (v[0] ?? 0) : v)
                  }
                />
                <FieldDescription>
                  Rebalance when any weight moves this far from target.
                </FieldDescription>
              </Field>
            </Card>
          ) : null}

          {step === "fees" ? (
            <Card className="gap-5 px-6">
              <h2 className="text-xl font-normal tracking-[-0.3px]">Fees</h2>
              <div className="grid gap-5 sm:grid-cols-2">
                <Field>
                  <FieldLabel htmlFor="index-name">Index name</FieldLabel>
                  <Input
                    id="index-name"
                    placeholder="Mag Four Tilt"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                  />
                </Field>
                <Field>
                  <FieldLabel htmlFor="index-symbol">Symbol</FieldLabel>
                  <Input
                    id="index-symbol"
                    className="font-mono uppercase"
                    placeholder="MAGT"
                    maxLength={8}
                    value={symbol}
                    onChange={(e) => setSymbol(e.target.value.toUpperCase())}
                  />
                </Field>
              </div>
              <Field>
                <FieldLabel htmlFor="fee">Management fee (% / yr)</FieldLabel>
                <Input
                  id="fee"
                  type="number"
                  min={0}
                  max={5}
                  step={0.25}
                  className="font-mono sm:w-40"
                  value={fee}
                  onChange={(e) => setFee(e.target.value)}
                />
                <FieldDescription>
                  Paid to the creator. Entry and exit stay at 0%.
                </FieldDescription>
              </Field>
            </Card>
          ) : null}

          {step === "review" ? (
            <Card className="gap-4 px-6">
              <h2 className="text-xl font-normal tracking-[-0.3px]">Review</h2>
              {selected.length ? (
                <AllocationBar
                  segments={selected.map((s) => ({
                    label: s,
                    value: weights[s] ?? 0,
                  }))}
                />
              ) : (
                <p className="text-sm text-muted-foreground">
                  No assets picked yet.
                </p>
              )}
              <dl className="text-sm">
                {[
                  ["Name", name || "Untitled index"],
                  ["Symbol", symbol || "SYMBOL"],
                  [
                    "Rebalance",
                    rebalance.find((r) => r.value === rebalanceOn)?.label,
                  ],
                  ["Drift limit", `${drift}%`],
                  ["Management fee", `${fee}% / yr`],
                ].map(([k, v]) => (
                  <div
                    key={k}
                    className="flex justify-between border-b border-border-2 py-3 last:border-b-0"
                  >
                    <dt className="text-muted-foreground">{k}</dt>
                    <dd className="font-medium">{v}</dd>
                  </div>
                ))}
              </dl>
            </Card>
          ) : null}

          <div className="flex items-center justify-between">
            <Button
              elevation="raised"
              variant="outline"
              size="lg"
              disabled={stepIndex === 0}
              onClick={() => go(-1)}
            >
              Back
            </Button>
            <Button
              size="lg"
              disabled={step === "assets" && selected.length === 0}
              onClick={() => go(1)}
            >
              {step === "review" ? "Create index" : "Continue"}
            </Button>
          </div>
        </div>

        <Card className="gap-5 px-6">
          <div className="flex items-start gap-4">
            <span className="inline-flex size-[54px] shrink-0 items-center justify-center rounded-xl border border-border bg-muted font-mono text-lg">
              {(symbol || name || "").charAt(0)}
            </span>
            <div className="min-w-0 flex-1">
              <div className="font-semibold">{name || "Untitled index"}</div>
              <div className="font-mono text-[13px] text-muted-foreground">
                {symbol || "SYMBOL"}
              </div>
            </div>
            <Badge variant="secondary">Simulated</Badge>
          </div>
          {selected.length ? (
            <AllocationBar
              segments={selected.map((s) => ({
                label: s,
                value: weights[s] ?? 0,
              }))}
            />
          ) : (
            <p className="text-sm text-foreground-2">
              Pick assets to see the allocation.
            </p>
          )}
          <dl className="text-sm">
            {[
              ["Strategy", `Drift > ${drift}%`],
              ["Management fee", `${fee}% / yr`],
              ["Entry / exit", `${defaults.entry}% / ${defaults.exit}%`],
            ].map(([k, v]) => (
              <div key={k} className="flex justify-between py-2">
                <dt className="text-muted-foreground">{k}</dt>
                <dd className="font-medium">{v}</dd>
              </div>
            ))}
          </dl>
        </Card>
      </div>
    </div>
  );
}

import {
  IndexRow,
  IndexRowHeader,
} from "@/components/index-row/index-row";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Table, TableBody, TableHeader } from "@/components/ui/table";
import { Toggle } from "@/components/ui/toggle";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { useState } from "react";
import { IconPlaceholder } from "@/edmi/icon-placeholder";
import {
  exploreIndexes as indexes,
  indexRowLabels,
  exploreKinds as kinds,
  exploreSorts as sorts,
  exploreStrategies as strategies,
  toIndexRow,
} from "../data";

export function ExplorePage() {
  const [query, setQuery] = useState("");
  const [kind, setKind] = useState("all");
  const [preIpo, setPreIpo] = useState(false);
  const [strategy, setStrategy] = useState("any");
  const [sort, setSort] = useState("aum");

  const q = query.trim().toLowerCase();
  const rows = indexes.filter(
    (i) =>
      (kind === "all" || i.kind === kind) &&
      (!preIpo || i.tags?.some((tag) => tag.startsWith("Pre-IPO"))) &&
      (!q || `${i.name} ${i.symbol}`.toLowerCase().includes(q)),
  );

  return (
    <div className="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-10 md:px-10">
      <div>
        <div className="flex items-center gap-3">
          <h1 className="text-[44px] leading-tight font-normal tracking-[-1.5px]">
            Explore
          </h1>
          <Badge variant="secondary">Simulated</Badge>
        </div>
        <p className="mt-1 text-lg text-muted-foreground">34 indexes</p>
      </div>

      <div className="flex flex-wrap items-center gap-3">
        <InputGroup className="h-10 basis-full sm:flex-1 sm:basis-0 sm:min-w-64 sm:max-w-[440px]">
          <InputGroupAddon>
            <IconPlaceholder
              lucide="SearchIcon"
              tabler="IconSearch"
              hugeicons="SearchIcon"
              phosphor="MagnifyingGlassIcon"
              remixicon="RiSearchLine"
            />
          </InputGroupAddon>
          <InputGroupInput
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search name, symbol, asset"
            aria-label="Search indexes"
          />
        </InputGroup>
        <ToggleGroup
          elevation="raised"
          variant="segmented"
          value={[kind]}
          onValueChange={(v) => v[0] && setKind(v[0] as string)}
        >
          {kinds.map((k) => (
            <ToggleGroupItem key={k.value} value={k.value}>
              {k.label}
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
        <Toggle
          elevation="raised"
          variant="outline"
          pressed={preIpo}
          onPressedChange={setPreIpo}
        >
          Pre-IPO
        </Toggle>
        <div className="flex items-center gap-3 sm:ml-auto">
          <Select
            value={strategy}
            items={strategies}
            onValueChange={(v) => setStrategy(v as string)}
          >
            <SelectTrigger elevation="raised" className="w-40">
              <SelectValue />
            </SelectTrigger>
            <SelectContent alignItemWithTrigger={false}>
              {strategies.map((s) => (
                <SelectItem key={s.value} value={s.value}>
                  {s.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Select
            value={sort}
            items={sorts}
            onValueChange={(v) => setSort(v as string)}
          >
            <SelectTrigger elevation="raised" className="w-28">
              <SelectValue />
            </SelectTrigger>
            <SelectContent alignItemWithTrigger={false}>
              {sorts.map((s) => (
                <SelectItem key={s.value} value={s.value}>
                  {s.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      <Card className="px-6 py-2">
        <Table>
          <TableHeader>
            <IndexRowHeader labels={indexRowLabels} />
          </TableHeader>
          <TableBody>
            {rows.map((index) => (
              <IndexRow key={index.symbol} index={toIndexRow(index)} />
            ))}
          </TableBody>
        </Table>
      </Card>
    </div>
  );
}

import { Alert, AlertDescription } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Toaster, toast } from "@/components/ui/sonner";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { useState } from "react";
import {
  faucetSolFaucet as solFaucet,
  faucetUsdcFaucet as usdcFaucet,
  faucetWallet as wallet,
} from "../data";

const fmt = (n: number) => n.toLocaleString("en-US");

export function FaucetPage() {
  const [amount, setAmount] = useState(usdcFaucet.defaultAmount);
  const [usdc, setUsdc] = useState(wallet.usdc);
  const [busy, setBusy] = useState(false);

  function mint() {
    setBusy(true);
    setTimeout(() => {
      setUsdc((v) => v + amount);
      setBusy(false);
      toast.success(`${fmt(amount)} USDC minted`, {
        description: "Simulated devnet funds. No real value.",
      });
    }, 600);
  }

  return (
    <>
      <Toaster elevation="raised" />
      <div className="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
        <div>
          <div className="flex items-center gap-3">
            <h1 className="text-[44px] leading-tight font-normal tracking-[-1.5px]">
              Faucet
            </h1>
            <Badge variant="secondary">Simulated</Badge>
          </div>
          <p className="mt-1 text-lg text-muted-foreground">
            Free SOL for fees and simulated USDC on Devnet. No real value.
          </p>
        </div>

        <div className="grid gap-6 sm:grid-cols-2">
          <Card className="gap-1 px-6">
            <div className="text-[13px] text-muted-foreground">SOL</div>
            <div className="font-mono text-[32px] leading-tight">
              {wallet.sol}
            </div>
          </Card>
          <Card className="gap-1 px-6">
            <div className="text-[13px] text-muted-foreground">USDC</div>
            <div className="font-mono text-[32px] leading-tight">
              {fmt(usdc)}
            </div>
          </Card>
        </div>

        <Card className="gap-4 px-7">
          <div>
            <h2 className="text-lg font-medium tracking-[-0.2px]">
              {solFaucet.title}
            </h2>
            <p className="mt-0.5 text-[13px] text-muted-foreground">
              {solFaucet.description}
            </p>
          </div>
          <Alert className="bg-muted">
            <AlertDescription className="text-foreground">
              The in-app SOL faucet is off on this deployment. Get free devnet
              SOL at{" "}
              <a
                href={solFaucet.linkHref}
                className="underline underline-offset-2"
              >
                {solFaucet.linkLabel}
              </a>{" "}
              for{" "}
              <span className="font-mono font-semibold break-all">
                {wallet.address}
              </span>
            </AlertDescription>
          </Alert>
          <Button elevation="raised" variant="outline" className="self-start">
            {solFaucet.buttonLabel}
          </Button>
        </Card>

        <Card className="gap-4 px-7">
          <div>
            <h2 className="text-lg font-medium tracking-[-0.2px]">
              {usdcFaucet.title}
            </h2>
            <p className="mt-0.5 text-[13px] text-muted-foreground">
              {usdcFaucet.description}
            </p>
          </div>
          <ToggleGroup
            elevation="raised"
            variant="segmented"
            className="self-start"
            aria-label="Amount"
            value={[String(amount)]}
            onValueChange={(v) => v[0] && setAmount(Number(v[0]))}
          >
            {usdcFaucet.amounts.map((a) => (
              <ToggleGroupItem key={a} value={String(a)}>
                {fmt(a)}
              </ToggleGroupItem>
            ))}
          </ToggleGroup>
          <Button
            size="lg"
            className="self-start"
            disabled={busy}
            onClick={mint}
          >
            Get {fmt(amount)} USDC
          </Button>
        </Card>
      </div>
    </>
  );
}

import {
  FeedPost,
  FeedPostContent,
  FeedPostFooter,
  FeedPostHeader,
  FeedPostIndex,
  FeedPostStat,
} from "@/components/feed-post/feed-post";
import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Textarea } from "@/components/ui/textarea";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { useState } from "react";
import { IconPlaceholder } from "@/edmi/icon-placeholder";
import {
  feedMaxChars as maxChars,
  feedMoreUpdates as moreUpdates,
  feedPosts as posts,
  feedUpdates as updates,
  feedViews as views,
} from "../data";

export function FeedPage() {
  const [view, setView] = useState("following");
  const [draft, setDraft] = useState("");

  return (
    <div className="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
      <div className="flex flex-wrap items-end justify-between gap-4">
        <div>
          <h1 className="text-[44px] leading-tight font-normal tracking-[-1.5px]">
            Feed
          </h1>
          <p className="mt-1 text-lg text-muted-foreground">
            Ideas from creators and what happens on chain.
          </p>
        </div>
        <ToggleGroup
          elevation="raised"
          variant="segmented"
          value={[view]}
          onValueChange={(v) => v[0] && setView(v[0])}
          aria-label="Feed view"
        >
          {views.map((v) => (
            <ToggleGroupItem key={v.value} value={v.value}>
              {v.label}
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
      </div>

      <Card className="gap-0 p-0">
        <Textarea
          value={draft}
          maxLength={maxChars}
          onChange={(e) => setDraft(e.target.value)}
          placeholder="Share a thesis, a trade idea or an update…"
          aria-label="New post"
          className="min-h-[96px] resize-none rounded-none border-0 bg-transparent px-6 pt-6 shadow-none focus-visible:shadow-none"
        />
        <div className="mx-6 flex flex-wrap items-center gap-3 border-t border-border-2 py-4">
          <span className="flex-1 text-[13px] text-muted-foreground">
            Plain text · up to 2 links · needs on-chain activity
          </span>
          <span className="font-mono text-[13px] text-muted-foreground">
            {draft.length}/{maxChars}
          </span>
          <Button onClick={() => setDraft("")}>Post</Button>
        </div>
      </Card>

      {view === "all"
        ? posts.map((p) => (
            <FeedPost key={p.id} elevation="raised">
              <FeedPostHeader
                name={p.name}
                handle={p.handle}
                time={p.time}
                initials={p.initials}
              />
              <FeedPostContent>{p.text}</FeedPostContent>
              <FeedPostIndex
                title={p.index.title}
                description={p.index.description}
                icon={
                  <IconPlaceholder
                    lucide="ChartLineIcon"
                    tabler="IconChartLine"
                    hugeicons="ChartIcon"
                    phosphor="ChartLineIcon"
                    remixicon="RiLineChartLine"
                  />
                }
                action={
                  <Button elevation="raised" size="sm">
                    Join
                  </Button>
                }
              />
              <FeedPostFooter>
                <FeedPostStat>
                  <IconPlaceholder
                    lucide="HeartIcon"
                    tabler="IconHeart"
                    hugeicons="FavouriteIcon"
                    phosphor="HeartIcon"
                    remixicon="RiHeartLine"
                  />
                  {p.likes}
                </FeedPostStat>
                <FeedPostStat>
                  <IconPlaceholder
                    lucide="MessageSquareIcon"
                    tabler="IconMessage"
                    hugeicons="Comment01Icon"
                    phosphor="ChatIcon"
                    remixicon="RiChat1Line"
                  />
                  {p.replies}
                </FeedPostStat>
              </FeedPostFooter>
            </FeedPost>
          ))
        : null}

      <Card className="gap-0 p-0">
        <ul className="px-6">
          {updates.map((u) => (
            <li
              key={u.id}
              className="flex items-center gap-3 border-b border-border-2 py-4"
            >
              <span className="inline-flex size-10 shrink-0 items-center justify-center rounded-full border border-border bg-muted font-mono text-xs">
                {u.initial}
              </span>
              <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1 text-[14px]">
                <span className="font-mono font-semibold">{u.who}</span>
                <span className="text-foreground-2">
                  {u.action}
                  {u.detail ? ` · ${u.detail}` : ""}
                </span>
                <span className="text-muted-foreground">·</span>
                <span className="font-mono font-semibold">{u.symbol}</span>
                <AvatarGroup>
                  {u.tokens.map((t) => (
                    <Avatar key={t} className="size-7">
                      <AvatarFallback className="text-[10px]">
                        {t}
                      </AvatarFallback>
                    </Avatar>
                  ))}
                </AvatarGroup>
              </div>
              <span className="text-[13px] whitespace-nowrap text-muted-foreground">
                {u.ago}
              </span>
            </li>
          ))}
        </ul>
        <div className="px-6 py-4 text-[13px] text-muted-foreground">
          Show {moreUpdates} more updates
        </div>
      </Card>

      <div className="flex justify-center">
        <Button elevation="raised" variant="outline" size="lg">
          Load more
        </Button>
      </div>
    </div>
  );
}

import { AllocationBar } from "@/components/allocation-bar/allocation-bar";
import { JoinPanel } from "@/components/join-panel/join-panel";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useState } from "react";
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
import { IconPlaceholder } from "@/edmi/icon-placeholder";
import {
  detailAllocation as allocation,
  detailAssets as assets,
  detailChart as chart,
  detailCreator as creator,
  detailIndex as index,
  detailJoinRows as joinRows,
  detailJoinTabs as joinTabs,
  detailMaxAmount as maxAmount,
  detailQuickAmounts as quickAmounts,
  detailRanges as ranges,
  detailShareActions as shareActions,
  detailStatGroups as statGroups,
} from "../data";

const config = {
  mag4: { label: "MAG4", color: "var(--chart-1)" },
  spyx: { label: "SPYx", color: "var(--muted-foreground)" },
} satisfies ChartConfig;

export function IndexDetailPage() {
  const [range, setRange] = useState("1M");
  const [side, setSide] = useState("join");
  const [amount, setAmount] = useState("100");

  return (
    <>
      <div className="border-b border-border">
        <div className="mx-auto flex max-w-[1328px] flex-wrap items-center justify-between gap-3 px-4 py-3 md:px-10">
          <Breadcrumb>
            <BreadcrumbList className="text-base">
              <BreadcrumbItem>
                <BreadcrumbLink href="#/explore">Explore</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbPage>{index.name}</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
          <div className="flex items-center gap-2">
            <Button variant="outline" elevation="raised">
              Clone
            </Button>
            <Button variant="outline" elevation="raised">
              Follow
            </Button>
            <Button
              variant="outline"
              elevation="raised"
              size="icon"
              aria-label="Share"
            >
              <IconPlaceholder
                lucide="ArrowUpIcon"
                tabler="IconArrowUp"
                hugeicons="ArrowUpIcon"
                phosphor="ArrowUpIcon"
                remixicon="RiArrowUpLine"
              />
            </Button>
          </div>
        </div>
      </div>

      <div className="mx-auto grid w-full max-w-[1328px] items-start gap-8 px-4 py-8 md:px-10 lg:grid-cols-[minmax(0,1fr)_380px]">
        <div className="flex min-w-0 flex-col gap-6">
          <div className="flex flex-wrap items-center gap-3">
            <Avatar className="size-10">
              <AvatarFallback>{index.initial}</AvatarFallback>
            </Avatar>
            <h1 className="text-[28px] leading-tight font-medium tracking-[-0.5px]">
              {index.name}
              <span className="font-normal text-muted-foreground">
                {" "}
                · ({index.symbol})
              </span>
            </h1>
            {index.tags.map((tag) => (
              <Badge key={tag} variant="secondary">
                {tag}
              </Badge>
            ))}
          </div>

          <div className="flex flex-wrap items-start justify-between gap-6">
            <div className="flex flex-wrap gap-x-12 gap-y-4">
              <div>
                <div className="flex flex-wrap items-center gap-3">
                  <span className="text-[56px] leading-none font-light tracking-[-2px]">
                    {index.nav}
                  </span>
                  <Badge variant="success" shape="number" className="font-mono">
                    {index.navDelta}
                  </Badge>
                </div>
                <p className="mt-2 text-[13px] text-muted-foreground">
                  {index.navNote}
                </p>
              </div>
              <div>
                <div className="flex flex-wrap items-center gap-3">
                  <span className="text-[56px] leading-none font-light tracking-[-2px] text-success-text">
                    {index.ret7d}
                  </span>
                  <Badge variant="success" shape="number" className="font-mono">
                    {index.retVs}
                  </Badge>
                </div>
                <p className="mt-2 text-[13px] text-muted-foreground">
                  {index.retNote}
                </p>
              </div>
            </div>
            <Button variant="outline" elevation="raised">
              Compare index
            </Button>
          </div>

          <ChartContainer
            config={config}
            className="aspect-auto h-[260px] w-full"
          >
            <AreaChart data={chart} margin={{ left: 4, right: 4, top: 8 }}>
              <CartesianGrid vertical={false} />
              <XAxis
                dataKey="day"
                tickLine={false}
                axisLine={false}
                tickMargin={8}
                interval={1}
              />
              <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
              <Area
                dataKey="spyx"
                type="monotone"
                stroke="var(--color-spyx)"
                strokeDasharray="5 4"
                fill="var(--color-spyx)"
                fillOpacity={0}
              />
              <Area
                dataKey="mag4"
                type="monotone"
                stroke="var(--color-mag4)"
                fill="var(--color-mag4)"
                fillOpacity={0.18}
              />
            </AreaChart>
          </ChartContainer>

          <div className="flex flex-wrap items-center justify-between gap-3">
            <Tabs value={range} onValueChange={(v) => setRange(v as string)}>
              <TabsList variant="line">
                {ranges.map((r) => (
                  <TabsTrigger key={r} value={r} className="font-mono text-xs">
                    {r}
                  </TabsTrigger>
                ))}
              </TabsList>
            </Tabs>
            <div className="flex items-center gap-4 text-[13px]">
              <span className="flex items-center gap-1.5">
                <span className="size-2 rounded-full bg-chart-1" />
                {index.symbol}
              </span>
              <span className="flex items-center gap-1.5">
                <span className="size-2 rounded-full bg-muted-foreground" />
                SPYx
              </span>
            </div>
          </div>

          <div className="grid gap-4 md:grid-cols-3">
            {statGroups.map((group) => (
              <div
                key={group[0]?.label}
                className="rounded-xl border border-sk-bd bg-sk-bg px-[18px] py-3 shadow-sunken"
              >
                {group.map((row) => (
                  <div
                    key={row.label}
                    className="flex items-center justify-between py-1.5 text-[13px]"
                  >
                    <span className="text-muted-foreground">{row.label}</span>
                    <span className="font-mono">{row.value}</span>
                  </div>
                ))}
              </div>
            ))}
          </div>

          <div>
            <h2 className="mb-3 text-lg font-medium">Assets</h2>
            <Card className="gap-4 px-6 py-2">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Asset</TableHead>
                    <TableHead numeric>Weight</TableHead>
                    <TableHead numeric>Target</TableHead>
                    <TableHead numeric>Drift</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {assets.map((a) => (
                    <TableRow key={a.symbol}>
                      <TableCell>
                        <div className="flex items-center gap-3">
                          <Avatar className="size-7">
                            <AvatarFallback className="text-[10px]">
                              {a.initial}
                            </AvatarFallback>
                          </Avatar>
                          <span className="font-mono text-[13px]">
                            {a.symbol}
                          </span>
                        </div>
                      </TableCell>
                      <TableCell numeric className="font-semibold">
                        {a.weight}
                      </TableCell>
                      <TableCell numeric className="text-muted-foreground">
                        {a.target}
                      </TableCell>
                      <TableCell numeric trend={a.trend}>
                        {a.drift}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
              <AllocationBar className="pb-3" segments={allocation} />
            </Card>
          </div>
        </div>

        <div className="flex flex-col gap-4">
          <JoinPanel
            currency="USDC"
            className="w-full"
            tabs={joinTabs}
            tab={side}
            onTabChange={setSide}
            amount={amount}
            onAmountChange={setAmount}
            onMax={() => setAmount(maxAmount.replace(",", ""))}
            amountSize="lg"
            maxLabel={`Max ${maxAmount}`}
            quickAmounts={quickAmounts}
            rows={joinRows}
            joinLabel={`${side === "join" ? "Join" : "Redeem"} with ${amount || 0} USDC`}
            footnote="Self-custodied · Redeem anytime"
          />

          <Card className="gap-3 px-5">
            <h2 className="text-sm font-semibold">Share</h2>
            <div className="flex flex-wrap gap-2">
              {shareActions.map((s) => (
                <Button key={s} variant="outline" elevation="raised" size="sm">
                  {s}
                </Button>
              ))}
            </div>
          </Card>

          <Card className="gap-3 px-5">
            <h2 className="text-sm font-semibold">Created by</h2>
            <div className="flex items-center gap-3">
              <Avatar className="size-9">
                <AvatarFallback className="font-mono text-xs">
                  {creator.initial}
                </AvatarFallback>
              </Avatar>
              <div>
                <div className="font-mono text-[13px]">{creator.address}</div>
                <div className="text-xs text-muted-foreground">
                  {creator.meta}
                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </>
  );
}

import { AllocationBar } from "@/components/allocation-bar/allocation-bar";
import { JoinPanel } from "@/components/join-panel/join-panel";
import { PricingPlan } from "@/components/pricing-plan/pricing-plan";
import { SiteFooter } from "@/components/site-footer/site-footer";
import {
  SiteHeader,
  SiteHeaderBrand,
} from "@/components/site-header/site-header";
import {
  StatStrip,
  StatStripItem,
} from "@/components/stat-tile/stat-tile";
import { StepCard } from "@/components/step-card/step-card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { IconPlaceholder } from "@/edmi/icon-placeholder";
import {
  landingCta as cta,
  landingFooter as footer,
  landingHero as hero,
  landingIndex as index,
  landingJoinRows as joinRows,
  landingNav as nav,
  landingPricing as pricing,
  landingProblems as problems,
  landingProblemTitle as problemTitle,
  landingStats as stats,
  landingStatsNote as statsNote,
  landingSteps as steps,
  landingStepsTitle as stepsTitle,
} from "../data";

function SectionTitle({ lead, muted }: { lead: string; muted: string }) {
  return (
    <h2 className="text-[34px] leading-[1.1] font-normal tracking-[-1.2px] md:text-[44px]">
      {lead} <span className="text-muted-foreground">{muted}</span>
    </h2>
  );
}

const arrow = (
  <IconPlaceholder
    lucide="ArrowUpRightIcon"
    tabler="IconArrowUpRight"
    hugeicons="ArrowUpRightIcon"
    phosphor="ArrowUpRightIcon"
    remixicon="RiArrowRightUpLine"
    className="size-3.5"
  />
);

export function LandingPage() {
  return (
    <div className="min-h-svh overflow-x-clip bg-background text-foreground">
      <div className="border-b border-border">
        <div className="mx-auto max-w-[1328px] px-4 md:px-10">
          <SiteHeader
            name="Stockbreak"
            elevation="raised"
            className="border-0 bg-transparent px-0 shadow-none"
            links={nav}
            action={
              <div className="flex items-center gap-3">
                <Badge variant="outline" className="max-sm:hidden">
                  Devnet
                </Badge>
                <Button elevation="raised" data-go="markets">
                  Launch app
                </Button>
              </div>
            }
          />
        </div>
      </div>

      <main className="mx-auto flex max-w-[1328px] flex-col gap-24 px-4 pt-14 pb-16 md:gap-32 md:px-10 md:pt-20">
        <section className="grid items-center gap-14 lg:grid-cols-[1fr_1.05fr]">
          <div className="flex flex-col gap-6">
            <p className="text-sm text-muted-foreground">{hero.eyebrow}</p>
            <h1 className="text-[48px] leading-[1.02] font-medium tracking-[-2.4px] md:text-[68px]">
              {hero.title}
            </h1>
            <p className="max-w-[520px] text-lg text-muted-foreground">
              {hero.lead}
            </p>
            <div className="flex flex-wrap gap-3">
              <Button elevation="raised" size="lg" data-go="markets">
                Launch app
                {arrow}
              </Button>
              <Button elevation="raised" variant="outline" size="lg">
                See how it works
              </Button>
            </div>
            <div className="flex flex-col gap-1.5 text-xs text-muted-foreground">
              <span>{hero.facts}</span>
              <span className="flex items-center gap-2 text-muted-foreground-2">
                <span className="size-1.5 rounded-full bg-brand" />
                {hero.disclaimer}
              </span>
            </div>
          </div>

          <div className="relative lg:pb-24">
            <Card elevation="raised" className="gap-5 p-6 lg:mr-10">
              <div className="flex flex-wrap items-center gap-3">
                <span className="inline-flex size-11 items-center justify-center rounded-lg border border-border bg-muted text-brand-text">
                  <IconPlaceholder
                    lucide="ChartLineIcon"
                    tabler="IconChartLine"
                    hugeicons="ChartLineData01Icon"
                    phosphor="ChartLineUpIcon"
                    remixicon="RiLineChartLine"
                    className="size-5"
                  />
                </span>
                <div className="min-w-0 flex-1">
                  <div className="flex items-baseline gap-2">
                    <span className="text-lg font-medium">{index.name}</span>
                    <span className="font-mono text-[11px] text-muted-foreground">
                      {index.ticker}
                    </span>
                  </div>
                  <div className="text-xs text-muted-foreground">
                    {index.creator}
                  </div>
                </div>
                <div className="flex gap-1.5">
                  {index.tags.map((t) => (
                    <Badge key={t} variant="outline">
                      {t}
                    </Badge>
                  ))}
                </div>
              </div>
              <div className="flex flex-wrap items-end gap-6">
                <span className="text-[44px] leading-none font-normal tracking-[-1.5px]">
                  {index.price}
                </span>
                <div className="flex gap-4 text-xs text-muted-foreground">
                  <div className="flex flex-col gap-1">
                    24h
                    <Badge variant="success" shape="number">
                      {index.d24}
                    </Badge>
                  </div>
                  <div className="flex flex-col gap-1">
                    7d
                    <Badge variant="success" shape="number">
                      {index.d7}
                    </Badge>
                  </div>
                </div>
              </div>
              <div className="flex items-center justify-between text-xs text-muted-foreground">
                <span>{index.benchmark}</span>
                <span className="flex gap-3 font-mono">
                  <span className="text-brand-text">— {index.ticker}</span>
                  <span>- - SPYx</span>
                </span>
              </div>
              <svg
                viewBox="0 0 400 120"
                className="h-32 w-full text-brand"
                role="img"
                aria-label="Index versus benchmark"
                preserveAspectRatio="none"
              >
                <path
                  d={`${index.line} L400 120 L0 120 Z`}
                  fill="currentColor"
                  opacity="0.1"
                />
                <path
                  d={index.benchmarkLine}
                  fill="none"
                  stroke="var(--muted-foreground)"
                  strokeWidth="1.2"
                  strokeDasharray="3 3"
                  vectorEffect="non-scaling-stroke"
                />
                <path
                  d={index.line}
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  vectorEffect="non-scaling-stroke"
                />
              </svg>
              <AllocationBar segments={index.segments} />
            </Card>
            <JoinPanel
              currency="USDC"
              elevation="raised"
              defaultAmount="1,000"
              rows={joinRows}
              className="mt-4 w-full lg:absolute lg:right-0 lg:bottom-0 lg:mt-0 lg:w-80"
            />
          </div>
        </section>

        <section className="flex flex-col gap-3">
          <StatStrip elevation="raised">
            {stats.map((s) => (
              <StatStripItem key={s.label} value={s.value} label={s.label} />
            ))}
          </StatStrip>
          <p className="text-xs text-muted-foreground-2">{statsNote}</p>
        </section>

        <section id="how" className="flex flex-col gap-12">
          <SectionTitle {...problemTitle} />
          <div className="grid gap-10 md:grid-cols-3">
            {problems.map((p) => (
              <div key={p.index} className="flex flex-col gap-3">
                <span className="font-mono text-xs text-muted-foreground">
                  {p.index}
                </span>
                <h3 className="text-xl font-normal tracking-[-0.3px]">
                  {p.title}
                </h3>
                <p className="text-[15px] leading-relaxed text-muted-foreground">
                  {p.body}
                </p>
              </div>
            ))}
          </div>
        </section>

        <section className="flex flex-col gap-10">
          <SectionTitle {...stepsTitle} />
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {steps.map((s) => (
              <StepCard
                key={s.index}
                elevation="raised"
                index={s.index}
                title={s.title}
                description={s.description}
              />
            ))}
          </div>
        </section>

        <section id="pricing" className="flex flex-col gap-10">
          <SectionTitle lead="Simple by design." muted="Fees live on-chain." />
          <div className="grid gap-4 md:grid-cols-3">
            {pricing.map((p) => (
              <PricingPlan
                key={p.name}
                elevation="raised"
                name={p.name}
                tagline={p.tagline}
                price={p.price}
                priceNote={p.note}
                featuresLead={p.lead}
                features={p.features}
                action={
                  <Button
                    elevation="raised"
                    variant="outline"
                    data-go="markets"
                  >
                    Launch app
                  </Button>
                }
              />
            ))}
          </div>
        </section>

        <Card
          elevation="raised"
          className="flex-col gap-6 p-8 md:flex-row md:items-center md:justify-between md:p-12"
        >
          <div className="flex flex-col gap-3">
            <h2 className="text-[34px] leading-tight font-normal tracking-[-1.2px] md:text-[44px]">
              {cta.title}
            </h2>
            <p className="text-muted-foreground">{cta.body}</p>
          </div>
          <div className="flex flex-wrap gap-3">
            <Button elevation="raised" size="lg" data-go="markets">
              Launch app
            </Button>
            <Button elevation="raised" variant="outline" size="lg">
              Read the code
            </Button>
          </div>
        </Card>

        <SiteFooter
          elevation="raised"
          brand={<SiteHeaderBrand name="Stockbreak" elevation="raised" />}
          description={footer.description}
          columns={footer.columns}
          legal={footer.legal}
          note={footer.note}
        />
      </main>
    </div>
  );
}

import {
  IndexRow,
  IndexRowHeader,
} from "@/components/index-row/index-row";
import { LeaderboardPodium } from "@/components/leaderboard-podium/leaderboard-podium";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { Table, TableBody, TableHeader } from "@/components/ui/table";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { useState } from "react";
import {
  leaderboardBenchmark as benchmark,
  leaderboardIndexes as indexes,
  indexRowLabels,
  leaderboardKinds as kinds,
  leaderboardPeriods as periods,
  leaderboardPodium as podium,
  leaderboardTabs as tabs,
  toIndexRow,
} from "../data";

export function LeaderboardPage() {
  const [tab, setTab] = useState("indexes");
  const [period, setPeriod] = useState("7d");
  const [kind, setKind] = useState("all");

  return (
    <div className="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-10 md:px-10">
      <div className="flex items-center gap-3">
        <h1 className="text-[44px] leading-tight font-normal tracking-[-1.5px]">
          Leaderboard
        </h1>
        <Badge variant="secondary">Simulated</Badge>
      </div>

      <div className="flex flex-wrap items-end justify-between gap-4">
        <Tabs value={tab} onValueChange={(v) => setTab(v as string)}>
          <TabsList variant="line">
            {tabs.map((t) => (
              <TabsTrigger key={t.value} value={t.value}>
                {t.label}
              </TabsTrigger>
            ))}
          </TabsList>
        </Tabs>
        <div className="flex flex-wrap items-center gap-3">
          <ToggleGroup
            elevation="raised"
            variant="segmented"
            value={[period]}
            onValueChange={(v) => v[0] && setPeriod(v[0] as string)}
          >
            {periods.map((p) => (
              <ToggleGroupItem key={p.value} value={p.value}>
                {p.label}
              </ToggleGroupItem>
            ))}
          </ToggleGroup>
          <ToggleGroup
            elevation="raised"
            variant="segmented"
            value={[kind]}
            onValueChange={(v) => v[0] && setKind(v[0] as string)}
          >
            {kinds.map((k) => (
              <ToggleGroupItem key={k.value} value={k.value}>
                {k.label}
              </ToggleGroupItem>
            ))}
          </ToggleGroup>
        </div>
      </div>
      <p className="-mt-3 text-sm text-muted-foreground">{benchmark}</p>

      <LeaderboardPodium
        variant="cards"
        valueLabel="AUM"
        countLabel="Holders"
        entries={podium}
      />

      <Card className="px-6 py-2">
        <Table>
          <TableHeader>
            <IndexRowHeader rank labels={indexRowLabels} />
          </TableHeader>
          <TableBody>
            {indexes.map((index, i) => (
              <IndexRow
                key={index.symbol}
                index={toIndexRow(index)}
                rank={i + 1}
                delta="pill"
              />
            ))}
          </TableBody>
        </Table>
      </Card>
    </div>
  );
}

import {
  IndexRow,
  IndexRowHeader,
} from "@/components/index-row/index-row";
import { TickerStrip } from "@/components/ticker-strip/ticker-strip";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Table, TableBody, TableHeader } from "@/components/ui/table";
import { IconPlaceholder } from "@/edmi/icon-placeholder";
import {
  marketsActivity as activity,
  marketsCreators as creators,
  marketsHumanVsAi as humanVsAi,
  marketsIndexes as indexes,
  indexRowLabels,
  tickers,
  toIndexRow,
} from "../data";

function CardTop({
  title,
  action,
  href,
}: {
  title: string;
  action?: string;
  href?: string;
}) {
  return (
    <div className="flex items-baseline justify-between">
      <h2 className="text-xl font-normal tracking-[-0.3px]">{title}</h2>
      {action ? (
        <a
          href={href}
          className="text-[13px] text-muted-foreground hover:text-foreground"
        >
          {action}
        </a>
      ) : null}
    </div>
  );
}

function Mini({
  label,
  value,
  note,
}: {
  label: string;
  value: string;
  note: string;
}) {
  return (
    <div className="rounded-xl border border-sk-bd bg-sk-bg p-[18px] shadow-sunken">
      <div className="text-[13px] text-muted-foreground">{label}</div>
      <div className="my-2 text-[34px] leading-none font-light tracking-[-0.5px] text-success-text">
        {value}
      </div>
      <div className="text-[13px] text-muted-foreground">{note}</div>
    </div>
  );
}

export function MarketsPage() {
  return (
    <div className="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
      <div className="flex flex-wrap items-end justify-between gap-4">
        <div>
          <div className="flex items-center gap-3">
            <h1 className="text-[44px] leading-tight font-normal tracking-[-1.5px]">
              Markets
            </h1>
            <Badge variant="secondary">Simulated</Badge>
          </div>
          <p className="mt-1 text-lg text-muted-foreground">
            Tokenized stock indexes. Create one, share it, or join someone
            else’s.
          </p>
        </div>
        <Button size="lg" data-go="create">
          Create index
          <IconPlaceholder
            lucide="PlusIcon"
            tabler="IconPlus"
            hugeicons="PlusSignIcon"
            phosphor="PlusIcon"
            remixicon="RiAddLine"
          />
        </Button>
      </div>

      <TickerStrip items={tickers} />

      <Card className="gap-4 px-6">
        <CardTop title="Top indexes" action="View all" href="#/explore" />
        <Table>
          <TableHeader>
            <IndexRowHeader labels={indexRowLabels} />
          </TableHeader>
          <TableBody>
            {indexes.map((index) => (
              <IndexRow
                key={index.symbol}
                index={toIndexRow(index)}
                delta="pill"
              />
            ))}
          </TableBody>
        </Table>
      </Card>

      <div className="grid items-start gap-6 lg:grid-cols-3">
        <Card className="@container gap-4 px-6">
          <CardTop title="Human vs AI" />
          <div className="grid gap-3 @[400px]:grid-cols-2">
            <Mini {...humanVsAi.human} />
            <Mini {...humanVsAi.ai} />
          </div>
        </Card>

        <Card className="gap-3 px-6">
          <CardTop title="Top creators" action="See all" href="#/leaderboard" />
          <ul>
            {creators.map((c) => (
              <li
                key={c.address}
                className="flex items-center gap-3 border-b border-border-2 py-3 last:border-b-0"
              >
                <span className="inline-flex size-9 items-center justify-center rounded-full border border-border bg-muted font-mono text-xs">
                  {c.rank}
                </span>
                <div className="min-w-0 flex-1">
                  <div className="font-mono text-[13px] font-semibold">
                    {c.address}
                  </div>
                  <div className="text-xs text-muted-foreground">{c.meta}</div>
                </div>
                <div className="text-right">
                  <div className="font-mono text-[13px] font-semibold">
                    {c.aum}
                  </div>
                  <div className="text-xs text-muted-foreground">
                    {c.joiners}
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </Card>

        <Card className="gap-3 px-6">
          <CardTop title="Latest activity" />
          <ul>
            {activity.map((a) => (
              <li
                key={`${a.symbol}-${a.text}`}
                className="flex items-center gap-2.5 border-b border-border-2 py-3 text-[13px] last:border-b-0"
              >
                <span
                  className={`size-1.5 rounded-full ${a.tone === "brand" ? "bg-success" : "bg-warning"}`}
                />
                <span className="font-mono font-semibold">{a.symbol}</span>
                <span className="min-w-0 flex-1 truncate text-foreground-2">
                  {a.text}
                </span>
                <span className="text-muted-foreground">{a.ago}</span>
              </li>
            ))}
          </ul>
        </Card>
      </div>
    </div>
  );
}

import { Sparkline } from "@/components/index-row/index-row";
import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  portfolioLooseAssets as looseAssets,
  portfolioLooseNote as looseNote,
  portfolioPositions as positions,
  portfolioTotals as totals,
  portfolioYourIndexes as yourIndexes,
} from "../data";

function Tokens({ tokens }: { tokens: string[] }) {
  return (
    <AvatarGroup>
      {tokens.map((t) => (
        <Avatar key={t} className="size-8">
          <AvatarFallback className="text-[10px]">{t}</AvatarFallback>
        </Avatar>
      ))}
    </AvatarGroup>
  );
}

function CardTop({ title, action }: { title: string; action?: string }) {
  return (
    <div className="flex items-center justify-between gap-3">
      <h2 className="text-xl font-normal tracking-[-0.3px]">{title}</h2>
      {action ? (
        <Button elevation="raised" variant="outline" size="sm">
          {action}
        </Button>
      ) : null}
    </div>
  );
}

export function PortfolioPage() {
  return (
    <div className="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
      <div>
        <div className="flex items-center gap-3">
          <h1 className="text-[44px] leading-tight font-normal tracking-[-1.5px]">
            Portfolio
          </h1>
          <Badge variant="secondary">Simulated</Badge>
        </div>
        <p className="mt-1 text-lg text-muted-foreground">
          Your positions, loose assets and indexes.
        </p>
      </div>

      <div className="grid items-stretch gap-6 lg:grid-cols-[1.4fr_1fr_1fr]">
        <Card className="gap-1.5 px-7">
          <div className="text-[13px] text-muted-foreground">Total value</div>
          <div className="text-[56px] leading-none font-light tracking-[-2px]">
            {totals.value}
          </div>
          <div className="mt-3 flex items-center gap-3 text-[13px] text-muted-foreground">
            <Badge variant="destructive" shape="number">
              {totals.delta}
            </Badge>
            {totals.deltaNote}
          </div>
          <div className="mt-1 text-[13px] text-muted-foreground">
            {totals.breakdown}
          </div>
        </Card>
        {[totals.usdc, totals.sol].map((t, i) => (
          <Card key={t.value} className="gap-1 px-6">
            <div className="text-[13px] text-muted-foreground">
              {i === 0 ? "USDC" : "SOL"}
            </div>
            <div className="font-mono text-[32px] leading-tight">{t.value}</div>
            <div className="text-[13px] text-muted-foreground">{t.note}</div>
          </Card>
        ))}
      </div>

      <Card className="gap-4 px-6">
        <CardTop title="Positions" action="Redeem all" />
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Index</TableHead>
              <TableHead className="text-right">Shares</TableHead>
              <TableHead className="text-right">Price</TableHead>
              <TableHead className="text-right">Value</TableHead>
              <TableHead className="text-right">PnL</TableHead>
              <TableHead className="text-right">7d</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {positions.map((p) => {
              const down = p.pnl.startsWith("-");
              return (
                <TableRow key={p.symbol}>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <Tokens tokens={p.tokens} />
                      <div className="flex items-baseline gap-2">
                        <span className="font-medium">{p.name}</span>
                        <span className="font-mono text-[11.5px] text-muted-foreground">
                          {p.symbol}
                        </span>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell className="text-right font-mono text-[13px]">
                    {p.shares}
                  </TableCell>
                  <TableCell className="text-right font-mono text-[13px]">
                    {p.price}
                  </TableCell>
                  <TableCell className="text-right font-mono text-[13px]">
                    {p.value}
                  </TableCell>
                  <TableCell
                    className={`text-right font-mono text-[13px] ${down ? "text-destructive-text" : "text-success-text"}`}
                  >
                    {p.pnl} <span className="text-[11.5px]">{p.pnlPct}</span>
                  </TableCell>
                  <TableCell className="text-right">
                    <Sparkline
                      data={p.spark}
                      tone={down ? "down" : "up"}
                      width={64}
                    />
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </Card>

      <div className="grid items-start gap-6 lg:grid-cols-2">
        <Card className="gap-3 px-6">
          <CardTop title="Loose assets" action="Swap all to USDC" />
          <p className="text-[13px] leading-relaxed text-muted-foreground">
            Assets in your wallet that are not in any index, worth about{" "}
            <b className="font-semibold text-foreground">{looseNote}</b>. Swap
            them back to USDC or use them to finish a join.
          </p>
          <ul>
            {looseAssets.map((a) => (
              <li
                key={a.symbol}
                className="flex items-center gap-3 border-b border-border-2 py-3 last:border-b-0"
              >
                <span className="inline-flex size-8 items-center justify-center rounded-full border border-border bg-muted font-mono text-[11px]">
                  {a.letter}
                </span>
                <span className="flex-1 font-mono text-[14px] font-semibold">
                  {a.symbol}
                </span>
                <span className="font-mono text-[13px] text-muted-foreground">
                  {a.amount}
                </span>
              </li>
            ))}
          </ul>
        </Card>

        <Card className="gap-3 px-6">
          <CardTop title="Your indexes" action="Create index" />
          <ul>
            {yourIndexes.map((x) => (
              <li
                key={x.symbol}
                className="flex items-center gap-3 border-b border-border-2 py-3 last:border-b-0"
              >
                <Tokens tokens={x.tokens} />
                <div className="min-w-0 flex-1">
                  <div className="flex items-baseline gap-2">
                    <span className="font-medium">{x.name}</span>
                    <span className="font-mono text-[11.5px] text-muted-foreground">
                      {x.symbol}
                    </span>
                  </div>
                  <div className="text-xs text-muted-foreground">
                    AUM {x.aum}
                  </div>
                </div>
                <Button elevation="raised" variant="outline" size="sm">
                  Manage
                </Button>
              </li>
            ))}
          </ul>
        </Card>
      </div>
    </div>
  );
}

import { AgentIdenticon } from "@/components/agent-card/agent-card";
import { Sparkline } from "@/components/index-row/index-row";
import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { IconPlaceholder } from "@/edmi/icon-placeholder";
import {
  profileCreated as created,
  profilePositions as positions,
  profileProfile as profile,
} from "../data";

function Tokens({ tokens }: { tokens: string[] }) {
  return (
    <AvatarGroup>
      {tokens.map((t) => (
        <Avatar key={t} className="size-8">
          <AvatarFallback className="text-[10px]">{t}</AvatarFallback>
        </Avatar>
      ))}
    </AvatarGroup>
  );
}

function Name({ name, symbol }: { name: string; symbol: string }) {
  return (
    <div className="flex items-baseline gap-2">
      <span className="font-medium">{name}</span>
      <span className="font-mono text-[11.5px] text-muted-foreground">
        {symbol}
      </span>
    </div>
  );
}

export function ProfilePage() {
  const progress =
    ((profile.xp - profile.levelStartXp) /
      (profile.nextLevelXp - profile.levelStartXp)) *
    100;
  return (
    <div className="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div className="flex items-center gap-5">
          <AgentIdenticon
            seed={profile.address}
            size={96}
            className="rounded-2xl"
          />
          <div>
            <h1 className="font-mono text-[40px] leading-tight font-normal tracking-[-1px]">
              {profile.short}
            </h1>
            <div className="mt-1 flex items-center gap-2 font-mono text-[13px] text-foreground-2">
              {profile.address}
              <Button variant="ghost" size="icon-xs" aria-label="Copy address">
                <IconPlaceholder
                  lucide="CopyIcon"
                  tabler="IconCopy"
                  hugeicons="Copy01Icon"
                  phosphor="CopyIcon"
                  remixicon="RiFileCopyLine"
                />
              </Button>
            </div>
            <div className="mt-1 text-[13px] text-muted-foreground">
              {profile.followers} followers · {profile.following} following
            </div>
          </div>
        </div>
        <Button elevation="raised" variant="outline">
          Edit profile
        </Button>
      </div>

      <div className="grid items-stretch gap-6 lg:grid-cols-[minmax(0,1fr)_2fr]">
        <Card className="gap-3 px-6">
          <div className="flex items-end justify-between">
            <span className="text-[13px] text-muted-foreground">Level</span>
            <span className="text-[34px] leading-none font-light">
              {profile.level}
            </span>
          </div>
          <Progress
            value={progress}
            variant="brand"
            aria-label="Level progress"
          />
          <div className="text-[13px] text-muted-foreground">
            {profile.xp} XP · next level at {profile.nextLevelXp}
          </div>
        </Card>
        <Card className="gap-3 px-6">
          <span className="text-[13px] text-muted-foreground">Badges</span>
          <div className="flex flex-wrap gap-2">
            {profile.badges.map((b) => (
              <Badge key={b} variant="secondary">
                {b}
              </Badge>
            ))}
          </div>
        </Card>
      </div>

      <Card className="gap-4 px-6">
        <h2 className="text-xl font-normal tracking-[-0.3px]">
          Indexes created
        </h2>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Index</TableHead>
              <TableHead className="text-right">Share price</TableHead>
              <TableHead className="text-right">7d</TableHead>
              <TableHead className="text-right">AUM</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {created.map((c) => (
              <TableRow key={c.symbol}>
                <TableCell>
                  <div className="flex items-center gap-3">
                    <Tokens tokens={c.tokens} />
                    <Name name={c.name} symbol={c.symbol} />
                  </div>
                </TableCell>
                <TableCell className="text-right font-mono text-[13px]">
                  {c.price}
                </TableCell>
                <TableCell className="text-right">
                  <Badge variant="success" shape="number">
                    {c.change}
                  </Badge>
                </TableCell>
                <TableCell className="text-right font-mono text-[13px]">
                  {c.aum}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Card>

      <Card className="gap-4 px-6">
        <h2 className="text-xl font-normal tracking-[-0.3px]">Positions</h2>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Index</TableHead>
              <TableHead className="text-right">Shares</TableHead>
              <TableHead className="text-right">Price</TableHead>
              <TableHead className="text-right">Value</TableHead>
              <TableHead className="text-right">PnL</TableHead>
              <TableHead className="text-right">7d</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {positions.map((p) => {
              const down = p.pnl.startsWith("-");
              return (
                <TableRow key={p.symbol}>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <Tokens tokens={p.tokens} />
                      <Name name={p.name} symbol={p.symbol} />
                    </div>
                  </TableCell>
                  <TableCell className="text-right font-mono text-[13px]">
                    {p.shares}
                  </TableCell>
                  <TableCell className="text-right font-mono text-[13px]">
                    {p.price}
                  </TableCell>
                  <TableCell className="text-right font-mono text-[13px]">
                    {p.value}
                  </TableCell>
                  <TableCell
                    className={`text-right font-mono text-[13px] ${down ? "text-destructive-text" : "text-success-text"}`}
                  >
                    {p.pnl} <span className="text-[11.5px]">{p.pnlPct}</span>
                  </TableCell>
                  <TableCell className="text-right">
                    <Sparkline
                      data={p.spark}
                      tone={down ? "down" : "up"}
                      width={64}
                    />
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </Card>
    </div>
  );
}

// Sample data for the Stockbreak app (all pages). Plain TS, no framework imports; shared by react.tsx, vue.vue and svelte.svelte.
// Each page owns a prefixed section (exploreIndexes, feedPosts, ...); tickers, the index row type and the sparkline helpers are shared.
export interface TickerItem {
  symbol: string;
  price: string;
  change: string;
}

export interface IndexRowData {
  name: string;
  symbol: string;
  tokens: { label: string }[];
  tags?: string[];
  creator: string;
  price: string;
  change: string;
  aum: string;
  holders: number;
  spark?: number[];
  /** Row link, used by the app navigation (`#/index` opens Index detail). */
  href?: string;
}

const up = [1.0, 1.01, 1.03, 1.02, 1.04, 1.04, 1.05, 1.06];
const down = [1.0, 0.99, 0.98, 0.985, 0.97, 0.972, 0.97, 0.965];
const pre = "Pre-IPO · PreStocks";
const withHref = <T extends IndexRowData>(rows: T[]): T[] =>
  rows.map((row) => ({ ...row, href: "#/index" }));
/** Maps a Stockbreak index onto the neutral shape of the `index-row` item (`avatars`, `owner`, `value`, `count`). */
export const toIndexRow = (i: IndexRowData) => ({
  ...i,
  avatars: i.tokens,
  owner: i.creator,
  value: i.aum,
  count: i.holders,
});
/** Column labels of the Stockbreak index table (`IndexRowHeader labels`). */
export const indexRowLabels = {
  name: "Index",
  owner: "Creator",
  price: "Price",
  change: "7d",
  value: "AUM",
  count: "Holders",
  trend: "30d",
};
const t = (...labels: string[]) => labels.map((label) => ({ label }));

// ---- markets ----
export const tickers: TickerItem[] = [
  { symbol: "AAPLx", price: "$339.86", change: "+0.42%" },
  { symbol: "NVDAx", price: "$227.06", change: "+0.81%" },
  { symbol: "TSLAx", price: "$370.21", change: "-0.31%" },
  { symbol: "MSFTx", price: "$513.15", change: "+0.12%" },
  { symbol: "GOOGLx", price: "$340.43", change: "+0.55%" },
  { symbol: "AMZNx", price: "$247.93", change: "-0.20%" },
  { symbol: "METAx", price: "$730.50", change: "+1.02%" },
  { symbol: "SPYx", price: "$767.86", change: "+0.30%" },
];

const marketsIndexesRaw: IndexRowData[] = [
  {
    name: "Mag Four Tilt",
    symbol: "MAGT",
    tokens: [{ label: "A" }, { label: "N" }, { label: "T" }],
    tags: [pre, "Clone"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+1.12%",
    aum: "$120.1K",
    holders: 2,
    spark: up,
  },
  {
    name: "AI Frontier",
    symbol: "AIFR",
    tokens: [{ label: "N" }, { label: "M" }, { label: "G" }],
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.01",
    change: "+0.84%",
    aum: "$82.4K",
    holders: 2,
    spark: up,
  },
  {
    name: "Defense & Space",
    symbol: "DFSP",
    tokens: [{ label: "S" }, { label: "A" }, { label: "T" }],
    tags: [pre],
    creator: "7Ge1…kXSq",
    price: "$0.9791",
    change: "-2.09%",
    aum: "$29K",
    holders: 1,
    spark: down,
  },
  {
    name: "Mag Four Mirror",
    symbol: "MAGM",
    tokens: [{ label: "A" }, { label: "N" }, { label: "T" }],
    tags: [pre, "Follows MAG4"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+0.21%",
    aum: "$19.8K",
    holders: 1,
    spark: up,
  },
  {
    name: "Magnificent Four",
    symbol: "MAG4",
    tokens: [{ label: "A" }, { label: "N" }, { label: "T" }],
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.00",
    change: "+2.38%",
    aum: "$14.1K",
    holders: 14,
    spark: up,
  },
];

export const marketsIndexes = withHref(marketsIndexesRaw);

export const marketsHumanVsAi = {
  human: {
    label: "Human · median 7d",
    value: "+0.84%",
    note: "34 indexes · best MAGT",
  },
  ai: { label: "AI · median 7d", value: "—", note: "0 indexes" },
};

export const marketsCreators = [
  {
    rank: "G",
    address: "GbFK…ZUWS",
    meta: "Level 2 · 2 indexes",
    aum: "$140K",
    joiners: "1 joiners",
  },
  {
    rank: "8",
    address: "8FcD…cL9y",
    meta: "Level 4 · 2 indexes",
    aum: "$96.5K",
    joiners: "14 joiners",
  },
  {
    rank: "7",
    address: "7Ge1…kXSq",
    meta: "Level 2 · 2 indexes",
    aum: "$32K",
    joiners: "1 joiners",
  },
];

export const marketsActivity = [
  {
    symbol: "MAGT",
    text: "Joined · 983.75 shares",
    ago: "5d ago",
    tone: "brand",
  },
  {
    symbol: "PHMAKER",
    text: "Joined · 987.03 shares",
    ago: "5d ago",
    tone: "warning",
  },
  { symbol: "PHMAKER", text: "Created", ago: "5d ago", tone: "brand" },
  {
    symbol: "MM41",
    text: "Claimed creator fees",
    ago: "5d ago",
    tone: "warning",
  },
  { symbol: "MM41", text: "Paused", ago: "5d ago", tone: "brand" },
] as const;

// ---- explore ----
export type exploreKind = "human" | "ai";

const exploreIndexesRaw: (IndexRowData & { kind: exploreKind })[] = [
  {
    name: "Mag Four Tilt",
    symbol: "MAGT",
    tokens: t("A", "N", "T"),
    tags: [pre, "Clone"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+1.12%",
    aum: "$120.1K",
    holders: 2,
    spark: up,
    kind: "human",
  },
  {
    name: "AI Frontier",
    symbol: "AIFR",
    tokens: t("N", "M", "G"),
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.01",
    change: "+0.84%",
    aum: "$82.4K",
    holders: 2,
    spark: up,
    kind: "human",
  },
  {
    name: "Defense & Space",
    symbol: "DFSP",
    tokens: t("S", "A", "T"),
    tags: [pre],
    creator: "7Ge1…kXSq",
    price: "$0.9791",
    change: "-2.09%",
    aum: "$29K",
    holders: 1,
    spark: down,
    kind: "human",
  },
  {
    name: "Mag Four Mirror",
    symbol: "MAGM",
    tokens: t("A", "N", "T"),
    tags: [pre, "Follows MAG4"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+0.21%",
    aum: "$19.8K",
    holders: 1,
    spark: up,
    kind: "human",
  },
  {
    name: "Magnificent Four",
    symbol: "MAG4",
    tokens: t("A", "N", "T"),
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.00",
    change: "+2.38%",
    aum: "$14.1K",
    holders: 14,
    spark: up,
    kind: "human",
  },
  {
    name: "Atlas Momentum",
    symbol: "ATLS",
    tokens: t("A", "T", "L"),
    tags: ["AI"],
    creator: "CB7H…iTLG",
    price: "$0.9893",
    change: "-0.64%",
    aum: "$4,570",
    holders: 3,
    spark: down,
    kind: "ai",
  },
  {
    name: "Steady Megacaps",
    symbol: "MEGA",
    tokens: t("A", "M", "G"),
    creator: "7Ge1…kXSq",
    price: "$1.00",
    change: "-0.54%",
    aum: "$3,013",
    holders: 2,
    spark: down,
    kind: "human",
  },
  {
    name: "PHONEMAKER",
    symbol: "PHMAKER",
    tokens: t("A", "S"),
    creator: "abHa…umq7",
    price: "$0.9942",
    change: "+0.12%",
    aum: "$981.41",
    holders: 1,
    spark: up,
    kind: "human",
  },
  {
    name: "BIG FIVE",
    symbol: "BIGF",
    tokens: t("A", "M", "G"),
    creator: "abHa…umq7",
    price: "$0.9932",
    change: "+0.08%",
    aum: "$980.48",
    holders: 1,
    spark: up,
    kind: "human",
  },
  {
    name: "Pilot 1866",
    symbol: "PL1866",
    tokens: t("A", "N"),
    creator: "Diat…T4RL",
    price: "$1.00",
    change: "+0.02%",
    aum: "$99.18",
    holders: 1,
    spark: up,
    kind: "human",
  },
];

export const exploreIndexes = withHref(exploreIndexesRaw);

export const exploreKinds = [
  { value: "all", label: "All" },
  { value: "human", label: "Human" },
  { value: "ai", label: "AI" },
] as const;

export const exploreStrategies = [
  { value: "any", label: "Any strategy" },
  { value: "clone", label: "Clone" },
  { value: "follow", label: "Follows" },
];

export const exploreSorts = [
  { value: "aum", label: "AUM" },
  { value: "change", label: "7d change" },
  { value: "holders", label: "Holders" },
];

// ---- leaderboard ----
export interface leaderboardAllocationSegment {
  label: string;
  value: number;
}

export interface leaderboardPodiumEntry {
  rank: 1 | 2 | 3;
  name: string;
  symbol: string;
  owner: string;
  change: string;
  value: string;
  count: number;
  spark: number[];
  allocation: leaderboardAllocationSegment[];
}

export const leaderboardPodium: leaderboardPodiumEntry[] = [
  {
    rank: 1,
    name: "Mag Four Tilt",
    symbol: "MAGT",
    owner: "GbFK…ZUWS",
    change: "+1.12%",
    value: "$120.1K",
    count: 2,
    spark: up,
    allocation: [
      { label: "AAPLx", value: 30 },
      { label: "NVDAx", value: 40 },
      { label: "TSLAx", value: 20 },
      { label: "SPACEX-pre", value: 10 },
    ],
  },
  {
    rank: 2,
    name: "AI Frontier",
    symbol: "AIFR",
    owner: "8FcD…cL9y",
    change: "+0.84%",
    value: "$82.4K",
    count: 2,
    spark: up,
    allocation: [
      { label: "NVDAx", value: 30 },
      { label: "MSFTx", value: 25 },
      { label: "GOOGLx", value: 20 },
      { label: "OPENAI-pre", value: 15 },
      { label: "ANTHRP-pre", value: 10 },
    ],
  },
  {
    rank: 3,
    name: "Defense & Space",
    symbol: "DFSP",
    owner: "7Ge1…kXSq",
    change: "-2.09%",
    value: "$29K",
    count: 1,
    spark: down,
    allocation: [
      { label: "SPACEX-pre", value: 40 },
      { label: "ANDURL-pre", value: 30 },
      { label: "TSLAx", value: 30 },
    ],
  },
];

const leaderboardIndexesRaw: IndexRowData[] = [
  {
    name: "Mag Four Tilt",
    symbol: "MAGT",
    tokens: t("A", "N", "T"),
    tags: [pre, "Clone"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+1.12%",
    aum: "$120.1K",
    holders: 2,
    spark: up,
  },
  {
    name: "AI Frontier",
    symbol: "AIFR",
    tokens: t("N", "M", "G"),
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.01",
    change: "+0.84%",
    aum: "$82.4K",
    holders: 2,
    spark: up,
  },
  {
    name: "Defense & Space",
    symbol: "DFSP",
    tokens: t("S", "A", "T"),
    tags: [pre],
    creator: "7Ge1…kXSq",
    price: "$0.9791",
    change: "-2.09%",
    aum: "$29K",
    holders: 1,
    spark: down,
  },
  {
    name: "Mag Four Mirror",
    symbol: "MAGM",
    tokens: t("A", "N", "T"),
    tags: [pre, "Follows MAG4"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+0.21%",
    aum: "$19.8K",
    holders: 1,
    spark: up,
  },
  {
    name: "Magnificent Four",
    symbol: "MAG4",
    tokens: t("A", "N", "T"),
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.00",
    change: "+2.38%",
    aum: "$14.1K",
    holders: 14,
    spark: up,
  },
];

export const leaderboardIndexes = withHref(leaderboardIndexesRaw);

export const leaderboardTabs = [
  { value: "indexes", label: "Indexes" },
  { value: "creators", label: "Creators" },
];

export const leaderboardPeriods = [
  { value: "24h", label: "24H" },
  { value: "7d", label: "7D" },
  { value: "30d", label: "30D" },
  { value: "all", label: "ALL" },
];

export const leaderboardKinds = [
  { value: "all", label: "All" },
  { value: "human", label: "Human" },
  { value: "ai", label: "AI" },
];

export const leaderboardBenchmark = "SPYx 7D: +0.48%";

// ---- create ----
export interface createAsset {
  symbol: string;
  name: string;
  price: string;
  /** Source tag shown as a badge next to the symbol. */
  tag?: string;
  detail: string;
}

export const createSteps = [
  { value: "assets", label: "Assets" },
  { value: "weights", label: "Weights" },
  { value: "strategy", label: "Strategy" },
  { value: "fees", label: "Fees" },
  { value: "review", label: "Review" },
] as const;

export type createStepValue = (typeof createSteps)[number]["value"];

export const createAssets: createAsset[] = [
  {
    symbol: "USDC",
    name: "USD Coin",
    detail: "USD Coin · stable",
    price: "$1.00",
  },
  { symbol: "AAPLx", name: "Apple", detail: "Apple", price: "$339.86" },
  { symbol: "NVDAx", name: "NVIDIA", detail: "NVIDIA", price: "$227.06" },
  { symbol: "TSLAx", name: "Tesla", detail: "Tesla", price: "$370.21" },
  { symbol: "MSFTx", name: "Microsoft", detail: "Microsoft", price: "$513.15" },
  { symbol: "GOOGLx", name: "Alphabet", detail: "Alphabet", price: "$340.43" },
  { symbol: "AMZNx", name: "Amazon", detail: "Amazon", price: "$247.93" },
  { symbol: "METAx", name: "Meta", detail: "Meta", price: "$730.50" },
  {
    symbol: "SPACEX-pre",
    name: "SpaceX",
    tag: "PreStocks",
    detail: "SpaceX (pre-IPO) · pre-IPO",
    price: "$117.49",
  },
  {
    symbol: "OPENAI-pre",
    name: "OpenAI",
    tag: "PreStocks",
    detail: "OpenAI (pre-IPO) · pre-IPO",
    price: "$1,379.64",
  },
  {
    symbol: "ANTHRP-pre",
    name: "Anthropic",
    tag: "PreStocks",
    detail: "Anthropic (pre-IPO) · pre-IPO",
    price: "$1,061.26",
  },
];

export const createRebalance = [
  { value: "drift", label: "On drift" },
  { value: "daily", label: "Daily" },
  { value: "weekly", label: "Weekly" },
  { value: "never", label: "Never" },
];

export const createDefaults = {
  drift: 5,
  fee: 1,
  entry: 0,
  exit: 0,
  rebalance: "drift",
};

// ---- feed ----
export const feedViews = [
  { value: "following", label: "Following" },
  { value: "all", label: "All" },
];

export interface feedUpdate {
  id: string;
  who: string;
  initial: string;
  action: string;
  detail?: string;
  symbol: string;
  tokens: string[];
  ago: string;
}

export const feedUpdates: feedUpdate[] = [
  {
    id: "u1",
    who: "abHa…umq7",
    initial: "a",
    action: "joined",
    detail: "983.75 shares",
    symbol: "MAGT",
    tokens: ["A", "N", "T"],
    ago: "6d ago",
  },
  {
    id: "u2",
    who: "abHa…umq7",
    initial: "a",
    action: "joined",
    detail: "987.03 shares",
    symbol: "PHMAKER",
    tokens: ["G", "A"],
    ago: "6d ago",
  },
  {
    id: "u3",
    who: "abHa…umq7",
    initial: "a",
    action: "created",
    symbol: "PHMAKER",
    tokens: ["G", "A"],
    ago: "6d ago",
  },
  {
    id: "u4",
    who: "HzXY…iuZU",
    initial: "H",
    action: "redeemed",
    detail: "98.19 shares",
    symbol: "MAG4",
    tokens: ["A", "N", "T"],
    ago: "6d ago",
  },
  {
    id: "u5",
    who: "8FcD…cL9y",
    initial: "8",
    action: "created",
    symbol: "MAG4",
    tokens: ["A", "N", "T"],
    ago: "6d ago",
  },
  {
    id: "u6",
    who: "GbFK…ZUWS",
    initial: "G",
    action: "joined",
    detail: "120.40 shares",
    symbol: "MAGT",
    tokens: ["A", "N", "T"],
    ago: "6d ago",
  },
];

export interface feedPost {
  id: string;
  name: string;
  handle: string;
  time: string;
  initials: string;
  text: string;
  index: { title: string; description: string };
  likes: number;
  replies: number;
}

export const feedPosts: feedPost[] = [
  {
    id: "p1",
    name: "Dewi Lestari",
    handle: "@dewi",
    time: "2h",
    initials: "DL",
    text: "Rebalanced MAG4 after NVDAx drifted to 32.4%. Fees this week: 4.1 USDC.",
    index: { title: "MAG4 · Magnificent Four", description: "$1.00 · +2.38%" },
    likes: 24,
    replies: 6,
  },
  {
    id: "p2",
    name: "GbFK…ZUWS",
    handle: "creator",
    time: "1d",
    initials: "GB",
    text: "Tilting toward pre-IPO names for the next epoch. Weights lock at launch, so read the mandate first.",
    index: { title: "MAGT · Mag Four Tilt", description: "$1.00 · +1.12%" },
    likes: 9,
    replies: 2,
  },
];

export const feedMoreUpdates = 6;
export const feedMaxChars = 500;

// ---- agents ----
export const agentsMcpUrl = "https://stockbreak.fun/api/mcp";

export interface agentsAgentStat {
  label: string;
  value: string;
}

export const agentsAgents: {
  name: string;
  address: string;
  tag: string;
  stats: agentsAgentStat[];
  note: string;
}[] = [
  {
    name: "XSD",
    address: "dG6r…4mSr",
    tag: "AI",
    stats: [
      { label: "Indexes", value: "0" },
      { label: "AUM", value: "$0.00" },
      { label: "Best 7d", value: "—" },
    ],
    note: "Not running an index yet.",
  },
];

export const agentsClients: {
  value: string;
  label: string;
  steps: string[];
}[] = [
  {
    value: "claude-ai",
    label: "Claude.ai",
    steps: [
      "Settings → Connectors → Add custom connector",
      "Name: Stockbreak",
      `URL:  ${agentsMcpUrl}`,
    ],
  },
  {
    value: "chatgpt",
    label: "ChatGPT",
    steps: [
      "Settings → Connectors → Advanced → Developer mode",
      "Create connector, name it Stockbreak",
      `MCP server URL: ${agentsMcpUrl}`,
    ],
  },
  {
    value: "claude-code",
    label: "Claude Code",
    steps: [`claude mcp add --transport http stockbreak ${agentsMcpUrl}`],
  },
];

export const agentsApiKeyNote =
  "Create an agent and an API key under Your agents, then add the key as a header in a client that supports it (Claude Code, Cursor, your own script). Claude.ai and ChatGPT connectors cannot send it: there the AI prepares actions for you to sign, and Autopilot acts for the agent.";

export const agentsHeaderSnippet = '--header "Authorization: Bearer sbk_…"';

// ---- portfolio ----
export const portfolioTotals = {
  value: "$4,970.69",
  delta: "-$14.76",
  deltaNote: "-0.30% over 7d",
  breakdown: "Positions $3,930.69 · USDC $1,040.00",
  usdc: { value: "1,040", note: "Simulated · devnet" },
  sol: { value: "81.654", note: "For transaction fees" },
};

export interface portfolioPosition {
  name: string;
  symbol: string;
  tokens: string[];
  shares: string;
  price: string;
  value: string;
  pnl: string;
  pnlPct: string;
  spark: number[];
}

export const portfolioPositions: portfolioPosition[] = [
  {
    name: "Mag Four Tilt",
    symbol: "MAGT",
    tokens: ["A", "N", "T"],
    shares: "983.75",
    price: "$1.00",
    value: "$987.52",
    pnl: "+$3.80",
    pnlPct: "+0.39%",
    spark: up,
  },
  {
    name: "PHONEMAKER",
    symbol: "PHMAKER",
    tokens: ["G", "A"],
    shares: "987.03",
    price: "$0.9942",
    value: "$981.26",
    pnl: "-$7.67",
    pnlPct: "-0.78%",
    spark: down,
  },
  {
    name: "BIG FIVE",
    symbol: "BIGF",
    tokens: ["A", "N", "M"],
    shares: "987.03",
    price: "$0.9932",
    value: "$980.32",
    pnl: "-$7.70",
    pnlPct: "-0.78%",
    spark: down,
  },
  {
    name: "Magnificent Four",
    symbol: "MAG4",
    tokens: ["A", "N", "T"],
    shares: "980.2",
    price: "$1.00",
    value: "$981.59",
    pnl: "-$2.59",
    pnlPct: "-0.26%",
    spark: down,
  },
];

export const portfolioLooseAssets = [
  { symbol: "AAPLx", letter: "A", amount: "0.0071" },
  { symbol: "NVDAx", letter: "N", amount: "0.0058" },
  { symbol: "MSFTx", letter: "M", amount: "0" },
  { symbol: "METAx", letter: "M", amount: "0" },
  { symbol: "SPACEX-pre", letter: "S", amount: "0.0051" },
];

export const portfolioLooseNote = "$0.00";

export const portfolioYourIndexes = [
  { name: "PHONEMAKER", symbol: "PHMAKER", aum: "$981.41", tokens: ["G", "A"] },
  { name: "BIG FIVE", symbol: "BIGF", aum: "$980.48", tokens: ["A", "N", "M"] },
];

// ---- profile ----
export const profileProfile = {
  short: "abHa…umq7",
  address: "abHaSb…ERumq7",
  followers: 0,
  following: 0,
  level: 2,
  xp: 260,
  nextLevelXp: 450,
  levelStartXp: 150,
  badges: ["First index", "First join", "Early on devnet"],
};

export interface profileCreated {
  name: string;
  symbol: string;
  tokens: string[];
  price: string;
  change: string;
  aum: string;
}

export const profileCreated: profileCreated[] = [
  {
    name: "PHONEMAKER",
    symbol: "PHMAKER",
    tokens: ["G", "A"],
    price: "$0.9942",
    change: "+0.12%",
    aum: "$981.41",
  },
  {
    name: "BIG FIVE",
    symbol: "BIGF",
    tokens: ["A", "N", "M"],
    price: "$0.9932",
    change: "+0.08%",
    aum: "$980.48",
  },
];

export interface profilePosition {
  name: string;
  symbol: string;
  tokens: string[];
  shares: string;
  price: string;
  value: string;
  pnl: string;
  pnlPct: string;
  spark: number[];
}

export const profilePositions: profilePosition[] = [
  {
    name: "Mag Four Tilt",
    symbol: "MAGT",
    tokens: ["A", "N", "T"],
    shares: "983.75",
    price: "$1.00",
    value: "$987.52",
    pnl: "+$3.80",
    pnlPct: "+0.39%",
    spark: up,
  },
  {
    name: "PHONEMAKER",
    symbol: "PHMAKER",
    tokens: ["G", "A"],
    shares: "987.03",
    price: "$0.9942",
    value: "$981.26",
    pnl: "-$7.67",
    pnlPct: "-0.78%",
    spark: down,
  },
  {
    name: "BIG FIVE",
    symbol: "BIGF",
    tokens: ["A", "N", "M"],
    shares: "987.03",
    price: "$0.9932",
    value: "$980.32",
    pnl: "-$7.70",
    pnlPct: "-0.78%",
    spark: down,
  },
  {
    name: "Magnificent Four",
    symbol: "MAG4",
    tokens: ["A", "N", "T"],
    shares: "980.2",
    price: "$1.00",
    value: "$981.59",
    pnl: "-$2.59",
    pnlPct: "-0.26%",
    spark: down,
  },
];

// ---- faucet ----
export const faucetWallet = {
  address: "abHaSbWAxCNM2DhyGe5U2eLRZzViRDSVLLMD7ERumq7",
  sol: 81.654,
  usdc: 1040,
};

export const faucetSolFaucet = {
  title: "1. SOL for transaction fees",
  description:
    "Sends 0.1 SOL from the app’s faucet wallet. Limited per wallet per day.",
  linkLabel: "faucet.solana.com",
  linkHref: "https://faucet.solana.com",
  buttonLabel: "Open faucet.solana.com",
};

export const faucetUsdcFaucet = {
  title: "2. Simulated USDC",
  description:
    "Minted by the mock market. Up to 10,000 per request. You sign one transaction.",
  amounts: [1000, 5000, 10000],
  defaultAmount: 5000,
};

// ---- landing ----
export type landingLink = { label: string; href: string };
export type landingSegment = { label: string; value: number };
export type landingFeature = { index: string; title: string; body: string };
export type landingStep = { index: string; title: string; description: string };
export type landingStat = { value: string; label: string };
export type landingFooterColumn = { title: string; links: landingLink[] };

export const landingNav: landingLink[] = [
  { label: "How it works", href: "#how" },
  { label: "Pre-IPO", href: "#pre-ipo" },
  { label: "AI agents", href: "#agents" },
  { label: "Creators", href: "#creators" },
  { label: "FAQ", href: "#faq" },
  { label: "GitHub", href: "#github" },
];

export const landingHero = {
  eyebrow: "The index launchpad for tokenized stocks, on Solana",
  title: "Turn your stock thesis into an index token.",
  lead: "Pick up to 10 tokenized stocks and pre-IPO names, set the weights and the rules. Others join with USDC in one click or one Blink. A Solana vault program enforces the rebalancing — not us.",
  facts:
    "Self-custodied · Redeem anytime · Rules enforced on-chain · PreStocks pre-IPO",
  disclaimer:
    "Live on Solana devnet. Assets are simulated; prices follow real market data. Not investment advice.",
};

export const landingIndex = {
  name: "Magnificent Four",
  ticker: "MAG4",
  creator: "by @alice",
  tags: ["Pre-IPO·PreStocks", "Simulated"],
  price: "$0.9998",
  d24: "+0.53%",
  d7: "+2.38%",
  benchmark: "Is it beating SPYx?",
  segments: [
    { label: "AAPLx", value: 40 },
    { label: "NVDAx", value: 30 },
    { label: "TSLAx", value: 20 },
    { label: "SPACEX-pre", value: 10 },
  ] satisfies landingSegment[],
  // viewBox 0 0 400 120 paths (index line + dashed benchmark)
  line: "M0 92 C30 92 50 94 80 86 C110 78 130 70 160 66 C190 62 210 66 240 56 C270 46 300 38 330 34 C360 30 380 26 400 22",
  benchmarkLine: "M0 94 C60 92 120 88 180 84 C240 80 300 74 400 66",
};

export const landingJoinRows = [{ label: "Estimated shares", value: "982.09" }];

export const landingStats: landingStat[] = [
  { value: "[N]K+", label: "holders, all-time high" },
  { value: "$[N]B", label: "volume in 30 days" },
  { value: "[N]%+", label: "of activity outside US hours" },
  { value: "[N]K", label: "holders of Anthropic pre-IPO" },
];
export const landingStatsNote =
  "Market data placeholders — fill with sourced figures before publishing.";

export const landingProblemTitle = {
  lead: "Tokenized stocks are here.",
  muted: "Portfolios aren't.",
};
export const landingProblems: landingFeature[] = [
  {
    index: "01",
    title: "Every token is one ticker.",
    body: "If you believe in AI infrastructure plus Anthropic and SpaceX, you're managing ten positions by hand — and rebalancing them yourself, forever.",
  },
  {
    index: "02",
    title: "Creators can't ship their thesis.",
    body: "Packaging a thesis into something people can buy still means starting a fund. Copy apps are off-chain, US-only and run on subscriptions.",
  },
  {
    index: "03",
    title: "Pre-IPO tokens come with deadlines.",
    body: "After an IPO, pre-IPO tokens must be swapped into the listed stock before a deadline — or they expire. Holders who forget lose everything.",
  },
];

export const landingStepsTitle = {
  lead: "From thesis to token",
  muted: "in four steps.",
};
export const landingSteps: landingStep[] = [
  {
    index: "01",
    title: "Create",
    description:
      "Pick up to 10 assets, set weights, choose a strategy and your fees.",
  },
  {
    index: "02",
    title: "Share",
    description:
      "Every index gets a link, an OG image, a feed card and a Solana Blink.",
  },
  {
    index: "03",
    title: "Join",
    description:
      "Investors pay in USDC. Stockbreak swaps into every asset and mints share tokens.",
  },
  {
    index: "04",
    title: "Stay balanced",
    description:
      "When weights drift past your rule, a permissionless keeper rebalances atomically.",
  },
];

export const landingCta = {
  title: "Your thesis deserves a ticker.",
  body: "Create an index in minutes. Share it anywhere. Let the program keep it honest.",
};

export const landingPricing = [
  {
    name: "Holder",
    lead: "Included:",
    tagline: "Join any index",
    price: "0% to join",
    note: "Plus the 1% management fee set by each creator.",
    features: [
      "Browse and join every index",
      "Live NAV and feeds",
      "Leaderboard and portfolio",
    ],
  },
  {
    name: "Creator",
    lead: "Everything in Holder, plus:",
    tagline: "Launch your own index",
    price: "1% fee to you",
    note: "Earn the management fee on every holder's share.",
    features: [
      "Custom weights and mandate",
      "Pre-IPO sleeve",
      "Share cards and Blinks",
    ],
  },
  {
    name: "Keeper",
    lead: "Everything in Creator, plus:",
    tagline: "Automate rebalancing",
    price: "5% drift trigger",
    note: "Keeper rebalances when weights drift past your limit.",
    features: [
      "Scheduled rebalances",
      "Agent wallet and MCP",
      "Priority execution",
    ],
  },
];

export const landingFooter = {
  description: "Index launchpad for tokenized stocks, on Solana.",
  columns: [
    {
      title: "Product",
      links: [
        { label: "Explore", href: "#explore" },
        { label: "Leaderboard", href: "#leaderboard" },
        { label: "Create index", href: "#create" },
      ],
    },
    {
      title: "Developers",
      links: [
        { label: "Docs", href: "#docs" },
        { label: "MCP server", href: "#mcp" },
        { label: "GitHub", href: "#github" },
      ],
    },
    {
      title: "Company",
      links: [
        { label: "About", href: "#about" },
        { label: "Careers", href: "#careers" },
        { label: "News", href: "#news" },
      ],
    },
  ] satisfies landingFooterColumn[],
  legal: "© 2026 Stockbreak",
  note: "Devnet only · simulated assets · not investment advice",
};

// ---- detail ----
export interface detailAllocationSegment {
  label: string;
  value: number;
}

export const detailIndex = {
  name: "Magnificent Four",
  symbol: "MAG4",
  initial: "M",
  tags: ["Pre-IPO · PreStocks", "Simulated"],
  nav: "1.0000",
  navDelta: "+0.0055 (+0.55%)",
  navNote: "Share price · NAV updated 2m ago",
  ret7d: "+2.38%",
  retVs: "vs SPYx +1.9%",
  retNote: "7d return · benchmark SPYx",
};

export interface detailChartPoint {
  day: string;
  mag4: number;
  spyx: number;
}

const detailMag4 = [
  0.0, 0.0, -0.05, 0.3, 1.2, 2.2, 2.9, 3.2, 3.4, 3.5, 3.5, 3.9, 4.3, 4.6, 5.1,
  5.8, 6.2, 6.6, 7.0,
];
export const detailChart: detailChartPoint[] = detailMag4.map((v, i) => ({
  day: String(12 + i),
  mag4: v,
  spyx: Math.round(((i * 2.2) / 18) * 100) / 100,
}));

export const detailRanges = ["1D", "1W", "1M", "3M", "1Y", "ALL"];

export const detailStatGroups: { label: string; value: string }[][] = [
  [
    { label: "AUM", value: "$14.1K" },
    { label: "Holders", value: "14" },
    { label: "Clones", value: "2" },
    { label: "Followers", value: "1" },
  ],
  [
    { label: "Rebalancing", value: "Drift > 5%" },
    { label: "Max slippage", value: "1%" },
    { label: "Cooldown", value: "1 min" },
    { label: "Keeper", value: "Allowed" },
  ],
  [
    { label: "Mgmt fee", value: "1% / yr" },
    { label: "Entry / exit", value: "0% / 0%" },
    { label: "Timelock", value: "120s" },
    { label: "Created", value: "Sep 20" },
  ],
];

export const detailAssets = [
  {
    symbol: "AAPLx",
    initial: "A",
    weight: "41.2%",
    target: "40%",
    drift: "+1.2%",
    trend: "up",
  },
  {
    symbol: "NVDAx",
    initial: "N",
    weight: "29.1%",
    target: "30%",
    drift: "-0.9%",
    trend: "down",
  },
  {
    symbol: "TSLAx",
    initial: "T",
    weight: "19.8%",
    target: "20%",
    drift: "-0.2%",
    trend: "down",
  },
  {
    symbol: "SPACEX-pre",
    initial: "S",
    weight: "9.9%",
    target: "10%",
    drift: "-0.1%",
    trend: "down",
  },
] as const;

export const detailAllocation: detailAllocationSegment[] = [
  { label: "AAPLx", value: 40 },
  { label: "NVDAx", value: 30 },
  { label: "TSLAx", value: 20 },
  { label: "SPACEX-pre", value: 10 },
];

export const detailJoinTabs = [
  { value: "join", label: "Join" },
  { value: "redeem", label: "Redeem" },
];

export const detailQuickAmounts = [
  { label: "$10", value: "10" },
  { label: "$50", value: "50" },
  { label: "$100", value: "100" },
  { label: "Max", value: "1240" },
];

export const detailJoinRows = [
  { label: "Estimated shares", value: "99.86" },
  { label: "Entry fee", value: "0%" },
  { label: "Route", value: "USDC → 4 swaps" },
  { label: "Network fee", value: "~$0.001" },
];

export const detailMaxAmount = "1,240";

export const detailShareActions = ["Copy link", "Blink", "X post"];

export const detailCreator = {
  initial: "8",
  address: "8FcD…cL9y",
  meta: "Level 4 · 2 indexes",
};

// ---- app shell ----
// Hash links are intercepted by the app root (`#/<page>`), so the same data drives the navbar and the sidebar.
export const appNav = [
  { label: "Markets", href: "#/markets" },
  { label: "Explore", href: "#/explore" },
  { label: "Feed", href: "#/feed" },
  { label: "Leaderboard", href: "#/leaderboard" },
  { label: "AI", href: "#/agents" },
  { label: "Portfolio", href: "#/portfolio" },
];

export const sidebarNav = [
  { label: "Dashboard", icon: "dashboard", href: "#/markets" },
  { label: "Explore", icon: "explore", href: "#/explore" },
  { label: "Feed", icon: "feed", href: "#/feed" },
  { label: "Leaderboard", icon: "leaderboard", href: "#/leaderboard" },
  { label: "AI agents", icon: "agents", href: "#/agents" },
  { label: "Create index", icon: "create", href: "#/create" },
  { label: "Portfolio", icon: "portfolio", href: "#/portfolio" },
  { label: "Settings", icon: "settings", href: "#/profile" },
] as const;

export const watchlist = [
  {
    symbol: "MAG4",
    price: "1.0000",
    change: "+2.38%",
    letter: "M",
    color: "var(--chart-1)",
  },
  {
    symbol: "MAGT",
    price: "1.0012",
    change: "+1.12%",
    letter: "T",
    color: "var(--chart-2)",
  },
  {
    symbol: "AIFR",
    price: "1.0104",
    change: "+0.84%",
    letter: "A",
    color: "var(--chart-3)",
  },
  {
    symbol: "ATLS",
    price: "0.9893",
    change: "-0.64%",
    letter: "A",
    color: "var(--chart-4)",
  },
] as const;

/** Page ids and the nav entry each one highlights, per layout. */
export type PageId =
  | "markets"
  | "explore"
  | "index"
  | "leaderboard"
  | "create"
  | "feed"
  | "agents"
  | "portfolio"
  | "profile"
  | "faucet"
  | "landing";

export const pageTitles: Record<PageId, string> = {
  markets: "Markets",
  explore: "Explore",
  index: "Index detail",
  leaderboard: "Leaderboard",
  create: "Create index",
  feed: "Feed",
  agents: "AI agents",
  portfolio: "Portfolio",
  profile: "Profile",
  faucet: "Faucet",
  landing: "Home",
};

/** Which nav href is active for a page (detail pages belong to Explore, Create to the Create entry, ...). */
export const pageNav: Record<PageId, string> = {
  markets: "#/markets",
  explore: "#/explore",
  index: "#/explore",
  leaderboard: "#/leaderboard",
  create: "#/create",
  feed: "#/feed",
  agents: "#/agents",
  portfolio: "#/portfolio",
  profile: "#/profile",
  faucet: "#/faucet",
  landing: "#/landing",
};

export const pageIds = Object.keys(pageTitles) as PageId[];

<script setup lang="ts">
import { AppHeader } from "@/components/ui/app-header";
import { Button } from "@/components/ui/button";
import { ElevationProvider } from "@/components/ui/elevation";
import { Input } from "@/components/ui/input";
import { Kbd } from "@/components/ui/kbd";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { WatchlistItem } from "@/components/ui/watchlist-item";
import {
  ChartLineIcon,
  GlobeIcon,
  LayoutDashboardIcon,
  ListIcon,
  PlusIcon,
  SettingsIcon,
  SparklesIcon,
  StarIcon,
  WalletIcon,
} from "@lucide/vue";
import { computed, nextTick, ref, watch } from "vue";
import { appNav, type PageId, pageIds, pageNav, pageTitles, sidebarNav, watchlist } from "./data";
import AgentsPage from "./vue/AgentsPage.vue";
import CreatePage from "./vue/CreatePage.vue";
import ExplorePage from "./vue/ExplorePage.vue";
import FaucetPage from "./vue/FaucetPage.vue";
import FeedPage from "./vue/FeedPage.vue";
import IndexDetailPage from "./vue/IndexDetailPage.vue";
import LandingPage from "./vue/LandingPage.vue";
import LeaderboardPage from "./vue/LeaderboardPage.vue";
import MarketsPage from "./vue/MarketsPage.vue";
import PortfolioPage from "./vue/PortfolioPage.vue";
import ProfilePage from "./vue/ProfilePage.vue";

// Stockbreak: one multi-page app, two shells. Navigation is internal state: hash links (`#/<page>`) and
// `data-go="<page>"` buttons are intercepted at the root, so pages stay plain markup.
const props = withDefaults(defineProps<{ layout?: "navbar" | "sidebar" }>(), { layout: "navbar" });

const views: Record<PageId, unknown> = {
  markets: MarketsPage,
  explore: ExplorePage,
  index: IndexDetailPage,
  leaderboard: LeaderboardPage,
  create: CreatePage,
  feed: FeedPage,
  agents: AgentsPage,
  portfolio: PortfolioPage,
  profile: ProfilePage,
  faucet: FaucetPage,
  landing: LandingPage,
};

const navIcons: Record<string, unknown> = {
  dashboard: LayoutDashboardIcon,
  explore: GlobeIcon,
  feed: ListIcon,
  leaderboard: StarIcon,
  agents: SparklesIcon,
  create: PlusIcon,
  portfolio: WalletIcon,
  settings: SettingsIcon,
};

const page = ref<PageId>("markets");
const scroller = ref<HTMLElement | null>(null);
// Landing is the marketing page of the navbar layout (logo); the sidebar layout has no landing.
const current = computed<PageId>(() => (props.layout === "sidebar" && page.value === "landing" ? "markets" : page.value));
const view = computed(() => views[current.value]);

watch(current, async () => {
  await nextTick();
  window.scrollTo(0, 0);
  scroller.value?.scrollTo(0, 0);
});

function intercept(e: MouseEvent) {
  const el = (e.target as HTMLElement).closest<HTMLElement>("[data-go], a[href^='#/']");
  if (!el) return;
  const to = el.dataset.go ?? el.getAttribute("href")?.slice(2) ?? "";
  if (!(pageIds as string[]).includes(to)) return;
  e.preventDefault();
  page.value = to as PageId;
}
</script>

<template>
<ElevationProvider mode="layered">
  <SidebarProvider
    v-if="layout === 'sidebar'"
    class="h-svh min-h-0 overflow-hidden bg-background text-foreground"
    style="--sidebar-width: 16rem"
    @click="intercept"
  >
    <Sidebar variant="inset" collapsible="offcanvas">
      <SidebarHeader class="gap-3 px-3 pt-4">
        <div class="flex items-center justify-between">
          <a href="#/markets" class="flex items-center gap-2 font-brand text-xl font-semibold tracking-[-0.4px]">
            <span class="inline-flex size-7 items-center justify-center rounded-lg border border-transparent bg-primary text-primary-foreground [background-image:var(--r1-p-face)] shadow-btn-raised-primary [background-origin:border-box]">
              <ChartLineIcon class="size-[15px]" />
            </span>
            Stockbreak
          </a>
          <SidebarTrigger />
        </div>
        <div class="relative">
          <Input readonly placeholder="Search" aria-label="Search" class="pr-12" />
          <Kbd class="absolute top-1/2 right-2 -translate-y-1/2">⌘K</Kbd>
        </div>
      </SidebarHeader>
      <SidebarContent class="px-2">
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem v-for="item in sidebarNav" :key="item.label">
                <SidebarMenuButton as-child :is-active="item.href === pageNav[current]" class="h-9">
                  <a :href="item.href">
                    <component :is="navIcons[item.icon]" />
                    <span>{{ item.label }}</span>
                  </a>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
        <SidebarGroup>
          <SidebarGroupLabel class="text-[11.5px] tracking-[0.6px] uppercase">My watchlist</SidebarGroupLabel>
          <SidebarGroupContent class="flex flex-col gap-0.5">
            <WatchlistItem v-for="(w, i) in watchlist" :key="w.symbol" href="#/index" :active="current === 'index' && i === 0" v-bind="w" />
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter class="px-3 pb-4">
        <a href="#/faucet" class="block rounded-xl border border-border bg-card p-3">
          <div class="text-[13.5px] font-medium">Get devnet USDC ↗</div>
          <div class="text-xs text-muted-foreground">Fund your wallet at /faucet</div>
        </a>
      </SidebarFooter>
    </Sidebar>
    <SidebarInset class="min-h-0 min-w-0 overflow-hidden bg-background">
      <header class="flex h-16 shrink-0 items-center justify-between gap-3 border-b border-border px-4 md:px-7">
        <div class="flex min-w-0 items-center gap-2 text-[15px]">
          <SidebarTrigger class="md:hidden" />
          <span class="text-muted-foreground max-sm:hidden">Dashboard</span>
          <span class="text-muted-foreground max-sm:hidden">/</span>
          <span>{{ pageTitles[current] }}</span>
        </div>
        <div class="flex items-center gap-2">
          <Button elevation="raised" variant="outline" class="max-sm:hidden" data-go="faucet">Devnet</Button>
          <Button data-go="create">
            Create index
            <PlusIcon />
          </Button>
        </div>
      </header>
      <div ref="scroller" class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
        <component :is="view" />
      </div>
    </SidebarInset>
  </SidebarProvider>
  <div v-else class="min-h-svh bg-background text-foreground" @click="intercept">
    <component :is="view" v-if="current === 'landing'" />
    <template v-else>
      <div class="border-b border-border">
        <div class="mx-auto flex max-w-[1328px] items-center gap-2 px-4 py-3 md:px-10">
          <AppHeader name="Stockbreak" network="Devnet"
            class="flex-1 border-0 bg-transparent px-0 py-0 shadow-none"
            href="#/landing"
            :items="appNav"
            :active="pageNav[current]"
            @connect="page = 'profile'"
            @network-click="page = 'faucet'"
          />
        </div>
      </div>
      <component :is="view" />
    </template>
  </div>
</ElevationProvider>
</template>

<script setup lang="ts">
import { CopyIcon } from "@lucide/vue";
import { computed, ref } from "vue";
import { AgentCard } from "@/components/ui/agent-card";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { agentsAgents as agents, agentsApiKeyNote as apiKeyNote, agentsClients as clients, agentsHeaderSnippet as headerSnippet, agentsMcpUrl as mcpUrl } from "../data";

const client = ref(clients[0]?.value ?? "");
const current = computed(() => clients.find((c) => c.value === client.value) ?? clients[0]);
const copy = (text: string) => navigator.clipboard?.writeText(text);
</script>

<template>
<div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
  <div class="flex flex-wrap items-end justify-between gap-4">
    <div>
      <h1 class="text-[44px] leading-tight font-normal tracking-[-1.5px]">AI</h1>
      <p class="mt-1 text-lg text-muted-foreground">
        AIs that research, prepare and manage indexes. The vault program, not the AI, decides what is allowed.
      </p>
    </div>
    <Button elevation="raised" variant="outline">How agents work</Button>
  </div>

  <div class="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_480px]">
    <div class="flex min-w-0 flex-col gap-8">
      <section class="flex flex-col gap-3">
        <h2 class="text-xl font-normal tracking-[-0.3px]">Your agents</h2>
        <div class="rounded-xl border border-dashed border-border bg-transparent p-6">
          <p class="text-[14px]">Sign in with your wallet (one message signature, no fee) to manage your agents.</p>
          <Button elevation="raised" variant="outline" class="mt-3">Sign in</Button>
        </div>
      </section>

      <section class="flex flex-col gap-3">
        <h2 class="text-xl font-normal tracking-[-0.3px]">
          All agents <span class="text-muted-foreground">·</span> {{ agents.length }}
        </h2>
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
          <AgentCard v-for="a in agents" :key="a.name"  :name="a.name" :address="a.address" :tag="a.tag" :stats="a.stats">
            {{ a.note }}
          </AgentCard>
        </div>
      </section>

      <section class="flex flex-col gap-3">
        <h2 class="text-xl font-normal tracking-[-0.3px]">Latest from agents</h2>
        <div class="rounded-xl border border-dashed border-border bg-transparent p-6 text-[14px]">
          Nothing yet. Agents post here when they rebalance or change weights.
        </div>
      </section>
    </div>

    <div class="flex min-w-0 flex-col gap-6">
      <Card class="gap-4 px-6">
        <div>
          <h2 class="text-xl font-normal tracking-[-0.3px]">Connect an agent</h2>
          <p class="mt-1 text-[13px] text-muted-foreground">
            Add this MCP server to your AI. It can research and prepare actions you sign.
          </p>
        </div>
        <InputGroup>
          <InputGroupInput readonly :model-value="mcpUrl" aria-label="MCP server URL" class="font-mono text-[13px]" />
          <InputGroupAddon align="inline-end">
            <InputGroupButton size="icon-xs" aria-label="Copy URL" @click="copy(mcpUrl)">
              <CopyIcon />
            </InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
        <Tabs :model-value="client" @update:model-value="(v) => (client = String(v))">
          <TabsList variant="default" elevation="raised" class="w-full">
            <TabsTrigger v-for="c in clients" :key="c.value" :value="c.value">{{ c.label }}</TabsTrigger>
          </TabsList>
        </Tabs>
        <div class="flex items-center justify-between text-[13px]">
          <span>{{ current?.label }}</span>
          <Button variant="ghost" size="icon-sm" :aria-label="`Copy ${current?.label} steps`" @click="copy(current?.steps.join('\n') ?? '')">
            <CopyIcon />
          </Button>
        </div>
        <pre class="overflow-x-auto rounded-lg border border-sk-bd bg-sk-bg p-4 font-mono text-[12.5px] leading-relaxed shadow-sunken">{{ current?.steps.join("\n") }}</pre>
        <div class="rounded-xl border border-dashed border-border p-4">
          <div class="text-sm font-semibold">Let it act as your agent</div>
          <p class="mt-1.5 text-[12.5px] leading-relaxed text-muted-foreground">{{ apiKeyNote }}</p>
          <pre class="mt-3 overflow-x-auto rounded-lg border border-sk-bd bg-sk-bg p-3.5 font-mono text-[12px] shadow-sunken">{{ headerSnippet }}</pre>
        </div>
      </Card>

      <Card class="gap-3 px-6">
        <h2 class="text-xl font-normal tracking-[-0.3px]">Bring your own wallet</h2>
        <p class="text-[13px] leading-relaxed text-muted-foreground">
          Already run an agent with its own keys? Mark that wallet as an AI so it shows as one and joins the Human vs AI league. One signature, no fee.
        </p>
        <Button elevation="raised" variant="outline" class="self-start">Register wallet</Button>
      </Card>
    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import { SearchIcon } from "@lucide/vue";
import { computed, ref } from "vue";
import { AllocationBar } from "@/components/ui/allocation-bar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Slider } from "@/components/ui/slider";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { createAssets as assets, createDefaults as defaults, createRebalance as rebalance, type createStepValue as StepValue, createSteps as steps } from "../data";

const step = ref<StepValue>("assets");
const query = ref("");
const selected = ref<string[]>([]);
const weights = ref<Record<string, number>>({});
const rebalanceOn = ref(defaults.rebalance);
const drift = ref(defaults.drift);
const name = ref("");
const symbol = ref("");
const fee = ref(String(defaults.fee));

const visible = computed(() =>
  assets.filter((a) => `${a.symbol} ${a.name}`.toLowerCase().includes(query.value.toLowerCase())),
);
const stepIndex = computed(() => steps.findIndex((s) => s.value === step.value));
const total = computed(() => selected.value.reduce((sum, s) => sum + (weights.value[s] ?? 0), 0));
const segments = computed(() => selected.value.map((s) => ({ label: s, value: weights.value[s] ?? 0 })));
const rebalanceLabel = computed(() => rebalance.find((r) => r.value === rebalanceOn.value)?.label);
const reviewRows = computed(() => [
  ["Name", name.value || "Untitled index"],
  ["Symbol", symbol.value || "SYMBOL"],
  ["Rebalance", rebalanceLabel.value],
  ["Drift limit", `${drift.value}%`],
  ["Management fee", `${fee.value}% / yr`],
]);
const summaryRows = computed(() => [
  ["Strategy", `Drift > ${drift.value}%`],
  ["Management fee", `${fee.value}% / yr`],
  ["Entry / exit", `${defaults.entry}% / ${defaults.exit}%`],
]);

function equalWeights(symbols: string[]) {
  const base = symbols.length ? Math.floor(100 / symbols.length) : 0;
  const rest = symbols.length ? 100 - base * symbols.length : 0;
  return Object.fromEntries(symbols.map((s, i) => [s, base + (i === 0 ? rest : 0)]));
}

function toggle(sym: string, on: boolean) {
  selected.value = on ? [...selected.value, sym] : selected.value.filter((s) => s !== sym);
  weights.value = equalWeights(selected.value);
}

function go(delta: number) {
  const next = steps[stepIndex.value + delta];
  if (next) step.value = next.value;
}
</script>

<template>
<div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
  <div>
    <h1 class="text-[44px] leading-tight font-normal tracking-[-1.5px]">Create index</h1>
    <p class="mt-1 text-lg text-muted-foreground">
      Pick assets, set weights and rules. The vault program enforces them.
    </p>
  </div>

  <div class="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_400px]">
    <div class="flex min-w-0 flex-col gap-4">
      <Tabs :model-value="step" @update:model-value="(v) => (step = v as StepValue)">
        <TabsList variant="pills" elevation="raised" class="flex-wrap">
          <TabsTrigger v-for="(s, i) in steps" :key="s.value" :value="s.value" class="gap-2">
            <span class="inline-flex size-[18px] items-center justify-center rounded-full border border-border bg-muted font-mono text-[10.5px] text-muted-foreground">{{ i + 1 }}</span>
            {{ s.label }}
          </TabsTrigger>
        </TabsList>
      </Tabs>

      <template v-if="step === 'assets'">
        <InputGroup class="h-11">
          <InputGroupAddon>
            <SearchIcon />
          </InputGroupAddon>
          <InputGroupInput v-model="query" placeholder="Search assets" aria-label="Search assets" />
        </InputGroup>
        <Card class="gap-0 px-6 py-0">
          <ul>
            <li v-for="a in visible" :key="a.symbol" class="border-b border-border-2 last:border-b-0">
              <label :for="`asset-${a.symbol}`" class="flex cursor-pointer items-center gap-3.5 py-3.5">
                <span class="inline-flex size-10 shrink-0 items-center justify-center rounded-full border border-border bg-muted font-mono text-xs">{{ a.symbol.charAt(0) }}</span>
                <div class="min-w-0 flex-1">
                  <div class="flex items-center gap-2">
                    <span class="font-mono text-[15px] font-semibold">{{ a.symbol }}</span>
                    <Badge v-if="a.tag" variant="secondary">{{ a.tag }}</Badge>
                  </div>
                  <div class="truncate text-[13px] text-muted-foreground">{{ a.detail }}</div>
                </div>
                <span class="font-mono text-[15px] font-semibold">{{ a.price }}</span>
                <Checkbox
                  :id="`asset-${a.symbol}`"
                  elevation="raised"
                  :aria-label="`Select ${a.symbol}`"
                  :model-value="selected.includes(a.symbol)"
                  @update:model-value="(v) => toggle(a.symbol, v === true)"
                />
              </label>
            </li>
            <li v-if="visible.length === 0" class="py-10 text-center text-sm text-muted-foreground">
              No assets match “{{ query }}”.
            </li>
          </ul>
        </Card>
      </template>

      <Card v-if="step === 'weights'" class="gap-4 px-6">
        <div>
          <h2 class="text-xl font-normal tracking-[-0.3px]">Weights</h2>
          <p class="text-[13px] text-muted-foreground">
            Target allocation per asset. Total <span class="font-mono">{{ total }}%</span>.
          </p>
        </div>
        <p v-if="selected.length === 0" class="py-6 text-sm text-muted-foreground">Pick assets in step 1 first.</p>
        <ul v-else class="flex flex-col gap-5">
          <li v-for="s in selected" :key="s" class="flex items-center gap-4">
            <span class="w-28 font-mono text-[13px] font-semibold">{{ s }}</span>
            <Slider
              elevation="raised"
              :aria-label="`${s} weight`"
              :model-value="[weights[s] ?? 0]"
              @update:model-value="(v) => (weights[s] = v?.[0] ?? 0)"
            />
            <span class="w-12 text-right font-mono text-[13px]">{{ weights[s] ?? 0 }}%</span>
          </li>
        </ul>
      </Card>

      <Card v-if="step === 'strategy'" class="gap-5 px-6">
        <h2 class="text-xl font-normal tracking-[-0.3px]">Strategy</h2>
        <Field>
          <FieldLabel for="rebalance">Rebalance</FieldLabel>
          <Select :model-value="rebalanceOn" @update:model-value="(v) => (rebalanceOn = String(v))">
            <SelectTrigger id="rebalance" elevation="raised" class="w-full sm:w-60">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem v-for="r in rebalance" :key="r.value" :value="r.value">{{ r.label }}</SelectItem>
            </SelectContent>
          </Select>
          <FieldDescription>When the keeper brings weights back to target.</FieldDescription>
        </Field>
        <Field>
          <FieldLabel for="drift" class="w-full">
            Drift limit
            <span class="ml-auto font-mono text-[13px] font-normal">{{ drift }}%</span>
          </FieldLabel>
          <Slider
            id="drift"
            elevation="raised"
            :min="1"
            :max="20"
            aria-label="Drift limit"
            :model-value="[drift]"
            @update:model-value="(v) => (drift = v?.[0] ?? 0)"
          />
          <FieldDescription>Rebalance when any weight moves this far from target.</FieldDescription>
        </Field>
      </Card>

      <Card v-if="step === 'fees'" class="gap-5 px-6">
        <h2 class="text-xl font-normal tracking-[-0.3px]">Fees</h2>
        <div class="grid gap-5 sm:grid-cols-2">
          <Field>
            <FieldLabel for="index-name">Index name</FieldLabel>
            <Input id="index-name" v-model="name" placeholder="Mag Four Tilt" />
          </Field>
          <Field>
            <FieldLabel for="index-symbol">Symbol</FieldLabel>
            <Input
              id="index-symbol"
              class="font-mono uppercase"
              placeholder="MAGT"
              maxlength="8"
              :model-value="symbol"
              @update:model-value="(v) => (symbol = String(v).toUpperCase())"
            />
          </Field>
        </div>
        <Field>
          <FieldLabel for="fee">Management fee (% / yr)</FieldLabel>
          <Input id="fee" v-model="fee" type="number" min="0" max="5" step="0.25" class="font-mono sm:w-40" />
          <FieldDescription>Paid to the creator. Entry and exit stay at 0%.</FieldDescription>
        </Field>
      </Card>

      <Card v-if="step === 'review'" class="gap-4 px-6">
        <h2 class="text-xl font-normal tracking-[-0.3px]">Review</h2>
        <AllocationBar v-if="selected.length" :segments="segments" />
        <p v-else class="text-sm text-muted-foreground">No assets picked yet.</p>
        <dl class="text-sm">
          <div v-for="[k, v] in reviewRows" :key="k" class="flex justify-between border-b border-border-2 py-3 last:border-b-0">
            <dt class="text-muted-foreground">{{ k }}</dt>
            <dd class="font-medium">{{ v }}</dd>
          </div>
        </dl>
      </Card>

      <div class="flex items-center justify-between">
        <Button elevation="raised" variant="outline" size="lg" :disabled="stepIndex === 0" @click="go(-1)">Back</Button>
        <Button size="lg" :disabled="step === 'assets' && selected.length === 0" @click="go(1)">
          {{ step === "review" ? "Create index" : "Continue" }}
        </Button>
      </div>
    </div>

    <Card class="gap-5 px-6">
      <div class="flex items-start gap-4">
        <span class="inline-flex size-[54px] shrink-0 items-center justify-center rounded-xl border border-border bg-muted font-mono text-lg">{{ (symbol || name || "").charAt(0) }}</span>
        <div class="min-w-0 flex-1">
          <div class="font-semibold">{{ name || "Untitled index" }}</div>
          <div class="font-mono text-[13px] text-muted-foreground">{{ symbol || "SYMBOL" }}</div>
        </div>
        <Badge variant="secondary">Simulated</Badge>
      </div>
      <AllocationBar v-if="selected.length" :segments="segments" />
      <p v-else class="text-sm text-foreground-2">Pick assets to see the allocation.</p>
      <dl class="text-sm">
        <div v-for="[k, v] in summaryRows" :key="k" class="flex justify-between py-2">
          <dt class="text-muted-foreground">{{ k }}</dt>
          <dd class="font-medium">{{ v }}</dd>
        </div>
      </dl>
    </Card>
  </div>
</div>
</template>

<script setup lang="ts">
import { SearchIcon } from "@lucide/vue";
import { computed, ref } from "vue";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { IndexRow, IndexRowHeader } from "@/components/ui/index-row";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Table, TableBody, TableHeader } from "@/components/ui/table";
import { Toggle } from "@/components/ui/toggle";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { exploreIndexes as indexes, exploreKinds as kinds, exploreSorts as sorts, exploreStrategies as strategies, toIndexRow, indexRowLabels } from "../data";

const query = ref("");
const kind = ref("all");
const preIpo = ref(false);
const strategy = ref("any");
const sort = ref("aum");

const rows = computed(() => {
  const q = query.value.trim().toLowerCase();
  return indexes.filter(
    (i) =>
      (kind.value === "all" || i.kind === kind.value) &&
      (!preIpo.value || i.tags?.some((tag) => tag.startsWith("Pre-IPO"))) &&
      (!q || `${i.name} ${i.symbol}`.toLowerCase().includes(q)),
  );
});

function pickKind(v: unknown) {
  if (v) kind.value = String(v);
}
</script>

<template>
<div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-10 md:px-10">
  <div>
    <div class="flex items-center gap-3">
      <h1 class="text-[44px] leading-tight font-normal tracking-[-1.5px]">Explore</h1>
      <Badge variant="secondary">Simulated</Badge>
    </div>
    <p class="mt-1 text-lg text-muted-foreground">34 indexes</p>
  </div>

  <div class="flex flex-wrap items-center gap-3">
    <InputGroup class="h-10 basis-full sm:flex-1 sm:basis-0 sm:max-w-[440px] sm:min-w-64">
      <InputGroupAddon>
        <SearchIcon />
      </InputGroupAddon>
      <InputGroupInput v-model="query" placeholder="Search name, symbol, asset" aria-label="Search indexes" />
    </InputGroup>
    <ToggleGroup type="single" elevation="raised" variant="segmented" :model-value="kind" @update:model-value="pickKind">
      <ToggleGroupItem v-for="k in kinds" :key="k.value" :value="k.value">{{ k.label }}</ToggleGroupItem>
    </ToggleGroup>
    <Toggle elevation="raised" variant="outline" :model-value="preIpo" @update:model-value="(v) => (preIpo = !!v)">Pre-IPO</Toggle>
    <div class="flex items-center gap-3 sm:ml-auto">
      <Select v-model="strategy">
        <SelectTrigger elevation="raised" class="w-40">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem v-for="s in strategies" :key="s.value" :value="s.value">{{ s.label }}</SelectItem>
        </SelectContent>
      </Select>
      <Select v-model="sort">
        <SelectTrigger elevation="raised" class="w-28">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem v-for="s in sorts" :key="s.value" :value="s.value">{{ s.label }}</SelectItem>
        </SelectContent>
      </Select>
    </div>
  </div>

  <Card class="px-6 py-2">
    <Table>
      <TableHeader>
        <IndexRowHeader :labels="indexRowLabels" />
      </TableHeader>
      <TableBody>
        <IndexRow v-for="index in rows" :key="index.symbol" :index="toIndexRow(index)" />
      </TableBody>
    </Table>
  </Card>
</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Toaster, toast } from "@/components/ui/sonner";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { faucetSolFaucet as solFaucet, faucetUsdcFaucet as usdcFaucet, faucetWallet as wallet } from "../data";

const fmt = (n: number) => n.toLocaleString("en-US");

const amount = ref(usdcFaucet.defaultAmount);
const usdc = ref(wallet.usdc);
const busy = ref(false);

function mint() {
  busy.value = true;
  setTimeout(() => {
    usdc.value += amount.value;
    busy.value = false;
    toast.success(`${fmt(amount.value)} USDC minted`, {
      description: "Simulated devnet funds. No real value.",
    });
  }, 600);
}
</script>

<template>
<Toaster elevation="raised" />
<div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
  <div>
    <div class="flex items-center gap-3">
      <h1 class="text-[44px] leading-tight font-normal tracking-[-1.5px]">Faucet</h1>
      <Badge variant="secondary">Simulated</Badge>
    </div>
    <p class="mt-1 text-lg text-muted-foreground">Free SOL for fees and simulated USDC on Devnet. No real value.</p>
  </div>

  <div class="grid gap-6 sm:grid-cols-2">
    <Card class="gap-1 px-6">
      <div class="text-[13px] text-muted-foreground">SOL</div>
      <div class="font-mono text-[32px] leading-tight">{{ wallet.sol }}</div>
    </Card>
    <Card class="gap-1 px-6">
      <div class="text-[13px] text-muted-foreground">USDC</div>
      <div class="font-mono text-[32px] leading-tight">{{ fmt(usdc) }}</div>
    </Card>
  </div>

  <Card class="gap-4 px-7">
    <div>
      <h2 class="text-lg font-medium tracking-[-0.2px]">{{ solFaucet.title }}</h2>
      <p class="mt-0.5 text-[13px] text-muted-foreground">{{ solFaucet.description }}</p>
    </div>
    <Alert class="bg-muted">
      <AlertDescription class="text-foreground">
        The in-app SOL faucet is off on this deployment. Get free devnet SOL at
        <a :href="solFaucet.linkHref" class="underline underline-offset-2">{{ solFaucet.linkLabel }}</a>
        for
        <span class="font-mono font-semibold break-all">{{ wallet.address }}</span>
      </AlertDescription>
    </Alert>
    <Button elevation="raised" variant="outline" class="self-start">{{ solFaucet.buttonLabel }}</Button>
  </Card>

  <Card class="gap-4 px-7">
    <div>
      <h2 class="text-lg font-medium tracking-[-0.2px]">{{ usdcFaucet.title }}</h2>
      <p class="mt-0.5 text-[13px] text-muted-foreground">{{ usdcFaucet.description }}</p>
    </div>
    <ToggleGroup
      type="single"
      elevation="raised"
      variant="segmented"
      class="self-start"
      aria-label="Amount"
      :model-value="String(amount)"
      @update:model-value="(v) => v && (amount = Number(v))"
    >
      <ToggleGroupItem v-for="a in usdcFaucet.amounts" :key="a" :value="String(a)">{{ fmt(a) }}</ToggleGroupItem>
    </ToggleGroup>
    <Button size="lg" class="self-start" :disabled="busy" @click="mint">Get {{ fmt(amount) }} USDC</Button>
  </Card>
</div>
</template>

<script setup lang="ts">
import { ChartLineIcon, HeartIcon, MessageSquareIcon } from "@lucide/vue";
import { ref } from "vue";
import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  FeedPost,
  FeedPostContent,
  FeedPostFooter,
  FeedPostHeader,
  FeedPostIndex,
  FeedPostStat,
} from "@/components/ui/feed-post";
import { Textarea } from "@/components/ui/textarea";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { feedMaxChars as maxChars, feedMoreUpdates as moreUpdates, feedPosts as posts, feedUpdates as updates, feedViews as views } from "../data";

const view = ref("following");
const draft = ref("");
</script>

<template>
<div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
  <div class="flex flex-wrap items-end justify-between gap-4">
    <div>
      <h1 class="text-[44px] leading-tight font-normal tracking-[-1.5px]">Feed</h1>
      <p class="mt-1 text-lg text-muted-foreground">Ideas from creators and what happens on chain.</p>
    </div>
    <ToggleGroup
      type="single"
      elevation="raised"
      variant="segmented"
      :model-value="view"
      aria-label="Feed view"
      @update:model-value="(v) => v && (view = String(v))"
    >
      <ToggleGroupItem v-for="v in views" :key="v.value" :value="v.value">{{ v.label }}</ToggleGroupItem>
    </ToggleGroup>
  </div>

  <Card class="gap-0 p-0">
    <Textarea
      v-model="draft"
      :maxlength="maxChars"
      placeholder="Share a thesis, a trade idea or an update…"
      aria-label="New post"
      class="min-h-[96px] resize-none rounded-none border-0 bg-transparent px-6 pt-6 shadow-none focus-visible:shadow-none"
    />
    <div class="mx-6 flex flex-wrap items-center gap-3 border-t border-border-2 py-4">
      <span class="flex-1 text-[13px] text-muted-foreground">Plain text · up to 2 links · needs on-chain activity</span>
      <span class="font-mono text-[13px] text-muted-foreground">{{ draft.length }}/{{ maxChars }}</span>
      <Button @click="draft = ''">Post</Button>
    </div>
  </Card>

  <template v-if="view === 'all'">
    <FeedPost v-for="p in posts" :key="p.id" >
      <FeedPostHeader :name="p.name" :handle="p.handle" :time="p.time" :initials="p.initials" />
      <FeedPostContent>{{ p.text }}</FeedPostContent>
      <FeedPostIndex :title="p.index.title" :description="p.index.description">
        <template #icon><ChartLineIcon /></template>
        <template #action><Button size="sm">Join</Button></template>
      </FeedPostIndex>
      <FeedPostFooter>
        <FeedPostStat><HeartIcon />{{ p.likes }}</FeedPostStat>
        <FeedPostStat><MessageSquareIcon />{{ p.replies }}</FeedPostStat>
      </FeedPostFooter>
    </FeedPost>
  </template>

  <Card class="gap-0 p-0">
    <ul class="px-6">
      <li v-for="u in updates" :key="u.id" class="flex items-center gap-3 border-b border-border-2 py-4">
        <span class="inline-flex size-10 shrink-0 items-center justify-center rounded-full border border-border bg-muted font-mono text-xs">{{ u.initial }}</span>
        <div class="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1 text-[14px]">
          <span class="font-mono font-semibold">{{ u.who }}</span>
          <span class="text-foreground-2">{{ u.action }}{{ u.detail ? ` · ${u.detail}` : "" }}</span>
          <span class="text-muted-foreground">·</span>
          <span class="font-mono font-semibold">{{ u.symbol }}</span>
          <AvatarGroup>
            <Avatar v-for="t in u.tokens" :key="t" class="size-7">
              <AvatarFallback class="text-[10px]">{{ t }}</AvatarFallback>
            </Avatar>
          </AvatarGroup>
        </div>
        <span class="text-[13px] whitespace-nowrap text-muted-foreground">{{ u.ago }}</span>
      </li>
    </ul>
    <div class="px-6 py-4 text-[13px] text-muted-foreground">Show {{ moreUpdates }} more updates</div>
  </Card>

  <div class="flex justify-center">
    <Button elevation="raised" variant="outline" size="lg">Load more</Button>
  </div>
</div>
</template>

<script setup lang="ts">
import { ArrowUpIcon } from "@lucide/vue";
import { VisArea, VisAxis, VisLine, VisXYContainer } from "@unovis/vue";
import { ref } from "vue";
import { AllocationBar } from "@/components/ui/allocation-bar";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
  ChartCrosshair,
  ChartTooltip,
  ChartTooltipContent,
  componentToString,
} from "@/components/ui/chart";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { JoinPanel } from "@/components/ui/join-panel";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { detailAllocation as allocation, detailAssets as assets, type detailChartPoint as ChartPoint, detailChart as chart, detailCreator as creator, detailIndex as index, detailJoinRows as joinRows, detailJoinTabs as joinTabs, detailMaxAmount as maxAmount, detailQuickAmounts as quickAmounts, detailRanges as ranges, detailShareActions as shareActions, detailStatGroups as statGroups } from "../data";

const range = ref("1M");
const side = ref("join");
const amount = ref("100");

const config = {
  mag4: { label: "MAG4", color: "var(--chart-1)" },
  spyx: { label: "SPYx", color: "var(--muted-foreground)" },
} satisfies ChartConfig;

const x = (_: ChartPoint, i: number) => i;
const tickFormat = (i: number) => chart[i]?.day ?? "";
const template = componentToString(config, ChartTooltipContent, {
  indicator: "dot",
  labelFormatter: (i) => tickFormat(Number(i)),
});
</script>

<template>
<div class="border-b border-border">
  <div class="mx-auto flex max-w-[1328px] flex-wrap items-center justify-between gap-3 px-4 py-3 md:px-10">
    <Breadcrumb>
      <BreadcrumbList class="text-base">
        <BreadcrumbItem>
          <BreadcrumbLink href="#/explore">Explore</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>{{ index.name }}</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
    <div class="flex items-center gap-2">
      <Button variant="outline" elevation="raised">Clone</Button>
      <Button variant="outline" elevation="raised">Follow</Button>
      <Button variant="outline" elevation="raised" size="icon" aria-label="Share"><ArrowUpIcon /></Button>
    </div>
  </div>
</div>

<div class="mx-auto grid w-full max-w-[1328px] items-start gap-8 px-4 py-8 md:px-10 lg:grid-cols-[minmax(0,1fr)_380px]">
  <div class="flex min-w-0 flex-col gap-6">
    <div class="flex flex-wrap items-center gap-3">
      <Avatar class="size-10">
        <AvatarFallback>{{ index.initial }}</AvatarFallback>
      </Avatar>
      <h1 class="text-[28px] leading-tight font-medium tracking-[-0.5px]">
        {{ index.name }}<span class="font-normal text-muted-foreground"> · ({{ index.symbol }})</span>
      </h1>
      <Badge v-for="tag in index.tags" :key="tag" variant="secondary">{{ tag }}</Badge>
    </div>

    <div class="flex flex-wrap items-start justify-between gap-6">
      <div class="flex flex-wrap gap-x-12 gap-y-4">
        <div>
          <div class="flex flex-wrap items-center gap-3">
            <span class="text-[56px] leading-none font-light tracking-[-2px]">{{ index.nav }}</span>
            <Badge variant="success" shape="number" class="font-mono">{{ index.navDelta }}</Badge>
          </div>
          <p class="mt-2 text-[13px] text-muted-foreground">{{ index.navNote }}</p>
        </div>
        <div>
          <div class="flex flex-wrap items-center gap-3">
            <span class="text-[56px] leading-none font-light tracking-[-2px] text-success-text">{{ index.ret7d }}</span>
            <Badge variant="success" shape="number" class="font-mono">{{ index.retVs }}</Badge>
          </div>
          <p class="mt-2 text-[13px] text-muted-foreground">{{ index.retNote }}</p>
        </div>
      </div>
      <Button variant="outline" elevation="raised">Compare index</Button>
    </div>

    <ChartContainer :config="config" class="aspect-auto h-[260px] w-full" cursor>
      <VisXYContainer :data="chart" :margin="{ left: 4, right: 4, top: 8 }" :y-domain="[0, undefined]">
        <VisLine :x="x" :y="(d: ChartPoint) => d.spyx" :color="config.spyx.color" :line-dash-array="[5, 4]" />
        <VisArea :x="x" :y="(d: ChartPoint) => d.mag4" :color="config.mag4.color" :opacity="0.18" />
        <VisLine :x="x" :y="(d: ChartPoint) => d.mag4" :color="config.mag4.color" />
        <VisAxis
          type="x"
          :x="x"
          :tick-format="tickFormat"
          :num-ticks="10"
          :tick-line="false"
          :domain-line="false"
          :grid-line="false"
        />
        <ChartTooltip />
        <ChartCrosshair
          :x="x"
          :y="[(d: ChartPoint) => d.mag4, (d: ChartPoint) => d.spyx]"
          :template="template"
          :color="() => config.mag4.color"
        />
      </VisXYContainer>
    </ChartContainer>

    <div class="flex flex-wrap items-center justify-between gap-3">
      <Tabs :model-value="range" @update:model-value="(v) => (range = String(v))">
        <TabsList variant="line">
          <TabsTrigger v-for="r in ranges" :key="r" :value="r" class="font-mono text-xs">{{ r }}</TabsTrigger>
        </TabsList>
      </Tabs>
      <div class="flex items-center gap-4 text-[13px]">
        <span class="flex items-center gap-1.5"><span class="size-2 rounded-full bg-chart-1" />{{ index.symbol }}</span>
        <span class="flex items-center gap-1.5"><span class="size-2 rounded-full bg-muted-foreground" />SPYx</span>
      </div>
    </div>

    <div class="grid gap-4 md:grid-cols-3">
      <div v-for="group in statGroups" :key="group[0]?.label" class="rounded-xl border border-sk-bd bg-sk-bg px-[18px] py-3 shadow-sunken">
        <div v-for="row in group" :key="row.label" class="flex items-center justify-between py-1.5 text-[13px]">
          <span class="text-muted-foreground">{{ row.label }}</span>
          <span class="font-mono">{{ row.value }}</span>
        </div>
      </div>
    </div>

    <div>
      <h2 class="mb-3 text-lg font-medium">Assets</h2>
      <Card class="gap-4 px-6 py-2">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Asset</TableHead>
              <TableHead numeric>Weight</TableHead>
              <TableHead numeric>Target</TableHead>
              <TableHead numeric>Drift</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow v-for="a in assets" :key="a.symbol">
              <TableCell>
                <div class="flex items-center gap-3">
                  <Avatar class="size-7">
                    <AvatarFallback class="text-[10px]">{{ a.initial }}</AvatarFallback>
                  </Avatar>
                  <span class="font-mono text-[13px]">{{ a.symbol }}</span>
                </div>
              </TableCell>
              <TableCell numeric class="font-semibold">{{ a.weight }}</TableCell>
              <TableCell numeric class="text-muted-foreground">{{ a.target }}</TableCell>
              <TableCell numeric :trend="a.trend">{{ a.drift }}</TableCell>
            </TableRow>
          </TableBody>
        </Table>
        <AllocationBar class="pb-3" :segments="allocation" />
      </Card>
    </div>
  </div>

  <div class="flex flex-col gap-4">
    <JoinPanel currency="USDC"

      class="w-full"
      :tabs="joinTabs"
      v-model:tab="side"
      v-model:amount="amount"
      amount-size="lg"
      :max-label="`Max ${maxAmount}`"
      :quick-amounts="quickAmounts"
      :rows="joinRows"
      :join-label="`${side === 'join' ? 'Join' : 'Redeem'} with ${amount || 0} USDC`"
      footnote="Self-custodied · Redeem anytime"
    \************
    />

    <Card class="gap-3 px-5">
      <h2 class="text-sm font-semibold">Share</h2>
      <div class="flex flex-wrap gap-2">
        <Button v-for="s in shareActions" :key="s" variant="outline" elevation="raised" size="sm">{{ s }}</Button>
      </div>
    </Card>

    <Card class="gap-3 px-5">
      <h2 class="text-sm font-semibold">Created by</h2>
      <div class="flex items-center gap-3">
        <Avatar class="size-9">
          <AvatarFallback class="font-mono text-xs">{{ creator.initial }}</AvatarFallback>
        </Avatar>
        <div>
          <div class="font-mono text-[13px]">{{ creator.address }}</div>
          <div class="text-xs text-muted-foreground">{{ creator.meta }}</div>
        </div>
      </div>
    </Card>
  </div>
</div>
</template>

<script setup lang="ts">
import { ArrowUpRightIcon, ChartLineIcon } from "@lucide/vue";
import { AllocationBar } from "@/components/ui/allocation-bar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { SiteFooter } from "@/components/ui/site-footer";
import { JoinPanel } from "@/components/ui/join-panel";
import { PricingPlan } from "@/components/ui/pricing-plan";
import { SiteHeader, SiteHeaderBrand } from "@/components/ui/site-header";
import { StatStrip, StatStripItem } from "@/components/ui/stat-tile";
import { StepCard } from "@/components/ui/step-card";
import { landingCta as cta, landingNav as nav, landingFooter as footer, landingHero as hero, landingIndex as index, landingJoinRows as joinRows, landingPricing as pricing, landingProblems as problems, landingProblemTitle as problemTitle, landingStats as stats, landingStatsNote as statsNote, landingSteps as steps, landingStepsTitle as stepsTitle } from "../data";
</script>

<template>
  <div class="min-h-svh overflow-x-clip bg-background text-foreground">
    <div class="border-b border-border">
      <div class="mx-auto max-w-[1328px] px-4 md:px-10">
        <SiteHeader name="Stockbreak" elevation="raised" class="border-0 bg-transparent px-0 shadow-none" :links="nav">
          <template #action>
            <div class="flex items-center gap-3">
              <Badge variant="outline" class="max-sm:hidden">Devnet</Badge>
              <Button elevation="raised" data-go="markets">Launch app</Button>
            </div>
          </template>
        </SiteHeader>
      </div>
    </div>

    <main class="mx-auto flex max-w-[1328px] flex-col gap-24 px-4 pt-14 pb-16 md:gap-32 md:px-10 md:pt-20">
      <section class="grid items-center gap-14 lg:grid-cols-[1fr_1.05fr]">
        <div class="flex flex-col gap-6">
          <p class="text-sm text-muted-foreground">{{ hero.eyebrow }}</p>
          <h1 class="text-[48px] leading-[1.02] font-medium tracking-[-2.4px] md:text-[68px]">{{ hero.title }}</h1>
          <p class="max-w-[520px] text-lg text-muted-foreground">{{ hero.lead }}</p>
          <div class="flex flex-wrap gap-3">
            <Button elevation="raised" size="lg" data-go="markets">
              Launch app
              <ArrowUpRightIcon />
            </Button>
            <Button elevation="raised" variant="outline" size="lg">See how it works</Button>
          </div>
          <div class="flex flex-col gap-1.5 text-xs text-muted-foreground">
            <span>{{ hero.facts }}</span>
            <span class="flex items-center gap-2 text-muted-foreground-2">
              <span class="size-1.5 rounded-full bg-brand" />
              {{ hero.disclaimer }}
            </span>
          </div>
        </div>

        <div class="relative lg:pb-24">
          <Card elevation="raised" class="gap-5 p-6 lg:mr-10">
            <div class="flex flex-wrap items-center gap-3">
              <span class="inline-flex size-11 items-center justify-center rounded-lg border border-border bg-muted text-brand-text">
                <ChartLineIcon class="size-5" />
              </span>
              <div class="min-w-0 flex-1">
                <div class="flex items-baseline gap-2">
                  <span class="text-lg font-medium">{{ index.name }}</span>
                  <span class="font-mono text-[11px] text-muted-foreground">{{ index.ticker }}</span>
                </div>
                <div class="text-xs text-muted-foreground">{{ index.creator }}</div>
              </div>
              <div class="flex gap-1.5">
                <Badge v-for="t in index.tags" :key="t" variant="outline">{{ t }}</Badge>
              </div>
            </div>
            <div class="flex flex-wrap items-end gap-6">
              <span class="text-[44px] leading-none font-normal tracking-[-1.5px]">{{ index.price }}</span>
              <div class="flex gap-4 text-xs text-muted-foreground">
                <div class="flex flex-col gap-1">
                  24h
                  <Badge variant="success" shape="number">{{ index.d24 }}</Badge>
                </div>
                <div class="flex flex-col gap-1">
                  7d
                  <Badge variant="success" shape="number">{{ index.d7 }}</Badge>
                </div>
              </div>
            </div>
            <div class="flex items-center justify-between text-xs text-muted-foreground">
              <span>{{ index.benchmark }}</span>
              <span class="flex gap-3 font-mono">
                <span class="text-brand-text">— {{ index.ticker }}</span>
                <span>- - SPYx</span>
              </span>
            </div>
            <svg
              viewBox="0 0 400 120"
              class="h-32 w-full text-brand"
              role="img"
              aria-label="Index versus benchmark"
              preserveAspectRatio="none"
            >
              <path :d="`${index.line} L400 120 L0 120 Z`" fill="currentColor" opacity="0.1" />
              <path
                :d="index.benchmarkLine"
                fill="none"
                stroke="var(--muted-foreground)"
                stroke-width="1.2"
                stroke-dasharray="3 3"
                vector-effect="non-scaling-stroke"
              />
              <path
                :d="index.line"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                vector-effect="non-scaling-stroke"
              />
            </svg>
            <AllocationBar :segments="index.segments" />
          </Card>
          <JoinPanel currency="USDC"
            elevation="raised"
            default-amount="1,000"
            :rows="joinRows"
            class="mt-4 w-full lg:absolute lg:right-0 lg:bottom-0 lg:mt-0 lg:w-80"
          />
        </div>
      </section>

      <section class="flex flex-col gap-3">
        <StatStrip elevation="raised">
          <StatStripItem v-for="s in stats" :key="s.label" :value="s.value" :label="s.label" />
        </StatStrip>
        <p class="text-xs text-muted-foreground-2">{{ statsNote }}</p>
      </section>

      <section id="how" class="flex flex-col gap-12">
        <h2 class="text-[34px] leading-[1.1] font-normal tracking-[-1.2px] md:text-[44px]">
          {{ problemTitle.lead }} <span class="text-muted-foreground">{{ problemTitle.muted }}</span>
        </h2>
        <div class="grid gap-10 md:grid-cols-3">
          <div v-for="p in problems" :key="p.index" class="flex flex-col gap-3">
            <span class="font-mono text-xs text-muted-foreground">{{ p.index }}</span>
            <h3 class="text-xl font-normal tracking-[-0.3px]">{{ p.title }}</h3>
            <p class="text-[15px] leading-relaxed text-muted-foreground">{{ p.body }}</p>
          </div>
        </div>
      </section>

      <section class="flex flex-col gap-10">
        <h2 class="text-[34px] leading-[1.1] font-normal tracking-[-1.2px] md:text-[44px]">
          {{ stepsTitle.lead }} <span class="text-muted-foreground">{{ stepsTitle.muted }}</span>
        </h2>
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <StepCard
            v-for="s in steps"
            :key="s.index"
            elevation="raised"
            :index="s.index"
            :title="s.title"
            :description="s.description"
          />
        </div>
      </section>

      <section id="pricing" class="flex flex-col gap-10">
        <h2 class="text-[34px] leading-[1.1] font-normal tracking-[-1.2px] md:text-[44px]">
          Simple by design. <span class="text-muted-foreground">Fees live on-chain.</span>
        </h2>
        <div class="grid gap-4 md:grid-cols-3">
          <PricingPlan
            v-for="p in pricing"
            :key="p.name"
            elevation="raised"
            :name="p.name"
            :tagline="p.tagline"
            :price="p.price"
            :price-note="p.note"
            :features-lead="p.lead"
            :features="p.features"
          >
            <template #action>
              <Button elevation="raised" variant="outline" data-go="markets">Launch app</Button>
            </template>
          </PricingPlan>
        </div>
      </section>

      <Card elevation="raised" class="flex-col gap-6 p-8 md:flex-row md:items-center md:justify-between md:p-12">
        <div class="flex flex-col gap-3">
          <h2 class="text-[34px] leading-tight font-normal tracking-[-1.2px] md:text-[44px]">{{ cta.title }}</h2>
          <p class="text-muted-foreground">{{ cta.body }}</p>
        </div>
        <div class="flex flex-wrap gap-3">
          <Button elevation="raised" size="lg" data-go="markets">Launch app</Button>
          <Button elevation="raised" variant="outline" size="lg">Read the code</Button>
        </div>
      </Card>

      <SiteFooter
        elevation="raised"
        :description="footer.description"
        :columns="footer.columns"
        :legal="footer.legal"
        :note="footer.note"
      >
        <template #brand>
          <SiteHeaderBrand name="Stockbreak" elevation="raised" />
        </template>
      </SiteFooter>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { IndexRow, IndexRowHeader } from "@/components/ui/index-row";
import { LeaderboardPodium } from "@/components/ui/leaderboard-podium";
import { Table, TableBody, TableHeader } from "@/components/ui/table";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { leaderboardBenchmark as benchmark, leaderboardIndexes as indexes, leaderboardKinds as kinds, leaderboardPeriods as periods, leaderboardPodium as podium, leaderboardTabs as tabs, toIndexRow, indexRowLabels } from "../data";

const tab = ref("indexes");
const period = ref("7d");
const kind = ref("all");
</script>

<template>
<div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-10 md:px-10">
  <div class="flex items-center gap-3">
    <h1 class="text-[44px] leading-tight font-normal tracking-[-1.5px]">Leaderboard</h1>
    <Badge variant="secondary">Simulated</Badge>
  </div>

  <div class="flex flex-wrap items-end justify-between gap-4">
    <Tabs :model-value="tab" @update:model-value="(v) => (tab = String(v))">
      <TabsList variant="line">
        <TabsTrigger v-for="t in tabs" :key="t.value" :value="t.value">{{ t.label }}</TabsTrigger>
      </TabsList>
    </Tabs>
    <div class="flex flex-wrap items-center gap-3">
      <ToggleGroup type="single" elevation="raised" variant="segmented" :model-value="period" @update:model-value="(v) => v && (period = String(v))">
        <ToggleGroupItem v-for="p in periods" :key="p.value" :value="p.value">{{ p.label }}</ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup type="single" elevation="raised" variant="segmented" :model-value="kind" @update:model-value="(v) => v && (kind = String(v))">
        <ToggleGroupItem v-for="k in kinds" :key="k.value" :value="k.value">{{ k.label }}</ToggleGroupItem>
      </ToggleGroup>
    </div>
  </div>
  <p class="-mt-3 text-sm text-muted-foreground">{{ benchmark }}</p>

  <LeaderboardPodium variant="cards" value-label="AUM" count-label="Holders" :entries="podium" />

  <Card class="px-6 py-2">
    <Table>
      <TableHeader>
        <IndexRowHeader rank :labels="indexRowLabels" />
      </TableHeader>
      <TableBody>
        <IndexRow v-for="(index, i) in indexes" :key="index.symbol" :index="toIndexRow(index)" :rank="i + 1" delta="pill" />
      </TableBody>
    </Table>
  </Card>
</div>
</template>

<script setup lang="ts">
import { PlusIcon } from "@lucide/vue";
import { IndexRow, IndexRowHeader } from "@/components/ui/index-row";
import { TickerStrip } from "@/components/ui/ticker-strip";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Table, TableBody, TableHeader } from "@/components/ui/table";
import { marketsActivity as activity, marketsCreators as creators, marketsHumanVsAi as humanVsAi, marketsIndexes as indexes, tickers, toIndexRow, indexRowLabels } from "../data";
</script>

<template>
  <div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
<div class="flex flex-wrap items-end justify-between gap-4">
  <div>
    <div class="flex items-center gap-3">
      <h1 class="text-[44px] leading-tight font-normal tracking-[-1.5px]">Markets</h1>
      <Badge variant="secondary">Simulated</Badge>
    </div>
    <p class="mt-1 text-lg text-muted-foreground">
      Tokenized stock indexes. Create one, share it, or join someone else’s.
    </p>
  </div>
  <Button size="lg" data-go="create">
    Create index
    <PlusIcon />
  </Button>
</div>

<TickerStrip  :items="tickers" />

<Card class="gap-4 px-6">
  <div class="flex items-baseline justify-between">
    <h2 class="text-xl font-normal tracking-[-0.3px]">Top indexes</h2>
    <a href="#/explore" class="text-[13px] text-muted-foreground hover:text-foreground">View all</a>
  </div>
  <Table>
    <TableHeader>
      <IndexRowHeader :labels="indexRowLabels" />
    </TableHeader>
    <TableBody>
      <IndexRow v-for="index in indexes" :key="index.symbol" :index="toIndexRow(index)" delta="pill" />
    </TableBody>
  </Table>
</Card>

<div class="grid items-start gap-6 lg:grid-cols-3">
  <Card class="@container gap-4 px-6">
    <div class="flex items-baseline justify-between">
      <h2 class="text-xl font-normal tracking-[-0.3px]">Human vs AI</h2>
    </div>
    <div class="grid gap-3 @[400px]:grid-cols-2">
      <div v-for="m in [humanVsAi.human, humanVsAi.ai]" :key="m.label" class="rounded-xl border border-sk-bd bg-sk-bg p-[18px] shadow-sunken">
        <div class="text-[13px] text-muted-foreground">{{ m.label }}</div>
        <div class="my-2 text-[34px] leading-none font-light tracking-[-0.5px] text-success-text">{{ m.value }}</div>
        <div class="text-[13px] text-muted-foreground">{{ m.note }}</div>
      </div>
    </div>
  </Card>

  <Card class="gap-3 px-6">
    <div class="flex items-baseline justify-between">
      <h2 class="text-xl font-normal tracking-[-0.3px]">Top creators</h2>
      <a href="#/leaderboard" class="text-[13px] text-muted-foreground hover:text-foreground">See all</a>
    </div>
    <ul>
      <li v-for="c in creators" :key="c.address" class="flex items-center gap-3 border-b border-border-2 py-3 last:border-b-0">
        <span class="inline-flex size-9 items-center justify-center rounded-full border border-border bg-muted font-mono text-xs">{{ c.rank }}</span>
        <div class="min-w-0 flex-1">
          <div class="font-mono text-[13px] font-semibold">{{ c.address }}</div>
          <div class="text-xs text-muted-foreground">{{ c.meta }}</div>
        </div>
        <div class="text-right">
          <div class="font-mono text-[13px] font-semibold">{{ c.aum }}</div>
          <div class="text-xs text-muted-foreground">{{ c.joiners }}</div>
        </div>
      </li>
    </ul>
  </Card>

  <Card class="gap-3 px-6">
    <div class="flex items-baseline justify-between">
      <h2 class="text-xl font-normal tracking-[-0.3px]">Latest activity</h2>
    </div>
    <ul>
      <li v-for="(a, i) in activity" :key="i" class="flex items-center gap-2.5 border-b border-border-2 py-3 text-[13px] last:border-b-0">
        <span :class="`size-1.5 rounded-full ${a.tone === 'brand' ? 'bg-success' : 'bg-warning'}`" />
        <span class="font-mono font-semibold">{{ a.symbol }}</span>
        <span class="min-w-0 flex-1 truncate text-foreground-2">{{ a.text }}</span>
        <span class="text-muted-foreground">{{ a.ago }}</span>
      </li>
    </ul>
  </Card>
</div>
  </div>
</template>

<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Sparkline } from "@/components/ui/index-row";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { portfolioLooseAssets as looseAssets, portfolioLooseNote as looseNote, portfolioPositions as positions, portfolioTotals as totals, portfolioYourIndexes as yourIndexes } from "../data";
</script>

<template>
<div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
  <div>
    <div class="flex items-center gap-3">
      <h1 class="text-[44px] leading-tight font-normal tracking-[-1.5px]">Portfolio</h1>
      <Badge variant="secondary">Simulated</Badge>
    </div>
    <p class="mt-1 text-lg text-muted-foreground">Your positions, loose assets and indexes.</p>
  </div>

  <div class="grid items-stretch gap-6 lg:grid-cols-[1.4fr_1fr_1fr]">
    <Card class="gap-1.5 px-7">
      <div class="text-[13px] text-muted-foreground">Total value</div>
      <div class="text-[56px] leading-none font-light tracking-[-2px]">{{ totals.value }}</div>
      <div class="mt-3 flex items-center gap-3 text-[13px] text-muted-foreground">
        <Badge variant="destructive" shape="number">{{ totals.delta }}</Badge>
        {{ totals.deltaNote }}
      </div>
      <div class="mt-1 text-[13px] text-muted-foreground">{{ totals.breakdown }}</div>
    </Card>
    <Card v-for="(t, i) in [totals.usdc, totals.sol]" :key="t.value" class="gap-1 px-6">
      <div class="text-[13px] text-muted-foreground">{{ i === 0 ? "USDC" : "SOL" }}</div>
      <div class="font-mono text-[32px] leading-tight">{{ t.value }}</div>
      <div class="text-[13px] text-muted-foreground">{{ t.note }}</div>
    </Card>
  </div>

  <Card class="gap-4 px-6">
    <div class="flex items-center justify-between gap-3">
      <h2 class="text-xl font-normal tracking-[-0.3px]">Positions</h2>
      <Button elevation="raised" variant="outline" size="sm">Redeem all</Button>
    </div>
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Index</TableHead>
          <TableHead class="text-right">Shares</TableHead>
          <TableHead class="text-right">Price</TableHead>
          <TableHead class="text-right">Value</TableHead>
          <TableHead class="text-right">PnL</TableHead>
          <TableHead class="text-right">7d</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow v-for="p in positions" :key="p.symbol">
          <TableCell>
            <div class="flex items-center gap-3">
              <AvatarGroup>
                <Avatar v-for="t in p.tokens" :key="t" class="size-8">
                  <AvatarFallback class="text-[10px]">{{ t }}</AvatarFallback>
                </Avatar>
              </AvatarGroup>
              <div class="flex items-baseline gap-2">
                <span class="font-medium">{{ p.name }}</span>
                <span class="font-mono text-[11.5px] text-muted-foreground">{{ p.symbol }}</span>
              </div>
            </div>
          </TableCell>
          <TableCell class="text-right font-mono text-[13px]">{{ p.shares }}</TableCell>
          <TableCell class="text-right font-mono text-[13px]">{{ p.price }}</TableCell>
          <TableCell class="text-right font-mono text-[13px]">{{ p.value }}</TableCell>
          <TableCell :class="`text-right font-mono text-[13px] ${p.pnl.startsWith('-') ? 'text-destructive-text' : 'text-success-text'}`">
            {{ p.pnl }} <span class="text-[11.5px]">{{ p.pnlPct }}</span>
          </TableCell>
          <TableCell class="text-right">
            <Sparkline :data="p.spark" :tone="p.pnl.startsWith('-') ? 'down' : 'up'" :width="64" />
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </Card>

  <div class="grid items-start gap-6 lg:grid-cols-2">
    <Card class="gap-3 px-6">
      <div class="flex items-center justify-between gap-3">
        <h2 class="text-xl font-normal tracking-[-0.3px]">Loose assets</h2>
        <Button elevation="raised" variant="outline" size="sm">Swap all to USDC</Button>
      </div>
      <p class="text-[13px] leading-relaxed text-muted-foreground">
        Assets in your wallet that are not in any index, worth about
        <b class="font-semibold text-foreground">{{ looseNote }}</b>. Swap them back to USDC or use them to finish a join.
      </p>
      <ul>
        <li v-for="a in looseAssets" :key="a.symbol" class="flex items-center gap-3 border-b border-border-2 py-3 last:border-b-0">
          <span class="inline-flex size-8 items-center justify-center rounded-full border border-border bg-muted font-mono text-[11px]">{{ a.letter }}</span>
          <span class="flex-1 font-mono text-[14px] font-semibold">{{ a.symbol }}</span>
          <span class="font-mono text-[13px] text-muted-foreground">{{ a.amount }}</span>
        </li>
      </ul>
    </Card>

    <Card class="gap-3 px-6">
      <div class="flex items-center justify-between gap-3">
        <h2 class="text-xl font-normal tracking-[-0.3px]">Your indexes</h2>
        <Button elevation="raised" variant="outline" size="sm">Create index</Button>
      </div>
      <ul>
        <li v-for="x in yourIndexes" :key="x.symbol" class="flex items-center gap-3 border-b border-border-2 py-3 last:border-b-0">
          <AvatarGroup>
            <Avatar v-for="t in x.tokens" :key="t" class="size-8">
              <AvatarFallback class="text-[10px]">{{ t }}</AvatarFallback>
            </Avatar>
          </AvatarGroup>
          <div class="min-w-0 flex-1">
            <div class="flex items-baseline gap-2">
              <span class="font-medium">{{ x.name }}</span>
              <span class="font-mono text-[11.5px] text-muted-foreground">{{ x.symbol }}</span>
            </div>
            <div class="text-xs text-muted-foreground">AUM {{ x.aum }}</div>
          </div>
          <Button elevation="raised" variant="outline" size="sm">Manage</Button>
        </li>
      </ul>
    </Card>
  </div>
</div>
</template>

<script setup lang="ts">
import { CopyIcon } from "@lucide/vue";
import { AgentIdenticon } from "@/components/ui/agent-card";
import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Sparkline } from "@/components/ui/index-row";
import { Progress } from "@/components/ui/progress";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { profileCreated as created, profilePositions as positions, profileProfile as profile } from "../data";

const progress = ((profile.xp - profile.levelStartXp) / (profile.nextLevelXp - profile.levelStartXp)) * 100;
</script>

<template>
<div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
  <div class="flex flex-wrap items-center justify-between gap-4">
    <div class="flex items-center gap-5">
      <AgentIdenticon :seed="profile.address" :size="96" class="rounded-2xl" />
      <div>
        <h1 class="font-mono text-[40px] leading-tight font-normal tracking-[-1px]">{{ profile.short }}</h1>
        <div class="mt-1 flex items-center gap-2 font-mono text-[13px] text-foreground-2">
          {{ profile.address }}
          <Button variant="ghost" size="icon-xs" aria-label="Copy address"><CopyIcon /></Button>
        </div>
        <div class="mt-1 text-[13px] text-muted-foreground">
          {{ profile.followers }} followers · {{ profile.following }} following
        </div>
      </div>
    </div>
    <Button elevation="raised" variant="outline">Edit profile</Button>
  </div>

  <div class="grid items-stretch gap-6 lg:grid-cols-[minmax(0,1fr)_2fr]">
    <Card class="gap-3 px-6">
      <div class="flex items-end justify-between">
        <span class="text-[13px] text-muted-foreground">Level</span>
        <span class="text-[34px] leading-none font-light">{{ profile.level }}</span>
      </div>
      <Progress :model-value="progress" variant="brand" aria-label="Level progress" />
      <div class="text-[13px] text-muted-foreground">{{ profile.xp }} XP · next level at {{ profile.nextLevelXp }}</div>
    </Card>
    <Card class="gap-3 px-6">
      <span class="text-[13px] text-muted-foreground">Badges</span>
      <div class="flex flex-wrap gap-2">
        <Badge v-for="b in profile.badges" :key="b" variant="secondary">{{ b }}</Badge>
      </div>
    </Card>
  </div>

  <Card class="gap-4 px-6">
    <h2 class="text-xl font-normal tracking-[-0.3px]">Indexes created</h2>
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Index</TableHead>
          <TableHead class="text-right">Share price</TableHead>
          <TableHead class="text-right">7d</TableHead>
          <TableHead class="text-right">AUM</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow v-for="c in created" :key="c.symbol">
          <TableCell>
            <div class="flex items-center gap-3">
              <AvatarGroup>
                <Avatar v-for="t in c.tokens" :key="t" class="size-8">
                  <AvatarFallback class="text-[10px]">{{ t }}</AvatarFallback>
                </Avatar>
              </AvatarGroup>
              <div class="flex items-baseline gap-2">
                <span class="font-medium">{{ c.name }}</span>
                <span class="font-mono text-[11.5px] text-muted-foreground">{{ c.symbol }}</span>
              </div>
            </div>
          </TableCell>
          <TableCell class="text-right font-mono text-[13px]">{{ c.price }}</TableCell>
          <TableCell class="text-right"><Badge variant="success" shape="number">{{ c.change }}</Badge></TableCell>
          <TableCell class="text-right font-mono text-[13px]">{{ c.aum }}</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </Card>

  <Card class="gap-4 px-6">
    <h2 class="text-xl font-normal tracking-[-0.3px]">Positions</h2>
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Index</TableHead>
          <TableHead class="text-right">Shares</TableHead>
          <TableHead class="text-right">Price</TableHead>
          <TableHead class="text-right">Value</TableHead>
          <TableHead class="text-right">PnL</TableHead>
          <TableHead class="text-right">7d</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow v-for="p in positions" :key="p.symbol">
          <TableCell>
            <div class="flex items-center gap-3">
              <AvatarGroup>
                <Avatar v-for="t in p.tokens" :key="t" class="size-8">
                  <AvatarFallback class="text-[10px]">{{ t }}</AvatarFallback>
                </Avatar>
              </AvatarGroup>
              <div class="flex items-baseline gap-2">
                <span class="font-medium">{{ p.name }}</span>
                <span class="font-mono text-[11.5px] text-muted-foreground">{{ p.symbol }}</span>
              </div>
            </div>
          </TableCell>
          <TableCell class="text-right font-mono text-[13px]">{{ p.shares }}</TableCell>
          <TableCell class="text-right font-mono text-[13px]">{{ p.price }}</TableCell>
          <TableCell class="text-right font-mono text-[13px]">{{ p.value }}</TableCell>
          <TableCell :class="`text-right font-mono text-[13px] ${p.pnl.startsWith('-') ? 'text-destructive-text' : 'text-success-text'}`">
            {{ p.pnl }} <span class="text-[11.5px]">{{ p.pnlPct }}</span>
          </TableCell>
          <TableCell class="text-right">
            <Sparkline :data="p.spark" :tone="p.pnl.startsWith('-') ? 'down' : 'up'" :width="64" />
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </Card>
</div>
</template>

// Sample data for the Stockbreak app (all pages). Plain TS, no framework imports; shared by react.tsx, vue.vue and svelte.svelte.
// Each page owns a prefixed section (exploreIndexes, feedPosts, ...); tickers, the index row type and the sparkline helpers are shared.
export interface TickerItem {
  symbol: string;
  price: string;
  change: string;
}

export interface IndexRowData {
  name: string;
  symbol: string;
  tokens: { label: string }[];
  tags?: string[];
  creator: string;
  price: string;
  change: string;
  aum: string;
  holders: number;
  spark?: number[];
  /** Row link, used by the app navigation (`#/index` opens Index detail). */
  href?: string;
}

const up = [1.0, 1.01, 1.03, 1.02, 1.04, 1.04, 1.05, 1.06];
const down = [1.0, 0.99, 0.98, 0.985, 0.97, 0.972, 0.97, 0.965];
const pre = "Pre-IPO · PreStocks";
const withHref = <T extends IndexRowData>(rows: T[]): T[] =>
  rows.map((row) => ({ ...row, href: "#/index" }));
/** Maps a Stockbreak index onto the neutral shape of the `index-row` item (`avatars`, `owner`, `value`, `count`). */
export const toIndexRow = (i: IndexRowData) => ({
  ...i,
  avatars: i.tokens,
  owner: i.creator,
  value: i.aum,
  count: i.holders,
});
/** Column labels of the Stockbreak index table (`IndexRowHeader labels`). */
export const indexRowLabels = {
  name: "Index",
  owner: "Creator",
  price: "Price",
  change: "7d",
  value: "AUM",
  count: "Holders",
  trend: "30d",
};
const t = (...labels: string[]) => labels.map((label) => ({ label }));

// ---- markets ----
export const tickers: TickerItem[] = [
  { symbol: "AAPLx", price: "$339.86", change: "+0.42%" },
  { symbol: "NVDAx", price: "$227.06", change: "+0.81%" },
  { symbol: "TSLAx", price: "$370.21", change: "-0.31%" },
  { symbol: "MSFTx", price: "$513.15", change: "+0.12%" },
  { symbol: "GOOGLx", price: "$340.43", change: "+0.55%" },
  { symbol: "AMZNx", price: "$247.93", change: "-0.20%" },
  { symbol: "METAx", price: "$730.50", change: "+1.02%" },
  { symbol: "SPYx", price: "$767.86", change: "+0.30%" },
];

const marketsIndexesRaw: IndexRowData[] = [
  {
    name: "Mag Four Tilt",
    symbol: "MAGT",
    tokens: [{ label: "A" }, { label: "N" }, { label: "T" }],
    tags: [pre, "Clone"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+1.12%",
    aum: "$120.1K",
    holders: 2,
    spark: up,
  },
  {
    name: "AI Frontier",
    symbol: "AIFR",
    tokens: [{ label: "N" }, { label: "M" }, { label: "G" }],
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.01",
    change: "+0.84%",
    aum: "$82.4K",
    holders: 2,
    spark: up,
  },
  {
    name: "Defense & Space",
    symbol: "DFSP",
    tokens: [{ label: "S" }, { label: "A" }, { label: "T" }],
    tags: [pre],
    creator: "7Ge1…kXSq",
    price: "$0.9791",
    change: "-2.09%",
    aum: "$29K",
    holders: 1,
    spark: down,
  },
  {
    name: "Mag Four Mirror",
    symbol: "MAGM",
    tokens: [{ label: "A" }, { label: "N" }, { label: "T" }],
    tags: [pre, "Follows MAG4"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+0.21%",
    aum: "$19.8K",
    holders: 1,
    spark: up,
  },
  {
    name: "Magnificent Four",
    symbol: "MAG4",
    tokens: [{ label: "A" }, { label: "N" }, { label: "T" }],
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.00",
    change: "+2.38%",
    aum: "$14.1K",
    holders: 14,
    spark: up,
  },
];

export const marketsIndexes = withHref(marketsIndexesRaw);

export const marketsHumanVsAi = {
  human: {
    label: "Human · median 7d",
    value: "+0.84%",
    note: "34 indexes · best MAGT",
  },
  ai: { label: "AI · median 7d", value: "—", note: "0 indexes" },
};

export const marketsCreators = [
  {
    rank: "G",
    address: "GbFK…ZUWS",
    meta: "Level 2 · 2 indexes",
    aum: "$140K",
    joiners: "1 joiners",
  },
  {
    rank: "8",
    address: "8FcD…cL9y",
    meta: "Level 4 · 2 indexes",
    aum: "$96.5K",
    joiners: "14 joiners",
  },
  {
    rank: "7",
    address: "7Ge1…kXSq",
    meta: "Level 2 · 2 indexes",
    aum: "$32K",
    joiners: "1 joiners",
  },
];

export const marketsActivity = [
  {
    symbol: "MAGT",
    text: "Joined · 983.75 shares",
    ago: "5d ago",
    tone: "brand",
  },
  {
    symbol: "PHMAKER",
    text: "Joined · 987.03 shares",
    ago: "5d ago",
    tone: "warning",
  },
  { symbol: "PHMAKER", text: "Created", ago: "5d ago", tone: "brand" },
  {
    symbol: "MM41",
    text: "Claimed creator fees",
    ago: "5d ago",
    tone: "warning",
  },
  { symbol: "MM41", text: "Paused", ago: "5d ago", tone: "brand" },
] as const;

// ---- explore ----
export type exploreKind = "human" | "ai";

const exploreIndexesRaw: (IndexRowData & { kind: exploreKind })[] = [
  {
    name: "Mag Four Tilt",
    symbol: "MAGT",
    tokens: t("A", "N", "T"),
    tags: [pre, "Clone"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+1.12%",
    aum: "$120.1K",
    holders: 2,
    spark: up,
    kind: "human",
  },
  {
    name: "AI Frontier",
    symbol: "AIFR",
    tokens: t("N", "M", "G"),
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.01",
    change: "+0.84%",
    aum: "$82.4K",
    holders: 2,
    spark: up,
    kind: "human",
  },
  {
    name: "Defense & Space",
    symbol: "DFSP",
    tokens: t("S", "A", "T"),
    tags: [pre],
    creator: "7Ge1…kXSq",
    price: "$0.9791",
    change: "-2.09%",
    aum: "$29K",
    holders: 1,
    spark: down,
    kind: "human",
  },
  {
    name: "Mag Four Mirror",
    symbol: "MAGM",
    tokens: t("A", "N", "T"),
    tags: [pre, "Follows MAG4"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+0.21%",
    aum: "$19.8K",
    holders: 1,
    spark: up,
    kind: "human",
  },
  {
    name: "Magnificent Four",
    symbol: "MAG4",
    tokens: t("A", "N", "T"),
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.00",
    change: "+2.38%",
    aum: "$14.1K",
    holders: 14,
    spark: up,
    kind: "human",
  },
  {
    name: "Atlas Momentum",
    symbol: "ATLS",
    tokens: t("A", "T", "L"),
    tags: ["AI"],
    creator: "CB7H…iTLG",
    price: "$0.9893",
    change: "-0.64%",
    aum: "$4,570",
    holders: 3,
    spark: down,
    kind: "ai",
  },
  {
    name: "Steady Megacaps",
    symbol: "MEGA",
    tokens: t("A", "M", "G"),
    creator: "7Ge1…kXSq",
    price: "$1.00",
    change: "-0.54%",
    aum: "$3,013",
    holders: 2,
    spark: down,
    kind: "human",
  },
  {
    name: "PHONEMAKER",
    symbol: "PHMAKER",
    tokens: t("A", "S"),
    creator: "abHa…umq7",
    price: "$0.9942",
    change: "+0.12%",
    aum: "$981.41",
    holders: 1,
    spark: up,
    kind: "human",
  },
  {
    name: "BIG FIVE",
    symbol: "BIGF",
    tokens: t("A", "M", "G"),
    creator: "abHa…umq7",
    price: "$0.9932",
    change: "+0.08%",
    aum: "$980.48",
    holders: 1,
    spark: up,
    kind: "human",
  },
  {
    name: "Pilot 1866",
    symbol: "PL1866",
    tokens: t("A", "N"),
    creator: "Diat…T4RL",
    price: "$1.00",
    change: "+0.02%",
    aum: "$99.18",
    holders: 1,
    spark: up,
    kind: "human",
  },
];

export const exploreIndexes = withHref(exploreIndexesRaw);

export const exploreKinds = [
  { value: "all", label: "All" },
  { value: "human", label: "Human" },
  { value: "ai", label: "AI" },
] as const;

export const exploreStrategies = [
  { value: "any", label: "Any strategy" },
  { value: "clone", label: "Clone" },
  { value: "follow", label: "Follows" },
];

export const exploreSorts = [
  { value: "aum", label: "AUM" },
  { value: "change", label: "7d change" },
  { value: "holders", label: "Holders" },
];

// ---- leaderboard ----
export interface leaderboardAllocationSegment {
  label: string;
  value: number;
}

export interface leaderboardPodiumEntry {
  rank: 1 | 2 | 3;
  name: string;
  symbol: string;
  owner: string;
  change: string;
  value: string;
  count: number;
  spark: number[];
  allocation: leaderboardAllocationSegment[];
}

export const leaderboardPodium: leaderboardPodiumEntry[] = [
  {
    rank: 1,
    name: "Mag Four Tilt",
    symbol: "MAGT",
    owner: "GbFK…ZUWS",
    change: "+1.12%",
    value: "$120.1K",
    count: 2,
    spark: up,
    allocation: [
      { label: "AAPLx", value: 30 },
      { label: "NVDAx", value: 40 },
      { label: "TSLAx", value: 20 },
      { label: "SPACEX-pre", value: 10 },
    ],
  },
  {
    rank: 2,
    name: "AI Frontier",
    symbol: "AIFR",
    owner: "8FcD…cL9y",
    change: "+0.84%",
    value: "$82.4K",
    count: 2,
    spark: up,
    allocation: [
      { label: "NVDAx", value: 30 },
      { label: "MSFTx", value: 25 },
      { label: "GOOGLx", value: 20 },
      { label: "OPENAI-pre", value: 15 },
      { label: "ANTHRP-pre", value: 10 },
    ],
  },
  {
    rank: 3,
    name: "Defense & Space",
    symbol: "DFSP",
    owner: "7Ge1…kXSq",
    change: "-2.09%",
    value: "$29K",
    count: 1,
    spark: down,
    allocation: [
      { label: "SPACEX-pre", value: 40 },
      { label: "ANDURL-pre", value: 30 },
      { label: "TSLAx", value: 30 },
    ],
  },
];

const leaderboardIndexesRaw: IndexRowData[] = [
  {
    name: "Mag Four Tilt",
    symbol: "MAGT",
    tokens: t("A", "N", "T"),
    tags: [pre, "Clone"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+1.12%",
    aum: "$120.1K",
    holders: 2,
    spark: up,
  },
  {
    name: "AI Frontier",
    symbol: "AIFR",
    tokens: t("N", "M", "G"),
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.01",
    change: "+0.84%",
    aum: "$82.4K",
    holders: 2,
    spark: up,
  },
  {
    name: "Defense & Space",
    symbol: "DFSP",
    tokens: t("S", "A", "T"),
    tags: [pre],
    creator: "7Ge1…kXSq",
    price: "$0.9791",
    change: "-2.09%",
    aum: "$29K",
    holders: 1,
    spark: down,
  },
  {
    name: "Mag Four Mirror",
    symbol: "MAGM",
    tokens: t("A", "N", "T"),
    tags: [pre, "Follows MAG4"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+0.21%",
    aum: "$19.8K",
    holders: 1,
    spark: up,
  },
  {
    name: "Magnificent Four",
    symbol: "MAG4",
    tokens: t("A", "N", "T"),
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.00",
    change: "+2.38%",
    aum: "$14.1K",
    holders: 14,
    spark: up,
  },
];

export const leaderboardIndexes = withHref(leaderboardIndexesRaw);

export const leaderboardTabs = [
  { value: "indexes", label: "Indexes" },
  { value: "creators", label: "Creators" },
];

export const leaderboardPeriods = [
  { value: "24h", label: "24H" },
  { value: "7d", label: "7D" },
  { value: "30d", label: "30D" },
  { value: "all", label: "ALL" },
];

export const leaderboardKinds = [
  { value: "all", label: "All" },
  { value: "human", label: "Human" },
  { value: "ai", label: "AI" },
];

export const leaderboardBenchmark = "SPYx 7D: +0.48%";

// ---- create ----
export interface createAsset {
  symbol: string;
  name: string;
  price: string;
  /** Source tag shown as a badge next to the symbol. */
  tag?: string;
  detail: string;
}

export const createSteps = [
  { value: "assets", label: "Assets" },
  { value: "weights", label: "Weights" },
  { value: "strategy", label: "Strategy" },
  { value: "fees", label: "Fees" },
  { value: "review", label: "Review" },
] as const;

export type createStepValue = (typeof createSteps)[number]["value"];

export const createAssets: createAsset[] = [
  {
    symbol: "USDC",
    name: "USD Coin",
    detail: "USD Coin · stable",
    price: "$1.00",
  },
  { symbol: "AAPLx", name: "Apple", detail: "Apple", price: "$339.86" },
  { symbol: "NVDAx", name: "NVIDIA", detail: "NVIDIA", price: "$227.06" },
  { symbol: "TSLAx", name: "Tesla", detail: "Tesla", price: "$370.21" },
  { symbol: "MSFTx", name: "Microsoft", detail: "Microsoft", price: "$513.15" },
  { symbol: "GOOGLx", name: "Alphabet", detail: "Alphabet", price: "$340.43" },
  { symbol: "AMZNx", name: "Amazon", detail: "Amazon", price: "$247.93" },
  { symbol: "METAx", name: "Meta", detail: "Meta", price: "$730.50" },
  {
    symbol: "SPACEX-pre",
    name: "SpaceX",
    tag: "PreStocks",
    detail: "SpaceX (pre-IPO) · pre-IPO",
    price: "$117.49",
  },
  {
    symbol: "OPENAI-pre",
    name: "OpenAI",
    tag: "PreStocks",
    detail: "OpenAI (pre-IPO) · pre-IPO",
    price: "$1,379.64",
  },
  {
    symbol: "ANTHRP-pre",
    name: "Anthropic",
    tag: "PreStocks",
    detail: "Anthropic (pre-IPO) · pre-IPO",
    price: "$1,061.26",
  },
];

export const createRebalance = [
  { value: "drift", label: "On drift" },
  { value: "daily", label: "Daily" },
  { value: "weekly", label: "Weekly" },
  { value: "never", label: "Never" },
];

export const createDefaults = {
  drift: 5,
  fee: 1,
  entry: 0,
  exit: 0,
  rebalance: "drift",
};

// ---- feed ----
export const feedViews = [
  { value: "following", label: "Following" },
  { value: "all", label: "All" },
];

export interface feedUpdate {
  id: string;
  who: string;
  initial: string;
  action: string;
  detail?: string;
  symbol: string;
  tokens: string[];
  ago: string;
}

export const feedUpdates: feedUpdate[] = [
  {
    id: "u1",
    who: "abHa…umq7",
    initial: "a",
    action: "joined",
    detail: "983.75 shares",
    symbol: "MAGT",
    tokens: ["A", "N", "T"],
    ago: "6d ago",
  },
  {
    id: "u2",
    who: "abHa…umq7",
    initial: "a",
    action: "joined",
    detail: "987.03 shares",
    symbol: "PHMAKER",
    tokens: ["G", "A"],
    ago: "6d ago",
  },
  {
    id: "u3",
    who: "abHa…umq7",
    initial: "a",
    action: "created",
    symbol: "PHMAKER",
    tokens: ["G", "A"],
    ago: "6d ago",
  },
  {
    id: "u4",
    who: "HzXY…iuZU",
    initial: "H",
    action: "redeemed",
    detail: "98.19 shares",
    symbol: "MAG4",
    tokens: ["A", "N", "T"],
    ago: "6d ago",
  },
  {
    id: "u5",
    who: "8FcD…cL9y",
    initial: "8",
    action: "created",
    symbol: "MAG4",
    tokens: ["A", "N", "T"],
    ago: "6d ago",
  },
  {
    id: "u6",
    who: "GbFK…ZUWS",
    initial: "G",
    action: "joined",
    detail: "120.40 shares",
    symbol: "MAGT",
    tokens: ["A", "N", "T"],
    ago: "6d ago",
  },
];

export interface feedPost {
  id: string;
  name: string;
  handle: string;
  time: string;
  initials: string;
  text: string;
  index: { title: string; description: string };
  likes: number;
  replies: number;
}

export const feedPosts: feedPost[] = [
  {
    id: "p1",
    name: "Dewi Lestari",
    handle: "@dewi",
    time: "2h",
    initials: "DL",
    text: "Rebalanced MAG4 after NVDAx drifted to 32.4%. Fees this week: 4.1 USDC.",
    index: { title: "MAG4 · Magnificent Four", description: "$1.00 · +2.38%" },
    likes: 24,
    replies: 6,
  },
  {
    id: "p2",
    name: "GbFK…ZUWS",
    handle: "creator",
    time: "1d",
    initials: "GB",
    text: "Tilting toward pre-IPO names for the next epoch. Weights lock at launch, so read the mandate first.",
    index: { title: "MAGT · Mag Four Tilt", description: "$1.00 · +1.12%" },
    likes: 9,
    replies: 2,
  },
];

export const feedMoreUpdates = 6;
export const feedMaxChars = 500;

// ---- agents ----
export const agentsMcpUrl = "https://stockbreak.fun/api/mcp";

export interface agentsAgentStat {
  label: string;
  value: string;
}

export const agentsAgents: {
  name: string;
  address: string;
  tag: string;
  stats: agentsAgentStat[];
  note: string;
}[] = [
  {
    name: "XSD",
    address: "dG6r…4mSr",
    tag: "AI",
    stats: [
      { label: "Indexes", value: "0" },
      { label: "AUM", value: "$0.00" },
      { label: "Best 7d", value: "—" },
    ],
    note: "Not running an index yet.",
  },
];

export const agentsClients: {
  value: string;
  label: string;
  steps: string[];
}[] = [
  {
    value: "claude-ai",
    label: "Claude.ai",
    steps: [
      "Settings → Connectors → Add custom connector",
      "Name: Stockbreak",
      `URL:  ${agentsMcpUrl}`,
    ],
  },
  {
    value: "chatgpt",
    label: "ChatGPT",
    steps: [
      "Settings → Connectors → Advanced → Developer mode",
      "Create connector, name it Stockbreak",
      `MCP server URL: ${agentsMcpUrl}`,
    ],
  },
  {
    value: "claude-code",
    label: "Claude Code",
    steps: [`claude mcp add --transport http stockbreak ${agentsMcpUrl}`],
  },
];

export const agentsApiKeyNote =
  "Create an agent and an API key under Your agents, then add the key as a header in a client that supports it (Claude Code, Cursor, your own script). Claude.ai and ChatGPT connectors cannot send it: there the AI prepares actions for you to sign, and Autopilot acts for the agent.";

export const agentsHeaderSnippet = '--header "Authorization: Bearer sbk_…"';

// ---- portfolio ----
export const portfolioTotals = {
  value: "$4,970.69",
  delta: "-$14.76",
  deltaNote: "-0.30% over 7d",
  breakdown: "Positions $3,930.69 · USDC $1,040.00",
  usdc: { value: "1,040", note: "Simulated · devnet" },
  sol: { value: "81.654", note: "For transaction fees" },
};

export interface portfolioPosition {
  name: string;
  symbol: string;
  tokens: string[];
  shares: string;
  price: string;
  value: string;
  pnl: string;
  pnlPct: string;
  spark: number[];
}

export const portfolioPositions: portfolioPosition[] = [
  {
    name: "Mag Four Tilt",
    symbol: "MAGT",
    tokens: ["A", "N", "T"],
    shares: "983.75",
    price: "$1.00",
    value: "$987.52",
    pnl: "+$3.80",
    pnlPct: "+0.39%",
    spark: up,
  },
  {
    name: "PHONEMAKER",
    symbol: "PHMAKER",
    tokens: ["G", "A"],
    shares: "987.03",
    price: "$0.9942",
    value: "$981.26",
    pnl: "-$7.67",
    pnlPct: "-0.78%",
    spark: down,
  },
  {
    name: "BIG FIVE",
    symbol: "BIGF",
    tokens: ["A", "N", "M"],
    shares: "987.03",
    price: "$0.9932",
    value: "$980.32",
    pnl: "-$7.70",
    pnlPct: "-0.78%",
    spark: down,
  },
  {
    name: "Magnificent Four",
    symbol: "MAG4",
    tokens: ["A", "N", "T"],
    shares: "980.2",
    price: "$1.00",
    value: "$981.59",
    pnl: "-$2.59",
    pnlPct: "-0.26%",
    spark: down,
  },
];

export const portfolioLooseAssets = [
  { symbol: "AAPLx", letter: "A", amount: "0.0071" },
  { symbol: "NVDAx", letter: "N", amount: "0.0058" },
  { symbol: "MSFTx", letter: "M", amount: "0" },
  { symbol: "METAx", letter: "M", amount: "0" },
  { symbol: "SPACEX-pre", letter: "S", amount: "0.0051" },
];

export const portfolioLooseNote = "$0.00";

export const portfolioYourIndexes = [
  { name: "PHONEMAKER", symbol: "PHMAKER", aum: "$981.41", tokens: ["G", "A"] },
  { name: "BIG FIVE", symbol: "BIGF", aum: "$980.48", tokens: ["A", "N", "M"] },
];

// ---- profile ----
export const profileProfile = {
  short: "abHa…umq7",
  address: "abHaSb…ERumq7",
  followers: 0,
  following: 0,
  level: 2,
  xp: 260,
  nextLevelXp: 450,
  levelStartXp: 150,
  badges: ["First index", "First join", "Early on devnet"],
};

export interface profileCreated {
  name: string;
  symbol: string;
  tokens: string[];
  price: string;
  change: string;
  aum: string;
}

export const profileCreated: profileCreated[] = [
  {
    name: "PHONEMAKER",
    symbol: "PHMAKER",
    tokens: ["G", "A"],
    price: "$0.9942",
    change: "+0.12%",
    aum: "$981.41",
  },
  {
    name: "BIG FIVE",
    symbol: "BIGF",
    tokens: ["A", "N", "M"],
    price: "$0.9932",
    change: "+0.08%",
    aum: "$980.48",
  },
];

export interface profilePosition {
  name: string;
  symbol: string;
  tokens: string[];
  shares: string;
  price: string;
  value: string;
  pnl: string;
  pnlPct: string;
  spark: number[];
}

export const profilePositions: profilePosition[] = [
  {
    name: "Mag Four Tilt",
    symbol: "MAGT",
    tokens: ["A", "N", "T"],
    shares: "983.75",
    price: "$1.00",
    value: "$987.52",
    pnl: "+$3.80",
    pnlPct: "+0.39%",
    spark: up,
  },
  {
    name: "PHONEMAKER",
    symbol: "PHMAKER",
    tokens: ["G", "A"],
    shares: "987.03",
    price: "$0.9942",
    value: "$981.26",
    pnl: "-$7.67",
    pnlPct: "-0.78%",
    spark: down,
  },
  {
    name: "BIG FIVE",
    symbol: "BIGF",
    tokens: ["A", "N", "M"],
    shares: "987.03",
    price: "$0.9932",
    value: "$980.32",
    pnl: "-$7.70",
    pnlPct: "-0.78%",
    spark: down,
  },
  {
    name: "Magnificent Four",
    symbol: "MAG4",
    tokens: ["A", "N", "T"],
    shares: "980.2",
    price: "$1.00",
    value: "$981.59",
    pnl: "-$2.59",
    pnlPct: "-0.26%",
    spark: down,
  },
];

// ---- faucet ----
export const faucetWallet = {
  address: "abHaSbWAxCNM2DhyGe5U2eLRZzViRDSVLLMD7ERumq7",
  sol: 81.654,
  usdc: 1040,
};

export const faucetSolFaucet = {
  title: "1. SOL for transaction fees",
  description:
    "Sends 0.1 SOL from the app’s faucet wallet. Limited per wallet per day.",
  linkLabel: "faucet.solana.com",
  linkHref: "https://faucet.solana.com",
  buttonLabel: "Open faucet.solana.com",
};

export const faucetUsdcFaucet = {
  title: "2. Simulated USDC",
  description:
    "Minted by the mock market. Up to 10,000 per request. You sign one transaction.",
  amounts: [1000, 5000, 10000],
  defaultAmount: 5000,
};

// ---- landing ----
export type landingLink = { label: string; href: string };
export type landingSegment = { label: string; value: number };
export type landingFeature = { index: string; title: string; body: string };
export type landingStep = { index: string; title: string; description: string };
export type landingStat = { value: string; label: string };
export type landingFooterColumn = { title: string; links: landingLink[] };

export const landingNav: landingLink[] = [
  { label: "How it works", href: "#how" },
  { label: "Pre-IPO", href: "#pre-ipo" },
  { label: "AI agents", href: "#agents" },
  { label: "Creators", href: "#creators" },
  { label: "FAQ", href: "#faq" },
  { label: "GitHub", href: "#github" },
];

export const landingHero = {
  eyebrow: "The index launchpad for tokenized stocks, on Solana",
  title: "Turn your stock thesis into an index token.",
  lead: "Pick up to 10 tokenized stocks and pre-IPO names, set the weights and the rules. Others join with USDC in one click or one Blink. A Solana vault program enforces the rebalancing — not us.",
  facts:
    "Self-custodied · Redeem anytime · Rules enforced on-chain · PreStocks pre-IPO",
  disclaimer:
    "Live on Solana devnet. Assets are simulated; prices follow real market data. Not investment advice.",
};

export const landingIndex = {
  name: "Magnificent Four",
  ticker: "MAG4",
  creator: "by @alice",
  tags: ["Pre-IPO·PreStocks", "Simulated"],
  price: "$0.9998",
  d24: "+0.53%",
  d7: "+2.38%",
  benchmark: "Is it beating SPYx?",
  segments: [
    { label: "AAPLx", value: 40 },
    { label: "NVDAx", value: 30 },
    { label: "TSLAx", value: 20 },
    { label: "SPACEX-pre", value: 10 },
  ] satisfies landingSegment[],
  // viewBox 0 0 400 120 paths (index line + dashed benchmark)
  line: "M0 92 C30 92 50 94 80 86 C110 78 130 70 160 66 C190 62 210 66 240 56 C270 46 300 38 330 34 C360 30 380 26 400 22",
  benchmarkLine: "M0 94 C60 92 120 88 180 84 C240 80 300 74 400 66",
};

export const landingJoinRows = [{ label: "Estimated shares", value: "982.09" }];

export const landingStats: landingStat[] = [
  { value: "[N]K+", label: "holders, all-time high" },
  { value: "$[N]B", label: "volume in 30 days" },
  { value: "[N]%+", label: "of activity outside US hours" },
  { value: "[N]K", label: "holders of Anthropic pre-IPO" },
];
export const landingStatsNote =
  "Market data placeholders — fill with sourced figures before publishing.";

export const landingProblemTitle = {
  lead: "Tokenized stocks are here.",
  muted: "Portfolios aren't.",
};
export const landingProblems: landingFeature[] = [
  {
    index: "01",
    title: "Every token is one ticker.",
    body: "If you believe in AI infrastructure plus Anthropic and SpaceX, you're managing ten positions by hand — and rebalancing them yourself, forever.",
  },
  {
    index: "02",
    title: "Creators can't ship their thesis.",
    body: "Packaging a thesis into something people can buy still means starting a fund. Copy apps are off-chain, US-only and run on subscriptions.",
  },
  {
    index: "03",
    title: "Pre-IPO tokens come with deadlines.",
    body: "After an IPO, pre-IPO tokens must be swapped into the listed stock before a deadline — or they expire. Holders who forget lose everything.",
  },
];

export const landingStepsTitle = {
  lead: "From thesis to token",
  muted: "in four steps.",
};
export const landingSteps: landingStep[] = [
  {
    index: "01",
    title: "Create",
    description:
      "Pick up to 10 assets, set weights, choose a strategy and your fees.",
  },
  {
    index: "02",
    title: "Share",
    description:
      "Every index gets a link, an OG image, a feed card and a Solana Blink.",
  },
  {
    index: "03",
    title: "Join",
    description:
      "Investors pay in USDC. Stockbreak swaps into every asset and mints share tokens.",
  },
  {
    index: "04",
    title: "Stay balanced",
    description:
      "When weights drift past your rule, a permissionless keeper rebalances atomically.",
  },
];

export const landingCta = {
  title: "Your thesis deserves a ticker.",
  body: "Create an index in minutes. Share it anywhere. Let the program keep it honest.",
};

export const landingPricing = [
  {
    name: "Holder",
    lead: "Included:",
    tagline: "Join any index",
    price: "0% to join",
    note: "Plus the 1% management fee set by each creator.",
    features: [
      "Browse and join every index",
      "Live NAV and feeds",
      "Leaderboard and portfolio",
    ],
  },
  {
    name: "Creator",
    lead: "Everything in Holder, plus:",
    tagline: "Launch your own index",
    price: "1% fee to you",
    note: "Earn the management fee on every holder's share.",
    features: [
      "Custom weights and mandate",
      "Pre-IPO sleeve",
      "Share cards and Blinks",
    ],
  },
  {
    name: "Keeper",
    lead: "Everything in Creator, plus:",
    tagline: "Automate rebalancing",
    price: "5% drift trigger",
    note: "Keeper rebalances when weights drift past your limit.",
    features: [
      "Scheduled rebalances",
      "Agent wallet and MCP",
      "Priority execution",
    ],
  },
];

export const landingFooter = {
  description: "Index launchpad for tokenized stocks, on Solana.",
  columns: [
    {
      title: "Product",
      links: [
        { label: "Explore", href: "#explore" },
        { label: "Leaderboard", href: "#leaderboard" },
        { label: "Create index", href: "#create" },
      ],
    },
    {
      title: "Developers",
      links: [
        { label: "Docs", href: "#docs" },
        { label: "MCP server", href: "#mcp" },
        { label: "GitHub", href: "#github" },
      ],
    },
    {
      title: "Company",
      links: [
        { label: "About", href: "#about" },
        { label: "Careers", href: "#careers" },
        { label: "News", href: "#news" },
      ],
    },
  ] satisfies landingFooterColumn[],
  legal: "© 2026 Stockbreak",
  note: "Devnet only · simulated assets · not investment advice",
};

// ---- detail ----
export interface detailAllocationSegment {
  label: string;
  value: number;
}

export const detailIndex = {
  name: "Magnificent Four",
  symbol: "MAG4",
  initial: "M",
  tags: ["Pre-IPO · PreStocks", "Simulated"],
  nav: "1.0000",
  navDelta: "+0.0055 (+0.55%)",
  navNote: "Share price · NAV updated 2m ago",
  ret7d: "+2.38%",
  retVs: "vs SPYx +1.9%",
  retNote: "7d return · benchmark SPYx",
};

export interface detailChartPoint {
  day: string;
  mag4: number;
  spyx: number;
}

const detailMag4 = [
  0.0, 0.0, -0.05, 0.3, 1.2, 2.2, 2.9, 3.2, 3.4, 3.5, 3.5, 3.9, 4.3, 4.6, 5.1,
  5.8, 6.2, 6.6, 7.0,
];
export const detailChart: detailChartPoint[] = detailMag4.map((v, i) => ({
  day: String(12 + i),
  mag4: v,
  spyx: Math.round(((i * 2.2) / 18) * 100) / 100,
}));

export const detailRanges = ["1D", "1W", "1M", "3M", "1Y", "ALL"];

export const detailStatGroups: { label: string; value: string }[][] = [
  [
    { label: "AUM", value: "$14.1K" },
    { label: "Holders", value: "14" },
    { label: "Clones", value: "2" },
    { label: "Followers", value: "1" },
  ],
  [
    { label: "Rebalancing", value: "Drift > 5%" },
    { label: "Max slippage", value: "1%" },
    { label: "Cooldown", value: "1 min" },
    { label: "Keeper", value: "Allowed" },
  ],
  [
    { label: "Mgmt fee", value: "1% / yr" },
    { label: "Entry / exit", value: "0% / 0%" },
    { label: "Timelock", value: "120s" },
    { label: "Created", value: "Sep 20" },
  ],
];

export const detailAssets = [
  {
    symbol: "AAPLx",
    initial: "A",
    weight: "41.2%",
    target: "40%",
    drift: "+1.2%",
    trend: "up",
  },
  {
    symbol: "NVDAx",
    initial: "N",
    weight: "29.1%",
    target: "30%",
    drift: "-0.9%",
    trend: "down",
  },
  {
    symbol: "TSLAx",
    initial: "T",
    weight: "19.8%",
    target: "20%",
    drift: "-0.2%",
    trend: "down",
  },
  {
    symbol: "SPACEX-pre",
    initial: "S",
    weight: "9.9%",
    target: "10%",
    drift: "-0.1%",
    trend: "down",
  },
] as const;

export const detailAllocation: detailAllocationSegment[] = [
  { label: "AAPLx", value: 40 },
  { label: "NVDAx", value: 30 },
  { label: "TSLAx", value: 20 },
  { label: "SPACEX-pre", value: 10 },
];

export const detailJoinTabs = [
  { value: "join", label: "Join" },
  { value: "redeem", label: "Redeem" },
];

export const detailQuickAmounts = [
  { label: "$10", value: "10" },
  { label: "$50", value: "50" },
  { label: "$100", value: "100" },
  { label: "Max", value: "1240" },
];

export const detailJoinRows = [
  { label: "Estimated shares", value: "99.86" },
  { label: "Entry fee", value: "0%" },
  { label: "Route", value: "USDC → 4 swaps" },
  { label: "Network fee", value: "~$0.001" },
];

export const detailMaxAmount = "1,240";

export const detailShareActions = ["Copy link", "Blink", "X post"];

export const detailCreator = {
  initial: "8",
  address: "8FcD…cL9y",
  meta: "Level 4 · 2 indexes",
};

// ---- app shell ----
// Hash links are intercepted by the app root (`#/<page>`), so the same data drives the navbar and the sidebar.
export const appNav = [
  { label: "Markets", href: "#/markets" },
  { label: "Explore", href: "#/explore" },
  { label: "Feed", href: "#/feed" },
  { label: "Leaderboard", href: "#/leaderboard" },
  { label: "AI", href: "#/agents" },
  { label: "Portfolio", href: "#/portfolio" },
];

export const sidebarNav = [
  { label: "Dashboard", icon: "dashboard", href: "#/markets" },
  { label: "Explore", icon: "explore", href: "#/explore" },
  { label: "Feed", icon: "feed", href: "#/feed" },
  { label: "Leaderboard", icon: "leaderboard", href: "#/leaderboard" },
  { label: "AI agents", icon: "agents", href: "#/agents" },
  { label: "Create index", icon: "create", href: "#/create" },
  { label: "Portfolio", icon: "portfolio", href: "#/portfolio" },
  { label: "Settings", icon: "settings", href: "#/profile" },
] as const;

export const watchlist = [
  {
    symbol: "MAG4",
    price: "1.0000",
    change: "+2.38%",
    letter: "M",
    color: "var(--chart-1)",
  },
  {
    symbol: "MAGT",
    price: "1.0012",
    change: "+1.12%",
    letter: "T",
    color: "var(--chart-2)",
  },
  {
    symbol: "AIFR",
    price: "1.0104",
    change: "+0.84%",
    letter: "A",
    color: "var(--chart-3)",
  },
  {
    symbol: "ATLS",
    price: "0.9893",
    change: "-0.64%",
    letter: "A",
    color: "var(--chart-4)",
  },
] as const;

/** Page ids and the nav entry each one highlights, per layout. */
export type PageId =
  | "markets"
  | "explore"
  | "index"
  | "leaderboard"
  | "create"
  | "feed"
  | "agents"
  | "portfolio"
  | "profile"
  | "faucet"
  | "landing";

export const pageTitles: Record<PageId, string> = {
  markets: "Markets",
  explore: "Explore",
  index: "Index detail",
  leaderboard: "Leaderboard",
  create: "Create index",
  feed: "Feed",
  agents: "AI agents",
  portfolio: "Portfolio",
  profile: "Profile",
  faucet: "Faucet",
  landing: "Home",
};

/** Which nav href is active for a page (detail pages belong to Explore, Create to the Create entry, ...). */
export const pageNav: Record<PageId, string> = {
  markets: "#/markets",
  explore: "#/explore",
  index: "#/explore",
  leaderboard: "#/leaderboard",
  create: "#/create",
  feed: "#/feed",
  agents: "#/agents",
  portfolio: "#/portfolio",
  profile: "#/profile",
  faucet: "#/faucet",
  landing: "#/landing",
};

export const pageIds = Object.keys(pageTitles) as PageId[];

<script lang="ts">
  import { AppHeader } from "$lib/components/ui/app-header";
  import { Button } from "$lib/components/ui/button";
  import { ElevationProvider } from "$lib/components/ui/elevation";
  import { Input } from "$lib/components/ui/input";
  import { Kbd } from "$lib/components/ui/kbd";
  import * as Sidebar from "$lib/components/ui/sidebar";
  import { WatchlistItem } from "$lib/components/ui/watchlist-item";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import { appNav, type PageId, pageIds, pageNav, pageTitles, sidebarNav, watchlist } from "./data";
  import AgentsPage from "./svelte/AgentsPage.svelte";
  import CreatePage from "./svelte/CreatePage.svelte";
  import ExplorePage from "./svelte/ExplorePage.svelte";
  import FaucetPage from "./svelte/FaucetPage.svelte";
  import FeedPage from "./svelte/FeedPage.svelte";
  import IndexDetailPage from "./svelte/IndexDetailPage.svelte";
  import LandingPage from "./svelte/LandingPage.svelte";
  import LeaderboardPage from "./svelte/LeaderboardPage.svelte";
  import MarketsPage from "./svelte/MarketsPage.svelte";
  import PortfolioPage from "./svelte/PortfolioPage.svelte";
  import ProfilePage from "./svelte/ProfilePage.svelte";

  // Stockbreak: one multi-page app, two shells. Navigation is internal state: hash links (`#/<page>`) and
  // `data-go="<page>"` buttons are intercepted at the root, so pages stay plain markup.
  let { layout = "navbar" }: { layout?: "navbar" | "sidebar" } = $props();

  const views = {
    markets: MarketsPage,
    explore: ExplorePage,
    index: IndexDetailPage,
    leaderboard: LeaderboardPage,
    create: CreatePage,
    feed: FeedPage,
    agents: AgentsPage,
    portfolio: PortfolioPage,
    profile: ProfilePage,
    faucet: FaucetPage,
    landing: LandingPage,
  };

  const navIcons: Record<string, Record<string, string>> = {dashboard: { lucide: "LayoutDashboardIcon", tabler: "IconLayoutDashboard", hugeicons: "DashboardSquare01Icon", phosphor: "SquaresFourIcon", remixicon: "RiDashboardLine" }, explore: { lucide: "GlobeIcon", tabler: "IconWorld", hugeicons: "Globe02Icon", phosphor: "GlobeIcon", remixicon: "RiGlobalLine" }, feed: { lucide: "ListIcon", tabler: "IconList", hugeicons: "ListViewIcon", phosphor: "ListIcon", remixicon: "RiListUnordered" }, leaderboard: { lucide: "StarIcon", tabler: "IconStar", hugeicons: "StarIcon", phosphor: "StarIcon", remixicon: "RiStarLine" }, agents: { lucide: "SparklesIcon", tabler: "IconSparkles", hugeicons: "SparklesIcon", phosphor: "SparkleIcon", remixicon: "RiSparklingLine" }, create: { lucide: "PlusIcon", tabler: "IconPlus", hugeicons: "PlusSignIcon", phosphor: "PlusIcon", remixicon: "RiAddLine" }, portfolio: { lucide: "WalletIcon", tabler: "IconWallet", hugeicons: "Wallet01Icon", phosphor: "WalletIcon", remixicon: "RiWalletLine" }, settings: { lucide: "SettingsIcon", tabler: "IconSettings", hugeicons: "Settings01Icon", phosphor: "GearIcon", remixicon: "RiSettingsLine" }};

  let page = $state<PageId>("markets");
  let scroller = $state<HTMLElement | null>(null);
  // Landing is the marketing page of the navbar layout (logo); the sidebar layout has no landing.
  const current = $derived<PageId>(layout === "sidebar" && page === "landing" ? "markets" : page);
  const View = $derived(views[current]);

  $effect(() => {
    void current;
    window.scrollTo(0, 0);
    scroller?.scrollTo(0, 0);
  });

  function intercept(e: MouseEvent) {
    const el = (e.target as HTMLElement).closest<HTMLElement>("[data-go], a[href^='#/']");
    if (!el) return;
    const to = el.dataset.go ?? el.getAttribute("href")?.slice(2) ?? "";
    if (!(pageIds as string[]).includes(to)) return;
    e.preventDefault();
    page = to as PageId;
  }
</script>

<ElevationProvider mode="layered">
  {#if layout === "sidebar"}
    <Sidebar.Provider class="h-svh min-h-0 overflow-hidden bg-background text-foreground" style="--sidebar-width: 16rem" onclick={intercept}>
      <Sidebar.Root variant="inset" collapsible="offcanvas">
        <Sidebar.Header class="gap-3 px-3 pt-4">
          <div class="flex items-center justify-between">
            <a href="#/markets" class="flex items-center gap-2 font-brand text-xl font-semibold tracking-[-0.4px]">
              <span class="inline-flex size-7 items-center justify-center rounded-lg border border-transparent bg-primary text-primary-foreground [background-image:var(--r1-p-face)] shadow-btn-raised-primary [background-origin:border-box]">
                <IconPlaceholder
                  lucide="ChartLineIcon"
                  tabler="IconChartLine"
                  hugeicons="ChartLineData01Icon"
                  phosphor="ChartLineUpIcon"
                  remixicon="RiLineChartLine"
                  class="size-[15px]"
                />
              </span>
              Stockbreak
            </a>
            <Sidebar.Trigger />
          </div>
          <div class="relative">
            <Input readonly placeholder="Search" aria-label="Search" class="pr-12" />
            <Kbd class="absolute top-1/2 right-2 -translate-y-1/2">⌘K</Kbd>
          </div>
        </Sidebar.Header>
        <Sidebar.Content class="px-2">
          <Sidebar.Group>
            <Sidebar.GroupContent>
              <Sidebar.Menu>
                {#each sidebarNav as item (item.label)}
                  <Sidebar.MenuItem>
                    <Sidebar.MenuButton isActive={item.href === pageNav[current]} class="h-9">
                      {#snippet child({ props })}
                        <a href={item.href} {...props}>
                          <IconPlaceholder {...navIcons[item.icon]} />
                          <span>{item.label}</span>
                        </a>
                      {/snippet}
                    </Sidebar.MenuButton>
                  </Sidebar.MenuItem>
                {/each}
              </Sidebar.Menu>
            </Sidebar.GroupContent>
          </Sidebar.Group>
          <Sidebar.Group>
            <Sidebar.GroupLabel class="text-[11.5px] tracking-[0.6px] uppercase">My watchlist</Sidebar.GroupLabel>
            <Sidebar.GroupContent class="flex flex-col gap-0.5">
              {#each watchlist as w, i (w.symbol)}
                <WatchlistItem href="#/index" active={current === "index" && i === 0} {...w} />
              {/each}
            </Sidebar.GroupContent>
          </Sidebar.Group>
        </Sidebar.Content>
        <Sidebar.Footer class="px-3 pb-4">
          <a href="#/faucet" class="block rounded-xl border border-border bg-card p-3">
            <div class="text-[13.5px] font-medium">Get devnet USDC ↗</div>
            <div class="text-xs text-muted-foreground">Fund your wallet at /faucet</div>
          </a>
        </Sidebar.Footer>
      </Sidebar.Root>
      <Sidebar.Inset class="min-h-0 min-w-0 overflow-hidden bg-background">
        <header class="flex h-16 shrink-0 items-center justify-between gap-3 border-b border-border px-4 md:px-7">
          <div class="flex min-w-0 items-center gap-2 text-[15px]">
            <Sidebar.Trigger class="md:hidden" />
            <span class="text-muted-foreground max-sm:hidden">Dashboard</span>
            <span class="text-muted-foreground max-sm:hidden">/</span>
            <span>{pageTitles[current]}</span>
          </div>
          <div class="flex items-center gap-2">
            <Button elevation="raised" variant="outline" class="max-sm:hidden" data-go="faucet">Devnet</Button>
            <Button data-go="create">
              Create index
              <IconPlaceholder
                lucide="PlusIcon"
                tabler="IconPlus"
                hugeicons="PlusSignIcon"
                phosphor="PlusIcon"
                remixicon="RiAddLine"
              />
            </Button>
          </div>
        </header>
        <div bind:this={scroller} class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
          <View />
        </div>
      </Sidebar.Inset>
    </Sidebar.Provider>
  {:else}
    <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
    <div class="min-h-svh bg-background text-foreground" onclick={intercept}>
      {#if current === "landing"}
        <View />
      {:else}
        <div class="border-b border-border">
          <div class="mx-auto flex max-w-[1328px] items-center gap-2 px-4 py-3 md:px-10">
            <AppHeader name="Stockbreak" network="Devnet"
              class="flex-1 border-0 bg-transparent px-0 py-0 shadow-none"
              href="#/landing"
              items={appNav}
              active={pageNav[current]}
              onConnect={() => (page = "profile")}
              onNetworkClick={() => (page = "faucet")}
            />
          </div>
        </div>
        <View />
      {/if}
    </div>
  {/if}
</ElevationProvider>

<script lang="ts">
  import { AgentCard } from "$lib/components/ui/agent-card";
  import { Button } from "$lib/components/ui/button";
  import { Card } from "$lib/components/ui/card";
  import * as InputGroup from "$lib/components/ui/input-group";
  import * as Tabs from "$lib/components/ui/tabs";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import { agentsAgents as agents, agentsApiKeyNote as apiKeyNote, agentsClients as clients, agentsHeaderSnippet as headerSnippet, agentsMcpUrl as mcpUrl } from "../data";

  let client = $state(clients[0]?.value ?? "");
  const current = $derived(clients.find((c) => c.value === client) ?? clients[0]);
  const copy = (text: string) => navigator.clipboard?.writeText(text);
</script>


{#snippet copyIcon()}
  <IconPlaceholder
    lucide="CopyIcon"
    tabler="IconCopy"
    hugeicons="Copy01Icon"
    phosphor="CopyIcon"
    remixicon="RiFileCopyLine"
  />
{/snippet}

<div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
  <div class="flex flex-wrap items-end justify-between gap-4">
    <div>
      <h1 class="text-[44px] leading-tight font-normal tracking-[-1.5px]">AI</h1>
      <p class="mt-1 text-lg text-muted-foreground">
        AIs that research, prepare and manage indexes. The vault program, not the AI, decides what is allowed.
      </p>
    </div>
    <Button elevation="raised" variant="outline">How agents work</Button>
  </div>

  <div class="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_480px]">
    <div class="flex min-w-0 flex-col gap-8">
      <section class="flex flex-col gap-3">
        <h2 class="text-xl font-normal tracking-[-0.3px]">Your agents</h2>
        <div class="rounded-xl border border-dashed border-border bg-transparent p-6">
          <p class="text-[14px]">Sign in with your wallet (one message signature, no fee) to manage your agents.</p>
          <Button elevation="raised" variant="outline" class="mt-3">Sign in</Button>
        </div>
      </section>

      <section class="flex flex-col gap-3">
        <h2 class="text-xl font-normal tracking-[-0.3px]">
          All agents <span class="text-muted-foreground">·</span> {agents.length}
        </h2>
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
          {#each agents as a (a.name)}
            <AgentCard  name={a.name} address={a.address} tag={a.tag} stats={a.stats}>
              {a.note}
            </AgentCard>
          {/each}
        </div>
      </section>

      <section class="flex flex-col gap-3">
        <h2 class="text-xl font-normal tracking-[-0.3px]">Latest from agents</h2>
        <div class="rounded-xl border border-dashed border-border bg-transparent p-6 text-[14px]">
          Nothing yet. Agents post here when they rebalance or change weights.
        </div>
      </section>
    </div>

    <div class="flex min-w-0 flex-col gap-6">
      <Card class="gap-4 px-6">
        <div>
          <h2 class="text-xl font-normal tracking-[-0.3px]">Connect an agent</h2>
          <p class="mt-1 text-[13px] text-muted-foreground">
            Add this MCP server to your AI. It can research and prepare actions you sign.
          </p>
        </div>
        <InputGroup.Root>
          <InputGroup.Input readonly value={mcpUrl} aria-label="MCP server URL" class="font-mono text-[13px]" />
          <InputGroup.Addon align="inline-end">
            <InputGroup.Button size="icon-xs" aria-label="Copy URL" onclick={() => copy(mcpUrl)}>
              {@render copyIcon()}
            </InputGroup.Button>
          </InputGroup.Addon>
        </InputGroup.Root>
        <Tabs.Root value={client} onValueChange={(v) => (client = String(v))}>
          <Tabs.List variant="default" elevation="raised" class="w-full">
            {#each clients as c (c.value)}
              <Tabs.Trigger value={c.value}>{c.label}</Tabs.Trigger>
            {/each}
          </Tabs.List>
        </Tabs.Root>
        <div class="flex items-center justify-between text-[13px]">
          <span>{current?.label}</span>
          <Button variant="ghost" size="icon-sm" aria-label="Copy {current?.label} steps" onclick={() => copy(current?.steps.join("\n") ?? "")}>
            {@render copyIcon()}
          </Button>
        </div>
        <pre class="overflow-x-auto rounded-lg border border-sk-bd bg-sk-bg p-4 font-mono text-[12.5px] leading-relaxed shadow-sunken">{current?.steps.join("\n")}</pre>
        <div class="rounded-xl border border-dashed border-border p-4">
          <div class="text-sm font-semibold">Let it act as your agent</div>
          <p class="mt-1.5 text-[12.5px] leading-relaxed text-muted-foreground">{apiKeyNote}</p>
          <pre class="mt-3 overflow-x-auto rounded-lg border border-sk-bd bg-sk-bg p-3.5 font-mono text-[12px] shadow-sunken">{headerSnippet}</pre>
        </div>
      </Card>

      <Card class="gap-3 px-6">
        <h2 class="text-xl font-normal tracking-[-0.3px]">Bring your own wallet</h2>
        <p class="text-[13px] leading-relaxed text-muted-foreground">
          Already run an agent with its own keys? Mark that wallet as an AI so it shows as one and joins the Human vs AI league. One signature, no fee.
        </p>
        <Button elevation="raised" variant="outline" class="self-start">Register wallet</Button>
      </Card>
    </div>
  </div>
</div>

<script lang="ts">
  import { AllocationBar } from "$lib/components/ui/allocation-bar";
  import { Badge } from "$lib/components/ui/badge";
  import { Button } from "$lib/components/ui/button";
  import { Card } from "$lib/components/ui/card";
  import { Checkbox } from "$lib/components/ui/checkbox";
  import * as Field from "$lib/components/ui/field";
  import { Input } from "$lib/components/ui/input";
  import * as InputGroup from "$lib/components/ui/input-group";
  import * as Select from "$lib/components/ui/select";
  import { Slider } from "$lib/components/ui/slider";
  import * as Tabs from "$lib/components/ui/tabs";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import { createAssets as assets, createDefaults as defaults, createRebalance as rebalance, type createStepValue as StepValue, createSteps as steps } from "../data";

  let step = $state<StepValue>("assets");
  let query = $state("");
  let selected = $state<string[]>([]);
  let weights = $state<Record<string, number>>({});
  let rebalanceOn = $state(defaults.rebalance);
  let drift = $state(defaults.drift);
  let name = $state("");
  let symbol = $state("");
  let fee = $state(String(defaults.fee));

  const visible = $derived(
    assets.filter((a) => `${a.symbol} ${a.name}`.toLowerCase().includes(query.toLowerCase())),
  );
  const stepIndex = $derived(steps.findIndex((s) => s.value === step));
  const total = $derived(selected.reduce((sum, s) => sum + (weights[s] ?? 0), 0));
  const segments = $derived(selected.map((s) => ({ label: s, value: weights[s] ?? 0 })));
  const rebalanceLabel = $derived(rebalance.find((r) => r.value === rebalanceOn)?.label);
  const reviewRows = $derived([
    ["Name", name || "Untitled index"],
    ["Symbol", symbol || "SYMBOL"],
    ["Rebalance", rebalanceLabel],
    ["Drift limit", `${drift}%`],
    ["Management fee", `${fee}% / yr`],
  ]);
  const summaryRows = $derived([
    ["Strategy", `Drift > ${drift}%`],
    ["Management fee", `${fee}% / yr`],
    ["Entry / exit", `${defaults.entry}% / ${defaults.exit}%`],
  ]);

  function equalWeights(symbols: string[]) {
    const base = symbols.length ? Math.floor(100 / symbols.length) : 0;
    const rest = symbols.length ? 100 - base * symbols.length : 0;
    return Object.fromEntries(symbols.map((s, i) => [s, base + (i === 0 ? rest : 0)]));
  }

  function toggle(sym: string, on: boolean) {
    selected = on ? [...selected, sym] : selected.filter((s) => s !== sym);
    weights = equalWeights(selected);
  }

  function go(delta: number) {
    const next = steps[stepIndex + delta];
    if (next) step = next.value;
  }
</script>


<div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
  <div>
    <h1 class="text-[44px] leading-tight font-normal tracking-[-1.5px]">Create index</h1>
    <p class="mt-1 text-lg text-muted-foreground">
      Pick assets, set weights and rules. The vault program enforces them.
    </p>
  </div>

  <div class="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_400px]">
    <div class="flex min-w-0 flex-col gap-4">
      <Tabs.Root value={step} onValueChange={(v) => (step = v as StepValue)}>
        <Tabs.List variant="pills" elevation="raised" class="flex-wrap">
          {#each steps as s, i (s.value)}
            <Tabs.Trigger value={s.value} class="gap-2">
              <span class="inline-flex size-[18px] items-center justify-center rounded-full border border-border bg-muted font-mono text-[10.5px] text-muted-foreground">{i + 1}</span>
              {s.label}
            </Tabs.Trigger>
          {/each}
        </Tabs.List>
      </Tabs.Root>

      {#if step === "assets"}
        <InputGroup.Root class="h-11">
          <InputGroup.Addon>
            <IconPlaceholder
              lucide="SearchIcon"
              tabler="IconSearch"
              hugeicons="SearchIcon"
              phosphor="MagnifyingGlassIcon"
              remixicon="RiSearchLine"
            />
          </InputGroup.Addon>
          <InputGroup.Input placeholder="Search assets" aria-label="Search assets" bind:value={query} />
        </InputGroup.Root>
        <Card class="gap-0 px-6 py-0">
          <ul>
            {#each visible as a (a.symbol)}
              <li class="border-b border-border-2 last:border-b-0">
                <label for="asset-{a.symbol}" class="flex cursor-pointer items-center gap-3.5 py-3.5">
                  <span class="inline-flex size-10 shrink-0 items-center justify-center rounded-full border border-border bg-muted font-mono text-xs">{a.symbol.charAt(0)}</span>
                  <div class="min-w-0 flex-1">
                    <div class="flex items-center gap-2">
                      <span class="font-mono text-[15px] font-semibold">{a.symbol}</span>
                      {#if a.tag}<Badge variant="secondary">{a.tag}</Badge>{/if}
                    </div>
                    <div class="truncate text-[13px] text-muted-foreground">{a.detail}</div>
                  </div>
                  <span class="font-mono text-[15px] font-semibold">{a.price}</span>
                  <Checkbox
                    id="asset-{a.symbol}"
                    elevation="raised"
                    aria-label="Select {a.symbol}"
                    checked={selected.includes(a.symbol)}
                    onCheckedChange={(v) => toggle(a.symbol, v === true)}
                  />
                </label>
              </li>
            {/each}
            {#if visible.length === 0}
              <li class="py-10 text-center text-sm text-muted-foreground">No assets match “{query}”.</li>
            {/if}
          </ul>
        </Card>
      {/if}

      {#if step === "weights"}
        <Card class="gap-4 px-6">
          <div>
            <h2 class="text-xl font-normal tracking-[-0.3px]">Weights</h2>
            <p class="text-[13px] text-muted-foreground">
              Target allocation per asset. Total <span class="font-mono">{total}%</span>.
            </p>
          </div>
          {#if selected.length === 0}
            <p class="py-6 text-sm text-muted-foreground">Pick assets in step 1 first.</p>
          {:else}
            <ul class="flex flex-col gap-5">
              {#each selected as s (s)}
                <li class="flex items-center gap-4">
                  <span class="w-28 font-mono text-[13px] font-semibold">{s}</span>
                  <Slider
                    type="single"
                    elevation="raised"
                    aria-label="{s} weight"
                    value={weights[s] ?? 0}
                    onValueChange={(v) => (weights[s] = v)}
                  />
                  <span class="w-12 text-right font-mono text-[13px]">{weights[s] ?? 0}%</span>
                </li>
              {/each}
            </ul>
          {/if}
        </Card>
      {/if}

      {#if step === "strategy"}
        <Card class="gap-5 px-6">
          <h2 class="text-xl font-normal tracking-[-0.3px]">Strategy</h2>
          <Field.Field>
            <Field.Label for="rebalance">Rebalance</Field.Label>
            <Select.Root type="single" value={rebalanceOn} onValueChange={(v) => (rebalanceOn = v)}>
              <Select.Trigger id="rebalance" elevation="raised" class="w-full sm:w-60">
                {rebalanceLabel}
              </Select.Trigger>
              <Select.Content>
                {#each rebalance as r (r.value)}
                  <Select.Item value={r.value} label={r.label}>{r.label}</Select.Item>
                {/each}
              </Select.Content>
            </Select.Root>
            <Field.Description>When the keeper brings weights back to target.</Field.Description>
          </Field.Field>
          <Field.Field>
            <Field.Label for="drift" class="w-full">
              Drift limit
              <span class="ml-auto font-mono text-[13px] font-normal">{drift}%</span>
            </Field.Label>
            <Slider
              type="single"
              id="drift"
              elevation="raised"
              min={1}
              max={20}
              aria-label="Drift limit"
              value={drift}
              onValueChange={(v) => (drift = v)}
            />
            <Field.Description>Rebalance when any weight moves this far from target.</Field.Description>
          </Field.Field>
        </Card>
      {/if}

      {#if step === "fees"}
        <Card class="gap-5 px-6">
          <h2 class="text-xl font-normal tracking-[-0.3px]">Fees</h2>
          <div class="grid gap-5 sm:grid-cols-2">
            <Field.Field>
              <Field.Label for="index-name">Index name</Field.Label>
              <Input id="index-name" placeholder="Mag Four Tilt" bind:value={name} />
            </Field.Field>
            <Field.Field>
              <Field.Label for="index-symbol">Symbol</Field.Label>
              <Input
                id="index-symbol"
                class="font-mono uppercase"
                placeholder="MAGT"
                maxlength={8}
                value={symbol}
                oninput={(e) => (symbol = e.currentTarget.value.toUpperCase())}
              />
            </Field.Field>
          </div>
          <Field.Field>
            <Field.Label for="fee">Management fee (% / yr)</Field.Label>
            <Input id="fee" type="number" min={0} max={5} step={0.25} class="font-mono sm:w-40" bind:value={fee} />
            <Field.Description>Paid to the creator. Entry and exit stay at 0%.</Field.Description>
          </Field.Field>
        </Card>
      {/if}

      {#if step === "review"}
        <Card class="gap-4 px-6">
          <h2 class="text-xl font-normal tracking-[-0.3px]">Review</h2>
          {#if selected.length}
            <AllocationBar {segments} />
          {:else}
            <p class="text-sm text-muted-foreground">No assets picked yet.</p>
          {/if}
          <dl class="text-sm">
            {#each reviewRows as [k, v] (k)}
              <div class="flex justify-between border-b border-border-2 py-3 last:border-b-0">
                <dt class="text-muted-foreground">{k}</dt>
                <dd class="font-medium">{v}</dd>
              </div>
            {/each}
          </dl>
        </Card>
      {/if}

      <div class="flex items-center justify-between">
        <Button elevation="raised" variant="outline" size="lg" disabled={stepIndex === 0} onclick={() => go(-1)}>Back</Button>
        <Button size="lg" disabled={step === "assets" && selected.length === 0} onclick={() => go(1)}>
          {step === "review" ? "Create index" : "Continue"}
        </Button>
      </div>
    </div>

    <Card class="gap-5 px-6">
      <div class="flex items-start gap-4">
        <span class="inline-flex size-[54px] shrink-0 items-center justify-center rounded-xl border border-border bg-muted font-mono text-lg">{(symbol || name || "").charAt(0)}</span>
        <div class="min-w-0 flex-1">
          <div class="font-semibold">{name || "Untitled index"}</div>
          <div class="font-mono text-[13px] text-muted-foreground">{symbol || "SYMBOL"}</div>
        </div>
        <Badge variant="secondary">Simulated</Badge>
      </div>
      {#if selected.length}
        <AllocationBar {segments} />
      {:else}
        <p class="text-sm text-foreground-2">Pick assets to see the allocation.</p>
      {/if}
      <dl class="text-sm">
        {#each summaryRows as [k, v] (k)}
          <div class="flex justify-between py-2">
            <dt class="text-muted-foreground">{k}</dt>
            <dd class="font-medium">{v}</dd>
          </div>
        {/each}
      </dl>
    </Card>
  </div>
</div>

<script lang="ts">
  import { Badge } from "$lib/components/ui/badge";
  import { Card } from "$lib/components/ui/card";
  import { IndexRow, IndexRowHeader } from "$lib/components/ui/index-row";
  import {
    InputGroup,
    InputGroupAddon,
    InputGroupInput,
  } from "$lib/components/ui/input-group";
  import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
  } from "$lib/components/ui/select";
  import { Table, TableBody, TableHeader } from "$lib/components/ui/table";
  import { Toggle } from "$lib/components/ui/toggle";
  import { ToggleGroup, ToggleGroupItem } from "$lib/components/ui/toggle-group";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import { exploreIndexes as indexes, exploreKinds as kinds, exploreSorts as sorts, exploreStrategies as strategies, toIndexRow, indexRowLabels } from "../data";

  let query = $state("");
  let kind = $state("all");
  let preIpo = $state(false);
  let strategy = $state("any");
  let sort = $state("aum");

  const rows = $derived.by(() => {
    const q = query.trim().toLowerCase();
    return indexes.filter(
      (i) =>
        (kind === "all" || i.kind === kind) &&
        (!preIpo || i.tags?.some((tag) => tag.startsWith("Pre-IPO"))) &&
        (!q || `${i.name} ${i.symbol}`.toLowerCase().includes(q)),
    );
  });
</script>


<div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-10 md:px-10">
  <div>
    <div class="flex items-center gap-3">
      <h1 class="text-[44px] leading-tight font-normal tracking-[-1.5px]">Explore</h1>
      <Badge variant="secondary">Simulated</Badge>
    </div>
    <p class="mt-1 text-lg text-muted-foreground">34 indexes</p>
  </div>

  <div class="flex flex-wrap items-center gap-3">
    <InputGroup class="h-10 basis-full sm:flex-1 sm:basis-0 sm:max-w-[440px] sm:min-w-64">
      <InputGroupAddon>
        <IconPlaceholder
          lucide="SearchIcon"
          tabler="IconSearch"
          hugeicons="SearchIcon"
          phosphor="MagnifyingGlassIcon"
          remixicon="RiSearchLine"
        />
      </InputGroupAddon>
      <InputGroupInput bind:value={query} placeholder="Search name, symbol, asset" aria-label="Search indexes" />
    </InputGroup>
    <ToggleGroup type="single" elevation="raised" variant="segmented" value={kind} onValueChange={(v) => v && (kind = v)}>
      {#each kinds as k (k.value)}
        <ToggleGroupItem value={k.value}>{k.label}</ToggleGroupItem>
      {/each}
    </ToggleGroup>
    <Toggle elevation="raised" variant="outline" bind:pressed={preIpo}>Pre-IPO</Toggle>
    <div class="flex items-center gap-3 sm:ml-auto">
      <Select type="single" bind:value={strategy}>
        <SelectTrigger elevation="raised" class="w-40">{strategies.find((s) => s.value === strategy)?.label}</SelectTrigger>
        <SelectContent>
          {#each strategies as s (s.value)}
            <SelectItem value={s.value} label={s.label} />
          {/each}
        </SelectContent>
      </Select>
      <Select type="single" bind:value={sort}>
        <SelectTrigger elevation="raised" class="w-28">{sorts.find((s) => s.value === sort)?.label}</SelectTrigger>
        <SelectContent>
          {#each sorts as s (s.value)}
            <SelectItem value={s.value} label={s.label} />
          {/each}
        </SelectContent>
      </Select>
    </div>
  </div>

  <Card class="px-6 py-2">
    <Table>
      <TableHeader>
        <IndexRowHeader labels={indexRowLabels} />
      </TableHeader>
      <TableBody>
        {#each rows as index (index.symbol)}
          <IndexRow index={toIndexRow(index)} />
        {/each}
      </TableBody>
    </Table>
  </Card>
</div>

<script lang="ts">
  import { Alert, AlertDescription } from "$lib/components/ui/alert";
  import { Badge } from "$lib/components/ui/badge";
  import { Button } from "$lib/components/ui/button";
  import { Card } from "$lib/components/ui/card";
  import { Toaster, toast } from "$lib/components/ui/sonner";
  import * as ToggleGroup from "$lib/components/ui/toggle-group";
  import { faucetSolFaucet as solFaucet, faucetUsdcFaucet as usdcFaucet, faucetWallet as wallet } from "../data";

  const fmt = (n: number) => n.toLocaleString("en-US");

  let amount = $state(usdcFaucet.defaultAmount);
  let usdc = $state(wallet.usdc);
  let busy = $state(false);

  function mint() {
    busy = true;
    setTimeout(() => {
      usdc += amount;
      busy = false;
      toast.success(`${fmt(amount)} USDC minted`, {
        description: "Simulated devnet funds. No real value.",
      });
    }, 600);
  }
</script>

<Toaster elevation="raised" />


<div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
  <div>
    <div class="flex items-center gap-3">
      <h1 class="text-[44px] leading-tight font-normal tracking-[-1.5px]">Faucet</h1>
      <Badge variant="secondary">Simulated</Badge>
    </div>
    <p class="mt-1 text-lg text-muted-foreground">Free SOL for fees and simulated USDC on Devnet. No real value.</p>
  </div>

  <div class="grid gap-6 sm:grid-cols-2">
    <Card class="gap-1 px-6">
      <div class="text-[13px] text-muted-foreground">SOL</div>
      <div class="font-mono text-[32px] leading-tight">{wallet.sol}</div>
    </Card>
    <Card class="gap-1 px-6">
      <div class="text-[13px] text-muted-foreground">USDC</div>
      <div class="font-mono text-[32px] leading-tight">{fmt(usdc)}</div>
    </Card>
  </div>

  <Card class="gap-4 px-7">
    <div>
      <h2 class="text-lg font-medium tracking-[-0.2px]">{solFaucet.title}</h2>
      <p class="mt-0.5 text-[13px] text-muted-foreground">{solFaucet.description}</p>
    </div>
    <Alert class="bg-muted">
      <AlertDescription class="text-foreground">
        The in-app SOL faucet is off on this deployment. Get free devnet SOL at
        <a href={solFaucet.linkHref} class="underline underline-offset-2">{solFaucet.linkLabel}</a>
        for
        <span class="font-mono font-semibold break-all">{wallet.address}</span>
      </AlertDescription>
    </Alert>
    <Button elevation="raised" variant="outline" class="self-start">{solFaucet.buttonLabel}</Button>
  </Card>

  <Card class="gap-4 px-7">
    <div>
      <h2 class="text-lg font-medium tracking-[-0.2px]">{usdcFaucet.title}</h2>
      <p class="mt-0.5 text-[13px] text-muted-foreground">{usdcFaucet.description}</p>
    </div>
    <ToggleGroup.Root
      type="single"
      elevation="raised"
      variant="segmented"
      class="self-start"
      aria-label="Amount"
      value={String(amount)}
      onValueChange={(v) => v && (amount = Number(v))}
    >
      {#each usdcFaucet.amounts as a (a)}
        <ToggleGroup.Item value={String(a)}>{fmt(a)}</ToggleGroup.Item>
      {/each}
    </ToggleGroup.Root>
    <Button size="lg" class="self-start" disabled={busy} onclick={mint}>Get {fmt(amount)} USDC</Button>
  </Card>
</div>

<script lang="ts">
  import { Avatar, AvatarFallback, AvatarGroup } from "$lib/components/ui/avatar";
  import { Button } from "$lib/components/ui/button";
  import { Card } from "$lib/components/ui/card";
  import * as FeedPost from "$lib/components/ui/feed-post";
  import { Textarea } from "$lib/components/ui/textarea";
  import * as ToggleGroup from "$lib/components/ui/toggle-group";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import { feedMaxChars as maxChars, feedMoreUpdates as moreUpdates, feedPosts as posts, feedUpdates as updates, feedViews as views } from "../data";

  let view = $state("following");
  let draft = $state("");
</script>


<div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
  <div class="flex flex-wrap items-end justify-between gap-4">
    <div>
      <h1 class="text-[44px] leading-tight font-normal tracking-[-1.5px]">Feed</h1>
      <p class="mt-1 text-lg text-muted-foreground">Ideas from creators and what happens on chain.</p>
    </div>
    <ToggleGroup.Root
      type="single"
      elevation="raised"
      variant="segmented"
      value={view}
      aria-label="Feed view"
      onValueChange={(v) => v && (view = v)}
    >
      {#each views as v (v.value)}
        <ToggleGroup.Item value={v.value}>{v.label}</ToggleGroup.Item>
      {/each}
    </ToggleGroup.Root>
  </div>

  <Card class="gap-0 p-0">
    <Textarea
      bind:value={draft}
      maxlength={maxChars}
      placeholder="Share a thesis, a trade idea or an update…"
      aria-label="New post"
      class="min-h-[96px] resize-none rounded-none border-0 bg-transparent px-6 pt-6 shadow-none focus-visible:shadow-none"
    />
    <div class="mx-6 flex flex-wrap items-center gap-3 border-t border-border-2 py-4">
      <span class="flex-1 text-[13px] text-muted-foreground">Plain text · up to 2 links · needs on-chain activity</span>
      <span class="font-mono text-[13px] text-muted-foreground">{draft.length}/{maxChars}</span>
      <Button onclick={() => (draft = "")}>Post</Button>
    </div>
  </Card>

  {#if view === "all"}
    {#each posts as p (p.id)}
      <FeedPost.Root >
        <FeedPost.Header name={p.name} handle={p.handle} time={p.time} initials={p.initials} />
        <FeedPost.Content>{p.text}</FeedPost.Content>
        <FeedPost.Index title={p.index.title} description={p.index.description}>
          {#snippet icon()}
            <IconPlaceholder
              lucide="ChartLineIcon"
              tabler="IconChartLine"
              hugeicons="ChartIcon"
              phosphor="ChartLineIcon"
              remixicon="RiLineChartLine"
            />
          {/snippet}
          {#snippet action()}
            <Button size="sm">Join</Button>
          {/snippet}
        </FeedPost.Index>
        <FeedPost.Footer>
          <FeedPost.Stat>
            <IconPlaceholder
              lucide="HeartIcon"
              tabler="IconHeart"
              hugeicons="FavouriteIcon"
              phosphor="HeartIcon"
              remixicon="RiHeartLine"
            />
            {p.likes}
          </FeedPost.Stat>
          <FeedPost.Stat>
            <IconPlaceholder
              lucide="MessageSquareIcon"
              tabler="IconMessage"
              hugeicons="Comment01Icon"
              phosphor="ChatIcon"
              remixicon="RiChat1Line"
            />
            {p.replies}
          </FeedPost.Stat>
        </FeedPost.Footer>
      </FeedPost.Root>
    {/each}
  {/if}

  <Card class="gap-0 p-0">
    <ul class="px-6">
      {#each updates as u (u.id)}
        <li class="flex items-center gap-3 border-b border-border-2 py-4">
          <span class="inline-flex size-10 shrink-0 items-center justify-center rounded-full border border-border bg-muted font-mono text-xs">{u.initial}</span>
          <div class="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1 text-[14px]">
            <span class="font-mono font-semibold">{u.who}</span>
            <span class="text-foreground-2">{u.action}{u.detail ? ` · ${u.detail}` : ""}</span>
            <span class="text-muted-foreground">·</span>
            <span class="font-mono font-semibold">{u.symbol}</span>
            <AvatarGroup>
              {#each u.tokens as t (t)}
                <Avatar class="size-7">
                  <AvatarFallback class="text-[10px]">{t}</AvatarFallback>
                </Avatar>
              {/each}
            </AvatarGroup>
          </div>
          <span class="text-[13px] whitespace-nowrap text-muted-foreground">{u.ago}</span>
        </li>
      {/each}
    </ul>
    <div class="px-6 py-4 text-[13px] text-muted-foreground">Show {moreUpdates} more updates</div>
  </Card>

  <div class="flex justify-center">
    <Button elevation="raised" variant="outline" size="lg">Load more</Button>
  </div>
</div>

<script lang="ts">
  import { AreaChart } from "layerchart";
  import { AllocationBar } from "$lib/components/ui/allocation-bar";
  import { Avatar, AvatarFallback } from "$lib/components/ui/avatar";
  import { Badge } from "$lib/components/ui/badge";
  import * as Breadcrumb from "$lib/components/ui/breadcrumb";
  import { Button } from "$lib/components/ui/button";
  import { Card } from "$lib/components/ui/card";
  import * as Chart from "$lib/components/ui/chart";
  import { JoinPanel } from "$lib/components/ui/join-panel";
  import * as Table from "$lib/components/ui/table";
  import * as Tabs from "$lib/components/ui/tabs";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import { detailAllocation as allocation, detailAssets as assets, detailChart as chart, detailCreator as creator, detailIndex as index, detailJoinRows as joinRows, detailJoinTabs as joinTabs, detailMaxAmount as maxAmount, detailQuickAmounts as quickAmounts, detailRanges as ranges, detailShareActions as shareActions, detailStatGroups as statGroups } from "../data";

  let range = $state("1M");
  let side = $state("join");
  let amount = $state("100");

  const points = chart.map((p, i) => ({ i, ...p }));
  const config = {
    mag4: { label: "MAG4", color: "var(--chart-1)" },
    spyx: { label: "SPYx", color: "var(--muted-foreground)" },
  } satisfies Chart.ChartConfig;
</script>


<div class="border-b border-border">
  <div class="mx-auto flex max-w-[1328px] flex-wrap items-center justify-between gap-3 px-4 py-3 md:px-10">
    <Breadcrumb.Root>
      <Breadcrumb.List class="text-base">
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#/explore">Explore</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Breadcrumb.Page>{index.name}</Breadcrumb.Page>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb.Root>
    <div class="flex items-center gap-2">
      <Button variant="outline" elevation="raised">Clone</Button>
      <Button variant="outline" elevation="raised">Follow</Button>
      <Button variant="outline" elevation="raised" size="icon" aria-label="Share">
        <IconPlaceholder
          lucide="ArrowUpIcon"
          tabler="IconArrowUp"
          hugeicons="ArrowUpIcon"
          phosphor="ArrowUpIcon"
          remixicon="RiArrowUpLine"
        />
      </Button>
    </div>
  </div>
</div>

<div class="mx-auto grid w-full max-w-[1328px] items-start gap-8 px-4 py-8 md:px-10 lg:grid-cols-[minmax(0,1fr)_380px]">
  <div class="flex min-w-0 flex-col gap-6">
    <div class="flex flex-wrap items-center gap-3">
      <Avatar class="size-10">
        <AvatarFallback>{index.initial}</AvatarFallback>
      </Avatar>
      <h1 class="text-[28px] leading-tight font-medium tracking-[-0.5px]">
        {index.name}<span class="font-normal text-muted-foreground"> · ({index.symbol})</span>
      </h1>
      {#each index.tags as tag (tag)}
        <Badge variant="secondary">{tag}</Badge>
      {/each}
    </div>

    <div class="flex flex-wrap items-start justify-between gap-6">
      <div class="flex flex-wrap gap-x-12 gap-y-4">
        <div>
          <div class="flex flex-wrap items-center gap-3">
            <span class="text-[56px] leading-none font-light tracking-[-2px]">{index.nav}</span>
            <Badge variant="success" shape="number" class="font-mono">{index.navDelta}</Badge>
          </div>
          <p class="mt-2 text-[13px] text-muted-foreground">{index.navNote}</p>
        </div>
        <div>
          <div class="flex flex-wrap items-center gap-3">
            <span class="text-[56px] leading-none font-light tracking-[-2px] text-success-text">{index.ret7d}</span>
            <Badge variant="success" shape="number" class="font-mono">{index.retVs}</Badge>
          </div>
          <p class="mt-2 text-[13px] text-muted-foreground">{index.retNote}</p>
        </div>
      </div>
      <Button variant="outline" elevation="raised">Compare index</Button>
    </div>

    <Chart.Container {config} class="aspect-auto h-[260px] w-full">
      <AreaChart
        data={points}
        x="i"
        series={[
          { key: "spyx", label: config.spyx.label, color: "var(--color-spyx)" },
          { key: "mag4", label: config.mag4.label, color: "var(--color-mag4)" },
        ]}
        props={{
          area: { "fill-opacity": 0.18 },
          xAxis: { format: (v: number) => chart[v]?.day ?? "", ticks: 10 },
          yAxis: { format: () => "" },
        }}
      >
        {#snippet tooltip()}
          <Chart.Tooltip indicator="dot" labelFormatter={(v: number) => chart[v]?.day ?? ""} />
        {/snippet}
      </AreaChart>
    </Chart.Container>

    <div class="flex flex-wrap items-center justify-between gap-3">
      <Tabs.Root bind:value={range}>
        <Tabs.List variant="line">
          {#each ranges as r (r)}
            <Tabs.Trigger value={r} class="font-mono text-xs">{r}</Tabs.Trigger>
          {/each}
        </Tabs.List>
      </Tabs.Root>
      <div class="flex items-center gap-4 text-[13px]">
        <span class="flex items-center gap-1.5"><span class="size-2 rounded-full bg-chart-1"></span>{index.symbol}</span>
        <span class="flex items-center gap-1.5"><span class="size-2 rounded-full bg-muted-foreground"></span>SPYx</span>
      </div>
    </div>

    <div class="grid gap-4 md:grid-cols-3">
      {#each statGroups as group (group[0]?.label)}
        <div class="rounded-xl border border-sk-bd bg-sk-bg px-[18px] py-3 shadow-sunken">
          {#each group as row (row.label)}
            <div class="flex items-center justify-between py-1.5 text-[13px]">
              <span class="text-muted-foreground">{row.label}</span>
              <span class="font-mono">{row.value}</span>
            </div>
          {/each}
        </div>
      {/each}
    </div>

    <div>
      <h2 class="mb-3 text-lg font-medium">Assets</h2>
      <Card class="gap-4 px-6 py-2">
        <Table.Root>
          <Table.Header>
            <Table.Row>
              <Table.Head>Asset</Table.Head>
              <Table.Head numeric>Weight</Table.Head>
              <Table.Head numeric>Target</Table.Head>
              <Table.Head numeric>Drift</Table.Head>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            {#each assets as a (a.symbol)}
              <Table.Row>
                <Table.Cell>
                  <div class="flex items-center gap-3">
                    <Avatar class="size-7">
                      <AvatarFallback class="text-[10px]">{a.initial}</AvatarFallback>
                    </Avatar>
                    <span class="font-mono text-[13px]">{a.symbol}</span>
                  </div>
                </Table.Cell>
                <Table.Cell numeric class="font-semibold">{a.weight}</Table.Cell>
                <Table.Cell numeric class="text-muted-foreground">{a.target}</Table.Cell>
                <Table.Cell numeric trend={a.trend}>{a.drift}</Table.Cell>
              </Table.Row>
            {/each}
          </Table.Body>
        </Table.Root>
        <AllocationBar class="pb-3" segments={allocation} />
      </Card>
    </div>
  </div>

  <div class="flex flex-col gap-4">
    <JoinPanel currency="USDC"

      class="w-full"
      tabs={joinTabs}
      bind:tab={side}
      bind:amount
      onMax={() => (amount = maxAmount.replace(",", ""))}
      amountSize="lg"
      maxLabel="Max {maxAmount}"
      {quickAmounts}
      rows={joinRows}
      joinLabel="{side === 'join' ? 'Join' : 'Redeem'} with {amount || 0} USDC"
      footnote="Self-custodied · Redeem anytime"
    />

    <Card class="gap-3 px-5">
      <h2 class="text-sm font-semibold">Share</h2>
      <div class="flex flex-wrap gap-2">
        {#each shareActions as s (s)}
          <Button variant="outline" elevation="raised" size="sm">{s}</Button>
        {/each}
      </div>
    </Card>

    <Card class="gap-3 px-5">
      <h2 class="text-sm font-semibold">Created by</h2>
      <div class="flex items-center gap-3">
        <Avatar class="size-9">
          <AvatarFallback class="font-mono text-xs">{creator.initial}</AvatarFallback>
        </Avatar>
        <div>
          <div class="font-mono text-[13px]">{creator.address}</div>
          <div class="text-xs text-muted-foreground">{creator.meta}</div>
        </div>
      </div>
    </Card>
  </div>
</div>

<script lang="ts">
  import { AllocationBar } from "$lib/components/ui/allocation-bar";
  import { Badge } from "$lib/components/ui/badge";
  import { Button } from "$lib/components/ui/button";
  import { Card } from "$lib/components/ui/card";
  import { SiteFooter } from "$lib/components/ui/site-footer";
  import { JoinPanel } from "$lib/components/ui/join-panel";
  import { PricingPlan } from "$lib/components/ui/pricing-plan";
  import { SiteHeader, SiteHeaderBrand } from "$lib/components/ui/site-header";
  import { StatStrip, StatStripItem } from "$lib/components/ui/stat-tile";
  import { StepCard } from "$lib/components/ui/step-card";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import { landingCta as cta, landingNav as nav, landingFooter as footer, landingHero as hero, landingIndex as index, landingJoinRows as joinRows, landingPricing as pricing, landingProblems as problems, landingProblemTitle as problemTitle, landingStats as stats, landingStatsNote as statsNote, landingSteps as steps, landingStepsTitle as stepsTitle } from "../data";
</script>

{#snippet action()}
  <div class="flex items-center gap-3">
    <Badge variant="outline" class="max-sm:hidden">Devnet</Badge>
    <Button elevation="raised" data-go="markets">Launch app</Button>
  </div>
{/snippet}

{#snippet footerBrand()}
  <SiteHeaderBrand name="Stockbreak" elevation="raised" />
{/snippet}

{#snippet planAction()}
  <Button elevation="raised" variant="outline" data-go="markets">Launch app</Button>
{/snippet}

<div class="min-h-svh overflow-x-clip bg-background text-foreground">
  <div class="border-b border-border">
    <div class="mx-auto max-w-[1328px] px-4 md:px-10">
      <SiteHeader name="Stockbreak" elevation="raised" class="border-0 bg-transparent px-0 shadow-none" links={nav} {action} />
    </div>
  </div>

  <main class="mx-auto flex max-w-[1328px] flex-col gap-24 px-4 pt-14 pb-16 md:gap-32 md:px-10 md:pt-20">
    <section class="grid items-center gap-14 lg:grid-cols-[1fr_1.05fr]">
      <div class="flex flex-col gap-6">
        <p class="text-sm text-muted-foreground">{hero.eyebrow}</p>
        <h1 class="text-[48px] leading-[1.02] font-medium tracking-[-2.4px] md:text-[68px]">{hero.title}</h1>
        <p class="max-w-[520px] text-lg text-muted-foreground">{hero.lead}</p>
        <div class="flex flex-wrap gap-3">
          <Button elevation="raised" size="lg" data-go="markets">
            Launch app
            <IconPlaceholder
              lucide="ArrowUpRightIcon"
              tabler="IconArrowUpRight"
              hugeicons="ArrowUpRightIcon"
              phosphor="ArrowUpRightIcon"
              remixicon="RiArrowRightUpLine"
              class="size-3.5"
            />
          </Button>
          <Button elevation="raised" variant="outline" size="lg">See how it works</Button>
        </div>
        <div class="flex flex-col gap-1.5 text-xs text-muted-foreground">
          <span>{hero.facts}</span>
          <span class="flex items-center gap-2 text-muted-foreground-2">
            <span class="size-1.5 rounded-full bg-brand"></span>
            {hero.disclaimer}
          </span>
        </div>
      </div>

      <div class="relative lg:pb-24">
        <Card elevation="raised" class="gap-5 p-6 lg:mr-10">
          <div class="flex flex-wrap items-center gap-3">
            <span class="inline-flex size-11 items-center justify-center rounded-lg border border-border bg-muted text-brand-text">
              <IconPlaceholder
                lucide="ChartLineIcon"
                tabler="IconChartLine"
                hugeicons="ChartLineData01Icon"
                phosphor="ChartLineUpIcon"
                remixicon="RiLineChartLine"
                class="size-5"
              />
            </span>
            <div class="min-w-0 flex-1">
              <div class="flex items-baseline gap-2">
                <span class="text-lg font-medium">{index.name}</span>
                <span class="font-mono text-[11px] text-muted-foreground">{index.ticker}</span>
              </div>
              <div class="text-xs text-muted-foreground">{index.creator}</div>
            </div>
            <div class="flex gap-1.5">
              {#each index.tags as t (t)}
                <Badge variant="outline">{t}</Badge>
              {/each}
            </div>
          </div>
          <div class="flex flex-wrap items-end gap-6">
            <span class="text-[44px] leading-none font-normal tracking-[-1.5px]">{index.price}</span>
            <div class="flex gap-4 text-xs text-muted-foreground">
              <div class="flex flex-col gap-1">
                24h
                <Badge variant="success" shape="number">{index.d24}</Badge>
              </div>
              <div class="flex flex-col gap-1">
                7d
                <Badge variant="success" shape="number">{index.d7}</Badge>
              </div>
            </div>
          </div>
          <div class="flex items-center justify-between text-xs text-muted-foreground">
            <span>{index.benchmark}</span>
            <span class="flex gap-3 font-mono">
              <span class="text-brand-text">— {index.ticker}</span>
              <span>- - SPYx</span>
            </span>
          </div>
          <svg
            viewBox="0 0 400 120"
            class="h-32 w-full text-brand"
            role="img"
            aria-label="Index versus benchmark"
            preserveAspectRatio="none"
          >
            <path d={`${index.line} L400 120 L0 120 Z`} fill="currentColor" opacity="0.1" />
            <path
              d={index.benchmarkLine}
              fill="none"
              stroke="var(--muted-foreground)"
              stroke-width="1.2"
              stroke-dasharray="3 3"
              vector-effect="non-scaling-stroke"
            />
            <path
              d={index.line}
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              vector-effect="non-scaling-stroke"
            />
          </svg>
          <AllocationBar segments={index.segments} />
        </Card>
        <JoinPanel currency="USDC"
          elevation="raised"
          amount="1,000"
          rows={joinRows}
          class="mt-4 w-full lg:absolute lg:right-0 lg:bottom-0 lg:mt-0 lg:w-80"
        />
      </div>
    </section>

    <section class="flex flex-col gap-3">
      <StatStrip elevation="raised">
        {#each stats as s (s.label)}
          <StatStripItem value={s.value} label={s.label} />
        {/each}
      </StatStrip>
      <p class="text-xs text-muted-foreground-2">{statsNote}</p>
    </section>

    <section id="how" class="flex flex-col gap-12">
      <h2 class="text-[34px] leading-[1.1] font-normal tracking-[-1.2px] md:text-[44px]">
        {problemTitle.lead} <span class="text-muted-foreground">{problemTitle.muted}</span>
      </h2>
      <div class="grid gap-10 md:grid-cols-3">
        {#each problems as p (p.index)}
          <div class="flex flex-col gap-3">
            <span class="font-mono text-xs text-muted-foreground">{p.index}</span>
            <h3 class="text-xl font-normal tracking-[-0.3px]">{p.title}</h3>
            <p class="text-[15px] leading-relaxed text-muted-foreground">{p.body}</p>
          </div>
        {/each}
      </div>
    </section>

    <section class="flex flex-col gap-10">
      <h2 class="text-[34px] leading-[1.1] font-normal tracking-[-1.2px] md:text-[44px]">
        {stepsTitle.lead} <span class="text-muted-foreground">{stepsTitle.muted}</span>
      </h2>
      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {#each steps as s (s.index)}
          <StepCard elevation="raised" index={s.index} title={s.title} description={s.description} />
        {/each}
      </div>
    </section>

    <section id="pricing" class="flex flex-col gap-10">
      <h2 class="text-[34px] leading-[1.1] font-normal tracking-[-1.2px] md:text-[44px]">
        Simple by design. <span class="text-muted-foreground">Fees live on-chain.</span>
      </h2>
      <div class="grid gap-4 md:grid-cols-3">
        {#each pricing as p (p.name)}
          <PricingPlan
            elevation="raised"
            name={p.name}
            tagline={p.tagline}
            price={p.price}
            priceNote={p.note}
            featuresLead={p.lead}
            features={p.features}
            action={planAction}
          />
        {/each}
      </div>
    </section>

    <Card elevation="raised" class="flex-col gap-6 p-8 md:flex-row md:items-center md:justify-between md:p-12">
      <div class="flex flex-col gap-3">
        <h2 class="text-[34px] leading-tight font-normal tracking-[-1.2px] md:text-[44px]">{cta.title}</h2>
        <p class="text-muted-foreground">{cta.body}</p>
      </div>
      <div class="flex flex-wrap gap-3">
        <Button elevation="raised" size="lg" data-go="markets">Launch app</Button>
        <Button elevation="raised" variant="outline" size="lg">Read the code</Button>
      </div>
    </Card>

    <SiteFooter
      elevation="raised"
      brand={footerBrand}
      description={footer.description}
      columns={footer.columns}
      legal={footer.legal}
      note={footer.note}
    />
  </main>
</div>

<script lang="ts">
  import { Badge } from "$lib/components/ui/badge";
  import { Card } from "$lib/components/ui/card";
  import { IndexRow, IndexRowHeader } from "$lib/components/ui/index-row";
  import { LeaderboardPodium } from "$lib/components/ui/leaderboard-podium";
  import { Table, TableBody, TableHeader } from "$lib/components/ui/table";
  import { Tabs, TabsList, TabsTrigger } from "$lib/components/ui/tabs";
  import { ToggleGroup, ToggleGroupItem } from "$lib/components/ui/toggle-group";
  import { leaderboardBenchmark as benchmark, leaderboardIndexes as indexes, leaderboardKinds as kinds, leaderboardPeriods as periods, leaderboardPodium as podium, leaderboardTabs as tabs, toIndexRow, indexRowLabels } from "../data";

  let tab = $state("indexes");
  let period = $state("7d");
  let kind = $state("all");

</script>


<div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-10 md:px-10">
  <div class="flex items-center gap-3">
    <h1 class="text-[44px] leading-tight font-normal tracking-[-1.5px]">Leaderboard</h1>
    <Badge variant="secondary">Simulated</Badge>
  </div>

  <div class="flex flex-wrap items-end justify-between gap-4">
    <Tabs bind:value={tab}>
      <TabsList variant="line">
        {#each tabs as t (t.value)}
          <TabsTrigger value={t.value}>{t.label}</TabsTrigger>
        {/each}
      </TabsList>
    </Tabs>
    <div class="flex flex-wrap items-center gap-3">
      <ToggleGroup type="single" elevation="raised" variant="segmented" value={period} onValueChange={(v) => v && (period = v)}>
        {#each periods as p (p.value)}
          <ToggleGroupItem value={p.value}>{p.label}</ToggleGroupItem>
        {/each}
      </ToggleGroup>
      <ToggleGroup type="single" elevation="raised" variant="segmented" value={kind} onValueChange={(v) => v && (kind = v)}>
        {#each kinds as k (k.value)}
          <ToggleGroupItem value={k.value}>{k.label}</ToggleGroupItem>
        {/each}
      </ToggleGroup>
    </div>
  </div>
  <p class="-mt-3 text-sm text-muted-foreground">{benchmark}</p>

  <LeaderboardPodium variant="cards" valueLabel="AUM" countLabel="Holders" entries={podium} />

  <Card class="px-6 py-2">
    <Table>
      <TableHeader>
        <IndexRowHeader rank labels={indexRowLabels} />
      </TableHeader>
      <TableBody>
        {#each indexes as index, i (index.symbol)}
          <IndexRow index={toIndexRow(index)} rank={i + 1} delta="pill" />
        {/each}
      </TableBody>
    </Table>
  </Card>
</div>

<script lang="ts">
  import { Badge } from "$lib/components/ui/badge";
  import { Button } from "$lib/components/ui/button";
  import { Card } from "$lib/components/ui/card";
  import { IndexRow, IndexRowHeader } from "$lib/components/ui/index-row";
  import { Table, TableBody, TableHeader } from "$lib/components/ui/table";
  import { TickerStrip } from "$lib/components/ui/ticker-strip";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import { marketsActivity as activity, marketsCreators as creators, marketsHumanVsAi as humanVsAi, marketsIndexes as indexes, tickers, toIndexRow, indexRowLabels } from "../data";
</script>


{#snippet cardTop(title: string, action?: string, href?: string)}
  <div class="flex items-baseline justify-between">
    <h2 class="text-xl font-normal tracking-[-0.3px]">{title}</h2>
    {#if action}
      <a {href} class="text-[13px] text-muted-foreground hover:text-foreground">{action}</a>
    {/if}
  </div>
{/snippet}

{#snippet mini(m: { label: string; value: string; note: string })}
  <div class="rounded-xl border border-sk-bd bg-sk-bg p-[18px] shadow-sunken">
    <div class="text-[13px] text-muted-foreground">{m.label}</div>
    <div class="my-2 text-[34px] leading-none font-light tracking-[-0.5px] text-success-text">{m.value}</div>
    <div class="text-[13px] text-muted-foreground">{m.note}</div>
  </div>
{/snippet}

<div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
<div class="flex flex-wrap items-end justify-between gap-4">
  <div>
    <div class="flex items-center gap-3">
      <h1 class="text-[44px] leading-tight font-normal tracking-[-1.5px]">Markets</h1>
      <Badge variant="secondary">Simulated</Badge>
    </div>
    <p class="mt-1 text-lg text-muted-foreground">
      Tokenized stock indexes. Create one, share it, or join someone else’s.
    </p>
  </div>
  <Button size="lg" data-go="create">
    Create index
    <IconPlaceholder
      lucide="PlusIcon"
      tabler="IconPlus"
      hugeicons="PlusSignIcon"
      phosphor="PlusIcon"
      remixicon="RiAddLine"
    />
  </Button>
</div>

<TickerStrip  items={tickers} />

<Card class="gap-4 px-6">
  {@render cardTop("Top indexes", "View all", "#/explore")}
  <Table>
    <TableHeader>
      <IndexRowHeader labels={indexRowLabels} />
    </TableHeader>
    <TableBody>
      {#each indexes as index (index.symbol)}
        <IndexRow index={toIndexRow(index)} delta="pill" />
      {/each}
    </TableBody>
  </Table>
</Card>

<div class="grid items-start gap-6 lg:grid-cols-3">
  <Card class="@container gap-4 px-6">
    {@render cardTop("Human vs AI")}
    <div class="grid gap-3 @[400px]:grid-cols-2">
      {@render mini(humanVsAi.human)}
      {@render mini(humanVsAi.ai)}
    </div>
  </Card>

  <Card class="gap-3 px-6">
    {@render cardTop("Top creators", "See all", "#/leaderboard")}
    <ul>
      {#each creators as c (c.address)}
        <li class="flex items-center gap-3 border-b border-border-2 py-3 last:border-b-0">
          <span
            class="inline-flex size-9 items-center justify-center rounded-full border border-border bg-muted font-mono text-xs"
          >
            {c.rank}
          </span>
          <div class="min-w-0 flex-1">
            <div class="font-mono text-[13px] font-semibold">{c.address}</div>
            <div class="text-xs text-muted-foreground">{c.meta}</div>
          </div>
          <div class="text-right">
            <div class="font-mono text-[13px] font-semibold">{c.aum}</div>
            <div class="text-xs text-muted-foreground">{c.joiners}</div>
          </div>
        </li>
      {/each}
    </ul>
  </Card>

  <Card class="gap-3 px-6">
    {@render cardTop("Latest activity")}
    <ul>
      {#each activity as a, i (i)}
        <li class="flex items-center gap-2.5 border-b border-border-2 py-3 text-[13px] last:border-b-0">
          <span class="size-1.5 rounded-full {a.tone === 'brand' ? 'bg-success' : 'bg-warning'}"></span>
          <span class="font-mono font-semibold">{a.symbol}</span>
          <span class="min-w-0 flex-1 truncate text-foreground-2">{a.text}</span>
          <span class="text-muted-foreground">{a.ago}</span>
        </li>
      {/each}
    </ul>
  </Card>
</div>
</div>

<script lang="ts">
  import { Avatar, AvatarFallback, AvatarGroup } 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 { Sparkline } from "$lib/components/ui/index-row";
  import * as Table from "$lib/components/ui/table";
  import { portfolioLooseAssets as looseAssets, portfolioLooseNote as looseNote, portfolioPositions as positions, portfolioTotals as totals, portfolioYourIndexes as yourIndexes } from "../data";

  const small = [
    { label: "USDC", ...totals.usdc },
    { label: "SOL", ...totals.sol },
  ];
</script>


{#snippet tokensStack(tokens: string[])}
  <AvatarGroup>
    {#each tokens as t (t)}
      <Avatar class="size-8">
        <AvatarFallback class="text-[10px]">{t}</AvatarFallback>
      </Avatar>
    {/each}
  </AvatarGroup>
{/snippet}

<div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
  <div>
    <div class="flex items-center gap-3">
      <h1 class="text-[44px] leading-tight font-normal tracking-[-1.5px]">Portfolio</h1>
      <Badge variant="secondary">Simulated</Badge>
    </div>
    <p class="mt-1 text-lg text-muted-foreground">Your positions, loose assets and indexes.</p>
  </div>

  <div class="grid items-stretch gap-6 lg:grid-cols-[1.4fr_1fr_1fr]">
    <Card class="gap-1.5 px-7">
      <div class="text-[13px] text-muted-foreground">Total value</div>
      <div class="text-[56px] leading-none font-light tracking-[-2px]">{totals.value}</div>
      <div class="mt-3 flex items-center gap-3 text-[13px] text-muted-foreground">
        <Badge variant="destructive" shape="number">{totals.delta}</Badge>
        {totals.deltaNote}
      </div>
      <div class="mt-1 text-[13px] text-muted-foreground">{totals.breakdown}</div>
    </Card>
    {#each small as t (t.label)}
      <Card class="gap-1 px-6">
        <div class="text-[13px] text-muted-foreground">{t.label}</div>
        <div class="font-mono text-[32px] leading-tight">{t.value}</div>
        <div class="text-[13px] text-muted-foreground">{t.note}</div>
      </Card>
    {/each}
  </div>

  <Card class="gap-4 px-6">
    <div class="flex items-center justify-between gap-3">
      <h2 class="text-xl font-normal tracking-[-0.3px]">Positions</h2>
      <Button elevation="raised" variant="outline" size="sm">Redeem all</Button>
    </div>
    <Table.Root>
      <Table.Header>
        <Table.Row>
          <Table.Head>Index</Table.Head>
          <Table.Head class="text-right">Shares</Table.Head>
          <Table.Head class="text-right">Price</Table.Head>
          <Table.Head class="text-right">Value</Table.Head>
          <Table.Head class="text-right">PnL</Table.Head>
          <Table.Head class="text-right">7d</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {#each positions as p (p.symbol)}
          {@const down = p.pnl.startsWith("-")}
          <Table.Row>
            <Table.Cell>
              <div class="flex items-center gap-3">
                {@render tokensStack(p.tokens)}
                <div class="flex items-baseline gap-2">
                  <span class="font-medium">{p.name}</span>
                  <span class="font-mono text-[11.5px] text-muted-foreground">{p.symbol}</span>
                </div>
              </div>
            </Table.Cell>
            <Table.Cell class="text-right font-mono text-[13px]">{p.shares}</Table.Cell>
            <Table.Cell class="text-right font-mono text-[13px]">{p.price}</Table.Cell>
            <Table.Cell class="text-right font-mono text-[13px]">{p.value}</Table.Cell>
            <Table.Cell class="text-right font-mono text-[13px] {down ? 'text-destructive-text' : 'text-success-text'}">
              {p.pnl} <span class="text-[11.5px]">{p.pnlPct}</span>
            </Table.Cell>
            <Table.Cell class="text-right">
              <Sparkline data={p.spark} tone={down ? "down" : "up"} width={64} />
            </Table.Cell>
          </Table.Row>
        {/each}
      </Table.Body>
    </Table.Root>
  </Card>

  <div class="grid items-start gap-6 lg:grid-cols-2">
    <Card class="gap-3 px-6">
      <div class="flex items-center justify-between gap-3">
        <h2 class="text-xl font-normal tracking-[-0.3px]">Loose assets</h2>
        <Button elevation="raised" variant="outline" size="sm">Swap all to USDC</Button>
      </div>
      <p class="text-[13px] leading-relaxed text-muted-foreground">
        Assets in your wallet that are not in any index, worth about
        <b class="font-semibold text-foreground">{looseNote}</b>. Swap them back to USDC or use them to finish a join.
      </p>
      <ul>
        {#each looseAssets as a (a.symbol)}
          <li class="flex items-center gap-3 border-b border-border-2 py-3 last:border-b-0">
            <span class="inline-flex size-8 items-center justify-center rounded-full border border-border bg-muted font-mono text-[11px]">{a.letter}</span>
            <span class="flex-1 font-mono text-[14px] font-semibold">{a.symbol}</span>
            <span class="font-mono text-[13px] text-muted-foreground">{a.amount}</span>
          </li>
        {/each}
      </ul>
    </Card>

    <Card class="gap-3 px-6">
      <div class="flex items-center justify-between gap-3">
        <h2 class="text-xl font-normal tracking-[-0.3px]">Your indexes</h2>
        <Button elevation="raised" variant="outline" size="sm">Create index</Button>
      </div>
      <ul>
        {#each yourIndexes as x (x.symbol)}
          <li class="flex items-center gap-3 border-b border-border-2 py-3 last:border-b-0">
            {@render tokensStack(x.tokens)}
            <div class="min-w-0 flex-1">
              <div class="flex items-baseline gap-2">
                <span class="font-medium">{x.name}</span>
                <span class="font-mono text-[11.5px] text-muted-foreground">{x.symbol}</span>
              </div>
              <div class="text-xs text-muted-foreground">AUM {x.aum}</div>
            </div>
            <Button elevation="raised" variant="outline" size="sm">Manage</Button>
          </li>
        {/each}
      </ul>
    </Card>
  </div>
</div>

<script lang="ts">
  import { AgentIdenticon } from "$lib/components/ui/agent-card";
  import { Avatar, AvatarFallback, AvatarGroup } 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 { Sparkline } from "$lib/components/ui/index-row";
  import * as Progress from "$lib/components/ui/progress";
  import * as Table from "$lib/components/ui/table";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import { profileCreated as created, profilePositions as positions, profileProfile as profile } from "../data";

  const progress = ((profile.xp - profile.levelStartXp) / (profile.nextLevelXp - profile.levelStartXp)) * 100;
</script>


{#snippet tokensStack(tokens: string[])}
  <AvatarGroup>
    {#each tokens as t (t)}
      <Avatar class="size-8">
        <AvatarFallback class="text-[10px]">{t}</AvatarFallback>
      </Avatar>
    {/each}
  </AvatarGroup>
{/snippet}

{#snippet nameTag(name: string, symbol: string)}
  <div class="flex items-baseline gap-2">
    <span class="font-medium">{name}</span>
    <span class="font-mono text-[11.5px] text-muted-foreground">{symbol}</span>
  </div>
{/snippet}

<div class="mx-auto flex w-full max-w-[1328px] flex-col gap-6 px-4 py-8 md:px-10">
  <div class="flex flex-wrap items-center justify-between gap-4">
    <div class="flex items-center gap-5">
      <AgentIdenticon seed={profile.address} size={96} class="rounded-2xl" />
      <div>
        <h1 class="font-mono text-[40px] leading-tight font-normal tracking-[-1px]">{profile.short}</h1>
        <div class="mt-1 flex items-center gap-2 font-mono text-[13px] text-foreground-2">
          {profile.address}
          <Button variant="ghost" size="icon-xs" aria-label="Copy address">
            <IconPlaceholder
              lucide="CopyIcon"
              tabler="IconCopy"
              hugeicons="Copy01Icon"
              phosphor="CopyIcon"
              remixicon="RiFileCopyLine"
            />
          </Button>
        </div>
        <div class="mt-1 text-[13px] text-muted-foreground">
          {profile.followers} followers · {profile.following} following
        </div>
      </div>
    </div>
    <Button elevation="raised" variant="outline">Edit profile</Button>
  </div>

  <div class="grid items-stretch gap-6 lg:grid-cols-[minmax(0,1fr)_2fr]">
    <Card class="gap-3 px-6">
      <div class="flex items-end justify-between">
        <span class="text-[13px] text-muted-foreground">Level</span>
        <span class="text-[34px] leading-none font-light">{profile.level}</span>
      </div>
      <Progress.Root value={progress} variant="brand" aria-label="Level progress" />
      <div class="text-[13px] text-muted-foreground">{profile.xp} XP · next level at {profile.nextLevelXp}</div>
    </Card>
    <Card class="gap-3 px-6">
      <span class="text-[13px] text-muted-foreground">Badges</span>
      <div class="flex flex-wrap gap-2">
        {#each profile.badges as b (b)}
          <Badge variant="secondary">{b}</Badge>
        {/each}
      </div>
    </Card>
  </div>

  <Card class="gap-4 px-6">
    <h2 class="text-xl font-normal tracking-[-0.3px]">Indexes created</h2>
    <Table.Root>
      <Table.Header>
        <Table.Row>
          <Table.Head>Index</Table.Head>
          <Table.Head class="text-right">Share price</Table.Head>
          <Table.Head class="text-right">7d</Table.Head>
          <Table.Head class="text-right">AUM</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {#each created as c (c.symbol)}
          <Table.Row>
            <Table.Cell>
              <div class="flex items-center gap-3">
                {@render tokensStack(c.tokens)}
                {@render nameTag(c.name, c.symbol)}
              </div>
            </Table.Cell>
            <Table.Cell class="text-right font-mono text-[13px]">{c.price}</Table.Cell>
            <Table.Cell class="text-right"><Badge variant="success" shape="number">{c.change}</Badge></Table.Cell>
            <Table.Cell class="text-right font-mono text-[13px]">{c.aum}</Table.Cell>
          </Table.Row>
        {/each}
      </Table.Body>
    </Table.Root>
  </Card>

  <Card class="gap-4 px-6">
    <h2 class="text-xl font-normal tracking-[-0.3px]">Positions</h2>
    <Table.Root>
      <Table.Header>
        <Table.Row>
          <Table.Head>Index</Table.Head>
          <Table.Head class="text-right">Shares</Table.Head>
          <Table.Head class="text-right">Price</Table.Head>
          <Table.Head class="text-right">Value</Table.Head>
          <Table.Head class="text-right">PnL</Table.Head>
          <Table.Head class="text-right">7d</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {#each positions as p (p.symbol)}
          {@const down = p.pnl.startsWith("-")}
          <Table.Row>
            <Table.Cell>
              <div class="flex items-center gap-3">
                {@render tokensStack(p.tokens)}
                {@render nameTag(p.name, p.symbol)}
              </div>
            </Table.Cell>
            <Table.Cell class="text-right font-mono text-[13px]">{p.shares}</Table.Cell>
            <Table.Cell class="text-right font-mono text-[13px]">{p.price}</Table.Cell>
            <Table.Cell class="text-right font-mono text-[13px]">{p.value}</Table.Cell>
            <Table.Cell class="text-right font-mono text-[13px] {down ? 'text-destructive-text' : 'text-success-text'}">
              {p.pnl} <span class="text-[11.5px]">{p.pnlPct}</span>
            </Table.Cell>
            <Table.Cell class="text-right">
              <Sparkline data={p.spark} tone={down ? "down" : "up"} width={64} />
            </Table.Cell>
          </Table.Row>
        {/each}
      </Table.Body>
    </Table.Root>
  </Card>
</div>

// Sample data for the Stockbreak app (all pages). Plain TS, no framework imports; shared by react.tsx, vue.vue and svelte.svelte.
// Each page owns a prefixed section (exploreIndexes, feedPosts, ...); tickers, the index row type and the sparkline helpers are shared.
export interface TickerItem {
  symbol: string;
  price: string;
  change: string;
}

export interface IndexRowData {
  name: string;
  symbol: string;
  tokens: { label: string }[];
  tags?: string[];
  creator: string;
  price: string;
  change: string;
  aum: string;
  holders: number;
  spark?: number[];
  /** Row link, used by the app navigation (`#/index` opens Index detail). */
  href?: string;
}

const up = [1.0, 1.01, 1.03, 1.02, 1.04, 1.04, 1.05, 1.06];
const down = [1.0, 0.99, 0.98, 0.985, 0.97, 0.972, 0.97, 0.965];
const pre = "Pre-IPO · PreStocks";
const withHref = <T extends IndexRowData>(rows: T[]): T[] =>
  rows.map((row) => ({ ...row, href: "#/index" }));
/** Maps a Stockbreak index onto the neutral shape of the `index-row` item (`avatars`, `owner`, `value`, `count`). */
export const toIndexRow = (i: IndexRowData) => ({
  ...i,
  avatars: i.tokens,
  owner: i.creator,
  value: i.aum,
  count: i.holders,
});
/** Column labels of the Stockbreak index table (`IndexRowHeader labels`). */
export const indexRowLabels = {
  name: "Index",
  owner: "Creator",
  price: "Price",
  change: "7d",
  value: "AUM",
  count: "Holders",
  trend: "30d",
};
const t = (...labels: string[]) => labels.map((label) => ({ label }));

// ---- markets ----
export const tickers: TickerItem[] = [
  { symbol: "AAPLx", price: "$339.86", change: "+0.42%" },
  { symbol: "NVDAx", price: "$227.06", change: "+0.81%" },
  { symbol: "TSLAx", price: "$370.21", change: "-0.31%" },
  { symbol: "MSFTx", price: "$513.15", change: "+0.12%" },
  { symbol: "GOOGLx", price: "$340.43", change: "+0.55%" },
  { symbol: "AMZNx", price: "$247.93", change: "-0.20%" },
  { symbol: "METAx", price: "$730.50", change: "+1.02%" },
  { symbol: "SPYx", price: "$767.86", change: "+0.30%" },
];

const marketsIndexesRaw: IndexRowData[] = [
  {
    name: "Mag Four Tilt",
    symbol: "MAGT",
    tokens: [{ label: "A" }, { label: "N" }, { label: "T" }],
    tags: [pre, "Clone"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+1.12%",
    aum: "$120.1K",
    holders: 2,
    spark: up,
  },
  {
    name: "AI Frontier",
    symbol: "AIFR",
    tokens: [{ label: "N" }, { label: "M" }, { label: "G" }],
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.01",
    change: "+0.84%",
    aum: "$82.4K",
    holders: 2,
    spark: up,
  },
  {
    name: "Defense & Space",
    symbol: "DFSP",
    tokens: [{ label: "S" }, { label: "A" }, { label: "T" }],
    tags: [pre],
    creator: "7Ge1…kXSq",
    price: "$0.9791",
    change: "-2.09%",
    aum: "$29K",
    holders: 1,
    spark: down,
  },
  {
    name: "Mag Four Mirror",
    symbol: "MAGM",
    tokens: [{ label: "A" }, { label: "N" }, { label: "T" }],
    tags: [pre, "Follows MAG4"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+0.21%",
    aum: "$19.8K",
    holders: 1,
    spark: up,
  },
  {
    name: "Magnificent Four",
    symbol: "MAG4",
    tokens: [{ label: "A" }, { label: "N" }, { label: "T" }],
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.00",
    change: "+2.38%",
    aum: "$14.1K",
    holders: 14,
    spark: up,
  },
];

export const marketsIndexes = withHref(marketsIndexesRaw);

export const marketsHumanVsAi = {
  human: {
    label: "Human · median 7d",
    value: "+0.84%",
    note: "34 indexes · best MAGT",
  },
  ai: { label: "AI · median 7d", value: "—", note: "0 indexes" },
};

export const marketsCreators = [
  {
    rank: "G",
    address: "GbFK…ZUWS",
    meta: "Level 2 · 2 indexes",
    aum: "$140K",
    joiners: "1 joiners",
  },
  {
    rank: "8",
    address: "8FcD…cL9y",
    meta: "Level 4 · 2 indexes",
    aum: "$96.5K",
    joiners: "14 joiners",
  },
  {
    rank: "7",
    address: "7Ge1…kXSq",
    meta: "Level 2 · 2 indexes",
    aum: "$32K",
    joiners: "1 joiners",
  },
];

export const marketsActivity = [
  {
    symbol: "MAGT",
    text: "Joined · 983.75 shares",
    ago: "5d ago",
    tone: "brand",
  },
  {
    symbol: "PHMAKER",
    text: "Joined · 987.03 shares",
    ago: "5d ago",
    tone: "warning",
  },
  { symbol: "PHMAKER", text: "Created", ago: "5d ago", tone: "brand" },
  {
    symbol: "MM41",
    text: "Claimed creator fees",
    ago: "5d ago",
    tone: "warning",
  },
  { symbol: "MM41", text: "Paused", ago: "5d ago", tone: "brand" },
] as const;

// ---- explore ----
export type exploreKind = "human" | "ai";

const exploreIndexesRaw: (IndexRowData & { kind: exploreKind })[] = [
  {
    name: "Mag Four Tilt",
    symbol: "MAGT",
    tokens: t("A", "N", "T"),
    tags: [pre, "Clone"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+1.12%",
    aum: "$120.1K",
    holders: 2,
    spark: up,
    kind: "human",
  },
  {
    name: "AI Frontier",
    symbol: "AIFR",
    tokens: t("N", "M", "G"),
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.01",
    change: "+0.84%",
    aum: "$82.4K",
    holders: 2,
    spark: up,
    kind: "human",
  },
  {
    name: "Defense & Space",
    symbol: "DFSP",
    tokens: t("S", "A", "T"),
    tags: [pre],
    creator: "7Ge1…kXSq",
    price: "$0.9791",
    change: "-2.09%",
    aum: "$29K",
    holders: 1,
    spark: down,
    kind: "human",
  },
  {
    name: "Mag Four Mirror",
    symbol: "MAGM",
    tokens: t("A", "N", "T"),
    tags: [pre, "Follows MAG4"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+0.21%",
    aum: "$19.8K",
    holders: 1,
    spark: up,
    kind: "human",
  },
  {
    name: "Magnificent Four",
    symbol: "MAG4",
    tokens: t("A", "N", "T"),
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.00",
    change: "+2.38%",
    aum: "$14.1K",
    holders: 14,
    spark: up,
    kind: "human",
  },
  {
    name: "Atlas Momentum",
    symbol: "ATLS",
    tokens: t("A", "T", "L"),
    tags: ["AI"],
    creator: "CB7H…iTLG",
    price: "$0.9893",
    change: "-0.64%",
    aum: "$4,570",
    holders: 3,
    spark: down,
    kind: "ai",
  },
  {
    name: "Steady Megacaps",
    symbol: "MEGA",
    tokens: t("A", "M", "G"),
    creator: "7Ge1…kXSq",
    price: "$1.00",
    change: "-0.54%",
    aum: "$3,013",
    holders: 2,
    spark: down,
    kind: "human",
  },
  {
    name: "PHONEMAKER",
    symbol: "PHMAKER",
    tokens: t("A", "S"),
    creator: "abHa…umq7",
    price: "$0.9942",
    change: "+0.12%",
    aum: "$981.41",
    holders: 1,
    spark: up,
    kind: "human",
  },
  {
    name: "BIG FIVE",
    symbol: "BIGF",
    tokens: t("A", "M", "G"),
    creator: "abHa…umq7",
    price: "$0.9932",
    change: "+0.08%",
    aum: "$980.48",
    holders: 1,
    spark: up,
    kind: "human",
  },
  {
    name: "Pilot 1866",
    symbol: "PL1866",
    tokens: t("A", "N"),
    creator: "Diat…T4RL",
    price: "$1.00",
    change: "+0.02%",
    aum: "$99.18",
    holders: 1,
    spark: up,
    kind: "human",
  },
];

export const exploreIndexes = withHref(exploreIndexesRaw);

export const exploreKinds = [
  { value: "all", label: "All" },
  { value: "human", label: "Human" },
  { value: "ai", label: "AI" },
] as const;

export const exploreStrategies = [
  { value: "any", label: "Any strategy" },
  { value: "clone", label: "Clone" },
  { value: "follow", label: "Follows" },
];

export const exploreSorts = [
  { value: "aum", label: "AUM" },
  { value: "change", label: "7d change" },
  { value: "holders", label: "Holders" },
];

// ---- leaderboard ----
export interface leaderboardAllocationSegment {
  label: string;
  value: number;
}

export interface leaderboardPodiumEntry {
  rank: 1 | 2 | 3;
  name: string;
  symbol: string;
  owner: string;
  change: string;
  value: string;
  count: number;
  spark: number[];
  allocation: leaderboardAllocationSegment[];
}

export const leaderboardPodium: leaderboardPodiumEntry[] = [
  {
    rank: 1,
    name: "Mag Four Tilt",
    symbol: "MAGT",
    owner: "GbFK…ZUWS",
    change: "+1.12%",
    value: "$120.1K",
    count: 2,
    spark: up,
    allocation: [
      { label: "AAPLx", value: 30 },
      { label: "NVDAx", value: 40 },
      { label: "TSLAx", value: 20 },
      { label: "SPACEX-pre", value: 10 },
    ],
  },
  {
    rank: 2,
    name: "AI Frontier",
    symbol: "AIFR",
    owner: "8FcD…cL9y",
    change: "+0.84%",
    value: "$82.4K",
    count: 2,
    spark: up,
    allocation: [
      { label: "NVDAx", value: 30 },
      { label: "MSFTx", value: 25 },
      { label: "GOOGLx", value: 20 },
      { label: "OPENAI-pre", value: 15 },
      { label: "ANTHRP-pre", value: 10 },
    ],
  },
  {
    rank: 3,
    name: "Defense & Space",
    symbol: "DFSP",
    owner: "7Ge1…kXSq",
    change: "-2.09%",
    value: "$29K",
    count: 1,
    spark: down,
    allocation: [
      { label: "SPACEX-pre", value: 40 },
      { label: "ANDURL-pre", value: 30 },
      { label: "TSLAx", value: 30 },
    ],
  },
];

const leaderboardIndexesRaw: IndexRowData[] = [
  {
    name: "Mag Four Tilt",
    symbol: "MAGT",
    tokens: t("A", "N", "T"),
    tags: [pre, "Clone"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+1.12%",
    aum: "$120.1K",
    holders: 2,
    spark: up,
  },
  {
    name: "AI Frontier",
    symbol: "AIFR",
    tokens: t("N", "M", "G"),
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.01",
    change: "+0.84%",
    aum: "$82.4K",
    holders: 2,
    spark: up,
  },
  {
    name: "Defense & Space",
    symbol: "DFSP",
    tokens: t("S", "A", "T"),
    tags: [pre],
    creator: "7Ge1…kXSq",
    price: "$0.9791",
    change: "-2.09%",
    aum: "$29K",
    holders: 1,
    spark: down,
  },
  {
    name: "Mag Four Mirror",
    symbol: "MAGM",
    tokens: t("A", "N", "T"),
    tags: [pre, "Follows MAG4"],
    creator: "GbFK…ZUWS",
    price: "$1.00",
    change: "+0.21%",
    aum: "$19.8K",
    holders: 1,
    spark: up,
  },
  {
    name: "Magnificent Four",
    symbol: "MAG4",
    tokens: t("A", "N", "T"),
    tags: [pre],
    creator: "8FcD…cL9y",
    price: "$1.00",
    change: "+2.38%",
    aum: "$14.1K",
    holders: 14,
    spark: up,
  },
];

export const leaderboardIndexes = withHref(leaderboardIndexesRaw);

export const leaderboardTabs = [
  { value: "indexes", label: "Indexes" },
  { value: "creators", label: "Creators" },
];

export const leaderboardPeriods = [
  { value: "24h", label: "24H" },
  { value: "7d", label: "7D" },
  { value: "30d", label: "30D" },
  { value: "all", label: "ALL" },
];

export const leaderboardKinds = [
  { value: "all", label: "All" },
  { value: "human", label: "Human" },
  { value: "ai", label: "AI" },
];

export const leaderboardBenchmark = "SPYx 7D: +0.48%";

// ---- create ----
export interface createAsset {
  symbol: string;
  name: string;
  price: string;
  /** Source tag shown as a badge next to the symbol. */
  tag?: string;
  detail: string;
}

export const createSteps = [
  { value: "assets", label: "Assets" },
  { value: "weights", label: "Weights" },
  { value: "strategy", label: "Strategy" },
  { value: "fees", label: "Fees" },
  { value: "review", label: "Review" },
] as const;

export type createStepValue = (typeof createSteps)[number]["value"];

export const createAssets: createAsset[] = [
  {
    symbol: "USDC",
    name: "USD Coin",
    detail: "USD Coin · stable",
    price: "$1.00",
  },
  { symbol: "AAPLx", name: "Apple", detail: "Apple", price: "$339.86" },
  { symbol: "NVDAx", name: "NVIDIA", detail: "NVIDIA", price: "$227.06" },
  { symbol: "TSLAx", name: "Tesla", detail: "Tesla", price: "$370.21" },
  { symbol: "MSFTx", name: "Microsoft", detail: "Microsoft", price: "$513.15" },
  { symbol: "GOOGLx", name: "Alphabet", detail: "Alphabet", price: "$340.43" },
  { symbol: "AMZNx", name: "Amazon", detail: "Amazon", price: "$247.93" },
  { symbol: "METAx", name: "Meta", detail: "Meta", price: "$730.50" },
  {
    symbol: "SPACEX-pre",
    name: "SpaceX",
    tag: "PreStocks",
    detail: "SpaceX (pre-IPO) · pre-IPO",
    price: "$117.49",
  },
  {
    symbol: "OPENAI-pre",
    name: "OpenAI",
    tag: "PreStocks",
    detail: "OpenAI (pre-IPO) · pre-IPO",
    price: "$1,379.64",
  },
  {
    symbol: "ANTHRP-pre",
    name: "Anthropic",
    tag: "PreStocks",
    detail: "Anthropic (pre-IPO) · pre-IPO",
    price: "$1,061.26",
  },
];

export const createRebalance = [
  { value: "drift", label: "On drift" },
  { value: "daily", label: "Daily" },
  { value: "weekly", label: "Weekly" },
  { value: "never", label: "Never" },
];

export const createDefaults = {
  drift: 5,
  fee: 1,
  entry: 0,
  exit: 0,
  rebalance: "drift",
};

// ---- feed ----
export const feedViews = [
  { value: "following", label: "Following" },
  { value: "all", label: "All" },
];

export interface feedUpdate {
  id: string;
  who: string;
  initial: string;
  action: string;
  detail?: string;
  symbol: string;
  tokens: string[];
  ago: string;
}

export const feedUpdates: feedUpdate[] = [
  {
    id: "u1",
    who: "abHa…umq7",
    initial: "a",
    action: "joined",
    detail: "983.75 shares",
    symbol: "MAGT",
    tokens: ["A", "N", "T"],
    ago: "6d ago",
  },
  {
    id: "u2",
    who: "abHa…umq7",
    initial: "a",
    action: "joined",
    detail: "987.03 shares",
    symbol: "PHMAKER",
    tokens: ["G", "A"],
    ago: "6d ago",
  },
  {
    id: "u3",
    who: "abHa…umq7",
    initial: "a",
    action: "created",
    symbol: "PHMAKER",
    tokens: ["G", "A"],
    ago: "6d ago",
  },
  {
    id: "u4",
    who: "HzXY…iuZU",
    initial: "H",
    action: "redeemed",
    detail: "98.19 shares",
    symbol: "MAG4",
    tokens: ["A", "N", "T"],
    ago: "6d ago",
  },
  {
    id: "u5",
    who: "8FcD…cL9y",
    initial: "8",
    action: "created",
    symbol: "MAG4",
    tokens: ["A", "N", "T"],
    ago: "6d ago",
  },
  {
    id: "u6",
    who: "GbFK…ZUWS",
    initial: "G",
    action: "joined",
    detail: "120.40 shares",
    symbol: "MAGT",
    tokens: ["A", "N", "T"],
    ago: "6d ago",
  },
];

export interface feedPost {
  id: string;
  name: string;
  handle: string;
  time: string;
  initials: string;
  text: string;
  index: { title: string; description: string };
  likes: number;
  replies: number;
}

export const feedPosts: feedPost[] = [
  {
    id: "p1",
    name: "Dewi Lestari",
    handle: "@dewi",
    time: "2h",
    initials: "DL",
    text: "Rebalanced MAG4 after NVDAx drifted to 32.4%. Fees this week: 4.1 USDC.",
    index: { title: "MAG4 · Magnificent Four", description: "$1.00 · +2.38%" },
    likes: 24,
    replies: 6,
  },
  {
    id: "p2",
    name: "GbFK…ZUWS",
    handle: "creator",
    time: "1d",
    initials: "GB",
    text: "Tilting toward pre-IPO names for the next epoch. Weights lock at launch, so read the mandate first.",
    index: { title: "MAGT · Mag Four Tilt", description: "$1.00 · +1.12%" },
    likes: 9,
    replies: 2,
  },
];

export const feedMoreUpdates = 6;
export const feedMaxChars = 500;

// ---- agents ----
export const agentsMcpUrl = "https://stockbreak.fun/api/mcp";

export interface agentsAgentStat {
  label: string;
  value: string;
}

export const agentsAgents: {
  name: string;
  address: string;
  tag: string;
  stats: agentsAgentStat[];
  note: string;
}[] = [
  {
    name: "XSD",
    address: "dG6r…4mSr",
    tag: "AI",
    stats: [
      { label: "Indexes", value: "0" },
      { label: "AUM", value: "$0.00" },
      { label: "Best 7d", value: "—" },
    ],
    note: "Not running an index yet.",
  },
];

export const agentsClients: {
  value: string;
  label: string;
  steps: string[];
}[] = [
  {
    value: "claude-ai",
    label: "Claude.ai",
    steps: [
      "Settings → Connectors → Add custom connector",
      "Name: Stockbreak",
      `URL:  ${agentsMcpUrl}`,
    ],
  },
  {
    value: "chatgpt",
    label: "ChatGPT",
    steps: [
      "Settings → Connectors → Advanced → Developer mode",
      "Create connector, name it Stockbreak",
      `MCP server URL: ${agentsMcpUrl}`,
    ],
  },
  {
    value: "claude-code",
    label: "Claude Code",
    steps: [`claude mcp add --transport http stockbreak ${agentsMcpUrl}`],
  },
];

export const agentsApiKeyNote =
  "Create an agent and an API key under Your agents, then add the key as a header in a client that supports it (Claude Code, Cursor, your own script). Claude.ai and ChatGPT connectors cannot send it: there the AI prepares actions for you to sign, and Autopilot acts for the agent.";

export const agentsHeaderSnippet = '--header "Authorization: Bearer sbk_…"';

// ---- portfolio ----
export const portfolioTotals = {
  value: "$4,970.69",
  delta: "-$14.76",
  deltaNote: "-0.30% over 7d",
  breakdown: "Positions $3,930.69 · USDC $1,040.00",
  usdc: { value: "1,040", note: "Simulated · devnet" },
  sol: { value: "81.654", note: "For transaction fees" },
};

export interface portfolioPosition {
  name: string;
  symbol: string;
  tokens: string[];
  shares: string;
  price: string;
  value: string;
  pnl: string;
  pnlPct: string;
  spark: number[];
}

export const portfolioPositions: portfolioPosition[] = [
  {
    name: "Mag Four Tilt",
    symbol: "MAGT",
    tokens: ["A", "N", "T"],
    shares: "983.75",
    price: "$1.00",
    value: "$987.52",
    pnl: "+$3.80",
    pnlPct: "+0.39%",
    spark: up,
  },
  {
    name: "PHONEMAKER",
    symbol: "PHMAKER",
    tokens: ["G", "A"],
    shares: "987.03",
    price: "$0.9942",
    value: "$981.26",
    pnl: "-$7.67",
    pnlPct: "-0.78%",
    spark: down,
  },
  {
    name: "BIG FIVE",
    symbol: "BIGF",
    tokens: ["A", "N", "M"],
    shares: "987.03",
    price: "$0.9932",
    value: "$980.32",
    pnl: "-$7.70",
    pnlPct: "-0.78%",
    spark: down,
  },
  {
    name: "Magnificent Four",
    symbol: "MAG4",
    tokens: ["A", "N", "T"],
    shares: "980.2",
    price: "$1.00",
    value: "$981.59",
    pnl: "-$2.59",
    pnlPct: "-0.26%",
    spark: down,
  },
];

export const portfolioLooseAssets = [
  { symbol: "AAPLx", letter: "A", amount: "0.0071" },
  { symbol: "NVDAx", letter: "N", amount: "0.0058" },
  { symbol: "MSFTx", letter: "M", amount: "0" },
  { symbol: "METAx", letter: "M", amount: "0" },
  { symbol: "SPACEX-pre", letter: "S", amount: "0.0051" },
];

export const portfolioLooseNote = "$0.00";

export const portfolioYourIndexes = [
  { name: "PHONEMAKER", symbol: "PHMAKER", aum: "$981.41", tokens: ["G", "A"] },
  { name: "BIG FIVE", symbol: "BIGF", aum: "$980.48", tokens: ["A", "N", "M"] },
];

// ---- profile ----
export const profileProfile = {
  short: "abHa…umq7",
  address: "abHaSb…ERumq7",
  followers: 0,
  following: 0,
  level: 2,
  xp: 260,
  nextLevelXp: 450,
  levelStartXp: 150,
  badges: ["First index", "First join", "Early on devnet"],
};

export interface profileCreated {
  name: string;
  symbol: string;
  tokens: string[];
  price: string;
  change: string;
  aum: string;
}

export const profileCreated: profileCreated[] = [
  {
    name: "PHONEMAKER",
    symbol: "PHMAKER",
    tokens: ["G", "A"],
    price: "$0.9942",
    change: "+0.12%",
    aum: "$981.41",
  },
  {
    name: "BIG FIVE",
    symbol: "BIGF",
    tokens: ["A", "N", "M"],
    price: "$0.9932",
    change: "+0.08%",
    aum: "$980.48",
  },
];

export interface profilePosition {
  name: string;
  symbol: string;
  tokens: string[];
  shares: string;
  price: string;
  value: string;
  pnl: string;
  pnlPct: string;
  spark: number[];
}

export const profilePositions: profilePosition[] = [
  {
    name: "Mag Four Tilt",
    symbol: "MAGT",
    tokens: ["A", "N", "T"],
    shares: "983.75",
    price: "$1.00",
    value: "$987.52",
    pnl: "+$3.80",
    pnlPct: "+0.39%",
    spark: up,
  },
  {
    name: "PHONEMAKER",
    symbol: "PHMAKER",
    tokens: ["G", "A"],
    shares: "987.03",
    price: "$0.9942",
    value: "$981.26",
    pnl: "-$7.67",
    pnlPct: "-0.78%",
    spark: down,
  },
  {
    name: "BIG FIVE",
    symbol: "BIGF",
    tokens: ["A", "N", "M"],
    shares: "987.03",
    price: "$0.9932",
    value: "$980.32",
    pnl: "-$7.70",
    pnlPct: "-0.78%",
    spark: down,
  },
  {
    name: "Magnificent Four",
    symbol: "MAG4",
    tokens: ["A", "N", "T"],
    shares: "980.2",
    price: "$1.00",
    value: "$981.59",
    pnl: "-$2.59",
    pnlPct: "-0.26%",
    spark: down,
  },
];

// ---- faucet ----
export const faucetWallet = {
  address: "abHaSbWAxCNM2DhyGe5U2eLRZzViRDSVLLMD7ERumq7",
  sol: 81.654,
  usdc: 1040,
};

export const faucetSolFaucet = {
  title: "1. SOL for transaction fees",
  description:
    "Sends 0.1 SOL from the app’s faucet wallet. Limited per wallet per day.",
  linkLabel: "faucet.solana.com",
  linkHref: "https://faucet.solana.com",
  buttonLabel: "Open faucet.solana.com",
};

export const faucetUsdcFaucet = {
  title: "2. Simulated USDC",
  description:
    "Minted by the mock market. Up to 10,000 per request. You sign one transaction.",
  amounts: [1000, 5000, 10000],
  defaultAmount: 5000,
};

// ---- landing ----
export type landingLink = { label: string; href: string };
export type landingSegment = { label: string; value: number };
export type landingFeature = { index: string; title: string; body: string };
export type landingStep = { index: string; title: string; description: string };
export type landingStat = { value: string; label: string };
export type landingFooterColumn = { title: string; links: landingLink[] };

export const landingNav: landingLink[] = [
  { label: "How it works", href: "#how" },
  { label: "Pre-IPO", href: "#pre-ipo" },
  { label: "AI agents", href: "#agents" },
  { label: "Creators", href: "#creators" },
  { label: "FAQ", href: "#faq" },
  { label: "GitHub", href: "#github" },
];

export const landingHero = {
  eyebrow: "The index launchpad for tokenized stocks, on Solana",
  title: "Turn your stock thesis into an index token.",
  lead: "Pick up to 10 tokenized stocks and pre-IPO names, set the weights and the rules. Others join with USDC in one click or one Blink. A Solana vault program enforces the rebalancing — not us.",
  facts:
    "Self-custodied · Redeem anytime · Rules enforced on-chain · PreStocks pre-IPO",
  disclaimer:
    "Live on Solana devnet. Assets are simulated; prices follow real market data. Not investment advice.",
};

export const landingIndex = {
  name: "Magnificent Four",
  ticker: "MAG4",
  creator: "by @alice",
  tags: ["Pre-IPO·PreStocks", "Simulated"],
  price: "$0.9998",
  d24: "+0.53%",
  d7: "+2.38%",
  benchmark: "Is it beating SPYx?",
  segments: [
    { label: "AAPLx", value: 40 },
    { label: "NVDAx", value: 30 },
    { label: "TSLAx", value: 20 },
    { label: "SPACEX-pre", value: 10 },
  ] satisfies landingSegment[],
  // viewBox 0 0 400 120 paths (index line + dashed benchmark)
  line: "M0 92 C30 92 50 94 80 86 C110 78 130 70 160 66 C190 62 210 66 240 56 C270 46 300 38 330 34 C360 30 380 26 400 22",
  benchmarkLine: "M0 94 C60 92 120 88 180 84 C240 80 300 74 400 66",
};

export const landingJoinRows = [{ label: "Estimated shares", value: "982.09" }];

export const landingStats: landingStat[] = [
  { value: "[N]K+", label: "holders, all-time high" },
  { value: "$[N]B", label: "volume in 30 days" },
  { value: "[N]%+", label: "of activity outside US hours" },
  { value: "[N]K", label: "holders of Anthropic pre-IPO" },
];
export const landingStatsNote =
  "Market data placeholders — fill with sourced figures before publishing.";

export const landingProblemTitle = {
  lead: "Tokenized stocks are here.",
  muted: "Portfolios aren't.",
};
export const landingProblems: landingFeature[] = [
  {
    index: "01",
    title: "Every token is one ticker.",
    body: "If you believe in AI infrastructure plus Anthropic and SpaceX, you're managing ten positions by hand — and rebalancing them yourself, forever.",
  },
  {
    index: "02",
    title: "Creators can't ship their thesis.",
    body: "Packaging a thesis into something people can buy still means starting a fund. Copy apps are off-chain, US-only and run on subscriptions.",
  },
  {
    index: "03",
    title: "Pre-IPO tokens come with deadlines.",
    body: "After an IPO, pre-IPO tokens must be swapped into the listed stock before a deadline — or they expire. Holders who forget lose everything.",
  },
];

export const landingStepsTitle = {
  lead: "From thesis to token",
  muted: "in four steps.",
};
export const landingSteps: landingStep[] = [
  {
    index: "01",
    title: "Create",
    description:
      "Pick up to 10 assets, set weights, choose a strategy and your fees.",
  },
  {
    index: "02",
    title: "Share",
    description:
      "Every index gets a link, an OG image, a feed card and a Solana Blink.",
  },
  {
    index: "03",
    title: "Join",
    description:
      "Investors pay in USDC. Stockbreak swaps into every asset and mints share tokens.",
  },
  {
    index: "04",
    title: "Stay balanced",
    description:
      "When weights drift past your rule, a permissionless keeper rebalances atomically.",
  },
];

export const landingCta = {
  title: "Your thesis deserves a ticker.",
  body: "Create an index in minutes. Share it anywhere. Let the program keep it honest.",
};

export const landingPricing = [
  {
    name: "Holder",
    lead: "Included:",
    tagline: "Join any index",
    price: "0% to join",
    note: "Plus the 1% management fee set by each creator.",
    features: [
      "Browse and join every index",
      "Live NAV and feeds",
      "Leaderboard and portfolio",
    ],
  },
  {
    name: "Creator",
    lead: "Everything in Holder, plus:",
    tagline: "Launch your own index",
    price: "1% fee to you",
    note: "Earn the management fee on every holder's share.",
    features: [
      "Custom weights and mandate",
      "Pre-IPO sleeve",
      "Share cards and Blinks",
    ],
  },
  {
    name: "Keeper",
    lead: "Everything in Creator, plus:",
    tagline: "Automate rebalancing",
    price: "5% drift trigger",
    note: "Keeper rebalances when weights drift past your limit.",
    features: [
      "Scheduled rebalances",
      "Agent wallet and MCP",
      "Priority execution",
    ],
  },
];

export const landingFooter = {
  description: "Index launchpad for tokenized stocks, on Solana.",
  columns: [
    {
      title: "Product",
      links: [
        { label: "Explore", href: "#explore" },
        { label: "Leaderboard", href: "#leaderboard" },
        { label: "Create index", href: "#create" },
      ],
    },
    {
      title: "Developers",
      links: [
        { label: "Docs", href: "#docs" },
        { label: "MCP server", href: "#mcp" },
        { label: "GitHub", href: "#github" },
      ],
    },
    {
      title: "Company",
      links: [
        { label: "About", href: "#about" },
        { label: "Careers", href: "#careers" },
        { label: "News", href: "#news" },
      ],
    },
  ] satisfies landingFooterColumn[],
  legal: "© 2026 Stockbreak",
  note: "Devnet only · simulated assets · not investment advice",
};

// ---- detail ----
export interface detailAllocationSegment {
  label: string;
  value: number;
}

export const detailIndex = {
  name: "Magnificent Four",
  symbol: "MAG4",
  initial: "M",
  tags: ["Pre-IPO · PreStocks", "Simulated"],
  nav: "1.0000",
  navDelta: "+0.0055 (+0.55%)",
  navNote: "Share price · NAV updated 2m ago",
  ret7d: "+2.38%",
  retVs: "vs SPYx +1.9%",
  retNote: "7d return · benchmark SPYx",
};

export interface detailChartPoint {
  day: string;
  mag4: number;
  spyx: number;
}

const detailMag4 = [
  0.0, 0.0, -0.05, 0.3, 1.2, 2.2, 2.9, 3.2, 3.4, 3.5, 3.5, 3.9, 4.3, 4.6, 5.1,
  5.8, 6.2, 6.6, 7.0,
];
export const detailChart: detailChartPoint[] = detailMag4.map((v, i) => ({
  day: String(12 + i),
  mag4: v,
  spyx: Math.round(((i * 2.2) / 18) * 100) / 100,
}));

export const detailRanges = ["1D", "1W", "1M", "3M", "1Y", "ALL"];

export const detailStatGroups: { label: string; value: string }[][] = [
  [
    { label: "AUM", value: "$14.1K" },
    { label: "Holders", value: "14" },
    { label: "Clones", value: "2" },
    { label: "Followers", value: "1" },
  ],
  [
    { label: "Rebalancing", value: "Drift > 5%" },
    { label: "Max slippage", value: "1%" },
    { label: "Cooldown", value: "1 min" },
    { label: "Keeper", value: "Allowed" },
  ],
  [
    { label: "Mgmt fee", value: "1% / yr" },
    { label: "Entry / exit", value: "0% / 0%" },
    { label: "Timelock", value: "120s" },
    { label: "Created", value: "Sep 20" },
  ],
];

export const detailAssets = [
  {
    symbol: "AAPLx",
    initial: "A",
    weight: "41.2%",
    target: "40%",
    drift: "+1.2%",
    trend: "up",
  },
  {
    symbol: "NVDAx",
    initial: "N",
    weight: "29.1%",
    target: "30%",
    drift: "-0.9%",
    trend: "down",
  },
  {
    symbol: "TSLAx",
    initial: "T",
    weight: "19.8%",
    target: "20%",
    drift: "-0.2%",
    trend: "down",
  },
  {
    symbol: "SPACEX-pre",
    initial: "S",
    weight: "9.9%",
    target: "10%",
    drift: "-0.1%",
    trend: "down",
  },
] as const;

export const detailAllocation: detailAllocationSegment[] = [
  { label: "AAPLx", value: 40 },
  { label: "NVDAx", value: 30 },
  { label: "TSLAx", value: 20 },
  { label: "SPACEX-pre", value: 10 },
];

export const detailJoinTabs = [
  { value: "join", label: "Join" },
  { value: "redeem", label: "Redeem" },
];

export const detailQuickAmounts = [
  { label: "$10", value: "10" },
  { label: "$50", value: "50" },
  { label: "$100", value: "100" },
  { label: "Max", value: "1240" },
];

export const detailJoinRows = [
  { label: "Estimated shares", value: "99.86" },
  { label: "Entry fee", value: "0%" },
  { label: "Route", value: "USDC → 4 swaps" },
  { label: "Network fee", value: "~$0.001" },
];

export const detailMaxAmount = "1,240";

export const detailShareActions = ["Copy link", "Blink", "X post"];

export const detailCreator = {
  initial: "8",
  address: "8FcD…cL9y",
  meta: "Level 4 · 2 indexes",
};

// ---- app shell ----
// Hash links are intercepted by the app root (`#/<page>`), so the same data drives the navbar and the sidebar.
export const appNav = [
  { label: "Markets", href: "#/markets" },
  { label: "Explore", href: "#/explore" },
  { label: "Feed", href: "#/feed" },
  { label: "Leaderboard", href: "#/leaderboard" },
  { label: "AI", href: "#/agents" },
  { label: "Portfolio", href: "#/portfolio" },
];

export const sidebarNav = [
  { label: "Dashboard", icon: "dashboard", href: "#/markets" },
  { label: "Explore", icon: "explore", href: "#/explore" },
  { label: "Feed", icon: "feed", href: "#/feed" },
  { label: "Leaderboard", icon: "leaderboard", href: "#/leaderboard" },
  { label: "AI agents", icon: "agents", href: "#/agents" },
  { label: "Create index", icon: "create", href: "#/create" },
  { label: "Portfolio", icon: "portfolio", href: "#/portfolio" },
  { label: "Settings", icon: "settings", href: "#/profile" },
] as const;

export const watchlist = [
  {
    symbol: "MAG4",
    price: "1.0000",
    change: "+2.38%",
    letter: "M",
    color: "var(--chart-1)",
  },
  {
    symbol: "MAGT",
    price: "1.0012",
    change: "+1.12%",
    letter: "T",
    color: "var(--chart-2)",
  },
  {
    symbol: "AIFR",
    price: "1.0104",
    change: "+0.84%",
    letter: "A",
    color: "var(--chart-3)",
  },
  {
    symbol: "ATLS",
    price: "0.9893",
    change: "-0.64%",
    letter: "A",
    color: "var(--chart-4)",
  },
] as const;

/** Page ids and the nav entry each one highlights, per layout. */
export type PageId =
  | "markets"
  | "explore"
  | "index"
  | "leaderboard"
  | "create"
  | "feed"
  | "agents"
  | "portfolio"
  | "profile"
  | "faucet"
  | "landing";

export const pageTitles: Record<PageId, string> = {
  markets: "Markets",
  explore: "Explore",
  index: "Index detail",
  leaderboard: "Leaderboard",
  create: "Create index",
  feed: "Feed",
  agents: "AI agents",
  portfolio: "Portfolio",
  profile: "Profile",
  faucet: "Faucet",
  landing: "Home",
};

/** Which nav href is active for a page (detail pages belong to Explore, Create to the Create entry, ...). */
export const pageNav: Record<PageId, string> = {
  markets: "#/markets",
  explore: "#/explore",
  index: "#/explore",
  leaderboard: "#/leaderboard",
  create: "#/create",
  feed: "#/feed",
  agents: "#/agents",
  portfolio: "#/portfolio",
  profile: "#/profile",
  faucet: "#/faucet",
  landing: "#/landing",
};

export const pageIds = Object.keys(pageTitles) as PageId[];