import Image from "next/image";
import Link from "next/link";
import { ArrowRight, ExternalLink } from "lucide-react";

import {
  Badge,
  Button,
  Card,
  Container,
  FAQAccordion,
  IconMark,
  JsonLd,
  Section,
  SectionHeading,
  getServiceIcon,
} from "@/components";
import { company } from "@/data/company";
import { absoluteUrl, breadcrumbSchema, createMetadata, faqSchema } from "@/lib/seo";

export const metadata = createMetadata({
  title: "PDA uređaji za WMS, magacin i logistiku",
  description:
    "Chainway PDA uređaji za prijem robe, picking, packing, popis i logistiku - povezani sa ERP, WMS i eCommerce sistemima.",
  path: "/pda-uredjaji-wms",
  image: "/chainway/chainway-c66-hero.webp",
});

const usageAreas = [
  ["scan", "Prijem robe"],
  ["package", "Picking"],
  ["clipboard-check", "Packing"],
  ["clipboard", "Popis"],
  ["workflow", "WMS workflow"],
  ["store", "Retail"],
  ["warehouse", "Magacini"],
  ["truck", "Kurirski centri"],
  ["boxes", "Logistika"],
  ["settings", "Proizvodnja"],
];

const devices = [
  {
    name: "Chainway C66",
    price: "56.000 RSD + PDV",
    description:
      "Profesionalni rugged PDA uređaj za intenzivne logističke i magacinske procese.",
    image: "/chainway/chainway-c66-front.jpg",
    source: "https://www.chainway.net/Products/Info/58",
    features: [
      "barkod skener",
      "rugged dizajn",
      "enterprise upotreba",
      "Android platforma",
      "idealan za WMS i logistiku",
      "rad u magacinu i maloprodaji",
    ],
  },
  {
    name: "Chainway MC95",
    price: "34.000 RSD + PDV",
    description:
      "Izdržljiv PDA uređaj za intenzivnije WMS, logističke i retail procese.",
    image: "/chainway/chainway-mc95-front.jpg",
    source: "https://www.chainway.net/Products/Info/144",
    features: [
      "powerful barcode scanning",
      "Android 12 platforma",
      "5.5” HD ekran",
      "5000mAh izmenjiva baterija",
      "IP68 i 1.5m drop otpornost",
      "NFC, prednja i zadnja kamera",
    ],
  },
];

const workflows = [
  {
    title: "Prijem robe",
    description: "Roba se skenira pri ulazu, povezuje sa dokumentom i ažurira stanje bez ručnog prekucavanja.",
    steps: [
      ["truck", "Dobavljač"],
      ["scan", "PDA skeniranje"],
      ["database", "ERP"],
      ["warehouse", "Zalihe"],
    ],
  },
  {
    title: "Picking",
    description: "Magacioner dobija jasnu listu, skenira artikle i sprema porudžbinu kroz kontrolisan tok.",
    steps: [
      ["shopping-cart", "Porudžbina"],
      ["scan", "PDA"],
      ["clipboard", "Picking lista"],
      ["package", "Pakovanje"],
    ],
  },
  {
    title: "Popis",
    description: "Popis se radi barkod skeniranjem, uz manje grešaka i brži uvid u realno stanje robe.",
    steps: [
      ["scan", "PDA"],
      ["barcode", "Barkod"],
      ["boxes", "Stanje robe"],
      ["analytics", "Izveštaj"],
    ],
  },
];

