import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Animate } from "@/components/animations/animate"
import { Stagger } from "@/components/animations/stagger"
import Image from "next/image"


export function AboutSection() {
  return (
    <section className="w-full py-12 md:py-24 lg:py-32 bg-white dark:bg-gray-950" id="about">
      <div className="container px-4 md:px-6 mx-auto">
        <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
          <div className="flex flex-col justify-center space-y-4">
            <div className="space-y-2">
              <Animate animation="fadeInUp" delay={0.1}>
                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl text-primary-900 dark:text-primary-400">
                  La nostra storia
                </h2>
              </Animate>
              <Animate animation="fadeInUp" delay={0.2}>
                <p className="max-w-[600px] text-gray-500 dark:text-gray-400 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  Fondata con passione verso la tecnologia e la risoluzione di problemi logici, TECHTONIC FAULT
                  porta con sé anni di <em>expertise</em> nel settore.
                </p>
              </Animate>
            </div>
            <div className="space-y-4 text-gray-500 dark:text-gray-400">
              {/* <Animate animation="fadeInUp" delay={0.3}>
                <p>
                  With over a decade of experience in software development, I've worked with businesses of all sizes
                  to create custom solutions that drive growth and efficiency.
                </p>
              </Animate> */}
              <Animate animation="fadeInUp" delay={0.4}>
                <p>
                  Il nostro approccio combina esperienza tecnica e una profonda comprensione dei bisogni del
                  progetto, facendo in modo che esso possa raggiungere il massimo potenziale.
                </p>
              </Animate>
              <Animate animation="fadeInUp" delay={0.5}>
                <p>
                  Crediamo nella creazione di relazioni durature con i clienti, e forniamo supporto continuativo
                  al crescere dei loro bisogni tecnologici.
                </p>
              </Animate>
            </div>
            {/* <Animate animation="fadeInUp" delay={0.6}>
              <div className="flex flex-col gap-2 min-[400px]:flex-row">
                <Button className="bg-primary-900 hover:bg-primary-800 dark:bg-primary-700 dark:hover:bg-primary-600">
                  Learn More
                </Button>
              </div>
            </Animate> */}
          </div>
          {/* TODO: This */}
          {/* <Animate animation="fadeInRight" delay={0.4}>
            <div className="flex items-center justify-center">
              <div className="relative w-full h-[350px] md:h-[400px] lg:h-[500px]">
                <Image
                  src="/placeholder.svg?height=500&width=500"
                  alt="About Us Image"
                  fill
                  className="object-contain"
                />
              </div>
            </div>
          </Animate> */}
        </div>
      </div>
    </section>
  )
}