"use client";
import { useState } from "react";
type Entry = { name:string; message:string; date:string };
const initial: Entry[] = [
  { name:"Aman", message:"Love the new design — super clean!", date:"2026-02-14" },
  { name:"Priya", message:"Zyphron is fast. Keep shipping!", date:"2026-02-10" },
];
export default function GuestbookPage(){
  const [entries,setEntries]=useState<Entry[]>(initial);
  const [name,setName]=useState(""); const [message,setMessage]=useState(""); const [error,setError]=useState("");
  const [cooldown,setCooldown]=useState(false);
  const submit=(e:React.FormEvent)=>{
    e.preventDefault(); setError("");
    if(!name.trim() || !message.trim()){ setError("Name and message required."); return; }
    if(message.length>280){ setError("Max 280 characters."); return; }
    if(cooldown){ setError("Please wait a moment before posting again."); return; }
    // sanitize basic
    const cleanM = message.replace(/</g,"&lt;").slice(0,280);
    setEntries([{name:name.trim().slice(0,40), message:cleanM, date:new Date().toISOString().slice(0,10)}, ...entries]);
    setName(""); setMessage(""); setCooldown(true); setTimeout(()=>setCooldown(false), 5000);
  };
  return (
    <div className="pt-24 bg-[#07080c] min-h-[70vh]">
      <div className="max-w-[800px] mx-auto px-6 sm:px-8 py-12">
        <p className="text-[11px] tracking-[0.2em] font-semibold text-white/30 uppercase">Guestbook</p>
        <h1 className="mt-3 text-[32px] sm:text-[44px] font-[800] tracking-[-0.04em] text-white">Leave a message</h1>
        <p className="text-white/50 text-sm mt-2">Say hi — messages are moderated, sanitized and rate-limited.</p>
        <form onSubmit={submit} className="mt-6 rounded-2xl border border-white/10 bg-white/[0.04] p-6 space-y-4">
          <div className="grid sm:grid-cols-2 gap-4">
            <input value={name} onChange={e=>setName(e.target.value)} placeholder="Your name" maxLength={40} className="rounded-xl bg-black/40 border border-white/10 px-3 py-2.5 text-sm text-white placeholder:text-white/30 outline-none" />
            <input placeholder="Website (optional)" className="rounded-xl bg-black/40 border border-white/10 px-3 py-2.5 text-sm text-white placeholder:text-white/30 outline-none" />
          </div>
          <textarea value={message} onChange={e=>setMessage(e.target.value)} placeholder="Your message (max 280 chars)" rows={3} maxLength={280} className="w-full rounded-xl bg-black/40 border border-white/10 px-3 py-2.5 text-sm text-white placeholder:text-white/30 outline-none" />
          {error && <p className="text-[12px] text-red-400">{error}</p>}
          <button className="w-full rounded-full bg-white text-black font-semibold py-2.5 hover:bg-white/90 disabled:opacity-50" disabled={cooldown}>Sign guestbook</button>
          <p className="text-[11px] text-white/20 text-center">Spam protection: validation + 5s rate limit (add Turnstile in production).</p>
        </form>
        <div className="mt-8 space-y-3">
          {entries.map((en,i)=> <div key={i} className="rounded-2xl border border-white/10 bg-white/[0.04] p-5"><div className="flex justify-between text-xs"><span className="font-semibold text-white">{en.name}</span><span className="text-white/30">{en.date}</span></div><p className="text-[14px] text-white/70 mt-1 leading-relaxed">{en.message}</p></div>)}
        </div>
      </div>
    </div>
  );
}