"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import TeamCardTen from "@/components/sections/team/TeamCardTen";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";

export default function AboutPage() {
  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="about" data-section="about">
        <TextSplitAbout
          title="Our Story"
          description={[
            "Marlils began as a collaboration between Laura and Maria, two designers with complementary visions. What started as a shared passion for thoughtful design evolved into a full-service creative studio.",
            "We specialize in creating integrated solutions that span interior design, graphic design, branding, and bespoke objects. Each project reflects our commitment to understanding our clients' needs and translating them into functional, beautiful outcomes.",
            "At Marlils, we believe that great design improves quality of life. Whether designing a living space or a brand identity, we approach each project with intentionality, craftsmanship, and an eye for detail.",
          ]}
          useInvertedBackground={false}
          buttons={[{ text: "View Our Work", href: "/services" }]}
          buttonAnimation="slide-up"
          showBorder={false}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTen
          title="Meet the Founders"
          tag="The Visionaries"
          tagAnimation="slide-up"
          membersAnimation="slide-up"
          members={[
            {
              id: "laura",
              name: "Laura",
              imageSrc: "http://img.b2bpic.net/free-photo/lovable-woman-with-long-hair-wearing-white-clothes-looking-camera-smiling_291650-451.jpg?_wi=2",
              imageAlt: "Laura, Co-founder of Marlils Studio",
            },
            {
              id: "maria",
              name: "Maria",
              imageSrc: "http://img.b2bpic.net/free-photo/attractive-brunette-female-dressed-long-neck-brown-jacket-grey-background_613910-15043.jpg?_wi=2",
              imageAlt: "Maria, Co-founder of Marlils Studio",
            },
          ]}
          memberVariant="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactCenter
          tag="Work With Us"
          title="Interested in collaborating?"
          description="Let's discuss your project and explore how Marlils can bring your vision to life. We're always excited to work with clients who value design and craftsmanship."
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          inputPlaceholder="your@email.com"
          buttonText="Send"
          termsText="By reaching out, 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>
  );
}