import React from 'react';
import Image from 'next/image';

import cardImg from '../assets/images/home/wrench-card-only.png'
import wrenchAgent from '../assets/images/home/wrench-agent.png'
// import bg from '../assets/images/background-bg.jpg'

function AfterHero() {
    return (
        <>
            <section className="appie-about-8-area pt-50 pb-70">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12">
                            <div className="appie-section-title">
                                <h3 className="appie-title">
                                    {/* We bring everything <br />
                                    that's required to build apps */}
                                    Set Chores, Set Goals
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-lg-7 mb-3 mb-lg-0">
                            <div className='appie-about-container'>
                                <div className='row appie-about-8-box'>
                                    <div className="col-12 col-md-6">
                                        <h3 className="title">
                                            Reward Accomplishments
                                        </h3>
                                        <p>
                                            Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards , engage and connect with family.
                                        </p>
                                        <div className=''>
                                            <a className="mb-5 mb-md-0 main-btn" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
                                                Learn More <i className="fal fa-arrow-right" />
                                            </a>
                                        </div>
                                    </div>
                                    <div className="col-12 col-md-6">
                                        <Image
                                            src={cardImg}
                                            className='w-100 h-100'
                                            width={'100%'}
                                            height={'100%'}
                                            alt="" 
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-5">
                            <div className='appie-about-container'>
                                <div className='h-100 row appie-about-8-box'>
                                    <div className="col-12 col-md-6">
                                        <div className='h-100 d-flex flex-column justify-content-between'>
                                            <h3 className="title">
                                                Assign Faster with <br />
                                                wrenchAgent
                                            </h3>
                                            <p>
                                                Ask our &#x275B;&#x275B;<span className=''>wrench</span><span className=''>Agent</span>&#x275C;&#x275C; Generative AI to assist
                                            </p>
                                            <div className=''>
                                                <a className="mb-5 mb-md-0 main-btn" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
                                                    Learn More <i className="fal fa-arrow-right" />
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-12 col-md-6">
                                        <Image
                                            src={wrenchAgent}
                                            className='w-100 h-100'
                                            width={'100%'}
                                            height={'100%'}
                                            alt="" 
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}

export default AfterHero;