Values

import { Badge, Card, CardContent } from "@cronus-ui/ui";
import { Eye, Gem, MessagesSquare, Rocket, Sparkles, Sprout, Users } from "lucide-react";

const companyValues = [
  {
    icon: Gem,
    title: "Craft over shortcuts",
    description: "Details are the product. We sweat empty states, error copy, and 60fps.",
  },
  {
    icon: Eye,
    title: "Default to transparency",
    description: "Roadmap, pricing, postmortems — public. Trust compounds faster than features.",
  },
  {
    icon: Rocket,
    title: "Ship, then sharpen",
    description: "Real usage beats internal debate. Release small, watch closely, iterate weekly.",
  },
  {
    icon: Users,
    title: "Customers in the room",
    description: "Every project starts and ends with a customer call. Opinions lose to evidence.",
  },
  {
    icon: MessagesSquare,
    title: "Strong opinions, loosely held",
    description: "Argue hard, decide once, commit fully — no relitigating in the hallway.",
  },
  {
    icon: Sprout,
    title: "Leave it better",
    description: "Every file, doc, and process we touch should be clearer when we leave it.",
  },
] as const;

export function AboutValuesBlock() {
  return (
    <section aria-label="Our values" className="mx-auto flex w-full max-w-5xl flex-col gap-12">
      <header className="mx-auto flex max-w-2xl flex-col items-center gap-4 text-center">
        <Badge variant="primary">How we work</Badge>
        <h2 className="font-display text-3xl font-semibold leading-tight tracking-tight text-fg sm:text-4xl">
          The values we hire, build, and ship by
        </h2>
        <p className="text-lg leading-8 text-fg-secondary">
          Six principles that outlive any roadmap. They decide what we build — and what we
          politely decline to.
        </p>
      </header>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {companyValues.map((value) => (
          <Card key={value.title} className="shadow-xs">
            <CardContent className="flex flex-col gap-3">
              <span className="inline-flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
                <value.icon className="size-5" aria-hidden="true" />
              </span>
              <h3 className="font-display text-base font-semibold text-fg">{value.title}</h3>
              <p className="text-sm leading-6 text-fg-secondary">{value.description}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <figure className="flex flex-col gap-3">
        <div className="grid grid-cols-4 gap-3">
          <div
            aria-hidden="true"
            className="col-span-2 row-span-2 rounded-2xl bg-gradient-to-br from-primary/40 via-info/20 to-transparent"
          />
          <div
            aria-hidden="true"
            className="flex aspect-square items-center justify-center rounded-2xl bg-surface-inset"
          >
            <Users className="size-8 text-fg-muted" aria-hidden="true" />
          </div>
          <div
            aria-hidden="true"
            className="aspect-square rounded-2xl bg-gradient-to-br from-info/35 to-success/20"
          />
          <div
            aria-hidden="true"
            className="aspect-square rounded-2xl bg-gradient-to-br from-warning/30 to-primary/20"
          />
          <div
            aria-hidden="true"
            className="flex aspect-square items-center justify-center rounded-2xl bg-surface-inset"
          >
            <Sparkles className="size-8 text-fg-muted" aria-hidden="true" />
          </div>
        </div>
        <figcaption className="text-xs text-fg-tertiary">
          Life at Aurora — team offsite, Lisbon · June 2026
        </figcaption>
      </figure>
    </section>
  );
}