aramesh-backend/frontend/src/components/home/FeaturedProjects.tsx

import React, { useState } from 'react'
import { ArrowLeftIcon } from 'lucide-react'
import { AnimatePresence, motion } from 'framer-motion'
import { Reveal } from '../Reveal'
import { ButtonLink } from '../Button'
import { ProjectCard } from '../ProjectCard'
import { SectionHeading } from '../SectionHeading'
import { useSectionHeading, useSite, useStatusLabel } from '../../api'
import { useFieldSaver } from '../../admin/AdminContext'
import { InlineEdit } from '../admin/InlineEdit'
import { AddItemButton, EditableItem } from '../../admin/Editable'
import type { ProjectStatus } from '../../data/site'

export function FeaturedProjects() {
  const { projects, status_labels } = useSite()
  const heading = useSectionHeading('featured_projects')
  const save = useFieldSaver()
  const saveStatusLabel = (key: string, value: string) => {
    const label = status_labels.find((s) => s.key === key)
    if (!label) return
    void save('status-labels', label.id, { label: value }, (d) => {
      const s = d.status_labels.find((x) => x.id === label.id)
      if (s) s.label = value
    })
  }

  const FILTERS: { key: ProjectStatus; label: string }[] = [
    { key: 'done', label: useStatusLabel('done') },
    { key: 'progress', label: useStatusLabel('progress') },
  ]
  const [status, setStatus] = useState<ProjectStatus>('done')
  const list = projects.filter((p) => p.status === status).slice(0, 3)

  return (
    <section className="bg-ink py-24 lg:py-32" aria-labelledby="projects-title">
      <div className="mx-auto max-w-site px-6 lg:px-10">
        <SectionHeading title={heading.title} lead={heading.lead} headingKey="featured_projects" />

        <div className="mt-10 flex flex-wrap items-center gap-3" role="tablist" aria-label="فیلتر وضعیت پروژه">
          {FILTERS.map((filter) => (
            <button
              key={filter.key}
              type="button"
              role="tab"
              aria-selected={status === filter.key}
              onClick={() => setStatus(filter.key)}
              className={`group relative overflow-hidden border px-7 py-3 text-sm transition-colors duration-300 ease-out ${
                status === filter.key
                  ? 'border-copper bg-copper font-bold text-char'
                  : 'border-ivory/15 font-light text-ivory/65'
              }`}
            >
              {status !== filter.key && (
                <span
                  aria-hidden="true"
                  className="absolute inset-0 translate-y-full bg-copper transition-transform duration-300 ease-out group-hover:translate-y-0"
                />
              )}
              <span className="relative z-10 transition-colors duration-300 ease-out group-hover:text-char">
                <InlineEdit
                  value={filter.label}
                  onSave={(v) => saveStatusLabel(filter.key, v)}
                />
              </span>
            </button>
          ))}
        </div>

        <div className="mt-10 min-h-[420px]">
          <AnimatePresence mode="wait">
            <motion.div
              key={status}
              initial={{ opacity: 0, y: 15 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -15 }}
              transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
              className="grid gap-6 lg:grid-cols-3"
            >
              {list.map((project, i) => (
                <motion.div
                  key={project.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: i * 0.1, ease: [0.23, 1, 0.32, 1] }}
                  className="h-full"
                >
                  <EditableItem resource="projects" item={project} className="h-full">
                    <ProjectCard project={project} />
                  </EditableItem>
                </motion.div>
              ))}
            </motion.div>
          </AnimatePresence>
        </div>

        {heading.cta_label && heading.cta_href && (
          <Reveal delay={0.1}>
            <div className="mt-12 flex justify-center">
              <ButtonLink to={heading.cta_href} variant="outline" className="font-light">
                <InlineEdit
                  value={heading.cta_label}
                  onSave={(v) =>
                    save('section-headings', heading.id, { cta_label: v }, (d) => {
                      const h = d.section_headings.find((s) => s.id === heading.id)
                      if (h) h.cta_label = v
                    })
                  }
                />
                <ArrowLeftIcon className="h-4 w-4" />
              </ButtonLink>
            </div>
          </Reveal>
        )}
      </div>
    </section>
  )
}