import Link from "next/link";
import { ArrowRight } from "lucide-react";

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

export const metadata = createMetadata({
  title: "BS Reporter | Operativna platforma za BizniSoft, logistiku i PDA procese",
  description:
    "BS Reporter povezuje BizniSoft, eCommerce, magacine, PDA uređaje, Beds24 i logističke procese u jedinstven operativni sistem.",
  path: "/bs-reporter",
});

const keyAreas = [
  {
    title: "Interni prenosi",
    iconKey: "internal-transfer",
    description:
      "Automatizacija zahteva između prodavnica i magacina, odobravanja robe, prenosa i interne dokumentacije.",
  },
  {
    title: "Nivelacije i zalihe",
    iconKey: "stock",
    description:
      "Kontrola stanja robe, nivelacije i operacije nad zalihama kroz praktične workflow procese.",
  },
  {
    title: "WMS i PDA uređaji",
    iconKey: "scan",
    description:
      "Picking, packing, prijem robe, popis i obrada robe preko PDA uređaja i barkod skeniranja.",
  },
  {
    title: "Shopify integracija",
    iconKey: "custom-ecommerce-platforme",
    description:
      "Povezivanje online prodaje sa BizniSoft ERP sistemom, obradom porudžbina i fiskalizacijom računa.",
  },
  {
    title: "Obrada porudžbina",
    iconKey: "orders",
    description:
      "Automatizovan tok od porudžbine do fakture, kurirske službe i pakovanja.",
  },
  {
    title: "Fiskalizacija i dokumenta",
    iconKey: "documents",
    description:
      "Automatsko kreiranje dokumentacije i povezivanje sa poslovnim procesima.",
  },
  {
    title: "Beds24 integracija",
    iconKey: "hotelska-resenja",
    description:
      "Povezivanje hotelskih rezervacija, smeštajnih jedinica i operativnih tokova sa ERP sistemom.",
  },
  {
    title: "HMS za sobarice",
    iconKey: "housekeeping",
    description:
      "Jednostavan sistem za organizaciju i pregled hotelskih soba i rada sobarica.",
  },
  {
    title: "Izveštavanje i dashboardi",
    iconKey: "dashboard",
    description:
      "Pregled poslovanja, prodaje, logistike i operativnih procesa kroz centralizovane izveštaje.",
  },
  {
    title: "Third-party integracije",
    iconKey: "database",
    description:
      "Povezivanje sa kurirskim službama, webshopovima, API sistemima i dodatnim poslovnim alatima.",
  },
];

const scenarios = [
  {
    title: "eCommerce + više prodavnica",
    iconKey: "custom-ecommerce-platforme",
    description:
      "Kada porudžbina ne može samo da se prosledi magacinu, već mora da proveri prodavnice, rezerviše robu i pripremi interni tok.",
    steps: ["Porudžbina", "ERP", "Zahtevi prodavnicama", "Odobravanje", "Interni prenos", "PDA pakovanje", "Kurir"],
  },
  {
    title: "Magacin i PDA",
    iconKey: "scan",
    description:
      "Operativni workflow za prijem robe, kontrolu zaliha, picking, packing i slanje bez ručnog prekucavanja.",
    steps: ["Prijem robe", "PDA skeniranje", "Zalihe", "Picking", "Packing", "Slanje"],
  },
  {
    title: "Hotel + Beds24",
    iconKey: "hotelska-resenja",
    description:
      "Povezivanje rezervacija i smeštajnih jedinica sa operativnim pregledom i radom tima na terenu.",
    steps: ["Rezervacija", "Beds24", "BS Reporter", "Operativni pregled", "HMS/sobarice"],
  },
];

const audiences = [
  ["warehouse", "Firme sa više prodavnica"],
  ["database", "Distributeri i veleprodaje"],
  ["orders", "eCommerce sistemi sa velikim brojem porudžbina"],
  ["wms-sistemi", "Firme sa magacinima"],
  ["hotelska-resenja", "Hoteli i smeštajni sistemi"],
  ["erp-biznisoft-integracije", "Kompanije koje koriste BizniSoft"],
  ["automation", "Timovi koji žele manje ručnog rada"],
];

