function About() {
  return (
    <div className="static-page">
      <h1 className="static-title">About</h1>
      <div className="about-grid">
        <div className="about-portrait">
          <div className="portrait-frame" style={{ aspectRatio: 4 / 5 }}>
            <div className="portrait-inner" />
          </div>
          <div className="portrait-caption">Kyle Pasalskyj</div>
        </div>
        <div className="static-body about-copy">
          <p className="body-para">Coming soon.</p>
        </div>
      </div>
    </div>
  );
}

function Series({ onOpenSeries }) {
  const seriesMap = (window.POSTS || []).reduce((acc, p) => {
    if (!p.series) return acc;
    acc[p.series] = acc[p.series] || [];
    acc[p.series].push(p);
    return acc;
  }, {});
  const entries = Object.entries(seriesMap);
  const open = (name) => { if (onOpenSeries) onOpenSeries(name); };
  return (
    <div className="static-page">
      {entries.length === 0 ? (
        <p className="series-empty">No series yet.</p>
      ) : (
        <div className="series-list">
          {entries.map(([name, posts]) => (
            <div
              key={name}
              className="series-card"
              role="button"
              tabIndex={0}
              onClick={() => open(name)}
              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); open(name); } }}
            >
              <div className="series-card-meta">
                <div className="series-tag">Series</div>
                <h2>{name}</h2>
                <div className="series-count">
                  {posts.length} {posts.length === 1 ? "post" : "posts"}
                </div>
              </div>
              <div className="series-card-images">
                {posts.slice(0, 3).map((p, i) => (
                  <div key={i} className="series-card-img" style={{ aspectRatio: p.aspect }}>
                    <Placeholder
                      aspect={p.aspect}
                      tone={p.tone}
                      imageKey={p.hero_r2_key}
                      alt={p.title || ""}
                      small
                    />
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function InstagramIcon() {
  return (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
    </svg>
  );
}

function PinIcon() {
  return (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" />
      <circle cx="12" cy="9" r="2.5" />
    </svg>
  );
}

// Cloudflare Turnstile site key. Paired with the TURNSTILE_SECRET_KEY
// Pages secret; both come from Cloudflare → Turnstile → widget.
const TURNSTILE_SITE_KEY = "0x4AAAAAAC_WCzkHmmpELJr5";

function Contact() {
  const [form, setForm] = React.useState({ name: "", email: "", subject: "", message: "" });
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error
  const [turnstileToken, setTurnstileToken] = React.useState("");
  const turnstileRef = React.useRef(null);
  const widgetIdRef = React.useRef(null);

  React.useEffect(() => {
    let cancelled = false;
    const render = () => {
      if (cancelled) return;
      if (window.turnstile && turnstileRef.current && widgetIdRef.current === null) {
        widgetIdRef.current = window.turnstile.render(turnstileRef.current, {
          sitekey: TURNSTILE_SITE_KEY,
          theme: "auto",
          callback: (token) => setTurnstileToken(token),
          "expired-callback": () => setTurnstileToken(""),
          "error-callback": () => setTurnstileToken(""),
        });
      } else {
        setTimeout(render, 200);
      }
    };
    render();
    return () => {
      cancelled = true;
      if (widgetIdRef.current !== null && window.turnstile) {
        try { window.turnstile.remove(widgetIdRef.current); } catch (_) {}
        widgetIdRef.current = null;
      }
    };
  }, []);

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = async (e) => {
    e.preventDefault();
    if (!turnstileToken) {
      setStatus("error");
      return;
    }
    setStatus("sending");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, turnstileToken }),
      });
      if (!res.ok) throw new Error("send failed");
      setStatus("sent");
      setForm({ name: "", email: "", subject: "", message: "" });
      setTurnstileToken("");
      if (widgetIdRef.current !== null && window.turnstile) window.turnstile.reset(widgetIdRef.current);
      setTimeout(() => setStatus("idle"), 5000);
    } catch (err) {
      setStatus("error");
      if (widgetIdRef.current !== null && window.turnstile) window.turnstile.reset(widgetIdRef.current);
    }
  };
  return (
    <div className="static-page">
      <div className="contact-layout">
        <form className="contact-form" onSubmit={submit}>
          <div className="form-row-two">
            <label className="form-field">
              <span className="form-label">Name</span>
              <input type="text" value={form.name} onChange={update("name")} required />
            </label>
            <label className="form-field">
              <span className="form-label">Email</span>
              <input type="email" value={form.email} onChange={update("email")} required />
            </label>
          </div>
          <label className="form-field">
            <span className="form-label">Subject</span>
            <input type="text" value={form.subject} onChange={update("subject")} />
          </label>
          <label className="form-field">
            <span className="form-label">Message</span>
            <textarea rows="6" value={form.message} onChange={update("message")} required />
          </label>
          <div className="turnstile-slot" ref={turnstileRef} />
          <div className="form-actions">
            <button
              type="submit"
              className="form-submit"
              disabled={status === "sending" || !turnstileToken}
            >
              {status === "sending" ? "Sending…" : "Send"}
            </button>
            {status === "sent" && <span className="form-sent">Thanks — I'll get back to you.</span>}
            {status === "error" && <span className="form-error">Couldn't send. Try again?</span>}
          </div>
        </form>

        <aside className="contact-aside">
          <div className="contact-block">
            <div className="contact-label">Phone</div>
            <div className="contact-value">
              <a href="tel:+61428292707">0428 292 707</a>
            </div>
          </div>
          <div className="contact-block">
            <div className="contact-label">Instagram</div>
            <div className="contact-value">
              <a href="https://instagram.com/kylepasalskyj" target="_blank" rel="noopener noreferrer">
                <InstagramIcon /> kylepasalskyj
              </a>
            </div>
          </div>
          <div className="contact-block">
            <div className="contact-label">Based in</div>
            <div className="contact-value">
              <PinIcon /> Melbourne, Australia
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

function Gear() {
  const [data, setData] = React.useState(null);
  const [error, setError] = React.useState(false);

  React.useEffect(() => {
    let cancelled = false;
    fetch("/api/gear")
      .then((r) => (r.ok ? r.json() : Promise.reject(new Error("api"))))
      .then((d) => { if (!cancelled) setData(d); })
      .catch(() => { if (!cancelled) setError(true); });
    return () => { cancelled = true; };
  }, []);

  const categories = data?.categories ?? [];

  return (
    <div className="static-page">
      <p className="gear-intro">
        A collection of things I use and like — both personally and professionally.
      </p>
      {error ? (
        <p className="series-empty">Couldn't load gear.</p>
      ) : !data ? (
        <p className="series-empty">Loading…</p>
      ) : categories.length === 0 ? (
        <p className="series-empty">Nothing listed yet.</p>
      ) : (
        <div className="gear-list">
          {categories.map((cat) => (
            <section key={cat.id} className="gear-category">
              <h2 className="gear-category-name">{cat.name}</h2>
              <ul className="gear-items">
                {cat.items.map((item) => (
                  <li key={item.id} className="gear-item">
                    {item.url ? (
                      <a
                        className="gear-item-name"
                        href={item.url}
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <span className="link-mark" aria-hidden="true">↗</span>
                        {item.name}
                      </a>
                    ) : (
                      <span className="gear-item-name">{item.name}</span>
                    )}
                    {item.description && (
                      <p className="gear-item-desc">{item.description}</p>
                    )}
                  </li>
                ))}
              </ul>
            </section>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { About, Series, Contact, Gear });