"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";

import FaqBase from "@/components/sections/faq/FaqBase";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBase from "@/components/sections/footer/FooterBase";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import { Sparkles, Search, ArrowUpRight, Monitor, Shield, Zap, Puzzle, TrendingUp, Lock, Phone, MessageCircle, BookOpen, Tv, Camera, Music, Settings, Award, Users, Mail, Instagram } from "lucide-react";

export default function WebAgency2Page() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <ReactLenis root>
        <NavbarLayoutFloatingOverlay
          brandName="Grow With Social"
          navItems={[
            { name: "Domov", id: "/" },
            { name: "Práca", id: "#work" },
            { name: "Služby", id: "#services" },
            { name: "O nás", id: "/about" },
            { name: "Kontakt", id: "/contact" }
          ]}
        />
        <HeroSplitDoubleCarousel
          title="Tvoríme digitálne zážitky"
          description="Premeňte svoju značku s najmodernejším webovým dizajnom a vývojom. Vytvárame úchvatné webové stránky, ktoré premieňajú návštevníkov na zákazníkov."
          tag="Ocenená agentúra"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "canvas-reveal" }}
          buttons={[]}
          buttonAnimation="slide-up"
          carouselPosition="right"
          leftCarouselItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp?_wi=1", imageAlt: "UI UX Dizajn - Aplikácia Daily Life" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp?_wi=1", imageAlt: "UI UX Dizajn - SaaS platforma" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp?_wi=1", imageAlt: "UI UX Dizajn - Luminé starostlivosť o pleť" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp", imageAlt: "UI UX Dizajn - Online kurzy" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-9.webp?_wi=1", imageAlt: "UI UX Dizajn - Biznis kouč" }
          ]}
          rightCarouselItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp?_wi=1", imageAlt: "UI UX Dizajn - Cestovanie Luxuria" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp", imageAlt: "UI UX Dizajn - Zubná prax" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp", imageAlt: "UI UX Dizajn - AI tvorca produktov" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp", imageAlt: "UI UX Dizajn - AI automatizácia" }
          ]}
          carouselItemClassName="!aspect-[4/5]"
        />
        <FeatureBento
          title="Naše služby"
          description="Ponúkame kompletnú sadu digitálnych služieb, ktoré pomôžu vašej značke vyniknúť online."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          buttons={[]}
          buttonAnimation="slide-up"
          features={[
            {
              title: "SEO",              description: "Optimalizujeme vašu webovú stránku, aby sa umiestnila vyššie vo vyhľadávačoch a generovala organickú návštevnosť.",              bentoComponent: "marquee",              centerIcon: Search,
              variant: "text",              texts: ["Kľúčové slová", "Spätné odkazy", "Meta tagy", "Organická návštevnosť", "Poradie", "Analytika", "SERP", "Indexovanie"]
            },
            {
              title: "Budovanie značky",              description: "Vytvorte si zapamätateľnú identitu značky, ktorá osloví vaše publikum.",              bentoComponent: "media-stack",              items: [
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp?_wi=2", imageAlt: "Projekt značky 1" },
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp?_wi=2", imageAlt: "Projekt značky 2" },
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp?_wi=2", imageAlt: "Projekt značky 3" }
              ]
            },
            {
              title: "Tvorba web stránok a redizajn",              description: "Navrhujeme a vyvíjame moderné, responzívne webové stránky a prepracovávame existujúce pre lepší výkon.",              bentoComponent: "media-stack",              items: [
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp?_wi=2", imageAlt: "Web development project - AgentFlow AI Platform" },
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp?_wi=2", imageAlt: "Web development project - Architectural Studio" },
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-3.webp?_wi=2", imageAlt: "Web development project - Summit Roofing" }
              ]
            },
            {
              title: "Spravovanie sociálnych sietí",              description: "Vytvárame a spravujeme angažujúci obsah pre vaše sociálne siete, čím zvyšujeme vašu online prítomnosť.",              bentoComponent: "marquee",              variant: "text",              texts: ["Stratégia obsahu", "Správa kampaní", "Analýza dát", "Interakcia s komunitou", "Rast publika"],
              centerIcon: MessageCircle
            },
            {
              title: "Tvorba loga",              description: "Navrhujeme jedinečné a vizuálne silné logá, ktoré dokonale reprezentujú vašu značku a hodnoty.",              bentoComponent: "reveal-icon",              icon: Sparkles
            },
            {
              title: "Marketing a reklama",              description: "Komplexné marketingové a reklamné stratégie pre zvýšenie viditeľnosti, návštevnosti a konverzií.",              bentoComponent: "line-chart"
            },
            {
              title: "Grafický dizajn",              description: "Pútavý vizuálny obsah a materiály, ktoré oživia vašu značku.",              bentoComponent: "media-stack",              items: [
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp?_wi=1", imageAlt: "Grafický dizajn - UI UX Dizajn" },
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp?_wi=2", imageAlt: "Grafický dizajn - Obal produktu" },
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-9.webp?_wi=2", imageAlt: "Grafický dizajn - Brandové materiály" }
              ]
            }
          ]}
        />
        <FeatureCardTwentySix
          title="Naša práca"
          description="Výber projektov, ktoré sme vytvorili pre klientov naprieč odvetviami."
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[]}
          buttonAnimation="slide-up"
          cardClassName="!h-auto aspect-video"
          features={[
            {
              title: "Umbra Skincare",              description: "Luxusný e-commerce s vôňami",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp",              imageAlt: "Umbra Skincare website",              buttonIcon: ArrowUpRight,
              buttonHref: "#"
            },
            {
              title: "Luxuria Travel",              description: "Luxusné cestovné zážitky na mieru",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp",              imageAlt: "Luxuria Travel website",              buttonIcon: ArrowUpRight,
              buttonHref: "#"
            },
            {
              title: "Dental Care",              description: "Špičková zubná prax",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp",              imageAlt: "Luxury Dental Care website",              buttonIcon: ArrowUpRight,
              buttonHref: "#"
            },
            {
              title: "Summit Roofing",              description: "Profesionálne strešné služby",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-4.webp",              imageAlt: "Summit Roofing website",              buttonIcon: ArrowUpRight,
              buttonHref: "#"
            },
            {
              title: "Dubai Real Estate",              description: "Ponuky luxusných nehnuteľností",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-5.webp",              imageAlt: "Dubai Real Estate website",              buttonIcon: ArrowUpRight,
              buttonHref: "#"
            }
          ]}
        />
        <FeatureBento
          title="Náš sľub"
          description="Prinášame výsledky, ktoré hovoria samy za seba."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              title: "Optimalizácia pre všetky zariadenia",              description: "Pixelovo dokonalé webové stránky, ktoré vyzerajú úžasne na každej veľkosti obrazovky a zariadení.",              bentoComponent: "phone",              statusIcon: Lock,
              alertIcon: Monitor,
              alertTitle: "Kontrola responzivity",              alertMessage: "Všetky breakpointy prešli",              apps: [
                { name: "Telefón", icon: Phone },
                { name: "SMS", icon: MessageCircle },
                { name: "Knihy", icon: BookOpen },
                { name: "TV", icon: Tv },
                { name: "Kamera", icon: Camera },
                { name: "Hudba", icon: Music },
                { name: "Nastavenia", icon: Settings },
                { name: "Chat", icon: MessageCircle }
              ]
            },
            {
              title: "Bezpečný hosting",              description: "Zabezpečenie na podnikovej úrovni a 99,9% dostupnosť pre vašu webovú stránku.",              bentoComponent: "reveal-icon",              icon: Shield
            },
            {
              title: "Rýchle dodanie",              description: "Od konceptu po spustenie v rekordnom čase bez obetovania kvality.",              bentoComponent: "timeline",              heading: "Spustenie projektu",              subheading: "Týždeň 1",              items: [
                { label: "Objavovanie a wireframes", detail: "Deň 1-3" },
                { label: "Návrh a vývoj", detail: "Deň 4-10" },
                { label: "Testovanie a nasadenie", detail: "Deň 11-14" }
              ],
              completedLabel: "Spustené"
            },
            {
              title: "Bezproblémové integrácie",              description: "Spojte sa s nástrojmi, ktoré už používate — CRM, analytika, platby a ďalšie.",              bentoComponent: "orbiting-icons",              centerIcon: Puzzle,
              items: [
                { icon: Shield },
                { icon: Monitor },
                { icon: Zap },
                { icon: TrendingUp }
              ]
            },
            {
              title: "Rastové trendy",              description: "Dátami podložené poznatky na optimalizáciu vašej prítomnosti vo vyhľadávaní a zvýšenie návštevnosti.",              bentoComponent: "line-chart"
            }
          ]}
        />
        <TestimonialCardTen
          title="Čo hovoria naši klienti"
          description="Recenzie od našich spokojných klientov po celom svete."
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              title: "Transformovali našu online prítomnosť",              quote: "Grow With Social úplne premenil našu online prítomnosť. Tím dodal úchvatnú webovú stránku, ktorá prekonala naše očakávania a zdvojnásobila mieru konverzie.",              name: "Maria S.",              role: "CEO Luxuria Travel",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp"
            },
            {
              id: "2",              title: "Výnimočný dizajn a SEO",              quote: "Ich tím vytvoril moderný dizajn a výrazne zlepšil naše SEO. Vidíme nárast organickej návštevnosti o 40% za tri mesiace. Skutoční profesionáli!",              name: "Ján N.",              role: "Marketingový riaditeľ, TechSolutions",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp"
            },
            {
              id: "3",              title: "Skvelá komunikácia a výsledky",              quote: "Spolupráca s Grow With Social bola bezproblémová. Komunikácia bola vynikajúca a dodaný produkt bol presne to, čo sme potrebovali. Vysoko odporúčame!",              name: "Petra K.",              role: "Zakladateľka, Creative Hub",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp"
            },
            {
              id: "4",              title: "Zvýšili naše konverzie",              quote: "Vďaka ich práci sa nám podarilo zvýšiť mieru konverzie o 25%. Sú spoľahliví, efektívni a výsledky hovoria samy za seba.",              name: "Martin H.",              role: "E-commerce manažér, Fashionista",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp?_wi=1"
            },
            {
              id: "5",              title: "Presvedčivý branding",              quote: "Potrebovali sme osviežiť našu značku a Grow With Social to zvládli s prehľadom. Nové logo a webová identita sú úžasné a naši zákazníci ich milujú.",              name: "Zuzana F.",              role: "Majiteľka, Aura Wellness",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp?_wi=1"
            }
          ]}
        />
        <MetricCardOne
          title="Dôverujú nám lídri v odvetví"
          description="Dlhoročné skúsenosti s tvorbou digitálnych produktov, ktoré prinášajú skutočné výsledky."
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            { id: "projects", value: "100+", title: "Projekty", description: "Úspešne dodané vo všetkých odvetviach", icon: Award },
            { id: "satisfaction", value: "99%", title: "Spokojnosť", description: "Miera spokojnosti klientov a rastie", icon: Users },
            { id: "years", value: "8+", title: "Roky", description: "Tvorby výnimočných digitálnych zážitkov", icon: TrendingUp }
          ]}
        />
        <FeatureCardSixteen
          title="Prečo si vybrať Grow With Social"
          description="Pozrite sa, aký rozdiel robí profesionálna webová agentúra."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          negativeCard={{
            items: [
              "Generické šablóny bez osobitosti",              "Pomalé časy načítania a nízky výkon",              "Žiadna SEO stratégia ani viditeľnosť vo vyhľadávaní",              "Zastaraný dizajn, ktorý poškodzuje dôveryhodnosť",              "Žiadna priebežná podpora po spustení"
            ]
          }}
          positiveCard={{
            items: [
              "Vlastný dizajn loga pre silnú identitu",              "Účinné reklamné kampane s preukázanými výsledkami",              "Kreatívny grafický dizajn pre pôsobivé vizuály",              "Profesionálne spravovanie sociálnych sietí pre angažovanosť",              "Vyhradená podpora a údržba pre dlhodobý úspech"
            ]
          }}
        />
        
        <FaqBase
          title="Často kladené otázky"
          description="Všetko, čo potrebujete vedieť o spolupráci s nami."
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          faqs={[
            { id: "1", title: "Ako dlho trvá typický projekt?", content: "Väčšina projektov je dokončená do 2-4 týždňov v závislosti od rozsahu a zložitosti. Podrobný harmonogram vám poskytneme počas úvodnej konzultácie." },
            { id: "2", title: "Aká je vaša cenová štruktúra?", content: "Ponúkame projektové ceny prispôsobené vašim potrebám. Každý projekt zahŕňa návrh, vývoj, SEO optimalizáciu a popredajnú podporu." },
            { id: "3", title: "Ponúkate priebežnú údržbu?", content: "Áno! Poskytujeme priebežnú podporu a balíčky údržby, aby bola vaša webová stránka aktualizovaná, bezpečná a fungovala čo najlepšie." },
            { id: "4", title: "Môžete prepracovať moju existujúcu webovú stránku?", content: "Samozrejme. Špecializujeme sa na redizajn webových stránok, ktoré modernizujú vašu značku a zároveň zachovávajú váš existujúci obsah a SEO pozície." },
            { id: "5", title: "Aké technológie používate?", content: "Staváme s modernými technológiami vrátane Next.js, React a Tailwind CSS, aby sme zabezpečili rýchle, škálovateľné a udržiavateľné webové stránky." }
          ]}
        />
        <ContactCTA
          tag="Ozvite sa"
          title="Pripravení transformovať svoju digitálnu prítomnosť?"
          description="Poďme spoločne vytvoriť niečo mimoriadne. Ozvite sa a prediskutujme váš ďalší projekt."
          background={{ variant: "rotated-rays-animated" }}
          buttons={[{ text: "Kontaktujte nás", href: "/contact" }]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />

        {/* New section for displaying contact details on the main site */}
        <div id="contact-details" data-section="contact-details" className="py-16 lg:py-24 bg-card text-foreground flex flex-col items-center justify-center text-center px-4">
          <h2 className="text-4xl lg:text-5xl font-semibold mb-8">Naše kontaktné údaje</h2>
          <div className="flex flex-col md:flex-row gap-8 items-start md:items-center justify-center max-w-2xl w-full">
            <div className="flex items-center gap-2 text-lg">
              <Mail className="text-primary-cta" size={20} />
              <a href="mailto:growwithsocial.tm@gmail.com" className="hover:underline">growwithsocial.tm@gmail.com</a>
            </div>
            <div className="flex flex-col items-start gap-2 text-lg">
              <div className="flex items-center gap-2">
                <Phone className="text-primary-cta" size={20} />
                <a href="tel:+421911869922" className="hover:underline">0911869922</a>
              </div>
              <div className="flex items-center gap-2 ml-7">
                <a href="tel:+421944320697" className="hover:underline">0944320697</a>
              </div>
            </div>
            <div className="flex items-center gap-2 text-lg">
              <Instagram className="text-primary-cta" size={20} />
              <a href="https://www.instagram.com/growwithsocial.eu" target="_blank" rel="noopener noreferrer" className="hover:underline">@growwithsocial.eu</a>
            </div>
          </div>
        </div>

        <FooterBase
          logoText="Grow With Social"
          copyrightText="© 2026 | Grow With Social"
          columns={[
            {
              title: "Spoločnosť",              items: [
                { label: "O nás", href: "/about" },
                { label: "Služby", href: "#services" },
                { label: "Práca", href: "#work" },
                { label: "Kontakt", href: "/contact" }
              ]
            },
            {
              title: "Služby",              items: [
                { label: "Vývoj webu", href: "/#" },
                { label: "SEO", href: "/#" },
                { label: "Budovanie značky", href: "/#" },
                { label: "UI/UX Dizajn", href: "/#" }
              ]
            },
            {
              title: "Spojiť sa",              items: [
                { label: "Twitter", href: "/#" },
                { label: "LinkedIn", href: "/#" },
                { label: "Instagram", href: "/#" },
                { label: "Dribbble", href: "/#" }
              ]
            }
          ]}
        />
      </ReactLenis>
    </ThemeProvider>
  );
}
