"use client";

import { ThemeProvider } from "@/components/theme-provider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import ContactForm from '@/components/form/ContactForm';
import { Home, Phone, Mail, User, Shield, Sparkles } from "lucide-react";

export default function ContactPage() {
  const companyDetails = [
    { label: "Physical Address", value: "123 Main St, Anytown, CA 90210", icon: Home },
    { label: "Postal Address", value: "PO Box 123, Anytown, CA 90210", icon: Home },
    { label: "Phone", value: "+1 (555) 123-4567", icon: Phone },
    { label: "Email", value: "info@example.com", icon: Mail },
    { label: "Directors", value: "John Doe, Jane Smith", icon: User },
    { label: "KRA PIN", value: "A000000000Z", icon: Shield },
    { label: "Registration Number", value: "CN202300001", icon: Shield }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <NavbarStyleFullscreen
        navItems={[
          { name: "Home", id: "/" },
          { name: "Contact", id: "/contact" }
        ]}
        brandName="YourBrand"
      />

      <div id="contact-hero" data-section="contact-hero">
        <HeroBillboardDashboard
          title="Get in Touch"
          description="We'd love to hear from you. Reach out to us through the details below or fill out the contact form."
          background={{ variant: 'radial-gradient' }}
          dashboard={{
            title: "Contact Information",            stats: [
              { title: "Reach Us", description: "Anytime", values: [100, 200, 300] }
            ],
            logoIcon: Sparkles,
            sidebarItems: [],
            buttons: [],
            listItems: [],
            imageSrc: "https://r2.webild.com/assets/contact-us-hero-image.webp?_wi=1"
          }}
        />
      </div>

      <div id="contact-content" data-section="contact-content" className="relative z-10 mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-12 md:grid-cols-2">
          {/* Left Side: Contact Detail Cards */}
          <div className="space-y-8">
            <h2 className="text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">Our Details</h2>
            {companyDetails.map((detail, index) => (
              <div key={index} className="flex items-start space-x-4 rounded-xl bg-card p-6 shadow-lg border border-border-color">
                <detail.icon className="h-6 w-6 text-yellow-500 flex-shrink-0" />
                <div>
                  <h3 className="text-xl font-semibold text-foreground">{detail.label}</h3>
                  <p className="mt-1 text-muted-foreground">{detail.value}</p>
                </div>
              </div>
            ))}
          </div>

          {/* Right Side: Contact Form */}
          <div>
            <ContactForm
              title="Send us a message"
              description="Fill out the form below and we'll get back to you as soon as possible. Due to current component limitations, only an email field is available."
              tag="Inquiry"
              tagIcon={Sparkles}
              inputPlaceholder="Your Email Address"
              buttonText="Submit Inquiry"
              onSubmit={(email) => console.log("Form Submitted (Email only):", email)}
              className="bg-card p-8 rounded-xl shadow-lg border border-border-color"
            />
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}
