"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Cog, Eye, Sparkles, Palette, Brain, Heart, Rocket } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="largeSmall"
        background="grid"
        cardStyle="gradient-bordered"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "About",          id: "#about"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Projects",          id: "#projects"},
        {
          name: "Metrics",          id: "#metrics"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      logoSrc="http://img.b2bpic.net/free-photo/idea-labels-brain-chalkboard_23-2147873950.jpg"
      logoAlt="AI + Design Logo"
      brandName="AI + Design"
      button={{
        text: "Get in Touch",        href: "#contact"}}
    />
  </div>

  <div id="home" data-section="home">
      <HeroSplit
      background={{
        variant: "animated-grid"}}
      imagePosition="right"
      title="AI Meets Design—Powered by Claude"
      description="Explore an interactive brain that thinks, learns, and creates alongside you. Experience AI reimagined through bold color and intelligent design."
      buttons={[
        {
          text: "Explore the Brain",          href: "#features"},
      ]}
      buttonAnimation="opacity"
      imageSrc="http://img.b2bpic.net/free-photo/network-concept-with-colorful-thread_23-2148999206.jpg"
      imageAlt="Interactive AI brain visual metaphor"
      mediaAnimation="slide-up"
      fixedMediaHeight={true}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/serious-afroamerican-businessman-front-view_23-2148508922.jpg",          alt: "Professional portrait of a diverse tech user"},
        {
          src: "http://img.b2bpic.net/free-photo/medium-shot-boy-posing-studio_23-2149596268.jpg",          alt: "Portrait of a creative AI user"},
        {
          src: "http://img.b2bpic.net/free-photo/young-businessman-sitting-cozy-cafe-bar-using-laptop-computer-looking-aside_342744-945.jpg",          alt: "Smiling professional in a tech setting"},
        {
          src: "http://img.b2bpic.net/free-photo/young-man-sad-expression_1194-2827.jpg",          alt: "Young innovator's portrait"},
        {
          src: "http://img.b2bpic.net/free-photo/young-professional-hairdresser-woman-apron-holding-scissors-speech-bubble-sign-with-word-idea-smiling-confident_141793-37563.jpg",          alt: "Designer with thoughtful expression"},
      ]}
      avatarText="Join the AI-Design Frontier"
      marqueeItems={[
        {
          type: "text",          text: "AI Co-Creation"},
        {
          type: "text-icon",          text: "Intelligent Automation",          icon: Cog,
        },
        {
          type: "image",          src: "http://img.b2bpic.net/free-vector/gradient-technology-logo-template-collection_23-2148218237.jpg",          alt: "Abstract AI data flow icon"},
        {
          type: "text",          text: "Creative Synthesis"},
        {
          type: "text-icon",          text: "Future-Proof Design",          icon: Eye,
        },
        {
          type: "image",          src: "http://img.b2bpic.net/free-vector/artificial-intelligence-icon-set-vector-illustration_47987-29969.jpg",          alt: "AI machine learning enabling computers to replicate human brain functioning."},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={true}
      tag="My Philosophy"
      title="Bridging Intelligence with Imagination"
      description="I stand at the unique intersection of artificial intelligence and creative design, leveraging Claude AI to push boundaries and forge new pathways in visual storytelling. My work isn't just about applying technology; it's about infusing human creativity into AI's vast potential."
      subdescription="With a deep understanding of AI's capabilities, I craft experiences that are not only aesthetically captivating but also intelligently interactive and deeply resonant. My mission is to design a future where technology empowers imagination."
      icon={Sparkles}
      imageSrc="http://img.b2bpic.net/free-photo/digital-art-ai-technology-background_23-2151719603.jpg"
      imageAlt="Portrait of an innovator in AI and creative design"
      mediaAnimation="opacity"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentySix
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "AI-Driven Creativity",          description: "Harnessing Claude's advanced natural language understanding to generate unique design concepts and creative prompts.",          buttonIcon: Palette,
          imageSrc: "http://img.b2bpic.net/free-vector/ai-chip-brain-lineal-flat_78370-9690.jpg",          imageAlt: "Icon representing AI-driven creativity"},
        {
          title: "Intelligent Design Systems",          description: "Building adaptive design frameworks that learn and evolve, optimizing user experiences with AI-powered insights.",          buttonIcon: Brain,
          imageSrc: "http://img.b2bpic.net/free-photo/smartphone-artificial-intelligence-futuristic-communication-network-technology_53876-129773.jpg",          imageAlt: "Icon representing intelligent design systems"},
        {
          title: "Human-Centered AI",          description: "Designing AI integrations with a strong focus on empathy, ensuring technology enhances human creativity and intuition.",          buttonIcon: Heart,
          imageSrc: "http://img.b2bpic.net/free-photo/3d-character-emerging-from-smartphone_23-2151336675.jpg",          imageAlt: "Icon representing human-centered AI"},
        {
          title: "Future-Forward Vision",          description: "Anticipating emerging trends and pushing the boundaries of what's possible, shaping the future of design with AI.",          buttonIcon: Rocket,
          imageSrc: "http://img.b2bpic.net/free-photo/hand-drawn-light-bulb-clipboard-blackboard_23-2147873901.jpg",          imageAlt: "Icon representing future vision"},
      ]}
      title="Innovations at the Core"
      description="Discover how Claude AI is integrated into every aspect of my creative process, from conceptualization to execution, delivering unparalleled results."
      tag="AI-Powered Capabilities"
      tagAnimation="opacity"
      buttonAnimation="opacity"
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",          name: "Generative Art Series",          price: "AI & Art",          variant: "Visuals",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-fantasy-sea-creature_23-2151626012.jpg",          imageAlt: "Generative art series project"},
        {
          id: "p2",          name: "Interactive UI/UX",          price: "AI-Driven Interface",          variant: "Applications",          imageSrc: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg",          imageAlt: "Interactive UI/UX project"},
        {
          id: "p3",          name: "Intelligent Data Visualization",          price: "Insights & Design",          variant: "Analytics",          imageSrc: "http://img.b2bpic.net/free-photo/laboratory-supplies-medical-work_23-2149744729.jpg",          imageAlt: "Intelligent data visualization project"},
        {
          id: "p4",          name: "Cognitive Branding",          price: "AI Brand Identity",          variant: "Branding",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0zfd4c",          imageAlt: "Cognitive branding project"},
        {
          id: "p5",          name: "Automated Creative Workflows",          price: "Efficiency & Design",          variant: "Process",          imageSrc: "http://img.b2bpic.net/free-photo/anthropomorphic-robot-performing-regular-human-job-future_23-2151043458.jpg",          imageAlt: "Smart automation in design project"},
        {
          id: "p6",          name: "Experiential AI Installations",          price: "Immersive Art",          variant: "Experiences",          imageSrc: "http://img.b2bpic.net/free-photo/girl-with-hands-up-wearing-vr-set_23-2148513459.jpg",          imageAlt: "Experiential AI installation project"},
      ]}
      title="Selected AI-Design Projects"
      description="A showcase of innovative projects where AI and design converge to create truly unique and impactful experiences."
      tag="My Portfolio"
      tagAnimation="opacity"
      buttonAnimation="opacity"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={false}
      title="Impact by Numbers"
      tag="My Achievements"
      tagAnimation="opacity"
      metrics={[
        {
          id: "m1",          value: "100+",          description: "AI-powered creative assets developed"},
        {
          id: "m2",          value: "95%",          description: "Client satisfaction rate on AI-integrated projects"},
        {
          id: "m3",          value: "50%",          description: "Efficiency gain in design workflows with AI"},
        {
          id: "m4",          value: "10+",          description: "Collaborations with AI research teams"},
      ]}
      metricsAnimation="blur-reveal"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",          name: "Sarah Chen",          imageSrc: "http://img.b2bpic.net/free-photo/senior-man-using-laptop-tablet-same-time_482257-8141.jpg",          imageAlt: "Sarah Chen"},
        {
          id: "t2",          name: "Marcus Blake",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-trendy-hairstyle_23-2149405995.jpg",          imageAlt: "Marcus Blake"},
        {
          id: "t3",          name: "Dr. Anya Sharma",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-scientist_23-2148969947.jpg",          imageAlt: "Dr. Anya Sharma"},
        {
          id: "t4",          name: "David Kim",          imageSrc: "http://img.b2bpic.net/free-photo/authentic-small-youthful-marketing-agency_23-2150167349.jpg",          imageAlt: "David Kim"},
        {
          id: "t5",          name: "Emily Rodriguez",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-taking-photo-with-device-world-photography-day_23-2151704488.jpg",          imageAlt: "Emily Rodriguez"},
        {
          id: "t6",          name: "Alex Johnson",          imageSrc: "http://img.b2bpic.net/free-photo/young-entrepreneur-interacting-with-digital-ai-brain-symbolizing-platforms_482257-126296.jpg",          imageAlt: "Alex Johnson"},
      ]}
      cardTitle="What Collaborators Say"
      cardTag="Endorsements"
      cardAnimation="slide-up"
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "AI Innovators Lab",        "Creative Tech Studio",        "Data Visionary Inc.",        "Future Growth VC",        "Digital Learning Hub",        "Product Design Collective",        "Ethics AI Forum"]}
      title="Trusted by Innovators"
      description="Partners and platforms that trust my expertise in AI-driven creative design."
      tag="Collaborations"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",          title: "How do you integrate Claude AI into your design process?",          content: "Claude AI assists in various stages, from initial brainstorming and conceptualization to generating alternative design directions and refining copy, acting as a powerful creative co-pilot."},
        {
          id: "q2",          title: "What kind of projects are best suited for AI-powered design?",          content: "Projects requiring rapid ideation, data-driven personalization, complex system design, or innovative visual experiments benefit greatly from AI integration. This includes generative art, adaptive UIs, and smart branding."},
        {
          id: "q3",          title: "Do you only work with AI projects?",          content: "While AI is a core focus, my expertise extends to traditional creative design disciplines. I bring an AI-informed perspective to all projects, seeking to enhance rather than replace human creativity."},
        {
          id: "q4",          title: "What is your approach to ethical AI in design?",          content: "Ethical considerations are paramount. I prioritize transparency, fairness, and accountability, ensuring AI tools are used responsibly to augment human creativity without perpetuating biases or compromising user privacy."},
        {
          id: "q5",          title: "How can I collaborate with you?",          content: "I'm always open to innovative collaborations. Please reach out via the contact form below with your project idea, and we can explore how AI and design can bring your vision to life."},
      ]}
      sideTitle="Frequently Asked Questions"
      sideDescription="Find answers to common questions about my AI integration, design process, and collaboration opportunities."
      faqsAnimation="opacity"
      textPosition="left"
      showCard={true}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "downward-rays-animated"}}
      tag="Connect"
      title="Let's Create the Future Together"
      description="Ready to explore the possibilities of AI-driven design? Whether you have a project in mind or just want to discuss innovative ideas, I'd love to hear from you."
      inputPlaceholder="Your email address"
      buttonText="Get in Touch"
      termsText="By clicking 'Get in Touch', you agree to discuss amazing AI & Design possibilities."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoSrc="http://img.b2bpic.net/free-photo/idea-labels-brain-chalkboard_23-2147873950.jpg"
      logoAlt="AI + Design Logo"
      logoText="AI + Design"
      columns={[
        {
          title: "Navigation",          items: [
            {
              label: "Home",              href: "#home"},
            {
              label: "About",              href: "#about"},
            {
              label: "Projects",              href: "#projects"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
        {
          title: "Resources",          items: [
            {
              label: "AI Insights",              href: "#"},
            {
              label: "Design Principles",              href: "#"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2024 AI + Design. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
