greywall-landing-page/components/layers.tsx

'use client'

import { Box, Lock, ShieldCheck, Eye, Wifi, Shield, Terminal } from 'lucide-react'
import { PlatformToggle, usePlatform } from './platform-toggle'

const linuxLayers = [
  {
    icon: Box,
    name: 'Bubblewrap',
    tag: 'Namespaces',
    desc: 'Process, network, and mount isolation via Linux namespaces. The foundational containment layer that creates a fully isolated process environment.',
    detail: 'Linux 3.8+',
  },
  {
    icon: Lock,
    name: 'Landlock',
    tag: 'Filesystem',
    desc: 'Kernel-level filesystem access control. Enforces granular read/write permissions below userspace. Processes cannot escalate their own access.',
    detail: 'Linux 5.13+',
  },
  {
    icon: ShieldCheck,
    name: 'Seccomp BPF',
    tag: 'Syscalls',
    desc: 'Blocks 27+ dangerous system calls at the kernel boundary. ptrace, mount, kexec, module loading, and BPF manipulation are all denied.',
    detail: 'Linux 3.5+',
  },
  {
    icon: Eye,
    name: 'eBPF Monitoring',
    tag: 'Visibility',
    desc: 'Traces syscall exits in real time across all layers. Every permission denial is captured instantly with full context: process, path, and reason.',
    detail: 'Linux 4.15+',
  },
  {
    icon: Wifi,
    name: 'TUN + SOCKS5 Proxy',
    tag: 'Network',
    desc: 'Transparent network capture at the kernel level via TUN device. All TCP/UDP traffic is routed through the proxy, even binaries that ignore env vars.',
    detail: 'Any kernel',
  },
]

const macosLayers = [
  {
    icon: Shield,
    name: 'Seatbelt Sandbox',
    tag: 'Core',
    desc: 'macOS kernel sandbox with dynamically generated profiles. Default-deny policy with explicit allowlists for filesystem, network, IPC, and process operations.',
    detail: 'macOS native',
  },
  {
    icon: Lock,
    name: 'Filesystem Policy',
    tag: 'Filesystem',
    desc: 'Fine-grained read/write rules using literal paths, subpath matching, and regex patterns. Sensitive files like SSH keys and .env are always protected.',
    detail: 'Seatbelt rules',
  },
  {
    icon: Terminal,
    name: 'Log Stream Monitor',
    tag: 'Visibility',
    desc: 'Session-tagged violation monitoring via macOS log stream. Every denied operation is captured in real time with the process and path that triggered it.',
    detail: 'macOS native',
  },
  {
    icon: Wifi,
    name: 'Proxy-Based Network',
    tag: 'Network',
    desc: 'Outbound traffic routed through proxy via environment variables. Combined with Seatbelt network rules to block raw socket access and direct connections.',
    detail: 'Env var proxy',
  },
]

export function Layers() {
  const [platform] = usePlatform()
  const layers = platform === 'linux' ? linuxLayers : macosLayers

  return (
    <section className="py-24 px-6 border-t border-border/30">
      <div className="mx-auto max-w-5xl">
        <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-6 mb-16">
          <div className="max-w-2xl">
            <span className="text-serif text-[12px] font-bold uppercase tracking-[0.22em] text-primary mb-4 block">
              Defense in depth
            </span>
            <h2 className="title-serif text-[36px] md:text-[48px] leading-none mb-4">
              {platform === 'linux' ? 'Five orthogonal security layers.' : 'Kernel-enforced on every call.'}
            </h2>
            <p className="text-serif font-normal text-[15px] md:text-[16px] leading-[1.55] text-muted-foreground">
              {platform === 'linux'
                ? 'Each layer constrains a different part of the runtime. If one mechanism misses something, another can still catch it at the kernel boundary.'
                : 'macOS Seatbelt enforces deny-by-default rules before the call completes. The profile is generated per session from the project context you allow.'}
            </p>
          </div>
          <PlatformToggle />
        </div>

        <div className="space-y-3">
          {layers.map((layer) => (
            <div
              key={layer.name}
              className="layer-card group flex items-start gap-3 sm:gap-5 p-4 sm:p-5 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20"
            >
              <div className="shrink-0 flex items-center justify-center w-10 h-10 rounded-md bg-muted/30 text-foreground">
                <layer.icon className="h-5 w-5" />
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-3 mb-1.5">
                  <h3 className="font-sans font-semibold text-sm text-foreground">
                    {layer.name}
                  </h3>
                  <span className="px-2 py-0.5 rounded text-[10px] font-sans font-medium uppercase tracking-wider bg-muted/30 text-muted-foreground">
                    {layer.tag}
                  </span>
                </div>
                <p className="text-sm text-muted-foreground font-serif leading-relaxed">
                  {layer.desc}
                </p>
              </div>
              <div className="shrink-0 text-right hidden sm:block">
                <span className="text-[10px] font-mono text-muted-foreground">
                  {layer.detail}
                </span>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-8 p-5 rounded-lg border border-primary/15 bg-primary/[0.03]">
          <p className="text-sm text-muted-foreground font-serif leading-relaxed">
            {platform === 'linux' ? (
              <>
                <span className="text-primary font-medium">Graceful degradation.</span>{' '}
                Greywall checks the kernel features available on the host and enables the layers it can support. Run{' '}
                <code className="font-mono text-xs text-foreground bg-card/50 px-1.5 py-0.5 rounded">
                  greywall --linux-features
                </code>{' '}
                to inspect the active set.
              </>
            ) : (
              <>
                <span className="text-primary font-medium">No dependencies.</span>{' '}
                macOS sandboxing uses the built-in system facilities. Run{' '}
                <code className="font-mono text-xs text-foreground bg-card/50 px-1.5 py-0.5 rounded">
                  greywall check
                </code>{' '}
                to verify the local setup.
              </>
            )}
          </p>
        </div>
      </div>
    </section>
  )
}