import React from 'react'
import { PageHero } from '../components/PageHero'
import { Services } from '../components/home/Services'
import { Faq } from '../components/home/Faq'
import { ContactSection } from '../components/ContactSection'
import { Reveal } from '../components/Reveal'
import { SectionHeading } from '../components/SectionHeading'
import { useSectionHeading, useSite } from '../api'
import { AddItemButton, EditableItem } from '../admin/Editable'

export function ServicesPage() {
  const { process_steps } = useSite()
    const heading = useSectionHeading('process')

  return (
    <>
      <PageHero pageKey="services" />

      <Services />

      <section className="bg-char py-24 lg:py-32" aria-labelledby="process-title">
        <div className="mx-auto max-w-site px-6 lg:px-10">
          <SectionHeading title={heading.title} lead={heading.lead} align="center" />
          <div className="mt-14 grid gap-px bg-ivory/10 md:grid-cols-2 lg:grid-cols-4">
            {process_steps.map((item, i) => (
              <Reveal key={item.id} delay={0.06 * i} className="h-full">
                <EditableItem resource="process_steps" item={item} className="h-full">
                <div className="flex h-full flex-col justify-center bg-char px-6 py-14 text-center">
                  <p className="text-4xl font-bold text-copper">{item.step}</p>
                  <h3 className="mt-6 text-xl font-bold text-ivory">{item.title}</h3>
                  <p className="mt-4 text-base font-light leading-9 text-ivory/60">{item.desc}</p>
                </div>
                </EditableItem>
              </Reveal>
            ))}
            <AddItemButton resource="process_steps" />
          </div>
        </div>
      </section>

      <Faq />
      <ContactSection />
    </>
  )
}