"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Sparkles, Briefcase, Award } from "lucide-react";
import Link from "next/link";

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

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="large"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Work", id: "/work" },
            { name: "About", id: "/about" },
            { name: "Services", id: "/services" },
            { name: "Contact", id: "/contact" },
          ]}
          brandName="Studio Collective"
          bottomLeftText="Global Creative Practice"
          bottomRightText="hello@studiocollective.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Exceptional Work for Discerning Clients"
          description="Curated portfolio showcasing transformative projects that elevate brands. Each work tells a story of strategy, craft, and measurable impact."
          tag="Premium Creative Studio"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Explore Our Work", href: "/work" },
            { text: "Get in Touch", href: "/contact" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "plain" }}
          carouselItems={[
            {
              id: "1",              imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994346.jpg",              imageAlt: "Brand Identity Project"},
            {
              id: "2",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440910.jpg",              imageAlt: "Visual Design System"},
            {
              id: "3",              imageSrc: "http://img.b2bpic.net/free-vector/mandala-cards-premium-golden-style_1017-8498.jpg",              imageAlt: "Luxury Packaging Design"},
            {
              id: "4",              imageSrc: "http://img.b2bpic.net/free-vector/gradient-interior-landing-page-design-template_23-2149263407.jpg",              imageAlt: "Digital Interface Design"},
            {
              id: "5",              imageSrc: "http://img.b2bpic.net/free-psd/creative-marketing-agency-social-media-story-design-template_47987-33977.jpg",              imageAlt: "Campaign Creative"},
            {
              id: "6",              imageSrc: "http://img.b2bpic.net/free-photo/view-modern-futuristic-work-space-with-furniture_23-2151797722.jpg",              imageAlt: "Environmental Branding"},
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
          ariaLabel="Featured portfolio projects carousel"
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Studio Collective"
          description={[
            "We are a luxury creative studio with over 150+ premium brand transformations across luxury, technology, and lifestyle sectors. For over a decade, we've partnered with discerning clients to craft distinctive visual identities and compelling brand experiences that command market presence.",            "Our approach combines deep strategic insights with meticulous craft. We believe exceptional work requires understanding both the aspirations of our clients and the precise needs of their audiences. Each project is an opportunity to push creative boundaries while delivering measurable business impact.",            "We work exclusively with clients who share our commitment to quality and innovation. Our selective engagement model ensures we can dedicate the depth of expertise and attention that premium projects demand."]}
          buttons={[
            { text: "Our Services", href: "/services" },
            { text: "Let's Talk", href: "/contact" },
          ]}
          buttonAnimation="slide-up"
          showBorder={false}
          useInvertedBackground={false}
          ariaLabel="About our creative studio"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwelve
          title="Creative Services"
          description="Comprehensive design and branding solutions tailored to elevate your brand presence and drive meaningful results."
          tag="What We Offer"
          tagIcon={Briefcase}
          tagAnimation="slide-up"
          features={[
            {
              id: "branding",              label: "Branding",              title: "Complete Brand Identity Systems",              items: [
                "Logo design and mark systems",                "Brand guidelines and documentation",                "Visual identity frameworks",                "Color and typography systems"],
            },
            {
              id: "design",              label: "Design",              title: "Strategic Visual Communication",              items: [
                "Packaging design",                "Marketing collateral",                "Environmental design",                "Print and digital design"],
            },
            {
              id: "direction",              label: "Direction",              title: "Creative Direction & Strategy",              items: [
                "Campaign strategy and development",                "Art direction",                "Brand positioning",                "Creative consulting"],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Our creative services"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Studio Collective didn't just design for us—they transformed how we present ourselves to the world. Their strategic thinking and meticulous execution elevated our brand to levels we hadn't imagined possible. They understand the nuances of luxury positioning and deliver work that resonates with our most discerning clients."
          rating={5}
          author="Catherine Laurent, Chief Brand Officer"
          avatars={[
            {
              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Client testimonial avatar 1"},
            {
              src: "http://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg",              alt: "Client testimonial avatar 2"},
            {
              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Client testimonial avatar 3"},
            {
              src: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              alt: "Client testimonial avatar 4"},
            {
              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Client testimonial avatar 5"},
            {
              src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",              alt: "Client testimonial avatar 6"},
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="Client testimonial and social proof"
        />
      </div>

      <div id="socialProof" data-section="socialProof">
        <SocialProofOne
          title="Trusted by Industry Leaders"
          description="We've had the privilege of working with some of the world's most respected brands across luxury, technology, hospitality, and consumer sectors."
          tag="Strategic Partners"
          tagIcon={Award}
          tagAnimation="slide-up"
          names={[
            "Luxury Brands Co.",            "TechVision Global",            "Hospitality Group",            "Fashion Forward",            "Premium Finance",            "Retail Collective",            "Consumer Goods Int'l"]}
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          showCard={true}
          ariaLabel="Trusted brands and partners"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to elevate your brand? Let's create something extraordinary together."
          animationType="entrance-slide"
          buttons={[
            { text: "Start a Conversation", href: "/contact" },
            { text: "View Portfolio", href: "/work" },
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          ariaLabel="Call to action to start a project"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Studio Collective"
          copyrightText="© 2025 Studio Collective. All rights reserved."
          columns={[
            {
              title: "Navigate",              items: [
                { label: "Home", href: "/" },
                { label: "Work", href: "/work" },
                { label: "About", href: "/about" },
                { label: "Services", href: "/services" },
              ],
            },
            {
              title: "Connect",              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "Email", href: "mailto:hello@studiocollective.com" },
                { label: "Instagram", href: "https://instagram.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
              ],
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
              ],
            },
          ]}
          ariaLabel="Site footer with navigation and information"
        />
      </div>
    </ThemeProvider>
  );
}