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: "Managed hosting i infrastruktura za poslovne sisteme",
  description:
    "Managed hosting za poslovne sisteme: monitoring, backup, sigurnost, deploy, podrška i jedan partner odgovoran za stabilnost aplikacija.",
  path: "/vps-serveri-poslovna-infrastruktura",
});

const windowsPackages = [
  {
    name: "Business Start",
    price: "40 EUR mesečno + PDV",
    specs: ["4 GB RAM", "4 vCPU", "100 GB SSD", "Windows Server 2019 licenca", "Remote Desktop pristup", "VPN pristup", "Dnevni backup"],
  },
  {
    name: "Business Team",
    badge: "Preporučeno",
    price: "50 EUR mesečno + PDV",
    note: "Preporučeno za 2 ili više računara / korisnika.",
    specs: ["8 GB RAM", "8 vCPU", "100 GB SSD", "Windows Server 2019 licenca", "Remote Desktop pristup", "VPN pristup", "Dnevni backup"],
  },
  {
    name: "Business Performance",
    price: "90 EUR mesečno",
    specs: ["16 GB RAM", "16 vCPU", "100 GB SSD", "Windows Server 2019 licenca", "Remote Desktop pristup", "VPN pristup", "Dnevni backup"],
  },
];

const linuxPackages = [
  {
    name: "Ubuntu VPS Start",
    price: "15 EUR mesečno + PDV",
    specs: ["2 vCPU", "4 GB RAM", "80 GB SSD"],
  },
  {
    name: "Ubuntu VPS Business",
    badge: "Najpopularniji",
    price: "30 EUR mesečno + PDV",
    specs: ["4 vCPU", "8 GB RAM", "160 GB SSD"],
  },
  {
    name: "Ubuntu VPS Performance",
    price: "60 EUR mesečno + PDV",
    specs: ["8 vCPU", "16 GB RAM", "320 GB SSD"],
  },
  {
    name: "Ubuntu VPS Enterprise",
    price: "120 EUR mesečno + PDV",
    specs: ["16 vCPU", "32 GB RAM", "500 GB SSD"],
  },
];

const includedFeatures = [
  "Licencirani Windows Server 2019",
  "VPN-only pristup",
  "Remote Desktop pristup",
  "VPN nalozi za korisnike",
  "Dnevni backup svakog jutra u 00:30",
  "SSD storage",
  "Stabilna infrastruktura",
  "Osnovna tehnička podrška",
];

const linuxFeatures = [
  "Ubuntu Server",
  "Docker podrška",
  "Nginx / Apache",
  "SSL",
  "Backup",
  "Monitoring",
  "VPN pristup po potrebi",
  "SSH pristup",
  "API sistemi",
  "staging i production okruženja",
];

const reasons = [
  { title: "VPN-only pristup", iconKey: "private-network", description: "Server nije direktno izložen javnom internetu, već mu pristupaju samo autorizovani korisnici kroz VPN." },
  { title: "Veća sigurnost podataka", iconKey: "shield", description: "Finansije, fakture, zalihe i poslovni dokumenti ostaju iza kontrolisanog pristupa." },
  { title: "Stabilnost za poslovne programe", iconKey: "server", description: "Okruženje je planirano za ERP, knjigovodstvo, baze i aplikacije koje tim koristi svaki dan." },
  { title: "Dnevni backup", iconKey: "refresh", description: "Backup se izvršava svakog jutra, uz mogućnost dodatnih kopija na Google Drive nalog klijenta." },
  { title: "Individualna podrška", iconKey: "users", description: "Ne nudimo anonimni hosting za svakoga, već podršku za poslovne scenarije i konkretne korisnike." },
  { title: "Fokus na poslovne sisteme", iconKey: "database", description: "Razumemo aplikacije koje nose realne operacije: dokumenta, zalihe, kupce i izveštaje." },
  { title: "ERP i eCommerce iskustvo", iconKey: "workflow", description: "Infrastruktura se uklapa u procese BizniSoft-a, eCommerce-a, WMS-a i integracija." },
  { title: "Linux i Windows infrastruktura", iconKey: "boxes", description: "Pokrivamo poslovne programe, web sisteme, API-je, Docker i custom platforme." },
];

