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

export function Investment() {
  const { investment_models } = useSite()
  const heading = useSectionHeading('investment_models')

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

      <section className="bg-ink py-24 lg:py-32" aria-labelledby="models-title">
        <div className="mx-auto max-w-site px-6 lg:px-10">
          <SectionHeading title={heading.title} lead={heading.lead} />
          <div className="mt-14 grid gap-6 lg:grid-cols-3">
            {investment_models.map((model, i) => (
              <Reveal key={model.id} delay={0.06 * i} className="h-full">
                <EditableItem resource="investment_models" item={model} className="h-full">
                  <article className="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-ivory/10 bg-char/40 p-10 backdrop-blur-md transition-all duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:bg-char/70 hover:shadow-[0_12px_40px_-10px_rgba(197,143,92,0.35)] transform-gpu">
                    {/* لایه نوری ظریف که در زمان هاور روشن می‌شود */}
                    <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
                    
                    <p className="relative z-10 text-sm font-bold text-copper/80">۰{(i + 1).toLocaleString('fa-IR')}</p>

                    <h3 className="relative z-10 mt-6 text-2xl font-bold text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
                      {model.title}
                    </h3>

                    <p className="relative z-10 mt-5 text-sm font-light leading-9 text-ivory/65">{model.desc}</p>

                    <div className="relative z-10 mt-auto pt-10">
                      <ul className="space-y-4 border-t border-ivory/10 pt-8 transition-colors duration-500 group-hover:border-copper/20">
                        {model.points.map((point) => (
                          <li key={point} className="flex items-start gap-3 text-sm font-light leading-8 text-ivory/70 transition-colors duration-300 group-hover:text-ivory">
                            <span className="mt-3.5 h-1.5 w-1.5 shrink-0 rounded-full bg-copper/60 transition-all duration-300 ease-lux group-hover:scale-125 group-hover:bg-copper group-hover:shadow-[0_0_10px_rgba(197,143,92,0.8)]" aria-hidden="true" />
                            {point}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </article>
                </EditableItem>
              </Reveal>
            ))}
            <AddItemButton resource="investment_models" />
          </div>
        </div>
      </section>

      <Stats />
      <ContactSection />
    </>
  )
}