(* Example 04: Responsive Design - Building Adaptive Layouts *)

open Htmlit
open Tailwind

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

let create_responsive_demo () =
  (* Create comprehensive responsive 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 "Responsive Design"];
      El.link ~at:[At.rel "stylesheet"; At.href "responsive_design_04.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));
          Responsive.(to_class (at_breakpoint `Md (Typography.(to_class (font_size `Xl3)))));
          Typography.(to_class (font_weight `Bold));
          Color.text (Color.make `Gray ~variant:`V700 ());
        ]); At.class' "mb-8 text-center"] [El.txt "Responsive Design 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-8"] [
          El.txt "Resize your browser window to see responsive changes. The indicator in the top-right shows the current breakpoint."
        ];
        
        (* Responsive Grid *)
        El.section ~at:[At.class' "mb-8"] [
          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-6"] [El.txt "Responsive Grid"];
          
          El.p ~at:[classes_attr (tw [
            Color.text (Color.make `Gray ~variant:`V600 ());
          ]); At.class' "mb-4"] [
            El.txt "1 column → 2 columns (md) → 3 columns (lg) → 4 columns (xl)"
          ];
          
          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))))));
            Responsive.(to_class (at_breakpoint `Lg (Grid.(to_class (template_cols (`Cols 3))))));
            Responsive.(to_class (at_breakpoint `Xl (Grid.(to_class (template_cols (`Cols 4))))));
            Spacing.(to_class (gap `All (Size.rem 1.0)));
          ])] (List.init 8 (fun i ->
            let colors = [|
              Color.make `Blue ~variant:`V100 ();
              Color.make `Green ~variant:`V100 ();
              Color.make `Purple ~variant:`V100 ();
              Color.make `Red ~variant:`V100 ();
              Color.make `Yellow ~variant:`V100 ();
            |] in
            El.div ~at:[classes_attr (tw [
              Color.bg colors.(i mod (Array.length colors));
              Spacing.(to_class (p (Size.rem 1.5)));
            ]); At.class' "rounded-lg text-center"] [
              El.txt (Printf.sprintf "Item %d" (i + 1))
            ]
          ));
        ];
        
        (* Responsive Typography *)
        El.section ~at:[At.class' "mb-8"] [
          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-6"] [El.txt "Responsive Typography"];
          
          El.div ~at:[classes_attr (tw [
            Color.bg (Color.make `Gray ~variant:`V100 ());
            Spacing.(to_class (p (Size.rem 1.5)));
          ]); At.class' "rounded-lg text-center"] [
            El.h3 ~at:[classes_attr (tw [
              Typography.(to_class (font_size `Base));
              Responsive.(to_class (at_breakpoint `Md (Typography.(to_class (font_size `Lg)))));
              Responsive.(to_class (at_breakpoint `Lg (Typography.(to_class (font_size `Xl2)))));
              Typography.(to_class (font_weight `Semibold));
              Color.text (Color.make `Blue ~variant:`V600 ());
            ]); At.class' "mb-4"] [El.txt "Responsive Heading"];
            
            El.p ~at:[classes_attr (tw [
              Typography.(to_class (font_size `Sm));
              Responsive.(to_class (at_breakpoint `Md (Typography.(to_class (font_size `Base)))));
              Color.text (Color.make `Gray ~variant:`V600 ());
            ])] [
              El.txt "This text scales: small on mobile, base on tablet, and larger on desktop. The heading above also scales responsively."
            ];
          ];
        ];
        
        (* Show/Hide Elements *)
        El.section ~at:[At.class' "mb-8"] [
          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-6"] [El.txt "Responsive Visibility"];
          
          El.div ~at:[classes_attr (tw [
            Display.flex;
            Flexbox.(to_class (direction `Col));
            Responsive.(to_class (at_breakpoint `Md (Flexbox.(to_class (direction `Row)))));
            Spacing.(to_class (gap `All (Size.rem 1.0)));
          ])] [
            El.div ~at:[classes_attr (tw [
              Color.bg (Color.make `Blue ~variant:`V100 ());
              Spacing.(to_class (p (Size.rem 1.5)));
            ]); At.class' "rounded-lg text-center"] [
              El.txt "Always visible"
            ];
            
            El.div ~at:[classes_attr (tw [
              Color.bg (Color.make `Green ~variant:`V100 ());
              Spacing.(to_class (p (Size.rem 1.5)));
              Display.hidden;
              Responsive.(to_class (at_breakpoint `Md Display.block));
            ]); At.class' "rounded-lg text-center"] [
              El.txt "Hidden on mobile, visible on md+"
            ];
            
            El.div ~at:[classes_attr (tw [
              Color.bg (Color.make `Purple ~variant:`V100 ());
              Spacing.(to_class (p (Size.rem 1.5)));
              Display.hidden;
              Responsive.(to_class (at_breakpoint `Lg Display.block));
            ]); At.class' "rounded-lg text-center"] [
              El.txt "Only visible on lg+"
            ];
          ];
        ];
        
        (* Responsive Spacing *)
        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-6"] [El.txt "Responsive Spacing"];
          
          El.div ~at:[classes_attr (tw [
            Color.bg (Color.make `Gray ~variant:`V100 ());
            Spacing.(to_class (p (Size.rem 1.0)));
            Responsive.(to_class (at_breakpoint `Md (Spacing.(to_class (p (Size.rem 1.5))))));
            Responsive.(to_class (at_breakpoint `Lg (Spacing.(to_class (p (Size.rem 2.0))))));
          ]); At.class' "rounded-lg"] [
            El.div ~at:[classes_attr (tw [
              Color.bg Color.white;
              Spacing.(to_class (p (Size.rem 1.0)));
            ]); At.class' "rounded"] [
              El.p [El.txt "This container has responsive padding:"];
              El.ul [
                El.li [El.txt "p-4 (1rem) on mobile"];
                El.li [El.txt "md:p-6 (1.5rem) on tablet"];
                El.li [El.txt "lg:p-8 (2rem) on desktop"];
              ];
            ];
          ];
        ];
      ];
    ];
  ] in
  
  let html_string = El.to_string ~doctype:true html_doc in
  print_string html_string

let () = create_responsive_demo ()