feat(captcha): trying to solve captcha issues

-

src/pages/index.js

@@ -4,38 +4,40 @@ import { content_pl } from "../content/kamil"
 import { content_en } from "../content/kamil"
 import ReCAPTCHA from "react-google-recaptcha"
 
-const RECAPTCHA_SITE_KEY = process.env.GATSBY_RECAPTCHA_SITE_KEY || "YOUR_RECAPTCHA_SITE_KEY"
+// Klucz strony reCAPTCHA
+const RECAPTCHA_SITE_KEY = process.env.GATSBY_RECAPTCHA_SITE_KEY || "YOUR_RECAPTCHA_SITE_KEY";
 
+// Komponent obsługujący reCAPTCHA
 const CaptchaWrapper = ({ onVerified }) => {
   const [error, setError] = React.useState(null);
-  const isMounted = React.useRef(true);
+  const recaptchaRef = React.useRef(null);
 
-  React.useEffect(() => {
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
-  const handleCaptchaChange = (value) => {
-    if (isMounted.current && value) {
-      onVerified(true);
-      setError(null);
-    }
-  };
-
-  const handleCaptchaError = () => {
-    if (isMounted.current) {
-      setError('Wystąpił błąd podczas weryfikacji CAPTCHA');
-      onVerified(false);
+  const handleCaptchaChange = () => {
+    try {
+      const token = recaptchaRef.current.getValue();
+      if (token) {
+        onVerified(true);
+        setError(null);
+      }
+    } catch (err) {
+      console.error("reCAPTCHA error:", err);
+      setError("Wystąpił błąd podczas weryfikacji. Spróbuj ponownie.");
     }
   };
 
   return (
     <div className="captcha-container">
       <ReCAPTCHA
+        ref={recaptchaRef}
         sitekey={RECAPTCHA_SITE_KEY}
         onChange={handleCaptchaChange}
-        onError={handleCaptchaError}
+        onErrored={() => setError("Wystąpił błąd podczas weryfikacji. Spróbuj ponownie.")}
+        onExpired={() => {
+          if (recaptchaRef.current) {
+            recaptchaRef.current.reset();
+          }
+        }}
+        hl="pl"
       />
       {error && (
         <div className="error-message" role="alert">

src/styles/general.scss

@@ -212,8 +212,10 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   margin: 20px 0;
-
+  padding: 10px;
+  
   .error-message {
     color: #ff4444;
     margin-top: 10px;