const idealFor = [
  "BizniSoft",
  "ERP sistemi",
  "knjigovodstveni programi",
  "firme sa više lokacija",
  "udaljeni rad",
  "eCommerce sistemi",
  "WMS sistemi",
  "baze podataka",
  "poslovne aplikacije",
];

const workflow = [
  ["monitor", "Desktop računari"],
  ["private-network", "VPN"],
  ["server", "VPS server"],
  ["erp-biznisoft-integracije", "ERP/BizniSoft"],
  ["refresh", "Backup"],
];

const faqs = [
  {
    question: "Šta znači VPN-only VPS?",
    answer:
      "To znači da server nije direktno dostupan preko javne IP adrese, već mu pristupaju samo autorizovani korisnici kroz sigurnu VPN mrežu.",
  },
  {
    question: "Da li server ima javnu IP adresu?",
    answer:
      "Koncept je da poslovni pristup ne ide direktno preko javnog izlaganja servera. VPN se koristi kao kontrolisan pristup zakupljenom serveru, ne kao posebna VPN usluga.",
  },
  {
    question: "Kako funkcioniše backup?",
    answer:
      "Paketi uključuju dnevni backup svakog jutra u 00:30, uz mogućnost dodatnih automatskih kopija na Google Drive nalog klijenta.",
  },
  {
    question: "Da li je uključen Windows Server?",
    answer:
      "Windows VPS paketi uključuju licencirani Windows Server 2019, Remote Desktop pristup, VPN pristup i dnevni backup.",
  },
  {
    question: "Da li više korisnika može pristupati serveru?",
    answer:
      "Da. Business Team paket je posebno preporučen za 2 ili više računara ili korisnika, a pristup se definiše kroz VPN naloge.",
  },
  {
    question: "Da li nudite Linux VPS?",
    answer:
      "Da. Ubuntu VPS paketi su namenjeni Laravel, Next.js, Docker, API, eCommerce i poslovnim aplikacijama.",
  },
  {
    question: "Da li je moguće povezati BizniSoft?",
    answer:
      "Da. Infrastruktura je posebno korisna za BizniSoft, ERP, knjigovodstvene programe i rad više poslovnica kroz kontrolisan pristup.",
  },
];

function serviceSchema() {
  return {
    "@context": "https://schema.org",
    "@type": "Service",
    name: "Managed hosting i infrastruktura za poslovne sisteme",
    description:
      "Managed hosting, monitoring, backup, sigurnost, deploy i podrška za poslovne aplikacije, ERP okruženja, integracije i ecommerce sisteme.",
    provider: {
      "@id": `${getSiteUrl()}/#organization`,
    },
    serviceType: "Managed hosting i poslovna infrastruktura",
    areaServed: {
      "@type": "Country",
      name: "Serbia",
    },
    url: absoluteUrl("/vps-serveri-poslovna-infrastruktura"),
  };
}

function PricingCard({
  pack,
  tone = "light",
}: {
  pack: { name: string; price: string; specs: string[]; badge?: string; note?: string };
  tone?: "light" | "dark";
}) {
  const dark = tone === "dark";

  return (
    <article
      className={
        dark
          ? "relative rounded-2xl border border-primary/35 bg-[#151515] p-6 text-white shadow-[0_24px_80px_rgb(0_105_204_/_0.16)]"
          : "relative rounded-2xl border border-slate-200/80 bg-white p-6 shadow-[0_18px_55px_rgb(15_23_42_/_0.055)]"
      }
    >
      {pack.badge ? <Badge className="mb-5">{pack.badge}</Badge> : null}
      <h3 className={dark ? "text-2xl font-semibold text-white" : "text-2xl font-semibold text-slate-950"}>{pack.name}</h3>
      <p className={dark ? "mt-4 text-3xl font-semibold text-primary" : "mt-4 text-3xl font-semibold text-primary"}>{pack.price}</p>
      {pack.note ? <p className={dark ? "mt-3 text-sm leading-6 text-slate-300" : "mt-3 text-sm leading-6 text-slate-600"}>{pack.note}</p> : null}
      <ul className="mt-6 space-y-3">
        {pack.specs.map((spec) => (
          <CheckLine key={spec}>{spec}</CheckLine>
        ))}
      </ul>
    </article>
  );
}

