import {
  Globe,
  LayoutDashboard,
  Database,
  Workflow,
  AppWindow,
  Film,
} from "lucide-react";
import { services } from "../data/profile";
import SectionHeading from "../components/SectionHeading";
import Reveal from "../components/Reveal";

const icons = [Globe, LayoutDashboard, AppWindow, Workflow, Database, Film];

export default function Services() {
  return (
    <section className="container-px py-28 md:py-36">
      <div className="mx-auto max-w-6xl flex flex-col gap-14">
        <SectionHeading eyebrow="¿Qué puedo crear?" title="Estas son las cosas que puedo construir" />

        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {services.map((service, i) => {
            const Icon = icons[i % icons.length];
            return (
              <Reveal key={service.title} delay={i * 0.05}>
                <div className="glow-border rounded-2xl h-full">
                  <div className="glass h-full rounded-2xl p-6 flex flex-col gap-4 hover:-translate-y-1 transition-transform duration-300">
                    <span className="grid place-items-center h-11 w-11 rounded-xl bg-[color:var(--color-accent)]/10 text-[color:var(--color-accent)]">
                      <Icon size={20} />
                    </span>
                    <h3 className="font-display font-medium text-lg">{service.title}</h3>
                    <p className="text-sm text-[color:var(--color-muted)] leading-relaxed">
                      {service.description}
                    </p>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}
