---
import kilianPetersImage from '@/assets/images/kilian-peters.jpg';
import { TypingHeading } from '@/components/typing-heading';
import { Caption, Paragraph } from '@/components/ui/typography';
import { Image } from 'astro:assets';

const headings = [
  'Problem Solvers',
  'Visionaries',
  'Developers',
  'Shopify Partners',
  'Free Thinkers',
  'Coffeeholics',
  'Digital Strategists',
  'Perfectionists',
  'Framer Partners',
  'Creative Minds',
  'Passionists',
];
---

<section
  id="about"
  aria-labelledby="about-heading"
  class="relative z-10 w-full bg-neutrals-900"
>
  <div
    class="flex min-h-screen w-full items-center max-lg:flex-col lg:grid lg:grid-cols-[minmax(0,1fr)_minmax(0,min(91.666667%/2,40rem))_minmax(0,min(91.666667%/2,40rem))_minmax(0,1fr)] xl:grid-cols-[minmax(0,1fr)_minmax(0,min(80%/2,40rem))_minmax(0,min(80%/2,40rem))_minmax(0,1fr)]"
  >
    <Image
      src={kilianPetersImage}
      alt="Kilian Peters, founder and visionary behind LOKKEE STUDIOS"
      class="h-full max-h-screen bg-neutrals-800 object-cover object-center grayscale transition-[filter] duration-500 hover:grayscale-0 lg:col-start-1 lg:col-end-3"
    />
    <div class="w-full py-28 max-lg:mx-auto max-lg:w-11/12 max-lg:max-w-7xl lg:ps-10 xl:ps-20">
      <Caption id="about-heading">About</Caption>
      <TypingHeading
        client:visible
        headings={headings}
      />
      <Paragraph>
        We at LOKKEE STUDIOS are problem solvers at heart, fueled by a shared passion for <span
          class="text-neutrals-100">exceptional web development and design from the future</span
        >. Founder and visionary behind LOKKEE STUDIOS is Kilian Peters, an expert in transforming
        ideas into future-ready digital realities, with his roots in Hamburg, Germany. Go big or go
        home!
      </Paragraph>
    </div>
  </div>
</section>
