"use client";

import React from "react";

const FaqVideoSection = () => {
    return (
        <>
            <section className="faq-two">
                <div
                    className="faq-two__bg jarallax"
                    style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/faq-bg-2.jpg)" }}
                ></div>
                <div className="container">
                    <div className="row justify-content-center">
                        <div className="col-lg-8 wow fadeInUp" data-wow-delay="0ms">
                            <div className="contact-form-card">
                                <div className="section-title-wrapper text-center mb-40">
                                    <span className="section-subtitle">Get In Touch</span>
                                    <h2 className="section-heading text-white">Have a Project in Mind?</h2>
                                </div>
                                <form className="faq-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={7} required></textarea>
                                        </div>
                                        <div className="col-md-12 text-center">
                                            <button type="submit" className="primary-btn-1">
                                                SEND A MESSAGE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section className="video-three wow fadeInUp" data-wow-delay="200ms">
                <div className="container">
                    <div
                        className="video-three__inner"
                        style={{
                            backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/video-bg-3.jpg)",
                            backgroundPosition: 'center',
                            backgroundSize: 'cover'
                        }}
                    >
                        <div className="video-content-overlay">
                            <h2 className="consultation-title">Take the First Step Towards Digital Excellence.</h2>
                            <p className="consultation-text">Book Your Personalized Consultation with Our Experts Today.</p>
                            <a href="/contact" className="primary-btn-1-link mt-30">
                                Schedule Consultation &nbsp; | <i className="fa-solid fa-calendar-check"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            <style jsx>{`
                .faq-two {
                    padding: 120px 0 200px;
                    position: relative;
                    background-color: #0f172a;
                    clip-path: none !important;
                }
                .faq-two__bg {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-attachment: fixed;
                    background-size: cover;
                    opacity: 0.15;
                }
                .contact-form-card {
                    background: rgba(26, 31, 43, 0.8);
                    backdrop-filter: blur(10px);
                    padding: 60px;
                    border-radius: 30px;
                    border: 1px solid rgba(255, 255, 255, 0.05);
                    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
                    margin-bottom: 20px;
                }
                .section-subtitle {
                    color: #3779b9;
                    text-transform: uppercase;
                    letter-spacing: 2px;
                    font-weight: 700;
                    font-size: 14px;
                    display: block;
                    margin-bottom: 15px;
                }
                .section-heading {
                    font-size: 42px;
                    font-weight: 800;
                    margin-bottom: 0;
                }
                .faq-contact-form input,
                .faq-contact-form textarea {
                    width: 100%;
                    background: rgba(255, 255, 255, 0.03);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    padding: 18px 25px;
                    border-radius: 12px;
                    color: #fff;
                    outline: none;
                    transition: all 0.3s ease;
                }
                .faq-contact-form textarea {
                    min-height: 220px;
                    resize: vertical;
                }
                .faq-contact-form input:focus,
                .faq-contact-form textarea:focus {
                    background: rgba(255, 255, 255, 0.05);
                    border-color: #3779b9;
                    box-shadow: 0 0 15px rgba(55, 121, 185, 0.2);
                }
                .primary-btn-1, .primary-btn-1-link {
                    background: #3779b9;
                    color: #fff;
                    padding: 18px 45px;
                    border-radius: 50px;
                    font-weight: 700;
                    border: none;
                    cursor: pointer;
                    display: inline-flex;
                    align-items: center;
                    gap: 10px;
                    transition: all 0.3s ease;
                    text-transform: uppercase;
                    font-size: 14px;
                    letter-spacing: 1px;
                    margin-top: 25px;
                }
                .primary-btn-1:hover, .primary-btn-1-link:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 15px 30px rgba(55, 121, 185, 0.4);
                    color: #fff;
                }
                .video-three__inner {
                    border-radius: 30px;
                    overflow: hidden;
                    min-height: 500px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                }
                .video-three__inner::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(15, 23, 42, 0.6);
                }
                .video-content-overlay {
                    position: relative;
                    z-index: 1;
                    text-align: center;
                    max-width: 800px;
                    padding: 0 20px;
                }
                .consultation-title {
                    font-size: 48px;
                    color: #fff;
                    font-weight: 800;
                    line-height: 1.2;
                    margin-bottom: 20px;
                }
                .consultation-text {
                    font-size: 20px;
                    color: rgba(255, 255, 255, 0.8);
                    margin-bottom: 0;
                }
                @media (max-width: 991px) {
                    .consultation-title {
                        font-size: 36px;
                    }
                    .contact-form-card {
                        padding: 40px 30px;
                    }
                }
                @media (max-width: 767px) {
                    .consultation-title {
                        font-size: 30px;
                    }
                }
            `}</style>
        </>
    );
};

export default FaqVideoSection;