function InfrastructureMockup() {
  const rows = [
    ["VPN-only mreža", "server nije javno izložen", "private-network"],
    ["Windows / Linux VPS", "poslovni programi i web sistemi", "server"],
    ["Dnevni backup", "svako jutro u 00:30", "refresh"],
    ["Kontrola pristupa", "autorizovani korisnici", "key"],
  ];

  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.22)]">
        <div className="rounded-xl border border-white/10 bg-[#151515] p-5">
          <div className="flex items-center justify-between gap-4 border-b border-white/10 pb-4">
            <div>
              <p className="text-sm font-semibold text-white">Privatna poslovna infrastruktura</p>
              <p className="mt-1 text-xs leading-5 text-slate-400">server, korisnici, poslovni programi i backup iza VPN pristupa</p>
            </div>
            <span className="rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">VPN-only</span>
          </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] gap-3 rounded-xl border border-white/10 bg-white/[0.045] px-4 py-3">
                  <Icon className="mt-0.5 h-4 w-4 text-primary" strokeWidth={1.8} />
                  <div>
                    <p className="text-sm font-semibold text-slate-100">{name}</p>
                    <p className="mt-1 text-xs text-slate-400">{value}</p>
                  </div>
                </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">Princip</p>
            <p className="mt-2 text-sm leading-6 text-slate-200">
              Ne prodajemo jeftin hosting za svakoga. Infrastrukturu postavljamo za poslovne podatke,
              programe, udaljeni rad i kontrolisan pristup.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

function WorkflowLine() {
  return (
    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-5">
      {workflow.map(([iconKey, item], index) => (
        <div key={item} className="relative rounded-2xl border border-slate-200/80 bg-white p-5 shadow-[0_14px_42px_rgb(15_23_42_/_0.05)]">
          <div className="flex items-center justify-between gap-3">
            <IconMark icon={getServiceIcon(iconKey)} className="h-9 w-9" />
            <span className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">{String(index + 1).padStart(2, "0")}</span>
          </div>
          <p className="mt-5 text-sm font-semibold leading-6 text-slate-950">{item}</p>
          {index < workflow.length - 1 ? (
            <ArrowRight className="absolute -right-3 top-1/2 z-10 hidden h-5 w-5 -translate-y-1/2 text-primary xl:block" strokeWidth={1.8} />
          ) : null}
        </div>
      ))}
    </div>
  );
}

