"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import { Lightbulb, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="small"
        sizing="mediumLargeSizeLargeTitles"
        background="none"
        cardStyle="outline"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "About",          id: "#about"},
        {
          name: "Projects",          id: "#projects"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="Ras Mere"
      button={{
        text: "Resume",        href: "#"}}
      animateOnLoad={true}
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboardTestimonial
      useInvertedBackground={false}
      background={{
        variant: "downward-rays-animated"}}
      title="Innovating User Experiences, Crafting Digital Futures."
      description="I'm Ras Mere, a product designer passionate about creating intuitive and impactful digital products that solve real-world problems. Let's build something amazing together."
      testimonials={[
        {
          name: "Alex Chen",          handle: "@alexchen",          testimonial: "Ras's design intuition is unparalleled. They transformed our complex vision into an incredibly intuitive and beautiful product.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg"},
        {
          name: "Sarah Lee",          handle: "@sarah_lee",          testimonial: "Working with Ras was a game-changer. Their user-centric approach and attention to detail elevated our entire platform.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg"},
        {
          name: "Mark Davis",          handle: "@markdavis",          testimonial: "The impact of Ras's designs on our user engagement was immediate and significant. Highly recommend!",          rating: 5,
          imageSrc: "asset://hero-testimonial-image-3"},
        {
          name: "Emily White",          handle: "@emilyw",          testimonial: "Ras has a unique ability to blend creativity with strategic thinking, resulting in designs that are both innovative and effective.",          rating: 5,
          imageSrc: "asset://hero-testimonial-image-4"},
        {
          name: "David Kim",          handle: "@davidk",          testimonial: "Their dedication to understanding our users led to a product that truly resonates with our audience. An exceptional talent.",          rating: 5,
          imageSrc: "asset://hero-testimonial-image-5"},
      ]}
      buttons={[
        {
          text: "View Portfolio",          href: "#projects"},
        {
          text: "Contact Me",          href: "#contact"},
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/experienced-grey-haired-businessman-standing_74855-9871.jpg",          alt: "Customer avatar 1"},
        {
          src: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg",          alt: "Customer avatar 2"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-modelmodern-man-dressed-white-shirt-fashion-male-posing-street-background-outdoors-sunset-crossed-arms_158538-20634.jpg",          alt: "Customer avatar 3"},
        {
          src: "http://img.b2bpic.net/free-photo/waist-up-confident-businessman-office_329181-19349.jpg",          alt: "Customer avatar 4"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-african-american-person-smiling-working-his-living-room_482257-126267.jpg",          alt: "Customer avatar 5"},
      ]}
      avatarText="Join our satisfied clients"
      imageSrc="http://img.b2bpic.net/free-photo/female-web-designer-office-with-tablet-device_23-2149749887.jpg"
      mediaAnimation="slide-up"
      marqueeItems={[
        {
          type: "text",          text: "UI/UX Designer"},
        {
          type: "text-icon",          text: "Product Strategy",          icon: Lightbulb,
        },
        {
          type: "text",          text: "User Research"},
        {
          type: "text-icon",          text: "Prototyping",          icon: Sparkles,
        },
        {
          type: "text",          text: "Design Systems"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={false}
      imagePosition="right"
      title="My Design Philosophy & Expertise"
      description="My design philosophy centers on user-centricity, blending aesthetic appeal with robust functionality. I thrive on translating complex problems into elegant solutions, driven by a deep understanding of user needs and business objectives. I am adept at leading design projects from concept to launch, ensuring every detail aligns with both user satisfaction and business growth."
      bulletPoints={[
        {
          title: "User-Centered Research",          description: "Deep dives into user behavior, needs, and motivations to inform design decisions."},
        {
          title: "Intuitive UI Design",          description: "Crafting clean, accessible, and aesthetically pleasing interfaces that enhance usability."},
        {
          title: "Interactive Prototyping",          description: "Bringing concepts to life with high-fidelity prototypes for early feedback and iteration."},
        {
          title: "Scalable Design Systems",          description: "Building consistent and efficient design libraries for streamlined development."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/side-view-man-working-with-post-its_23-2149930950.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      features={[
        {
          title: "UX Research & Strategy",          description: "Conducting user interviews, creating personas, journey mapping, and competitive analysis to define product strategy.",          imageSrc: "http://img.b2bpic.net/free-photo/industrial-designers-working-3d-model_23-2149370104.jpg"},
        {
          title: "UI Design & Prototyping",          description: "Designing high-fidelity mockups, interactive prototypes, and engaging visual interfaces for web and mobile.",          imageSrc: "http://img.b2bpic.net/free-photo/drawing-clothes_1098-18038.jpg"},
        {
          title: "Design Systems & Guidelines",          description: "Developing scalable design systems, style guides, and component libraries for consistency and efficiency.",          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-collection-supplies-one-color_23-2149669172.jpg"},
        {
          title: "Usability Testing & Iteration",          description: "Facilitating usability tests, gathering feedback, and iterating on designs to ensure optimal user experience.",          imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-office-with-notebook_23-2149749857.jpg"},
      ]}
      title="Skills & Services"
      description="Bringing innovative ideas to life with a comprehensive skill set across the product development lifecycle."
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",          name: "Mobile Banking App Redesign",          price: "View Case Study",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-social-media-still-life_23-2149019157.jpg",          imageAlt: "Mobile Banking App Redesign"},
        {
          id: "p2",          name: "Enterprise SaaS Dashboard",          price: "View Case Study",          imageSrc: "http://img.b2bpic.net/free-photo/executive-manager-modern-office-engaged-infographics-analysis_482257-122660.jpg",          imageAlt: "Enterprise SaaS Dashboard"},
        {
          id: "p3",          name: "E-commerce Experience Revamp",          price: "View Case Study",          imageSrc: "http://img.b2bpic.net/free-photo/man-with-chroma-key-clothing-shop_482257-76713.jpg",          imageAlt: "E-commerce Experience Revamp"},
        {
          id: "p4",          name: "Fintech Investment Platform",          price: "View Case Study",          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169853.jpg",          imageAlt: "Fintech Investment Platform"},
        {
          id: "p5",          name: "Health & Wellness Companion App",          price: "View Case Study",          imageSrc: "http://img.b2bpic.net/free-photo/medic-expert-uses-thermometer-find-right-diagnostic-symptoms_482257-122834.jpg",          imageAlt: "Health & Wellness Companion App"},
        {
          id: "p6",          name: "Responsive Web Application",          price: "View Case Study",          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169862.jpg",          imageAlt: "Responsive Web Application"},
      ]}
      title="Selected Projects"
      description="A showcase of impactful design solutions across various industries, demonstrating my approach to problem-solving and user-centric design."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "5+",          title: "Years Experience",          items: [
            "In product design & UX strategy",            "Across diverse industries"],
        },
        {
          id: "m2",          value: "20+",          title: "Projects Completed",          items: [
            "Delivered end-to-end",            "From concept to launch"],
        },
        {
          id: "m3",          value: "95%",          title: "User Satisfaction",          items: [
            "Measured through feedback loops",            "Focus on user delight"],
        },
        {
          id: "m4",          value: "3x",          title: "Engagement Increase",          items: [
            "Achieved through UX optimizations",            "Driving business growth"],
        },
      ]}
      title="My Impact & Achievements"
      description="Quantifying success and demonstrating real-world value through data-driven design and consistent dedication."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Tech Innovations",        "Creative Studio",        "Global Brands",        "Digital Solutions",        "Future Forward",        "Enterprise X",        "Visionary Design"]}
      title="Trusted by Leading Brands"
      description="Collaborating with diverse companies to elevate their digital presence and achieve their business objectives through exceptional design."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Sarah Johnson",          date: "Jan 2024",          title: "Revolutionary Product Design",          quote: "Ras has a remarkable talent for understanding complex user needs and translating them into elegant, intuitive designs. Their work significantly improved our product's adoption rate.",          tag: "Product Launch",          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-view-black-woman-smile-camera_197531-33139.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/physiotherapy-room-arrangement_23-2149047474.jpg"},
        {
          id: "2",          name: "Michael Chen",          date: "Dec 2023",          title: "Exceptional UX Strategy",          quote: "The UX strategy Ras developed for us was insightful and incredibly effective. They brought a fresh perspective that truly elevated our platform's usability and aesthetic.",          tag: "UX Redesign",          avatarSrc: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-133516.jpg"},
        {
          id: "3",          name: "Emily Rodriguez",          date: "Nov 2023",          title: "Seamless Collaboration",          quote: "Beyond their incredible design skills, Ras is a joy to work with. Their communication and collaboration made the entire project a smooth and enjoyable experience.",          tag: "Team Collaboration",          avatarSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-with-papers-notes-office_23-2149749879.jpg"},
        {
          id: "4",          name: "David Kim",          date: "Oct 2023",          title: "Impactful Visual Design",          quote: "Ras's visual design work is top-notch. They created an interface that not only looks stunning but also drives user engagement and conversion rates effectively.",          tag: "Visual Design",          avatarSrc: "http://img.b2bpic.net/free-photo/you-are-what-i-need-funny-cheerful-man-with-stubble-points-with-finger-gun-gesture-picks-up-someone-wears-casual-t-shirt-says-bang-you-killed-poses-vibrant-pink-wall_273609-42215.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038915.jpg"},
        {
          id: "5",          name: "Jessica Lee",          date: "Sep 2023",          title: "Innovative Problem Solver",          quote: "Whenever we faced a design challenge, Ras always came up with innovative and practical solutions. Their creativity and problem-solving skills are truly impressive.",          tag: "Problem Solving",          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-girl-glasses-smiling_176420-8501.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/objects-stationery-workplace-workspace-equipment-concept_53876-31581.jpg"},
      ]}
      title="What Clients Say"
      description="Praise for design excellence, collaborative partnership, and impactful results from those I've worked with."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq1",          title: "What is your typical design process?",          content: "My process typically involves Discovery & Research, Ideation & Wireframing, Prototyping & Testing, and final UI Design & Handoff. Each phase is collaborative and tailored to project needs."},
        {
          id: "faq2",          title: "How do you ensure user-centricity in your designs?",          content: "User-centricity is at the core of my philosophy. I conduct thorough user research, create detailed personas and journey maps, and involve real users in testing throughout the design lifecycle."},
        {
          id: "faq3",          title: "What tools and software do you use?",          content: "I am proficient in Figma, Sketch, Adobe XD, Photoshop, Illustrator, and various prototyping tools like ProtoPie and Principle. I also use Miro for collaboration and brainstorming."},
        {
          id: "faq4",          title: "Can I see more of your work or specific case studies?",          content: "Absolutely! The 'Selected Projects' section highlights a few key projects. For a more in-depth look or specific case studies relevant to your needs, please contact me directly."},
        {
          id: "faq5",          title: "How do you handle feedback and revisions?",          content: "Feedback is crucial for successful design. I facilitate structured feedback sessions and embrace an iterative approach, ensuring your vision is met while maintaining design integrity."},
        {
          id: "faq6",          title: "What are your typical project timelines?",          content: "Timelines vary depending on the scope and complexity of the project. After an initial consultation, I can provide a detailed proposal with estimated timelines and deliverables."},
      ]}
      title="Frequently Asked Questions"
      description="Find answers to common questions about my design process, services, and how we can work together on your next project."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      text="Ready to transform your ideas into exceptional digital experiences? Let's connect and discuss how I can help your product succeed. Reach out today for a consultation!"
      buttons={[
        {
          text: "Email Me",          href: "mailto:hello@rasmere.com"},
        {
          text: "Schedule a Call",          href: "#"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      className="bg-background"
      columns={[
        {
          title: "Navigation",          items: [
            {
              label: "Home",              href: "#home"},
            {
              label: "About",              href: "#about"},
            {
              label: "Projects",              href: "#projects"},
            {
              label: "Testimonials",              href: "#testimonials"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
        {
          title: "Services",          items: [
            {
              label: "UX Research",              href: "#features"},
            {
              label: "UI Design",              href: "#features"},
            {
              label: "Prototyping",              href: "#features"},
            {
              label: "Design Systems",              href: "#features"},
          ],
        },
        {
          title: "Connect",          items: [
            {
              label: "LinkedIn",              href: "https://linkedin.com/in/rasmere"},
            {
              label: "Dribbble",              href: "https://dribbble.com/rasmere"},
            {
              label: "Behance",              href: "https://behance.net/rasmere"},
            {
              label: "Email",              href: "mailto:hello@rasmere.com"},
          ],
        },
      ]}
      logoText="Ras Mere"
      copyrightText="© 2024 Ras Mere. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
