"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Globe, TrendingUp, Zap } from "lucide-react";

export default function LearnPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Features", id: "features" },
    { name: "Learn", id: "learn" },
    { name: "Pricing", id: "pricing" },
    { name: "Contact", id: "contact" },
  ];

  const footerColumns = [
    {
      title: "Product",      items: [
        { label: "Features", href: "#features" },
        { label: "Pricing", href: "/pricing" },
        { label: "Languages", href: "#vocabulary-system" },
        { label: "Dashboard", href: "/learn" },
      ],
    },
    {
      title: "Learning",      items: [
        { label: "How It Works", href: "#learning-engine" },
        { label: "Blog", href: "/blog" },
        { label: "Resources", href: "#" },
        { label: "Support", href: "/contact" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "/about" },
        { label: "Career", href: "#" },
        { label: "Contact", href: "/contact" },
        { label: "Partners", href: "#" },
      ],
    },
    {
      title: "Legal",      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Cookie Policy", href: "#" },
        { label: "GDPR", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="largeSizeMediumTitles"
      background="none"
      cardStyle="subtle-shadow"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="WordMaster" navItems={navItems} />
      </div>

      <div id="learning-languages" data-section="learning-languages">
        <FeatureCardThree
          title="Start Your Language Learning Journey"
          description="Choose from our comprehensive library of languages. Each language includes a complete vocabulary database organized by proficiency level, from A1 beginner to C1 advanced."
          tag="Choose Your Path"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[{ text: "Browse All Features", href: "/" }]}
          buttonAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: "1",              title: "Instant Web Translation",              description: "Translate any webpage dynamically while preserving layout and structure. No code or UI elements are translated—only the content you need.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/a-web-browser-showing-dynamic-text-trans-1773938107281-409499c5.png?_wi=2",              imageAlt: "Web translation interface"},
            {
              id: "2",              title: "AI-Powered Grammar Tutor",              description: "Get real-time feedback on your writing. Our AI tutor corrects mistakes and explains grammar rules tailored to your proficiency level.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/an-ai-tutoring-interface-showing-grammar-1773938107629-60172540.png?_wi=2",              imageAlt: "AI tutoring interface"},
            {
              id: "3",              title: "Spaced Repetition System",              description: "Our scientifically-proven SM-2 algorithm optimizes your study schedule. Review at the perfect time to maximize long-term retention.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/a-visual-representation-of-the-sm-2-spac-1773938109525-69b6d965.png?_wi=2",              imageAlt: "Spaced repetition algorithm"},
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          ariaLabel="Learning features and language paths"
        />
      </div>

      <div id="available-languages" data-section="available-languages">
        <ProductCardThree
          title="Available Languages"
          description="Learn from expertly curated vocabulary databases. Each language offers complete CEFR level coverage from A1 to C1."
          tag="7 Languages Ready"
          tagIcon={Globe}
          tagAnimation="slide-up"
          buttons={[{ text: "Back to Home", href: "/" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            {
              id: "english",              name: "English Vocabulary",              price: "A1 - C1 Levels",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/english-language-flag-and-vocabulary-dat-1773938107588-b8884c16.png?_wi=2",              imageAlt: "English language"},
            {
              id: "german",              name: "German Vocabulary",              price: "A1 - C1 Levels",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/german-language-flag-and-vocabulary-data-1773938108173-95710bcb.png?_wi=2",              imageAlt: "German language"},
            {
              id: "spanish",              name: "Spanish Vocabulary",              price: "A1 - C1 Levels",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/spanish-language-flag-and-vocabulary-dat-1773938107133-06722b8e.png?_wi=2",              imageAlt: "Spanish language"},
            {
              id: "chinese",              name: "Chinese Vocabulary",              price: "A1 - C1 Levels",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/chinese-language-flag-and-vocabulary-dat-1773938106926-50ff7548.png?_wi=2",              imageAlt: "Chinese language"},
            {
              id: "arabic",              name: "Arabic Vocabulary",              price: "A1 - C1 Levels",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/arabic-language-flag-and-vocabulary-data-1773938107654-9f4cce72.png?_wi=2",              imageAlt: "Arabic language"},
            {
              id: "russian",              name: "Russian Vocabulary",              price: "A1 - C1 Levels",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/russian-language-flag-and-vocabulary-dat-1773938108218-13f96432.png?_wi=2",              imageAlt: "Russian language"},
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="scale-rotate"
          ariaLabel="Available languages and vocabulary levels"
        />
      </div>

      <div id="learning-progress" data-section="learning-progress">
        <MetricCardSeven
          title="Track Your Progress"
          description="Real-time analytics show your learning velocity, accuracy improvements, and mastery milestones across all languages."
          tag="Personalized Analytics"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          buttons={[{ text: "View Features", href: "#learning-languages" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
          metrics={[
            {
              id: "words-learned",              value: "500+",              title: "Words Available",              items: ["Per Language", "All Levels", "CEFR Certified"],
            },
            {
              id: "daily-goal",              value: "15",              title: "Minutes Per Day",              items: ["Flexible", "Customizable", "Trackable"],
            },
            {
              id: "success-rate",              value: "92%",              title: "User Success Rate",              items: ["Proven", "Effective", "Scientific"],
            },
            {
              id: "retention",              value: "87%",              title: "Long-term Retention",              items: ["SM-2 Optimized", "Evidence-based", "Reliable"],
            },
          ]}
          animationType="depth-3d"
          ariaLabel="Learning progress metrics and analytics"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/a-diverse-group-of-learners-collaboratin-1773938107383-699a2705.png?_wi=2"
          imageAlt="WordMaster community learning"
          logoText="WordMaster"
          copyrightText="© 2025 WordMaster | AI Language Learning Platform"
          columns={footerColumns}
          ariaLabel="WordMaster footer navigation and information"
        />
      </div>
    </ThemeProvider>
  );
}