"use client";
import Image from "next/image";
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-xl-8 col-lg-8 col-md-8 col-sm-12 col-12">
                        <div className="banner-content text-center">
                            <h1>Contact us</h1>
                            <p>Connect with our USA-based team of professional book writers, editors, publishers, and author branding specialists. We&apos;re here to guide you at every step of your writing and publishing journey.</p>
                            <div className="banner-btns justify-content-center">
                                <a href="javascript:Tawk_API.maximize();">Live Chat</a>
                                <a href="tel:+1 (323) 503-1458 "><FontAwesomeIcon icon={faPhoneVolume} /> +1 (323) 503-1458</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section className="contact-sec">
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-lg-9 col-xl-9">
                        <div className="title">
                            <h3>Your Story Deserves Expert Guidance.</h3>
                            <p>The Book Quill provides professional writing, editing, publishing, and creative support for authors across the USA. Whether you&apos;re starting with an idea or refining a completed draft, our team is here to help you move confidently toward publication.</p>
                        </div>
                        <form className="cmxform form-get-quote" id="contactForm" method="POST" action="javascript:;" encType="multipart/form-data">
                            <div className="row gy-3">
                                <div className="col-lg-6">
                                    <div className="txt-box">
                                        <input type="text" name="quote[first_name]" placeholder="First name" />
                                    </div>
                                </div>
                                <div className="col-lg-6">
                                    <div className="txt-box">
                                        <input type="text"  name="quote[last_name]" placeholder="last name" />
                                    </div>
                                </div>
                                <div className="col-lg-6">
                                    <div className="txt-box">
                                        <input type="text" name="quote[phone]" placeholder="Your Phone" />
                                    </div>
                                </div>
                                <div className="col-lg-6">
                                    <div className="txt-box">
                                        <input type="text"  name="quote[email]" placeholder="Your Email" />
                                    </div>
                                </div>
                                <div className="col-lg-6">
                                    <div className="txt-box">
                                        <input type="text" name="quote[genre_category]" placeholder="General Genre Category" />
                                    </div>
                                </div>
                                <div className="col-lg-6">
                                    <div className="txt-box">
                                        <input type="text" name="quote[budget]"  placeholder="Desired Service(s)* see our rates and services"/>
                                    </div>
                                </div>
                                <div className="col-lg-12">
                                    <div className="txt-box">
                                        <textarea name="quote[message]" placeholder="Tell us more about your project and publishing goals here" rows="1"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div className="info">
                                <p>You may review our confidentiality policy below or request a signed NDA at any time. For immediate assistance, reach us directly at: <a href="mailto:info@thebookquill.com">info@thebookquill.com</a></p>
                                <div className="btn-sub">
                                    {/* <input type="submit" name="submit" value="Send Message"/> */}
                                    <input type="text" name="quote[ip]" hidden defaultValue=""/>
                                    <input type="text" name="quote[date]" hidden defaultValue=""/>
                                    <input type="hidden" name="quote[url]" defaultValue=""/>
                                    <input type="text" name="quote[platfrom]" hidden defaultValue=""/>
                                    <input type="text" name="quote[c_id]" hidden defaultValue=""/>
                                    <button type="submit">submit form</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
      <ReviewSec />
    </main>
  );
}
