"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Sparkles } from "lucide-react";

export default function BuildPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="BASE"
          navItems={[
            { name: "Systems", id: "/systems" },
            { name: "Performance", id: "/performance" },
            { name: "Build", id: "/build" },
            { name: "Field Tests", id: "/field-tests" },
            { name: "Support", id: "/support" }
          ]}
          button={{ text: "Shop", href: "#shop" }}
          className="backdrop-blur-lg border border-accent/40"
        />
      </div>

      <div id="build" data-section="build">
        <PricingCardOne
          title="Spec & Configure"
          description="Build your reference system with modular options. Real-time SKU generation and assembly lead-time estimates."
          plans={[
            {
              id: "compact",              badge: "Nearfield",              badgeIcon: Sparkles,
              price: "$2,495",              subtitle: "Perfect for compact studios",              features: [
                "Graphite, Aluminum, Ceramic finishes",                "Mesh or solid grille",                "Neutral, Warm, or Analytical DSP",                "Status or Reactive LED",                "2–3 week lead time"
              ]
            },
            {
              id: "reference",              badge: "Room Reference",              badgeIcon: Sparkles,
              price: "$4,295",              subtitle: "For professional monitoring",              features: [
                "Graphite, Aluminum, Ceramic finishes",                "Mesh or solid grille",                "Neutral, Warm, or Analytical DSP",                "Status or Reactive LED",                "3–4 week lead time"
              ]
            },
            {
              id: "flagship",              badge: "Studio Flagship",              badgeIcon: Sparkles,
              price: "$7,495",              subtitle: "Reference-grade system",              features: [
                "Graphite, Aluminum, Ceramic finishes",                "Mesh or solid grille",                "Neutral, Warm, or Analytical DSP",                "Status or Reactive LED",                "4–5 week lead time"
              ]
            }
          ]}
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="quality" data-section="quality">
        <FeatureCardTwelve
          title="Quality Controlled"
          description="Built under control. Every step from materials sourcing to final calibration follows verified manufacturing standards."
          features={[
            {
              id: "materials",              label: "Materials",              title: "Premium Component Selection",              items: ["Tolerance spec sourcing", "Supplier audits", "Batch testing", "Full traceability"]
            },
            {
              id: "machining",              label: "Machining",              title: "Precision Manufacturing",              items: ["CNC ±0.05mm tolerance", "Real-time verification", "100% cosmetic inspection", "Quality assurance"]
            },
            {
              id: "assembly",              label: "Assembly",              title: "Controlled Environment",              items: ["Damping placement verified", "Acoustic integrity tested", "Seam verification", "QC checklist"]
            },
            {
              id: "calibration",              label: "Calibration",              title: "Anechoic Chamber Testing",              items: ["Response measurement", "DSP profile loading", "Certified verification", "Pre-shipment check"]
            }
          ]}
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=800&q=80"
          imageAlt="BASE laboratory testing environment"
          logoText="BASE"
          copyrightText="© 2025 BASE Audio Systems. All rights reserved."
          columns={[
            {
              title: "Products",              items: [
                { label: "BASE One", href: "/systems" },
                { label: "BASE Two", href: "/systems" },
                { label: "BASE Studio", href: "/systems" },
                { label: "Configurator", href: "/build" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Measurement Reports", href: "/performance" },
                { label: "Quick Start", href: "/support" },
                { label: "Field Tests", href: "/field-tests" },
                { label: "Technical Specs", href: "/performance" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "/about" },
                { label: "Support", href: "/support" },
                { label: "Contact", href: "/contact" },
                { label: "Careers", href: "/careers" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}