import { ArrowRight, ExternalLink } from "lucide-react";

import {
  Badge,
  Button,
  CheckLine,
  Container,
  DirectBookingRoiCalculator,
  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: "Direktne rezervacije za hotele i apartmane",
  description:
    "ECOM01 razvija sajtove za direktne rezervacije, Beds24 implementaciju, booking engine tokove, ROI procenu, BizniSoft/HMS integracije i hotelsku automatizaciju.",
  path: "/beds24-hoteli-direktne-rezervacije",
});

const beds24Scope = [
  {
    title: "Beds24 podešavanje",
    iconKey: "settings",
    description:
      "Property/unit setup, channel manager konfiguracija, pravila cena, dostupnosti, osnovni booking tok i povezivanje naloga.",
  },
  {
    title: "Direktne rezervacije preko sajta",
    iconKey: "calendar-check",
    description:
      "Booking widget ili API integracija za rezervacije kroz sopstveni sajt, uz UX koji vodi gosta ka direktnom upitu ili bookingu.",
  },
  {
    title: "OTA kanali gde je primenljivo",
    iconKey: "link",
    description:
      "Povezivanje sa Booking/Airbnb i drugim kanalima prema realnom setup-u objekta, bez obećavanja migracije bez prethodne provere.",
  },
  {
    title: "Podrška, onboarding i obuka",
    iconKey: "users",
    description:
      "Uvođenje tima u rad, objašnjenje procedura i podrška oko podešavanja, promena i operativnih pitanja.",
  },
];

const directBooking = [
  {
    title: "Stranice za sobe i apartmane",
    iconKey: "beds",
    description: "Jasna prezentacija smeštajnih jedinica, sadržaja, fotografija, kapaciteta i razloga za direktnu rezervaciju.",
  },
  {
    title: "Dostupnost i rezervacije",
    iconKey: "calendar-check",
    description: "Rezervacioni tok povezan sa Beds24 engine-om, bez generičkog kontakt formulara kao jedinog cilja.",
  },
  {
    title: "SEO za smeštaj",
    iconKey: "search",
    description: "Struktura sadržaja za lokacije, smeštajne jedinice, usluge, lokalne upite i AI/Google razumevanje ponude.",
  },
  {
    title: "Tracking rezervacija",
    iconKey: "analytics",
    description: "Merenje rezervacija, klikova, upita, telefona i marketinških događaja koji utiču na direktnu prodaju.",
  },
  {
    title: "Mobile-first booking UX",
    iconKey: "activity",
    description: "Brz, čist i pouzdan tok za goste koji najčešće proveravaju smeštaj i dostupnost na telefonu.",
  },
  {
    title: "Više jezika kada je potrebno",
    iconKey: "globe",
    description: "Struktura sajta spremna za više tržišta, bez gubitka jasnoće i brzine rezervacionog toka.",
  },
];

const hmsPoints = [
  "integracija sa BizniSoft HMS tamo gde proces to zahteva",
  "prenos rezervacionih i operativnih podataka gde je potrebno",
  "izveštavanje za promet, zauzetost i operativne procese",
  "manje ručnog rada između rezervacija, administracije i hotelskog tima",
];

const housekeepingFeatures = [
  "pregled soba",
  "status čišćenja",
  "zadaci za sobarice",
  "pregled zauzetosti",
  "jednostavan mobilni prikaz",
  "manje komunikacije preko telefona/Vibera",
  "bolja organizacija smena",
];

const audience = [
  ["hotel", "Hoteli"],
  ["building", "Apart-hoteli"],
  ["beds", "Vile"],
  ["housekeeping", "Apartmani"],
  ["users", "Property manageri"],
  ["calendar-check", "Smeštaji sa više jedinica"],
  ["globe", "Objekti koji žele direktne rezervacije"],
  ["erp-biznisoft-integracije", "Objekti koji koriste BizniSoft/HMS"],
];

const workflow = [
  ["users", "Gost"],
  ["globe", "Sajt"],
  ["beds24", "Beds24"],
  ["calendar-check", "Rezervacija"],
  ["erp-biznisoft-integracije", "HMS/BizniSoft"],
  ["housekeeping", "Sobarice"],
  ["dashboard", "Izveštaji"],
];

