"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import { Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="largeSmallSizeMediumTitles"
        background="circleGradient"
        cardStyle="subtle-shadow"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="layered"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "Over Ons",          id: "about"},
        {
          name: "Diensten",          id: "features"},
        {
          name: "FAQ",          id: "faq"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="Seca Support"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{
        variant: "plain"}}
      title="Professionele IT-Ondersteuning voor Seca"
      description="Wij bieden deskundige IT-support op maat om uw Seca-oplossingen optimaal draaiende te houden. Betrouwbaar, snel en persoonlijk."
      tag="Uw partner in IT-support"
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-female-support-phone-operator-speaking-consulting-office_176420-949.jpg",          imageAlt: "modern office support desk friendly"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businessman-using-digital-tablet_1262-16929.jpg",          imageAlt: "support ticket software dashboard"}
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="Gewaardeerd door 50+ tevreden klanten"
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={false}
      tag="Over Ons"
      title="Jarenlange Expertise in Support"
      description="Seca Support staat voor ontzorging. Wij begrijpen dat IT-systemen cruciaal zijn voor uw bedrijfsvoering en zetten alles op alles om uw continuïteit te garanderen."
      subdescription="Sinds onze start hebben wij duizenden tickets succesvol afgehandeld voor diverse partners."
      imageSrc="http://img.b2bpic.net/free-photo/full-shot-man-reading-home_23-2150378978.jpg"
      mediaAnimation="blur-reveal"
      icon={Users}
      imageAlt="minimalist warm office interior"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyOne
      useInvertedBackground={false}
      title="Onze Diensten"
      description="Wat wij voor uw bedrijf kunnen betekenen om de efficiëntie te verhogen en downtime te minimaliseren."
      accordionItems={[
        {
          id: "1",          title: "24/7 Monitoringsupport",          content: "Wij houden uw systemen dag en nacht in de gaten om problemen proactief te verhelpen."},
        {
          id: "2",          title: "Hardware Installatie",          content: "Professionele installatie en configuratie van al uw hardware op locatie."},
        {
          id: "3",          title: "Netwerk Beheer",          content: "Veilige en stabiele netwerkverbindingen voor een ongestoorde workflow."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/high-angle-internet-communication-network-with-copy-space_23-2148779284.jpg"
      mediaAnimation="slide-up"
      imageAlt="tech data connection abstract warm"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",          title: "Hoe snel reageren jullie?",          content: "Wij streven naar een reactietijd van binnen 2 uur tijdens kantooruren."},
        {
          id: "f2",          title: "Werken jullie op locatie?",          content: "Ja, voor complexe hardware vraagstukken komen wij bij u langs."},
        {
          id: "f3",          title: "Is er een contract vereist?",          content: "Nee, wij bieden zowel projectbasis als abonnementsvormen aan."},
      ]}
      title="Veelgestelde vragen"
      description="Hier vindt u antwoorden op de meest gestelde vragen over onze werkwijze."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      text="Klaar om uw IT te optimaliseren? Neem contact op met Seca Support voor een vrijblijvend adviesgesprek."
      buttons={[
        {
          text: "Contact opnemen",          href: "mailto:info@secasupport.nl"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Over ons",              href: "#about"},
            {
              label: "Diensten",              href: "#features"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
        {
          items: [
            {
              label: "Privacybeleid",              href: "#"},
            {
              label: "Algemene Voorwaarden",              href: "#"},
          ],
        },
      ]}
      logoText="Seca Support"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
