import React from "react";

const ContactSection = () => {
    return (
        <section className="contact-area section-space">
            <div className="container">
                <div className="row">
                    <div className="col-lg-5 col-md-12">
                        <div className="contact-info-wrapper">
                            <div className="section-title-wrapper mb-40">
                                <span className="section-subtitle">
                                    <span className="dash"></span> Contact With Us
                                </span>
                                <h1 className="section-title">Feel Free to Get in Touch</h1>
                            </div>
                            <div className="contact-info-list">
                                <div className="contact-info-item d-flex align-items-center mb-30">
                                    <div className="icon">
                                        <i className="fa-solid fa-phone-volume"></i>
                                    </div>
                                    <div className="content">
                                        <span>Call Anytime</span>
                                        <h6><a href="tel:+8898006802">+ 88 ( 9800 ) 6802</a></h6>
                                    </div>
                                </div>
                                <div className="contact-info-item d-flex align-items-center mb-30">
                                    <div className="icon">
                                        <i className="fa-solid fa-envelope"></i>
                                    </div>
                                    <div className="content">
                                        <span>Send Email</span>
                                        <h6><a href="mailto:needhelp@company.com">needhelp@company.com</a></h6>
                                    </div>
                                </div>
                                <div className="contact-info-item d-flex align-items-center">
                                    <div className="icon">
                                        <i className="fa-solid fa-location-dot"></i>
                                    </div>
                                    <div className="content">
                                        <span>Visit Now</span>
                                        <h6>88 Broklyn Golden Street. New York, USA</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-7 col-md-12">
                        <div className="contact-form-wrapper bg-color-light p-relative">
                            <form action="#" className="contact-form">
                                <div className="row">
                                    <div className="col-md-6 mb-20">
                                        <input type="text" placeholder="Your Name" required />
                                    </div>
                                    <div className="col-md-6 mb-20">
                                        <input type="email" placeholder="Email Address" required />
                                    </div>
                                    <div className="col-md-6 mb-20">
                                        <input type="tel" placeholder="Phone Number" required />
                                    </div>
                                    <div className="col-md-6 mb-20">
                                        <input type="text" placeholder="Subject" required />
                                    </div>
                                    <div className="col-md-12 mb-20">
                                        <textarea placeholder="Write a Message" rows={4} required></textarea>
                                    </div>
                                    <div className="col-md-12">
                                        <button type="submit" className="primary-btn-1 w-100">
                                            SEND A MESSAGE
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <style jsx>{`
                .contact-area {
                    padding: 80px 0;
                    background: #fff;
                }
                @media (max-width: 767px) {
                    .contact-area {
                        padding: 60px 0;
                    }
                }
                .section-subtitle {
                    color: #6366f1;
                    font-weight: 600;
                    margin-bottom: 12px;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    font-size: 16px;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                }
                .section-subtitle .dash {
                    width: 25px;
                    height: 2px;
                    background: #6366f1;
                    display: inline-block;
                }
                .section-title {
                    font-size: 52px;
                    font-weight: 800;
                    color: #0f172a;
                    line-height: 1.1;
                    margin-bottom: 45px;
                }
                .contact-info-item .icon {
                    width: 75px;
                    height: 75px;
                    background: #fff;
                    border: 1px solid rgba(99, 102, 241, 0.2);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 25px;
                    color: #6366f1;
                    font-size: 28px;
                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.1);
                }
                .contact-info-item:hover .icon {
                    background: #6366f1;
                    color: #fff;
                    transform: scale(1.1) rotate(10deg);
                    box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3);
                }
                .contact-info-item .content span {
                    display: block;
                    font-size: 13px;
                    color: #64748b;
                    margin-bottom: 6px;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    font-weight: 600;
                }
                .contact-info-item .content h6 {
                    font-size: 22px;
                    font-weight: 700;
                    margin: 0;
                    color: #1e293b;
                }
                .contact-info-item .content h6 a {
                    color: inherit;
                    text-decoration: none;
                    transition: color 0.3s ease;
                }
                .contact-info-item .content h6 a:hover {
                    color: #6366f1;
                }
                .contact-form-wrapper {
                    background: #f8fafc;
                    padding: 60px;
                    border-radius: 24px;
                    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.03);
                }
                .contact-form input,
                .contact-form textarea {
                    width: 100%;
                    padding: 18px 25px;
                    border: 1px solid #e2e8f0;
                    background: #fff;
                    border-radius: 12px;
                    outline: none;
                    transition: all 0.3s ease;
                    font-size: 15px;
                    color: #1e293b;
                }
                .contact-form input:focus,
                .contact-form textarea:focus {
                    border-color: #6366f1;
                    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
                }
                .primary-btn-1 {
                    background: #6366f1;
                    color: #fff;
                    padding: 20px 30px;
                    border: none;
                    border-radius: 12px;
                    font-weight: 700;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    text-transform: uppercase;
                    letter-spacing: 1.5px;
                    font-size: 15px;
                    margin-top: 10px;
                    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
                }
                .primary-btn-1:hover {
                    background: #4f46e5;
                    transform: translateY(-3px);
                    box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3);
                }
                @media (max-width: 991px) {
                    .contact-form-wrapper {
                        margin-top: 60px;
                        padding: 40px;
                    }
                    .section-title {
                        font-size: 36px;
                    }
                }
                @media (max-width: 575px) {
                    .contact-form-wrapper {
                        padding: 25px;
                    }
                }
            `}</style>
        </section>
    );
};

export default ContactSection;
