"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MediaSplitAbout from '@/components/sections/about/MediaSplitAbout';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Github, Linkedin, Sparkles, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="medium"
      background="animatedAurora"
      cardStyle="elevated"
      primaryButtonStyle="outline"
      secondaryButtonStyle="minimal"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Bildly"
          navItems={[
            { name: "Features", id: "features" },
            { name: "About", id: "about" },
            { name: "Pricing", id: "pricing" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Start Free",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Build Beautiful Websites with AI"
          description="Bildly is an AI-powered website builder that lets you create stunning, professional websites without code. From concept to launch in minutes."
          tag="AI-Powered Builder"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400732838-4uulpve1.jpg"
          imageAlt="Bildly website builder interface"
          imagePosition="right"
          buttons={[
            { text: "Start Building Free", href: "contact" },
            { text: "View Demo", href: "#" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitAbout
          title="Democratizing Web Design"
          description="We believe everyone should be able to create professional websites. Bildly combines artificial intelligence with intuitive design tools to remove barriers to entry. Our mission is to empower entrepreneurs, small businesses, and creators with the power to build their digital presence without technical expertise or hefty design costs."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767047363155-i0eatu3f.jpg"
          imageAlt="Bildly team collaborating"
          imagePosition="right"
          buttons={[
            { text: "Learn Our Story", href: "#" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSeven
          title="Powerful Features Built for You"
          description="Everything you need to create, customize, and launch your website with confidence."
          tag="Core Capabilities"
          features={[
            {
              id: 1,
              title: "AI-Powered Design Assistant",
              description: "Let our intelligent AI suggest layouts, color schemes, and content optimizations. Just describe your vision and watch it come to life.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767047359959-qvsakt9z.jpg"
            },
            {
              id: 2,
              title: "Drag & Drop Builder",
              description: "No coding required. Simply drag components onto your canvas and customize with our visual editor. Complete control at your fingertips.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767047359002-1q4ry6lq.jpg"
            },
            {
              id: 3,
              title: "Professional Templates",
              description: "Start with beautifully designed templates for every industry. Customize them to match your brand or build from scratch.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767047362043-1bptkoq5.jpg"
            },
            {
              id: 4,
              title: "One-Click Publishing",
              description: "Launch your website instantly with our built-in hosting. No server setup, no domain headaches. We handle all the technical details.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767047360917-e7pykfdh.jpg"
            }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Trusted by Creators Worldwide"
          description="Join thousands of entrepreneurs building their digital presence with Bildly."
          metrics={[
            {
              id: "1",
              value: "50K+",
              description: "Websites Created"
            },
            {
              id: "2",
              value: "98%",
              description: "Customer Satisfaction"
            },
            {
              id: "3",
              value: "120+",
              description: "Countries Supported"
            },
            {
              id: "4",
              value: "$2M+",
              description: "Revenue Generated by Users"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="What Our Users Say"
          description="Real stories from real creators who've built successful businesses with Bildly."
          testimonials={[
            {
              id: "1",
              name: "Sarah Chen",
              role: "E-commerce Founder",
              testimonial: "Bildly saved me months of development time and thousands in designer costs. I launched my store in just one weekend!",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766735981305-ohmchoon.jpg"
            },
            {
              id: "2",
              name: "Marcus Johnson",
              role: "Marketing Agency Owner",
              testimonial: "The AI features are incredible. My team can now build client websites 10x faster. It's a game changer for our business.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399073440-t51o34g6.jpg"
            },
            {
              id: "3",
              name: "Elena Rodriguez",
              role: "Freelance Designer",
              testimonial: "I love how intuitive Bildly is. My non-technical clients can now edit their sites without my help. Best investment ever.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140153329-bmp1nqc3.jpg"
            },
            {
              id: "4",
              name: "David Park",
              role: "Small Business Owner",
              testimonial: "From zero to a professional website in minutes. Bildly's AI suggestions were spot-on for my consulting practice.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184703623-6mn9btum.jpg"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Simple, Transparent Pricing"
          description="Choose the plan that fits your needs. All plans include AI assistance and professional hosting."
          tag="Special Offer"
          plans={[
            {
              id: "starter",
              price: "Free",
              name: "Starter Plan",
              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "Up to 3 websites",
                "AI design assistant",
                "50+ templates",
                "Basic analytics",
                "Community support"
              ]
            },
            {
              id: "pro",
              badge: "Most Popular",
              badgeIcon: Sparkles,
              price: "$29/mo",
              name: "Pro Plan",
              buttons: [
                { text: "Start Free Trial", href: "contact" },
                { text: "Chat with Sales", href: "#" }
              ],
              features: [
                "Unlimited websites",
                "Advanced AI features",
                "200+ premium templates",
                "Advanced analytics",
                "Priority support",
                "Custom domain"
              ]
            },
            {
              id: "business",
              price: "$99/mo",
              name: "Business Plan",
              buttons: [
                { text: "Schedule Demo", href: "contact" },
                { text: "Contact Sales", href: "#" }
              ],
              features: [
                "Everything in Pro",
                "API access",
                "Team collaboration",
                "White-label options",
                "Dedicated account manager",
                "Custom integrations"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about Bildly and how to get the most out of your website."
          tag="Help & Support"
          faqs={[
            {
              id: "1",
              title: "Do I need coding experience to use Bildly?",
              content: "No! Bildly is designed for everyone. Our drag-and-drop builder and AI assistant handle all the technical details so you can focus on your content and design."
            },
            {
              id: "2",
              title: "Can I use my own domain?",
              content: "Absolutely. With our Pro and Business plans, you can connect your custom domain easily. We also provide free subdomains on our Starter plan."
            },
            {
              id: "3",
              title: "Is my website mobile responsive?",
              content: "Yes, every website built with Bildly is automatically optimized for mobile devices. We handle responsive design so you don't have to worry about it."
            },
            {
              id: "4",
              title: "Can I export my website?",
              content: "On our Business plan, you can download your website files or export them. Starter and Pro plans keep your website hosted with us."
            },
            {
              id: "5",
              title: "What payment methods do you accept?",
              content: "We accept all major credit cards, PayPal, and bank transfers for annual subscriptions. Enterprise customers have additional payment options."
            },
            {
              id: "6",
              title: "Is there customer support?",
              content: "Yes! Starter plan gets community support, Pro gets email support, and Business gets priority support with a dedicated account manager."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Ready to Build Your Website?"
          description="Join thousands of creators building their digital presence. Start free today and upgrade anytime."
          inputs={[
            {
              name: "fullName",
              type: "text",
              placeholder: "Full Name",
              required: true
            },
            {
              name: "email",
              type: "email",
              placeholder: "Email Address",
              required: true
            },
            {
              name: "company",
              type: "text",
              placeholder: "Company or Project Name",
              required: false
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your project or any questions you have...",
            rows: 4,
            required: false
          }}
          buttonText="Start Building Now"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Bildly"
          copyrightText="© 2025 Bildly. All rights reserved."
          socialLinks={[
            {
              icon: Twitter,
              href: "https://twitter.com/bildly",
              ariaLabel: "Twitter"
            },
            {
              icon: Linkedin,
              href: "https://linkedin.com/company/bildly",
              ariaLabel: "LinkedIn"
            },
            {
              icon: Github,
              href: "https://github.com/bildly",
              ariaLabel: "GitHub"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}