(* Generate index.html page linking to all examples *)

open Htmlit
open Tailwind_html

let examples = [
  ("hello_tailwind_01.html", "01. Hello Tailwind", 
   "Your first Tailwind OCaml program with GADT interface",
   ["Basic concepts"; "Type safety"; "GADT syntax"]);
  
  ("colors_and_typography_02.html", "02. Colors and Typography", 
   "Type-safe colors and typography with compile-time validation",
   ["Color variants"; "Typography scale"; "Grid layouts"]);
  
  ("layout_and_spacing_03.html", "03. Layout and Spacing", 
   "Master CSS Grid, flexbox layouts and spacing with GADT",
   ["CSS Grid"; "Flexbox"; "Gap utilities"; "Spacing system"]);
  
  ("responsive_design_04.html", "04. Responsive Design", 
   "Adaptive layouts using GADT interface",
   ["Mobile-first"; "CSS Grid"; "Responsive cards"]);
  
  ("effects_and_variants_05.html", "05. Effects and Variants", 
   "Visual effects with shadows, borders, and rounded corners",
   ["Shadow effects"; "Grid layouts"; "Interactive buttons"]);
  
  ("patterns_and_components_06.html", "06. Patterns and Components", 
   "Reusable component patterns with GADT",
   ["Card patterns"; "Button components"; "Form patterns"]);
  
  ("comprehensive_showcase_07.html", "07. Comprehensive Showcase", 
   "Full application demo with complete UI",
   ["Header/Footer"; "Hero section"; "Feature grids"]);
  
  ("button_demo.html", "Button Demo", 
   "Showcase of all button variants and sizes",
   ["Primary buttons"; "Secondary buttons"; "Outline buttons"]);
]

let create_index () =
  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 "Tailwind OCaml Examples - GADT Interface"];
      El.style [txt {|
        body { font-family: system-ui, -apple-system, sans-serif; }
        .example-card { transition: transform 0.2s, box-shadow 0.2s; }
        .example-card:hover { transform: translateY(-2px); }
      |}];
    ];
    El.body ~at:[classes_attr [
      min_height screen;
      bg_color (gray 50);
      padding (rem 2.0);
    ]] [
      container [
        (* Header *)
        header ~styles:[
          text_center;
          margin_bottom (rem 3.0);
        ] [
          h1 ~styles:[
            font_size `Xl3;
            font_weight `Bold;
            text_color (gray 800);
            margin_bottom (rem 1.0);
          ] [txt "🎨 Tailwind OCaml Examples"];
          
          p ~styles:[
            font_size `Xl;
            text_color (gray 600);
            margin_bottom (rem 1.0);
          ] [txt "Type-safe CSS generation with GADT-based interface"];
          
          p ~styles:[
            font_size `Base;
            text_color (gray 500);
          ] [txt "Explore examples showcasing the power of compile-time guaranteed styling"];
        ];
        
        (* Examples Grid *)
        div ~styles:[
          grid;
          grid_cols 1;
          gap (rem 1.5);
        ] (List.map (fun (file, title, desc, features) ->
          El.a ~at:[At.href file; At.style "text-decoration: none; color: inherit;"] [
            div ~styles:[
              bg_color (Tailwind.Color.white);
              rounded `Lg;
              shadow `Md;
              padding (rem 2.0);
              margin_bottom (rem 1.5);
              border;
              border_color (gray 200);
              transition;
            ] [
              (* Title and description *)
              div ~styles:[margin_bottom (rem 1.0)] [
                h2 ~styles:[
                  font_size `Xl;
                  font_weight `Semibold;
                  text_color (gray 800);
                  margin_bottom (rem 0.5);
                ] [txt title];
                
                p ~styles:[
                  text_color (gray 600);
                  margin_bottom (rem 1.0);
                ] [txt desc];
              ];
              
              (* Feature tags *)
              div ~styles:[
                grid;
                grid_cols 3;
                gap_x (rem 0.5);
                gap_y (rem 0.5);
              ] (List.map (fun feature ->
                span ~styles:[
                  bg_color (blue 100);
                  text_color (blue 700);
                  padding_x (rem 0.75);
                  padding_y (rem 0.25);
                  rounded `Full;
                  font_size `Sm;
                  font_weight `Medium;
                  margin_right (rem 0.5);
                  margin_bottom (rem 0.5);
                ] [txt feature]
              ) features);
              
              (* View link *)
              div ~styles:[
                margin_top (rem 1.0);
                text_right;
              ] [
                span ~styles:[
                  text_color (blue 600);
                  font_weight `Medium;
                ] [txt "View Example →"];
              ];
            ];
          ]
        ) examples);
        
        (* Footer *)
        footer ~styles:[
          text_center;
          margin_top (rem 3.0);
          padding_y (rem 2.0);
          border;
          border_color (gray 200);
        ] [
          p ~styles:[
            text_color (gray 500);
            font_size `Sm;
            margin_bottom (rem 0.5);
          ] [txt "Built with OCaml, Tailwind CSS, and GADT-based type safety"];
          
          p ~styles:[
            text_color (gray 400);
            font_size `Xs;
          ] [txt "© 2024 Tailwind OCaml - Compile-time guaranteed styling"];
        ];
      ];
    ];
  ] in
  html

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