"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FooterCard from '@/components/sections/footer/FooterCard';
import { HelpCircle, Sparkles, Instagram, Linkedin, Twitter } from 'lucide-react';

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="large"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Alesha"
          navItems={[
            { name: "About", id: "/about" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "Services", id: "/services" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Get in Touch",
            href: "/contact"
          }}
        />
      </div>

      <div id="contact-info" data-section="contact-info">
        <MetricSplitMediaAbout
          tag="Get in Touch"
          tagIcon={Sparkles}
          title="Ready to Work Together?"
          description="Whether you're a brand seeking exceptional talent or a model ready to elevate your career, Alesha is here to make it happen. Contact us today to discuss opportunities, partnerships, or representation. Our experienced team is ready to provide personalized guidance and strategic solutions tailored to your specific needs."
          metrics={[
            { value: "24/7", title: "Client Support Available" },
            { value: "<2hrs", title: "Average Response Time" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/medium-shot-women-testing-colours_23-2150538663.jpg"
          imageAlt="Alesha agency team ready to assist clients"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Learn more about working with Alesha and our comprehensive services"
          tag="Help"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",
              title: "How do I submit my portfolio to Alesha?",
              content: "We accept submissions through our online portal at alesha.com/submissions. Please include high-quality photos showcasing your versatility, current measurements, contact information, and any relevant experience. Our talent acquisition team reviews all submissions within 2-3 weeks and will contact you if there's potential for representation."
            },
            {
              id: "2",
              title: "What are your commission rates and fee structure?",
              content: "Commission rates vary based on booking type, model experience level, and campaign scope, typically ranging from 15-20% for international campaigns and editorial work. We discuss customized rates and fee structures during representation negotiations, ensuring transparency and fair compensation for all parties."
            },
            {
              id: "3",
              title: "How often will I get bookings as a represented model?",
              content: "Booking frequency depends on model type, experience level, market demand, and seasonal trends. Our established models average 10-15 bookings monthly across various verticals. We focus on securing quality placements that align with your career goals rather than quantity alone."
            },
            {
              id: "4",
              title: "Do you represent international models and handle work visas?",
              content: "Yes, we specialize in international talent representation and maintain a global network of industry contacts. We provide comprehensive support including visa guidance, work permit assistance, cultural adaptation resources, and international project coordination for seamless global career expansion."
            },
            {
              id: "5",
              title: "What types of casting opportunities are available through Alesha?",
              content: "Our models are considered for diverse opportunities including high-fashion runway shows, editorial photo shoots, luxury brand campaigns, commercial advertising, brand ambassadorships, digital content creation, and exclusive collaborations with leading designers and publications worldwide."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/medium-shot-women-testing-colours_23-2150538663.jpg"
          imageAlt="Alesha agency consultation and client support"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          mediaPosition="right"
          animationType="smooth"
          showCard={true}
        />
      </div>

      <div id="next-steps" data-section="next-steps">
        <MetricSplitMediaAbout
          tag="Next Steps"
          tagIcon={Sparkles}
          title="Start Your Journey with Alesha"
          description="Ready to take the next step? Our team is here to guide you through the process whether you're seeking talent for your brand or looking for professional representation. We believe in building lasting relationships based on trust, transparency, and mutual success. Contact us today to begin your partnership with Alesha."
          metrics={[
            { value: "150+", title: "Successful Partnerships" },
            { value: "20+", title: "Years Industry Experience" }
          ]}
          imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-women-testing-colours_23-2150538663.jpg",
          imageAlt: "Alesha team collaboration and partnership building"
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterCard
        logoText="Alesha"
        copyrightText="© 2025 Alesha Model Agency. All rights reserved."
        socialLinks={[
          { icon: Instagram, href: "https://instagram.com/alesha-models", ariaLabel: "Instagram" },
          { icon: Linkedin, href: "https://linkedin.com/company/alesha-models", ariaLabel: "LinkedIn" },
          { icon: Twitter, href: "https://twitter.com/alesha-models", ariaLabel: "Twitter" }
        ]}
      />
    </ThemeProvider>
  );
}