"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Code, Database, Palette, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSizeMediumTitles"
        background="aurora"
        cardStyle="glass-depth"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "#hero"},
        {
          name: "About",          id: "#about"},
        {
          name: "Projects",          id: "#projects"},
        {
          name: "Blog",          id: "#blog"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="Rasmere"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardTestimonial
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient"}}
      title="Hi, I'm Rasmere."
      description="Passionate about crafting exceptional web experiences and telling compelling stories through code. Let's build something remarkable."
      testimonials={[
        {
          name: "Alex Johnson",          handle: "@alexjohnson",          testimonial: "Rasmere transformed our vision into a stunning, highly functional website. Their attention to detail and creative problem-solving are unmatched!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businesswoman-eyeglasses_1262-5856.jpg",          imageAlt: "Alex Johnson"},
        {
          name: "Maria Garcia",          handle: "@mariagarcia",          testimonial: "Working with Rasmere was a fantastic experience. They delivered ahead of schedule and the quality of their work exceeded our expectations.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-isolated-portrait-cheerful-happy-young-man-with-afro-hairstyle-casual-white-t-shirt-smiling-brightly-looking-camera-with-excited-joyful-expression_176420-12985.jpg",          imageAlt: "Maria Garcia"},
        {
          name: "Sam Chen",          handle: "@samchen",          testimonial: "Rasmere's expertise in frontend development brought our platform to life. The user experience is flawless and incredibly intuitive.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-man-posing-with-crossed-arms_23-2149206526.jpg",          imageAlt: "Sam Chen"},
        {
          name: "Jordan Lee",          handle: "@jordanlee",          testimonial: "An absolute pleasure to collaborate with. Rasmere is a true professional who consistently delivers high-quality, impactful work.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/busy-young-woman-work_329181-13393.jpg",          imageAlt: "Jordan Lee"},
        {
          name: "Pat Kim",          handle: "@patkim",          testimonial: "The project was complex, but Rasmere handled every challenge with grace and skill, resulting in a product we're incredibly proud of.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-outdoors-successful-business-person_23-2148763862.jpg",          imageAlt: "Pat Kim"},
      ]}
      buttons={[
        {
          text: "View Portfolio",          href: "#projects"},
        {
          text: "Get in Touch",          href: "#contact"},
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/handsome-man-smiling-happy-laughing-joke_176420-21064.jpg",          alt: "John Doe"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-lesbian-woman-looking-camera_23-2148126946.jpg",          alt: "Jane Smith"},
        {
          src: "http://img.b2bpic.net/free-photo/male-coworkers-office-with-lunch_273609-6073.jpg",          alt: "Robert Brown"},
        {
          src: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg",          alt: "Emily White"},
        {
          src: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg",          alt: "Smiling professional male avatar"},
      ]}
      avatarText="Trusted by 50+ happy clients"
      imageSrc="http://img.b2bpic.net/free-photo/designer-interacts-with-digital-technology-produce-virtual-home-set_482257-118835.jpg"
      imageAlt="Professional developer coding on a laptop"
      mediaAnimation="slide-up"
      marqueeItems={[
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/working-process-night-musician-is-creating-music-night_169016-17532.jpg",          alt: "Teleworking developer using computer for artificial intelligence brain"},
        {
          type: "text-icon",          text: "Innovative Solutions",          icon: Sparkles,
        },
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/businessman-with-face-mask-touching-elbow-with-his-collegue-avoid-infection-with-coronavirus-cowo_482257-2453.jpg",          alt: "Employee coming to AI startup office CTO manager desk to request help"},
        {
          type: "text",          text: "Client Success Focused"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/interior-designer-working-out-office_23-2150379242.jpg",          alt: "Modern man at desk coding"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="Building Digital Dreams with Precision"
      description="With a keen eye for design and a strong command of modern web technologies, I transform ideas into seamless digital realities. My journey is fueled by a desire to create impactful and user-centric applications that stand out."
      metrics={[
        {
          value: "5+",          title: "Years Experience"},
        {
          value: "20+",          title: "Projects Completed"},
        {
          value: "100%",          title: "Client Satisfaction"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/office-alternative-energy-sources_23-2149311435.jpg"
      imageAlt="A modern workspace with a laptop showing code and design elements"
      mediaAnimation="slide-up"
      metricsAnimation="blur-reveal"
    />
  </div>

  <div id="projects" data-section="projects">
      <FeatureCardTwentyFive
      animationType="depth-3d"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Full-Stack Web Development",          description: "Crafting robust and scalable web applications from frontend to backend. Specializing in modern frameworks like React, Next.js, and Node.js.",          icon: Code,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/conceptual-mail-with-white-envelopes-gray-background-top-view-horizontal-image_176474-7870.jpg",              imageAlt: "Web development code on a screen"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-office-with-notebook_23-2149749870.jpg",              imageAlt: "Responsive website on mobile and tablet"},
          ]
        },
        {
          title: "Intuitive UI/UX Design",          description: "Designing user-centric interfaces that are not only aesthetically pleasing but also highly functional and easy to navigate, ensuring a superior user experience.",          icon: Palette,
          mediaItems: [
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=p1rofu",              imageAlt: "UI/UX wireframe on a screen"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-with-glove-drawing_23-2148577675.jpg",              imageAlt: "Graphic design tools on a screen"},
          ]
        },
        {
          title: "API & Database Integration",          description: "Seamlessly integrating third-party APIs and managing complex databases to ensure smooth data flow and enhanced application functionality.",          icon: Database,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/developer-identifying-server-issues_482257-81365.jpg",              imageAlt: "Database server room"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-tattooed-person_23-2149563361.jpg",              imageAlt: "API integration flow chart"},
          ]
        }
      ]}
      title="My Expertise & Recent Projects"
      description="Showcasing a blend of technical prowess and creative problem-solving across various web development domains. Each project reflects a commitment to quality and innovation."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Tech Innovators Inc.",        "Creative Solutions Co.",        "Digital Growth Hub",        "Future Finance Group",        "Evolve Retail",        "HealthSphere AI",        "EduBridge Learning"]}
      title="Trusted by Leading Brands & Startups"
      description="I've had the privilege to collaborate with diverse teams and contribute to impactful projects for innovative companies across various industries."
      speed={40}
    />
  </div>

  <div id="blog" data-section="blog">
      <BlogCardThree
      animationType="scale-rotate"
      textboxLayout="default"
      useInvertedBackground={false}
      title="Latest Insights & Musings"
      description="Exploring the latest trends in web development, design philosophy, and personal growth. Stay updated with my thoughts and experiences."
      blogs={[
        {
          id: "1",          category: "Web Development",          title: "The Future of Frontend: What's Next for Developers?",          excerpt: "Dive into the exciting advancements shaping frontend development, from new frameworks to cutting-edge tools and methodologies.",          imageSrc: "http://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010132.jpg",          imageAlt: "Abstract representation of web development trends",          authorName: "Rasmere",          authorAvatar: "http://img.b2bpic.net/free-photo/man-working-laptop-with-headphones_23-2152013685.jpg",          date: "July 15, 2024"},
        {
          id: "2",          category: "UI/UX Design",          title: "Crafting Intuitive Experiences: Principles of Great UI/UX",          excerpt: "Discover the core principles behind creating user interfaces that are not only beautiful but also incredibly intuitive and effective.",          imageSrc: "http://img.b2bpic.net/free-photo/office-work-computer-technology-concept_53876-138652.jpg",          imageAlt: "UI/UX design sketches and prototypes",          authorName: "Rasmere",          authorAvatar: "http://img.b2bpic.net/free-photo/3d-cartoon-style-character_23-2151034128.jpg",          date: "June 28, 2024"},
        {
          id: "3",          category: "Productivity",          title: "Boosting Your Workflow: Tools and Habits for Developers",          excerpt: "Learn about essential tools and effective habits that can significantly enhance your productivity as a developer and creator.",          imageSrc: "http://img.b2bpic.net/free-photo/lightbox-still-life-arrangement_23-2149198417.jpg",          imageAlt: "Organized developer's desk with productivity tools",          authorName: "Rasmere",          authorAvatar: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-home_23-2149412549.jpg",          date: "June 10, 2024"},
      ]}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={true}
      testimonial="Rasmere is an incredibly talented developer, always delivering beyond expectations. Their clear communication and dedication made our project a huge success. Highly recommended!"
      rating={5}
      author="Jordan K., CEO of NovaTech"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-with-dark-hair-smiles-happily-expresses-positive-emotions-dressed-casual-turtleneck-hears-good-nes-isolated-brown-background-glad-meet-old-best-friend_273609-61400.jpg",          alt: "Jordan K."},
        {
          src: "http://img.b2bpic.net/free-photo/positive-cute-girl-winks-smiles-you-shows-perfect-white-teeth-smile-hinting-something-interesting-standing-happy-white_176420-39777.jpg",          alt: "Sarah L."},
        {
          src: "http://img.b2bpic.net/free-photo/view-3d-practicing-lawyer_23-2151023403.jpg",          alt: "Michael T."},
        {
          src: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241213.jpg",          alt: "Emily R."},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg",          alt: "Professional female avatar smiling"},
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="blur-reveal"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq-1",          title: "What kind of projects do you specialize in?",          content: "I specialize in full-stack web development, focusing on modern frameworks like React, Next.js, and Node.js. My projects range from custom web applications and e-commerce platforms to interactive dashboards and portfolio sites."},
        {
          id: "faq-2",          title: "What is your typical project timeline?",          content: "Project timelines vary greatly depending on complexity and scope. A small project might take 2-4 weeks, while larger, more complex applications can extend to 3-6 months. We'll establish a clear timeline during our initial consultation."},
        {
          id: "faq-3",          title: "How do you handle client communication and feedback?",          content: "I prioritize clear and consistent communication. We'll have regular check-ins via video calls, email, or a dedicated communication channel. Feedback is integrated iteratively throughout the development process to ensure alignment."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/businesswoman-working-project-using-computer-files-with-data-charts-corporate-employee-planning-marketing-strategy-presentation-company-development-woman-with-solution_482257-33467.jpg"
      imageAlt="Person asking a question with a thought bubble"
      mediaAnimation="slide-up"
      mediaPosition="right"
      title="Frequently Asked Questions"
      description="Got questions about my services, availability, or collaboration process? Find quick answers here, or feel free to reach out directly."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={true}
      background={{
        variant: "radial-gradient"}}
      text="Ready to transform your ideas into reality? Let's connect and build something amazing together."
      buttons={[
        {
          text: "Send an Email",          href: "mailto:rasmere@example.com"},
        {
          text: "Schedule a Call",          href: "#"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Home",              href: "#hero"},
            {
              label: "About",              href: "#about"},
            {
              label: "Projects",              href: "#projects"},
          ],
        },
        {
          items: [
            {
              label: "Blog",              href: "#blog"},
            {
              label: "Testimonials",              href: "#testimonials"},
            {
              label: "FAQ",              href: "#faq"},
          ],
        },
        {
          items: [
            {
              label: "Contact",              href: "#contact"},
            {
              label: "LinkedIn",              href: "https://linkedin.com/in/rasmere"},
            {
              label: "GitHub",              href: "https://github.com/rasmere"},
          ],
        },
      ]}
      logoText="Rasmere"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