const beforeItems = [
  "ručni procesi",
  "Excel tabele",
  "Viber komunikacija",
  "duplo prekucavanje",
  "spora obrada",
  "greške",
  "nepovezani sistemi",
];

const afterItems = [
  "automatizovani workflow",
  "centralizovan pregled",
  "PDA obrada",
  "ERP integracija",
  "brže pakovanje",
  "manje grešaka",
  "skalabilna logistika",
];

const platformIdentity = {
  not: ["generički SaaS", "gotov šablonski softver", "zatvoren sistem"],
  is: [
    "fleksibilan operativni sloj",
    "prilagodljiv načinu rada firme",
    "razvijan kroz realne procese klijenata",
    "praktičan alat za svakodnevni rad",
  ],
};

const technologyItems = [
  "BizniSoft",
  "Shopify",
  "Beds24",
  "API integracije",
  "PDA uređaji",
  "Barcode workflow",
  "Fiskalizacija",
  "Kurirske službe",
];

const caseStudyLinks = [
  {
    title: "Kvantalux",
    href: "/case-studies/kvantalux-ecommerce-9-prodavnica-centralni-magacin",
    label: "9 prodavnica + centralni magacin",
    description: "eCommerce, interni prenosi, zahtevi prodavnicama i PDA pakovanje kroz realnu retail logistiku.",
  },
  {
    title: "DDG Fashion",
    href: "/case-studies/ddg-fashion-pda-prijem-robe-popis",
    label: "PDA prijem robe i popis",
    description: "Ubrzanje prijema robe i popisa kroz PDA uređaje, bez višednevnog zatvaranja prodavnice.",
  },
  {
    title: "Maximalium Proteini",
    href: "/case-studies/maximalium-automatizacija-obrade-porudzbina",
    label: "od 30 do 450 paketa dnevno",
    description: "Automatizovan tok porudžbine, dokumentacije, kurirske nalepnice, pickinga i packinga.",
  },
  {
    title: "Hotelski / Beds24 projekti",
    href: "/hotelska-resenja",
    label: "rezervacije + operativa",
    description: "Direktne rezervacije, Beds24 povezivanje, smeštajne jedinice i operativni pregled rada.",
  },
];

const faqs = [
  {
    question: "Šta je BS Reporter?",
    answer:
      "BS Reporter je operativna platforma koja povezuje BizniSoft, eCommerce, magacine, prodavnice, PDA uređaje, logistiku, Beds24 i izveštavanje u jedan praktičan workflow.",
  },
  {
    question: "Da li BS Reporter menja BizniSoft?",
    answer:
      "Ne. BizniSoft ostaje centralni ERP, a BS Reporter rešava procese koje ERP sam ne pokriva dovoljno praktično u svakodnevnom radu.",
  },
  {
    question: "Da li radi sa više prodavnica?",
    answer:
      "Da. Platforma može podržati zahteve prodavnicama, odobravanje robe, interne prenose, zalihe po lokacijama i centralni pregled statusa.",
  },
  {
    question: "Da li podržava PDA uređaje?",
    answer:
      "Da. BS Reporter može raditi sa PDA workflow-om za prijem robe, popis, picking, packing i barcode kontrolu.",
  },
  {
    question: "Da li se može povezati Shopify?",
    answer:
      "Da. Shopify se može povezati sa BizniSoft-om i operativnim tokom za porudžbine, fiskalizaciju, zalihe i obradu.",
  },
  {
    question: "Da li podržava Beds24?",
    answer:
      "Da. BS Reporter može biti deo hotelskog toka za Beds24, operativni pregled, HMS/BizniSoft podatke i aplikaciju za sobarice.",
  },
  {
    question: "Da li može automatizovati logistiku?",
    answer:
      "Da. Tipični tokovi su interni prenosi, picking, packing, kurirske nalepnice, statusi porudžbina i izveštaji o obradi.",
  },
  {
    question: "Da li može generisati izveštaje?",
    answer:
      "Da. Izveštaji se definišu prema poslovanju: prodaja, logistika, zalihe, porudžbine, statusi, učinak i operativna uska grla.",
  },
];

