import {
  Button,
  CaseStudyCard,
  Container,
  CTASection,
  EmptyState,
  ErrorState,
  JsonLd,
  PageHero,
  Section,
  SectionHeading,
} from "@/components";
import { ArrowRight } from "lucide-react";
import { api } from "@/lib/api";
import { breadcrumbSchema, createMetadata } from "@/lib/seo";

export const revalidate = 300;

export const metadata = createMetadata({
  title: "Reference i projekti",
  description:
    "Pogledajte projekte i reference ECOM01: namenska eCommerce rešenja, integracije, hotelski sajtovi, Beds24 povezivanja i poslovni sistemi prilagođeni klijentima.",
  path: "/reference",
});

const highlightedReferences = [
  ["Royal Crown", "Hospitality / Beds24", "Direktne rezervacije i smeštajni tok", "Beds24 web sistem sa jasnim booking CTA tokom", "/reference"],
  ["Tyro", "Premium sportswear", "Brand nije smeo da izgleda kao generički webshop", "Clean premium eCommerce prezentacija i responsive UX", "/case-studies/tyro-active-mind-premium-sportswear-brand"],
  ["Panda4you", "eCommerce / retail", "Katalog, prodaja i operativa u čitljivom sistemu", "Strukturisan web i upravljanje svakodnevnim procesima", "/reference"],
  ["Kvantalux", "Retail / više prodavnica", "Porudžbine između prodavnica, magacina i kurira", "Tok od odobravanja robe do WMS/PDA pakovanja", "/case-studies/kvantalux-ecommerce-9-prodavnica-centralni-magacin"],
] as const;

export default async function ReferencesPage() {
  const result = await api.caseStudies();
  const caseStudies = result.ok ? result.data : [];

  return (
    <main>
      <JsonLd
        data={breadcrumbSchema([
          { name: "Početna", path: "/" },
          { name: "Reference", path: "/reference" },
        ])}
      />
      <PageHero
        eyebrow="Reference i projekti"
        title="Svaki projekat ima svoj poslovni kontekst."
        description="Reference ne posmatramo kao šablone, već kao primere sistema i sajtova prilagođenih konkretnom načinu rada klijenta."
        primaryAction={{ label: "Zatražite procenu sličnog projekta", href: "/kontakt", leadType: "custom_ecommerce", subject: "Upit: procena sličnog projekta", sourceSection: "Reference hero" }}
      />
      <Section className="bg-white">
        <Container>
          <SectionHeading
            eyebrow="Lista projekata"
            title="Reference i projekti"
            description="Svaki projekat je prikazan zasebno, sa linkom ka javnom sajtu, industrijom, tipom projekta i ključnim funkcionalnostima koje su javno poznate ili potvrđene."
          />
          <div className="mt-10 grid gap-4 lg:grid-cols-4">
            {highlightedReferences.map(([client, industry, problem, solution, href]) => (
              <a key={client} href={href} className="group rounded-lg border border-slate-200/80 bg-slate-50/70 p-5 transition duration-300 hover:-translate-y-0.5 hover:border-primary/25 hover:bg-white hover:shadow-[0_22px_70px_rgb(15_23_42_/_0.08)]">
                <div className="flex items-center justify-between gap-3">
                  <div>
                    <p className="text-lg font-semibold text-slate-950">{client}</p>
                    <p className="mt-1 text-xs font-semibold uppercase text-primary">{industry}</p>
                  </div>
                  <ArrowRight className="h-4 w-4 text-slate-400 transition group-hover:translate-x-0.5 group-hover:text-primary" strokeWidth={1.8} />
                </div>
                <div className="mt-5 grid gap-4 border-t border-slate-200/80 pt-5">
                  <p className="text-sm leading-6 text-slate-600"><span className="font-semibold text-slate-950">Problem:</span> {problem}</p>
                  <p className="text-sm leading-6 text-slate-700"><span className="font-semibold text-primary">Rešenje:</span> {solution}</p>
                </div>
              </a>
            ))}
          </div>
          <div className="mt-10 flex flex-col justify-between gap-4 border-t border-slate-200/80 pt-8 md:flex-row md:items-end">
            <div>
              <p className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Pun portfolio</p>
              <h2 className="mt-2 text-2xl font-semibold text-slate-950">Objavljene reference</h2>
            </div>
            <Button
              href="/kontakt"
              variant="outline"
              data-lead-type="custom_ecommerce"
              data-lead-subject="Upit: sistem sličan referencama"
              data-source-section="Reference lista projekata"
            >
              Zatražite procenu sličnog sistema
            </Button>
          </div>
          <div className="mt-8 grid gap-5 md:grid-cols-2 lg:grid-cols-3">
            {caseStudies.length > 0 ? (
              caseStudies.map((item) => (
                <CaseStudyCard
                  key={item.id}
                  client={item.client_name ?? item.title}
                  industry={item.industry ?? "Business software"}
                  projectType={item.project_type}
                  title={item.title}
                  result={item.short_description ?? item.results ?? "Pogledajte detalje projekta."}
                  keyFeatures={item.key_features}
                  metrics={item.metrics}
                  technologies={item.technologies}
                  websiteUrl={item.website_url}
                  href={`/reference/${item.slug}`}
                  image={item.featured_image}
                />
              ))
            ) : (
              <EmptyState
                title="Trenutno nema objavljenih referenci"
                description="Reference se prikazuju nakon provere podataka, linkova i poslovnog konteksta projekta."
              />
            )}
          </div>
          {!result.ok ? <div className="mt-6"><ErrorState message={result.message} /></div> : null}
        </Container>
      </Section>
      <CTASection
        title="Imate sličan izazov?"
        description="Pošaljite nam kontekst procesa i sisteme koje treba povezati."
        actionLabel="Zatražite procenu sličnog projekta"
        leadType="custom_ecommerce"
        subject="Upit: procena sličnog projekta"
        sourceSection="Reference završni CTA"
      />
    </main>
  );
}