(* Example 01: Hello Tailwind - Your First Tailwind OCaml Program *)

open Htmlit
open Tailwind_html

let create_page () =
  
  let html = El.html [
    El.head [
      El.meta ~at:[At.charset "utf-8"] ();
      El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();
      El.title [txt "Hello Tailwind"];
      El.link ~at:[At.rel "stylesheet"; At.href "hello_tailwind_01.css"] ();
    ];
    El.body ~at:[classes_attr [
      min_height screen;
      bg_color (gray 50);
      flex;
      items_center;
      justify_center;
      padding (rem 2.0);
    ]] [
      container [
        h1 ~styles:[
          font_size `Xl2;
          font_weight `Bold;
          text_color (blue 600);
          margin_bottom (rem 1.0);
        ] [
          txt "Hello, Tailwind OCaml!"
        ];
        p ~styles:[
          text_color (gray 600);
          margin_bottom (rem 1.5);
        ] [
          txt "This is your first Tailwind OCaml program. ";
          txt "The heading above uses type-safe Tailwind classes."
        ];
        card [
          h2 ~styles:[
            font_size `Lg;
            font_weight `Semibold;
            text_color (gray 800);
            margin_bottom (rem 0.75);
          ] [
            txt "Generated Classes:"
          ];
          El.pre ~at:[classes_attr [
            bg_color (gray 100);
            padding (rem 0.75);
            rounded `Sm;
            font_size `Sm;
          ]] [
            El.code ~at:[classes_attr [
              text_color (blue 600);
            ]] [
              txt "text-blue-600 text-2xl font-bold mb-4"
            ];
          ];
        ];
        div ~styles:[
          margin_top (rem 2.0);
        ] [
          h2 ~styles:[
            font_size `Lg;
            font_weight `Semibold;
            text_color (gray 700);
            margin_bottom (rem 1.5);
          ] [
            txt "What you're learning:"
          ];
          ul ~styles:[
            text_left;
            text_color (gray 600);
          ] [
            li ~styles:[flex; items_start] [
              span ~styles:[
                text_color (green 500);
                margin_right (rem 0.5);
              ] [txt "✓"];
              txt "Using succinct combinator functions"
            ];
            li ~styles:[flex; items_start] [
              span ~styles:[
                text_color (green 500);
                margin_right (rem 0.5);
              ] [txt "✓"];
              txt "Type-safe color creation with simple functions"
            ];
            li ~styles:[flex; items_start] [
              span ~styles:[
                text_color (green 500);
                margin_right (rem 0.5);
              ] [txt "✓"];
              txt "Enhanced element functions with styling parameters"
            ];
            li ~styles:[flex; items_start] [
              span ~styles:[
                text_color (green 500);
                margin_right (rem 0.5);
              ] [txt "✓"];
              txt "Automatic class-to-attribute conversion"
            ];
          ];
        ];
      ];
    ];
  ] in
  html

let () =
  (* Output HTML to stdout *)
  let html = create_page () in
  print_string (El.to_string ~doctype:true html)