// Step 1: Create/Load access key (replace generator with your API)
const ACCESS_KEY_STORAGE = "vericontact_access_key";

function getAccessKey() {
  let key = localStorage.getItem(ACCESS_KEY_STORAGE);
  if (!key) {
    // Mock generator (swap for a real fetch to your key endpoint)
    key = crypto.randomUUID();
    localStorage.setItem(ACCESS_KEY_STORAGE, key);
  }
  return key;
}

// Step 3: Inject key into a hidden input in your form
document.addEventListener("DOMContentLoaded", () => {
  const form = document.querySelector("form[action*='web3forms']");
  const keyInput = form?.querySelector("input[name='access_key']");
  if (form && keyInput) {
    keyInput.value = getAccessKey();
  }
});

// Optional: handle submit via fetch (instead of native POST)
async function submitContact(payload) {
  const res = await fetch("https://api.web3forms.com/submit", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(payload)
  });
  if (!res.ok) throw new Error("Submit failed");
  return await res.json();
}
            

import { useEffect, useState } from "react";

export default function ContactForm() {
  const [accessKey, setAccessKey] = useState("");

  useEffect(() => {
    const k = localStorage.getItem("vericontact_access_key") || crypto.randomUUID();
    localStorage.setItem("vericontact_access_key", k);
    setAccessKey(k);
  }, []);

  return (
    <form action="https://api.web3forms.com/submit" method="POST">
      <input type="hidden" name="access_key" value={accessKey} />

      <input name="name" type="text" placeholder="Your Name" required />
      <input name="email" type="email" placeholder="you@example.com" required />
      <textarea name="message" placeholder="Write your message..." required /></textarea>

      <input type="checkbox" name="botcheck" className="hidden" style='display:none' />

      <button type="submit">Submit Form</button>
    </form>
  );
}