
import { Metadata } from 'next';
import Link from 'next/link';
import Image from 'next/image';
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 AboutUs({ params }: HowItWorksPageProps) {
  const { locale } = await params;

  return (
      <>
        {/* Custom CSS for this page */}
        <link rel="stylesheet" href="/assets/css/about.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> About Us</h1>
                            <p>Connecting Talent with Opportunity, One Project at a Time</p>
                        </div>
                    </div>
                    <div className="col-12 col-md-5 col-lg-4 align-self-end">
                        <div className="inner-hero-img text-center pt-1">
                            <img src="../assets/image/about-banner.svg" alt="about-banner" />
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {/* <!-- end  --> */}
        {/* <!-- project step  --> */}
        <section className="project-step-wrapper pt-120">
            <div className="container">
                <div className="row">
                    <div className="col-12">
                        <div className="about-img">
                            <img src="../assets/image/about-img.svg" alt="about-img" />
                        </div>
                        <div className="about-disc">
                            <h2>About Smile24 — Where Freelancers Thrive and Clients Succeed</h2>
                            <p>Smile24.com is a future-ready freelance platform designed to empower skilled professionals and help businesses get quality work done efficiently. Whether you’re a designer, developer, writer, or marketer, Smile24 provides you with the right tools to showcase your talent, win meaningful projects, and grow your freelance journey with confidence. With features like category-based memberships, unlimited bidding, secure milestone payments, and top-profile visibility, we make freelancing simpler, smarter, and more rewarding — for everyone.</p>
                        </div>

                    </div>
                </div>
            </div>
        </section>
        {/* <!-- end  --> */}
        <section className="about-process pt-120">
            <div className="container">
                <div className="row">                
                    <div className="col-md-6 col-lg-4">
                        <div className="about-con">
                            <img src="../assets/image/about-1.png" alt="about-1" />
                            <div className="about-text"> 
                                <h3>What We Do</h3>
                                <p>We connect freelancers with clients through a smart, category-based marketplace built for speed, trust, and results.</p>
                            </div>
                        </div>
                    </div>
                    <div className="col-md-6 col-lg-4">
                        <div className="about-con">
                            <img src="../assets/image/about-2.png" alt="about-2" />
                            <div className="about-text"> 
                                <h3> Why Smile24</h3>
                                <p>We offer unlimited bids, category visibility, and milestone payments to help freelancers and clients work with ease.</p>
                            </div>
                        </div>
                    </div>
                    <div className="col-md-6 col-lg-4">
                        <div className="about-con">
                            <img src="../assets/image/about-3.png" alt="about-3" />
                            <div className="about-text"> 
                                <h3> Our Mission</h3>
                                <p>To empower professionals with real opportunities and help businesses find the right talent — quickly and confidently.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section className="hiring-wrapper about py-120">
            <div className="container">
                <div className="hiring-inner">
                    <div className="content">
                        <h3>Have Questions or Need Help?</h3>
                        <p>We're here to support you. Whether you're a freelancer or a client, reach out anytime — we’re just a message away.</p>
                        <div className="button-group d-flex">
                            <a href={`/${locale}/contact-us`} className="custom-btn primary-fill">
                                Post a project
                            </a>
                        </div>
                    </div>
                    <div className="hiring-img">
                        <img src="../assets/image/help-b.svg" alt="help-b" />
                    </div>
                </div>
            </div>
        </section>

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