import Link from "next/link";
import { ArrowRight } from "@/components/ui/Icons";
import { getServiceSummary, industryCatalog, serviceGroups } from "@/content/catalog";
import { cn } from "@/lib/cn";
import { routes } from "@/lib/routes";

interface PanelProps {
  id: string;
  onNavigate: () => void;
}

function PanelFrame({ id, label, children }: { id: string; label: string; children: React.ReactNode }) {
  return (
    <div
      id={id}
      role="region"
      aria-label={label}
      className="menu-panel absolute inset-x-0 top-full border-b border-line bg-surface shadow-[0_28px_60px_-32px_rgba(16,16,20,0.28)]"
    >
      <div className="container-page grid grid-cols-12 gap-6 py-10">{children}</div>
    </div>
  );
}

export function ServicesPanel({ id, onNavigate }: PanelProps) {
  return (
    <PanelFrame id={id} label="Services">
      <div className="col-span-3 flex flex-col justify-between gap-8 border-r border-line pr-8">
        <div>
          <p className="text-label uppercase text-muted">Services</p>
          <p className="mt-4 text-[1.375rem] leading-snug tracking-[-0.02em]">
            Acquisition, conversion, measurement, and retention, run as one system.
          </p>
        </div>
        <Link
          href={routes.howWeWork}
          onClick={onNavigate}
          className="group inline-flex items-center gap-2 text-[0.9375rem] font-medium"
        >
          <span className="link-underline">The Revenue Circuit</span>
          <ArrowRight size={14} className="btn-arrow" />
        </Link>
      </div>

      <div className="col-span-9 grid grid-cols-3 gap-6">
        {serviceGroups.map((group) => (
          <div key={group.label}>
            <p className="flex items-center gap-2 text-label uppercase text-muted">
              <span aria-hidden="true" className="size-1.5 rounded-full bg-signal" />
              {group.label}
            </p>
            <ul className="mt-4 space-y-1">
              {group.slugs.map((slug) => {
                const service = getServiceSummary(slug);
                return (
                  <li key={slug}>
                    <Link
                      href={routes.service(slug)}
                      onClick={onNavigate}
                      className="group -mx-3 block rounded-md px-3 py-3 transition-colors hover:bg-paper"
                    >
                      <span className="flex items-center gap-2 font-medium tracking-[-0.01em]">
                        {service.name}
                        <ArrowRight size={13} className="btn-arrow opacity-0 transition-opacity group-hover:opacity-100" />
                      </span>
                      <span className="mt-1 block text-sm leading-snug text-muted">{service.shortDescription}</span>
                    </Link>
                  </li>
                );
              })}
            </ul>
          </div>
        ))}
        <div className="col-span-3 mt-2 flex items-center justify-between gap-6 rounded-md bg-paper px-5 py-4 text-sm">
          <p className="text-ink-soft">Not sure where the constraint is? Answer five questions.</p>
          <Link href="/#growth-diagnostic" onClick={onNavigate} className="group inline-flex shrink-0 items-center gap-2 font-medium">
            <span className="link-underline">Growth diagnostic</span>
            <ArrowRight size={13} className="btn-arrow" />
          </Link>
        </div>
      </div>
    </PanelFrame>
  );
}

export function IndustriesPanel({ id, onNavigate }: PanelProps) {
  return (
    <PanelFrame id={id} label="Industries">
      <div className="col-span-3 border-r border-line pr-8">
        <p className="text-label uppercase text-muted">Industries</p>
        <p className="mt-4 text-[1.375rem] leading-snug tracking-[-0.02em]">
          Two growth models. We specialize in both, and nothing else.
        </p>
      </div>
      <div className="col-span-9 grid grid-cols-2 gap-6">
        {industryCatalog.map((industry) => (
          <Link
            key={industry.href}
            href={industry.href}
            onClick={onNavigate}
            className={cn(
              "group flex flex-col justify-between gap-8 rounded-lg p-6 transition-transform duration-500 ease-[var(--ease-out-expo)] hover:-translate-y-0.5",
              industry.tone === "mist" ? "bg-mist" : "bg-sand",
            )}
          >
            <div>
              <span className="flex items-center justify-between">
                <span className="text-title">{industry.title}</span>
                <ArrowRight size={18} className="btn-arrow" />
              </span>
              <span className="mt-3 block max-w-sm text-ink-soft">{industry.description}</span>
            </div>
            <span className="flex flex-wrap gap-2">
              {industry.metrics.map((metric) => (
                <span key={metric} className="rounded-sm border border-ink/10 px-2 py-1 font-mono text-data uppercase text-ink-soft">
                  {metric}
                </span>
              ))}
            </span>
          </Link>
        ))}
      </div>
    </PanelFrame>
  );
}