"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Link from "next/link";
import { CheckCircle, HelpCircle, Zap } from "lucide-react";

export default function HomePage() {
  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="StoreAudit"
          description="Check If Your Store Is Losing Sales in 60 Seconds. Enter your store URL to receive a detailed optimization checklist covering SEO, AI visibility, performance, and conversion factors."
          buttons={[
            { text: "Run Store Scan", href: "/scan" },
            { text: "View Sample Report", href: "/" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          mediaAnimation="slide-up"
          frameStyle="card"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyFour
          title="Comprehensive Audit Coverage"
          description="Our automated scanner analyzes four critical dimensions of your e-commerce store, identifying issues that directly impact your bottom line."
          tag="Four Core Audit Categories"
          tagIcon={CheckCircle}
          features={[
            {
              id: "technical-seo",
              title: "Technical SEO Checks",
              author: "Search Visibility",
              description: "Verify title tags, meta descriptions, robots.txt, sitemap.xml, SSL certificates, canonical tags, and mobile responsiveness to ensure search engines can properly crawl and index your store.",
              tags: ["Title Tags", "Meta Descriptions", "Mobile Optimization"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B25Hs1BWiFe17Y6WtCSxZeJVX7/a-modern-technical-seo-audit-checklist-i-1773674306370-9558d1f4.png",
              imageAlt: "Technical SEO audit interface",
            },
            {
              id: "ai-discovery",
              title: "AI Discovery Checks",
              author: "AI Visibility",
              description: "Evaluate organization schema, product schema, breadcrumb schema, structured JSON-LD data, and Open Graph tags to ensure AI systems and modern search engines can understand your products.",
              tags: ["Schema Markup", "Structured Data", "Open Graph"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B25Hs1BWiFe17Y6WtCSxZeJVX7/an-ai-discovery-audit-interface-showing--1773674307247-1f30c9b3.png",
              imageAlt: "AI discovery audit interface",
            },
            {
              id: "performance",
              title: "Performance Checks",
              author: "Speed & Vitals",
              description: "Analyze page load speed, image optimization, lazy loading implementation, and Core Web Vitals readiness to identify performance bottlenecks affecting user experience and rankings.",
              tags: ["Page Speed", "Image Compression", "Core Web Vitals"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B25Hs1BWiFe17Y6WtCSxZeJVX7/a-performance-audit-dashboard-displaying-1773674307104-659713b6.png",
              imageAlt: "Performance audit interface",
            },
            {
              id: "conversion",
              title: "Conversion Optimization",
              author: "Trust & Sales",
              description: "Check for clear call-to-action buttons, product reviews, trust badges, shipping transparency, and return policy visibility to optimize for conversions and customer confidence.",
              tags: ["CTA Clarity", "Trust Signals", "Reviews"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B25Hs1BWiFe17Y6WtCSxZeJVX7/a-conversion-optimization-audit-interfac-1773674307117-25c48b41.png",
              imageAlt: "Conversion optimization audit interface",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTen
          title="Why Audits Matter"
          description="Key metrics showing the impact of e-commerce optimization on business outcomes."
          metrics={[
            {
              id: "avg-score",
              title: "Average Store Score",
              subtitle: "across all audited stores",
              category: "Baseline",
              value: "64/100",
            },
            {
              id: "seo-impact",
              title: "SEO Issues Fixed",
              subtitle: "leading to improved rankings",
              category: "Impact",
              value: "+47%",
            },
            {
              id: "conversion-lift",
              title: "Average Conversion Lift",
              subtitle: "after implementing recommendations",
              category: "Revenue",
              value: "+23%",
            },
            {
              id: "page-speed",
              title: "Avg Page Speed Improvement",
              subtitle: "in audited stores",
              category: "Performance",
              value: "2.8s",
            },
          ]}
          animationType="slide-up"
          textboxLayout="centered"
          useInvertedBackground={false}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          names={["TechCorp", "EcommercePro", "RetailHub", "ShopOptimize", "SalesBridge", "StoreFlow", "CatalogMax", "VendorEdge"]}
          title="Trusted by Leading E-commerce Brands"
          description="Store owners and agencies rely on StoreAudit to identify and fix critical optimization issues."
          textboxLayout="default"
          useInvertedBackground={false}
          showCard={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Common Questions"
          description="Get answers about how StoreAudit works and what to expect from your store optimization report."
          tag="FAQ"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "q1",
              title: "How long does the scan take?",
              content: "The automated scan typically completes in 5-10 seconds. We analyze your website structure, SEO signals, performance metrics, and conversion elements in real-time to generate a comprehensive report.",
            },
            {
              id: "q2",
              title: "What does the checklist include?",
              content: "Our checklist covers 30+ optimization factors across four categories: Technical SEO (title tags, meta descriptions, SSL, sitemaps), AI Discovery (schema markup, structured data), Performance (page speed, Core Web Vitals), and Conversion Optimization (CTAs, trust signals, reviews).",
            },
            {
              id: "q3",
              title: "Do you store my data?",
              content: "Yes, we securely store your scan history and results so you can track improvements over time. Your email is used only to send reports and optimization recommendations. We never share your data with third parties.",
            },
            {
              id: "q4",
              title: "Can I get recommendations for fixes?",
              content: "Absolutely. Each failed check includes a detailed explanation of the issue, its impact on sales/SEO, and specific recommended actions to fix it. Our recommendations are prioritized by impact.",
            },
            {
              id: "q5",
              title: "Is this tool free?",
              content: "Yes, the store audit scan is completely free. Just enter your store URL and email to get your full optimization report. We also offer premium features for ongoing monitoring and AI-powered insights.",
            },
            {
              id: "q6",
              title: "What if my score is low?",
              content: "A low score doesn't mean your store is failing—it means there are clear opportunities for improvement. Our checklist prioritizes the highest-impact fixes first. Most stores see noticeable improvements within 1-2 weeks of implementing recommendations.",
            },
          ]}
          mediaAnimation="slide-up"
          mediaPosition="right"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B25Hs1BWiFe17Y6WtCSxZeJVX7/a-friendly-modern-illustration-of-an-faq-1773674307565-d772722c.png"
          imageAlt="FAQ illustration"
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactCTA
          tag="Get Started Free"
          tagIcon={Zap}
          title="Start Your Store Optimization Audit Today"
          description="Get a complete audit of your e-commerce store in 60 seconds. Discover critical issues affecting your sales and SEO visibility."
          buttons={[
            { text: "Run Free Audit", href: "/scan" },
          ]}
          background={{ variant: "radial-gradient" }}
          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>
  );
}