"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Palette, Brush, Sparkles } from "lucide-react";

export default function ServicesPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "About", id: "about" },
    { name: "Services", id: "services" },
    { name: "Contact", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="medium"
      background="blurBottom"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Marlils"
          bottomLeftText="Contemporary Creative Studio"
          bottomRightText="hello@marlils.com"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyFive
          title="Our Expertise"
          description="Comprehensive design services tailored to your needs. From spatial planning to brand systems, we deliver integrated creative solutions."
          features={[
            {
              title: "Interior Design",
              description: "We create environments that balance aesthetic vision with practical functionality. Our approach to interior design combines spatial planning, material selection, and thoughtful detailing to transform spaces into experiences.",
              icon: Palette,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/couch-with-cushion_1203-9.jpg",
                  imageAlt: "Interior design portfolio piece",
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/home-furnitures-landing-page-tempalte_23-2148402689.jpg",
                  imageAlt: "Contemporary interior space",
                },
              ],
            },
            {
              title: "Graphic Design & Branding",
              description: "Visual identities that tell your story. We develop comprehensive brand systems—from logo design to typography guidelines—that create cohesive, memorable visual languages across all touchpoints.",
              icon: Brush,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/top-view-boards-mdf-material_23-2149418511.jpg",
                  imageAlt: "Branding and graphic design work",
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings-new-ideas_176420-1671.jpg",
                  imageAlt: "Brand identity materials",
                },
              ],
            },
            {
              title: "Custom Objects & Art",
              description: "Bespoke, limited-edition pieces designed and crafted with intention. Each object is conceived to elevate its environment, combining form, function, and artistic vision into singular creations.",
              icon: Sparkles,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/vases-with-green-pink-light-assortment_23-2149835494.jpg",
                  imageAlt: "Custom designed objects",
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/minimalist-modern-vases-books-arrangement_23-2149681092.jpg",
                  imageAlt: "Artistic installations",
                },
              ],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="What We Offer"
          tagAnimation="slide-up"
        />
      </div>

      <div id="process" data-section="process">
        <TextSplitAbout
          title="Our Process"
          description={[
            "Every project begins with discovery. We listen, research, and understand the context—your goals, constraints, and aspirations.",
            "From there, we develop concepts and iterate. We believe in collaboration, bringing you along as we refine ideas into tangible solutions.",
            "Finally, we execute with precision, managing every detail through completion. The result: designs that work, endure, and improve your daily life.",
          ]}
          useInvertedBackground={false}
          buttons={[{ text: "Start Your Project", href: "/contact" }]}
          buttonAnimation="slide-up"
          showBorder={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Let's Collaborate"
          title="Ready to work together?"
          description="Have a project in mind? We'd love to discuss how Marlils can help bring your creative vision to life. Get in touch to start the conversation."
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          inputPlaceholder="your@email.com"
          buttonText="Send"
          termsText="By contacting Marlils, you agree to share your project details with us."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Marlils"
          leftLink={{ text: "hello@marlils.com", href: "mailto:hello@marlils.com" }}
          rightLink={{ text: "© 2024 Marlils Studio", href: "/" }}
        />
      </div>
    </ThemeProvider>
  );
}