// Callback1.js
"use client";
import ReCAPTCHA from "react-google-recaptcha";
import { useState, useRef } from "react";

export default function Callback1() {
    const [domain, setDomain] = useState("");
    const [email, setEmail] = useState("");
    const [captchaValue, setCaptchaValue] = useState(null);

    const recaptchaRef = useRef(null);

    const handleChange = ({ target: { name, value } }) => {
        if (name === "domain") {
            setDomain(value);
        } else if (name === "email") {
            setEmail(value);
        }
    };

    const handleCaptchaChange = (value) => {
        setCaptchaValue(value);
    };

    const handleSubmit = async (event) => {
        event.preventDefault();
        try {
            const response = await fetch("/api/checkseo", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({ domain, email, captcha: captchaValue }),
            });
            const data = await response.json();
            if (response.ok) {
                // Store domain and email in sessionStorage
                sessionStorage.setItem("reportData", JSON.stringify({ domain, email }));
                window.location.href = "/report";
            } else {
                console.error("API response:", data);
                alert(data.message);
            }
        } catch (error) {
            console.error("Error submitting form:", error);
            alert("An error occurred. Please try again later.");
        }
    };

    return (
        <>
            <section className="call-back-area">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-5">
                            <div className="call-back-content">
                                <div className="section-title white-title mb-10 tg-heading-subheading animation-style3">
                                    <h2 className="title tg-element-title">Download the Case Study</h2>
                                </div>
                                <div className="shape">
                                    <img
                                        src="/assets/img/images/call_back_shape.png"
                                        alt=""
                                        data-aos="fade-right"
                                        data-aos-delay={400}
                                    />
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-7">
                            <div className="call-back-form">
                                <form onSubmit={handleSubmit}>
                                    <div className="row">
                                        <div className="col-md-6">
                                            <div className="form-grp">
                                                <input
                                                    onChange={handleChange}
                                                    required
                                                    type="text"
                                                    name="firstname"
                                                    value={domain}
                                                    placeholder="First Name"
                                                />
                                            </div>
                                        </div>
                                        <div className="col-md-6">
                                            <div className="form-grp">
                                                <input
                                                    onChange={handleChange}
                                                    required
                                                    type="text"
                                                    name="lastname"
                                                    value={email}
                                                    placeholder="Last Name"
                                                />
                                            </div>
                                        </div>
                                        <div className="col-md-6">
                                            <div className="form-grp">
                                                <input
                                                    onChange={handleChange}
                                                    required
                                                    type="email"
                                                    name="email"
                                                    value={email}
                                                    placeholder="Email Address"
                                                />
                                            </div>
                                        </div>
                                        <div className="col-md-6">
                                            <button type="submit" className="btn">
                                                Download Now
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}