import Link from "next/link";
import { PlaceholderImage } from "./PlaceholderImage";

const DIVISIONS = [
  {
    name: "dChimes Systems",
    href: "/systems",
    tag: "Flagship",
    color: "text-green",
    dot: "bg-green",
    blurb: "Website, booking, and marketing, built and run as one connected system.",
  },
  {
    name: "dChimes Digital",
    href: "/digital",
    tag: "Digital",
    color: "text-blue",
    dot: "bg-blue",
    blurb: "SEO and content strategy that gets you found by the right people.",
  },
  {
    name: "dChimes AI",
    href: "/ai",
    tag: "AI",
    color: "text-division-ai",
    dot: "bg-division-ai",
    blurb: "Automation that takes the repetitive work off your team's hands.",
  },
  {
    name: "dChimes Cloud",
    href: "/cloud",
    tag: "Cloud",
    color: "text-division-cloud",
    dot: "bg-division-cloud",
    blurb: "Hosting and domains, set up right and looked after over time.",
  },
  {
    name: "dChimes Media",
    href: "/media",
    tag: "Media",
    color: "text-division-media",
    dot: "bg-division-media",
    blurb: "Content and creative that gives your brand a voice worth following.",
  },
];

export function Divisions() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-6xl px-8">
        <div className="mb-13 max-w-xl">
          <h2 className="mb-3 font-heading text-3xl font-semibold md:text-4xl">
            Five specialties, one team behind them.
          </h2>
          <p className="text-lg text-navy/65">
            Every division plugs into the same system — and the same people you
            already know.
          </p>
        </div>

        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {DIVISIONS.map((division) => (
            <Link
              key={division.href}
              href={division.href}
              className="flex flex-col overflow-hidden rounded-card border border-navy/10"
            >
              <PlaceholderImage label="Photo · 400×260" className="h-40 rounded-none border-none border-b" />
              <div className="p-5">
                <span className={`mb-3 flex items-center gap-1.5 text-xs font-semibold ${division.color}`}>
                  <span className={`h-1.5 w-1.5 rounded-full ${division.dot}`} />
                  {division.tag}
                </span>
                <h3 className="mb-2 font-heading text-lg font-semibold">{division.name}</h3>
                <p className="text-sm text-navy/65">{division.blurb}</p>
              </div>
            </Link>
          ))}

          <div className="flex flex-col justify-center rounded-card bg-navy p-5 text-white">
            <h3 className="mb-2 font-heading text-lg font-semibold">
              Not sure which you need?
            </h3>
            <p className="mb-4 text-sm text-white/60">
              Tell us what&apos;s slowing you down — we&apos;ll tell you plainly
              what would help.
            </p>
            <Link
              href="/book"
              className="w-fit rounded-full bg-green px-5 py-3 text-sm font-semibold text-white"
            >
              Start the free call
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}