---
import Layout from '../layouts/Layout.astro'
import Card from '../components/Card/Card.jsx'
import Logo from '../../fwt/components/Logo/Logo'
import Link from '../../fwt/components/Link/Link'
import Footer from '../../fwt/components/Footer/Footer'
import Copyright from '../../fwt/components/Copyright/Copyright'
---

<Layout title="AIO Tools">
  <main class="page">
    <section class="title--section">
      <div class="titleandlogo">
        <Logo size={90} />

        <div class="titleandlogo__texts">
          <span class="titleandlogo__texts__title">AIO Tools</span>
          <span class="titleandlogo__texts__subtitle">All-in-One Tools for Everyone</span>
        </div>
      </div>
    </section>

    <section class="cards--section">
      <Link to="/password-generator"><Card title="Password Generator" description="Generate a strong and secure password for your accounts online." /></Link>
      <Link to="/hash-generator"><Card title="Hash Generator" description="Convert text to multiple hash formats for secure data transmission." /></Link>
      <Link to="/color-converter"><Card title="Color Converter" description="Convert colors to any format. Color picker provided inside." /></Link>
      <Link to="/text-comparison"><Card title="Text Comparison" description="Compare text side by side to detect changes easily." /></Link>
    </section>
  </main>
</Layout>

<style lang="sass">
  @use '/src/styles/breakpoint.sass' as view
  @use '/src/styles/variables.sass' as vars

  .page
    display: flex
    flex-direction: column
    margin-top: 2rem

    .title--section
      display: flex
      flex-direction: column
      align-items: flex-start
      color: vars.$textColor
      padding: 0 2rem

      @media screen and (max-width: view.$tablet)
        justify-content: center
        align-items: center

    .titleandlogo
      display: flex
      flex-direction: row
      gap: 1rem
      align-items: center
      font-family: 'Montserrat'

      @media screen and (max-width: view.$tablet)
        display: flex
        flex-direction: column
        justify-content: center
        text-align: center

      &__texts
        display: flex
        flex-direction: column

        &__title
          font-size: clamp(2rem, 6vw, 3.25rem)
          font-weight: 500

        &__subtitle
          font-size: clamp(0.75rem, 3vw, 1.25rem)
          opacity: 0.8

      &__logo
        @media screen and (max-width: view.$tablet)
          width: 80px
          height: auto

        @media screen and (max-width: view.$mobile)
          width: 60px

    .cards--section
      display: flex
      flex-direction: row
      flex-wrap: wrap
      justify-content: center
      gap: 1rem
      padding: 0.5rem
      margin-top: 2rem
      border-radius: 0.5rem
</style>