(* Example 05: Effects and Variants - Visual effects with GADT *)

open Htmlit
open Tailwind_html

let create_effects_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 "Effects and Variants"];
      El.link ~at:[At.rel "stylesheet"; At.href "effects_and_variants_05.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 "Effects and Variants Demo"];
        
        (* Shadow Effects *)
        section ~styles:[margin_bottom (rem 2.0)] [
          h2 ~styles:[
            font_size `Xl;
            font_weight `Semibold;
            text_color (gray 700);
            margin_bottom (rem 1.5);
          ] [txt "Shadow Effects"];
          
          div ~styles:[
            grid;
            grid_cols 1;
            gap (rem 1.0);
          ] [
            div ~styles:[
              bg_color (Tailwind.Color.white);
              padding (rem 1.5);
              shadow `Sm;
              rounded `Lg;
              margin_bottom (rem 1.0);
              text_center;
            ] [
              h3 ~styles:[
                font_weight `Semibold;
                text_color (gray 700);
                margin_bottom (rem 0.5);
              ] [txt "Small Shadow"];
              p ~styles:[
                font_size `Sm;
                text_color (gray 600);
              ] [txt "shadow-sm"];
            ];
            
            div ~styles:[
              bg_color (Tailwind.Color.white);
              padding (rem 1.5);
              shadow `Md;
              rounded `Lg;
              margin_bottom (rem 1.0);
              text_center;
            ] [
              h3 ~styles:[
                font_weight `Semibold;
                text_color (gray 700);
                margin_bottom (rem 0.5);
              ] [txt "Medium Shadow"];
              p ~styles:[
                font_size `Sm;
                text_color (gray 600);
              ] [txt "shadow-md"];
            ];
            
            div ~styles:[
              bg_color (Tailwind.Color.white);
              padding (rem 1.5);
              shadow `Lg;
              rounded `Lg;
              text_center;
            ] [
              h3 ~styles:[
                font_weight `Semibold;
                text_color (gray 700);
                margin_bottom (rem 0.5);
              ] [txt "Large Shadow"];
              p ~styles:[
                font_size `Sm;
                text_color (gray 600);
              ] [txt "shadow-lg"];
            ];
          ];
        ];
        
        (* Rounded Corners *)
        section ~styles:[margin_bottom (rem 2.0)] [
          h2 ~styles:[
            font_size `Xl;
            font_weight `Semibold;
            text_color (gray 700);
            margin_bottom (rem 1.5);
          ] [txt "Border Radius"];
          
          div ~styles:[
            grid;
            grid_cols 2;
            gap (rem 1.0);
          ] [
            div ~styles:[
              bg_color (blue 100);
              padding (rem 1.0);
              rounded `Sm;
              text_center;
              margin_bottom (rem 1.0);
            ] [txt "Small Radius"];
            
            div ~styles:[
              bg_color (green 100);
              padding (rem 1.0);
              rounded `Md;
              text_center;
              margin_bottom (rem 1.0);
            ] [txt "Medium Radius"];
            
            div ~styles:[
              bg_color (purple 100);
              padding (rem 1.0);
              rounded `Lg;
              text_center;
              margin_bottom (rem 1.0);
            ] [txt "Large Radius"];
            
            div ~styles:[
              bg_color (yellow 100);
              padding (rem 1.0);
              rounded `Full;
              text_center;
            ] [txt "Full Radius"];
          ];
        ];
        
        (* Interactive Buttons *)
        section ~styles:[margin_bottom (rem 2.0)] [
          h2 ~styles:[
            font_size `Xl;
            font_weight `Semibold;
            text_color (gray 700);
            margin_bottom (rem 1.5);
          ] [txt "Interactive Buttons"];
          
          div ~styles:[
            grid;
            grid_cols 1;
            gap (rem 1.0);
          ] [
            btn_primary [txt "Primary Button with Hover"];
            btn_secondary [txt "Secondary Button"];
            btn_outline [txt "Outline Button"];
          ];
        ];
        
        (* Border Effects *)
        section [
          h2 ~styles:[
            font_size `Xl;
            font_weight `Semibold;
            text_color (gray 700);
            margin_bottom (rem 1.5);
          ] [txt "Border Effects"];
          
          div ~styles:[
            grid;
            grid_cols 1;
            gap (rem 1.0);
          ] [
            (* Regular border *)
            div ~styles:[
              bg_color (Tailwind.Color.white);
              padding (rem 1.5);
              border;
              border_color (gray 200);
              rounded `Lg;
              text_center;
              margin_bottom (rem 1.0);
            ] [
              h3 ~styles:[
                font_weight `Semibold;
                text_color (gray 700);
                margin_bottom (rem 0.5);
              ] [txt "Regular Border"];
              p ~styles:[
                font_size `Sm;
                text_color (gray 600);
              ] [txt "border border-gray-200"];
            ];
            
            (* Colored border *)
            div ~styles:[
              bg_color (Tailwind.Color.white);
              padding (rem 1.5);
              border;
              border_color (blue 300);
              rounded `Lg;
              text_center;
            ] [
              h3 ~styles:[
                font_weight `Semibold;
                text_color (blue 600);
                margin_bottom (rem 0.5);
              ] [txt "Colored Border"];
              p ~styles:[
                font_size `Sm;
                text_color (gray 600);
              ] [txt "border border-blue-300"];
            ];
          ];
        ];
      ];
    ];
  ] in
  html

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