"use client";
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
import ReviewSec from "../component/Testimonials";
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 '@fortawesome/fontawesome-svg-core/styles.css';
import { faPhoneVolume, faArrowDown } 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" },
    ];

    // faq section

    const [openItems, setOpenItems] = useState({});

    const toggleAccordion = (id) => {
        setOpenItems((prev) => ({
        ...prev,
        [id]: !prev[id],
        }));
    };

    const leftFaqs = [
        {
        id: "01",
        question: "Who are the best book cover designers in USA?",
        answer:
            "The Book Quill provides professional book cover designers in USA who specialize in custom, genre-specific covers for authors and publishers.",
        },
        {
        id: "02",
        question: "Do you offer custom book cover design in the USA?",
        answer:
            "Yes, we offer custom book cover design USA services for paperback, hardcover, and eBook formats, tailored to your genre and audience.",
        },
        {
        id: "03",
        question: "How much does a book cover designer in USA cost?",
        answer:
            "Our affordable book cover design services USA are priced competitively based on design complexity, style, and turnaround time.",
        },
    ];

    const rightFaqs = [
        {
        id: "04",
        question: "Do your book covers work for Amazon KDP?",
        answer:
            "Yes, all our book covers are designed to meet Amazon KDP, Kindle, and print publishing standards.",
        },
        {
        id: "05",
        question: "Can you redesign or improve an existing book cover?",
        answer:
            "Yes, our professional book cover designers in USA can redesign or enhance existing book covers to improve visual appeal, market relevance, and reader engagement.",
        },
        {
        id: "06",
        question: "Do you provide affordable book cover design services in the USA?",
        answer:
            "Yes, we offer affordable book cover design services USA with flexible pricing packages while maintaining high-quality design standards.",
        },
    ];

    const renderFaqs = (faqs) =>
        faqs.map((item) => (
        <div
            className={`accordion__item ${openItems[item.id] ? "active" : ""}`}
            key={item.id}
        >
            <div
            className="accordion__item__header"
            onClick={() => toggleAccordion(item.id)}
            >
            <span className="icon-count">
                <p>{item.id}</p>
            </span>
            <h4>{item.question}</h4>
            </div>

            <div
            className={`accordion__item__content ${
                openItems[item.id] ? "show" : ""
            }`}
            >
            <p>{item.answer}</p>
            </div>
        </div>
        ));
  return (
    <main>
        <section  className="main-banner  inner-banner">
            <div  className="container">
                <div  className="row align-items-center justify-content-center">
                    <div  className="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-12">
                        <div  className="banner-content text-center">
                            <h1 data-aos="fade-down">Book Cover Design Services USA</h1>
                            <p data-aos="fade-up" data-aos-delay="150">Professional book cover design for paperback, hardcover, and e-book formats. Our U.S.-based designers create custom, eye-catching covers that reflect your story and attract readers across all major platforms.</p>
                            <div  className="banner-btns justify-content-center" data-aos="zoom-in" data-aos-delay="300">
                                <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>

        <section  className="sec-services bookwriting">
            <div  className="container">
                <div  className="row">
                    <div  className="col-lg-6">
                        <div  className="content" data-aos="fade-right">
                            <h3 data-aos="fade-right">Leading Professional</h3>
                            <h2 data-aos="fade-right" data-aos-delay="100">Book Cover Design</h2>
                            <p data-aos="fade-right" data-aos-delay="200">Our professional book cover designers in USA create stunning, market-ready covers for paperback, hardcover, and digital e-books. Whether your book is fiction, nonfiction, memoir, romance, thriller, or a children’s title, our USA-based book cover artists deliver custom book cover design services aligned with your genre, audience, and publishing goals. From concept brainstorming and typography to layout composition and final print setup, we design covers that stand out on Amazon KDP, Kindle, bookstores, and digital marketplaces.</p>
                            <div  className="banner-btns" data-aos="zoom-in" data-aos-delay="350">
                                <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  className="col-lg-6">
                        <div  className="img-ser" data-aos="fade-left" data-aos-delay="200">
                            <Image src="/assets/images/book-writing-img.webp"  width={636} height={608} alt="Professional Book Cover Designers USA - Custom Book Design Services" title="Hire Expert Book Cover Designers in USA"  className="img-fluid" />
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section  className="cta-banner cta-banner-2">
            <div  className="container">
                <div  className="row align-items-center">
                    <div  className="col-lg-6">
                        <div  className="banner-content">
                            <h3 data-aos="fade-right">Elevate <span>from Publisher</span> <br/>
                                to Bestselling <span>Author</span></h3>
                            <p data-aos="fade-right" data-aos-delay="150">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" data-aos="zoom-in" data-aos-delay="300">
                                <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>

        <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"> Hire <span> our professional </span> book cover designers in USA for your next masterpiece.</h3>
                    <p data-aos="fade-up">
                        We also offer affordable book cover design services USA without compromising on quality or creativity.
                    </p>
                    <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>

        <section  className="our-promise-sec extra-features">
            <div  className="container">
                <div  className="title heading" data-aos="fade-down" data-aos-delay="100" data-aos-duration="900">
                    <h2>what we offer</h2>
                    <div  className="row justify-content-center">
                        <div  className="col-xl-11 col-lg-11 col-md-12 col-sm-12 col-12">
                            <p>Our custom book cover design USA services help authors create visually appealing, genre-accurate, and professionally formatted covers for print and digital publishing. Every cover is custom-designed to attract readers and reflect the essence of your story.</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>expert cover design support</h2>
                            <div  className="row">
                                <div  className="col-xxl-10 col-xl-11 col-lg-11 col-md-12 col-sm-12 col-12">
                                    <p>We follow a complete creative design process to ensure your book cover looks professional, visually strong, and aligned with publishing standards across platforms like Amazon KDP, IngramSpark, and Barnes & Noble.</p>
                                    <ul>
                                        <li>Custom Cover Design</li>
                                        <li>Paperback Layout</li>
                                        <li>Hardcover Setup</li>
                                        <li>E-Book Cover Design</li>
                                        <li>Typography Design</li>
                                        <li>Concept Development</li>
                                        <li>Print Alignment</li>
                                        <li>Final Digital Files</li>
                                    </ul>
                                    <div  className="banner-btns">
                                        <Link href="/contact-us">start your project</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">
                        <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="Expert Book Cover Designers USA - Custom Design Support" title="Professional Book Cover Design Services in USA"  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 cover design workflow blends creativity, genre research, and professional layout structure, allowing our book cover artists USA to create visually compelling designs that meet publishing standards across all major platforms.</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>Brief</h3>
                            </div>
                            <h2>01</h2>
                            <div  className="content">
                                <h3>Brief</h3>
                                <p>We discuss your book, genre, audience, and visual direction before design begins.</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>Concepts</h3>
                            </div>
                            <h2>02</h2>
                            <div  className="content">
                                <h3>Concepts</h3>
                                <p>We create multiple cover concepts based on your theme, tone, and design goals.</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</h3>
                            </div>
                            <h2>03</h2>
                            <div  className="content">
                                <h3>Design</h3>
                                <p>We refine colors, layout, images, and typography to build a strong visual identity.</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 Files</h3>
                            </div>
                            <h2>04</h2>
                            <div  className="content">
                                <h3>Final Files</h3>
                                <p>Your cover is finalized and delivered print-ready and e-book-ready for publishing.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <ReviewSec />
        <section  className="section s10" data-aos="fade-in" data-aos-duration="2000">
            <div  className="container">
                <div  className="heading text-center width-70 m-auto">
                    <h2>Frequently Asked Questions</h2>
                </div>
                <div  className="custom-row row">
                    <div  className="col-md-6">
                        <div  className="accordion">
                            {renderFaqs(leftFaqs)}
                        </div>
                    </div>
                    <div  className="col-md-6">
                        <div  className="accordion">
                            {renderFaqs(rightFaqs)}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
  );
}
