"use client";
import Image from "next/image";
import Link from "next/link";
import Slider from "react-slick";  // Import Slider component from react-slick
import "slick-carousel/slick/slick.css";  // Import Slick Carousel styles
import "slick-carousel/slick/slick-theme.css"; // Import theme style
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPhoneVolume } from "@fortawesome/free-solid-svg-icons";
export default function Home() {
    const settings = {
        dots: false,
        arrows: false,
        speed: 5000,
        autoplay: true,
        autoplaySpeed: 0,
        cssEase: "linear",
        slidesToShow: 4,
        slidesToScroll: 1,
        infinite: true,
        swipeToSlide: true,
        centerMode: true,
        focusOnSelect: true,
        pauseOnHover: true,
        responsive: [
        {
            breakpoint: 1000,
            settings: {
            slidesToShow: 3,
            },
        },
        {
            breakpoint: 480,
            settings: {
            slidesToShow: 2,
            },
        },
        ],
    };

    const books = [
        { id: 1, src: "/assets/images/Books/1.webp", alt: "Professional Fiction Book Cover Design Portfolio", title: "Fiction Book Writing & Design" },
        { id: 2, src: "/assets/images/Books/2.webp", alt: "Best Selling Novel Cover Art and Layout", title: "Novel Publishing Services" },
        { id: 3, src: "/assets/images/Books/3.webp", alt: "Creative Narrative Non-Fiction Book Cover", title: "Ghostwriting & Creative Design" },
        { id: 4, src: "/assets/images/Books/4.webp", alt: "Custom Book Illustration and Cover Design Example", title: "Custom Book Illustrations" },
        { id: 5, src: "/assets/images/Books/5.webp", alt: "Mystery Thriller Book Cover Design Sample", title: "Thriller Genre Book Writing" },
        { id: 6, src: "/assets/images/Books/6.webp", alt: "Business Leadership Book Publishing and Layout", title: "Business Book Publishing" },
        { id: 7, src: "/assets/images/Books/7.webp", alt: "Professional Autobiography Book Cover Design", title: "Biography Writing Services" },
        { id: 8, src: "/assets/images/Books/8.webp", alt: "Children Storybook Illustration and Design Portfolio", title: "Children's Book Publishing" },
        { id: 9, src: "/assets/images/Books/9.webp", alt: "Amazon Kindle Ebook Cover Design Sample", title: "KDP eBook Formatting" },
        { id: 10, src: "/assets/images/Books/10.webp", alt: "Premium Hardcover Book Jacket Design", title: "Hardcover Publishing Design" },
        { id: 11, src: "/assets/images/Books/11.webp", alt: "Modern Minimalist Book Cover Design Trend", title: "Modern Book Branding" },
        { id: 12, src: "/assets/images/Books/12.webp", alt: "Academic and Educational Book Cover Layout", title: "Educational Book Writing" },
        { id: 13, src: "/assets/images/Books/13.webp", alt: "Poetry Book Cover Design and Interior Formatting", title: "Poetry Book Publishing" },
        { id: 14, src: "/assets/images/Books/14.webp", alt: "Fantasy Novel World Building and Cover Art", title: "Fantasy Ghostwriting" },
        { id: 15, src: "/assets/images/Books/15.webp", alt: "Self-Help Book Branding and Cover Concept", title: "Self-Help Book Design" },
        { id: 16, src: "/assets/images/Books/16.webp", alt: "Professional Book Marketing Graphics and Covers", title: "Author Branding Services" },
        { id: 17, src: "/assets/images/Books/17.webp", alt: "High Quality Print Ready Book Cover File", title: "Print-on-Demand Design" },
        { id: 18, src: "/assets/images/Books/18.webp", alt: "The Book Quill Master Portfolio of Published Works", title: "Expert Book Publishing Services" },
    ];
  return (
        <section className="portfolio-sec">
        <div className="container">
            <div className="title">
                <h2 data-aos="fade-up">Covering A Wide Range Of Genres</h2>
                <ul className="cate" data-aos="fade-up" data-aos-delay="150">
                    <li>
                        <Image src="/assets/images/Icons/b1.webp" alt="Action and Adventure Ghostwriting Category - The Book Quill"  title="Action & Adventure Book Writing" className="fluid" width={100} height={106} />
                        <h4>Action & Adventure</h4>
                    </li>
                    <li>
                        <Image src="/assets/images/Icons/b2.webp" alt="Custom Comics and Graphic Novel Writing Icon" title="Professional Comics Writing Services" className="fluid" width={100} height={106} />
                        <h4>Comics</h4>
                    </li>
                    <li>
                        <Image src="/assets/images/Icons/b3.webp" alt="Dictionary and Reference Book Publishing Category" title="Reference Book Writing & Editing" className="fluid" width={100} height={106} />
                        <h4>Dictionary</h4>
                    </li>
                    <li>
                        <Image src="/assets/images/Icons/b4.webp" alt="Drama Genre Book Writing and Formatting Service" title="Drama & Script Writing Services" className="fluid" width={100} height={106} />
                        <h4>Drama</h4>
                    </li>
                    <li>
                        <Image src="/assets/images/Icons/b5.webp" alt="Health and Wellness Non-Fiction Book Category" title="Health & Wellness Book Ghostwriting" className="fluid" width={100} height={106} />
                        <h4>Health</h4>
                    </li>
                    <li>
                        <Image src="/assets/images/Icons/b6.webp" alt="Horror Fiction Novel Writing and Cover Design" title="Horror Book Writing Services" className="fluid" width={100} height={106} />
                        <h4>Horror</h4>
                    </li>
                    <li>
                        <Image src="/assets/images/Icons/b7.webp" alt="Romance Novel Ghostwriting and Publishing Service" title="Romance Fiction Writing" className="fluid" width={100} height={106} />
                        <h4>Romance</h4>
                    </li>
                    <li>
                        <Image src="/assets/images/Icons/b8.webp" alt="Science Fiction (Sci-Fi) Book Category Icon" title="Sci-Fi Book Writing & Publishing" className="fluid" width={100} height={106} />
                        <h4>Science Fiction</h4>
                    </li>
                    <li>
                        <Image src="/assets/images/Icons/b9.webp" alt="Travel Guide and Travelogue Book Writing Services" title="Travel Book Writing & Branding" className="fluid" width={100} height={106} />
                        <h4>Travel</h4>
                    </li>
                </ul>
            </div>
        </div>
        <div className="portfolio-slide" data-aos="fade-up" data-aos-delay="200">
            <Slider {...settings} >
                {books.map((book) => (
                <div key={book.id} data-aos="fade-up" data-aos-delay={book.id * 100}>
                    <div className="img-por">
                    <Image
                        src={book.src}
                        alt={book.alt}
                        title={book.title}
                        className="img-fluid"
                        width={389}
                        height={595}
                    />
                    </div>
                </div>
                ))}
            </Slider>
        </div>

        <div className="container">
            <div className="title">
                <h3 data-aos="fade-up"><span>And that’s not all!</span> Check out some of our other Ghostwriting services!</h3>
                <div className="banner-btns"  data-aos="zoom-in" data-aos-delay="200">
                    <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>
    </section>
  );
}
