// === Guestbook (localStorage-backed, with seed entries) ===
const SEED_GUESTBOOK = [
  { name: "maya", msg: "found you via the UQ alumni board — love this site!", time: Date.now() - 1000*60*60*4 },
  { name: "daniel", msg: "asked the chat about your data stack. very thorough 👏", time: Date.now() - 1000*60*60*22 },
  { name: "sam", msg: "the playground ate 20 minutes of my life. worth it.", time: Date.now() - 1000*60*60*30 },
  { name: "rohan", msg: "konami code → chef's kiss", time: Date.now() - 1000*60*60*48 },
  { name: "anonymous", msg: "best analyst portfolio i've seen. bookmarked.", time: Date.now() - 1000*60*60*72 },
];

function timeAgo(ts) {
  const s = Math.floor((Date.now() - ts) / 1000);
  if (s < 60) return s + 's ago';
  if (s < 3600) return Math.floor(s/60) + 'm ago';
  if (s < 86400) return Math.floor(s/3600) + 'h ago';
  return Math.floor(s/86400) + 'd ago';
}

function Guestbook() {
  const [entries, setEntries] = useState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem('sc-guestbook-v2') || 'null');
      if (saved && Array.isArray(saved)) return saved;
    } catch {}
    return SEED_GUESTBOOK;
  });
  const [name, setName] = useState('');
  const [msg, setMsg] = useState('');

  useEffect(() => {
    try { localStorage.setItem('sc-guestbook-v2', JSON.stringify(entries.slice(0, 60))); } catch {}
  }, [entries]);

  const submit = (e) => {
    e.preventDefault();
    const n = name.trim() || 'anonymous';
    const m = msg.trim();
    if (!m) return;
    setEntries([{ name: n.slice(0, 24), msg: m.slice(0, 240), time: Date.now() }, ...entries]);
    setMsg('');
  };

  return (
    <section id="guestbook" data-screen-label="Guestbook">
      <div className="wrap">
        <div className="section-header">
          <h2 data-split-words>Guestbook — leave a note.</h2>
          <span className="meta-num">06 / 06</span>
        </div>
        <p className="section-lede fade-up">
          Old internet, new internet. Sign the wall on your way out.
        </p>

        <form className="gb-form fade-up" onSubmit={submit}>
          <input
            className="gb-input"
            placeholder="your name (or anonymous)"
            value={name}
            onChange={(e) => setName(e.target.value)}
            maxLength={24}
          />
          <textarea
            className="gb-textarea"
            placeholder="say hi, leave a thought, share a song…"
            value={msg}
            onChange={(e) => setMsg(e.target.value)}
            maxLength={240}
            rows={3}
          />
          <div className="gb-foot">
            <span className="mono gb-count">{msg.length}/240</span>
            <button type="submit" className="gb-submit" disabled={!msg.trim()}>Sign →</button>
          </div>
        </form>

        <div className="gb-list">
          {entries.map((e, i) => (
            <div key={i} className="gb-entry fade-up" style={{ transitionDelay: Math.min(i, 6) * 60 + 'ms' }}>
              <div className="gb-row">
                <span className="gb-name">{e.name}</span>
                <span className="gb-time mono">{timeAgo(e.time)}</span>
              </div>
              <p className="gb-msg">{e.msg}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Guestbook = Guestbook;