import React from 'react';
import type { Metadata } from 'next';
import { unstable_setRequestLocale } from 'next-intl/server';
import { useTranslations } from 'next-intl';
import { GeneralTopSection } from '../../../components/Page';
import { ScreenCarousel } from '../../../components/Page/ScreenCarousel';

export const metadata: Metadata = {
    title: 'Bbuddy - Become a BB expert',
    description: 'Bbuddy desc Become a BB expert'
};

export default function BbExpertPage({ params: { locale } }: { params: { locale: string } }) {
    unstable_setRequestLocale(locale);
    const t = useTranslations('BbExpert');

    return (
        <>
            <GeneralTopSection
                title={t('header')}
                description={t('header-desc')}
                mainImage="banner-people.png"
            />
            <section className="b-slider waves-top">
                <ScreenCarousel />
            </section>
            <section className="b2" style={{ padding: '40px 0' }}>
                <div className="b-inner">
                    <h2 className="title-h2">Everything you need in one application</h2>
                    <div className="row">
                        <div className="col-12">
                            <div className="advice-list">
                                <div className="advice-item advice-item--with-img">
                                    <img src="/images/search.svg" alt="" className="advice-img" />
                                    <div className="advice-content">
                                        <div className="advice-title">
                                            Customer search
                                        </div>
                                        <div className="advice-text">
                                            The application algorithm will match your profile data to the customer’s
                                            request and recommend the best option. BB customers will come directly
                                            to you!
                                        </div>
                                    </div>
                                </div>
                                <div className="advice-item advice-item--with-img">
                                    <img src="/images/note.svg" alt="" className="advice-img" />
                                    <div className="advice-content">
                                        <div className="advice-title">
                                            Automation of appointments
                                        </div>
                                        <div className="advice-text">
                                            Create your work schedule only once. Customers will make their own
                                            appointments thereafter selecting a time slot on your calendar.
                                        </div>
                                    </div>
                                </div>
                                <div className="advice-item advice-item--with-img">
                                    <img src="/images/videocall.svg" alt="" className="advice-img" />
                                    <div className="advice-content">
                                        <div className="advice-title">
                                            Video calls
                                        </div>
                                        <div className="advice-text">
                                            Call up directly in B Buddy at the touch of a button. No more flicking
                                            through apps in search of a link. A gentle reminder required? We will
                                            send one.
                                        </div>
                                    </div>
                                </div>
                                <div className="advice-item advice-item--with-img">
                                    <img src="/images/guard.svg" alt="" className="advice-img" />
                                    <div className="advice-content">
                                        <div className="advice-title">
                                            Legal security
                                        </div>
                                        <div className="advice-text">All required documents, including the contract
                                            and consent to the processing of personal data, have been verified and
                                            are available in the app.
                                        </div>
                                    </div>
                                </div>
                                <div className="advice-item advice-item--with-img">
                                    <img src="/images/feedback.svg" alt="" className="advice-img" />
                                    <div className="advice-content">
                                        <div className="advice-title">
                                            Feedback
                                        </div>
                                        <div className="advice-text">Gather feedback from all the customers in one
                                            place. B Buddy will remind the customer to leave feedback after the
                                            meeting is over.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section className="b3">
                <div className="b-inner">
                    <h2 className="title-h2">B Buddy expert has:</h2>
                    <div className="row">
                        <div className="col-12 col-md-4">
                            <div className="b3-item">
                                <img src="/images/calendar.svg" className="b3-img"/>
                                <div className="b3-title">From 300 hours</div>
                                <div className="b3-text">Coaching practice</div>
                            </div>
                        </div>
                        <div className="col-12 col-md-4">
                            <div className="b3-item">
                                <img src="/images/man.svg" className="b3-img"/>
                                <div className="b3-title">From 5 years</div>
                                <div className="b3-text">Professional experience</div>
                            </div>
                        </div>
                        <div className="col-12 col-md-4">
                            <div className="b3-item">
                                <img src="/images/target.svg" className="b3-img"/>
                                <div className="b3-title">Expertise</div>
                                <div className="b3-text">Confirmed by successfully implemented projects
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
};
