 (defn demo []
   [:div
    [:h1 "This will become a demo"]
-   [demo-simple]
+   [intro]
    [bmi-demo]
    [:p "WIP"]])


(defn simple-component []
  [:div
   [:h3 "I am a component!"]
   [:p.someclass 
    "I have " [:strong "bold"]
    [:span {:style {:color "red"}} " and red "]
    "text."]])

(defn demo-simple []
  [:div
   [:h2 "This is a simple component"]
   [demo-component {:comp simple-component
                    :defs [:ns :simple-component]}]])

(defn calc-bmi [{:keys [height weight bmi] :as params}]
  (let [h (/ height 100)]

      [:span {:style {:color color}} diagnose]
      [slider {:value bmi :min 10 :max 50 :key :bmi :clear :weight}]]]))

(defn intro []
  [:div

   [:p "Cloact provides a minimalistic interface between ClojureScript
and React. It allows you to define React components using nothing but
plain ClojureScript functions, that describe your UI using a
Hiccup-like syntax."]

   [:p "A very basic component may look something like this: "]
   [demo-component {:comp simple-component
                    :defs [:simple-component]}]

   [:p "You can build new components using other components as
   building blocks. That looks like this:"]
   [demo-component {:comp simple-parent
                    :defs [:simple-parent]}]

   [:p "Data is passed to child components using a plain old Clojure
   maps. For example, here is a component that shows items in a "
   [:code "seq"] "." ]

   [demo-component {:comp lister-user
                    :defs [:lister :lister-user]}]
   ])


(defn bmi-demo []
  [:div
   [:h2 "Simple BMI calculator"]
