"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="largeSmall"
        background="noise"
        cardStyle="gradient-mesh"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Services",
          id: "features",
        },
        {
          name: "Pricing",
          id: "pricing",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="OC Digital Solution"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "gradient-bars",
      }}
      title="We Build Simple Websites That Get You More Customers"
      description="Helping Orange County businesses turn visitors into calls, bookings, and real revenue."
      buttons={[
        {
          text: "Get a Free Website Mockup",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/illustration-identity-branding-business-trademark-laptop_53876-133792.jpg"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/indian-physician-works-his-facility-office-chroma-key_482257-124450.jpg",
          alt: "Indian physician works in his facility office next to chroma key",
        },
        {
          src: "http://img.b2bpic.net/free-photo/property-engineers-working-together-with-3d-building-models-mockup-designing-layout_482257-136361.jpg",
          alt: "Property engineers working together with 3d building models",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-young-businessman-using-mobile-phone-laptop-workplace_23-2148096497.jpg",
          alt: "Close-up of a young businessman using mobile phone",
        },
        {
          src: "http://img.b2bpic.net/free-photo/brunette-businesswoman-showing-laptop_23-2148142753.jpg",
          alt: "Brunette businesswoman showing laptop",
        },
        {
          src: "http://img.b2bpic.net/free-photo/illustration-identity-branding-business-trademark-laptop_53876-133792.jpg",
          alt: "Clean business laptop mockup",
        },
      ]}
      avatarText="Trusted by 500+ local clients"
      marqueeItems={[
        {
          type: "text",
          text: "High Conversion",
        },
        {
          type: "text",
          text: "Mobile Friendly",
        },
        {
          type: "text",
          text: "Fast Loading",
        },
        {
          type: "text",
          text: "SEO Optimized",
        },
        {
          type: "text",
          text: "OC Based",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Simplicity Focused Results"
      description="OC Digital Solution builds clean, mobile-friendly websites designed to help businesses get more calls and customers. We focus on results, not overcomplicated designs."
      metrics={[
        {
          value: "100+",
          title: "Websites Built",
        },
        {
          value: "500%",
          title: "Conversion Avg.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/modern-business-workspace-glows-with-forecasting-metrics-graphs-corporate-empty-space-equipped_482257-132102.jpg"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyThree
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      features={[
        {
          id: "f1",
          title: "1-Page Professional Website",
          tags: [
            "Performance",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/loading-bar-load-waiting-indicator-concept_53876-133817.jpg",
        },
        {
          id: "f2",
          title: "Mobile Optimization",
          tags: [
            "Responsive",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/birth-rate-fertility-concept_23-2148760992.jpg",
        },
        {
          id: "f3",
          title: "Contact Forms & Call Buttons",
          tags: [
            "Conversion",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/battery-full-sign-front-side-with-white-background_187299-39723.jpg",
        },
        {
          id: "f4",
          title: "Fast Turnaround",
          tags: [
            "Speed",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/eid-responsive-shopping_187299-47499.jpg",
        },
      ]}
      title="Services That Matter"
      description="What we provide to help your business grow."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "starter",
          badge: "Popular",
          price: "$500",
          subtitle: "Setup + $100/mo management",
          buttons: [
            {
              text: "Get Started",
              href: "#contact",
            },
          ],
          features: [
            "1-Page Website",
            "Mobile Optimized",
            "Contact Forms",
            "Monthly Management",
            "Hosting Included",
          ],
        },
      ]}
      title="Transparent Management Pricing"
      description="Simple pricing for all your needs."
    />
  </div>

  <div id="metric" data-section="metric">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          value: "24/7",
          title: "Online Availability",
          items: [
            "Always on",
            "Never miss a lead",
          ],
        },
        {
          id: "m2",
          value: "100%",
          title: "Mobile Ready",
          items: [
            "Works on any device",
            "Perfect experience",
          ],
        },
      ]}
      title="Why Choose Simplicity?"
      description="We focus on what actually brings you results."
    />
  </div>

  <div id="socialProof" data-section="socialProof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Orange Coast",
        "Coastal Beauty",
        "OC Finance",
        "Laguna Tech",
        "Newport Home",
        "Irvine Law",
        "Huntington Clean",
      ]}
      title="Trusted by Local Businesses"
      description="Working with businesses across Orange County."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Sarah Miller",
          handle: "@sarah_miller",
          testimonial: "The best investment for my business.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/girl-sitting-table-holding-mobile-phone-indoors_171337-17096.jpg",
        },
        {
          id: "t2",
          name: "David Chen",
          handle: "@david_chen",
          testimonial: "Fast turnaround and great results.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-businesswoman-talking-mobile-phone_1262-16443.jpg",
        },
        {
          id: "t3",
          name: "Emily Davis",
          handle: "@emily_davis",
          testimonial: "My phone hasn't stopped ringing.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/classic-studio-portrait-black-american-male-dressed-suit-grey-vignette-background_613910-9578.jpg",
        },
        {
          id: "t4",
          name: "John Thompson",
          handle: "@j_thompson",
          testimonial: "Simple, clean, and professional.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/horizontal-portrait-beautiful-positive-young-european-female-blue-shirt-dress-relaxing-home-looking-front-with-easy-carefree-smile_343059-3894.jpg",
        },
        {
          id: "t5",
          name: "Lisa Wang",
          handle: "@lisa_wang",
          testimonial: "Exceeded my expectations entirely.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84733.jpg",
        },
      ]}
      showRating={true}
      title="Local Business Success Stories"
      description="Hear from the owners we've helped grow."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Want to see what your new website could look like?"
      description="Request your free mock-up and start your journey today."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Name",
        },
        {
          name: "email",
          type: "email",
          placeholder: "Your Email",
        },
        {
          name: "phone",
          type: "tel",
          placeholder: "Your Phone Number",
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "Tell us about your business goals",
      }}
      imageSrc="http://img.b2bpic.net/free-photo/hand-holding-frame-with-equal-rights-symbol_23-2148415330.jpg"
      buttonText="Request Free Mockup"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="OC Digital Solution"
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Services",
              href: "#features",
            },
            {
              label: "Pricing",
              href: "#pricing",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "Contact Us",
              href: "#contact",
            },
            {
              label: "Privacy Policy",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
