"use client";
import Image from "next/image";
import Link from "next/link";
import Portfolio from "../component/portoflio";
import ReviewSec from "../component/Testimonials";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import '@fortawesome/fontawesome-svg-core/styles.css';
import { faPhoneVolume, faArrowDown } from '@fortawesome/free-solid-svg-icons';

export default function Home() {
  
  return (
    <main>
        <section  className="main-banner inner-banner">
            <div  className="container">
                <div  className="row align-items-center justify-content-center">
                    <div  className="col-lg-6">
                        <div  className="banner-content text-center">
                            <h1>Our Portfolio</h1>
                            <p>we are offer our client a <span>40% discount</span> on all of our services.
                                avail your discount coupon now through our live chat
                            </p>
                            <div  className="banner-btns justify-content-center">
                                <Link href="/contact-us">Contact Us</Link>
                                <a href="tel:+1 (323) 503-1458 "><FontAwesomeIcon icon={faPhoneVolume} /> +1 (323) 503-1458</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <Portfolio />

        <section  className="our-promise-sec">
            <div  className="container">
                <div  className="title heading" data-aos="fade-down" data-aos-delay="100" data-aos-duration="900">
                    <h2>our promising range of services</h2>
                    <div  className="row justify-content-center">
                        <div  className="col-xl-11 col-lg-11 col-md-12 col-sm-12 col-12">
                            <p>The Book Quill offers a complete range of writing, editing, publishing, and creative services for authors nationwide. Our team delivers reliable, high-quality solutions tailored to every genre and publishing goal.</p>
                        </div>
                    </div>
                </div>
                <div  className="row align-items-md-end">
                    <div  className="col-xxl-7 col-xl-7 col-lg-7 col-md-8 col-sm-12 col-12">
                        <div  className="title" data-aos="fade-right" data-aos-delay="150" data-aos-duration="800">
                            <h2>world-class ghostwriting team</h2>
                            <div  className="row">
                                <div  className="col-xxl-10 col-xl-11 col-lg-11 col-md-12 col-sm-12 col-12">
                                    <p>Our experienced ghostwriters help authors develop engaging, well-structured content that reflects their voice. From planning to polished drafts, we ensure every book is crafted with professionalism and creativity.</p>
                                    <ul>
                                        <li>book writing</li>
                                        <li>audio book</li>
                                        <li>book publishing</li>
                                        <li>unlimited free revisions</li>
                                        <li>Illustration design</li>
                                        <li>dedicated account manager</li>
                                        <li>book cover design</li>
                                        <li>100% money back guarantee</li>
                                    </ul>
                                    <div  className="banner-btns">
                                        <Link href="/contact-us">place your order</Link>
                                        <a href="tel:+1 (323) 503-1458 "><FontAwesomeIcon icon={faPhoneVolume} /> +1 (323) 503-1458</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div  className="col-xxl-5 col-xl-5 col-lg-5 col-md-4 col-sm-12 col-12">
                        <div  className="img-our" data-aos="fade-left" data-aos-delay="250" data-aos-duration="800">
                            <Image src="/assets/images/ser-img.webp" width={526} height={502} alt="Professional Book Writing, Editing, and Publishing Services USA" title="Explore Our Range of Book Services"  className="img-fluid" />
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section  className="section-our-process" data-aos="fade-up">
            <div  className="container">
                <div  className="row justify-content-center">
                    <div  className="col-xxl-9 col-xl-9 col-lg-10 col-md-12 col-sm-12 col-12">
                        <div  className="title">
                            <h2 data-aos="fade-down">our process</h2>
                            <p data-aos="fade-up" data-aos-delay="100">Our book publishing process covers everything from formatting and layout to cover setup and final file prep. We ensure your manuscript is polished, structured, and ready for print or digital release with confidence.</p>
                        </div>
                    </div>
                </div>
                <div  className="row our-line">
                    <div  className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                        <div  className="pro-card" data-aos="fade-right" data-aos-delay="0">
                            <div  className="top-h3">
                                <h3>Discovery</h3>
                            </div>
                            <h2>01</h2>
                            <div  className="content">
                                <h3>Discovery</h3>
                                <p>We review your manuscript and identify the formatting, layout, and publishing requirements.</p>
                            </div>
                        </div>
                    </div>
                    <div  className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                        <div  className="pro-card" data-aos="fade-right" data-aos-delay="150">
                            <div  className="top-h3">
                                <h3>Formatting</h3>
                            </div>
                            <h2>02</h2>
                            <div  className="content">
                                <h3>Formatting</h3>
                                <p>We structure and format your book for print and digital platforms using industry standards.</p>
                            </div>
                        </div>
                    </div>
                    <div  className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                        <div  className="pro-card" data-aos="fade-right" data-aos-delay="300">
                            <div  className="top-h3">
                                <h3>Design & Setup</h3>
                            </div>
                            <h2>03</h2>
                            <div  className="content">
                                <h3>Design & Setup</h3>
                                <p>We prepare interior layout, finalize cover alignment, and assist with ISBN and publishing setup.</p>
                            </div>
                        </div>
                    </div>
                    <div  className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                        <div  className="pro-card" data-aos="fade-right" data-aos-delay="450">
                            <div  className="top-h3">
                                <h3>Final Review</h3>
                            </div>
                            <h2>04</h2>
                            <div  className="content">
                                <h3>Final Review</h3>
                                <p>Your file is polished, approved, and delivered as a print-ready or eBook-ready manuscript.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <ReviewSec />
    </main>
  );
}
