import { AlertTriangle, KeyRound, FolderOpen, FileCode } from 'lucide-react'

const exposures = [
  {
    icon: KeyRound,
    path: '~/.ssh/',
    label: 'SSH keys',
    desc: 'Private keys, known hosts, agent configs',
  },
  {
    icon: FileCode,
    path: '.env',
    label: 'Environment secrets',
    desc: 'API keys, database URLs, auth tokens',
  },
  {
    icon: FolderOpen,
    path: '~/*',
    label: 'Full filesystem',
    desc: 'Every repo, document, and config file',
  },
]

export function Problem() {
  return (
    <section className="py-24 px-6 border-t border-border/30">
      <div className="mx-auto max-w-5xl">
        <div className="max-w-2xl mb-16">
          <div className="flex items-center gap-2 mb-4">
            <AlertTriangle className="h-4 w-4 text-primary" />
            <span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
              The problem
            </span>
          </div>
          <h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
            Every agent inherits everything.
          </h2>
          <p className="text-muted-foreground font-serif text-lg leading-relaxed">
            AI coding agents run as your user. They see your SSH keys, cloud tokens, env files, and
            entire home directory. The model decides what to access at runtime, guided by weights
            you didn&apos;t train, at machine speed. One wrong inference is all it takes.
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
          {exposures.map((item) => (
            <div
              key={item.path}
              className="group p-5 rounded-lg border border-border/40 bg-card/30 hover:border-destructive/30 hover:bg-destructive/[0.03] transition-all"
            >
              <item.icon className="h-5 w-5 text-muted-foreground group-hover:text-destructive/70 mb-3 transition-colors" />
              <code className="text-sm font-mono text-foreground block mb-1">{item.path}</code>
              <p className="text-xs text-muted-foreground font-sans">{item.desc}</p>
            </div>
          ))}
        </div>

        <div className="mt-10 p-5 rounded-lg border border-border/30 bg-card/20">
          <p className="text-sm text-muted-foreground font-serif leading-relaxed">
            <span className="text-foreground font-medium">Most setups rely on promises:</span>{' '}
            trust the model provider&apos;s policies, trust the application code, trust that the
            agent respects boundaries. Greywall replaces trust with enforcement. Constraints are
            applied at the kernel level, below anything the agent or model can circumvent.
          </p>
        </div>
      </div>
    </section>
  )
}