export default function ParkLoading() {
  return (
    <div style={{ minHeight: "100vh", background: "var(--color-bg)" }}>
      <header style={{
        position: "sticky",
        top: 0,
        zIndex: 20,
        background: "var(--color-bg)",
        borderBottom: "1px solid var(--color-border)",
        padding: "12px 24px",
        display: "flex",
        alignItems: "center",
        gap: 16,
      }}>
        <div className="skeleton" style={{ width: 120, height: 18, borderRadius: 4 }} />
        <div style={{ width: 1, height: 16, background: "var(--color-border)" }} />
        <div className="skeleton" style={{ width: 180, height: 16, borderRadius: 4 }} />
      </header>

      <main style={{ padding: "24px 32px", maxWidth: 1280, margin: "0 auto", display: "flex", flexDirection: "column", gap: 40 }}>
        <section>
          <div className="skeleton" style={{ width: "100%", height: 320, borderRadius: 8 }} />
        </section>
        <section>
          <div className="skeleton" style={{ width: 180, height: 16, borderRadius: 4, marginBottom: 16 }} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 6 }}>
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} className="skeleton" style={{ height: 36, borderRadius: 8 }} />
            ))}
          </div>
        </section>
      </main>
    </div>
  );
}
