import { Gavel, Network, ScrollText } from "lucide-react";
import { Wordmark } from "@/components/brand";

const POINTS = [
  {
    icon: Network,
    title: "Action-first",
    body: "Agents send email, post to Slack, hit APIs, not just chat.",
  },
  {
    icon: Gavel,
    title: "Safe by default",
    body: "Sensitive actions pause for human approval before they run.",
  },
  {
    icon: ScrollText,
    title: "Fully auditable",
    body: "Every decision is recorded in a hash-chained, tamper-evident log.",
  },
];

export function AuthAside() {
  return (
    <div className="relative hidden overflow-hidden border-r border-line lg:flex lg:flex-col lg:justify-between lg:p-12">
      <div
        className="pointer-events-none absolute inset-0 opacity-70"
        style={{
          background:
            "radial-gradient(40rem 30rem at 20% 10%, rgb(var(--accent) / 0.10), transparent 60%), radial-gradient(30rem 30rem at 90% 90%, rgb(var(--info) / 0.06), transparent 55%)",
        }}
      />
      <div className="relative">
        <Wordmark />
      </div>
      <div className="relative max-w-md">
        <p className="font-display text-3xl font-bold leading-tight tracking-tight text-fg">
          The agent that <span className="text-accent">does the work</span>, with a human in the
          loop.
        </p>
        <div className="mt-10 space-y-6">
          {POINTS.map((p) => {
            const Icon = p.icon;
            return (
              <div key={p.title} className="flex gap-4">
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-line bg-surface/60 text-accent">
                  <Icon className="h-5 w-5" />
                </div>
                <div>
                  <div className="font-semibold text-fg">{p.title}</div>
                  <div className="mt-0.5 text-sm text-muted">{p.body}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <div className="relative font-mono text-[11px] uppercase tracking-[0.2em] text-faint">
        Legate Agent · v0.1
      </div>
    </div>
  );
}
