"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
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";

export default function ContactPage() {
  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="intro" data-section="intro">
        <TextSplitAbout
          title="Get in Touch"
          description={[
            "We're always interested in new projects and collaborations. Whether you have a specific brief or just want to explore possibilities, we'd love to hear from you.",
            "Share your project details, timeline, and vision. We'll respond promptly to discuss how Marlils can contribute to your creative goals.",
            "Based in a contemporary creative studio, we work with clients locally and internationally. Let's create something meaningful together.",
          ]}
          useInvertedBackground={false}
          buttons={[{ text: "Back to Home", href: "/" }]}
          buttonAnimation="slide-up"
          showBorder={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Contact Us"
          title="Let's build something together."
          description="Send us your email and project details. We'll get back to you within 48 hours to discuss your vision and how we can help bring it to life."
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          inputPlaceholder="your@email.com"
          buttonText="Send"
          termsText="By contacting Marlils, you agree to share your project details with us for discussion and proposal purposes."
        />
      </div>

      <div id="cta" data-section="cta">
        <TextSplitAbout
          title="Other Ways to Reach Us"
          description={[
            "Email: hello@marlils.com – For project inquiries, collaboration requests, and general questions.",
            "Studio Location: Contemporary Creative Studio, where Laura and Maria work together on all design disciplines.",
            "Response Time: We typically reply within 48 hours. We're committed to thoughtful, timely communication.",
          ]}
          useInvertedBackground={false}
          buttons={[{ text: "View Our Work", href: "/services" }]}
          buttonAnimation="slide-up"
          showBorder={false}
        />
      </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>
  );
}