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

open Htmlit
open Tailwind

let classes_attr tailwind_classes = 
  At.class' (Tailwind.to_string tailwind_classes)

let create_page () =
  let hello_classes = tw [
    Color.text (Color.make `Blue ~variant:`V600 ());
    Typography.(to_class (font_size `Xl2));
    Typography.(to_class (font_weight `Bold));
    Spacing.(to_class (mb (Size.rem 1.0)));
  ] in
  
  let body_classes = tw [
    Layout.(to_class (min_height Size.screen));
    Color.bg (Color.make `Gray ~variant:`V50 ());
    Display.flex;
    Flexbox.(to_class (align_items `Center));
    Flexbox.(to_class (justify `Center));
    Spacing.(to_class (p (Size.rem 2.0)));
  ] in
  
  let container_classes = tw [
    Spacing.(to_class (mx `Auto));
    Typography.(to_class (text_align `Center));
    Spacing.(to_class (px (Size.rem 1.0)));
  ] in
  
  let paragraph_classes = tw [
    Color.text (Color.make `Gray ~variant:`V600 ());
    Spacing.(to_class (mb (Size.rem 1.5)));
  ] in
  
  let card_classes = tw [
    Color.bg Color.white;
    Effects.rounded_lg;
    Effects.shadow_sm;
    Spacing.(to_class (p (Size.rem 1.5)));
    Typography.(to_class (text_align `Left));
  ] in
  
  let subheading_classes = tw [
    Typography.(to_class (font_size `Lg));
    Typography.(to_class (font_weight `Semibold));
    Color.text (Color.make `Gray ~variant:`V800 ());
    Spacing.(to_class (mb (Size.rem 0.75)));
  ] in
  
  let code_block_classes = tw [
    Color.bg (Color.make `Gray ~variant:`V100 ());
    Spacing.(to_class (p (Size.rem 0.75)));
    Effects.rounded_sm;
    Typography.(to_class (font_size `Sm));
    Layout.(to_class (overflow `X `Auto));
  ] in
  
  let code_classes = tw [
    Color.text (Color.make `Blue ~variant:`V600 ());
  ] in
  
  let section_classes = tw [
    Spacing.(to_class (mt (Size.rem 2.0)));
    Spacing.(to_class (gap `Y (Size.rem 1.0)));
  ] in
  
  let list_classes = tw [
    Typography.(to_class (text_align `Left));
    Spacing.(to_class (gap `Y (Size.rem 0.5)));
    Color.text (Color.make `Gray ~variant:`V600 ());
  ] in
  
  let list_item_classes = tw [
    Display.flex;
    Flexbox.(to_class (align_items `Start));
  ] in
  
  let checkmark_classes = tw [
    Color.text (Color.make `Green ~variant:`V500 ());
    Spacing.(to_class (mr (Size.rem 0.5)));
  ] in
  
  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 [El.txt "Hello Tailwind"];
      El.link ~at:[At.rel "stylesheet"; At.href "hello_tailwind_01.css"] ();
    ];
    El.body ~at:[classes_attr body_classes] [
      El.div ~at:[classes_attr container_classes] [
        El.h1 ~at:[classes_attr hello_classes] [
          El.txt "Hello, Tailwind OCaml!"
        ];
        El.p ~at:[classes_attr paragraph_classes] [
          El.txt "This is your first Tailwind OCaml program. ";
          El.txt "The heading above uses type-safe Tailwind classes."
        ];
        El.div ~at:[classes_attr card_classes] [
          El.h2 ~at:[classes_attr subheading_classes] [
            El.txt "Generated Classes:"
          ];
          El.pre ~at:[classes_attr code_block_classes] [
            El.code ~at:[classes_attr code_classes] [
              El.txt (to_string hello_classes)
            ];
          ];
        ];
        El.div ~at:[classes_attr section_classes] [
          El.h3 ~at:[classes_attr subheading_classes] [
            El.txt "What you're learning:"
          ];
          El.ul ~at:[classes_attr list_classes] [
            El.li ~at:[classes_attr list_item_classes] [
              El.span ~at:[classes_attr checkmark_classes] [El.txt "✓"];
              El.txt "Using the `tw` function to compose Tailwind classes"
            ];
            El.li ~at:[classes_attr list_item_classes] [
              El.span ~at:[classes_attr checkmark_classes] [El.txt "✓"];
              El.txt "Type-safe color creation with variants"
            ];
            El.li ~at:[classes_attr list_item_classes] [
              El.span ~at:[classes_attr checkmark_classes] [El.txt "✓"];
              El.txt "Typography utilities for font size and weight"
            ];
            El.li ~at:[classes_attr list_item_classes] [
              El.span ~at:[classes_attr checkmark_classes] [El.txt "✓"];
              El.txt "Converting Tailwind classes to HTML attributes"
            ];
          ];
        ];
      ];
    ];
  ] in
  html

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