"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { FileText, Globe, Layout, Rocket, Sparkles, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="mediumLargeSizeMediumTitles"
        background="blurBottom"
        cardStyle="subtle-shadow"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="solid"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Features",          id: "#features"},
        {
          name: "Pricing",          id: "#pricing"},
        {
          name: "Templates",          id: "#templates"},
        {
          name: "Blog",          id: "#blog"},
      ]}
      brandName="WeBuild"
      button={{
        text: "Start Building Free",        href: "#contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{
        variant: "radial-gradient"}}
      title="Build Any Website. Just Describe It."
      description="WeBuild's AI turns your words into a live, stunning website — no code, no stress. Imagine: \"A portfolio for a photographer...\" or \"A landing page for my bakery...\" instantly transforming into reality."
      tag="AI-Powered"
      tagIcon={Sparkles}
      tagAnimation="slide-up"
      buttons={[
        {
          text: "Start Building Free",          href: "#"},
        {
          text: "See How It Works",          href: "#how-it-works"},
      ]}
      buttonAnimation="slide-up"
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/black-person-programming-neural-network-code-with-green-screen_482257-121370.jpg",          imageAlt: "WeBuild AI Editor Mockup"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/collection-white-bricks-black-one-with-copy-space_23-2148476791.jpg",          imageAlt: "Animated Colorful Website Cards"},
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="Trusted by 1000+ Creators"
    />
  </div>

  <div id="how-it-works" data-section="how-it-works">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "step-1",          icon: FileText,
          value: "01",          title: "Describe",          description: "Tell WeBuild what you envision for your website using natural language. Our AI listens."},
        {
          id: "step-2",          icon: Layout,
          value: "02",          title: "Customize",          description: "Refine and personalize every detail with our intuitive drag & drop editor. No code needed."},
        {
          id: "step-3",          icon: Globe,
          value: "03",          title: "Publish",          description: "Launch your stunning, responsive website to the world in just one click. It's that easy."},
      ]}
      title="Your Website Journey, Simplified"
      description="From idea to live in minutes, WeBuild makes creation accessible and fun."
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyFour
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "ai-page-generation",          title: "AI Page Generation",          author: "Smart & Intuitive",          description: "Generate entire pages or specific sections instantly with AI assistance. Say goodbye to blank canvases.",          tags: [
            "AI",            "Automation"],
          imageSrc: "http://img.b2bpic.net/free-photo/credit-card-right-side-white-background_187299-40292.jpg",          imageAlt: "AI Page Generation Icon"},
        {
          id: "visual-editor",          title: "Visual Drag & Drop Editor",          author: "Creative Control",          description: "Design with precision and freedom using our powerful, yet user-friendly visual editor. See changes live.",          tags: [
            "No-Code",            "Intuitive"],
          imageSrc: "http://img.b2bpic.net/free-psd/3d-square-intersection-prohibition_84443-57114.jpg",          imageAlt: "Visual Drag & Drop Editor Icon"},
        {
          id: "mobile-responsive",          title: "Mobile-First Responsive",          author: "Perfect on Every Device",          description: "Your websites look stunning and perform flawlessly on any screen size, automatically optimized for mobile.",          tags: [
            "Responsive",            "SEO-Friendly"],
          imageSrc: "http://img.b2bpic.net/free-vector/web-template-icons-black-background_1057-3789.jpg",          imageAlt: "Mobile-First Responsive Icon"},
        {
          id: "one-click-publishing",          title: "One-Click Publishing",          author: "Instant Launch",          description: "Go live in seconds. Publish your creation with a single click, no hosting setup required.",          tags: [
            "Speed",            "Ease"],
          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-space-rocket-model_23-2151113241.jpg",          imageAlt: "One-Click Publishing Icon"},
        {
          id: "integrations-plugins",          title: "Integrations & Plugins",          author: "Expand Functionality",          description: "Connect with your favorite tools and extend your website's capabilities with a rich ecosystem of integrations.",          tags: [
            "Ecosystem",            "Flexible"],
          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169856.jpg",          imageAlt: "Integrations & Plugins Icon"},
        {
          id: "built-in-analytics",          title: "Built-in Analytics",          author: "Track & Grow",          description: "Understand your visitors and optimize your site with powerful, easy-to-read analytics built right in.",          tags: [
            "Insights",            "Optimization"],
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-laptop-with-rate-charts-display-while-man-woman-working-business-project-design-computer-screen-with-data-chart-information-finance-analysis-desk_482257-40065.jpg",          imageAlt: "Built-in Analytics Icon"},
      ]}
      title="Unleash Your Creative Potential"
      description="WeBuild combines cutting-edge AI with intuitive design tools, giving you everything you need to create without limits."
    />
  </div>

  <div id="templates" data-section="templates">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      carouselMode="auto"
      products={[
        {
          id: "template-1",          name: "Photography Portfolio",          price: "Free",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-gradient-background-with-grainy-effect_84443-3128.jpg",          imageAlt: "Photography Portfolio Template"},
        {
          id: "template-2",          name: "Local Bakery Shop",          price: "Free",          imageSrc: "http://img.b2bpic.net/free-photo/frotn-view-french-macarons-along-with-multicolored-candies-inside-cans-pink_140725-24910.jpg",          imageAlt: "Local Bakery Shop Template"},
        {
          id: "template-3",          name: "SaaS Startup Landing",          price: "Pro",          imageSrc: "http://img.b2bpic.net/free-psd/e-wallet-landing-page-template_23-2149084753.jpg",          imageAlt: "SaaS Startup Landing Template"},
        {
          id: "template-4",          name: "Digital Agency Showcase",          price: "Pro",          imageSrc: "http://img.b2bpic.net/free-photo/inspired-youth_53876-176745.jpg",          imageAlt: "Digital Agency Showcase Template"},
        {
          id: "template-5",          name: "Online Course Platform",          price: "Pro",          imageSrc: "http://img.b2bpic.net/free-psd/e-learning-landing-page_23-2148877973.jpg",          imageAlt: "Online Course Platform Template"},
        {
          id: "template-6",          name: "Creative Blog Layout",          price: "Free",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-florist-holding-smartphone_23-2149235746.jpg",          imageAlt: "Creative Blog Layout Template"},
      ]}
      title="100+ Templates. Infinite Possibilities."
      description="Start with a professionally designed template or let AI generate one for you. Customize every detail to match your unique vision."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Stripe",        "Notion",        "Figma",        "Vercel",        "Linear",        "Sanity",        "Webflow"]}
      title="Trusted by Visionaries Worldwide"
      description="Join thousands of creators and businesses who are building amazing things with WeBuild. Your success story starts here."
      speed={40}
      showCard={false}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          name: "Sarah Johnson",          handle: "@sarahj",          testimonial: "\"WeBuild transformed my business. The AI generated a website that perfectly captured my brand, and the editor made tweaks a breeze. Truly magic!\"",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-face-african-american-girl-looking-away_1262-3098.jpg",          imageAlt: "Sarah Johnson avatar"},
        {
          id: "2",          name: "Michael Chen",          handle: "@michaelc",          testimonial: "\"As a developer, I appreciate the power and flexibility. WeBuild handles the boilerplate, letting me focus on the unique aspects of my project. Highly recommend!\"",          imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2722.jpg",          imageAlt: "Michael Chen avatar"},
        {
          id: "3",          name: "Emily Rodriguez",          handle: "@emilyr",          testimonial: "\"I launched my online course platform in a weekend! The template showcase gave me so many ideas, and the AI filled in the gaps. WeBuild is a game-changer.\"",          imageSrc: "http://img.b2bpic.net/free-photo/lady-good-mood-posing-isolated-background-showing-tongue-pretty-woman-black-jacket-smiles-white-backdrop_197531-18470.jpg",          imageAlt: "Emily Rodriguez avatar"},
        {
          id: "4",          name: "David Kim",          handle: "@davidk",          testimonial: "\"The ease of use is unparalleled. I've tried other builders, but WeBuild's AI combined with its intuitive design is simply the best for quick, professional results.\"",          imageSrc: "http://img.b2bpic.net/free-photo/man-black-working-laptop-cafe_23-2147962625.jpg",          imageAlt: "David Kim avatar"},
        {
          id: "5",          name: "Olivia Davis",          handle: "@oliviad",          testimonial: "\"Finally, a tool that truly empowers creativity. WeBuild understands my prompts better than I do sometimes, and the output is always beyond expectations.\"",          imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-3693.jpg",          imageAlt: "Olivia Davis avatar"},
      ]}
      title="What Our Creators Are Saying"
      description="Hear directly from the innovators, entrepreneurs, and artists who are building their dreams with WeBuild."
      speed={40}
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "free",          badge: "Starter",          badgeIcon: Sparkles,
          price: "$0",          subtitle: "For new creators & personal projects",          buttons: [
            {
              text: "Start for Free",              href: "#"},
          ],
          features: [
            "AI Website Generation (Basic)",            "Drag & Drop Editor",            "1 Page Website",            "WeBuild Subdomain",            "Basic Analytics"],
        },
        {
          id: "pro",          badge: "Popular",          badgeIcon: Rocket,
          price: "$29",          subtitle: "For growing businesses & professionals",          buttons: [
            {
              text: "Go Pro Now",              href: "#"},
          ],
          features: [
            "AI Website Generation (Advanced)",            "Unlimited Pages",            "Custom Domain Connect",            "Advanced SEO Tools",            "Priority Support",            "Integrations & Plugins"],
        },
        {
          id: "team",          badge: "Enterprise",          badgeIcon: Users,
          price: "$99",          subtitle: "For agencies & large organizations",          buttons: [
            {
              text: "Contact Sales",              href: "#"},
          ],
          features: [
            "Everything in Pro",            "Team Collaboration Tools",            "Dedicated Account Manager",            "Custom Integrations",            "White Label Options",            "SLA & Uptime Guarantee"],
        },
      ]}
      title="Flexible Plans for Every Creator"
      description="Choose the perfect plan to unleash your creativity and build the website of your dreams, powered by AI."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={true}
      background={{
        variant: "glowing-orb"}}
      text="Your Website is One Prompt Away."
      buttons={[
        {
          text: "Build for Free — No Credit Card",          href: "#"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Your Vision. Built by AI. Live in Minutes."},
          ],
        },
        {
          items: [
            {
              label: "Product",              href: "#"},
            {
              label: "Features",              href: "#features"},
            {
              label: "Pricing",              href: "#pricing"},
            {
              label: "Templates",              href: "#templates"},
          ],
        },
        {
          items: [
            {
              label: "Company",              href: "#"},
            {
              label: "About Us",              href: "#"},
            {
              label: "Blog",              href: "#blog"},
            {
              label: "Careers",              href: "#"},
          ],
        },
        {
          items: [
            {
              label: "Social",              href: "#"},
            {
              label: "Twitter",              href: "https://twitter.com/webuild"},
            {
              label: "LinkedIn",              href: "https://linkedin.com/company/webuild"},
            {
              label: "Instagram",              href: "https://instagram.com/webuild"},
          ],
        },
      ]}
      logoText="WeBuild"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
