"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Star, TrendingUp, Trophy, Users } from "lucide-react";

export default function DesignStudioPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="plain"
      cardStyle="gradient-bordered"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="DESIGN STUDIO"
          navItems={[
            { name: "Portfolio", id: "portfolio" },
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="CREATIVE EXCELLENCE"
          description="Award-winning design studio crafting compelling visual experiences that drive results and inspire audiences"
          buttons={[
            { text: "View Portfolio", href: "portfolio" },
            { text: "Let's Collaborate", href: "contact" }
          ]}
          slides={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/group-business-executives-interacting-with-each-other_1170-760.jpg",              imageAlt: "Creative workspace with modern design setup"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/code-testing-quality-assurance-done-computers-startup-workplace_482257-118649.jpg",              imageAlt: "Designer working on digital art and graphics"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/headphones-with-microphone-call-center-office-desk_482257-125977.jpg",              imageAlt: "UI UX design interface and digital workspace"
            }
          ]}
          autoplayDelay={5000}
          showDimOverlay={true}
          logoLineHeight={1.15}
          ariaLabel="Designer portfolio hero section with carousel"
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardFour
          title="Featured Works"
          description="Explore a selection of our most impactful design projects that have transformed brands and elevated digital experiences"
          tag="Portfolio"
          products={[
            {
              id: "1",              name: "Brand Identity System",              price: "Enterprise",              variant: "Complete Brand Strategy  5 Deliverables",              imageSrc: "https://img.b2bpic.net/free-vector/brand-manual-template-design_23-2149878159.jpg",              imageAlt: "Brand identity and logo design project"
            },
            {
              id: "2",              name: "Digital Product Design",              price: "Web App",              variant: "UI/UX Design  Mobile & Desktop",              imageSrc: "https://img.b2bpic.net/free-vector/flat-design-minimal-business-card_23-2149277811.jpg",              imageAlt: "Web and app design project"
            },
            {
              id: "3",              name: "Packaging & Collateral",              price: "Marketing",              variant: "Print Design  Complete Suite",              imageSrc: "https://img.b2bpic.net/free-vector/flat-design-minimal-business-card_23-2149277810.jpg",              imageAlt: "Packaging and marketing design project"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardNineteen
          title="Our Design Process"
          description="A strategic approach to creating designs that resonate, engage, and deliver measurable business results"
          tag="Services"
          features={[
            {
              id: 1,
              tag: "Discovery",              title: "Strategic Research",              subtitle: "Understanding your vision and market landscape",              description: "We dive deep into your brand, audience, and competitive landscape to uncover insights that inform compelling design solutions. Every project begins with thorough research and strategic planning.",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-brand-manual-brochure-template_23-2149843686.jpg",              imageAlt: "Design research and strategy phase"
            },
            {
              id: 2,
              tag: "Design",              title: "Creative Execution",              subtitle: "Bringing concepts to life with precision and artistry",              description: "From wireframes to final visuals, we craft designs that not only look stunning but also function flawlessly. Our team balances aesthetics with user experience to create designs that truly shine.",              imageSrc: "https://img.b2bpic.net/free-psd/designer-template-design_23-2151803008.jpg",              imageAlt: "Creative design execution and production"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Client Success Stories"
          description="Hear from brands we've transformed with strategic design and creative excellence"
          tag="Testimonials"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              handle: "@sarah_mitchell - Brand Director",              testimonial: "The design team completely transformed our brand identity. The quality and attention to detail exceeded all expectations. Our sales increased by 40% after the rebrand.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Mitchell professional portrait"
            },
            {
              id: "2",              name: "James Rodriguez",              handle: "@jrodriguez - CEO",              testimonial: "Working with this studio was a game-changer for our product. Their UI/UX expertise resulted in a 3x increase in user engagement. Highly recommended for any design needs.",              imageSrc: "https://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",              imageAlt: "James Rodriguez professional portrait"
            },
            {
              id: "3",              name: "Emma Chen",              handle: "@emma_chen - Marketing Lead",              testimonial: "The creative campaigns they designed helped us reach our target audience like never before. Their strategic approach combined with stunning visuals made all the difference.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "Emma Chen professional portrait"
            },
            {
              id: "4",              name: "Michael Thompson",              handle: "@mthompson - Founder",              testimonial: "From concept to final delivery, the entire process was seamless and professional. Our new website design increased conversions by 65%. An absolute pleasure to work with.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg",              imageAlt: "Michael Thompson professional portrait"
            },
            {
              id: "5",              name: "Jessica Williams",              handle: "@jwilliams - Product Manager",              testimonial: "The attention to detail in every design element is remarkable. They truly understand how to create user experiences that drive business results. Five stars across the board.",              imageSrc: "https://img.b2bpic.net/free-photo/serene-businessman-with-glasses_1098-719.jpg",              imageAlt: "Jessica Williams professional portrait"
            },
            {
              id: "6",              name: "David Park",              handle: "@dpark - Creative Director",              testimonial: "Collaborating with this team elevated our entire creative vision. Their fresh perspective and execution brought our brand to life in ways we couldn't have imagined.",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              imageAlt: "David Park professional portrait"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          speed={40}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Proven Impact"
          description="Our design work speaks through measurable results and client success"
          tag="Results"
          metrics={[
            {
              id: "1",              icon: Trophy,
              title: "Awards Won",              value: "25+"
            },
            {
              id: "2",              icon: Users,
              title: "Happy Clients",              value: "150+"
            },
            {
              id: "3",              icon: TrendingUp,
              title: "Avg Growth",              value: "45%"
            },
            {
              id: "4",              icon: Star,
              title: "Client Rating",              value: "4.9★"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Connect"
          title="Ready to Create Something Remarkable?"
          description="Join brands that have transformed their vision into reality. Subscribe for design insights, industry trends, and exclusive project updates delivered to your inbox."
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/view-office-desk-with-messy-workspace-laptop_23-2150282082.jpg"
          imageAlt="Creative contact and newsletter signup"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe Now"
          termsText="We respect your privacy. Unsubscribe anytime. Read our privacy policy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          copyrightText="© 2025 Design Studio. All rights reserved. Crafted with excellence."
          columns={[
            {
              title: "Services",              items: [
                { label: "Branding", href: "services" },
                { label: "Web Design", href: "services" },
                { label: "UI/UX Design", href: "services" },
                { label: "Packaging", href: "services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Portfolio", href: "portfolio" },
                { label: "Testimonials", href: "testimonials" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Email", href: "mailto:hello@designstudio.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}