"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Zap } from "lucide-react";

export default function ResultsPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Features", id: "features" },
    { name: "How It Works", id: "how-it-works" },
    { name: "Admin", id: "admin" },
  ];

  const footerColumns = [
    {
      title: "Product",
      items: [
        { label: "Free Audit Tool", href: "/" },
        { label: "How It Works", href: "/" },
        { label: "Results Dashboard", href: "/results" },
        { label: "Admin Dashboard", href: "/admin" },
      ],
    },
    {
      title: "Resources",
      items: [
        { label: "E-commerce Blog", href: "#" },
        { label: "SEO Guide", href: "#" },
        { label: "Optimization Tips", href: "#" },
        { label: "Case Studies", href: "#" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "#" },
        { label: "Contact", href: "#" },
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="fluid"
      cardStyle="outline"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          navItems={navItems}
          brandName="StoreAudit"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Your Store Optimization Report"
          description="Comprehensive analysis of your e-commerce store performance. See detailed recommendations to improve SEO, AI visibility, performance, and conversion rates."
          buttons={[
            { text: "Download Report", href: "#" },
            { text: "Run Another Audit", href: "/" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "animated-grid" }}
          mediaAnimation="slide-up"
          frameStyle="card"
        />
      </div>

      <div id="results-metrics" data-section="results-metrics">
        <MetricCardTen
          title="Your Audit Results"
          description="Detailed breakdown of your store's performance across all optimization categories."
          metrics={[
            {
              id: "overall-score",
              title: "Overall Store Score",
              subtitle: "overall optimization health",
              category: "Total Score",
              value: "72/100",
              buttons: [
                { text: "View Details", href: "#" },
              ],
            },
            {
              id: "technical-score",
              title: "Technical SEO Score",
              subtitle: "search engine crawlability",
              category: "SEO Health",
              value: "78/100",
              buttons: [
                { text: "View Issues", href: "#" },
              ],
            },
            {
              id: "ai-score",
              title: "AI Discovery Score",
              subtitle: "structured data completeness",
              category: "AI Visibility",
              value: "68/100",
              buttons: [
                { text: "View Issues", href: "#" },
              ],
            },
            {
              id: "performance-score",
              title: "Performance Score",
              subtitle: "page speed and vitals",
              category: "Speed & UX",
              value: "71/100",
              buttons: [
                { text: "View Issues", href: "#" },
              ],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="next-steps" data-section="next-steps">
        <ContactCTA
          tag="Ready to Improve"
          tagIcon={Zap}
          title="Implement Your Optimization Recommendations"
          description="Follow our prioritized action plan to fix the highest-impact issues first. Most stores see measurable improvements within 1-2 weeks."
          buttons={[
            { text: "Get Implementation Guide", href: "#" },
          ]}
          background={{ variant: "downward-rays-animated" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 StoreAudit. All rights reserved."
          bottomRightText="Built for e-commerce success"
        />
      </div>
    </ThemeProvider>
  );
}