(* Example 06: Patterns and Components - Reusable Layout Patterns *)

open Htmlit
open Tailwind

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

let create_patterns_demo () =
  (* Create comprehensive patterns 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 "Patterns and Components"];
      El.link ~at:[At.rel "stylesheet"; At.href "patterns_and_components_06.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 (Css.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 "Patterns and Components Demo"];
        
        (* Container Pattern *)
        El.section ~at:[At.class' "mb-12"] [
          El.h2 ~at:[classes_attr (Css.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 "Container Pattern"];
          
          El.div ~at:[classes_attr (Css.tw [Patterns.container ()]); At.class' "bg-white rounded-lg shadow-sm p-6"] [
            El.p ~at:[classes_attr (Css.tw [
              Color.text (Color.make `Gray ~variant:`V600 ());
            ])] [El.txt "This content is inside a container pattern that centers content and provides responsive padding."];
          ];
        ];
        
        (* Card Pattern *)
        El.section ~at:[At.class' "mb-12"] [
          El.h2 ~at:[classes_attr (Css.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 "Card Pattern"];
          
          El.div ~at:[At.class' "grid grid-cols-1 md:grid-cols-3 gap-6"] [
            El.div ~at:[classes_attr (Css.tw [Patterns.card]); At.class' "p-6"] [
              El.h3 ~at:[classes_attr (Css.tw [
                Typography.(to_class (font_size `Lg));
                Typography.(to_class (font_weight `Semibold));
                Color.text (Color.make `Gray ~variant:`V800 ());
              ]); At.class' "mb-2"] [El.txt "Card One"];
              El.p ~at:[classes_attr (Css.tw [
                Color.text (Color.make `Gray ~variant:`V600 ());
              ])] [El.txt "This is a card using the built-in card pattern."];
            ];
            
            El.div ~at:[classes_attr (Css.tw [Patterns.card]); At.class' "p-6"] [
              El.h3 ~at:[classes_attr (Css.tw [
                Typography.(to_class (font_size `Lg));
                Typography.(to_class (font_weight `Semibold));
                Color.text (Color.make `Gray ~variant:`V800 ());
              ]); At.class' "mb-2"] [El.txt "Card Two"];
              El.p ~at:[classes_attr (Css.tw [
                Color.text (Color.make `Gray ~variant:`V600 ());
              ])] [El.txt "Another card with the same styling pattern applied."];
            ];
            
            El.div ~at:[classes_attr (Css.tw [Patterns.card]); At.class' "p-6"] [
              El.h3 ~at:[classes_attr (Css.tw [
                Typography.(to_class (font_size `Lg));
                Typography.(to_class (font_weight `Semibold));
                Color.text (Color.make `Gray ~variant:`V800 ());
              ]); At.class' "mb-2"] [El.txt "Card Three"];
              El.p ~at:[classes_attr (Css.tw [
                Color.text (Color.make `Gray ~variant:`V600 ());
              ])] [El.txt "A third card demonstrating consistent styling."];
            ];
          ];
        ];
        
        (* Flex Center Pattern *)
        El.section ~at:[At.class' "mb-12"] [
          El.h2 ~at:[classes_attr (Css.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 "Flex Center Pattern"];
          
          El.div ~at:[classes_attr (Css.tw [Patterns.flex_center]); At.class' "bg-blue-50 rounded-lg h-32"] [
            El.p ~at:[classes_attr (Css.tw [
              Color.text (Color.make `Blue ~variant:`V600 ());
              Typography.(to_class (font_weight `Medium));
            ])] [El.txt "This content is perfectly centered using flex_center pattern"];
          ];
        ];
        
        (* Stack Pattern *)
        El.section ~at:[At.class' "mb-12"] [
          El.h2 ~at:[classes_attr (Css.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 "Stack Pattern"];
          
          El.div ~at:[classes_attr (Css.tw [Patterns.stack ~gap:(Size.rem 1.0) ()]); At.class' "bg-white rounded-lg shadow-sm p-6"] [
            El.div ~at:[classes_attr (Css.tw [
              Color.bg (Color.make `Green ~variant:`V50 ());
              Spacing.(to_class (p (Size.rem 1.0)));
              Effects.rounded_md;
            ])] [El.txt "Stack Item 1"];
            
            El.div ~at:[classes_attr (Css.tw [
              Color.bg (Color.make `Blue ~variant:`V50 ());
              Spacing.(to_class (p (Size.rem 1.0)));
              Effects.rounded_md;
            ])] [El.txt "Stack Item 2"];
            
            El.div ~at:[classes_attr (Css.tw [
              Color.bg (Color.make `Purple ~variant:`V50 ());
              Spacing.(to_class (p (Size.rem 1.0)));
              Effects.rounded_md;
            ])] [El.txt "Stack Item 3"];
          ];
        ];
        
        (* Inline Stack Pattern *)
        El.section [
          El.h2 ~at:[classes_attr (Css.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 "Inline Stack Pattern"];
          
          El.div ~at:[classes_attr (Css.tw [Patterns.inline_stack ~gap:(Size.rem 1.0) ()]); At.class' "bg-white rounded-lg shadow-sm p-6"] [
            El.span ~at:[classes_attr (Css.tw [
              Color.bg (Color.make `Red ~variant:`V50 ());
              Color.text (Color.make `Red ~variant:`V600 ());
              Spacing.(to_class (px (Size.rem 0.75)));
              Spacing.(to_class (py (Size.rem 0.5)));
              Effects.rounded_full;
              Typography.(to_class (font_size `Sm));
            ])] [El.txt "Tag 1"];
            
            El.span ~at:[classes_attr (Css.tw [
              Color.bg (Color.make `Yellow ~variant:`V50 ());
              Color.text (Color.make `Yellow ~variant:`V600 ());
              Spacing.(to_class (px (Size.rem 0.75)));
              Spacing.(to_class (py (Size.rem 0.5)));
              Effects.rounded_full;
              Typography.(to_class (font_size `Sm));
            ])] [El.txt "Tag 2"];
            
            El.span ~at:[classes_attr (Css.tw [
              Color.bg (Color.make `Indigo ~variant:`V50 ());
              Color.text (Color.make `Indigo ~variant:`V600 ());
              Spacing.(to_class (px (Size.rem 0.75)));
              Spacing.(to_class (py (Size.rem 0.5)));
              Effects.rounded_full;
              Typography.(to_class (font_size `Sm));
            ])] [El.txt "Tag 3"];
          ];
        ];
      ];
    ];
  ] in
  html_doc

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