import { ArrowRight } from "lucide-react";

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

export const metadata = createMetadata({
  title: "eCommerce za firme sa više prodavnica",
  description:
    "Sistemi za firme sa više prodavnica i magacina: zalihe po lokacijama, ERP/BizniSoft integracije, WMS, kuriri, fakture i automatizacija porudžbina.",
  path: "/ecommerce-vise-prodavnica",
});

const problems = [
  "Zalihe nisu tačne ili nisu vidljive po lokacijama.",
  "Kupac naruči proizvod koji fizički nije dostupan.",
  "Radnje ručno javljaju stanje telefonom, porukama ili tabelama.",
  "Porudžbine se prebacuju preko telefona ili Vibera.",
  "Magacin ne zna šta treba da pokupi, rezerviše ili prebaci.",
  "Fakturisanje i kurirske nalepnice se rade ručno.",
  "B2B i B2C kupci imaju različita pravila, cene i odobravanja.",
  "Menadžment nema jasan pregled prodaje, zaliha i opterećenja tima.",
];

const solutions = [
  "Mapiranje prodavnica, magacina i poslovnih jedinica.",
  "Pravila odakle se roba šalje i kada se rezerviše.",
  "Automatsko rezervisanje zaliha po lokaciji.",
  "Zahtevi između prodavnica i magacina.",
  "Integracija sa BizniSoftom ili drugim ERP sistemom.",
  "Automatsko kreiranje dokumenata i faktura.",
  "Kurirske integracije i priprema pošiljki.",
  "WMS/PDA procesi za picking, packing, prijem robe i interne prenose.",
  "Izveštaji za pregled stanja, porudžbina i operativnih uskih grla.",
];

const process = [
  ["search", "Razgovor i analiza procesa"],
  ["workflow", "Mapiranje tokova robe i porudžbina"],
  ["settings", "Definisanje pravila sistema"],
  ["seo", "Dizajn rešenja"],
  ["cpu", "Razvoj i integracije"],
  ["analytics", "Testiranje sa realnim scenarijima"],
  ["consulting", "Obuka i podrška"],
];

const flow = [
  ["custom-ecommerce-platforme", "Kupac"],
  ["seo", "Sajt"],
  ["erp-biznisoft-integracije", "ERP"],
  ["wms-sistemi", "Magacin/prodavnica"],
  ["workflow", "Kurir"],
  ["analytics", "Faktura"],
];

const faqs = [
  {
    question: "Kako funkcionišu zalihe između više prodavnica?",
    answer:
      "Da. Pravila zaliha definišemo prema lokacijama, dostupnosti, rezervacijama i načinu na koji firma želi da obrađuje porudžbine.",
  },
  {
    question: "Da li webshop može znati iz koje prodavnice se šalje roba?",
    answer:
      "Da. Sistem može imati pravila prioriteta: centralni magacin, najbliža prodavnica, prodavnica sa kompletnom količinom ili ručno odobravanje.",
  },
  {
    question: "Kako funkcionišu interni prenosi?",
    answer:
      "Porudžbina može pokrenuti zahtev prodavnici ili magacinu, odobravanje robe, pripremu internog prenosa i kompletiranje porudžbine na dogovorenoj lokaciji.",
  },
  {
    question: "Da li se može povezati sa BizniSoftom?",
    answer:
      "Da. Povezujemo proizvode, cene, zalihe, kupce, porudžbine i dokumente sa BizniSoftom ili drugim poslovnim sistemom kada postoje tehnički uslovi.",
  },
  {
    question: "Da li je moguće automatsko kreiranje dokumenata?",
    answer:
      "Da. U zavisnosti od ERP-a i procesa mogu se automatizovati fakture, interni dokumenti, nalozi za prenos, kurirske nalepnice i statusi porudžbina.",
  },
  {
    question: "Da li podržavate B2B i B2C kupce?",
    answer:
      "Da. Sistem može imati različite cene, rabate, pravila plaćanja, odobravanja, uslove isporuke i prikaz podataka po tipu kupca.",
  },
  {
    question: "Da li je moguće povezati kurirske službe?",
    answer:
      "Da. Kurirske integracije povezujemo sa porudžbinom, dokumentima, picking/packing tokom, nalepnicama, tracking brojevima i statusima.",
  },
  {
    question: "Da li sistem može koristiti PDA uređaje?",
    answer:
      "Da. Sistem može uključiti picking, packing, prijem robe, interne prenose, barkod skeniranje i kontrolu zaliha kroz PDA uređaje.",
  },
];

function serviceSchema() {
  return {
    "@context": "https://schema.org",
    "@type": "Service",
    name: "eCommerce za firme sa više prodavnica",
    description:
      "Namenski eCommerce sistem za firme sa više prodavnica, magacina, ERP/BizniSoft integracijama, WMS/PDA procesima, kuririma i automatizacijom porudžbina.",
    provider: {
      "@id": `${getSiteUrl()}/#organization`,
    },
    serviceType: "Custom eCommerce, ERP integration, WMS workflow",
    areaServed: {
      "@type": "Country",
      name: "Serbia",
    },
    url: absoluteUrl("/ecommerce-vise-prodavnica"),
  };
}