const resellerModel = [
  "licenca/paket",
  "implementacija",
  "podešavanje",
  "podrška",
  "obuka",
  "integracije",
  "sajt za direktne rezervacije",
];

const resellerJoinUrl = "https://book.ecom01.rs/control2.php?pagetype=join";

const monthlyPricing = [
  ["Osnovna mesečna naknada", "1.820 RSD"],
  ["Cena po smeštajnoj jedinici", "370 RSD"],
  ["Channel Manager link", "80 RSD"],
  ["Subaccount / dodatni login", "285 RSD"],
];

const channelLinkPricing = [
  ["Prvih 10 linkova", "140 RSD po linku"],
  ["Od 11. do 30. linka", "70 RSD po linku"],
  ["Od 31. linka", "30 RSD po linku"],
];

const pricingAssumptions = [
  "Iznosi su zaokruženi radi preglednosti i služe za procenu mesečnog troška.",
  "Beds24 SMS servis ne nudimo za Srbiju; za obaveštenja planiramo alternativni kanal po potrebi.",
];

const faqs = [
  {
    question: "Da li radite direktne rezervacije?",
    answer:
      "Da. Pravimo sajtove i booking tokove koji koriste Beds24 dostupnost, widget ili API integraciju, sa jasnim ciljem da gost može rezervisati direktno.",
  },
  {
    question: "Da li Beds24 sprečava duple rezervacije?",
    answer:
      "Beds24 centralizuje dostupnost i kanale. Mi podešavamo povezivanje pažljivo, uz proveru postojećeg setup-a i procedura objekta.",
  },
  {
    question: "Da li povezujete Beds24 sa BizniSoftom?",
    answer:
      "Da, kada proces to zahteva. Moguće je povezivanje rezervacionih i operativnih podataka sa BizniSoft/HMS logikom i izveštajima.",
  },
  {
    question: "Da li pravite hotelske sajtove?",
    answer:
      "Da. Fokus je na sajtu za direktne rezervacije: sobe ili apartmani, dostupnost, mobile UX, SEO za smeštaj, tracking i više jezika po potrebi.",
  },
  {
    question: "Da li postoji aplikacija za sobarice?",
    answer:
      "Možemo razviti operativni deo za sobarice: status soba, zadaci, zauzetost, mobilni prikaz i smanjenje komunikacije preko telefona ili Vibera.",
  },
  {
    question: "Da li se može pratiti rezervacija kroz analytics?",
    answer:
      "Da. Postavljamo tracking za rezervacije, upite, klikove na telefon, booking tok i marketing kampanje, bez oslanjanja samo na osnovni page view.",
  },
  {
    question: "Da li se mogu povezati Booking i Airbnb?",
    answer:
      "Da, gde je to primenljivo kroz Beds24 i postojeći kanal setup. Migracije i promene kanala radimo tek nakon provere postojećih naloga.",
  },
];

function serviceSchema() {
  return {
    "@context": "https://schema.org",
    "@type": "Service",
    name: "Beds24 integracije i sajtovi za direktne rezervacije",
    description:
      "ECOM01 razvija Beds24 rešenja za hotele i apartmane: sajtove za direktne rezervacije, BizniSoft/HMS integracije, aplikaciju za sobarice i automatizaciju procesa.",
    provider: {
      "@id": `${getSiteUrl()}/#organization`,
    },
    serviceType: "Beds24 hospitality integracije",
    areaServed: {
      "@type": "Country",
      name: "Serbia",
    },
    url: absoluteUrl("/beds24-hoteli-direktne-rezervacije"),
  };
}

