import { Container, CTASection, FAQAccordion, FeatureCard, JsonLd, PageHero, Section, SectionHeading } from "@/components";
import { servicePages } from "@/data/service-pages";
import { breadcrumbSchema, createMetadata, faqSchema } from "@/lib/seo";

export const metadata = createMetadata({
  title: "Hotelska rešenja",
  description:
    "Hotelski sajtovi, Beds24 integracije, direktne rezervacije, BizniSoft HMS izveštaji i BS Reporter aplikacija.",
  path: "/hotelska-resenja",
});

const sections = [
  {
    id: "izrada-hotelskih-sajtova",
    title: "Hotelski sajtovi sa direktnim rezervacijama",
    description:
      "Izrada hotelskih sajtova sa jasnom ponudom, brzim upitima i direktnim booking tokom koji može da se poveže sa rezervacionim sistemima.",
  },
  {
    id: "beds24-integracije",
    title: "Beds24 integracije",
    description:
      "Povezivanje sa Beds24 API-jem za raspoloživost, cene, rezervacije i automatizaciju operativnih koraka.",
  },
  {
    id: "biznisoft-hms-izvestaji",
    title: "BizniSoft HMS integracija",
    description:
      "Rad sa BizniSoft HMS izveštajima i internim potrebama za pregled prometa, rezervacija i operativnih podataka.",
  },
  {
    id: "bs-reporter",
    title: "BS Reporter aplikacija",
    description:
      "Interna reporting aplikacija za bolju vidljivost, manje ručnih tabela i brže donošenje odluka.",
  },
];

const benefits = [
  "Manje ručnih izveštaja",
  "Direktne rezervacije",
  "Niža zavisnost od OTA kanala",
  "Bolja interna vidljivost",
];

const content = servicePages["hotelska-resenja"];

export default function HotelSolutionsPage() {
  return (
    <main>
      <JsonLd
        data={[
          breadcrumbSchema([
            { name: "Početna", path: "/" },
            { name: "Hotelska rešenja", path: "/hotelska-resenja" },
          ]),
          faqSchema(content.faqs),
        ]}
      />
      <PageHero
        eyebrow={content.eyebrow}
        title={content.title}
        description={content.description}
        primaryAction={{ label: "Zakaži konsultaciju", href: "/kontakt" }}
        secondaryAction={{ label: "Pogledajte rešenja", href: "/resenja" }}
      />

      <Section className="bg-white">
        <Container>
          <SectionHeading
            eyebrow="Šta gradimo"
            title="Od javnog sajta do internih izveštaja."
            description="Hotelska rešenja spajaju prodajni kanal, rezervacije i interne operativne podatke."
          />
          <div className="mt-10 grid gap-5 md:grid-cols-2">
            {sections.map((item) => (
              <div id={item.id} key={item.title} className="scroll-mt-28">
                <FeatureCard title={item.title} description={item.description} />
              </div>
            ))}
          </div>
        </Container>
      </Section>

      <Section className="bg-primary-50">
        <Container>
          <SectionHeading eyebrow="Benefiti" title="Sajt kao alternativni prodajni kanal, bez konflikta kalendara." />
          <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {benefits.map((benefit) => (
              <div key={benefit} className="rounded-lg border border-primary/10 bg-white p-5 text-sm font-semibold text-slate-800 shadow-sm">
                {benefit}
              </div>
            ))}
          </div>
        </Container>
      </Section>

      <Section>
        <Container>
          <div className="grid gap-10 lg:grid-cols-2">
            <div>
              <SectionHeading eyebrow="Proces" title="Od strukture smeštaja do praćenja rezervacija." />
              <div className="mt-8 grid gap-4">
                {content.process.map((item, index) => (
                  <div key={item} className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                    <span className="text-sm font-semibold text-primary">{index + 1}</span>
                    <p className="mt-2 text-sm leading-6 text-slate-700">{item}</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <SectionHeading eyebrow="FAQ" title="Pitanja o Beds24 i direktnim rezervacijama." />
              <div className="mt-8">
                <FAQAccordion items={content.faqs} />
              </div>
            </div>
          </div>
        </Container>
      </Section>

      <CTASection
        title="Planirate hotelski sajt ili booking integraciju?"
        description="Pošaljite nam postojeći proces, PMS/HMS okruženje i cilj direktnih rezervacija."
      />
    </main>
  );
}