"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroCentered from "@/components/sections/hero/HeroCentered";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Aether DB"
          navItems={[
            { name: "Features", id: "features" },
            { name: "How It Works", id: "about" },
            { name: "Pricing", id: "pricing" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" },
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Stop Writing SQL. Start Building."
          description="Aether DB turns plain English into production-ready database schemas in seconds. Just describe your application, and get PostgreSQL schemas, TypeScript types, API definitions, and more—instantly."
          background={{ variant: "animated-grid" }}
          avatars={[
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-confident-sof-1772511922535-4e334974.png",              alt: "User 1"},
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-startup-found-1772511922841-7e2c6104.png",              alt: "User 2"},
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-technical-lea-1772511921950-aa22b771.png",              alt: "User 3"},
          ]}
          avatarText="Trusted by 500+ developers"
          buttons={[
            { text: "Try it free", href: "#contact" },
            { text: "See demo", href: "#about" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="How It Works"
          title="Describe Once, Generate Everything"
          description="Type a description of your application—teams, projects, tasks, comments, billing—and Aether DB instantly generates PostgreSQL schemas with proper indexes, constraints, and RLS policies. Plus Zod schemas, TypeScript types, API definitions, seed data, and architectural documentation."
          metrics={[
            {
              value: "⚡ Seconds",              title: "From prompt to production-ready code"},
            {
              value: "100%",              title: "Type-safe across your entire stack"},
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/an-illustration-showing-the-transformati-1772511922816-9b8b2394.png"
          imageAlt="Transformation from manual to automated database setup"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSixteen
          tag="Traditional vs Aether DB"
          title="Reclaim Hours Every Week"
          description="Stop spending days planning architecture, writing migrations, and syncing types across your codebase."
          negativeCard={{
            items: [
              "Hours planning database schema",              "Writing and debugging SQL migrations",              "Manually creating TypeScript types",              "Syncing types across frontend and backend",              "Managing relational integrity by hand",              "Setting up RLS policies manually"],
          }}
          positiveCard={{
            items: [
              "Instant schema generation",              "Zero-migration SQL setup",              "Auto-generated TypeScript types",              "Perfect type sync everywhere",              "Automatic constraint validation",              "Built-in security policies"],
          }}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "Start building now", href: "#contact" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Why Teams Choose Aether DB"
          description="Real results from developers building with Aether DB"
          tag="Impact"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "10x",              title: "Faster development",              items: [
                "Database setup in minutes",                "Reduce development cycles",                "Ship features faster"],
            },
            {
              id: "2",              value: "0",              title: "Type mismatches",              items: [
                "Auto-generated consistency",                "End-to-end type safety",                "Catch errors early"],
            },
            {
              id: "3",              value: "100%",              title: "Schema coverage",              items: [
                "Complete documentation",                "All relationships mapped",                "Never miss a constraint"],
            },
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Developers Say"
          description="Hear from teams who've transformed their workflow with Aether DB"
          tag="Testimonials"
          textboxLayout="default"
          useInvertedBackground={false}
          showRating={true}
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              handle: "@sarahchen",              testimonial:
                "Aether DB cut our database setup time from 2 days to 10 minutes. The generated TypeScript types alone saved us countless hours of debugging.",              rating: 5,
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-confident-sof-1772511922535-4e334974.png",              imageAlt: "Sarah Chen"},
            {
              id: "2",              name: "Marcus Rodriguez",              handle: "@mrodriguez",              testimonial:
                "Finally, a tool that understands what developers actually need. No more manual schema creation, no more type mismatches. Just describe what you want.",              rating: 5,
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-startup-found-1772511922841-7e2c6104.png",              imageAlt: "Marcus Rodriguez"},
            {
              id: "3",              name: "Emma Thompson",              handle: "@emmathompson",              testimonial:
                "The RLS policies and security constraints are production-ready out of the box. This is enterprise-grade infrastructure in minutes.",              rating: 5,
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-technical-lea-1772511921950-aa22b771.png",              imageAlt: "Emma Thompson"},
            {
              id: "4",              name: "Alex Kumar",              handle: "@alexkumar",              testimonial:
                "We went from prototyping to production faster than ever. Aether DB handles the boring database stuff so we can focus on features.",              rating: 5,
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-product-manag-1772511922206-877ffab8.png",              imageAlt: "Alex Kumar"},
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Everything you need to know about Aether DB"
          tag="Help"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How does Aether DB generate database schemas?",              content:
                "Simply describe your application in plain English. Our AI understands your requirements and generates optimized PostgreSQL schemas with proper indexes, constraints, foreign keys, and RLS policies. You get production-ready code instantly."},
            {
              id: "2",              title: "What exactly do I get when I use Aether DB?",              content:
                "You receive: PostgreSQL schema with indexes and constraints, Zod schemas for validation, TypeScript types for your entire database, RESTful API endpoint definitions with typed request/response bodies, realistic seed data with relational integrity, and an AI explanation of every architectural decision."},
            {
              id: "3",              title: "Is the generated code production-ready?",              content:
                "Yes. All generated schemas include proper foreign key relationships, unique constraints, check constraints, row-level security policies, and performance indexes. The code is audited and optimized for production environments."},
            {
              id: "4",              title: "Can I customize the generated schema?",              content:
                "Absolutely. The generated code is yours to modify. You can edit schemas, adjust constraints, add custom columns, or refine RLS policies. Aether DB gives you the foundation—you maintain full control."},
            {
              id: "5",              title: "What databases are supported?",              content:
                "Currently, Aether DB generates PostgreSQL schemas. MySQL and other database support is coming soon."},
            {
              id: "6",              title: "Do you store my project descriptions?",              content:
                "We take privacy seriously. Your project descriptions are processed but not stored in our system. Enterprise users can opt for on-premise deployment."},
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Started"
          title="Start Building Faster Today"
          description="Join hundreds of developers who are shipping database-backed applications in record time. Sign up for free and generate your first schema in minutes."
          background={{ variant: "animated-grid" }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/an-illustration-of-a-person-working-on-a-1772511922490-57b835bf.png"
          imageAlt="Developer working with Aether DB"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="you@company.com"
          buttonText="Get Free Access"
          termsText="By signing up, you agree to our Terms of Service and Privacy Policy. We respect your data."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Aether DB"
          columns={[
            {
              items: [
                { label: "Features", href: "#features" },
                { label: "How It Works", href: "#about" },
                { label: "Pricing", href: "#metrics" },
              ],
            },
            {
              items: [
                {
                  label: "Documentation",                  href: "https://docs.aether-db.com"},
                { label: "API Reference", href: "https://docs.aether-db.com/api" },
                { label: "GitHub", href: "https://github.com/aether-db" },
              ],
            },
            {
              items: [
                { label: "Blog", href: "https://blog.aether-db.com" },
                { label: "Twitter", href: "https://twitter.com/aether_db" },
                { label: "Discord", href: "https://discord.gg/aether-db" },
              ],
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact", href: "#contact" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
