"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Award, Clock, Code, Feather, Layout, Smile, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="largeSmall"
        background="aurora"
        cardStyle="gradient-mesh"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "Portfolio",
          id: "#portfolio",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="Design Studio"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{
        variant: "canvas-reveal",
      }}
      title="Crafting Exceptional Digital Experiences"
      description="We combine creativity with strategic thinking to deliver stunning designs that captivate audiences and drive results for your business."
      tag="Award-Winning Design"
      tagAnimation="blur-reveal"
      buttons={[
        {
          text: "Get a Quote",
          href: "#contact",
        },
        {
          text: "View Portfolio",
          href: "#portfolio",
        },
      ]}
      buttonAnimation="blur-reveal"
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/empty-chair-front-computer-desktop_23-2147836931.jpg?_wi=1",
          imageAlt: "Designer working on a laptop with creative mockups",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-new-ideas-office_176420-1712.jpg?_wi=1",
          imageAlt: "Team of designers collaborating on a project",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/working-desk-office_23-2147833277.jpg",
          imageAlt: "Working desk in office",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/empty-photo-frames-table-interior-design_23-2149454917.jpg",
          imageAlt: "Empty photo frames on table interior design",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/nice-organised-workspace-with-laptop_23-2148592326.jpg",
          imageAlt: "Nice and organised workspace with laptop",
        },
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="Trusted by 100+ clients"
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="Innovate. Design. Deliver."
      description={[
        "We are a passionate team of designers dedicated to transforming visionary ideas into impactful visual solutions.",
        "Our approach blends artistic creativity with user-centric strategies, ensuring every project not only looks great but also performs exceptionally.",
        "From comprehensive brand identity to intuitive digital products, we craft designs that resonate with your audience and drive measurable success.",
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Branding & Identity",
          description: "Crafting unique visual identities that tell your brand's story.",
          bentoComponent: "reveal-icon",
          icon: Feather,
          imageSrc: "http://img.b2bpic.net/free-vector/black-yellow-corporate-branding-set_1057-748.jpg",
          imageAlt: "brand identity icon logo",
        },
        {
          title: "UI/UX Design",
          description: "Designing intuitive and delightful user experiences for all platforms.",
          bentoComponent: "reveal-icon",
          icon: Layout,
          imageSrc: "http://img.b2bpic.net/free-photo/empty-chair-front-computer-desktop_23-2147836931.jpg?_wi=2",
          imageAlt: "brand identity icon logo",
        },
        {
          title: "Web & Mobile Development",
          description: "Bringing designs to life with robust and responsive web and mobile solutions.",
          bentoComponent: "reveal-icon",
          icon: Code,
          imageSrc: "http://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-new-ideas-office_176420-1712.jpg?_wi=2",
          imageAlt: "brand identity icon logo",
        },
      ]}
      title="Our Creative Design Services"
      description="Explore a spectrum of design solutions tailored to elevate your brand and engage your audience effectively."
    />
  </div>

  <div id="portfolio" data-section="portfolio">
      <ProductCardThree
      animationType="scale-rotate"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          name: "Website Redesign: Tech Innovations",
          price: "View Project",
          imageSrc: "http://img.b2bpic.net/free-photo/design-html-web-design-template-concept_53876-133658.jpg",
          imageAlt: "Modern website landing page design",
        },
        {
          id: "p2",
          name: "Mobile App UI: Fitness Tracker",
          price: "View Project",
          imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-taking-notes-office_23-2149749916.jpg",
          imageAlt: "Mobile app UI design for a fitness tracker",
        },
        {
          id: "p3",
          name: "Brand Identity: Organic Cafe",
          price: "View Project",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5c2w5f",
          imageAlt: "Minimalist brand logo and identity for an organic cafe",
        },
        {
          id: "p4",
          name: "Packaging Design: Artisan Coffee",
          price: "View Project",
          imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232231.jpg",
          imageAlt: "Elegant packaging design for artisan coffee",
        },
        {
          id: "p5",
          name: "Digital Illustration: Storybook Series",
          price: "View Project",
          imageSrc: "http://img.b2bpic.net/free-photo/domestic-life-illustrated_23-2151876289.jpg",
          imageAlt: "Vibrant digital illustration for a children's storybook",
        },
        {
          id: "p6",
          name: "Editorial Layout: Design Magazine",
          price: "View Project",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=roqvdo",
          imageAlt: "Modern editorial layout for a design magazine",
        },
      ]}
      title="Our Recent Design Projects"
      description="A showcase of our diverse portfolio, demonstrating creativity, technical skill, and successful client collaborations across various industries."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          value: "98%",
          title: "Client Satisfaction",
          description: "Delivering projects that exceed expectations.",
          icon: Smile,
        },
        {
          id: "m2",
          value: "500+",
          title: "Projects Completed",
          description: "A vast portfolio of successful design initiatives.",
          icon: Sparkles,
        },
        {
          id: "m3",
          value: "10+",
          title: "Years of Expertise",
          description: "Deep industry knowledge and design acumen.",
          icon: Award,
        },
        {
          id: "m4",
          value: "95%",
          title: "On-Time Delivery",
          description: "Efficient processes ensuring timely project completion.",
          icon: Clock,
        },
      ]}
      title="Driving Success with Data-Backed Design"
      description="Our commitment to excellence translates into measurable results and delighted clients."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Innovate Solutions",
        "Global Dynamics",
        "Apex Innovations",
        "Synergy Corp",
        "NextGen Labs",
        "BrightFuture Tech",
        "Visionary Brands",
      ]}
      title="Trusted by Leading Brands"
      description="We've had the privilege of collaborating with diverse clients to bring their visions to life."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Sarah Johnson",
          role: "CEO",
          company: "Tech Innovations",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-attractive-caucasian-teenage-woman-with-long-dark-hair-sitting-desk-with-lots-textbooks_273609-1136.jpg",
          imageAlt: "Sarah Johnson, CEO of Tech Innovations",
        },
        {
          id: "t2",
          name: "Michael Chen",
          role: "CTO",
          company: "Global Dynamics",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/startup-worker-uses-laptop-open-space-reviewing-project-data-documents-workstation-executive-assistant-working-marketing-strategy-business-development-ai-developer_482257-65810.jpg",
          imageAlt: "Michael Chen, CTO of Global Dynamics",
        },
        {
          id: "t3",
          name: "Emily Rodriguez",
          role: "Marketing Director",
          company: "Apex Innovations",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-holding-laptop_23-2147787613.jpg",
          imageAlt: "Emily Rodriguez, Marketing Director at Apex Innovations",
        },
        {
          id: "t4",
          name: "David Kim",
          role: "Product Manager",
          company: "Synergy Corp",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/freelancing-is-good-idea-independent-person_329181-12349.jpg",
          imageAlt: "David Kim, Product Manager at Synergy Corp",
        },
        {
          id: "t5",
          name: "Jessica Lee",
          role: "Creative Lead",
          company: "NextGen Labs",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-painter-desk-joyfully-choosing-paint-brush-with-big-pattern-canvas-background-home_574295-3722.jpg",
          imageAlt: "Jessica Lee, Creative Lead at NextGen Labs",
        },
      ]}
      title="What Our Clients Say"
      description="Hear directly from businesses who have experienced the transformative impact of our design expertise."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "What is your design process?",
          content: "Our process typically involves discovery, conceptualization, design, feedback, and final delivery. We ensure clients are involved at every stage for optimal results.",
        },
        {
          id: "q2",
          title: "How much does a design project cost?",
          content: "Costs vary based on project scope, complexity, and deliverables. We provide detailed quotes after an initial consultation to understand your specific needs.",
        },
        {
          id: "q3",
          title: "How long does a typical project take?",
          content: "Project timelines depend on the service and scope. We work with you to establish realistic deadlines and keep you updated throughout the process.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Find quick answers to common inquiries about our design process, services, and partnerships."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "radial-gradient",
      }}
      tag="Get in Touch"
      title="Let's Create Something Amazing Together"
      description="Ready to start your next design project? Reach out today for a personalized consultation and quote."
      inputPlaceholder="Enter your email"
      buttonText="Send Message"
      termsText="By clicking Send Message you're confirming that you agree with our Terms and Conditions."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/white-square-tiled-texture-background_53876-148136.jpg"
      imageAlt="Abstract design patterns in the footer"
      logoText="Design Studio"
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Services",
              href: "#services",
            },
            {
              label: "Portfolio",
              href: "#portfolio",
            },
          ],
        },
        {
          title: "Resources",
          items: [
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Testimonials",
              href: "#testimonials",
            },
          ],
        },
        {
          title: "Connect",
          items: [
            {
              label: "Contact",
              href: "#contact",
            },
            {
              label: "LinkedIn",
              href: "https://linkedin.com",
            },
            {
              label: "Twitter",
              href: "https://twitter.com",
            },
          ],
        },
      ]}
      copyrightText="© 2024 Design Studio. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
