"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import { Calendar, Globe, RefreshCw, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="largeSmall"
        background="circleGradient"
        cardStyle="outline"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Portfolio",
          id: "#portfolio",
        },
        {
          name: "Process",
          id: "#process",
        },
        {
          name: "Pricing",
          id: "#pricing",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="Studio Morocco"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlayTestimonial
      title="Websites That Make Businesses Look Expensive — And Sell Better."
      description="We design high-converting websites for restaurants, clinics, agencies, gyms and salons that want to look premium and turn visitors into customers."
      buttons={[
        {
          text: "Get a Free Website Audit",
          href: "#contact",
        },
        {
          text: "View Demo Projects",
          href: "#portfolio",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/row-identical-laptops-monochrome-light-corporate-teams-digital-device-fleet_169016-70819.jpg?_wi=1"
      imageAlt="Professional website agency mockup"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/web-design-user-interface-concept_53876-120767.jpg",
          alt: "Client profile 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-it-remote-employee-writing-code-using-mockup-notebook_482257-116241.jpg",
          alt: "Client profile 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/laptop-with-copy-space-display-empty-desk-performance-metrics_482257-126532.jpg",
          alt: "Client profile 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/arabic-laptop-front-side_187299-38055.jpg",
          alt: "Client profile 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/man-restaurant-concentrating-laptop_23-2147826852.jpg",
          alt: "Client profile 5",
        },
      ]}
      avatarText="Trusted by 50+ local businesses"
      testimonials={[
        {
          name: "Sarah Miller",
          handle: "@sarahsmiller",
          testimonial: "The design quality is unmatched. My restaurant bookings doubled within the first month of the new site.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/man-restaurant-concentrating-laptop_23-2147826852.jpg",
        },
        {
          name: "Dr. James Aris",
          handle: "@drjamesaris",
          testimonial: "Finally, a website that looks professional and builds trust with my patients. Seamless experience.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/health-specialist-showing-horizontal-greenscreen-tablet-patient-looking-display-mockup-isolated-template-with-blank-copyspace-chroma-key-background-gadget-close-up_482257-45685.jpg",
        },
        {
          name: "Elena Rossi",
          handle: "@elena_rossi",
          testimonial: "Studio Morocco made my architecture portfolio look world-class. The attention to detail is superb.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/architecture-real-estate-building-concept_53876-124771.jpg",
        },
        {
          name: "Mark Thornton",
          handle: "@thorntonfitness",
          testimonial: "High-converting, sleek, and fast. My gym sign-ups have increased significantly since launch.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/build-body-daily-workout-concept_53876-13877.jpg",
        },
        {
          name: "Linda Vance",
          handle: "@lvancebeauty",
          testimonial: "The booking system integrated perfectly. My clients love the elegant, feminine aesthetic.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/stylish-beauty-women-elegent-enjoy-concept_53876-132577.jpg",
        },
      ]}
    />
  </div>

  <div id="problem" data-section="problem">
      <MediaAbout
      useInvertedBackground={false}
      title="Most businesses lose customers before they even get a message."
      description="Is your current website costing you potential clients? We fix outdated layouts, mobile-unfriendly experiences, and unclear calls to action that drive visitors away. We build digital assets that work 24/7."
      imageSrc="http://img.b2bpic.net/free-photo/side-view-man-using-laptop-outdoors_23-2150747668.jpg"
      imageAlt="Outdated website frustration"
    />
  </div>

  <div id="solution" data-section="solution">
      <FeatureCardTwentyFive
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Business Website",
          description: "Professional hub for your brand.",
          icon: Globe,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-nutritional-counter-app-composition_23-2149880622.jpg",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/laptop-with-replaceable-screen-hospital-cabinet-doctor-wearing-coat-arriving-health-clinic-nurse-writing-prescription-notebook-with-green-screen-medic-clinic_482257-3034.jpg",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/row-identical-laptops-monochrome-light-corporate-teams-digital-device-fleet_169016-70819.jpg?_wi=2",
          imageAlt: "cafe website mockup UI",
        },
        {
          title: "Landing Page",
          description: "High-conversion single page focus.",
          icon: Zap,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/real-estate-accommodation-property-investment-graphic-word_53876-124687.jpg",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-laptop-seaside_23-2148968962.jpg",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994346.jpg",
          imageAlt: "cafe website mockup UI",
        },
        {
          title: "Booking Website",
          description: "Seamless scheduling for your services.",
          icon: Calendar,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/beauty-salon-with-cosmetology-equipment-anime-style_23-2151500977.jpg",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-korean-woman-making-toast-watching-video-digital-tablet-looking-screen_1258-190989.jpg",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/dentist-pointing-digital-tablet-screen-female-patient-sitting-chair_23-2147879187.jpg",
          imageAlt: "cafe website mockup UI",
        },
        {
          title: "Website Redesign",
          description: "Modernize your existing presence.",
          icon: RefreshCw,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/coffee-relaxation-beverage-planning-data-digital-concept_53876-63189.jpg?_wi=1",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/homepage-seen-laptop-screen_23-2149416731.jpg?_wi=1",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/real-estate-accommodation-property-investment-graphic-word_53876-127370.jpg?_wi=1",
          imageAlt: "cafe website mockup UI",
        },
      ]}
      title="We turn your online presence into a sales asset."
      description="Our solutions are tailored to local business needs, focusing on trust and conversion."
    />
  </div>

  <div id="portfolio" data-section="portfolio">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          name: "Premium Café Redesign",
          price: "Concept Project",
          variant: "Hospitality",
          imageSrc: "http://img.b2bpic.net/free-photo/coffee-relaxation-beverage-planning-data-digital-concept_53876-63189.jpg?_wi=2",
        },
        {
          id: "p2",
          name: "Dental Clinic Landing",
          price: "Demo Redesign",
          variant: "Medical",
          imageSrc: "http://img.b2bpic.net/free-photo/homepage-seen-laptop-screen_23-2149416731.jpg?_wi=2",
        },
        {
          id: "p3",
          name: "Real Estate Agency",
          price: "Concept Project",
          variant: "Real Estate",
          imageSrc: "http://img.b2bpic.net/free-photo/real-estate-accommodation-property-investment-graphic-word_53876-127370.jpg?_wi=2",
        },
        {
          id: "p4",
          name: "Fitness Coach Booking",
          price: "Sample Case Study",
          variant: "Wellness",
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-training-with-laptop_23-2150384088.jpg",
        },
        {
          id: "p5",
          name: "Architecture Portfolio",
          price: "Concept Project",
          variant: "Studio",
          imageSrc: "http://img.b2bpic.net/free-photo/architects-working-project_53876-46878.jpg",
        },
        {
          id: "p6",
          name: "Beauty Salon Booking",
          price: "Demo Redesign",
          variant: "Beauty",
          imageSrc: "http://img.b2bpic.net/free-vector/appointment-booking-landing-page_23-2148552092.jpg",
        },
      ]}
      title="Concept Demo Projects"
      description="Built to demonstrate our process and capabilities."
    />
  </div>

  <div id="process" data-section="process">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "01",
          title: "Audit",
          items: [
            "Deep dive into current site",
            "Competitor research",
            "Identify growth opportunities",
          ],
        },
        {
          id: "m2",
          value: "02",
          title: "Strategy",
          items: [
            "Define business goals",
            "Target audience analysis",
            "Conversion path design",
          ],
        },
        {
          id: "m3",
          value: "03",
          title: "Design",
          items: [
            "Premium interface mockups",
            "Modern brand alignment",
            "User experience focus",
          ],
        },
        {
          id: "m4",
          value: "04",
          title: "Build",
          items: [
            "Responsive web development",
            "Performance optimization",
            "SEO foundations",
          ],
        },
        {
          id: "m5",
          value: "05",
          title: "Launch",
          items: [
            "Deployment & testing",
            "Quality assurance",
            "Final handover & support",
          ],
        },
      ]}
      title="Simple process. Fast delivery."
      description="Our five-step framework ensures quality, clarity, and speed."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "starter",
          tag: "Starter",
          period: "once",
          price: "Starting from $999",
          description: "Professional entry-level presence.",
          button: {
            text: "Get Quote",
            href: "#contact",
          },
          featuresTitle: "Includes:",
          features: [
            "1-3 pages",
            "Responsive design",
            "Contact form",
            "WhatsApp button",
          ],
        },
        {
          id: "growth",
          tag: "Growth",
          period: "once",
          price: "Starting from $1,999",
          description: "Lead-focused digital growth.",
          button: {
            text: "Get Quote",
            href: "#contact",
          },
          featuresTitle: "Everything in Starter, plus:",
          features: [
            "4-6 pages",
            "SEO Basics",
            "Booking/contact flow",
            "Analytics setup",
          ],
        },
        {
          id: "premium",
          tag: "Premium",
          period: "once",
          price: "Starting from $3,499",
          description: "Full-service digital system.",
          button: {
            text: "Get Quote",
            href: "#contact",
          },
          featuresTitle: "Everything in Growth, plus:",
          features: [
            "Landing page strategy",
            "Brand direction",
            "SEO structure",
            "Content guidance",
          ],
        },
      ]}
      title="Flexible Service Packages"
      description="Professional web systems tailored to your needs."
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="Built for ambitious businesses."
      description="I started this studio to help local businesses stop looking average online. With a background in design and digital strategy, I build websites that are beautiful, functional, and built to sell."
      imageSrc="http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345417.jpg"
      imageAlt="About the designer"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient",
      }}
      tag="FREE AUDIT"
      title="Want to know what your website is costing you?"
      description="Get a custom audit to see how we can improve your conversion and customer trust."
      buttons={[
        {
          text: "Get Free Website Audit",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="Studio Morocco"
      columns={[
        {
          title: "Navigation",
          items: [
            {
              label: "Portfolio",
              href: "#portfolio",
            },
            {
              label: "Process",
              href: "#process",
            },
            {
              label: "Pricing",
              href: "#pricing",
            },
          ],
        },
        {
          title: "Contact",
          items: [
            {
              label: "WhatsApp",
              href: "#",
            },
            {
              label: "Email",
              href: "#",
            },
            {
              label: "Instagram",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 Studio Morocco. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}