"use client";

import { Reveal } from "@/components/reveal";
import { howItWorks } from "@/data/content";
import { Link2, Users, Megaphone, LineChart } from "lucide-react";

const icons = [Link2, Users, Megaphone, LineChart];

export function HowItWorks() {
  return (
    <section className="section-pad relative">
      <div className="container">
        <div className="mx-auto max-w-2xl text-center">
          <Reveal>
            <span className="eyebrow">How it works</span>
          </Reveal>
          <Reveal delay={0.1}>
            <h2 className="mt-5 text-3xl font-bold tracking-tight text-ink-900 sm:text-5xl dark:text-white">
              Live in four simple steps
            </h2>
          </Reveal>
        </div>

        <div className="relative mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
          <div className="absolute left-0 right-0 top-8 hidden h-px bg-gradient-to-r from-transparent via-whatsapp/40 to-transparent lg:block" />
          {howItWorks.map((item, i) => {
            const Icon = icons[i];
            return (
              <Reveal key={item.step} delay={i * 0.12} direction="up">
                <div className="relative flex flex-col items-center text-center">
                  <div className="relative flex h-16 w-16 items-center justify-center rounded-2xl bg-white shadow-card ring-1 ring-ink-900/5 dark:bg-ink-900 dark:ring-white/10">
                    <Icon className="h-6 w-6 text-whatsapp" strokeWidth={2.25} />
                    <span className="absolute -right-2 -top-2 flex h-6 w-6 items-center justify-center rounded-full bg-whatsapp text-[11px] font-bold text-ink-950">
                      {item.step}
                    </span>
                  </div>
                  <h3 className="mt-5 text-lg font-semibold text-ink-900 dark:text-white">
                    {item.title}
                  </h3>
                  <p className="mt-2 max-w-[240px] text-sm text-ink-500 dark:text-white/50">
                    {item.description}
                  </p>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}