import { Eye, Activity, ShieldQuestion, Zap } from 'lucide-react'

export function Observability() {
  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">
            <Eye className="h-4 w-4 text-primary" />
            <span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
              Clarity
            </span>
          </div>
          <h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
            Watch it reach. Then decide.
          </h2>
          <p className="text-muted-foreground font-serif text-lg leading-relaxed">
            You can&apos;t predict what your agent will access. Greywall makes every filesystem
            operation and network connection visible in real time — so you make informed decisions
            instead of guessing policies upfront.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-stretch">
          {/* Monitor mode */}
          <div className="flex flex-col gap-4">
            <div className="flex items-center gap-3">
              <div className="flex items-center justify-center w-8 h-8 rounded-md bg-primary/10 text-primary">
                <Activity className="h-4 w-4" />
              </div>
              <h3 className="font-sans font-semibold text-sm">Real-time violation monitor</h3>
            </div>
            <div className="code-block p-4 flex-1">
              <div className="text-xs text-muted-foreground mb-3 font-sans uppercase tracking-wider">
                Live violation stream
              </div>
              <div className="space-y-1.5 font-mono text-xs">
                <div>
                  <span className="text-muted-foreground">$ </span>
                  <span className="text-greyhaven-offwhite">greywall -m -- claude</span>
                </div>
                <div className="mt-2 text-muted-foreground">
                  [14:23:01] <span className="text-red-400/80">DENY</span>{' '}
                  <span className="text-greyhaven-offwhite">read</span>{' '}
                  ~/.ssh/id_ed25519
                </div>
                <div className="text-muted-foreground">
                  [14:23:01] <span className="text-red-400/80">DENY</span>{' '}
                  <span className="text-greyhaven-offwhite">read</span>{' '}
                  ~/.aws/credentials
                </div>
                <div className="text-muted-foreground">
                  [14:23:02] <span className="text-red-400/80">DENY</span>{' '}
                  <span className="text-greyhaven-offwhite">write</span>{' '}
                  ~/.bashrc
                </div>
                <div className="text-muted-foreground">
                  [14:23:03] <span className="text-green-400/70">ALLOW</span>{' '}
                  <span className="text-greyhaven-offwhite">read</span>{' '}
                  ./src/index.ts
                </div>
                <div className="text-muted-foreground">
                  [14:23:03] <span className="text-green-400/70">ALLOW</span>{' '}
                  <span className="text-greyhaven-offwhite">write</span>{' '}
                  ./src/utils.ts
                </div>
              </div>
            </div>
          </div>

          {/* GreyProxy screenshot */}
          <div className="flex flex-col gap-4">
            <div className="flex items-center gap-3">
              <div className="flex items-center justify-center w-8 h-8 rounded-md bg-primary/10 text-primary">
                <Eye className="h-4 w-4" />
              </div>
              <h3 className="font-sans font-semibold text-sm">GreyProxy dashboard</h3>
            </div>
            <div className="rounded-lg border border-border/40 overflow-hidden flex-1 flex items-center bg-card/30">
              <img
                src="/greyproxy.png"
                alt="GreyProxy dashboard showing pending network requests with Allow and Deny controls"
                className="w-full h-auto"
              />
            </div>
          </div>
        </div>

        {/* Value props */}
        <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="p-5 rounded-lg border border-border/40 bg-card/30">
            <ShieldQuestion className="h-4 w-4 text-primary mb-3" />
            <h4 className="font-sans font-medium text-sm mb-1">Answer hard questions</h4>
            <p className="text-xs text-muted-foreground font-serif leading-relaxed">
              What did the agent see? What did it access? What was denied? Greywall makes these
              questions answerable for any session, at any time, after the fact.
            </p>
          </div>
          <div className="p-5 rounded-lg border border-border/40 bg-card/30">
            <Zap className="h-4 w-4 text-primary mb-3" />
            <h4 className="font-sans font-medium text-sm mb-1">Move faster, safely</h4>
            <p className="text-xs text-muted-foreground font-serif leading-relaxed">
              Once you can see what agents do and control it without breaking flow, you stop
              hesitating. Longer autonomous runs, more sub-agents, faster iteration on sensitive
              workloads.
            </p>
          </div>
          <div className="p-5 rounded-lg border border-border/40 bg-card/30">
            <Activity className="h-4 w-4 text-primary mb-3" />
            <h4 className="font-sans font-medium text-sm mb-1">Operate, don&apos;t hope</h4>
            <p className="text-xs text-muted-foreground font-serif leading-relaxed">
              Observability is the difference between operating AI and hoping AI operates.
              Security becomes an enabler of velocity, not a constraint on it.
            </p>
          </div>
        </div>
      </div>
    </section>
  )
}