import { getTranslation } from "@turbostarter/i18n/server";
import { cn } from "@turbostarter/ui";
import { Icons } from "@turbostarter/ui-web/icons";

import {
  Section,
  SectionBadge,
  SectionDescription,
  SectionHeader,
  SectionTitle,
} from "~/modules/marketing/layout/section";

const GaugeAccent = () => (
  <svg width="48" height="28" viewBox="0 0 48 28" fill="none" className="mt-2">
    <path
      d="M4 24 A20 20 0 0 1 44 24"
      stroke="#e5e7eb"
      strokeWidth="4"
      strokeLinecap="round"
      fill="none"
    />
    <path
      d="M4 24 A20 20 0 0 1 38 8"
      stroke="#4285F4"
      strokeWidth="4"
      strokeLinecap="round"
      fill="none"
    />
  </svg>
);

const domainDotColors = [
  "#3b82f6",
  "#22c55e",
  "#f59e0b",
  "#8b5cf6",
  "#f43f5e",
  "#6b7280",
];

const DomainsAccent = () => (
  <div className="mt-2 flex items-center gap-1.5">
    {domainDotColors.map((color) => (
      <div
        key={color}
        className="size-2.5 rounded-full"
        style={{ backgroundColor: color }}
      />
    ))}
  </div>
);

const BarsAccent = () => (
  <div className="mt-2 flex items-end gap-1">
    <div className="h-3 w-2 rounded-sm bg-[#4285F4]/60" />
    <div className="h-5 w-2 rounded-sm bg-[#4285F4]/80" />
    <div className="h-4 w-2 rounded-sm bg-[#4285F4]" />
  </div>
);

const CheckAccent = () => (
  <div className="mt-2 flex items-center gap-1">
    <Icons.Check className="size-4 text-[#22c55e]" />
    <Icons.Check className="size-4 text-[#22c55e]/60" />
    <Icons.Check className="size-4 text-[#22c55e]/30" />
  </div>
);

const features = [
  { key: "score", Accent: GaugeAccent },
  { key: "domains", Accent: DomainsAccent },
  { key: "plan", Accent: BarsAccent },
  { key: "insights", Accent: CheckAccent },
] as const;

export const Features = async () => {
  const { t } = await getTranslation({ ns: "marketing" });

  return (
    <Section id="features">
      <SectionHeader>
        <SectionBadge>{t("features.label")}</SectionBadge>
        <SectionTitle>{t("features.title")}</SectionTitle>
        <SectionDescription>{t("features.description")}</SectionDescription>
      </SectionHeader>

      <div className="grid w-full max-w-4xl grid-cols-2 gap-4 md:grid-cols-4 md:gap-6">
        {features.map((feature) => (
          <div
            key={feature.key}
            className={cn(
              "flex flex-col items-center rounded-xl border p-5 text-center",
              "transition-all hover:border-[#4285F4]/20 hover:shadow-md",
            )}
          >
            <span className="text-5xl font-bold tracking-tight text-[#4285F4]">
              {t(`features.feature.${feature.key}.stat` as const)}
            </span>
            <feature.Accent />
            <span className="mt-3 text-sm text-muted-foreground">
              {t(`features.feature.${feature.key}.title` as const)}
            </span>
          </div>
        ))}
      </div>
    </Section>
  );
};
