import { html } from "lit";

const Template = () => html`
  <style>
    @keyframes sgds-marquee {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-50%);
      }
    }
    .sgds-about-logo-track {
      animation: sgds-marquee 30s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .sgds-about-logo-track {
        animation: none;
      }
    }
  </style>

  <sgds-masthead></sgds-masthead>

  <sgds-mainnav>
    <strong slot="brand">Logo</strong>
  </sgds-mainnav>

  <div class="sgds:bg-surface-default sgds:min-h-screen">
    <div class="sgds-container sgds:py-layout-xl">
      <!-- ① Header: two-column headline + description -->
      <div class="sgds-grid sgds:mb-layout-lg">
        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6">
          <h1 class="sgds:text-display-md sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-default">
            Building digital services that matter for Singapore
          </h1>
        </div>
        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6 sgds:flex sgds:items-end">
          <p class="sgds:text-body-lg sgds:font-regular sgds:leading-md sgds:text-body-subtle">
            We are a team of designers, engineers, and product thinkers committed to delivering citizen-centric digital
            experiences across government.
          </p>
        </div>
      </div>

      <!-- ② Image grid: main image (8 cols) + right column (4 cols) -->
      <div class="sgds-grid sgds:mb-layout-lg" style="--sgds-grid-row-gap: var(--sgds-layout-gap-md)">
        <!-- Main image -->
        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-8 sgds:flex">
          <img
            src="https://images.unsplash.com/photo-1565350897149-38dfafa81d83?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="Team collaborating on a project"
            class="sgds:w-full sgds:object-cover sgds:rounded-lg"
          />
        </div>

        <!-- Right column: breakout card + secondary image -->
        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-4 sgds:flex sgds:flex-col sgds:gap-layout-md">
          <!-- Breakout card -->
          <sgds-thumbnail-card class="sgds:flex-1">
            <div
              slot="thumbnail"
              class="sgds:w-32 sgds:h-32 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:rounded-lg"
            >
              Logo
            </div>
            <span slot="description">
              Trusted by agencies across the whole-of-government ecosystem to deliver accessible, compliant, and
              consistent digital interfaces.
            </span>
            <sgds-link slot="footer">
              <a href="/about">Learn more <sgds-icon name="arrow-right"></sgds-icon></a>
            </sgds-link>
          </sgds-thumbnail-card>

          <!-- Secondary image -->
          <img
            src="https://images.unsplash.com/photo-1606857521015-7f9fcf423740?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="Office environment"
            class="sgds:w-full sgds:object-cover sgds:rounded-lg"
          />
        </div>
      </div>

      <!-- ③ Logo strip -->
      <div class="sgds:mb-layout-lg sgds:overflow-hidden">
        <div class="sgds:text-center sgds:mb-layout-sm">
          <p
            class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-body-subtle"
          >
            Trusted by agencies
          </p>
        </div>

        <!-- Marquee wrapper — CSS scroll animation, no JS required -->
        <div
          class="sgds:overflow-hidden sgds:relative"
          style="mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);"
        >
          <div class="sgds-about-logo-track sgds:flex sgds:gap-layout-xl sgds:w-max">
            <!-- Duplicate the logo set for seamless loop -->
            <div class="sgds:flex sgds:gap-layout-xl sgds:items-center sgds:shrink-0">
              <div
                class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60"
              >
                Agency A
              </div>
              <div
                class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60"
              >
                Agency B
              </div>
              <div
                class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60"
              >
                Agency C
              </div>
              <div
                class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60"
              >
                Agency D
              </div>
              <div
                class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60"
              >
                Agency E
              </div>
            </div>
            <!-- Duplicate for seamless loop -->
            <div class="sgds:flex sgds:gap-layout-xl sgds:items-center sgds:shrink-0" aria-hidden="true">
              <div
                class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60"
              >
                Agency A
              </div>
              <div
                class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60"
              >
                Agency B
              </div>
              <div
                class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60"
              >
                Agency C
              </div>
              <div
                class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60"
              >
                Agency D
              </div>
              <div
                class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60"
              >
                Agency E
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- ④ Achievements panel -->
      <div class="sgds:bg-surface-raised sgds:rounded-lg sgds:p-layout-lg">
        <!-- Panel header -->
        <div class="sgds-grid sgds:mb-layout-md">
          <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6">
            <h2 class="sgds:text-heading-lg sgds:font-bold sgds:leading-lg sgds:tracking-tight sgds:text-default">
              Delivering impact at scale
            </h2>
          </div>
          <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6">
            <p class="sgds:text-body-md sgds:font-regular sgds:leading-xs sgds:text-body-subtle">
              Our platform powers services used by millions of residents and thousands of officers across the Singapore
              government.
            </p>
          </div>
        </div>

        <!-- Stats grid: 4 columns on LG, 2 on SM/MD, 1 on XS -->
        <div class="sgds-grid">
          <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-3">
            <p class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-default">
              12,000+
            </p>
            <p class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:text-body-subtle sgds:mt-1">
              Active users
            </p>
          </div>
          <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-3">
            <p class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-default">
              98%
            </p>
            <p class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:text-body-subtle sgds:mt-1">
              Platform uptime
            </p>
          </div>
          <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-3">
            <p class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-default">
              50+
            </p>
            <p class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:text-body-subtle sgds:mt-1">
              Government agencies
            </p>
          </div>
          <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-3">
            <p class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-default">
              5 years
            </p>
            <p class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:text-body-subtle sgds:mt-1">
              In production
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <sgds-footer></sgds-footer>
`;

export default {
  title: "Templates/About Us/Basic",
  tags: ["!autodocs"],
  parameters: {
    layout: "fullscreen"
  }
};

export const Basic = {
  render: Template.bind({}),
  name: "Basic"
};