/* brito.ai — site content (React island over the shader wallpaper) */
const { useState, useEffect, useRef } = React;
const { Button, Input, Tag, Eyebrow } = window.BritoAiDesignSystem_c6b510;

const EMAIL = "junior@brito.ai";
const LINKEDIN = "https://www.linkedin.com/in/jrbrito/";

function IconLinkedIn() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M4.98 3.5a2.5 2.5 0 11-.02 5.001A2.5 2.5 0 014.98 3.5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.35c0-1.28-.02-2.93-1.79-2.93-1.79 0-2.06 1.4-2.06 2.84V21H9z"/>
    </svg>
  );
}
function IconMail() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="3" y="5" width="18" height="14" rx="2"/>
      <path d="M3.5 7l8.5 6 8.5-6"/>
    </svg>
  );
}

function ContactForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [subject, setSubject] = useState("");
  const [body, setBody] = useState("");
  const [company, setCompany] = useState(""); // honeypot — real visitors leave this empty
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState("");
  const [lockedHeight, setLockedHeight] = useState(null); // keep the panel from resizing post-send
  const formRef = useRef(null);

  async function submit(e) {
    e.preventDefault();
    setError("");
    const h = formRef.current ? formRef.current.offsetHeight : null;
    setSending(true);
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name, email, subject, message: body, company }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || !data.ok) throw new Error(data.error || "Something went wrong. Please try again.");
      if (h) setLockedHeight(h);
      setSent(true);
    } catch (err) {
      setError(err.message || "Couldn't send — you can email junior@brito.ai directly.");
    } finally {
      setSending(false);
    }
  }

  if (sent) {
    return (
      <div style={{ minHeight: lockedHeight || undefined, display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <p className="formhead">Message sent</p>
        <p className="sent">→ Thanks for reaching out — it's in my inbox and I'll reply soon.</p>
        <div style={{ marginTop: 16 }}>
          <Button variant="secondary" size="sm" onClick={() => setSent(false)}>Write another</Button>
        </div>
      </div>
    );
  }

  return (
    <form className="form" ref={formRef} onSubmit={submit}>
      <p className="formhead">Contact me</p>
      <div className="grid2">
        <div className="field-wrap">
          <Input label="Name" value={name} placeholder="Your name" onChange={(e) => setName(e.target.value)} />
        </div>
        <div className="field-wrap">
          <Input label="Email" type="email" value={email} placeholder="you@company.com" onChange={(e) => setEmail(e.target.value)} />
        </div>
      </div>
      <div className="field-wrap">
        <Input label="Subject" value={subject} placeholder="What's this about?" onChange={(e) => setSubject(e.target.value)} />
      </div>
      <div className="field-wrap">
        <Input label="Message" as="textarea" value={body} placeholder="A few lines on what you're after." rows={4} onChange={(e) => setBody(e.target.value)} />
      </div>
      <input
        type="text"
        name="company"
        value={company}
        onChange={(e) => setCompany(e.target.value)}
        tabIndex={-1}
        autoComplete="off"
        aria-hidden="true"
        style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }}
      />
      {error ? <p className="sent" style={{ color: "var(--danger-500)", marginBottom: 12 }}>{error}</p> : null}
      <Button variant="primary" size="lg" type="submit" disabled={sending} iconRight={<span>→</span>}>
        {sending ? "Sending…" : "Send message"}
      </Button>
    </form>
  );
}

function App() {
  const stageRef = useRef(null);

  useEffect(() => {
    const canvas = document.getElementById("wallpaper");
    const stage = window.BritoShaders.mount(canvas);
    if (stage) stageRef.current = stage;
  }, []);

  return (
    <div className="stage">
      <div className="panel">
        <a className="brandrow" href="https://brito.ai" aria-label="brito.ai — back to start">
          <img src="assets/brito-mark.png" alt="brito.ai mark" />
          <div className="wordmark"><b>brito.ai</b></div>
        </a>

        <div className="links">
          <a className="link" href={LINKEDIN} target="_blank" rel="noopener noreferrer"><IconLinkedIn /> LinkedIn</a>
          <a className="link" href={`mailto:${EMAIL}`}><IconMail /> {EMAIL}</a>
        </div>

        <hr className="rule" />
        <ContactForm />
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);