"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
import TextAbout from "@/components/sections/about/TextAbout";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterSimple from "@/components/sections/footer/FooterSimple";

export default function AetherDBLanding() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="aurora"
      cardStyle="subtle-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Aether DB"
          navItems={[
            { name: "How It Works", id: "features" },
            { name: "Features", id: "benefits" },
            { name: "FAQ", id: "faq" },
            { name: "Docs", id: "#" },
            { name: "GitHub", id: "#" },
          ]}
          button={{
            text: "Generate Your Schema",            href: "#contact"}}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="Aether DB"
          description="Transform plain English into production-ready databases in seconds. No schema design meetings. No manual type syncing."
          buttons={[
            { text: "Generate Your Schema", href: "#contact" },
            { text: "Watch Demo", href: "#" },
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwXR9IPU1i0RZAZxTYpt2HAlY/a-modern-sophisticated-database-schema-v-1772511925892-9f0c55b5.png"
          imageAlt="Aether DB database schema interface"
          showDimOverlay={true}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNineteen
          tag="How It Works"
          title="From Conversation to Code in Seconds"
          description="Watch your database architecture come to life as you describe your app. Aether DB handles all the complexity so you can focus on building."
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              tag: "Step One",              title: "Describe Your App",              subtitle: "Write how your app works in plain English.",              description: "Simply explain your data structure, relationships, and requirements using natural language. Aether DB's AI understands your intent and requirements.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwXR9IPU1i0RZAZxTYpt2HAlY/a-close-up-of-a-developer-typing-natural-1772511926022-f462f1fe.png",              imageAlt: "Developer describing app in natural language"},
            {
              id: 2,
              tag: "Step Two",              title: "Generate PostgreSQL",              subtitle: "Get production-ready schemas instantly.",              description: "Aether DB generates optimized PostgreSQL schemas with proper indexing, constraints, and migrations. All following database best practices.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwXR9IPU1i0RZAZxTYpt2HAlY/a-detailed-postgresql-schema-visualizati-1772511926845-e2e532c7.png?_wi=1",              imageAlt: "PostgreSQL schema visualization"},
            {
              id: 3,
              tag: "Step Three",              title: "Sync TypeScript Types",              subtitle: "Your types always match your database.",              description: "Automatically generate TypeScript interfaces that stay synchronized with your schema. Say goodbye to type mismatches and runtime errors.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwXR9IPU1i0RZAZxTYpt2HAlY/visual-representation-of-typescript-type-1772511926929-9d540ea3.png",              imageAlt: "TypeScript type definitions synced with database"},
            {
              id: 4,
              tag: "Step Four",              title: "Deploy & Build",              subtitle: "Start shipping faster immediately.",              description: "Export migrations, seed data, and API definitions. Integrate with your existing Stack and deploy with confidence.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwXR9IPU1i0RZAZxTYpt2HAlY/a-detailed-postgresql-schema-visualizati-1772511926845-e2e532c7.png?_wi=2",              imageAlt: "Deployment and integration flow"},
          ]}
        />
      </div>

      <div id="benefits" data-section="benefits">
        <TextAbout
          tag="Why Aether DB"
          title="Ship Faster. Code Smarter. Scale Confidently."
          useInvertedBackground={true}
          buttons={[
            { text: "Start Building", href: "#contact" },
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          tag="Developer Voices"
          title="What Developers Are Saying"
          description="Join hundreds of developers shipping faster with Aether DB"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Alex Chen",              role: "Full-Stack Developer, TechStartup",              testimonial: "Aether DB cut my database setup time from days to minutes. The automatic type syncing alone has saved me countless hours of debugging.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwXR9IPU1i0RZAZxTYpt2HAlY/professional-portrait-of-a-software-deve-1772511925192-36ea08cd.png",              imageAlt: "Alex Chen"},
            {
              id: "2",              name: "Sarah Williams",              role: "CTO, SaaS Company",              testimonial: "Our team now ships features 40% faster. Aether DB handles the boring database architecture so we can focus on product differentiation.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwXR9IPU1i0RZAZxTYpt2HAlY/professional-headshot-of-a-female-softwa-1772511927791-52710513.png",              imageAlt: "Sarah Williams"},
            {
              id: "3",              name: "Marcus Johnson",              role: "Freelance Developer",              testimonial: "As someone juggling multiple client projects, Aether DB is a game-changer. Consistent schemas, no type mismatches, instant migrations. Exactly what I needed.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwXR9IPU1i0RZAZxTYpt2HAlY/portrait-of-a-male-software-developer-la-1772511926407-9f8d2659.png",              imageAlt: "Marcus Johnson"},
            {
              id: "4",              name: "Elena Rodriguez",              role: "Engineering Manager, Scale-up",              testimonial: "We standardized our database generation across all projects. Aether DB ensures consistency while reducing onboarding time for new team members significantly.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwXR9IPU1i0RZAZxTYpt2HAlY/professional-portrait-of-a-startup-found-1772511925415-6903e2c9.png",              imageAlt: "Elena Rodriguez"},
            {
              id: "5",              name: "David Park",              role: "Senior Engineer, FinTech",              testimonial: "The generated migrations are production-ready and follow best practices. We've eliminated an entire category of database-related bugs from our workflow.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwXR9IPU1i0RZAZxTYpt2HAlY/professional-headshot-of-a-software-arch-1772511925383-e47b74cd.png",              imageAlt: "David Park"},
            {
              id: "6",              name: "Jessica Thompson",              role: "Founder & Developer",              testimonial: "Bootstrapping solo, every hour counts. Aether DB gave me back time I didn't have. Now I can focus on what makes my product unique.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwXR9IPU1i0RZAZxTYpt2HAlY/professional-portrait-of-a-full-stack-de-1772511926263-60ea9cd6.png",              imageAlt: "Jessica Thompson"},
          ]}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          tag="Trusted By"
          title="Used by Developer Teams Worldwide"
          description="Join hundreds of developers and engineering teams building faster with Aether DB"
          textboxLayout="default"
          useInvertedBackground={false}
          names={[
            "TechFlow Studios",            "CloudSync Dev",            "Innovate Labs",            "DataFlow Inc",            "BuildFast Co",            "DevScale Pro",            "RuntimeX",            "NeoCode Systems"]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about Aether DB"
          textPosition="left"
          useInvertedBackground={true}
          faqsAnimation="slide-up"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How accurate is the schema generation?",              content: "Aether DB uses advanced AI to understand your application requirements and generate schemas that follow PostgreSQL best practices. Our system achieves 98%+ accuracy for typical application scenarios, with iterative refinement capabilities for complex data models."},
            {
              id: "2",              title: "Can I customize the generated schema?",              content: "Absolutely. Generated schemas are fully editable. You can refine, add custom indexes, adjust relationships, or modify any aspect. The system supports iterative refinement—update your description and regenerate as your requirements evolve."},
            {
              id: "3",              title: "What databases does Aether DB support?",              content: "Currently, Aether DB specializes in PostgreSQL, which is ideal for most modern applications. We're actively expanding to support MySQL, MongoDB, and other popular databases based on community feedback."},
            {
              id: "4",              title: "How does TypeScript sync work?",              content: "Once your schema is generated, Aether DB automatically creates TypeScript interfaces matching your database structure. When you update the schema, types regenerate automatically, keeping your code synchronized without manual effort."},
            {
              id: "5",              title: "Is my data secure?",              content: "Yes. Aether DB processes your descriptions but never stores your actual data or credentials. All schema definitions are encrypted in transit and at rest. We comply with industry-standard security practices and GDPR requirements."},
            {
              id: "6",              title: "Can teams collaborate on schemas?",              content: "Yes. Teams can collaborate in real-time, with version control, comments, and approval workflows built-in. Share schemas with team members, track changes, and maintain consistency across projects."},
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Generate Your First Schema Today"
          description="Join hundreds of developers shipping faster with Aether DB. No credit card required."
          background={{ variant: "rotated-rays-animated-grid" }}
          useInvertedBackground={false}
          inputPlaceholder="your-email@example.com"
          buttonText="Generate Schema"
          termsText="We respect your privacy. Unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#" },
                { label: "Documentation", href: "#" },
                { label: "API Reference", href: "#" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" },
              ],
            },
            {
              title: "Resources",              items: [
                { label: "GitHub", href: "#" },
                { label: "Community", href: "#" },
                { label: "Status", href: "#" },
                { label: "Support", href: "#" },
              ],
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Security", href: "#" },
              ],
            },
          ]}
          bottomLeftText="© 2025 Aether DB. All rights reserved."
          bottomRightText="Engineered for developers who ship fast."
        />
      </div>
    </ThemeProvider>
  );
}