export default function BusinessVPSPage() {
  return (
    <main>
      <JsonLd
        data={[
          breadcrumbSchema([
            { name: "Početna", path: "/" },
            { name: "VPS poslovna infrastruktura", path: "/vps-serveri-poslovna-infrastruktura" },
          ]),
          serviceSchema(),
          faqSchema(faqs),
        ]}
      />

      <section className="relative overflow-hidden bg-[#111111] text-white">
        <div className="absolute inset-0 blueprint-grid opacity-90" />
        <div className="absolute left-[10%] top-20 h-80 w-80 rounded-full bg-primary/10 blur-3xl" />
        <div className="absolute right-[7%] bottom-0 h-80 w-[28rem] rounded-full bg-sky-400/[0.06] blur-3xl" />
        <Container className="relative grid min-h-[calc(82vh-5rem)] items-center gap-12 py-16 lg:grid-cols-[0.95fr_1.05fr] lg:py-20">
          <div>
            <Badge className="border-white/10 bg-white/[0.06] text-primary">Managed hosting / infrastruktura / održavanje</Badge>
            <h1 className="mt-6 max-w-4xl text-4xl font-semibold leading-tight tracking-normal text-white sm:text-5xl lg:text-6xl">
              Jedan partner odgovoran za stabilnost kompletnog sistema
            </h1>
            <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
              Ne prodajemo server kao specifikaciju. Postavljamo i održavamo infrastrukturu za poslovne
              aplikacije, integracije, ERP okruženja i ecommerce sisteme uz monitoring, backup i podršku.
            </p>
            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
              <Button
                href="/kontakt"
                size="lg"
                data-lead-type="vps"
                data-lead-subject="Upit: managed hosting i infrastruktura"
                data-source-section="VPS hero"
              >
                Zatražite procenu infrastrukture
              </Button>
              <Button href={company.phoneHref} size="lg" variant="darkOutline">
                Pozovite: {company.phone}
              </Button>
            </div>
            <div className="mt-9 grid max-w-3xl gap-3 text-sm text-slate-300 sm:grid-cols-3">
              {["Monitoring", "Backup", "Sigurnost i podrška"].map((item) => (
                <div key={item} className="rounded-xl border border-white/10 bg-white/[0.055] px-4 py-3 font-semibold shadow-[inset_0_1px_0_rgb(255_255_255_/_0.06)]">
                  {item}
                </div>
              ))}
            </div>
          </div>
          <InfrastructureMockup />
        </Container>
      </section>

      <Section>
        <Container className="grid gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:items-start">
          <SectionHeading
            eyebrow="Ključna filozofija"
            title="VPN-only pristup umesto javnih IP adresa"
            description="Za razliku od mnogih cloud provajdera koji izlažu servere direktno javnom internetu, naši VPS serveri koriste VPN-only pristup."
          />
          <div className="rounded-2xl border border-slate-200/80 bg-slate-50 p-6 shadow-[0_18px_55px_rgb(15_23_42_/_0.055)]">
            <ul className="grid gap-3 sm:grid-cols-2">
              {[
                "server nije direktno dostupan preko javne IP adrese",
                "pristup je moguć samo kroz sigurnu VPN mrežu",
                "značajno se smanjuje rizik od napada",
                "pristup imaju samo autorizovani korisnici",
              ].map((item) => (
                <CheckLine key={item}>{item}</CheckLine>
              ))}
            </ul>
            <p className="mt-6 rounded-xl border border-primary/15 bg-white p-4 text-sm leading-7 text-slate-700">
              Mi ne pružamo VPN uslugu kao poseban proizvod. VPN koristimo isključivo kao siguran pristup
              zakupljenom serveru.
            </p>
          </div>
        </Container>
      </Section>

      <Section tone="slate">
        <Container className="grid gap-8 lg:grid-cols-2">
          <article 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-primary">Poslovni podaci</p>
            <h2 className="mt-4 text-3xl font-semibold leading-tight text-slate-950">Zašto je ovo bitno za poslovne programe?</h2>
            <p className="mt-5 text-base leading-8 text-slate-600">
              Poslovni programi često sadrže finansijske podatke, fakture, stanje robe, podatke kupaca i poslovnu
              dokumentaciju. Zato server ne sme biti samo “negde na internetu”.
            </p>
            <ul className="mt-6 space-y-3">
              {["nije javno izložen", "ima kontrolisan pristup", "ima backup", "ima stabilno okruženje"].map((item) => (
                <CheckLine key={item}>{item}</CheckLine>
              ))}
            </ul>
          </article>
          <article className="rounded-2xl border border-primary/20 bg-primary-50/70 p-6 shadow-[0_18px_55px_rgb(0_105_204_/_0.08)]">
            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">Idealno za</p>
            <div className="mt-5 grid gap-3 sm:grid-cols-2">
              {idealFor.map((item) => (
                <div key={item} className="rounded-xl border border-primary/10 bg-white px-4 py-3 text-sm font-semibold text-slate-800">
                  {item}
                </div>
              ))}
            </div>
          </article>
        </Container>
      </Section>

      <Section>
        <Container>
          <SectionHeading
            eyebrow="Windows VPS"
            title="Windows Server VPS paketi"
            description="Paketi za poslovne programe, udaljeni rad, BizniSoft scenarije i timove kojima su sigurnost i stabilan pristup važniji od jeftinog hostinga."
          />
          <div className="mt-10 grid gap-5 lg:grid-cols-3">
            {windowsPackages.map((pack) => (
              <PricingCard key={pack.name} pack={pack} tone={pack.badge ? "dark" : "light"} />
            ))}
          </div>
        </Container>
      </Section>

      <Section tone="slate">
        <Container>
          <SectionHeading eyebrow="Svi paketi uključuju" title="Osnova koja je potrebna poslovnom timu." />
          <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {includedFeatures.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>
        <Container className="grid gap-8 lg:grid-cols-[0.78fr_1.22fr]">
          <SectionHeading
            eyebrow="FAQ"
            title="Najčešća pitanja o VPN-only VPS infrastrukturi."
            description="Odgovori su fokusirani na sigurnost poslovnih podataka, pristup korisnika, backup i realnu upotrebu za ERP, BizniSoft i poslovne aplikacije."
          />
          <FAQAccordion items={faqs} />
        </Container>
      </Section>

      <Section>
        <Container className="grid gap-8 lg:grid-cols-[0.86fr_1.14fr] lg:items-center">
          <SectionHeading
            eyebrow="Backup"
            title="Fleksibilan backup sistem"
            description="Pored dnevnog backup-a na infrastrukturi, moguće je podesiti i dodatne automatske kopije na Google Drive nalog klijenta, u terminima koji odgovaraju poslovanju firme."
          />
          <div className="grid gap-3 sm:grid-cols-2">
            {["dodatna sigurnost", "dodatna kopija podataka", "fleksibilni termini", "zaštita od gubitka podataka"].map((item) => (
              <div key={item} className="rounded-2xl border border-slate-200/80 bg-slate-50 p-5 text-sm font-semibold text-slate-800">
                {item}
              </div>
            ))}
          </div>
        </Container>
      </Section>

      <Section tone="dark" className="text-white">
        <Container>
          <SectionHeading
            eyebrow="Linux VPS"
            title="Linux VPS serveri za web sisteme i aplikacije"
            description="Ubuntu VPS infrastruktura za Laravel, Next.js, Docker, API i poslovne aplikacije."
            tone="dark"
          />
          <div className="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-4">
            {linuxPackages.map((pack) => (
              <PricingCard key={pack.name} pack={pack} tone={pack.badge ? "dark" : "light"} />
            ))}
          </div>
          <div className="mt-10 grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
            {linuxFeatures.map((item) => (
              <div key={item} className="rounded-xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm font-semibold text-slate-100">
                {item}
              </div>
            ))}
          </div>
        </Container>
      </Section>

      <Section>
        <Container>
          <SectionHeading
            eyebrow="Zašto firme biraju naš VPS?"
            title="Mi nismo generički hosting provider."
            description="Radimo infrastrukturu za poslovne sisteme. Razumemo ERP i eCommerce procese, rad sa više poslovnica, sigurnost podataka i aplikacije koje tim koristi svaki dan."
          />
          <div className="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-4">
            {reasons.map((item) => (
              <article 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)]">
                <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>
              </article>
            ))}
          </div>
        </Container>
      </Section>

      <Section tone="slate">
        <Container>
          <SectionHeading
            eyebrow="Workflow"
            title="Kontrolisan pristup od računara do poslovnih podataka."
            description="Korisnici rade kroz VPN mrežu, poslovni program je na VPS serveru, a backup se izvršava bez oslanjanja na ručne kopije."
          />
          <div className="mt-10">
            <WorkflowLine />
          </div>
        </Container>
      </Section>

      <Section>
        <Container className="grid gap-8 lg:grid-cols-[0.8fr_1.2fr] lg:items-center">
          <SectionHeading
            eyebrow="Procena infrastrukture"
            title="Zatražite procenu poslovne infrastrukture."
            description="Pošaljite nam koji program koristite, koliko korisnika treba pristup i da li vam je potreban Windows, Linux ili kombinovano okruženje."
          />
          <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 text-slate-950">{company.legalName}</p>
            <div className="mt-5 grid gap-3 text-sm leading-6 text-slate-700 sm:grid-cols-2">
              <p>PIB: {company.pib}</p>
              <p>MB: {company.mb}</p>
              <p className="sm:col-span-2">{company.address}</p>
              <a className="font-semibold text-primary" href={company.phoneHref}>Telefon: {company.phone}</a>
            </div>
            <div className="mt-6 flex flex-col gap-3 sm:flex-row">
              <Button
                href="/kontakt"
                data-lead-type="vps"
                data-lead-subject="Upit: poslovna VPS infrastruktura"
                data-source-section="VPS kontakt blok"
              >
                Procena infrastrukture
              </Button>
              <Button href={company.phoneHref} variant="outline">Pozovite {company.phone}</Button>
            </div>
          </div>
        </Container>
      </Section>
    </main>
  );
}