import Image from "next/image";
import Link from "next/link";
import { ArrowUpRight } from "@/components/ui/Icons";
import { revealProps } from "@/components/ui/reveal";
import type { Still } from "@/content/media";
import type { BusinessModel } from "@/content/types";
import { cn } from "@/lib/cn";

interface IndustryPanelProps {
  model: BusinessModel;
  kicker: string;
  title: string;
  body: string;
  attributes: string[];
  link: { label: string; href: string };
  image?: Still;
  imageAlt?: string;
  delay?: number;
}

/** SaaS: stages spread over a long time axis. E-commerce: a short path that loops. */
function IndustryGlyph({ model }: { model: BusinessModel }) {
  if (model === "saas") {
    const bars = [92, 58, 38, 22];
    return (
      <svg viewBox="0 0 220 132" className="h-auto w-full" aria-hidden="true">
        {bars.map((height, i) => (
          <rect
            key={i}
            x={12 + i * 56}
            y={104 - height}
            width="26"
            height={height}
            rx="2"
            className={cn(
              "origin-bottom transition-transform duration-700 ease-out-expo [transform-box:fill-box] group-hover:scale-y-[1.06]",
              i === 3 ? "fill-signal" : "fill-ink/15",
            )}
          />
        ))}
        <path d="M4 116 H214" className="stroke-ink/30" />
        <path d="M4 124 H206" className="stroke-ink/50" strokeDasharray="2 4" />
        <path d="M200 120 L208 124 L200 128" className="fill-none stroke-ink/50" />
        <text x="4" y="10" className="fill-muted font-mono" fontSize="9" letterSpacing="0.08em">
          LEAD → CLOSED-WON
        </text>
      </svg>
    );
  }

  return (
    <svg viewBox="0 0 220 132" className="h-auto w-full" aria-hidden="true">
      <circle cx="110" cy="70" r="46" className="fill-none stroke-ink/20" />
      <path d="M110 24 A46 46 0 1 1 64.5 76.5" className="fill-none stroke-signal" strokeWidth="1.5" />
      <path d="M60 70 l4.5 8 l5 -7.5" className="fill-none stroke-signal" strokeWidth="1.5" />
      {[
        [110, 24],
        [156, 70],
        [110, 116],
        [64, 70],
      ].map(([cx, cy], i) => (
        <circle key={i} cx={cx} cy={cy} r="4.5" className={i === 3 ? "fill-signal" : "fill-surface stroke-ink/60"} />
      ))}
      <g className="origin-[110px_70px] transition-transform duration-[1400ms] ease-out-expo group-hover:rotate-[270deg]">
        <circle cx="110" cy="24" r="2.5" className="fill-signal" />
      </g>
      <text x="4" y="10" className="fill-muted font-mono" fontSize="9" letterSpacing="0.08em">
        ORDER → REPEAT
      </text>
    </svg>
  );
}

export function IndustryPanel({ model, kicker, title, body, attributes, link, image, imageAlt = "", delay = 0 }: IndustryPanelProps) {
  return (
    <article
      className={cn(
        "group relative flex flex-col overflow-hidden rounded-lg p-7 transition-transform duration-700 ease-out-expo hover:-translate-y-1 sm:p-10",
        model === "saas" ? "bg-mist" : "bg-sand",
      )}
      {...revealProps(delay)}
    >
      {image ? (
        <div className="relative -mx-7 -mt-7 mb-8 aspect-[3/2] overflow-hidden bg-ink/5 sm:-mx-10 sm:-mt-10 sm:mb-10 lg:aspect-[16/9]">
          <Image
            src={image.src}
            alt={imageAlt}
            fill
            sizes="(min-width: 1360px) 620px, (min-width: 1024px) 46vw, 100vw"
            placeholder="blur"
            className={cn(
              "object-cover transition-transform duration-[1200ms] ease-out-expo group-hover:scale-[1.03] motion-reduce:transition-none motion-reduce:group-hover:scale-100",
              image.position,
            )}
          />
        </div>
      ) : null}

      <div className="flex items-start justify-between gap-6">
        <div>
          <p className="text-label uppercase text-muted">{kicker}</p>
          <h3 className="mt-4 text-display-md">{title}</h3>
        </div>
        <span
          aria-hidden="true"
          className="inline-flex size-12 shrink-0 items-center justify-center rounded-full border border-ink/15 transition-colors duration-300 group-hover:border-ink group-hover:bg-ink group-hover:text-paper"
        >
          <ArrowUpRight size={18} />
        </span>
      </div>

      <p className="mt-6 max-w-md text-ink-soft">{body}</p>

      <div className="mt-10 grid flex-1 items-end gap-10 sm:grid-cols-[1fr_11rem]">
        <ul className="border-t border-ink/10" aria-label={`${kicker} focus areas`}>
          {attributes.map((attribute, index) => (
            <li key={attribute} className="flex items-center justify-between gap-4 border-b border-ink/10 py-2.5 text-[0.9375rem]">
              <span>{attribute}</span>
              <span className="font-mono text-data text-muted">{String(index + 1).padStart(2, "0")}</span>
            </li>
          ))}
        </ul>
        <div className="hidden sm:block">
          <IndustryGlyph model={model} />
        </div>
      </div>

      <Link
        href={link.href}
        className="mt-10 inline-flex items-center gap-2 self-start font-medium after:absolute after:inset-0 after:content-['']"
      >
        <span className="link-underline">{link.label}</span>
      </Link>
    </article>
  );
}