import { getTranslation } from "@turbostarter/i18n/server";
import { cn } from "@turbostarter/ui";
import { MapPin } from "lucide-react";

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

const SearchBarMockup = () => (
  <div className="flex w-full items-center gap-2 rounded-xl border bg-background px-3 py-2.5 shadow-sm">
    <MapPin className="size-4 shrink-0 text-[#4285F4]" />
    <span className="text-sm text-muted-foreground">Search your business...</span>
  </div>
);

const GaugeMockup = () => (
  <div className="flex flex-col items-center gap-2">
    <svg width="64" height="36" viewBox="0 0 64 36" fill="none">
      <path
        d="M6 32 A26 26 0 0 1 58 32"
        stroke="#e5e7eb"
        strokeWidth="6"
        strokeLinecap="round"
        fill="none"
      />
      <path
        d="M6 32 A26 26 0 0 1 50 10"
        stroke="#4285F4"
        strokeWidth="6"
        strokeLinecap="round"
        fill="none"
      />
    </svg>
    <div className="flex w-full items-center justify-center gap-1.5">
      {["#3b82f6", "#22c55e", "#f59e0b"].map((color) => (
        <div
          key={color}
          className="h-1.5 flex-1 rounded-full"
          style={{ backgroundColor: color }}
        />
      ))}
    </div>
  </div>
);

const ReportMockup = () => (
  <div className="flex w-full flex-col gap-2 rounded-lg border bg-background p-3 shadow-sm">
    <span className="text-[10px] font-medium tracking-wide text-muted-foreground uppercase">
      Reputation Blueprint
    </span>
    <div className="flex items-center gap-2">
      <div className="flex size-8 items-center justify-center rounded-md bg-[#4285F4] text-xs font-bold text-white">
        83
      </div>
      <div className="flex flex-1 flex-col gap-1">
        <div className="h-1.5 w-full rounded-full bg-muted" />
        <div className="h-1.5 w-4/5 rounded-full bg-muted" />
        <div className="h-1.5 w-3/5 rounded-full bg-muted" />
      </div>
    </div>
  </div>
);

const stepMockups = [SearchBarMockup, GaugeMockup, ReportMockup] as const;

const steps = [
  { key: "share", number: 1 },
  { key: "analyze", number: 2 },
  { key: "receive", number: 3 },
] as const;

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

  return (
    <Section id="how-it-works">
      <SectionHeader>
        <SectionBadge>{t("howItWorks.label")}</SectionBadge>
        <SectionTitle>{t("howItWorks.title")}</SectionTitle>
        <SectionDescription>{t("howItWorks.description")}</SectionDescription>
      </SectionHeader>

      <div className="relative grid w-full max-w-5xl grid-cols-1 gap-8 md:grid-cols-3 md:gap-6 lg:gap-10">
        {steps.map((step, index) => {
          const Mockup = stepMockups[index]!;
          return (
            <div
              key={step.key}
              className={cn(
                "relative flex flex-col items-center gap-4 rounded-xl border bg-card p-6 text-center",
                "transition-all hover:-translate-y-1 hover:shadow-lg",
              )}
            >
              {/* Numbered circle + connector */}
              <div className="relative flex w-full items-center justify-center">
                {index < steps.length - 1 && (
                  <div className="absolute top-1/2 left-[calc(50%+24px)] hidden h-px w-[calc(100%-24px)] border-t-2 border-dashed border-muted-foreground/20 md:block" />
                )}
                <div className="relative z-10 flex size-10 items-center justify-center rounded-full bg-[#4285F4] text-sm font-bold text-white">
                  {step.number}
                </div>
              </div>

              {/* Visual mockup */}
              <div className="flex w-full items-center justify-center px-2">
                <Mockup />
              </div>

              {/* Text */}
              <h3 className="text-lg font-semibold">
                {t(`howItWorks.steps.${step.key}.title` as const)}
              </h3>
              <p className="text-sm text-muted-foreground text-balance">
                {t(`howItWorks.steps.${step.key}.description` as const)}
              </p>
            </div>
          );
        })}
      </div>
    </Section>
  );
};
