"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Brain, Heart, HelpCircle, Home, Palette, Sofa, Sparkles, Box as CubeIcon } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="grid"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Hjemsted"
          navItems={[
            { name: "Boliger", id: "properties" },
            { name: "3D Oplevelse", id: "3d-experience" },
            { name: "AI Boligassistent", id: "ai-assistant" },
            { name: "IKEA Indretning", id: "ikea-integration" }
          ]}
          button={{ text: "Log ind", href: "#" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitTestimonial
          title="Fremtidens lejebolig. Skræddersyet til dig."
          description="Oplev vores eksklusive lejligheder i ægte 3D. Indret dem virtuelt, få hjælp af vores AI, og flyt ind i dit drømmehjem."
          background={{ variant: "plain" }}
          tag="Futuristic Housing"
          tagIcon={Sparkles}
          tagAnimation="blur-reveal"
          buttons={[
            { text: "Start AI Assistent", href: "#ai-assistant" },
            { text: "Udforsk i 3D", href: "#3d-experience" }
          ]}
          buttonAnimation="slide-up"
          testimonials={[
            {
              name: "Sarah Jensen",              handle: "@sarah_living",              testimonial: "Jeg fandt min drømmelejlighed på mindre end en time. 3D oplevelsen var uendelig realistisk!",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/professional-headshot-photo-of-a-young-p-1773905767224-8529c1b3.png?_wi=1",              imageAlt: "Sarah Jensen"
            },
            {
              name: "Marcus Nielsen",              handle: "@marcus_moves",              testimonial: "AI assistenten forstod præcis hvad jeg havde brug for. Føles som at have en personlig rådgiver.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/professional-headshot-photo-of-a-young-m-1773905765925-4c165a97.png?_wi=1",              imageAlt: "Marcus Nielsen"
            },
            {
              name: "Emma Larsen",              handle: "@emma_design",              testimonial: "At kunne indret mit nye hjem før jeg flytter ind var game-changing. Helt unik oplevelse!",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/professional-headshot-photo-of-a-woman-p-1773905765888-fd4a7c59.png?_wi=1",              imageAlt: "Emma Larsen"
            },
            {
              name: "Thomas Andersen",              handle: "@thomas_tech",              testimonial: "Teknologien er imponerende. Dette er fremtiden for ejendomssøgning i Danmark.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/professional-headshot-photo-of-a-male-pr-1773905766758-c5b8507e.png?_wi=1",              imageAlt: "Thomas Andersen"
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/a-stunning-3d-rendered-apartment-interio-1773905767650-9b8c08e9.png?_wi=1"
          imageAlt="Futuristic 3D apartment visualization"
          mediaAnimation="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      <div id="3d-experience" data-section="3d-experience">
        <FeatureCardTwentySeven
          title="Udforsk din næste bolig i 3D"
          description="Se boligen fra alle vinkler, mål rummene op, og få en realistisk fornemmelse af pladsen. Vores interaktive 3D-viewer giver dig fuld kontrol over din opdagelsesrejse."
          tag="3D Teknologi"
          tagIcon={CubeIcon}
          tagAnimation="slide-up"
          features={[
            {
              id: "rotate",              title: "Roter visning",              descriptions: [
                "Drej apartment rundt med muse eller touch",                "Få komplette 360-graders perspektiver",                "Soft rotations for komfortabel navigation"
              ],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/a-modern-3d-apartment-viewer-interface-w-1773905768934-3db73d82.png?_wi=1",              imageAlt: "3D rotation controls"
            },
            {
              id: "zoom",              title: "Zoom ind/ud",              descriptions: [
                "Undersøg detaljer tæt på",                "Juster visning efter dine behov",                "Perfekt til at inspicere materialer og finishing"
              ],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/a-modern-3d-apartment-viewer-interface-w-1773905768934-3db73d82.png?_wi=2",              imageAlt: "Zoom functionality"
            },
            {
              id: "measure",              title: "Mål rumstørrelse",              descriptions: [
                "Præcise målinger af alle rum",                "Visualiser møbelopstilling på forhånd",                "Planlæg dit liv i hvert enkelt rum"
              ],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/a-modern-3d-apartment-viewer-interface-w-1773905768934-3db73d82.png?_wi=3",              imageAlt: "Measurement tools"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          buttons={[{ text: "Start en tur", href: "#" }]}
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="ai-assistant" data-section="ai-assistant">
        <ProductCardFour
          title="Mød din personlige AI boligassistent"
          description="Vores AI hjælper dig med at finde den perfekte bolig ud fra dine behov, præferencer og livsstil. Svar blot på nogle få spørgsmål og få personaliserede anbefalinger."
          tag="AI-Powered"
          tagIcon={Brain}
          tagAnimation="opacity"
          products={[
            {
              id: "chat-demo-1",              name: "Hund venlig",              price: "Perfekt match",              variant: "Med udegruppe",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/a-sleek-ai-assistant-chat-interface-with-1773905768621-4f0f8543.png?_wi=1",              imageAlt: "Pet-friendly apartments"
            },
            {
              id: "chat-demo-2",              name: "Nær S-tog",              price: "Perfekt match",              variant: "Max 1 km distance",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/a-sleek-ai-assistant-chat-interface-with-1773905768621-4f0f8543.png?_wi=2",              imageAlt: "Transit-friendly apartments"
            },
            {
              id: "chat-demo-3",              name: "Budget: 12.000 kr",              price: "2 boliger fundet",              variant: "Din ønskepris",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/a-sleek-ai-assistant-chat-interface-with-1773905768621-4f0f8543.png?_wi=3",              imageAlt: "Budget-filtered apartments"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "Chat med AI", href: "#" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="ikea-integration" data-section="ikea-integration">
        <FeatureCardTwentySeven
          title="Indret med IKEA før du flytter ind"
          description="Placer rigtige IKEA møbler i din bolig og se resultatet i realtid. Byg din drømmebolig med den valgte indretning allerede fra dag ét."
          tag="IKEA Integration"
          tagIcon={Sofa}
          tagAnimation="blur-reveal"
          features={[
            {
              id: "kivik-sofa",              title: "KIVIK Sofa",              descriptions: [
                "Klassisk og modulopbyggelig",                "Perfekt til sociale stunder",                "Tilgængelig i flere farver og materialer"
              ],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/a-3d-apartment-room-showing-furniture-pl-1773905767191-a20425dd.png?_wi=1",              imageAlt: "KIVIK Sofa placement"
            },
            {
              id: "malm-seng",              title: "MALM Seng",              descriptions: [
                "Minimalistisk skandinavisk design",                "Praktisk opbevaring under madrassen",                "Egnet til alle soveromstyper"
              ],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/a-3d-apartment-room-showing-furniture-pl-1773905767191-a20425dd.png?_wi=2",              imageAlt: "MALM Bed setup"
            },
            {
              id: "lack-bord",              title: "LACK Bord",              descriptions: [
                "Simpelt og funktionelt design",                "Passer til enhver stue eller soveværelse",                "Lys og nem at placere i 3D-visningen"
              ],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/a-3d-apartment-room-showing-furniture-pl-1773905767191-a20425dd.png?_wi=3",              imageAlt: "LACK Table visualization"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="opacity"
          textboxLayout="default"
          useInvertedBackground={true}
          buttons={[
            { text: "Placér møbler", href: "#" },
            { text: "Køb indretningspakke", href: "#" }
          ]}
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="personalization" data-section="personalization">
        <FeatureCardTwentySeven
          title="Sæt dit personlige præg"
          description="Tilpas farver, lys og stil før du flytter ind. Vores intuitive værktøjer lader dig visualisere dit perfekte hjem med alle dine personlige valg."
          tag="Personalisering"
          tagIcon={Palette}
          tagAnimation="slide-up"
          features={[
            {
              id: "color-picker",              title: "Vælg vægtfarver",              descriptions: [
                "Uendelige farvemuligheder",                "Se ændringer i realtid",                "Eksperter anbefaler harmoniske paletter"
              ],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/an-apartment-room-with-wall-color-custom-1773905767600-5607632d.png?_wi=1",              imageAlt: "Wall color selection"
            },
            {
              id: "lighting-time",              title: "Tid på døgnet",              descriptions: [
                "Morgen, eftermiddag, eller aften lys",                "Se hvordan lyset påvirker dit hjem",                "Fotorealistiske skygger og reflektioner"
              ],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/an-apartment-room-with-wall-color-custom-1773905767600-5607632d.png?_wi=2",              imageAlt: "Time-based lighting"
            },
            {
              id: "ai-suggestions",              title: "AI forslag",              descriptions: [
                "Få intelligente designanbefalinger",                "Baseret på dine præferencer og trend",                "Luk dig selv eller bliv inspireret"
              ],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/an-apartment-room-with-wall-color-custom-1773905767600-5607632d.png?_wi=3",              imageAlt: "AI suggestions panel"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "Kom i gang", href: "#" }]}
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="Fremtidens ejendomsplatform"
          description="Hjemsted kombinerer banebrydende teknologi, minimalistisk design og bruger-centreret erfaring for at redefinere hvordan mennesker opdager, oplever og flytter ind i deres næste hjem. Vi ejer og styrer alle boliger internt for at garantere høj kvalitet og konsistent excellence."
          metrics={[
            { value: "500+", title: "Eksklusive boliger" },
            { value: "10k+", title: "Glade beboere" },
            { value: "98%", title: "Tilfredshed" }
          ]}
          tag="Om os"
          tagIcon={Home}
          tagAnimation="opacity"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/a-stunning-3d-rendered-apartment-interio-1773905767650-9b8c08e9.png?_wi=2"
          imageAlt="Hjemsted headquarters"
          mediaAnimation="blur-reveal"
          metricsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Hvad vores brugere siger"
          description="Læs ægte historier fra mennesker der har fundet deres drømmehjem gennem Hjemsted."
          tag="Bruger erfaringer"
          tagIcon={Heart}
          tagAnimation="blur-reveal"
          testimonials={[
            {
              id: "1",              name: "Sofia Petersen",              role: "Markedsanalytiker",              company: "TechVentures",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/professional-headshot-photo-of-a-young-p-1773905767224-8529c1b3.png?_wi=2",              imageAlt: "Sofia Petersen"
            },
            {
              id: "2",              name: "Christian Berg",              role: "Softwareudvikler",              company: "Innovation Labs",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/professional-headshot-photo-of-a-young-m-1773905765925-4c165a97.png?_wi=2",              imageAlt: "Christian Berg"
            },
            {
              id: "3",              name: "Victoria Hansen",              role: "Interiørdesigner",              company: "Design Studio",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/professional-headshot-photo-of-a-young-p-1773905766540-049bf5da.png",              imageAlt: "Victoria Hansen"
            },
            {
              id: "4",              name: "Anders Möller",              role: "UX Designer",              company: "Digital Agency",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/professional-headshot-photo-of-a-male-pr-1773905767039-8d2076c2.png",              imageAlt: "Anders Möller"
            },
            {
              id: "5",              name: "Kristine Meyer",              role: "Arkitekt",              company: "Meyer Architects",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/professional-headshot-photo-of-a-woman-p-1773905765888-fd4a7c59.png?_wi=2",              imageAlt: "Kristine Meyer"
            },
            {
              id: "6",              name: "Henrik Thomsen",              role: "Produktchef",              company: "StartUp Denmark",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9eDLs43TrxhirwzmC0DFvrHJe/professional-headshot-photo-of-a-male-pr-1773905766758-c5b8507e.png?_wi=2",              imageAlt: "Henrik Thomsen"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="opacity"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "Læs flere historier", href: "#" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Hyppigt stillede spørgsmål"
          description="Få svar på dine spørgsmål om Hjemsted, 3D visningen og processen fra søgning til indflytning."
          tag="Support"
          tagIcon={HelpCircle}
          tagAnimation="opacity"
          faqs={[
            {
              id: "1",              title: "Hvordan virker 3D-visningen?",              content: "Vores 3D-teknologi gengiver hver eneste detalje i boligen med fotorealistisk præcision. Du kan rotere, zoome og mål rum fra hvilken som helst vinkel. Det er som at have virtuel adgang til boligen fra dit hjem."
            },
            {
              id: "2",              title: "Kan jeg virkelig indret boligen før jeg flytter ind?",              content: "Ja! Du kan placere IKEA møbler og andre indretningselementer i 3D-modellen og se præcist hvordan de passer. Dette hjælper dig med at planlægge din indretning og se dine møbler i den rette sammenhæng."
            },
            {
              id: "3",              title: "Hvad koster det at bruge Hjemsted?",              content: "Platform brugen er helt gratis. Du betaler kun når du lejer en bolig. Vores pricing er transparent og konkurrencedygtig med markedet."
            },
            {
              id: "4",              title: "Hvordan hjælper AI-assistenten?",              content: "AI-assistenten lærer dine præferencer gennem naturlige samtaler og matcher dig med boliger der passer til dine behov, budget og livsstil. Det er som at have en personlig boligmægler på disponering 24/7."
            },
            {
              id: "5",              title: "Er alle boliger kun i København?",              content: "I øjeblikket fokuserer vi på københavnermarkedet, men vi udvider løbende til andre større byer i Danmark."
            },
            {
              id: "6",              title: "Hvornår kan jeg flytte ind?",              content: "Flytedatoer varierer efter bolig. Du kan filtrere efter ønsket flytedato i platformen, og AI-assistenten vil kun anbefale boliger der passer til din tidsplan."
            }
          ]}
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          buttons={[{ text: "Kontakt support", href: "#" }]}
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Klar til at finde din drømmebolig?"
          animationType="entrance-slide"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Start en tur i 3D nu", href: "#" },
            { text: "Chat med AI assistenten", href: "#" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Hjemsted"
          copyrightText="© 2025 Hjemsted ApS | Fremtidens lejebolig"
          columns={[
            {
              title: "Platform",              items: [
                { label: "Boliger", href: "#properties" },
                { label: "3D Oplevelse", href: "#3d-experience" },
                { label: "AI Boligassistent", href: "#ai-assistant" },
                { label: "Indretning", href: "#ikea-integration" }
              ]
            },
            {
              title: "Om os",              items: [
                { label: "Om Hjemsted", href: "#about" },
                { label: "Vores vision", href: "#" },
                { label: "Blog & nyheder", href: "#" },
                { label: "Karriere", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Hjælp center", href: "#faq" },
                { label: "Kontakt os", href: "#contact" },
                { label: "Privacy Policy", href: "#" },
                { label: "Vilkår og betingelser", href: "#" }
              ]
            },
            {
              title: "Sociale",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Facebook", href: "https://facebook.com" },
                { label: "Twitter", href: "https://twitter.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}