(* Example 03: Layout and Spacing - Mastering Box Model and Flexbox *)

open Htmlit
open Tailwind

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

let create_layout_demo () =
  (* Create comprehensive layout demonstration *)
  let html_doc = 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 "Layout and Spacing"];
      El.link ~at:[At.rel "stylesheet"; At.href "layout_and_spacing_03.css"] ();
    ];
    El.body ~at:[At.class' "min-h-screen bg-gray-50 p-8"] [
      El.div ~at:[At.class' "max-w-6xl mx-auto"] [
        El.h1 ~at:[classes_attr (tw [
          Typography.(to_class (font_size `Xl2));
          Typography.(to_class (font_weight `Bold));
          Color.text (Color.make `Gray ~variant:`V800 ());
        ]); At.class' "mb-8 text-center"] [El.txt "Layout and Spacing Demo"];
        
        El.p ~at:[classes_attr (tw [
          Typography.(to_class (font_size `Lg));
          Color.text (Color.make `Gray ~variant:`V600 ());
        ]); At.class' "text-center mb-12"] [
          El.txt "Master the box model, flexbox, and CSS grid with type-safe utilities."
        ];
        
        (* Flexbox Examples *)
        El.section ~at:[At.class' "mb-12"] [
          El.h2 ~at:[classes_attr (tw [
            Typography.(to_class (font_size `Xl));
            Typography.(to_class (font_weight `Semibold));
            Color.text (Color.make `Gray ~variant:`V700 ());
          ]); At.class' "mb-8"] [El.txt "Flexbox Layouts"];
          
          (* Centered content *)
          El.div ~at:[At.class' "mb-8"] [
            El.h3 ~at:[classes_attr (tw [
              Typography.(to_class (font_size `Lg));
              Typography.(to_class (font_weight `Semibold));
              Color.text (Color.make `Gray ~variant:`V700 ());
            ]); At.class' "mb-4"] [El.txt "Centered Content"];
            
            El.div ~at:[classes_attr (tw [
              Display.flex;
              Flexbox.(to_class (justify `Center));
              Flexbox.(to_class (align_items `Center));
              Color.bg (Color.make `Blue ~variant:`V100 ());
              Layout.(to_class (height (Size.rem 8.0)));
              Effects.rounded_lg;
            ])] [
              El.div ~at:[classes_attr (tw [
                Color.bg Color.white;
                Spacing.(to_class (p (Size.rem 1.5)));
                Effects.rounded_md;
                Effects.shadow_sm;
              ])] [
                El.txt "Perfectly Centered Content"
              ];
            ];
          ];
          
          (* Space between items *)
          El.div ~at:[At.class' "mb-8"] [
            El.h3 ~at:[classes_attr (tw [
              Typography.(to_class (font_size `Lg));
              Typography.(to_class (font_weight `Semibold));
              Color.text (Color.make `Gray ~variant:`V700 ());
            ]); At.class' "mb-4"] [El.txt "Space Between"];
            
            El.div ~at:[classes_attr (tw [
              Display.flex;
              Flexbox.(to_class (justify `Between));
              Flexbox.(to_class (align_items `Center));
              Color.bg (Color.make `Green ~variant:`V100 ());
              Spacing.(to_class (p (Size.rem 1.5)));
              Effects.rounded_lg;
            ])] [
              El.div ~at:[classes_attr (tw [
                Color.bg Color.white;
                Spacing.(to_class (p (Size.rem 1.0)));
                Effects.rounded_md;
              ])] [El.txt "Left"];
              El.div ~at:[classes_attr (tw [
                Color.bg Color.white;
                Spacing.(to_class (p (Size.rem 1.0)));
                Effects.rounded_md;
              ])] [El.txt "Center"];
              El.div ~at:[classes_attr (tw [
                Color.bg Color.white;
                Spacing.(to_class (p (Size.rem 1.0)));
                Effects.rounded_md;
              ])] [El.txt "Right"];
            ];
          ];
          
          (* Flex direction example *)
          El.div [
            El.h3 ~at:[classes_attr (tw [
              Typography.(to_class (font_size `Lg));
              Typography.(to_class (font_weight `Semibold));
              Color.text (Color.make `Gray ~variant:`V700 ());
            ]); At.class' "mb-4"] [El.txt "Flex Direction Column"];
            
            El.div ~at:[classes_attr (tw [
              Display.flex;
              Flexbox.(to_class (direction `Col));
              Spacing.(to_class (gap `All (Size.rem 1.0)));
              Color.bg (Color.make `Purple ~variant:`V100 ());
              Spacing.(to_class (p (Size.rem 1.5)));
              Effects.rounded_lg;
            ])] [
              El.div ~at:[classes_attr (tw [
                Color.bg Color.white;
                Spacing.(to_class (p (Size.rem 1.0)));
                Effects.rounded_md;
              ]); At.class' "text-center"] [El.txt "Item 1"];
              El.div ~at:[classes_attr (tw [
                Color.bg Color.white;
                Spacing.(to_class (p (Size.rem 1.0)));
                Effects.rounded_md;
              ]); At.class' "text-center"] [El.txt "Item 2"];
              El.div ~at:[classes_attr (tw [
                Color.bg Color.white;
                Spacing.(to_class (p (Size.rem 1.0)));
                Effects.rounded_md;
              ]); At.class' "text-center"] [El.txt "Item 3"];
            ];
          ];
        ];
        
        (* Grid Examples *)
        El.section ~at:[At.class' "mb-12"] [
          El.h2 ~at:[classes_attr (tw [
            Typography.(to_class (font_size `Xl));
            Typography.(to_class (font_weight `Semibold));
            Color.text (Color.make `Gray ~variant:`V700 ());
          ]); At.class' "mb-8"] [El.txt "CSS Grid Layouts"];
          
          (* 2-column grid *)
          El.div ~at:[At.class' "mb-8"] [
            El.h3 ~at:[classes_attr (tw [
              Typography.(to_class (font_size `Lg));
              Typography.(to_class (font_weight `Semibold));
              Color.text (Color.make `Gray ~variant:`V700 ());
            ]); At.class' "mb-4"] [El.txt "Two Column Grid"];
            
            El.div ~at:[classes_attr (tw [
              Display.grid;
              Grid.(to_class (template_cols (`Cols 2)));
              Spacing.(to_class (gap `All (Size.rem 1.5)));
            ])] (List.init 4 (fun i ->
              El.div ~at:[classes_attr (tw [
                Color.bg (Color.make `Red ~variant:`V100 ());
                Spacing.(to_class (p (Size.rem 1.5)));
                Effects.rounded_lg;
              ]); At.class' "text-center"] [
                El.txt (Printf.sprintf "Grid Item %d" (i + 1))
              ]
            ));
          ];
          
          (* 3-column grid *)
          El.div ~at:[At.class' "mb-8"] [
            El.h3 ~at:[classes_attr (tw [
              Typography.(to_class (font_size `Lg));
              Typography.(to_class (font_weight `Semibold));
              Color.text (Color.make `Gray ~variant:`V700 ());
            ]); At.class' "mb-4"] [El.txt "Three Column Grid"];
            
            El.div ~at:[classes_attr (tw [
              Display.grid;
              Grid.(to_class (template_cols (`Cols 3)));
              Spacing.(to_class (gap `All (Size.rem 1.5)));
            ])] (List.init 6 (fun i ->
              El.div ~at:[classes_attr (tw [
                Color.bg (Color.make `Yellow ~variant:`V100 ());
                Spacing.(to_class (p (Size.rem 1.5)));
                Effects.rounded_lg;
              ]); At.class' "text-center"] [
                El.txt (Printf.sprintf "Item %d" (i + 1))
              ]
            ));
          ];
        ];
        
        (* Spacing Examples *)
        El.section [
          El.h2 ~at:[classes_attr (tw [
            Typography.(to_class (font_size `Xl));
            Typography.(to_class (font_weight `Semibold));
            Color.text (Color.make `Gray ~variant:`V700 ());
          ]); At.class' "mb-8"] [El.txt "Spacing System"];
          
          El.div ~at:[classes_attr (tw [
            Display.grid;
            Grid.(to_class (template_cols (`Cols 1)));
            Responsive.(to_class (at_breakpoint `Md (Grid.(to_class (template_cols (`Cols 2))))));
            Spacing.(to_class (gap `All (Size.rem 2.0)));
          ])] [
            (* Padding example *)
            El.div ~at:[classes_attr (tw [
              Color.bg (Color.make `Indigo ~variant:`V100 ());
              Spacing.(to_class (p (Size.rem 1.5)));
              Effects.rounded_lg;
            ])] [
              El.h4 ~at:[classes_attr (tw [
                Typography.(to_class (font_size `Base));
                Typography.(to_class (font_weight `Semibold));
                Color.text (Color.make `Gray ~variant:`V700 ());
              ]); At.class' "mb-3"] [El.txt "Padding Example"];
              El.div ~at:[classes_attr (tw [
                Color.bg Color.white;
                Spacing.(to_class (p (Size.rem 2.0)));
                Effects.rounded_md;
                Effects.border;
                Color.border (Color.make `Gray ~variant:`V200 ());
              ])] [
                El.txt "This content has p-8 (2rem padding)"
              ];
            ];
            
            (* Margin example *)
            El.div ~at:[classes_attr (tw [
              Color.bg (Color.make `Cyan ~variant:`V100 ());
              Spacing.(to_class (p (Size.rem 1.5)));
              Effects.rounded_lg;
            ])] [
              El.h4 ~at:[classes_attr (tw [
                Typography.(to_class (font_size `Base));
                Typography.(to_class (font_weight `Semibold));
                Color.text (Color.make `Gray ~variant:`V700 ());
              ]); At.class' "mb-3"] [El.txt "Margin Example"];
              El.div ~at:[classes_attr (tw [
                Color.bg Color.white;
                Spacing.(to_class (p (Size.rem 1.0)));
                Spacing.(to_class (m (Size.rem 1.5)));
                Effects.rounded_md;
                Effects.border;
                Color.border (Color.make `Gray ~variant:`V200 ());
              ])] [
                El.txt "This box has m-6 (1.5rem margin) from its container"
              ];
            ];
          ];
        ];
      ];
    ];
  ] in
  html_doc

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