export default function MultiStoreEcommercePage() {
  return (
    <main>
      <JsonLd
        data={[
          breadcrumbSchema([
            { name: "Početna", path: "/" },
            { name: "eCommerce za više prodavnica", path: "/ecommerce-vise-prodavnica" },
          ]),
          serviceSchema(),
          faqSchema(faqs),
        ]}
      />
      <PageHero
        eyebrow="eCommerce za više prodavnica"
        title="eCommerce sistem za firme sa više prodavnica"
        description="Ako imate više prodavnica, magacina ili poslovnih jedinica, klasična online prodavnica često nije dovoljna. Potreban vam je sistem koji zna gde se roba nalazi, ko je zadužen za obradu, kako se porudžbina deli, kada se šalje iz magacina, a kada iz prodavnice."
        primaryAction={{ label: "Zakažite konsultaciju", href: "/kontakt" }}
        secondaryAction={{ label: "Izračunajte trošak ručnog rada", href: "/kalkulator-ustede-ecommerce" }}
      >
        <div className="rounded-2xl border border-white/10 bg-white/[0.035] p-4 shadow-[0_24px_80px_rgb(0_0_0_/_0.16)]">
          <div className="rounded-xl border border-white/10 bg-[#151515] p-5">
            <p className="text-sm font-semibold text-white">Tok porudžbine kroz firmu</p>
            <div className="mt-5 grid gap-3">
              {flow.map(([key, item], index) => {
                const Icon = getServiceIcon(key);

                return (
                  <div key={item} className="grid grid-cols-[auto_1fr_auto] items-center gap-3 rounded-lg border border-white/10 bg-white/[0.04] px-4 py-3">
                    <Icon className="h-4 w-4 text-primary" strokeWidth={1.8} />
                    <span className="text-sm font-medium text-slate-200">{item}</span>
                    {index < flow.length - 1 ? <ArrowRight className="h-4 w-4 text-slate-500" strokeWidth={1.8} /> : <span className="rounded-full bg-primary px-2.5 py-1 text-[11px] font-semibold text-white">OK</span>}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </PageHero>

      <Section>
        <Container>
          <SectionHeading
            eyebrow="Problem"
            title="Problem nije samo prodaja - problem je organizacija"
            description="Kod firmi sa više lokacija eCommerce mora da zna šta se dešava u prodavnicama, magacinima, ERP-u, logistici i administraciji."
          />
          <ul className="mt-10 grid gap-3 md:grid-cols-2">
            {problems.map((item) => (
              <CheckLine key={item}>{item}</CheckLine>
            ))}
          </ul>
        </Container>
      </Section>

      <Section tone="slate">
        <Container className="grid gap-10 lg:grid-cols-[0.85fr_1.15fr]">
          <SectionHeading
            eyebrow="Rešenje"
            title="Zato pravimo sistem prema vašoj logistici"
            description="Ne namećemo šablon. Mapiramo kako roba, porudžbina i dokument prolaze kroz firmu, pa tek onda definišemo pravila sistema."
          />
          <div className="grid gap-4 sm:grid-cols-2">
            {solutions.map((item) => (
              <FeatureCard key={item} title={item} description="Pravila se definišu prema vašem realnom procesu i mogu se razvijati fazno." iconKey={item.includes("BizniSoft") ? "erp-biznisoft-integracije" : item.includes("WMS") ? "wms-sistemi" : item.includes("kurir") || item.includes("pošilj") ? "workflow" : "custom-ecommerce-platforme"} />
            ))}
          </div>
        </Container>
      </Section>

      <Section>
        <Container>
          <SectionHeading
            eyebrow="Proces"
            title="Kako pristupamo projektu"
            description="Najpre razumemo postojeći rad, zatim postavljamo pravila i tek onda razvijamo sistem koji tim može da koristi u realnim scenarijima."
          />
          <div className="mt-10 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            {process.map(([iconKey, item], index) => (
              <div key={item} className="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-[0_14px_42px_rgb(15_23_42_/_0.055)]">
                <IconMark icon={getServiceIcon(iconKey)} className="mb-4 h-9 w-9" />
                <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">{String(index + 1).padStart(2, "0")}</p>
                <h2 className="mt-3 text-base font-semibold leading-6 text-slate-950">{item}</h2>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      <Section tone="light">
        <Container className="grid gap-8 lg:grid-cols-[1fr_auto] lg:items-center">
          <SectionHeading
            eyebrow="Konsultacije"
            title="Imate više prodavnica i želite da sve radi kao jedan sistem?"
            description="Pošaljite nam kako trenutno obrađujete porudžbine, zalihe, prenose i fakture. Predložićemo sledeći korak."
          />
          <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-[0_18px_55px_rgb(15_23_42_/_0.06)]">
            <Button
              href="/kontakt"
              size="lg"
              data-lead-type="ecommerce"
              data-lead-subject="Upit: eCommerce za više prodavnica"
              data-source-section="Landing završni CTA"
            >
              Zakažite konsultaciju
            </Button>
            <a href={company.phoneHref} className="mt-4 block text-sm font-semibold text-primary hover:text-primary-700">
              Telefon: {company.phone}
            </a>
          </div>
        </Container>
      </Section>

      <Section tone="slate">
        <Container className="grid gap-8 lg:grid-cols-[0.78fr_1.22fr]">
          <SectionHeading
            eyebrow="FAQ"
            title="Pitanja koja firme sa više prodavnica najčešće imaju pre projekta."
            description="Odgovori su fokusirani na zalihe po lokacijama, BizniSoft/ERP, interne prenose, B2B/B2C pravila, kurire i PDA workflow."
          />
          <FAQAccordion items={faqs} />
        </Container>
      </Section>

      <CTASection
        title="Prvo razumemo kako firma posluje, zatim pravimo sistem."
        description="Cilj je eCommerce koji ubrzava prodaju, logistiku i svakodnevne operacije - ne samo još jedan kanal koji tim mora ručno da održava."
      />
    </main>
  );
}