(* Example 06: Patterns and Components - Reusable components with GADT *)

open Htmlit
open Tailwind_html

let create_patterns_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 "Patterns and Components"];
      El.link ~at:[At.rel "stylesheet"; At.href "patterns_and_components_06.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 "Patterns and Components Demo"];
        
        (* Container Pattern *)
        section ~styles:[margin_bottom (rem 3.0)] [
          h2 ~styles:[
            font_size `Xl;
            font_weight `Semibold;
            text_color (gray 700);
            margin_bottom (rem 1.5);
          ] [txt "Container Pattern"];
          
          card [
            p ~styles:[text_color (gray 600)] [
              txt "This content is inside a container pattern that centers content and provides responsive padding."
            ];
          ];
        ];
        
        (* Card Pattern *)
        section ~styles:[margin_bottom (rem 3.0)] [
          h2 ~styles:[
            font_size `Xl;
            font_weight `Semibold;
            text_color (gray 700);
            margin_bottom (rem 1.5);
          ] [txt "Card Patterns"];
          
          div ~styles:[flex; flex_col] [
            card [
              h3 ~styles:[
                font_size `Lg;
                font_weight `Semibold;
                text_color (gray 800);
                margin_bottom (rem 1.0);
              ] [txt "Basic Card"];
              p ~styles:[text_color (gray 600)] [
                txt "A simple card with padding and shadow."
              ];
            ];
            
            card ~elevated:true [
              h3 ~styles:[
                font_size `Lg;
                font_weight `Semibold;
                text_color (gray 800);
                margin_bottom (rem 1.0);
              ] [txt "Elevated Card"];
              p ~styles:[text_color (gray 600)] [
                txt "This card has a stronger shadow for emphasis."
              ];
            ];
          ];
        ];
        
        (* Button Components *)
        section ~styles:[margin_bottom (rem 3.0)] [
          h2 ~styles:[
            font_size `Xl;
            font_weight `Semibold;
            text_color (gray 700);
            margin_bottom (rem 1.5);
          ] [txt "Button Components"];
          
          card [
            h3 ~styles:[
              font_size `Lg;
              font_weight `Semibold;
              text_color (gray 800);
              margin_bottom (rem 1.5);
            ] [txt "Button Variants"];
            
            div ~styles:[flex; flex_col] [
              div ~styles:[margin_bottom (rem 1.0)] [
                btn_primary ~size:`Sm [txt "Small Primary"];
                btn_primary [txt "Default Primary"];
                btn_primary ~size:`Lg [txt "Large Primary"];
              ];
              
              div ~styles:[margin_bottom (rem 1.0)] [
                btn_secondary ~size:`Sm [txt "Small Secondary"];
                btn_secondary [txt "Default Secondary"];
                btn_secondary ~size:`Lg [txt "Large Secondary"];
              ];
              
              div [
                btn_outline ~size:`Sm [txt "Small Outline"];
                btn_outline [txt "Default Outline"];
                btn_outline ~size:`Lg [txt "Large Outline"];
              ];
            ];
          ];
        ];
        
        (* List Pattern *)
        section ~styles:[margin_bottom (rem 3.0)] [
          h2 ~styles:[
            font_size `Xl;
            font_weight `Semibold;
            text_color (gray 700);
            margin_bottom (rem 1.5);
          ] [txt "List Patterns"];
          
          card [
            h3 ~styles:[
              font_size `Lg;
              font_weight `Semibold;
              text_color (gray 800);
              margin_bottom (rem 1.0);
            ] [txt "Feature List"];
            
            ul ~styles:[text_color (gray 600)] [
              li ~styles:[margin_bottom (rem 0.5)] [txt "✓ Type-safe styling"];
              li ~styles:[margin_bottom (rem 0.5)] [txt "✓ Conflict prevention"];
              li ~styles:[margin_bottom (rem 0.5)] [txt "✓ Succinct syntax"];
              li [txt "✓ Reusable components"];
            ];
          ];
        ];
        
        (* Form Pattern *)
        section [
          h2 ~styles:[
            font_size `Xl;
            font_weight `Semibold;
            text_color (gray 700);
            margin_bottom (rem 1.5);
          ] [txt "Form Patterns"];
          
          card [
            h3 ~styles:[
              font_size `Lg;
              font_weight `Semibold;
              text_color (gray 800);
              margin_bottom (rem 1.5);
            ] [txt "Simple Form"];
            
            div ~styles:[flex; flex_col] [
              div ~styles:[margin_bottom (rem 1.5)] [
                El.label ~at:[At.for' "name"; classes_attr [
                  block;
                  font_weight `Medium;
                  text_color (gray 700);
                  margin_bottom (rem 0.5);
                ]] [txt "Name"];
                El.input ~at:[At.type' "text"; At.id "name"; classes_attr [
                  width full;
                  padding (rem 0.5);
                  border;
                  border_color (gray 300);
                  rounded `Md;
                ]] ();
              ];
              
              div ~styles:[margin_bottom (rem 1.5)] [
                El.label ~at:[At.for' "email"; classes_attr [
                  block;
                  font_weight `Medium;
                  text_color (gray 700);
                  margin_bottom (rem 0.5);
                ]] [txt "Email"];
                El.input ~at:[At.type' "email"; At.id "email"; classes_attr [
                  width full;
                  padding (rem 0.5);
                  border;
                  border_color (gray 300);
                  rounded `Md;
                ]] ();
              ];
              
              btn_primary [txt "Submit"];
            ];
          ];
        ];
      ];
    ];
  ] in
  html

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