import React from 'react'
import { PageHero } from '../components/PageHero'
import { ContactSection } from '../components/ContactSection'
import { Reveal } from '../components/Reveal'
import { useSite } from '../api'
import { useLang } from '../i18n/lang'
import { AddItemButton, EditableItem } from '../admin/Editable'

export function ContactPage() {
  const { offices } = useSite()
  const { t } = useLang()
  
  return (
    <>
      <PageHero pageKey="contact" />

      <section className="bg-ink py-24" aria-label={t('officesAria')}>
        <div className="mx-auto grid max-w-site gap-6 px-6 md:grid-cols-3 lg:px-10">
          {offices.map((office, i) => (
            <Reveal key={office.id} delay={0.06 * i} className="h-full">
              <EditableItem resource="offices" item={office} className="h-full">
              <article className="flex h-full flex-col border border-ivory/10 bg-char px-8 py-12 text-center transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
                <h2 className="text-2xl font-bold text-copper">{office.city}</h2>
                <p className="mt-6 text-sm font-light leading-9 text-ivory/70">{office.address}</p>
                <div className="mt-auto pt-10">
                  <p className="border-t border-ivory/10 pt-6 text-xs font-light text-ivory/50">
                    {office.hours}
                  </p>
                </div>
              </article>
              </EditableItem>
            </Reveal>
          ))}
          <AddItemButton resource="offices" />
        </div>
      </section>

      <ContactSection />
    </>
  )
}