import { Eye } 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">
            See every network connection.
          </h2>
          <p className="text-muted-foreground font-serif text-lg leading-relaxed">
            You can&apos;t predict which domains your agent will reach for. GreyProxy captures
            every outbound connection and lets you allow or deny them in real time, without
            restarting the session.
          </p>
        </div>

        <div className="mx-auto max-w-3xl">
          <div className="flex items-center gap-3 mb-4">
            <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 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>
          <p className="text-xs text-muted-foreground font-serif leading-relaxed mt-4">
            Every outbound request is visible. Allow trusted domains, block unknown ones,
            and adjust policies live as your agent works.
          </p>
        </div>
      </div>
    </section>
  )
}