const caseStudies = [
  {
    title: "DDG Fashion",
    href: "/case-studies/ddg-fashion-pda-prijem-robe-popis",
    result: "7 dana -> 3 sata",
    description: "Automatizacija prijema robe i popisa kroz PDA uređaje.",
    tags: ["PDA", "popis robe", "ERP integracija"],
  },
  {
    title: "Kvantalux",
    href: "/case-studies/kvantalux-ecommerce-9-prodavnica-centralni-magacin",
    result: "9 prodavnica + magacin",
    description: "PDA picking, interni prenosi i kompletiranje porudžbina između lokacija.",
    tags: ["WMS", "više prodavnica", "interni prenosi"],
  },
  {
    title: "Maximalium Proteini",
    href: "/case-studies/maximalium-automatizacija-obrade-porudzbina",
    result: "30 -> 450 paketa dnevno",
    description: "Redefinisan proces obrade porudžbina, pakovanja i kurirskih tokova.",
    tags: ["packing", "logistika", "kuriri"],
  },
];

const implementationCards = [
  ["warehouse", "Osnovni WMS", "Tokovi za prijem, skladištenje, obradu i kontrolu robe."],
  ["package", "Picking i packing", "Liste za skupljanje robe, skeniranje, kontrola i kompletiranje paketa."],
  ["scan", "Prijem robe", "Skeniranje robe pri ulazu i povezivanje sa dokumentima i zalihama."],
  ["clipboard", "Popis", "Brži popis kroz barkod skeniranje i izveštaje o odstupanjima."],
  ["barcode", "Barcode workflow", "Pravila rada zasnovana na barkodovima, lokacijama i statusima."],
  ["database", "ERP integracije", "Povezivanje sa BizniSoftom i drugim poslovnim sistemima."],
  ["shopping-cart", "Webshop integracije", "Porudžbine, zalihe i statusi povezani sa online prodajom."],
  ["workflow", "Logistički workflow", "Interni prenosi, odobravanja, pakovanje, slanje i izveštavanje."],
  ["cpu", "PDA aplikacije", "Jednostavan mobilni interfejs za ljude koji rade u magacinu i radnjama."],
];

const faqs = [
  {
    question: "Da li prodajete samo PDA uređaje?",
    answer:
      "Ne. Uređaji su deo rešenja, ali najveću vrednost donose kada implementiramo barcode workflow, WMS procese, ERP integracije i PDA softver.",
  },
  {
    question: "Za šta se koriste PDA uređaji u magacinu?",
    answer:
      "Za prijem robe, picking, packing, popis, proveru barkoda, interne prenose, retail operacije i kontrolu zaliha.",
  },
  {
    question: "Da li PDA može da se poveže sa BizniSoftom?",
    answer:
      "Da. PDA workflow se može povezati sa BizniSoft/ERP podacima, dokumentima, zalihama, prijemom robe i obradom porudžbina.",
  },
  {
    question: "Koja je razlika između C66 i MC95?",
    answer:
      "C66 je profesionalni rugged uređaj za intenzivne logističke procese, dok je MC95 izdržljiv uređaj sa Android 12 platformom, IP68 zaštitom i snažnim barcode skeniranjem.",
  },
  {
    question: "Da li sistem podržava popis robe?",
    answer:
      "Da. Popis se radi barkod skeniranjem i može značajno smanjiti vreme, ručno prekucavanje i zatvaranje prodajnog objekta.",
  },
  {
    question: "Da li se može povezati sa webshopom?",
    answer:
      "Da. PDA i WMS workflow može pratiti porudžbine iz webshopa, picking liste, packing kontrolu i statuse isporuke.",
  },
];

const jsonLd = [
  breadcrumbSchema([
    { name: "Početna", path: "/" },
    { name: "PDA uređaji za WMS", path: "/pda-uredjaji-wms" },
  ]),
  {
    "@context": "https://schema.org",
    "@type": "Service",
    name: "PDA uređaji i WMS workflow",
    description:
      "Implementacija Chainway PDA uređaja, barcode workflow-a, WMS procesa i integracija sa ERP, eCommerce i logističkim sistemima.",
    provider: {
      "@id": absoluteUrl("/#organization"),
    },
    serviceType: "WMS, PDA devices, barcode workflow",
    areaServed: {
      "@type": "Country",
      name: "Serbia",
    },
    url: absoluteUrl("/pda-uredjaji-wms"),
  },
  ...devices.map((device) => ({
    "@context": "https://schema.org",
    "@type": "Product",
    name: device.name,
    brand: {
      "@type": "Brand",
      name: "Chainway",
    },
    description: device.description,
    image: absoluteUrl(device.image),
    offers: {
      "@type": "Offer",
      priceCurrency: "RSD",
      price: device.name.includes("C66") ? "56000" : "34000",
      availability: "https://schema.org/PreOrder",
      seller: {
        "@id": absoluteUrl("/#organization"),
      },
    },
  })),
  faqSchema(faqs),
];

