---
import BaseLayout from "@/layouts/BaseLayout.astro";
import ServiceList from "@/components/widgets/ServiceList.astro";
import Content from "@/components/widgets/Content.astro";
import Content2 from "@/components/widgets/Content2.astro";
import webDevImg from "@/assets/images/services/web-dev.webp";
import seoImg from "@/assets/images/services/seo.webp";
import consultingImg from "@/assets/images/services/consulting.webp";

const services = [
  {
    title: "Web Development",
    description: "Static and dynamic sites built for the modern era.",
    icon: "lucide:globe",
  },
  {
    title: "SEO Optimization",
    description: "We ensure your content is found by those looking for it.",
    icon: "lucide:search",
  },
  {
    title: "IT Consulting",
    description: "Technical advice to scale your projects to the next level.",
    icon: "lucide:rocket",
  },
];
const metadata = {
  title: "Services",
  description:
    "Discover our web development, SEO optimization, and technology consulting services.",
};
---

<BaseLayout {metadata}>
  <Content
    tagline="Services"
    title="Our Services"
    description={[
      "Comprehensive solutions designed to maximize the potential of your digital presence.",
    ]}
  />
  <ServiceList services={services} classes={{ container: "pt-0 md:pt-0" }} />
  <Content
    tagline="Web Development"
    title="Modern Web Development"
    description={[
      "We specialize in building fast, secure, and scalable websites using the latest technologies. We transform your vision into an impactful digital experience.",
    ]}
    classes={{ container: "pb-0 md:pb-0" }}
  />
  <Content2
    items={[
      {
        title: "Responsive Design",
        description:
          "Your site will look perfect on any device, from mobiles to desktop screens.",
      },
      {
        title: "Optimized Performance",
        description:
          "Fast loading to improve user experience and SEO positioning.",
      },
    ]}
    image={webDevImg}
    imageAlt="Modern Web Development"
    classes={{ container: "pt-0 md:pt-0" }}
  >
    <Fragment>
      <h3 class="text-2xl font-bold tracking-tight sm:text-3xl mb-2">
        Modern Web Development
      </h3>
      We specialize in building fast, secure, and scalable websites using the latest
      technologies. We transform your vision into an impactful digital experience.
    </Fragment>
  </Content2>

  <Content2
    isReversed={true}
    items={[
      {
        title: "SEO Audit",
        description:
          "We deeply analyze your website to identify technical and content improvement opportunities.",
      },
      {
        title: "Content Strategy",
        description:
          "We create relevant content plans that attract and retain your target audience.",
      },
    ]}
    image={seoImg}
    imageAlt="SEO Strategies"
  >
    <Fragment>
      <h3 class="text-2xl font-bold tracking-tight sm:text-3xl mb-2">
        SEO Optimization
      </h3>
      We help your business get found by the right people. Our organic positioning
      strategies are designed to improve your organic visibility.
    </Fragment>
  </Content2>

  <Content2
    items={[
      {
        title: "Digital Transformation",
        description:
          "We guide you in adopting new technologies to optimize your business processes.",
      },
      {
        title: "Software Architecture",
        description:
          "We design robust and scalable systems prepared for future growth.",
      },
    ]}
    image={consultingImg}
    imageAlt="Technology Consulting"
  >
    <Fragment>
      <h3 class="text-2xl font-bold tracking-tight sm:text-3xl mb-2">
        Technology Consulting
      </h3>
      We accompany you in critical decision-making. We evaluate your current infrastructure
      and design personalized roadmaps to take your company to the next technological
      level.
    </Fragment>
  </Content2>
</BaseLayout>
