blockchain/apps/portal/components/architecture/hybrid-diagram.tsx

/**
 * Clean HTML/CSS hybrid architecture diagram — brand-led, no image assets.
 */
export function HybridDiagram() {
  return (
    <div className="space-y-6">
      {/* Flow: users → private → relayer → public */}
      <div className="grid gap-4 lg:grid-cols-[1fr_auto_1fr_auto_1fr] lg:items-center">
        <DiagramBox
          tone="muted"
          title="Users & apps"
          lines={["Wallets", "Services", "This portal"]}
        />
        <Arrow />
        <DiagramBox
          tone="accent"
          title="Private layer"
          lines={[
            "Permissioned validators",
            "Fast finality",
            "Confidential payloads",
          ]}
        />
        <Arrow />
        <DiagramBox
          tone="depth"
          title="Relayer"
          lines={["Reads private state", "Builds commitment", "Posts to public"]}
        />
      </div>

      <div className="flex justify-center lg:justify-end lg:pr-[12%]">
        <div className="hidden h-8 w-px bg-gradient-to-b from-depth to-proof lg:block" />
      </div>

      <div className="grid gap-4 lg:grid-cols-[1fr_1fr] lg:gap-6">
        <DiagramBox
          tone="proof"
          title="Public anchor chain"
          lines={[
            "Open / auditable",
            "State roots & proofs",
            "Anyone can verify anchors",
          ]}
        />
        <DiagramBox
          tone="muted"
          title="Indexer → portal"
          lines={[
            "Streams blocks & txs",
            "Stores history (Doltgres later)",
            "Powers the explorer",
          ]}
        />
      </div>

      <p className="text-center text-xs text-muted-foreground">
        Private speed for work · public proof for trust · portal to follow both
      </p>
    </div>
  );
}

function DiagramBox({
  title,
  lines,
  tone,
}: {
  title: string;
  lines: string[];
  tone: "accent" | "proof" | "depth" | "muted";
}) {
  const ring =
    tone === "accent"
      ? "border-accent/40 bg-accent-muted/30"
      : tone === "proof"
        ? "border-proof/40 bg-proof-muted/30"
        : tone === "depth"
          ? "border-depth/50 bg-depth-muted/40"
          : "border-border bg-card";

  const titleColor =
    tone === "accent"
      ? "text-accent-hover"
      : tone === "proof"
        ? "text-proof"
        : tone === "depth"
          ? "text-anchored"
          : "text-foreground";

  return (
    <div className={`rounded-2xl border p-5 ${ring}`}>
      <p className={`font-display text-sm font-semibold tracking-tight ${titleColor}`}>
        {title}
      </p>
      <ul className="mt-3 space-y-1.5">
        {lines.map((line) => (
          <li key={line} className="text-xs leading-relaxed text-muted-foreground">
            {line}
          </li>
        ))}
      </ul>
    </div>
  );
}

function Arrow() {
  return (
    <div
      className="flex items-center justify-center text-muted-foreground"
      aria-hidden
    >
      <span className="hidden font-mono text-lg lg:inline">→</span>
      <span className="font-mono text-lg lg:hidden">↓</span>
    </div>
  );
}