function FlowLine({ steps, dark = false }: { steps: string[][]; dark?: boolean }) {
  return (
    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
      {steps.map(([iconKey, label], index) => {
        const Icon = getServiceIcon(iconKey);

        return (
          <div
            key={label}
            className={
              dark
                ? "relative rounded-xl border border-white/10 bg-white/[0.055] p-4 text-white shadow-[inset_0_1px_0_rgb(255_255_255_/_0.07)]"
                : "relative rounded-xl border border-slate-200/80 bg-white p-4 text-slate-950 shadow-[0_14px_42px_rgb(15_23_42_/_0.045)]"
            }
          >
            <div className="flex items-center justify-between gap-3">
              <Icon className="h-4 w-4 text-primary" strokeWidth={1.8} />
              {index < steps.length - 1 ? (
                <ArrowRight className={dark ? "h-4 w-4 text-slate-500" : "h-4 w-4 text-slate-300"} strokeWidth={1.8} />
              ) : (
                <span className="rounded-full bg-primary px-2 py-0.5 text-[10px] font-semibold text-white">OK</span>
              )}
            </div>
            <p className={dark ? "mt-4 text-sm font-semibold text-slate-100" : "mt-4 text-sm font-semibold text-slate-950"}>
              {label}
            </p>
          </div>
        );
      })}
    </div>
  );
}

