(* Example 03: Layout and Spacing - GADT flexbox and spacing demo *)

open Htmlit
open Tailwind_html

let create_layout_demo () =
  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 "Layout and Spacing"];
      El.link ~at:[At.rel "stylesheet"; At.href "layout_and_spacing_03.css"] ();
    ];
    El.body ~at:[classes_attr [
      min_height screen;
      bg_color (gray 50);
      padding (rem 2.0);
    ]] [
      container [
        h1 ~styles:[
          font_size `Xl2;
          font_weight `Bold;
          text_color (gray 800);
          text_center;
          margin_bottom (rem 2.0);
        ] [txt "Layout and Spacing Demo"];
        
        p ~styles:[
          font_size `Lg;
          text_color (gray 600);
          text_center;
          margin_bottom (rem 3.0);
        ] [txt "Master flexbox layouts and spacing with GADT interface"];
        
        (* Flexbox Examples *)
        section ~styles:[margin_bottom (rem 3.0)] [
          h2 ~styles:[
            font_size `Xl;
            font_weight `Semibold;
            text_color (gray 700);
            margin_bottom (rem 2.0);
          ] [txt "Flexbox Layouts"];
          
          (* Centered content *)
          card [
            h3 ~styles:[
              font_size `Lg;
              font_weight `Semibold;
              text_color (gray 700);
              margin_bottom (rem 1.0);
            ] [txt "Centered Content"];
            
            div ~styles:[
              flex;
              justify_center;
              items_center;
              bg_color (blue 100);
              height (rem 8.0);
              rounded `Lg;
              margin_bottom (rem 1.5);
            ] [
              div ~styles:[
                bg_color (Tailwind.Color.white);
                padding (rem 1.5);
                rounded `Md;
                shadow `Sm;
              ] [
                txt "Perfectly Centered Content"
              ];
            ];
          ];
          
          (* Space between items *)
          card [
            h3 ~styles:[
              font_size `Lg;
              font_weight `Semibold;
              text_color (gray 700);
              margin_bottom (rem 1.0);
            ] [txt "Space Between"];
            
            div ~styles:[
              flex;
              justify_between;
              items_center;
              bg_color (green 100);
              padding (rem 1.5);
              rounded `Lg;
            ] [
              div ~styles:[
                bg_color (Tailwind.Color.white);
                padding (rem 1.0);
                rounded `Md;
              ] [txt "Left"];
              div ~styles:[
                bg_color (Tailwind.Color.white);
                padding (rem 1.0);
                rounded `Md;
              ] [txt "Center"];
              div ~styles:[
                bg_color (Tailwind.Color.white);
                padding (rem 1.0);
                rounded `Md;
              ] [txt "Right"];
            ];
          ];
        ];
        
        (* Grid Layout Examples *)
        section ~styles:[margin_bottom (rem 3.0)] [
          h2 ~styles:[
            font_size `Xl;
            font_weight `Semibold;
            text_color (gray 700);
            margin_bottom (rem 2.0);
          ] [txt "CSS Grid Layouts"];
          
          (* 3-column grid *)
          card [
            h3 ~styles:[
              font_size `Lg;
              font_weight `Semibold;
              text_color (gray 700);
              margin_bottom (rem 1.0);
            ] [txt "Three Column Grid"];
            
            div ~styles:[
              grid;
              grid_cols 3;
              gap (rem 1.0);
            ] [
              div ~styles:[
                bg_color (blue 100);
                padding (rem 1.0);
                rounded `Md;
                text_center;
              ] [txt "Item 1"];
              div ~styles:[
                bg_color (green 100);
                padding (rem 1.0);
                rounded `Md;
                text_center;
              ] [txt "Item 2"];
              div ~styles:[
                bg_color (purple 100);
                padding (rem 1.0);
                rounded `Md;
                text_center;
              ] [txt "Item 3"];
              div ~styles:[
                bg_color (red 100);
                padding (rem 1.0);
                rounded `Md;
                text_center;
              ] [txt "Item 4"];
              div ~styles:[
                bg_color (yellow 100);
                padding (rem 1.0);
                rounded `Md;
                text_center;
              ] [txt "Item 5"];
              div ~styles:[
                bg_color (indigo 100);
                padding (rem 1.0);
                rounded `Md;
                text_center;
              ] [txt "Item 6"];
            ];
          ];
          
          (* Grid gap examples *)
          card [
            h3 ~styles:[
              font_size `Lg;
              font_weight `Semibold;
              text_color (gray 700);
              margin_bottom (rem 1.0);
            ] [txt "Grid Gap Variations"];
            
            div ~styles:[margin_bottom (rem 1.5)] [
              h4 ~styles:[
                font_size `Base;
                font_weight `Medium;
                text_color (gray 600);
                margin_bottom (rem 0.5);
              ] [txt "Small Gap"];
              div ~styles:[
                grid;
                grid_cols 4;
                gap (rem 0.5);
              ] (List.init 4 (fun i ->
                div ~styles:[
                  bg_color (blue 200);
                  padding (rem 0.5);
                  rounded `Sm;
                  text_center;
                ] [txt (string_of_int (i + 1))]
              ));
            ];
            
            div ~styles:[margin_bottom (rem 1.5)] [
              h4 ~styles:[
                font_size `Base;
                font_weight `Medium;
                text_color (gray 600);
                margin_bottom (rem 0.5);
              ] [txt "Large Gap"];
              div ~styles:[
                grid;
                grid_cols 3;
                gap (rem 2.0);
              ] (List.init 3 (fun i ->
                div ~styles:[
                  bg_color (green 200);
                  padding (rem 1.0);
                  rounded `Md;
                  text_center;
                ] [txt (Printf.sprintf "Item %d" (i + 1))]
              ));
            ];
            
            div [
              h4 ~styles:[
                font_size `Base;
                font_weight `Medium;
                text_color (gray 600);
                margin_bottom (rem 0.5);
              ] [txt "Asymmetric Gap"];
              div ~styles:[
                grid;
                grid_cols 2;
                gap_x (rem 2.0);
                gap_y (rem 0.5);
              ] (List.init 4 (fun i ->
                div ~styles:[
                  bg_color (purple 200);
                  padding (rem 0.75);
                  rounded `Md;
                  text_center;
                ] [txt (Printf.sprintf "Box %d" (i + 1))]
              ));
            ];
          ];
        ];
        
        (* Spacing Examples *)
        section [
          h2 ~styles:[
            font_size `Xl;
            font_weight `Semibold;
            text_color (gray 700);
            margin_bottom (rem 2.0);
          ] [txt "Spacing System"];
          
          (* Using grid for spacing examples *)
          div ~styles:[
            grid;
            grid_cols 2;
            gap (rem 1.5);
          ] [
            (* Padding example *)
            card [
              h4 ~styles:[
                font_size `Base;
                font_weight `Semibold;
                text_color (gray 700);
                margin_bottom (rem 0.75);
              ] [txt "Padding Example"];
              div ~styles:[
                bg_color (Tailwind.Color.white);
                padding (rem 2.0);
                rounded `Md;
                border;
                border_color (gray 200);
              ] [
                txt "This content has padding (2rem)"
              ];
            ];
            
            (* Margin example *)
            card [
              h4 ~styles:[
                font_size `Base;
                font_weight `Semibold;
                text_color (gray 700);
                margin_bottom (rem 0.75);
              ] [txt "Margin Example"];
              div ~styles:[
                bg_color (Tailwind.Color.white);
                padding (rem 1.0);
                margin (rem 1.5);
                rounded `Md;
                border;
                border_color (gray 200);
              ] [
                txt "This box has margin (1.5rem) from its container"
              ];
            ];
          ];
        ];
      ];
    ];
  ] in
  html

let () =
  let html = create_layout_demo () in
  print_string (El.to_string ~doctype:true html)