/services/id/landing

import { logo, LogoContext, LogoSize, LogoStyle } from "@hedia/brand/html";
import { button, buttons } from "@hedia/hexui/components/button";
import { checkbox } from "@hedia/hexui/components/checkbox";
import { content } from "@hedia/hexui/components/content";
import { footer } from "@hedia/hexui/components/footer";
import { form } from "@hedia/hexui/components/form";
import { header } from "@hedia/hexui/components/header";
import { input } from "@hedia/hexui/components/input";
import { modal } from "@hedia/hexui/components/modal";
import { navbar } from "@hedia/hexui/components/navbar";
import { prose } from "@hedia/hexui/components/prose";
import { screen } from "@hedia/hexui/components/screen";
import { select } from "@hedia/hexui/components/select";
import { site } from "@hedia/hexui/components/site";
import { toast } from "@hedia/hexui/components/toast";
import { verificationInput } from "@hedia/hexui/components/verification-input";
import { a, div, h2, option, p, span } from "@hedia/html/elements";
import { chevLeftOutlineIcon } from "@hedia/iconly/outline";

export default {
  Landing,
  Signup,
  VerifyEmail,
  Login,
};

export function Landing() {
  return site(
    screen(
      content(
        div(
          { class: "light-display-none", style: "text-align: center;" },
          logo({ context: LogoContext.Product, size: LogoSize.Large, style: LogoStyle.Monochrome }),
        ),
        div(
          { class: "dark-display-none", style: "text-align: center;" },
          logo({ context: LogoContext.Brand, size: LogoSize.Large, style: LogoStyle.Monochrome }),
        ),
      ),
      footer(
        buttons(
          { arrangement: "vertical" },
          button({ kind: "primary" }, "Sign up"),
          button({ kind: "secondary" }, "Log in"),
        ),
      ),
    ),
  );
}

export function Signup() {
  return site(
    header(
      navbar(
        div(
          { class: "light-display-none" },
          logo({ context: LogoContext.Product, size: LogoSize.Small, style: LogoStyle.Monochrome }),
        ),
        div(
          { class: "dark-display-none" },
          logo({ context: LogoContext.Brand, size: LogoSize.Small, style: LogoStyle.Monochrome }),
        ),
      ),
    ),
    screen(
      header(navbar(button({ kind: "secondary", shape: "round" }, chevLeftOutlineIcon()), h2("Sign up"))),
      content(
        { alignment: "top" },
        prose(h2("Create account"), p("Create an account to access Hedia.")),
        form(
          { id: "signup-form", spacing: "compact" },
          input({
            type: "email",
            name: "email",
            placeholder: "Email",
            required: true,
          }),
          select(
            {
              name: "country",
              placeholder: "Country",
              required: true,
            },
            option("Denmark"),
            option("Norway"),
            option("Sweden"),
          ),
          input({ type: "text", placeholder: "Name", required: true }),
          input({
            minlength: 8,
            placeholder: "Password",
            required: true,
            type: "password",
            passwordStrengthMeter: {
              hintText: "Password strength:",
              strengthText: {
                weak: "Weak",
                fair: "Fair",
                good: "Good",
                strong: "Strong",
              },
            },
          }),
          checkbox({
            checkboxPosition: "start",
            contained: true,
            description: span("I have read and agree to Hedia's ", a("Terms and conditions")),
            id: "terms-checkbox",
            required: true,
          }),
        ),
      ),
      footer(buttons({ arrangement: "horizontal" }, button({ kind: "primary", form: "signup-form" }, "Sign up"))),
      modal(
        { id: "modal", open: true },
        content(
          prose(
            h2("Email already in use"),
            p(
              "There is already a Hedia account connected to {email}. If you are the account owner, you can log in to your existing account.",
            ),
          ),
          buttons(
            { arrangement: "vertical" },
            button({ kind: "primary", type: "button" }, "Go to Login"),
            button({ kind: "secondary", type: "button", "data-action": "close" }, "Close"),
          ),
        ),
      ),
    ),
  );
}

export function VerifyEmail() {
  return site(
    header(
      navbar(
        div(
          { class: "light-display-none" },
          logo({ context: LogoContext.Product, size: LogoSize.Small, style: LogoStyle.Monochrome }),
        ),
        div(
          { class: "dark-display-none" },
          logo({ context: LogoContext.Brand, size: LogoSize.Small, style: LogoStyle.Monochrome }),
        ),
      ),
    ),
    screen(
      header(navbar(button({ kind: "secondary", shape: "round" }, chevLeftOutlineIcon()), h2("Verify email"))),
      content(
        { alignment: "top" },
        prose(
          h2("Verify email"),
          p(
            "Please enter the one-time code that has been sent to {mail}. If the email isn’t arriving, try checking your spam folder.",
          ),
        ),
        form(
          { id: "verify-email-form" },
          verificationInput({
            name: "verification-code",
          }),
        ),
        prose(p({ style: "text-align: center;" }, a({ class: "plain" }, "Send new verification code"))),
      ),
      footer(
        buttons(
          { arrangement: "horizontal" },
          button({ kind: "primary", form: "verify-email-form" }, "Verify email"),
        ),
      ),
    ),
  );
}

export function Login() {
  return site(
    header(
      navbar(
        div(
          { class: "light-display-none" },
          logo({ context: LogoContext.Product, size: LogoSize.Small, style: LogoStyle.Monochrome }),
        ),
        div(
          { class: "dark-display-none" },
          logo({ context: LogoContext.Brand, size: LogoSize.Small, style: LogoStyle.Monochrome }),
        ),
      ),
    ),
    screen(
      header(navbar(button({ kind: "secondary", shape: "round" }, chevLeftOutlineIcon()), h2("Log in"))),
      content(
        { alignment: "top" },
        prose(h2("Welcome back"), p("Log in to your account to access Hedia.")),
        form(
          { id: "login-form", spacing: "compact" },
          input({
            type: "email",
            name: "email",
            placeholder: "Email",
            required: true,
          }),
          input({
            minlength: 8,
            placeholder: "Password",
            required: true,
            type: "password",
          }),
        ),
        prose(p({ style: "text-align: center;" }, a({ class: "plain" }, "Forgot password?"))),
      ),
      footer(buttons({ arrangement: "horizontal" }, button({ kind: "primary", form: "login-form" }, "Log in"))),
      toast({ kind: "error" }, "Invalid email or password."),
    ),
  );
}