"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Mail, HelpCircle } from "lucide-react";

export default function ContactPage() {
  const navItems = [
    { name: "Features", id: "features" },
    { name: "Pricing", id: "pricing" },
    { name: "About", id: "about" },
    { name: "Blog", id: "blog" },
    { name: "Contact", id: "contact" },
  ];

  const footerColumns = [
    {
      title: "Product",      items: [
        { label: "Features", href: "#features" },
        { label: "Pricing", href: "#pricing" },
        { label: "Security", href: "#" },
        { label: "Status", href: "#" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "/about" },
        { label: "Blog", href: "#" },
        { label: "Careers", href: "#" },
        { label: "Press", href: "#" },
      ],
    },
    {
      title: "Support",      items: [
        { label: "Help Center", href: "#" },
        { label: "Contact", href: "#contact" },
        { label: "Terms", href: "#" },
        { label: "Privacy", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="small"
      sizing="mediumLarge"
      background="fluid"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="GradeOptim"
          bottomLeftText="Optimize Your Grades"
          bottomRightText="hello@gradeoptim.com"
        />
      </div>

      <div id="contact-form" data-section="contact-form">
        <ContactCenter
          tag="Get In Touch"
          tagIcon={Mail}
          title="We're Here to Help"
          description="Have questions about GradeOptim? Want to learn more about how we can help optimize your academic performance? Subscribe to our newsletter or reach out directly. We respond to all inquiries within 24 hours."
          background={{ variant: "downward-rays-static" }}
          useInvertedBackground={false}
          inputPlaceholder="your.email@school.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime."
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about GradeOptim and how it can help optimize your academic performance."
          textPosition="left"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "Is GradeOptim free to use?",              content:
                "Yes! GradeOptim offers a free Starter plan with basic features including GPA calculation and grade tracking. Our Premium plan at $8.99/month unlocks advanced features like predictive forecasting, AI recommendations, and risk scoring. Try Premium free for 14 days."},
            {
              id: "2",              title: "How accurate is the GPA forecasting?",              content:
                "Our GPA forecasting uses machine learning models trained on millions of academic records, achieving 96% accuracy on average. Accuracy improves as you input more grades. The system accounts for your specific grading scale, assignment weights, and historical grade patterns."},
            {
              id: "3",              title: "Can I use GradeOptim for multiple classes?",              content:
                "Absolutely! Premium users can create unlimited custom grading scales for different classes and teachers. You can track all your classes simultaneously and get predictions for your overall GPA and individual course performance."},
            {
              id: "4",              title: "How does the risk scoring system work?",              content:
                "The risk scoring system analyzes your current grades, grade trends, and target GPA to identify which classes are at risk of pulling down your overall GPA. It uses a Low (green), Medium (yellow), and High (red) system to help you prioritize your effort."},
            {
              id: "5",              title: "What is the AI recommendation engine?",              content:
                "The AI recommendation engine analyzes your performance across all classes and recommends optimal time allocation for studying. It identifies which subjects need more focus based on your current performance and goals, helping you study smarter, not harder."},
            {
              id: "6",              title: "Can parents monitor their student's progress?",              content:
                "Yes! Our Family Plan ($24.99/month for up to 4 students) includes a parental monitoring dashboard where parents can view student progress reports, academic goals, and performance trends. It's a great way to stay engaged without being intrusive."},
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APzrAl8FUR6Sq885GZcTzaJsFb/a-subtle-modern-educational-background-i-1772509353273-4ef8c2ce.png"
          imageAlt="Academic Success Background"
          logoText="GradeOptim"
          copyrightText="© 2025 GradeOptim. All rights reserved."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}