"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Send } from "lucide-react";

const ContactPage = () => {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "/services" },
    { name: "Portfolio", id: "/portfolio" },
    { name: "About", id: "/about" },
    { name: "Contact", id: "/contact" },
  ];

  const footerColumns = [
    {
      title: "Product",      items: [
        { label: "Services", href: "services" },
        { label: "Portfolio", href: "portfolio" },
        { label: "Pricing", href: "#" },
        { label: "Security", href: "#" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "about" },
        { label: "Our Team", href: "about" },
        { label: "Blog", href: "#" },
        { label: "Contact", href: "contact" },
      ],
    },
    {
      title: "Connect",      items: [
        { label: "LinkedIn", href: "https://linkedin.com" },
        { label: "Twitter", href: "https://twitter.com" },
        { label: "GitHub", href: "https://github.com" },
        { label: "Facebook", href: "https://facebook.com" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="Kraftcode" navItems={navItems} />
      </div>

      {/* Contact Section */}
      <div id="contact" data-section="contact">
        <div className="py-12 md:py-20 px-4">
          <div className="max-w-6xl mx-auto">
            <div className="grid md:grid-cols-2 gap-12 items-center">
              <div>
                <div className="flex items-center gap-2 mb-4">
                  <Send className="w-5 h-5" />
                  <span className="text-sm font-medium">Get In Touch</span>
                </div>
                <h2 className="text-3xl md:text-5xl font-bold mb-4">Ready to Transform Your Business?</h2>
                <p className="text-lg text-gray-600 mb-8">Let's bring your vision to life with cutting-edge web and mobile solutions tailored to your goals. Partner with us to unlock your digital potential.</p>
                <form className="space-y-4">
                  <input type="email" placeholder="Enter your email" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" />
                  <button type="submit" className="w-full bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">Reach Out Now</button>
                  <p className="text-sm text-gray-500">We respect your privacy. Unsubscribe at any time.</p>
                </form>
              </div>
              <div>
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/modern-tech-company-office-environment-s-1772536829959-06972360.png" alt="Contact us - modern office environment" className="w-full rounded-lg" />
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* FAQ Section */}
      <div id="faq" data-section="faq">
        <div className="py-12 md:py-20 px-4 bg-gray-50">
          <div className="max-w-6xl mx-auto">
            <div className="grid md:grid-cols-2 gap-12">
              <div>
                <h2 className="text-3xl md:text-4xl font-bold mb-4">Frequently Asked Questions</h2>
                <p className="text-lg text-gray-600">Find answers to common questions about our services, process, and how we can help transform your business.</p>
              </div>
              <div className="space-y-6">
                {[
                  {
                    title: "What services does Kraftcode offer?",                    content: "We provide comprehensive digital solutions including website development, iOS and Android app development, custom development, performance optimization, and security implementation. Our services are tailored to meet your unique business requirements."
                  },
                  {
                    title: "How long does a typical project take?",                    content: "Project timelines vary based on complexity and scope. Most web projects take 2-4 months, while mobile apps typically require 3-6 months. We provide detailed timelines and milestones during the planning phase."
                  },
                  {
                    title: "What is your development process?",                    content: "We follow a structured approach: Discovery & Planning → Design & Prototyping → Development → Testing → Deployment → Support. We maintain regular communication and provide progress updates throughout the project."
                  },
                  {
                    title: "Do you offer post-launch support?",                    content: "Yes, we provide comprehensive post-launch support including maintenance, updates, bug fixes, and performance monitoring. We offer various support packages tailored to your needs."
                  },
                  {
                    title: "How do you ensure quality and security?",                    content: "Quality is built into our process through rigorous testing, code reviews, and quality assurance protocols. Security is implemented from the ground up, with compliance to industry standards and best practices."
                  },
                  {
                    title: "Can you work with our existing team?",                    content: "Absolutely. We're experienced in collaborating with in-house teams, agencies, and external partners. We can integrate seamlessly into your existing workflow and development processes."
                  }
                ].map((faq, index) => (
                  <details key={index} className="border-b border-gray-200 pb-4">
                    <summary className="cursor-pointer font-semibold text-gray-900 hover:text-blue-600">{faq.title}</summary>
                    <p className="mt-2 text-gray-600">{faq.content}</p>
                  </details>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2025 Kraftcode Infosol. All rights reserved."
          ariaLabel="Footer section"
        />
      </div>
    </ThemeProvider>
  );
};

export default ContactPage;