"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TextAbout from '@/components/sections/about/TextAbout';
import { Award, Building, CalendarCheck, Home, Lightbulb, Maximize, RotateCcw, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="mediumSizeLargeTitles"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Tjänster",          id: "services"},
        {
          name: "Om oss",          id: "about"},
        {
          name: "Så arbetar vi",          id: "process"},
        {
          name: "Kontakta oss",          id: "contact"},
      ]}
      button={{
        text: "Begär offert",        href: "#contact"}}
      brandName="S-Bygg i Umeå AB"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCentered
      background={{
        variant: "plain"}}
      title="Umeå & Norrland Vi bygger din vision med precision."
      description="S-Bygg levererar hantverksskicklighet och gedigen erfarenhet i varje projekt — från renovering till nybyggnation."
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/monochrome-scene-depicting-life-workers-construction-industry-site_23-2151333269.jpg",          alt: "Teammedlem 1"},
        {
          src: "http://img.b2bpic.net/free-photo/handsome-business-man-engineer-hard-hat-building_1303-21105.jpg",          alt: "Teammedlem 2"},
        {
          src: "http://img.b2bpic.net/free-photo/pleased-young-male-builder-wearing-uniform-safety-helmet-holding-out-hand-camera_141793-96323.jpg",          alt: "Teammedlem 3"},
        {
          src: "http://img.b2bpic.net/free-photo/close-up-portrait-construction-engineer-looking-camera_23-2148233714.jpg",          alt: "Teammedlem 4"},
        {
          src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-posing-with-helmet_23-2148920601.jpg",          alt: "Medium shot smiley man posing with helmet"},
      ]}
      avatarText="Möt vårt team av certifierade yrkesmän"
      buttons={[
        {
          text: "Begär offert",          href: "#contact"},
        {
          text: "Våra tjänster",          href: "#services"},
      ]}
      buttonAnimation="slide-up"
      showMarqueeCard={true}
      marqueeItems={[
        {
          type: "text",          text: "Svenskt hantverk"},
        {
          type: "text",          text: "Lokal expertis"},
        {
          type: "text",          text: "Nöjda kunder"},
        {
          type: "text",          text: "Hållbara lösningar"},
        {
          type: "text",          text: "Trygg leverans"},
      ]}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="opacity"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "15+",          title: "Års erfarenhet",          description: "Med över 15 år in branschen, levererar vi expertis i varje projekt.",          icon: CalendarCheck,
        },
        {
          id: "m2",          value: "300+",          title: "Projekt klara",          description: "Över 300 framgångsrikt avslutade projekt med nöjda kunder.",          icon: Building,
        },
        {
          id: "m3",          value: "100%",          title: "Nöjd-garanti",          description: "Vi garanterar fullständig nöjdhet med vårt arbete, varje gång.",          icon: Award,
        },
      ]}
      title="Vårt engagemang i siffror"
      description="På S-Bygg är varje siffra ett bevis på kvalitet och kundfokus."
    />
  </div>

  <div id="services" data-section="services">
      <FeatureBorderGlow
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          icon: Home,
          title: "Nybyggnation",          description: "Vi uppför bostäder och kommersiella lokaler från grunden med noggrant utförande och hög kvalité."},
        {
          icon: RotateCcw,
          title: "Renovering & ombyggnad",          description: "Modernisering av befintliga ytor med respekt för husets karaktär och era önskemål."},
        {
          icon: Building,
          title: "Fasad & tak",          description: "Fönsterbyte, fasadrenovering och takläggning med långsiktigt tänk och energismarta lösningar."},
        {
          icon: Star,
          title: "Badrum & kök",          description: "Kompletta bad- och köksrenoveringar utförda av certifierade hantverkare med fuktsäkerhet i fokus."},
        {
          icon: Maximize,
          title: "Tillbyggnader",          description: "Utöka ditt hem med välplanerade tillbyggnader — garage, attefallshus, uterum och mycket mer."},
        {
          icon: Lightbulb,
          title: "Projektering & rådgivning",          description: "Vi hjälper dig från ritning till bygglov med lokal sakkunskap om Umeås byggkrav och klimat."},
      ]}
      title="Heltäckande byggtjänster"
      description="Vi erbjuder ett brett spektrum av professionella byggtjänster, anpassade för att möta dina specifika behov och projektkrav."
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={false}
      tag="Om S-Bygg"
      title="Lokalt förankrade. Nationell kvalitet."
      buttons={[
        {
          text: "Kontakta oss",          href: "#contact"},
      ]}
    />
  </div>

  <div id="process" data-section="process">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq1",          title: "01 · Konsultation",          content: "Vi lyssnar på dina önskemål och besöker platsen för en noggrann genomgång för att säkerställa att vi förstår din vision."},
        {
          id: "faq2",          title: "02 · Offert & planering",          content: "Du får en tydlig offert utan dolda kostnader och en realistisk tidplan. Vi ser till att du har full insyn i processen."},
        {
          id: "faq3",          title: "03 · Genomförande",          content: "Projektet genomförs med löpande kommunikation och minsta möjliga störning, alltid med fokus på kvalitet och effektivitet."},
        {
          id: "faq4",          title: "04 · Leverans & garanti",          content: "Vi överlämnar ett slutbesiktat arbete och ger garanti på det vi utfört, för din trygghet och långsiktiga hållbarhet."},
      ]}
      title="Vår arbetsprocess — Enkelt och transparent från start till mål"
      description="Vi guidar dig genom varje fas av byggprocessen med tydlighet och öppen kommunikation."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Umeå Kommun",        "Fastighetsbolag Norr",        "Bygghemma",        "Svea Hus",        "Norrlands Bygg & Anläggning",        "Lokala Företagarna Umeå",        "Privatbostäder i Norr"]}
      title="Våra partners och samarbeten"
      description="Vi är stolta över våra samarbeten som bygger på förtroende och gemensamma mål."
      showCard={true}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      tag="Kontakta oss"
      title="Låt oss bygga något hållbart tillsammans"
      description="Oavsett projektets storlek behandlar vi det med samma noggrannhet och engagemang. Hör av dig idag för ett förutsättningslöst möte. Ring: 090 – XXX XX XX (Mån–Fre 07:00–17:00)\nE-post: info@sbyggumea.se\nAdress: Umeå, Sverige — verkar i hela Norrland"
      imageSrc="http://img.b2bpic.net/free-photo/two-people-working-warehouse_329181-12856.jpg"
      imageAlt="Teammöte på S-Byggs kontor"
      mediaAnimation="opacity"
      mediaPosition="right"
      inputPlaceholder="Din e-post"
      buttonText="Skicka förfrågan"
      termsText="Genom att klicka på 'Skicka förfrågan' godkänner du våra villkor."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="S-Bygg i Umeå AB"
      leftLink={{
        text: "Kvalitet, ärlighet och hantverk",        href: "#"}}
      rightLink={{
        text: "© 2024 S-Bygg i Umeå AB",        href: "#"}}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
