"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import SplitAbout from "@/components/sections/about/SplitAbout";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import {
  Trophy,
  Users,
  Target,
  Heart,
  Zap,
  Mail,
  Rocket,
} from "lucide-react";

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Webuild"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Projects", id: "/portfolio" },
            { name: "Services", id: "/#services" },
            { name: "About", id: "/#about" },
          ]}
          button={{
            text: "Start Project",
            href: "/contact",
          }}
          animateOnLoad={true}
        />
      </div>

      {/* Why Choose Webuild Section */}
      <div id="about" data-section="about">
        <SplitAbout
          title="Why Choose Webuild"
          description="We're not just web designers—we're digital strategists committed to transforming your ideas into market-winning solutions."
          tag="Our Expertise"
          tagIcon={Trophy}
          textboxLayout="default"
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          imagePosition="right"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/strategic-planning-workshop-with-team-co-1772996200144-fb243f59.png?_wi=3"
          imageAlt="Team collaboration and strategic planning"
          bulletPoints={[
            {
              icon: Users,
              title: "Expert Team",
              description:
                "Designers, developers, and strategists with years of industry experience and proven track record.",
            },
            {
              icon: Target,
              title: "Results-Driven",
              description:
                "Every project is guided by clear objectives and measured by real business impact and user engagement.",
            },
            {
              icon: Heart,
              title: "Client-Focused",
              description:
                "We treat your business as our own, investing time to understand your goals and deliver exceptional solutions.",
            },
            {
              icon: Zap,
              title: "Innovation",
              description:
                "We stay ahead of design and technology trends to deliver cutting-edge solutions that set you apart.",
            },
          ]}
          buttons={[
            {
              text: "Learn More",
              href: "/portfolio",
            },
          ]}
        />
      </div>

      {/* Contact CTA Section */}
      <div id="contact-cta" data-section="contact-cta">
        <ContactCTA
          tag="Ready to Get Started?"
          tagIcon={Rocket}
          title="Let's Bring Your Vision to Life"
          description="Whether you're launching a new project or redesigning an existing presence, our team is ready to create something extraordinary. Let's talk about your goals and how we can help you succeed."
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          buttons={[
            {
              text: "Contact Us",
              href: "mailto:hello@webuild.com",
            },
            {
              text: "View Our Work",
              href: "/portfolio",
            },
          ]}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Webuild"
          leftLink={{
            text: "Privacy Policy",
            href: "#privacy",
          }}
          rightLink={{
            text: "Terms of Service",
            href: "#terms",
          }}
        />
      </div>
    </ThemeProvider>
  );
}