
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 ContactUs({ params }: HowItWorksPageProps) {
  const { locale } = await params;

  return (
      <>
        {/* Custom CSS for this page */}
        <link rel="stylesheet" href="/assets/css/contact.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> Contact Us</h1>
                            <p>We’re here to help — anytime you need us.</p>
                        </div>
                    </div>
                    <div className="col-12 col-md-5 col-lg-4 align-self-end">
                        <div className="inner-hero-img text-center pt-3">
                            <img src="../assets/image/contact-us.svg" alt="contact-us" />
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {/* <!-- end  --> */}
        <section className="contact-wrapper py-60">
            <div className="container">
                <div className="row">
                    <div className="col-12">
                        <div className="heading-box">
                            <h2>We're always here to assist.</h2>
                            <p>Have a question, need support, or just want to get in touch? Our team is always ready to assist you. Whether you're a freelancer or a client, we value your experience and are committed to resolving your queries quickly and professionally.</p>
                        </div>
                    </div>
                    <div className="col-sm-12 col-md-6 col-lg-5">
                        <div className="">
                            <div className="contact-card">
                                <div className="contact-text">
                                    <div className="contact-label">For General Queries/Support</div>
                                    <div className="contact-detail">support@smile24.com</div>
                                </div>
                                <a href="mailto:support@smile24.com" className="download-arrow stretched-link">
                                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M24.0505 31.3659C23.7339 31.3659 23.4172 31.2492 23.1672 30.9992C22.6839 30.5159 22.6839 29.7159 23.1672 29.2326L32.4005 19.9992L23.1672 10.7659C22.6839 10.2826 22.6839 9.48255 23.1672 8.99922C23.6505 8.51589 24.4505 8.51589 24.9339 8.99922L35.0505 19.1159C35.5339 19.5992 35.5339 20.3992 35.0505 20.8826L24.9339 30.9992C24.6839 31.2492 24.3672 31.3659 24.0505 31.3659Z" fill="#EF7310" stroke="#EF7310" stroke-width="0.5"/>
                                        <path d="M33.884 21.25H5.83398C5.15065 21.25 4.58398 20.6833 4.58398 20C4.58398 19.3167 5.15065 18.75 5.83398 18.75H33.884C34.5673 18.75 35.134 19.3167 35.134 20C35.134 20.6833 34.5673 21.25 33.884 21.25Z" fill="#EF7310" stroke="#EF7310" stroke-width="0.5"/>
                                    </svg>
                                </a>
                            </div>
                            <div className="contact-card">
                                <div className="contact-text">
                                    <div className="contact-label">For Business/Partnership Inquiries:</div>
                                    <div className="contact-detail">business@smile24.com</div>
                                </div>
                                <a href="mailto:business@smile24.com" className="download-arrow stretched-link">
                                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M24.0505 31.3659C23.7339 31.3659 23.4172 31.2492 23.1672 30.9992C22.6839 30.5159 22.6839 29.7159 23.1672 29.2326L32.4005 19.9992L23.1672 10.7659C22.6839 10.2826 22.6839 9.48255 23.1672 8.99922C23.6505 8.51589 24.4505 8.51589 24.9339 8.99922L35.0505 19.1159C35.5339 19.5992 35.5339 20.3992 35.0505 20.8826L24.9339 30.9992C24.6839 31.2492 24.3672 31.3659 24.0505 31.3659Z" fill="#EF7310" stroke="#EF7310" stroke-width="0.5"/>
                                        <path d="M33.884 21.25H5.83398C5.15065 21.25 4.58398 20.6833 4.58398 20C4.58398 19.3167 5.15065 18.75 5.83398 18.75H33.884C34.5673 18.75 35.134 19.3167 35.134 20C35.134 20.6833 34.5673 21.25 33.884 21.25Z" fill="#EF7310" stroke="#EF7310" stroke-width="0.5"/>
                                    </svg>
                                </a>
                            </div>
                            <div className="contact-card">
                                <div className="contact-text">
                                    <div className="contact-label">For Customer Support</div>
                                    <div className="contact-detail">+32 23254 35  23423  </div>
                                </div>
                                <a href="tel:+32 23254 35  23423  " className="download-arrow stretched-link">
                                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M24.0505 31.3659C23.7339 31.3659 23.4172 31.2492 23.1672 30.9992C22.6839 30.5159 22.6839 29.7159 23.1672 29.2326L32.4005 19.9992L23.1672 10.7659C22.6839 10.2826 22.6839 9.48255 23.1672 8.99922C23.6505 8.51589 24.4505 8.51589 24.9339 8.99922L35.0505 19.1159C35.5339 19.5992 35.5339 20.3992 35.0505 20.8826L24.9339 30.9992C24.6839 31.2492 24.3672 31.3659 24.0505 31.3659Z" fill="#EF7310" stroke="#EF7310" stroke-width="0.5"/>
                                        <path d="M33.884 21.25H5.83398C5.15065 21.25 4.58398 20.6833 4.58398 20C4.58398 19.3167 5.15065 18.75 5.83398 18.75H33.884C34.5673 18.75 35.134 19.3167 35.134 20C35.134 20.6833 34.5673 21.25 33.884 21.25Z" fill="#EF7310" stroke="#EF7310" stroke-width="0.5"/>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div className="col-sm-12 col-md-6 col-lg-7">
                        <div className="contact-location">
                            <div className="contact-map">
                                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2701.8329028041794!2d8.537194576689535!3d47.37617970386029!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47900a062ef36881%3A0xba2862db8cf7a41!2sBahnhofstrasse%20100%2C%208001%20Z%C3%BCrich%2C%20Switzerland!5e0!3m2!1sen!2sin!4v1751281564242!5m2!1sen!2sin" width="100%" height="312" loading="lazy"></iframe>
                            </div>
                            <div className="contact-map-detail">
                                <div className="contact-d-top">
                                    <label>Our Location</label>
                                    <div className="">Smile24 Switzerland Office</div>
                                </div>
                                <div className="contact-d-bottom">
                                    Bahnhofstrasse 100 <br />8001 Zürich <br />Canton of Zürich <br />Switzerland
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

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