import { Metadata } from 'next';
import Footer from '@/components/Footer';

interface HowItWorksPageProps {
  params: Promise<{
    locale: string;
  }>;
}

export async function generateMetadata({ params }: HowItWorksPageProps): Promise<Metadata> {
  const { locale } = await params;
  return {
    title: 'How It Works - Smile24',
    description: 'Learn how Smile24 works for both clients and freelancers. Get the best talent in just a few simple steps.',
    keywords: 'how it works, freelancer platform, hiring process, project posting',
  };
}

export default async function FAQs({ params }: HowItWorksPageProps) {
  const { locale } = await params;

  return (
      <>
        {/* Custom CSS for this page */}
        <link rel="stylesheet" href="/assets/css/faq.css" />

        {/* <!-- hero section  --> */}
        <section className="inner-hero-wrapper">
            <div className="container">
                <div className="row">
                    <div className="col-12 col-md-7 col-lg-8 align-self-center">
                        <div className="hero-content">
                            <h1> Frequently Asked Questions </h1>
                            <p>Find quick answers to common questions about using Smile24.com.</p>
                        </div>
                    </div>
                    <div className="col-12 col-md-5 col-lg-4 align-self-end">
                        <div className="inner-hero-img text-center pt-2">
                            <img src="../assets/image/faq-img.svg" alt="faq-img" />
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {/* <!-- end  --> */}

        {/* find-project */}
        <section className="faq-wrapper py-60">
            <div className="container">
                <div className="row">
                    <div className="col-12">     
                        <div className="faq-outer">
                            <div className="accordion" id="faqAccordion">
                                <div className="accordion-item">
                                    <button className="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#q1" aria-expanded="true">
                                        What is Smile24.com and how does it work?
                                    </button>
                                    <div id="q1" className="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                    <div className="accordion-body">
                                        Smile24.com is an online freelance marketplace that connects clients with skilled professionals across various categories like design, writing, development, and marketing. Clients post projects, and freelancers bid to get hired.
                                    </div>
                                    </div>
                                </div>

                                {/* <!-- Item 2 --> */}
                                <div className="accordion-item">
                                    <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#q2">
                                        Is it free to join Smile24.com and start using the platform?
                                    </button>
                                    <div id="q2" className="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div className="accordion-body">
                                        Yes, it is completely free to sign up and start using Smile24.com as a freelancer.
                                    </div>
                                    </div>
                                </div>

                                {/* <!-- Item 3 --> */}
                                <div className="accordion-item">
                                    <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#q3">
                                        How can I create a freelancer profile and start bidding on projects?
                                    </button>
                                    <div id="q3" className="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div className="accordion-body">
                                        You can register, complete your freelancer profile with relevant skills and experience, and start browsing projects to bid on.
                                    </div>
                                    </div>
                                </div>

                                {/* <!-- Item 4 --> */}
                                <div className="accordion-item">
                                    <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#q4">
                                        What is a category-based membership and how does it benefit freelancers?
                                    </button>
                                    <div id="q4" className="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div className="accordion-body">
                                        It allows freelancers to focus their visibility in specific categories, increasing their chances of getting hired in their areas of expertise.
                                    </div>
                                    </div>
                                </div>

                                {/* <!-- Item 5 --> */}
                                <div className="accordion-item">
                                    <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#q5">
                                        How and when do freelancers receive payments for completed work?
                                    </button>
                                    <div id="q5" className="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div className="accordion-body">
                                        Freelancers are paid securely once the client approves the work, through their chosen payout method.
                                    </div>
                                    </div>
                                </div>

                                {/* <!-- Item 6 --> */}
                                <div className="accordion-item">
                                    <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#q6">
                                        Can I work in more than one category as a freelancer on Smile24.com?
                                    </button>
                                    <div id="q6" className="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div className="accordion-body">
                                        Yes, freelancers can offer services in multiple categories if their profile supports those skills.
                                    </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {/* <!-- end  --> */}

        {/* Footer */}
        <Footer locale={locale} />
      </>
  );
}
