import { Link } from 'react-router-dom';
import { ArrowRight } from 'lucide-react';
import PageHero from '@/components/PageHero';
import CTASection from '@/components/CTASection';
import { StaggerContainer, StaggerItem, SectionHeading, Reveal } from '@/components/ui/Animation';
import { services } from '@/data/content';

export default function ServicesIndex() {
  return (
    <div>
      <PageHero
        eyebrow="Services"
        title={<>Everything you need, <span className="gradient-text">one partner</span></>}
        subtitle="From a marketing website to an AI automation platform — Queneva covers the full spectrum of modern software and digital services."
        crumbs={[{ label: 'Home', to: '/' }, { label: 'Services' }]}
      >
        <Link to="/contact" className="btn-primary">
          Discuss your project <ArrowRight size={16} />
        </Link>
      </PageHero>

      <section className="container-wide section-padding py-12">
        <StaggerContainer className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {services.map((s) => (
            <StaggerItem key={s.slug}>
              <Link to={`/services/${s.slug}`}>
                <div className="group glass h-full rounded-3xl p-7 card-hover">
                  <div className={`flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br ${s.accent} text-white shadow-lg`}>
                    <s.icon size={24} />
                  </div>
                  <h3 className="mt-5 text-lg font-bold">{s.title}</h3>
                  <p className="mt-2 text-sm leading-relaxed text-primary-400 dark:text-gray-400">{s.short}</p>
                  <ul className="mt-4 space-y-1.5">
                    {s.benefits.slice(0, 3).map((b) => (
                      <li key={b} className="flex items-start gap-2 text-xs text-primary-400 dark:text-gray-500">
                        <span className="mt-1 h-1 w-1 shrink-0 rounded-full bg-accent-500" /> {b}
                      </li>
                    ))}
                  </ul>
                  <span className="mt-5 inline-flex items-center gap-1.5 text-sm font-semibold text-secondary-500 transition-all group-hover:gap-2.5 dark:text-accent-400">
                    Explore {s.title} <ArrowRight size={15} />
                  </span>
                </div>
              </Link>
            </StaggerItem>
          ))}
        </StaggerContainer>
      </section>

      <section className="container-wide section-padding py-16">
        <SectionHeading
          eyebrow="Not sure where to start?"
          title={<>We’ll help you <span className="gradient-text">figure it out</span></>}
          subtitle="Book a free 30-minute consultation. We’ll listen to your goals and recommend the right scope — even if that means a smaller project."
        />
        <Reveal className="mt-10 text-center">
          <Link to="/contact" className="btn-primary">
            Book a consultation <ArrowRight size={16} />
          </Link>
        </Reveal>
      </section>

      <CTASection />
    </div>
  );
}