function productSchema() {
  return {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    name: "BS Reporter",
    applicationCategory: "BusinessApplication",
    operatingSystem: "Web",
    description:
      "Operativna platforma koja povezuje BizniSoft, eCommerce, magacine, PDA uređaje, Beds24 i logističke procese.",
    url: absoluteUrl("/bs-reporter"),
    provider: {
      "@id": `${getSiteUrl()}/#organization`,
    },
  };
}

function WorkflowLine({ steps }: { steps: string[] }) {
  return (
    <div className="grid gap-2 sm:grid-cols-[repeat(auto-fit,minmax(120px,1fr))]">
      {steps.map((step, index) => (
        <div key={step} className="relative">
          <div className="flex h-full min-h-20 items-center rounded-xl border border-slate-200/80 bg-white px-4 py-3 text-sm font-semibold leading-5 text-slate-900 shadow-[0_12px_34px_rgb(15_23_42_/_0.045)]">
            {step}
          </div>
          {index < steps.length - 1 ? (
            <ArrowRight
              aria-hidden="true"
              className="absolute -right-3 top-1/2 z-10 hidden h-5 w-5 -translate-y-1/2 text-primary lg:block"
              strokeWidth={1.8}
            />
          ) : null}
        </div>
      ))}
    </div>
  );
}

