import { ExternalLink } from "lucide-react";

import { Card } from "@/components/ui/card";
import { project, partners, funders } from "@/data/project";

export function Footer() {
  return (
    <footer className="border-t border-border bg-primary text-primary-foreground">
      <div className="mx-auto w-full max-w-6xl px-5 py-16 md:px-8">
        <div className="mb-4 text-sm font-semibold uppercase tracking-widest text-brand-foreground/70">
          Beneficiaries
        </div>

        {/* Partner cards (placeholders — logos a fornecer, ver specs/CHANGELOG.md) */}
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {partners.map((p) => (
            <Card
              key={p.short}
              className="group border-white/15 bg-transparent text-primary-foreground transition-colors hover:bg-white/10"
            >
              <div className="flex h-32 items-center justify-center p-6">
                <img
                  src={p.image}
                  alt={p.name}
                  className="max-h-full w-auto object-contain opacity-80 transition-opacity group-hover:opacity-100"
                />
              </div>
              <div className="border-t border-white/10 px-4 py-3">
                <p className="text-sm font-medium">{p.name}</p>
              </div>
            </Card>
          ))}
        </div>

        {/* Funding */}
        <div className="mt-12 grid gap-8 border-t border-white/15 pt-10 md:grid-cols-2">
          <div>
            <div className="mb-3 text-sm font-semibold uppercase tracking-widest text-brand-foreground/70">
              Financial support
            </div>
            <div className="flex flex-wrap gap-3">
              {funders.map((f) => (
                <span
                  key={f.name}
                  className="rounded-md border border-white/20 bg-white/80 px-3 py-1.5 text-sm text-primary-foreground/90"
                >
                  <img src={f.image} alt={f.name} className="inline h-10" />
                </span>
              ))}
            </div>
            <dl className="mt-5 space-y-1 text-sm text-primary-foreground/75">
              <div className="flex gap-2">
                <dt className="text-primary-foreground/55">EU support:</dt>
                <dd>{project.funding.euSupport}</dd>
              </div>
              <div className="flex gap-2">
                <dt className="text-primary-foreground/55">
                  National support:
                </dt>
                <dd>{project.funding.nationalSupport}</dd>
              </div>
              <div className="flex gap-2">
                <dt className="text-primary-foreground/55">
                  Total eligible cost:
                </dt>
                <dd>{project.funding.totalEligibleCost}</dd>
              </div>
            </dl>
          </div>

          <div className="md:text-right">
            <div className="mb-3 text-sm font-semibold uppercase tracking-widest text-brand-foreground/70">
              Project reference
            </div>
            <p className="text-sm text-primary-foreground/80">
              {project.projectCode}
            </p>
            <a
              href={project.doi}
              target="_blank"
              rel="noopener noreferrer"
              className="mt-2 inline-flex items-center gap-1.5 text-sm text-primary-foreground/90 underline-offset-4 hover:underline md:justify-end"
            >
              {project.doi.replace("https://", "")}
              <ExternalLink className="h-3.5 w-3.5" />
            </a>
          </div>
        </div>

        <div className="mt-12 border-t border-white/15 pt-6 text-xs text-primary-foreground/55">
          © {project.dates.end.slice(-4)} {project.acronym} — INESC Coimbra.
          Microsite developed by Streamline.
        </div>
      </div>
    </footer>
  );
}