export default function PDAWMSPage() {
  return (
    <main>
      <JsonLd data={jsonLd} />

      <section className="relative overflow-hidden bg-[#111111] text-white">
        <div className="absolute inset-0 blueprint-grid opacity-80" />
        <div className="absolute left-[10%] top-16 h-72 w-72 rounded-full bg-primary/12 blur-3xl" />
        <div className="absolute bottom-0 right-[5%] h-80 w-[32rem] rounded-full bg-sky-400/[0.08] blur-3xl" />
        <Container className="grid min-h-[calc(86vh-5rem)] items-center gap-12 py-14 lg:grid-cols-[0.96fr_1.04fr] lg:py-20">
          <div className="relative">
            <Badge className="border-white/10 bg-white/[0.06] text-primary">PDA + WMS + barcode workflow</Badge>
            <h1 className="mt-6 max-w-4xl text-4xl font-semibold leading-tight tracking-normal text-white sm:text-5xl lg:text-6xl">
              PDA uređaji za magacin, WMS i logistiku
            </h1>
            <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
              Profesionalni Chainway PDA uređaji za prijem robe, picking, packing,
              popis i obradu porudžbina - povezani sa vašim eCommerce, ERP i WMS sistemom.
            </p>
            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
              <Button
                href="/kontakt"
                size="lg"
                data-lead-type="pda_wms"
                data-lead-subject="Upit: PDA uređaji i WMS"
                data-source-section="PDA hero"
              >
                Zatražite ponudu
              </Button>
              <Button href={company.phoneHref} size="lg" variant="darkOutline">
                Pozovite: {company.phone}
              </Button>
            </div>
            <div className="mt-9 grid max-w-2xl gap-3 sm:grid-cols-3">
              {[
                ["scan", "Barkod skeniranje"],
                ["warehouse", "Magacin i WMS"],
                ["database", "ERP integracija"],
              ].map(([iconKey, label]) => {
                const Icon = getServiceIcon(iconKey);

                return (
                  <div key={label} className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/[0.055] px-4 py-3 text-sm font-semibold text-slate-200">
                    <Icon className="h-4 w-4 text-primary" strokeWidth={1.8} />
                    {label}
                  </div>
                );
              })}
            </div>
          </div>

          <div className="relative">
            <div className="absolute -inset-6 rounded-[2rem] bg-primary/15 blur-3xl" />
            <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04] p-3 shadow-[0_30px_90px_rgb(0_0_0_/_0.26)]">
              <div className="relative min-h-[460px] overflow-hidden rounded-xl border border-white/10 bg-[#151515]">
                <Image
                  src="/chainway/chainway-c66-hero.webp"
                  alt="Chainway C66 PDA uređaj za WMS i logistiku"
                  fill
                  priority
                  className="object-cover object-center"
                  sizes="(min-width: 1024px) 52vw, 100vw"
                />
                <div className="absolute inset-0 bg-[linear-gradient(90deg,rgb(17_17_17_/_0.1),rgb(17_17_17_/_0.62)_58%,rgb(17_17_17_/_0.88))]" />
                <div className="absolute bottom-0 right-0 w-full max-w-xl p-5 sm:p-6">
                  <div className="rounded-xl border border-white/10 bg-[#111111]/80 p-4 backdrop-blur">
                    <div className="flex items-center justify-between border-b border-white/10 pb-3">
                      <p className="text-sm font-semibold">Mobilni WMS tok</p>
                      <span className="rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
                        live operativa
                      </span>
                    </div>
                    <div className="mt-4 grid gap-2">
                      {["Prijem robe", "Picking lista", "Barkod kontrola", "Pakovanje"].map((item) => (
                        <div key={item} className="flex items-center justify-between rounded-lg border border-white/10 bg-white/[0.05] px-3 py-2">
                          <span className="text-xs font-medium text-slate-300">{item}</span>
                          <span className="h-2 w-2 rounded-full bg-primary" />
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Container>
      </section>

      <Section>
        <Container className="grid gap-10 lg:grid-cols-[0.82fr_1.18fr] lg:items-start">
          <SectionHeading
            eyebrow="Nije katalog hardvera"
            title="PDA uređaj bez sistema ne rešava problem"
            description="Najveća vrednost PDA uređaja dolazi kada su povezani sa ERP-om, WMS procesima, webshopom, logistikom i obradom porudžbina. Zato ne isporučujemo samo uređaj, već workflow koji ljudi u magacinu mogu stvarno da koriste."
          />
          <div className="grid gap-4 sm:grid-cols-2">
            {[
              "barcode workflow",
              "WMS procese",
              "picking i packing",
              "prijem robe",
              "popis",
              "ERP integracije",
              "PDA softver",
              "logistički tok porudžbine",
            ].map((item) => (
              <div key={item} className="rounded-2xl border border-slate-200/80 bg-white p-5 text-sm font-semibold text-slate-800 shadow-[0_14px_42px_rgb(15_23_42_/_0.045)]">
                {item}
              </div>
            ))}
          </div>
        </Container>
      </Section>

      <Section tone="slate">
        <Container>
          <SectionHeading
            eyebrow="Chainway"
            title="Zašto Chainway?"
            description="Chainway je profesionalni proizvođač rugged PDA uređaja namenjenih logistici, magacinima, transportu i enterprise sistemima. Njihovi uređaji su razvijeni za svakodnevni rad sa barkod skeniranjem, mobilnim aplikacijama i zahtevnim operativnim okruženjima."
          />
          <div className="mt-10 grid gap-5 lg:grid-cols-[1.1fr_0.9fr]">
            <Card className="overflow-hidden p-0">
              <div className="relative min-h-[360px]">
                <Image
                  src="/chainway/chainway-warehouse.jpg"
                  alt="Chainway skladišni scenariji za PDA uređaje"
                  fill
                  className="object-cover"
                  sizes="(min-width: 1024px) 58vw, 100vw"
                />
                <div className="absolute inset-0 bg-[linear-gradient(90deg,rgb(17_24_39_/_0.76),rgb(17_24_39_/_0.2))]" />
                <div className="absolute bottom-0 left-0 max-w-lg p-6">
                  <Badge className="border-white/10 bg-white/10 text-white">Enterprise uređaji</Badge>
                  <p className="mt-4 text-2xl font-semibold leading-tight text-white">
                    Uređaji za procese u kojima brzina, tačnost i izdržljivost direktno utiču na operativni rezultat.
                  </p>
                </div>
              </div>
            </Card>
            <div className="grid gap-4">
              {[
                ["shield", "Rugged enterprise upotreba"],
                ["scan", "Profesionalno barkod skeniranje"],
                ["refresh", "Pouzdanost u svakodnevnom radu"],
                ["warehouse", "Magacin, retail, logistika i transport"],
              ].map(([iconKey, title]) => {
                const Icon = getServiceIcon(iconKey);

                return (
                  <Card key={title} className="flex items-start gap-4">
                    <IconMark icon={Icon} className="h-9 w-9" />
                    <div>
                      <h3 className="text-base font-semibold text-slate-950">{title}</h3>
                      <p className="mt-2 text-sm leading-6 text-slate-600">
                        Fokus je na praktičnom radu u realnom okruženju, ne na kancelarijskom korišćenju.
                      </p>
                    </div>
                  </Card>
                );
              })}
              <div className="rounded-2xl border border-primary/15 bg-primary-50/60 p-5 text-sm leading-6 text-slate-700">
                Chainway javno prikazuje C66 u parcel sorting scenariju za DHL u Holandiji, što ga pozicionira kao uređaj za ozbiljne logističke procese.
              </div>
            </div>
          </div>
        </Container>
      </Section>

      <Section>
        <Container>
          <SectionHeading
            eyebrow="Gde se koristi"
            title="PDA uređaji su deo operativnog sistema firme"
            description="Koriste se tamo gde je potrebno brzo skeniranje, tačno stanje robe i kontrolisan tok rada između ljudi, ERP-a, magacina i prodaje."
          />
          <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
            {usageAreas.map(([iconKey, title]) => {
              const Icon = getServiceIcon(iconKey);

              return (
                <Card key={title} className="p-5">
                  <IconMark icon={Icon} className="h-9 w-9" />
                  <h3 className="mt-4 text-sm font-semibold text-slate-950">{title}</h3>
                </Card>
              );
            })}
          </div>
        </Container>
      </Section>

      <Section>
        <Container className="grid gap-8 lg:grid-cols-[0.78fr_1.22fr]">
          <SectionHeading
            eyebrow="FAQ"
            title="Najčešća pitanja o PDA uređajima i mobilnom WMS workflow-u."
            description="Pitanja pokrivaju ono što je važno pre kupovine uređaja: proces, ERP vezu, popis, picking, packing i realnu upotrebu u magacinu."
          />
          <FAQAccordion items={faqs} />
        </Container>
      </Section>

      <Section tone="dark" className="text-white">
        <Container>
          <div className="flex flex-col justify-between gap-5 md:flex-row md:items-end">
            <SectionHeading
              eyebrow="Uređaji na lageru"
              title="Chainway PDA uređaji za WMS i logistiku"
              description="Uređaj biramo prema procesu: broj skeniranja, uslovi rada, način držanja, trajanje smene, intenzitet prijema robe, pickinga i popisa."
              tone="dark"
            />
            <Badge className="border-white/10 bg-white/[0.06] text-slate-200">
              Svi Chainway uređaji dostupni su po porudžbini.
            </Badge>
          </div>
          <div className="mt-10 grid gap-6 lg:grid-cols-2">
            {devices.map((device) => (
              <article
                key={device.name}
                className="overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04] shadow-[0_24px_70px_rgb(0_0_0_/_0.18)]"
              >
                <div className="relative h-[340px] border-b border-white/10 bg-[#e5e7eb]">
                  <Image
                    src={device.image}
                    alt={`${device.name} PDA uređaj`}
                    fill
                    className="object-contain object-center p-6"
                    sizes="(min-width: 1024px) 46vw, 100vw"
                  />
                </div>
                <div className="p-6">
                  <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-start">
                    <div>
                      <h3 className="text-2xl font-semibold text-white">{device.name}</h3>
                      <p className="mt-3 max-w-xl text-sm leading-6 text-slate-300">{device.description}</p>
                    </div>
                    <div className="rounded-xl border border-primary/25 bg-primary/10 px-4 py-3 text-left sm:text-right">
                      <p className="text-xs font-semibold uppercase tracking-[0.14em] text-primary">Cena</p>
                      <p className="mt-1 text-lg font-semibold text-white">{device.price}</p>
                    </div>
                  </div>
                  <ul className="mt-6 grid gap-3 sm:grid-cols-2">
                    {device.features.map((feature) => (
                      <li key={feature} className="flex gap-3 text-sm leading-6 text-slate-300">
                        <span className="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-primary/25 bg-primary/10 text-primary">
                          <span className="h-1.5 w-1.5 rounded-full bg-primary" />
                        </span>
                        <span>{feature}</span>
                      </li>
                    ))}
                  </ul>
                  <div className="mt-7 flex flex-col gap-3 sm:flex-row">
                    <Button
                      href="/kontakt"
                      data-lead-type="pda_wms"
                      data-lead-subject="Upit: Chainway PDA uređaji"
                      data-source-section="PDA product cards"
                    >
                      Zatražite ponudu
                    </Button>
                    <a
                      href={device.source}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="inline-flex h-11 items-center justify-center gap-2 rounded-lg border border-white/15 bg-white/[0.055] px-4 text-sm font-semibold text-white transition hover:-translate-y-0.5 hover:border-primary/45 hover:bg-white/[0.08]"
                    >
                      Zvanična specifikacija
                      <ExternalLink className="h-4 w-4" strokeWidth={1.8} />
                    </a>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </Container>
      </Section>

      <Section tone="slate">
        <Container>
          <SectionHeading
            eyebrow="Workflow"
            title="Od skeniranja do ažurnog stanja robe"
            description="PDA proces nije samostalan ekran. On je deo toka koji povezuje ljude u magacinu, dokumente, zalihe, porudžbine i izveštaje."
          />
          <div className="mt-10 grid gap-5">
            {workflows.map((workflow) => (
              <Card key={workflow.title} className="p-6">
                <div className="grid gap-6 lg:grid-cols-[0.32fr_0.68fr] lg:items-center">
                  <div>
                    <h3 className="text-xl font-semibold text-slate-950">{workflow.title}</h3>
                    <p className="mt-3 text-sm leading-6 text-slate-600">{workflow.description}</p>
                  </div>
                  <FlowLine steps={workflow.steps} />
                </div>
              </Card>
            ))}
          </div>
        </Container>
      </Section>

      <Section>
        <Container>
          <SectionHeading
            eyebrow="Case studies"
            title="PDA uređaji u realnim sistemima"
            description="Ovi uređaji imaju smisla kada ubrzavaju proces, smanjuju ručni rad i daju firmi bolji pregled operacija."
          />
          <div className="mt-10 grid gap-5 md:grid-cols-3">
            {caseStudies.map((item) => (
              <Link
                key={item.title}
                href={item.href}
                className="group rounded-2xl border border-slate-200/80 bg-white p-6 shadow-[0_18px_55px_rgb(15_23_42_/_0.055)] transition duration-300 hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-[0_24px_70px_rgb(15_23_42_/_0.09)]"
              >
                <Badge tone="slate">{item.result}</Badge>
                <h3 className="mt-5 text-xl font-semibold text-slate-950">{item.title}</h3>
                <p className="mt-3 text-sm leading-6 text-slate-600">{item.description}</p>
                <div className="mt-5 flex flex-wrap gap-2">
                  {item.tags.map((tag) => (
                    <span key={tag} className="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-slate-600">
                      {tag}
                    </span>
                  ))}
                </div>
                <span className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-primary">
                  Pogledaj case study
                  <ArrowRight className="h-4 w-4 transition group-hover:translate-x-0.5" strokeWidth={1.8} />
                </span>
              </Link>
            ))}
          </div>
          <div className="mt-8 grid gap-4 sm:grid-cols-2">
            <div className="rounded-2xl border border-slate-200/80 bg-slate-50 p-6">
              <p className="text-4xl font-semibold text-slate-950">7 dana -&gt; 3 sata</p>
              <p className="mt-2 text-sm leading-6 text-slate-600">DDG Fashion: popis robe uz 5 PDA uređaja.</p>
            </div>
            <div className="rounded-2xl border border-slate-200/80 bg-slate-50 p-6">
              <p className="text-4xl font-semibold text-slate-950">30 -&gt; 450</p>
              <p className="mt-2 text-sm leading-6 text-slate-600">Maximalium: paketa dnevno kroz optimizovan proces obrade.</p>
            </div>
          </div>
        </Container>
      </Section>

      <Section tone="slate">
        <Container>
          <SectionHeading
            eyebrow="Implementacija"
            title="Šta implementiramo uz PDA uređaje?"
            description="PDA je deo šireg sistema: poslovna pravila, zalihe, dokumenti, lokacije, porudžbine, korisnici i izveštaji moraju raditi zajedno."
          />
          <div className="mt-10 grid gap-5 md:grid-cols-3">
            {implementationCards.map(([iconKey, title, description]) => {
              const Icon = getServiceIcon(iconKey);

              return (
                <Card key={title}>
                  <IconMark icon={Icon} className="h-9 w-9" />
                  <h3 className="mt-5 text-lg font-semibold text-slate-950">{title}</h3>
                  <p className="mt-3 text-sm leading-6 text-slate-600">{description}</p>
                </Card>
              );
            })}
          </div>
        </Container>
      </Section>

      <Section tone="dark" className="text-white">
        <Container>
          <div className="grid gap-8 rounded-2xl border border-white/10 bg-white/[0.045] p-6 shadow-[0_24px_70px_rgb(0_0_0_/_0.18)] sm:p-8 lg:grid-cols-[0.7fr_0.3fr] lg:items-center">
            <div>
              <Badge className="border-white/10 bg-white/[0.06] text-primary">PDA + WMS konsultacije</Badge>
              <h2 className="mt-5 max-w-3xl text-3xl font-semibold leading-tight text-white sm:text-4xl">
                Želite PDA workflow koji stvarno ubrzava magacin?
              </h2>
              <p className="mt-4 max-w-2xl text-base leading-7 text-slate-300">
                Pošaljite nam kako trenutno radite prijem robe, picking, packing i popis. Predložićemo uređaj, tok rada i način povezivanja sa vašim sistemima.
              </p>
            </div>
            <div className="flex flex-col gap-3">
              <Button
                href="/kontakt"
                size="lg"
                data-lead-type="pda_wms"
                data-lead-subject="Upit: PDA / WMS workflow"
                data-source-section="PDA završni CTA"
              >
                Zatražite ponudu
              </Button>
              <Button href={company.phoneHref} size="lg" variant="darkOutline">
                Pozovite: {company.phone}
              </Button>
            </div>
          </div>
        </Container>
      </Section>
    </main>
  );
}