"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import ContactText from "@/components/sections/contact/ContactText";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Zap } from "lucide-react";
import Link from "next/link";

export default function HomePage() {
  const navItems = [
    { name: "Etusivu", id: "/" },
    { name: "Palvelut", id: "/palvelut" },
    { name: "Yrityksille", id: "/yrityksille" },
    { name: "Yhteystiedot", id: "/yhteys" },
  ];

  const footerColumns = [
    {
      title: "Palvelu",
      items: [
        { label: "Etusivu", href: "/" },
        { label: "Palvelut", href: "/palvelut" },
        { label: "Lähetä tarjouspyyntö", href: "/tarjouspyynto" },
        { label: "Oma tili", href: "/dashboard" },
      ],
    },
    {
      title: "Tietoa",
      items: [
        { label: "Yrityksille", href: "/yrityksille" },
        { label: "Yhteystiedot", href: "/yhteys" },
        { label: "Usein kysytyt kysymykset", href: "#faq" },
      ],
    },
    {
      title: "Oikeudellinen",
      items: [
        { label: "Tietosuojaseloste", href: "/tietosuoja" },
        { label: "Käyttöehdot", href: "#" },
        { label: "Evästeet", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="gradient-mesh"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Tarjouspyyntö"
          navItems={navItems.map((item) => ({
            name: item.name,
            id: item.id,
          }))}
          button={{ text: "Kirjaudu", href: "/kirjaudu" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Tarjouspyyntöalusta"
          description="Yksinkertainen ja nopea tapa saada tarjouksia palveluistasi. Rekisteröidy, lähetä pyyntö ja seuraa edistymistä helposti."
          background={{ variant: "plain" }}
          tag="Helppo"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[
            { text: "Lähetä tarjouspyyntö", href: "/tarjouspyynto" },
            { text: "Lisätietoja", href: "/palvelut" },
          ]}
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/closeup-friends-working-with-computer-laptop-together_53876-30145.jpg",
              imageAlt: "Tarjouspyyntöalusta",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/develop-coding-web-design-coding-web-template_53876-132245.jpg?_wi=1",
              imageAlt: "Verkkosivut",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/electrician-with-tools-working-construction-site-repair-handyman-concept_169016-5889.jpg?_wi=1",
              imageAlt: "Remontti",
            },
          ]}
          mediaAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="palvelut" data-section="palvelut">
        <FeatureCardOne
          title="Saatavilla olevat palvelut"
          description="Valitse palvelukaavio, jota tarvitset. Tuemme monenlaisia palveluja yrityksille ja yksityisille henkilöille."
          features={[
            {
              title: "Remontti",
              description: "Kotiremontit, kunnostustyöt ja rakennuspalvelut",
              imageSrc: "http://img.b2bpic.net/free-photo/electrician-with-tools-working-construction-site-repair-handyman-concept_169016-5889.jpg?_wi=2",
              imageAlt: "Remontti",
              button: { text: "Pyydä tarjous", href: "/tarjouspyynto" },
            },
            {
              title: "Verkkosivut",
              description: "Webdesign, kehitys ja digitaalisen läsnäolon palvelut",
              imageSrc: "http://img.b2bpic.net/free-photo/develop-coding-web-design-coding-web-template_53876-132245.jpg?_wi=2",
              imageAlt: "Verkkosivut",
              button: { text: "Pyydä tarjous", href: "/tarjouspyynto" },
            },
            {
              title: "Siivous",
              description: "Siivouspalvelut kotiin ja liikkeisiin",
              imageSrc: "http://img.b2bpic.net/free-photo/blonde-woman-protective-gloves-with-rag-cleaning-electric-stove-home-kitchen-girl-washing-black-shiny-surface-kitchen-top-concept-housework_639032-2675.jpg?_wi=1",
              imageAlt: "Siivous",
              button: { text: "Pyydä tarjous", href: "/tarjouspyynto" },
            },
            {
              title: "Muutto",
              description: "Muutto- ja kuljetuspalvelut",
              imageSrc: "http://img.b2bpic.net/free-photo/no-people-living-room-interior-move-with-carton-boxes-empty-real-estate-property-full-cardboard-packing-storage-cargo-nobody-apartment-relocation-moving-day_482257-44294.jpg",
              imageAlt: "Muutto",
              button: { text: "Pyydä tarjous", href: "/tarjouspyynto" },
            },
            {
              title: "Muu palvelu",
              description: "Muut palvelut, joita et löydä yllä olevista kategorioista",
              imageSrc: "http://img.b2bpic.net/free-photo/electrician-with-tools-working-construction-site-repair-handyman-concept_169016-5889.jpg?_wi=3",
              imageAlt: "Muu palvelu",
              button: { text: "Pyydä tarjous", href: "/tarjouspyynto" },
            },
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Palvelut"
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="how-it-works" data-section="how-it-works">
        <MetricCardSeven
          title="Kuinka palvelu toimii"
          description="Kolme yksinkertaista vaihetta tarjouspyynnöstä tuoreeseen tarjoukseen."
          metrics={[
            {
              id: "1",
              value: "1",
              title: "Rekisteröidy ja kirjaudu",
              items: [
                "Luo tili sähköpostilla",
                "Aseta turvallinen salasana",
                "Aloita heti käyttö",
              ],
            },
            {
              id: "2",
              value: "2",
              title: "Lähetä tarjouspyyntö",
              items: [
                "Valitse palvelukaavio",
                "Täytä vaaditut tiedot",
                "Liitä yksityiskohdat",
              ],
            },
            {
              id: "3",
              value: "3",
              title: "Seuraa ja vertaile",
              items: [
                "Katso tarjouspyynnön statusta",
                "Vastaanota tarjouksia",
                "Valitse paras vaihtoehto",
              ],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          tag="Prosessi"
          tagAnimation="slide-up"
          uniformGridCustomHeightClasses="min-h-80"
        />
      </div>

      <div id="cta-section" data-section="cta-section">
        <ContactText
          text="Valmis lähettämään tarjouspyynnön? Aloita nyt ja saa tarjouksia parhailta palveluntarjoajilta."
          animationType="entrance-slide"
          buttons={[
            { text: "Läheta tarjouspyyntö", href: "/tarjouspyynto" },
            { text: "Lisää tietoa", href: "/yrityksille" },
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="yrityksille" data-section="yrityksille">
        <TextSplitAbout
          title="Yrityksille"
          description={[
            "Oletko palveluntarjoaja, joka haluaa tavoittaa uusia asiakkaita? Alustamme yhdistää sinut potentiaalisiin asiakkaisiin, jotka aktiivisesti etsivät palveluitasi.",
            "Rekisteröidyt yritykset voivat selata saapuvia tarjouspyyntöjä, lähettää kilpailukykyisiä tarjouksia ja kasvattaa liiketoimintaansa.",
            "Ota yhteyttä saadaksesi lisää tietoa yritysten jäsenyyspaketin ominaisuuksista ja eduista.",
          ]}
          buttons={[{ text: "Ota yhteyttä", href: "/yhteys" }]}
          useInvertedBackground={false}
          showBorder={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2025 Tarjouspyyntöalusta. Kaikki oikeudet pidätetään."
          bottomRightText="Luotu yksinkertaisuuden nimissä"
        />
      </div>
    </ThemeProvider>
  );
}