"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import FooterCard from "@/components/sections/footer/FooterCard";
import Link from "next/link";
import { Rocket, HelpCircle, Linkedin, Twitter, Github } from "lucide-react";

export default function ContactPage() {
  const navItems = [
    { name: "Početna", id: "hero" },
    { name: "O Nama", id: "about" },
    { name: "Usluge", id: "services" },
    { name: "Rješenja", id: "solutions" },
    { name: "Kontakt", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="grid"
      cardStyle="glass-depth"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={navItems}
          button={{ text: "Početak", href: "contact" }}
          brandName="RR-Solutions"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Započnite Transformaciju"
          tagIcon={Rocket}
          title="Spreman za IT Promjene?"
          description="Kontaktirajte RR-Solutions danas i saznajte kako možemo pomoći vašem poslovanju da prosperira kroz modernu tehnologiju. Naš tim čeka Vas sa personaliziranim rješenjima. Pošalji poruku ili zatraži ponudu za detaljnu konzultaciju."
          buttons={[
            { text: "Pošalji Poruku", href: "/contact" },
            { text: "Zatraži Ponudu", href: "/contact" },
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          faqs={[
            {
              id: "1",              title: "Koji su vaši vrijeme odgovora za hitne slučajeve?",              content: "Naš tim hitne tehnačke podrške dostupan je 24/7. Prosječno vrijeme odgovora je manje od 30 minuta za kritične probleme i do 2 sata za ostale."},
            {
              id: "2",              title: "Nude li besplatnu konzultaciju?",              content: "Da! Nudimo slobodnu početnu IT procjenu i konzultaciju za nove klijente. To nam omogućava da razumemo vaše potrebe i predložimo najbolja rješenja."},
            {
              id: "3",              title: "Kako se računa cijena za vaše usluge?",              content: "Naša cijena ovisi o vrsti usluge, broju korisnika i potrebnoj infrastrukturi. Nude se fleksibilni modeli: fiksna mjesečna gebrina, po-korisnikovoj cijeni ili na osnovi konzumacije. Sve ponude su prilagođene vašem budžetu."},
            {
              id: "4",              title: "Čemu vam je potrebno znati o našoj sadašnjoj IT infrastrukturi?",              content: "Detaljno znanje o vašoj postojećoj infrastrukturi omogućava nam da kreiranje optimalnog plana migracije s minimalnim prekidima. Obično trebaju specifikacije hardvera, lista softvera i dijagram mreže."},
            {
              id: "5",              title: "Jeste li certificirani za određene tehnologije?",              content: "Da! Naš tim ima certificiranja od vodeće tehnologijske tvrtke uključujući Microsoft, AWS, Cisco i druge. Možete vidjeti detalje certificiranja našeg tima na zahtjev."},
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQypvn3TtI6PlQHhc6AAGalGJV/faq-or-customer-support-themed-image-sho-1772539358561-fa0ba48e.png?_wi=2"
          imageAlt="FAQ podrška"
          title="Česta Pitanja"
          description="Odgovori na Vaša uobičajena pitanja o našim uslugama i procesu kontaktiranja"
          tag="Pomoć i Informacije"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground={false}
          mediaPosition="left"
          mediaAnimation="none"
          faqsAnimation="none"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="RR-Solutions"
          copyrightText="© 2025 RR-Solutions. Sve Pravice Zadržane. | Zagreb, Hrvatska"
          socialLinks={[
            { icon: Linkedin, href: "https://linkedin.com/company/rr-solutions", ariaLabel: "LinkedIn" },
            { icon: Twitter, href: "https://twitter.com/rr_solutions", ariaLabel: "Twitter" },
            { icon: Github, href: "https://github.com/rr-solutions", ariaLabel: "GitHub" },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