function WorkflowLine() {
  return (
    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-7">
      {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>
  );
}

function HospitalityMockup() {
  const rows = [
    ["Beds24 engine", "dostupnost + rezervacije", "calendar-check"],
    ["Direktan sajt", "booking UX + SEO", "globe"],
    ["BizniSoft / HMS", "podaci + izveštaji", "erp-biznisoft-integracije"],
    ["Sobarice", "status soba + zadaci", "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.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">Hotelski digitalni sistem</p>
              <p className="mt-1 text-xs leading-5 text-slate-400">rezervacije, operativa, HMS i marketing u jednom toku</p>
            </div>
            <span className="rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
              Beds24 + ECOM01
            </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">Pozicioniranje</p>
            <p className="mt-2 text-sm leading-6 text-slate-200">
              Beds24 je rezervacioni backend engine. ECOM01 radi implementaciju, podešavanje, sajt, integracije,
              operativne aplikacije i podršku.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function Beds24HotelsPage() {
  return (
    <main>
      <JsonLd
        data={[
          breadcrumbSchema([
            { name: "Početna", path: "/" },
            { name: "Beds24 hoteli i direktne rezervacije", path: "/beds24-hoteli-direktne-rezervacije" },
          ]),
          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">Direktne rezervacije / Beds24 / Hoteli</Badge>
            <h1 className="mt-6 max-w-4xl text-4xl font-semibold leading-tight tracking-normal text-white sm:text-5xl lg:text-6xl">
              Više direktnih rezervacija i manje zavisnosti od Booking.com
            </h1>
            <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
              Gradimo hotelski prodajni sistem: sajt, booking engine tok, Beds24 implementaciju,
              channel manager podešavanje, BizniSoft/HMS integracije, tracking i operativne alate.
            </p>
            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
              <Button
                href="/kontakt"
                size="lg"
                className="whitespace-nowrap"
                data-lead-type="beds24"
                data-lead-subject="Upit: Beds24 za hotele i direktne rezervacije"
                data-source-section="Beds24 hero"
              >
                Zakažite konsultaciju
              </Button>
              <Button href={company.phoneHref} size="lg" variant="darkOutline" className="whitespace-nowrap">
                Pozovite: {company.phone}
              </Button>
              <Button href={resellerJoinUrl} size="lg" variant="darkOutline" className="whitespace-nowrap" target="_blank" rel="noopener noreferrer">
                Otvorite Beds24 nalog
              </Button>
            </div>
            <div className="mt-9 grid max-w-3xl gap-3 text-sm text-slate-300 sm:grid-cols-3">
              {["Integrator i reseller", "Direktan booking kanal", "Operativa + HMS"].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>
          <HospitalityMockup />
        </Container>
      </section>

      <Section tone="slate">
        <Container className="grid gap-8 lg:grid-cols-[0.86fr_1.14fr] lg:items-start">
          <div>
            <SectionHeading
              eyebrow="Booking provizije vs direktna prodaja"
              title="Prvo merimo poslovni razlog, tek onda biramo tehničko rešenje."
              description="Ako hotel plaća značajnu OTA proviziju, direktan kanal može opravdati ulaganje u bolji sajt, booking tok, sadržaj, tracking i kampanje. Kalkulator pomaže da se razgovor odmah veže za prihod, ne za dizajn."
            />
            <div className="mt-6 grid gap-3">
              {[
                "Booking.com i OTA kanali ostaju važni za vidljivost, ali ne treba da budu jedini prodajni kanal.",
                "Direktne rezervacije daju bolju kontrolu gosta, komunikacije, ponuda i ponovnih dolazaka.",
                "Beds24 koristimo kao engine, dok ECOM01 rešava sajt, tok rezervacije, implementaciju i merenje.",
              ].map((item) => (
                <CheckLine key={item}>{item}</CheckLine>
              ))}
            </div>
          </div>
          <DirectBookingRoiCalculator />
        </Container>
      </Section>

      <Section>
        <Container>
          <SectionHeading
            eyebrow="Šta radimo sa Beds24?"
            title="Ne prodajemo samo Beds24 licencu. Gradimo kompletan hotelski digitalni sistem."
            description="ECOM01 je integrator i reseller za Beds24 rešenja. Beds24 postavljamo kao backend engine za rezervacije, a oko njega gradimo implementaciju, onboarding, direktan sajt, operativne integracije, podršku i automatizaciju procesa."
          />
          <div className="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-4">
            {beds24Scope.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)] transition duration-300 hover:-translate-y-0.5 hover:border-primary/20">
                <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="Direktne rezervacije"
            title="Sajt za direktne rezervacije, ne samo prezentacija hotela."
            description="Cilj sajta nije samo da izgleda lepo. Cilj je da gost razume ponudu, proveri smeštaj i rezerviše direktno, bez provizije OTA portala."
          />
          <div className="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
            {directBooking.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>
        <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">Beds24 + BizniSoft / HMS</p>
            <h2 className="mt-4 text-3xl font-semibold leading-tight text-slate-950">Rezervacije povezane sa poslovnim i operativnim podacima.</h2>
            <p className="mt-5 text-base leading-8 text-slate-600">
              Za hotele koji koriste BizniSoft/HMS možemo povezati rezervacije i operativne podatke sa poslovnim
              sistemom, tamo gde proces i postojeća podešavanja to podržavaju.
            </p>
            <ul className="mt-6 space-y-3">
              {hmsPoints.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">Aplikacija za sobarice</p>
            <h2 className="mt-4 text-3xl font-semibold leading-tight text-slate-950">Operativni deo za hotelsko osoblje.</h2>
            <p className="mt-5 text-base leading-8 text-slate-700">
              Sobarice i operativni tim dobijaju jednostavan pregled rada, umesto da se status soba rešava kroz telefon,
              Viber poruke i ručne spiskove.
            </p>
            <ul className="mt-6 grid gap-3 sm:grid-cols-2">
              {housekeepingFeatures.map((item) => (
                <CheckLine key={item}>{item}</CheckLine>
              ))}
            </ul>
          </article>
        </Container>
      </Section>

      <Section tone="dark" className="text-white">
        <Container>
          <SectionHeading
            eyebrow="Direktna prodaja"
            title="Direktne rezervacije kao alternativa provizijama."
            description="Cilj nije da se OTA kanali ugase, već da hotel dobije još jedan jak prodajni kanal: sopstveni sajt, direktne rezervacije i bolju kontrolu odnosa sa gostom."
            tone="dark"
          />
          <div className="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-5">
            {[
              "manje zavisnosti od Booking/Airbnb",
              "bolji odnos sa gostom",
              "mogućnost remarketinga",
              "sopstvena baza gostiju",
              "bolja kontrola brenda",
            ].map((item) => (
              <div key={item} className="rounded-2xl border border-white/10 bg-white/[0.04] p-5 text-sm font-semibold leading-6 text-slate-100">
                {item}
              </div>
            ))}
          </div>
          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Button
              href="/kontakt"
              size="lg"
              data-lead-type="beds24"
              data-lead-subject="Upit: detalji za Beds24 direktne rezervacije"
              data-source-section="Beds24 direktna prodaja"
            >
              Proverite isplativost direktnih rezervacija
            </Button>
            <Button href={resellerJoinUrl} size="lg" variant="darkOutline" target="_blank" rel="noopener noreferrer">
              Otvorite Beds24 nalog
            </Button>
          </div>
        </Container>
      </Section>

      <Section>
        <Container className="grid gap-8 lg:grid-cols-[0.85fr_1.15fr] lg:items-start">
          <SectionHeading
            eyebrow="Paket i podrška"
            title="Licenca, podešavanje i podrška kao kompletna usluga."
            description="ECOM01 može ponuditi Beds24 kao celinu: od izbora i implementacije do sajta, obuke, podrške i integracija koje hotel koristi u svakodnevnom radu."
          />
          <div className="grid gap-3 sm:grid-cols-2">
            {resellerModel.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>
            ))}
            <a
              className="inline-flex items-center justify-between gap-3 rounded-2xl border border-primary/20 bg-primary px-5 py-4 text-sm font-semibold text-white shadow-[0_16px_42px_rgb(0_105_204_/_0.22)] transition hover:-translate-y-0.5 hover:bg-primary-700 sm:col-span-2"
              href={resellerJoinUrl}
              target="_blank"
              rel="noopener noreferrer"
            >
              Direktno otvorite Beds24 nalog kroz ECOM01 reseller program
              <ExternalLink className="h-4 w-4 shrink-0" strokeWidth={1.8} />
            </a>
          </div>
        </Container>
      </Section>

      <Section tone="slate">
        <Container>
          <SectionHeading
            eyebrow="Cenovnik"
            title="Beds24 mesečne naknade u dinarima."
            description="Cena zavisi od broja smeštajnih jedinica, aktivnih channel manager linkova i dodatnih login naloga. Prikazane stavke su preračunate u RSD, dok se implementacija, sajt i integracije procenjuju posebno."
          />
          <div className="mt-10 grid gap-5 lg:grid-cols-[1fr_0.9fr_0.9fr]">
            <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">Mesečne naknade</p>
              <div className="mt-5 divide-y divide-slate-100">
                {monthlyPricing.map(([label, price]) => (
                  <div key={label} className="flex items-center justify-between gap-4 py-3 text-sm">
                    <span className="font-medium text-slate-700">{label}</span>
                    <span className="font-semibold text-slate-950">{price}</span>
                  </div>
                ))}
              </div>
            </article>
            <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">Channel linkovi</p>
              <div className="mt-5 divide-y divide-slate-100">
                {channelLinkPricing.map(([label, price]) => (
                  <div key={label} className="flex items-center justify-between gap-4 py-3 text-sm">
                    <span className="font-medium text-slate-700">{label}</span>
                    <span className="font-semibold text-slate-950">{price}</span>
                  </div>
                ))}
              </div>
              <p className="mt-5 text-sm leading-6 text-slate-600">
                Ovo je skala za veći broj aktivnih linkova. Za tipičan hotel ili apartmane prvo proveravamo realan broj kanala koji se povezuje.
              </p>
            </article>
            <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">Napomene</p>
              <div className="mt-5 grid gap-3">
                {pricingAssumptions.map((item) => (
                  <div key={item} className="rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm leading-6 text-slate-700">
                    {item}
                  </div>
                ))}
              </div>
            </article>
          </div>
          <div className="mt-5 rounded-2xl border border-slate-200/80 bg-white p-5 shadow-[0_14px_42px_rgb(15_23_42_/_0.045)]">
            <div className="grid gap-4 lg:grid-cols-[1fr_auto] lg:items-center">
              <div className="text-sm leading-7 text-slate-600">
                <p>Cenovnik važi od 1. januara 2026. i podložan je promenama.</p>
                <p>Zatražite individualni obračun ako imate dorm/sobe sa krevetima koji se prodaju pojedinačno.</p>
              </div>
              <div className="flex flex-col gap-3 sm:flex-row">
                <Button
                  href="/kontakt"
                  data-lead-type="beds24"
                  data-lead-subject="Upit: detaljan Beds24 obračun"
                  data-source-section="Beds24 cenovnik"
                >
                  Zatražite detaljan obračun
                </Button>
                <Button href={resellerJoinUrl} variant="outline" target="_blank" rel="noopener noreferrer">
                  Otvorite nalog
                </Button>
              </div>
            </div>
          </div>
        </Container>
      </Section>

      <Section tone="slate">
        <Container className="grid gap-8 lg:grid-cols-[1fr_0.95fr] lg:items-start">
          <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">Migracija postojećih naloga</p>
            <h2 className="mt-4 text-3xl font-semibold leading-tight text-slate-950">Prebacivanje se radi pažljivo, uz proveru postojećeg setup-a.</h2>
            <p className="mt-5 text-base leading-8 text-slate-600">
              Ako objekat već koristi Beds24 ili povezane OTA kanale, migracija i prebacivanje naloga rade se uz proveru
              trenutnih podešavanja, procedura, kanala i operativnih posledica. Ne obećavamo automatski import bez analize.
            </p>
            <div className="mt-6 flex flex-col gap-3 sm:flex-row">
              <Button
                href="/kontakt"
                data-lead-type="beds24"
                data-lead-subject="Upit: provera Beds24 migracije"
                data-source-section="Beds24 migracija"
              >
                Analizirajte postojeći setup
              </Button>
              <Button href={resellerJoinUrl} variant="outline" target="_blank" rel="noopener noreferrer">
                Otvorite novi nalog
              </Button>
            </div>
          </article>
          <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">Za koga je ovo?</p>
            <div className="mt-5 grid gap-3 sm:grid-cols-2">
              {audience.map(([iconKey, item]) => (
                <div key={item} className="flex items-center gap-3 rounded-xl border border-slate-200/80 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-800">
                  {(() => {
                    const Icon = getServiceIcon(iconKey);
                    return <Icon className="h-4 w-4 text-primary" strokeWidth={1.8} />;
                  })()}
                  {item}
                </div>
              ))}
            </div>
          </article>
        </Container>
      </Section>

      <Section>
        <Container>
          <SectionHeading
            eyebrow="Workflow"
            title="Od gosta do operativnog izveštaja."
            description="Digitalni hotelski sistem ima vrednost kada rezervacija ne ostane samo u kalendaru, već pokrene pravi tok rada kroz sajt, Beds24, HMS/BizniSoft, sobarice i izveštaje."
          />
          <div className="mt-10">
            <WorkflowLine />
          </div>
        </Container>
      </Section>

      <Section tone="slate">
        <Container>
          <div className="rounded-2xl border border-slate-200/80 bg-white p-6 shadow-[0_18px_55px_rgb(15_23_42_/_0.055)] lg:grid lg:grid-cols-[0.8fr_1.2fr] lg:gap-8">
            <div>
              <Badge tone="blue">Royal Crown case</Badge>
              <h2 className="mt-5 text-3xl font-semibold leading-tight text-slate-950">Hotelski sajt povezan sa Beds24 sistemom.</h2>
              <p className="mt-5 text-base leading-8 text-slate-600">
                Royal Crown je hotelski sajt razvijen kao moderno rešenje za direktne rezervacije i prezentaciju
                smeštaja, povezan sa Beds24 sistemom.
              </p>
              <a
                className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-primary"
                href="https://royalcrown.rs/"
                target="_blank"
                rel="noopener noreferrer"
              >
                Pogledaj Royal Crown
                <ExternalLink className="h-4 w-4" strokeWidth={1.8} />
              </a>
              <div className="mt-6 flex flex-col gap-3 sm:flex-row">
                <Button
                  href="/kontakt"
                  data-lead-type="beds24"
                  data-lead-subject="Upit: sličan hotelski sajt sa Beds24"
                  data-source-section="Beds24 Royal Crown case"
                >
                  Zatražite slično rešenje
                </Button>
                <Button href={resellerJoinUrl} variant="outline" target="_blank" rel="noopener noreferrer">
                  Otvorite Beds24 nalog
                </Button>
              </div>
            </div>
            <div className="mt-8 grid gap-3 sm:grid-cols-2 lg:mt-0">
              {["Laravel + React", "Beds24 povezivanje", "Hotel / Hospitality", "Direktne rezervacije"].map((item) => (
                <div key={item} className="rounded-xl border border-slate-200/80 bg-slate-50 p-5 text-sm font-semibold text-slate-800">
                  {item}
                </div>
              ))}
            </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 Beds24, direktnim rezervacijama i hotelskoj operativi."
            description="Odgovori pokrivaju realne odluke pre implementacije: kanal prodaje, OTA rizik, HMS/BizniSoft podatke, sobarice i merenje rezervacija."
          />
          <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">Direktne rezervacije</p>
            <h2 className="mt-4 max-w-3xl text-3xl font-semibold leading-tight sm:text-4xl">
              Želite sopstveni sistem za direktne rezervacije?
            </h2>
            <p className="mt-5 max-w-2xl text-base leading-7 text-slate-300">
              Ako želite da vaš sajt ne bude samo prezentacija, već kanal za rezervacije i operativni alat za hotel,
              možemo napraviti kompletno rešenje oko Beds24 sistema. 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="beds24"
              data-lead-subject="Upit: sistem za direktne rezervacije"
              data-source-section="Beds24 završni CTA"
            >
              Proverite isplativost direktnih rezervacija
            </Button>
            <Button href={company.phoneHref} size="lg" variant="darkOutline">
              Pozovite {company.phone}
            </Button>
            <Button href={resellerJoinUrl} size="lg" variant="darkOutline" target="_blank" rel="noopener noreferrer">
              Otvorite Beds24 nalog
            </Button>
          </div>
        </Container>
      </section>
    </main>
  );
}