"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { HelpCircle, Mail, Phone, MapPin } from "lucide-react";

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="grid"
      cardStyle="outline"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="BHEH"
          navItems={[
            { name: "Solutions", id: "pricing" },
            { name: "Training", id: "training" },
            { name: "Community", id: "community" },
            { name: "Resources", id: "resources" },
          ]}
          button={{
            text: "Explore Solutions",
            href: "/services",
          }}
          animateOnLoad={true}
        />
      </div>

      <div id="contact-header" data-section="contact-header" className="py-16 md:py-24">
        <div className="mx-auto px-4 md:px-6 max-w-4xl">
          <div className="text-center">
            <h1 className="text-4xl md:text-5xl font-extrabold mb-6">
              Get in Touch with BHEH
            </h1>
            <p className="text-lg md:text-xl text-foreground/80 mb-8">
              Have questions about our penetration testing services, security training, or elite membership? 
              Our team is ready to help you secure your organization or advance your security career.
            </p>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
              <div className="bg-card rounded-2xl p-6 border border-foreground/10">
                <Mail className="w-8 h-8 mx-auto mb-4" />
                <h3 className="font-bold mb-2">Email</h3>
                <p className="text-foreground/70">contact@bheh.io</p>
              </div>
              <div className="bg-card rounded-2xl p-6 border border-foreground/10">
                <Phone className="w-8 h-8 mx-auto mb-4" />
                <h3 className="font-bold mb-2">Phone</h3>
                <p className="text-foreground/70">+1 (555) 847-2847</p>
              </div>
              <div className="bg-card rounded-2xl p-6 border border-foreground/10">
                <MapPin className="w-8 h-8 mx-auto mb-4" />
                <h3 className="font-bold mb-2">Location</h3>
                <p className="text-foreground/70">San Francisco, CA</p>
              </div>
            </div>

            <div className="mt-12 bg-card rounded-2xl p-8 border border-foreground/10">
              <h2 className="text-2xl font-bold mb-6">Contact Form</h2>
              <form className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-semibold mb-2">Full Name</label>
                    <input 
                      type="text" 
                      placeholder="Your name" 
                      className="w-full px-4 py-3 bg-background border border-foreground/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold mb-2">Email Address</label>
                    <input 
                      type="email" 
                      placeholder="your@email.com" 
                      className="w-full px-4 py-3 bg-background border border-foreground/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
                    />
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-semibold mb-2">Subject</label>
                  <input 
                    type="text" 
                    placeholder="Penetration Testing Inquiry" 
                    className="w-full px-4 py-3 bg-background border border-foreground/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold mb-2">Service Interest</label>
                  <select className="w-full px-4 py-3 bg-background border border-foreground/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta">
                    <option>Select a service...</option>
                    <option>Penetration Testing</option>
                    <option>Vulnerability Assessment</option>
                    <option>Red Team Services</option>
                    <option>Security Training</option>
                    <option>Elite Membership</option>
                    <option>Other</option>
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-semibold mb-2">Message</label>
                  <textarea 
                    placeholder="Tell us about your security needs..." 
                    rows={6}
                    className="w-full px-4 py-3 bg-background border border-foreground/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
                  ></textarea>
                </div>

                <button 
                  type="submit"
                  className="w-full px-6 py-3 bg-primary-cta text-primary-cta-text font-semibold rounded-lg hover:opacity-90 transition-opacity"
                >
                  Send Message
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>

      <div id="contact-faq" data-section="contact-faq">
        <FaqDouble
          title="Contact & Support FAQ"
          description="Common questions about reaching our team, response times, and engagement procedures"
          tag="Support"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground={false}
          faqs={[
            {
              id: "1",
              title: "What is the typical response time for inquiries?",
              content:
                "We aim to respond to all inquiries within 24 business hours. Sales inquiries typically get responses within 4-8 hours during business days (Monday-Friday, 9am-6pm PST). Urgent security matters may receive faster priority response.",
            },
            {
              id: "2",
              title: "How do I schedule a free initial consultation?",
              content:
                "Simply fill out the contact form above or email contact@bheh.io with your company name, organization size, and security goals. Our team will schedule a no-obligation 30-minute consultation with one of our security experts to discuss your needs and recommend appropriate services.",
            },
            {
              id: "3",
              title: "Do you offer discounts for large organizations or retainers?",
              content:
                "Yes. We provide custom pricing for enterprise engagements, multi-year retainers, and volume training programs. Contact our sales team to discuss volume pricing. Educational institutions and non-profits also qualify for special considerations.",
            },
            {
              id: "4",
              title: "What should I include in my penetration testing request?",
              content:
                "Include: your organization size, number of employees, systems to test (network, web apps, physical), any compliance requirements (PCI-DSS, HIPAA, etc.), preferred testing dates, and your security maturity level. This helps us provide accurate scoping and pricing.",
            },
            {
              id: "5",
              title: "Are you available for emergency security incident support?",
              content:
                "We offer emergency incident response support for security breaches and active threats. Retainer clients get priority access. Contact us immediately at contact@bheh.io or call +1 (555) 847-2847 for urgent security matters. We can often dispatch a team within 4-6 hours.",
            },
            {
              id: "6",
              title: "Do you sign NDAs and comply with confidentiality requirements?",
              content:
                "Absolutely. We understand data sensitivity in security testing. We routinely sign NDAs and implement strict confidentiality protocols. All findings and reports are treated as highly confidential. We comply with industry standards for secure data handling and destruction.",
            },
          ]}
          faqsAnimation="slide-up"
          animationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Solutions",
              items: [
                { label: "Penetration Testing", href: "/services" },
                { label: "Vulnerability Assessment", href: "/services" },
                { label: "Red Team Services", href: "/services" },
                { label: "Security Consulting", href: "/services" },
              ],
            },
            {
              title: "Training & Community",
              items: [
                { label: "Security Courses", href: "/training" },
                { label: "Elite Membership", href: "/" },
                { label: "Community Forum", href: "#" },
                { label: "Intelligence Briefings", href: "#" },
              ],
            },
            {
              title: "Company",
              items: [
                { label: "About BHEH", href: "#" },
                { label: "Blog & Research", href: "#" },
                { label: "Contact", href: "/contact" },
                { label: "Privacy Policy", href: "#" },
              ],
            },
          ]}
          copyrightText="© 2025 Black Hat Ethical Hacking. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}