function DashboardPreview() {
  const rows = [
    ["Porudžbine", "42 aktivne", "orders"],
    ["Interni prenosi", "18 zahteva", "internal-transfer"],
    ["PDA pakovanje", "96% spremno", "scan"],
    ["Beds24 / HMS", "12 soba", "housekeeping"],
  ];

  return (
    <div className="relative">
      <div className="absolute -inset-8 rounded-[2rem] bg-primary/15 blur-3xl" />
      <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.035] p-3 shadow-[0_28px_90px_rgb(0_0_0_/_0.24)]">
        <div className="rounded-xl border border-white/10 bg-[#151515] p-5">
          <div className="flex items-center justify-between border-b border-white/10 pb-4">
            <div>
              <p className="text-sm font-semibold text-white">BS Reporter operativni pregled</p>
              <p className="mt-1 text-xs text-slate-400">BizniSoft ostaje ERP, operativa dobija svoj sloj rada.</p>
            </div>
            <span className="flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
              <span className="h-1.5 w-1.5 rounded-full bg-primary animate-pulse" />
              Live workflow
            </span>
          </div>

          <div className="mt-5 grid gap-3 sm:grid-cols-3">
            {["BizniSoft", "BS Reporter", "eCommerce / PDA / Kuriri"].map((item, index) => (
              <div key={item} className="relative rounded-xl border border-white/10 bg-white/[0.045] p-4">
                <p className="text-xs font-semibold uppercase tracking-[0.14em] text-slate-500">Sloj {index + 1}</p>
                <p className="mt-2 text-sm font-semibold text-slate-100">{item}</p>
                {index < 2 ? (
                  <ArrowRight
                    aria-hidden="true"
                    className="absolute -right-3 top-1/2 hidden h-5 w-5 -translate-y-1/2 text-primary lg:block"
                    strokeWidth={1.8}
                  />
                ) : null}
              </div>
            ))}
          </div>

          <div className="mt-5 grid gap-3">
            {rows.map(([name, value, iconKey]) => {
              const Icon = getServiceIcon(iconKey);

              return (
                <div key={name} className="grid grid-cols-[auto_1fr_auto] items-center gap-3 rounded-xl border border-white/10 bg-white/[0.04] px-4 py-3">
                  <Icon aria-hidden="true" className="h-4 w-4 text-primary" strokeWidth={1.8} />
                  <span className="text-sm font-medium text-slate-200">{name}</span>
                  <span className="text-xs font-semibold text-slate-400">{value}</span>
                </div>
              );
            })}
          </div>

          <div className="mt-5 rounded-xl border border-primary/20 bg-primary/10 p-4">
            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">Suština</p>
            <p className="mt-2 text-sm leading-6 text-slate-200">
              Jedan operativni sloj za procese koji se u praksi često rasipaju između ERP-a, telefona, Excela,
              magacina, prodavnica i kurirskih aplikacija.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function BSReporterPage() {
  return (
    <main>
      <JsonLd
        data={[
          breadcrumbSchema([
            { name: "Početna", path: "/" },
            { name: "BS Reporter", path: "/bs-reporter" },
          ]),
          productSchema(),
          faqSchema(faqs),
        ]}
      />

      <section className="relative overflow-hidden bg-[#111111] text-white">
        <div className="absolute inset-0 blueprint-grid opacity-90" />
        <div className="absolute left-[12%] top-14 h-80 w-80 rounded-full bg-primary/10 blur-3xl" />
        <div className="absolute right-[8%] bottom-0 h-80 w-[30rem] rounded-full bg-sky-400/[0.06] blur-3xl" />

        <Container className="relative grid min-h-[calc(84vh-5rem)] items-center gap-12 py-16 lg:grid-cols-[0.92fr_1.08fr] lg:py-20">
          <div>
            <Badge className="border-white/10 bg-white/[0.06] text-primary">
              Operativni sloj između ERP-a i realnog rada firme
            </Badge>
            <h1 className="mt-6 text-4xl font-semibold leading-tight tracking-normal text-white sm:text-5xl lg:text-6xl">
              BS Reporter
            </h1>
            <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
              Operativna platforma koja povezuje BizniSoft, eCommerce, logistiku,
              PDA uređaje i izveštavanje u jedan sistem.
            </p>
            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
              <Button
                href="/kontakt"
                size="lg"
                data-lead-type="bs_reporter"
                data-lead-subject="Upit: BS Reporter prezentacija"
                data-source-section="BS Reporter hero"
              >
                Zakažite prezentaciju
              </Button>
              <Button href="#funkcionalnosti" size="lg" variant="darkOutline">
                Pogledajte funkcionalnosti
              </Button>
            </div>
            <div className="mt-9 grid max-w-2xl gap-3 text-sm text-slate-300 sm:grid-cols-3">
              {[
                ["erp-biznisoft-integracije", "BizniSoft ostaje ERP"],
                ["workflow", "Operativa dobija workflow"],
                ["scan", "PDA i logistika rade zajedno"],
              ].map(([iconKey, item]) => {
                const Icon = getServiceIcon(iconKey);

                return (
                  <div key={item} className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/[0.055] px-4 py-3 shadow-[inset_0_1px_0_rgb(255_255_255_/_0.06)]">
                    <Icon className="h-4 w-4 text-primary" strokeWidth={1.8} />
                    {item}
                  </div>
                );
              })}
            </div>
          </div>

          <DashboardPreview />
        </Container>
      </section>

      <Section className="bg-white">
        <Container className="grid gap-10 lg:grid-cols-[0.82fr_1.18fr] lg:items-center">
          <SectionHeading
            eyebrow="Šta je BS Reporter?"
            title="Platforma koja povezuje BizniSoft sa realnim operativnim procesima firme."
            description="BS Reporter je platforma razvijena za firme koje koriste BizniSoft i žele više automatizacije, bolju logistiku, praktične WMS procese, PDA rad, integracije i pregled poslovanja u realnom vremenu."
          />
          <div className="rounded-2xl border border-slate-200/80 bg-slate-50 p-6 shadow-[0_18px_55px_rgb(15_23_42_/_0.055)]">
            <p className="text-xl font-semibold leading-8 text-slate-950">
              BS Reporter ne menja ERP.
            </p>
            <p className="mt-4 text-base leading-8 text-slate-700">
              BizniSoft ostaje centralni poslovni sistem. BS Reporter dodaje operativni sloj za procese koje ERP sam
              ne rešava dovoljno praktično: rad više lokacija, zahteve prodavnicama, PDA tokove, kurire, hotelske
              operacije, izveštaje i povezivanje sa third-party alatima.
            </p>
          </div>
        </Container>
      </Section>

      <Section id="funkcionalnosti" tone="slate">
        <Container>
          <SectionHeading
            eyebrow="Ključne oblasti"
            title="Nije samo izveštavanje. To je operativna platforma za svakodnevni rad."
            description="Funkcionalnosti se biraju i prilagođavaju prema procesu firme: od prodavnica i magacina do hotela, kurira, fiskalizacije i dashboarda."
          />
          <div className="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
            {keyAreas.map((item) => (
              <div key={item.title} className="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/20 hover:shadow-[0_24px_70px_rgb(15_23_42_/_0.08)]">
                <IconMark icon={getServiceIcon(item.iconKey)} />
                <h3 className="mt-5 text-lg font-semibold leading-7 text-slate-950">{item.title}</h3>
                <p className="mt-3 text-sm leading-6 text-slate-600">{item.description}</p>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      <Section>
        <Container>
          <SectionHeading
            eyebrow="BS Reporter u praksi"
            title="Realni scenariji, realan tok rada."
            description="Najveća vrednost nije ekran sa podacima, već to što se svakodnevni proces pomera kroz jasan workflow od događaja do izvršenja."
          />
          <div className="mt-10 space-y-5">
            {scenarios.map((scenario) => (
              <div key={scenario.title} className="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-[0_18px_55px_rgb(15_23_42_/_0.055)] sm:p-6">
                <div className="mb-5 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                  <div className="flex gap-4">
                    <IconMark icon={getServiceIcon(scenario.iconKey)} />
                    <div>
                      <h3 className="text-xl font-semibold text-slate-950">{scenario.title}</h3>
                      <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-600">{scenario.description}</p>
                    </div>
                  </div>
                  <Badge tone="slate">workflow</Badge>
                </div>
                <WorkflowLine steps={scenario.steps} />
              </div>
            ))}
          </div>
        </Container>
      </Section>

      <Section tone="dark" className="text-white">
        <Container>
          <SectionHeading
            eyebrow="Za koga je BS Reporter?"
            title="Za firme koje imaju operativnu kompleksnost, ne samo potrebu za još jednim ekranom."
            description="Najviše smisla ima kada BizniSoft treba povezati sa realnim tokom robe, porudžbina, lokacija, ljudi i dodatnih sistema."
            tone="dark"
          />
          <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {audiences.map(([iconKey, item]) => (
              <div key={item} className="rounded-2xl border border-white/10 bg-white/[0.04] p-5 shadow-[inset_0_1px_0_rgb(255_255_255_/_0.06)]">
                <IconMark icon={getServiceIcon(iconKey)} tone="dark" />
                <p className="mt-4 text-sm font-semibold leading-6 text-slate-100">{item}</p>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      <Section tone="slate">
        <Container>
          <SectionHeading
            eyebrow="Pre i posle"
            title="Šta BS Reporter rešava?"
            description="Kada procesi rastu, improvizacija postaje skupa. Platforma uvodi jasan tok rada između ERP-a, lokacija, magacina i ljudi koji izvršavaju zadatke."
          />
          <div className="mt-10 grid gap-5 lg:grid-cols-2">
            <div className="rounded-2xl border border-slate-200/80 bg-white p-6 shadow-[0_18px_55px_rgb(15_23_42_/_0.055)]">
              <p className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Pre</p>
              <h3 className="mt-3 text-2xl font-semibold text-slate-950">Operativa zavisi od ručnog rada</h3>
              <ul className="mt-6 space-y-3">
                {beforeItems.map((item) => (
                  <li key={item} className="flex gap-3 text-sm leading-6 text-slate-600">
                    <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-slate-300" />
                    {item}
                  </li>
                ))}
              </ul>
            </div>
            <div className="rounded-2xl border border-primary/20 bg-white p-6 shadow-[0_18px_55px_rgb(0_105_204_/_0.08)]">
              <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">Posle</p>
              <h3 className="mt-3 text-2xl font-semibold text-slate-950">Operativa ima centralni workflow</h3>
              <ul className="mt-6 space-y-3">
                {afterItems.map((item) => (
                  <CheckLine key={item}>{item}</CheckLine>
                ))}
              </ul>
            </div>
          </div>
        </Container>
      </Section>

      <Section>
        <Container className="grid gap-8 lg:grid-cols-[0.9fr_1.1fr]">
          <SectionHeading
            eyebrow="Pozicioniranje"
            title="BS Reporter nije generički dodatak ERP-u."
            description="Platforma se oblikuje oko toga kako firma stvarno radi: gde je roba, ko odobrava zahtev, kako se pakuje, kada se pravi dokument, ko vidi status i koji sistem mora da primi podatak."
          />
          <div className="grid gap-5 sm:grid-cols-2">
            <div className="rounded-2xl border border-slate-200/80 bg-slate-50 p-6">
              <p className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">BS Reporter nije</p>
              <ul className="mt-5 space-y-3">
                {platformIdentity.not.map((item) => (
                  <li key={item} className="text-sm leading-6 text-slate-600">{item}</li>
                ))}
              </ul>
            </div>
            <div className="rounded-2xl border border-primary/20 bg-primary-50/70 p-6">
              <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">BS Reporter je</p>
              <ul className="mt-5 space-y-3">
                {platformIdentity.is.map((item) => (
                  <CheckLine key={item}>{item}</CheckLine>
                ))}
              </ul>
            </div>
          </div>
        </Container>
      </Section>

      <Section tone="slate">
        <Container>
          <div className="flex flex-col justify-between gap-5 md:flex-row md:items-end">
            <SectionHeading
              eyebrow="Dokaz iz prakse"
              title="Pogledajte kako se BS Reporter koristi u praksi"
              description="Primeri pokazuju različite operativne izazove: retail mreža, PDA prijem i popis, masovna obrada paketa i hotelski procesi."
            />
            <Button href="/case-studies" variant="outline">
              Svi case studies
            </Button>
          </div>
          <div className="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-4">
            {caseStudyLinks.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.08)]"
              >
                <Badge tone="slate">{item.label}</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>
                <span className="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-primary">
                  Pogledaj primer
                  <ArrowRight className="h-4 w-4 transition group-hover:translate-x-0.5" strokeWidth={1.8} />
                </span>
              </Link>
            ))}
          </div>
        </Container>
      </Section>

      <Section>
        <Container className="grid gap-8 lg:grid-cols-[0.75fr_1.25fr]">
          <SectionHeading
            eyebrow="Tehnološka osnova"
            title="Tehnologije su podrška procesu, ne prva poruka."
            description="O njima razgovaramo tek kada je jasno kako treba da izgleda tok rada. Tada biramo integracije i uređaje koji najbolje podržavaju operativni model."
          />
          <div className="flex flex-wrap gap-3 self-start">
            {technologyItems.map((item) => (
              <span key={item} className="rounded-full border border-slate-200/80 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-[0_10px_28px_rgb(15_23_42_/_0.04)]">
                {item}
              </span>
            ))}
          </div>
        </Container>
      </Section>

      <Section tone="slate">
        <Container className="grid gap-8 lg:grid-cols-[0.78fr_1.22fr]">
          <SectionHeading
            eyebrow="FAQ"
            title="Najčešća pitanja o BS Reporter platformi."
            description="Pitanja su fokusirana na realne operativne odluke: šta ostaje u BizniSoft-u, šta se automatizuje i kako se platforma uklapa u postojeći rad firme."
          />
          <FAQAccordion items={faqs} />
        </Container>
      </Section>

      <section className="border-t border-slate-200/70 bg-[#111111] py-16 text-white sm:py-20">
        <Container className="grid gap-8 lg:grid-cols-[1fr_auto] lg:items-center">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">Prezentacija platforme</p>
            <h2 className="mt-4 max-w-3xl text-3xl font-semibold leading-tight sm:text-4xl">
              Želite da BizniSoft, logistika, PDA i eCommerce rade kao jedan operativni sistem?
            </h2>
            <p className="mt-5 max-w-2xl text-base leading-7 text-slate-300">
              Zakažite razgovor i prođimo kroz vaš realan tok robe, porudžbina, dokumenata i timova.
              Telefon:{" "}
              <a className="font-semibold text-white underline decoration-primary/60 underline-offset-4" href={company.phoneHref}>
                {company.phone}
              </a>
            </p>
          </div>
          <div className="flex flex-col gap-3 sm:flex-row lg:flex-col">
            <Button
              href="/kontakt"
              size="lg"
              data-lead-type="bs_reporter"
              data-lead-subject="Upit: BS Reporter operativni sistem"
              data-source-section="BS Reporter završni CTA"
            >
              Zakažite prezentaciju
            </Button>
            <Button href={company.phoneHref} size="lg" variant="darkOutline">
              Pozovite {company.phone}
            </Button>
          </div>
        </Container>
      </section>
    </main>
  );
}