'use client'

import { useEffect, useState } from 'react'
import { useLocale, useTranslations } from 'next-intl'
import Link from 'next/link'
import { ArrowLeft, ArrowRight } from 'lucide-react'
import api from '@/lib/api'
import type { Locale, GolfDevelopmentFundData } from '@/types'
import { t as ls } from '@/types'

export default function GolfDevelopmentFundPage() {
  const locale = useLocale() as Locale
  const t = useTranslations('services')
  const lp = (path: string) => `/${locale}${path}`

  const [data, setData] = useState<GolfDevelopmentFundData | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    api.getGDF()
      .then(setData)
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [])

  if (loading) {
    return (
      <div className="min-h-[60vh] flex items-center justify-center">
        <div className="w-10 h-10 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin" />
      </div>
    )
  }

  const heroTitle = data ? ls(data.heroTitle, locale) : ''
  const heroSubtitle = data ? ls(data.heroSubtitle, locale) : ''
  const heroImage = data?.heroImage
  const opTitle = data ? ls(data.operationTitle, locale) : ''
  const opDesc = data ? ls(data.operationDescription, locale) : ''
  const operationSteps = data?.operationSteps ?? []
  const cta = data?.ctaBanner
  const ctaTitle = cta ? ls(cta.title, locale) : ''
  const ctaDesc = cta ? ls(cta.description, locale) : ''
  const ctaBtn = cta ? ls(cta.buttonText, locale) : ''
  const ctaUrl = cta?.buttonUrl ?? ''
  const invTitle = data ? ls(data.investmentTitle, locale) : ''
  const invDesc = data ? ls(data.investmentDescription, locale) : ''
  const investmentAreas = data?.investmentAreas ?? []

  return (
    <div>
      {/* Hero */}
      <section
        className="relative min-h-[calc(100dvh-4rem)] lg:min-h-[calc(100dvh-100px)] flex items-end bg-secondary-950 overflow-hidden"
        style={heroImage ? { backgroundImage: `url(${heroImage})`, backgroundSize: 'cover', backgroundPosition: 'center' } : undefined}
      >
        {heroImage && <div className="absolute inset-0 bg-secondary-950/60" />}
        <div className="relative z-10 max-w-7xl mx-auto container-padding pb-16 md:pb-24 pt-32 w-full text-white">
          <Link href={lp('/services')} className="inline-flex items-center text-sm font-semibold mb-8 transition-colors text-white/80 hover:text-white">
            <ArrowLeft className="mr-1.5 h-4 w-4" />
            {t('backToServices')}
          </Link>
          <div className="max-w-3xl">
            <span className="section-label !text-white/70">
              {t('gdf.label')}
            </span>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 tracking-tight text-white">
              {heroTitle}
            </h1>
            {heroSubtitle && (
              <p className="text-xl leading-relaxed text-white/70">
                {heroSubtitle}
              </p>
            )}
          </div>
        </div>
      </section>

      {/* Operation Steps */}
      {operationSteps.length > 0 && (
        <section className="section-padding">
          <div className="max-w-7xl mx-auto container-padding">
            <div className="max-w-3xl mb-14">
              <span className="section-label">{t('gdf.operationLabel')}</span>
              {opTitle && (
                <h2 className="text-3xl md:text-4xl font-bold text-secondary-900 tracking-tight mt-2">
                  {opTitle}
                </h2>
              )}
              {opDesc && (
                <p className="text-lg text-secondary-600 leading-relaxed mt-4">
                  {opDesc}
                </p>
              )}
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {operationSteps.map((step, i) => (
                <div
                  key={i}
                  className="bg-white rounded-sm border border-gray-100 shadow-sm hover:shadow-lg transition-shadow overflow-hidden"
                >
                  <div className="border-t-4 border-primary-600" />
                  {step.image && (
                    <div className="aspect-video bg-gray-100 overflow-hidden">
                      <img
                        src={step.image}
                        alt={ls(step.title, locale)}
                        className="w-full h-full object-cover"
                      />
                    </div>
                  )}
                  <div className="p-6">
                    <div className="w-10 h-10 rounded-full bg-primary-600 text-white text-sm font-bold flex items-center justify-center mb-4">
                      {i + 1}
                    </div>
                    <h3 className="text-lg font-bold text-secondary-900 mb-2">
                      {ls(step.title, locale)}
                    </h3>
                    <p className="text-sm text-secondary-600 leading-relaxed">
                      {ls(step.description, locale)}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* CTA Banner */}
      {ctaTitle && (
        <section className="bg-secondary-950 py-16 md:py-20">
          <div className="max-w-7xl mx-auto container-padding text-center">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4 tracking-tight">
              {ctaTitle}
            </h2>
            {ctaDesc && (
              <p className="text-lg text-gray-300 leading-relaxed max-w-2xl mx-auto mb-8">
                {ctaDesc}
              </p>
            )}
            {ctaBtn && ctaUrl && (
              <Link
                href={lp(ctaUrl)}
                className="inline-flex items-center gap-2 bg-primary-600 text-white px-8 py-3.5 rounded-lg font-semibold text-lg hover:bg-primary-700 transition-colors"
              >
                {ctaBtn}
                <ArrowRight className="w-5 h-5" />
              </Link>
            )}
          </div>
        </section>
      )}

      {/* Investment Areas */}
      {investmentAreas.length > 0 && (
        <section className="section-padding bg-gray-50">
          <div className="max-w-7xl mx-auto container-padding">
            <div className="max-w-3xl mb-14">
              <span className="section-label">{t('gdf.investmentLabel')}</span>
              {invTitle && (
                <h2 className="text-3xl md:text-4xl font-bold text-secondary-900 tracking-tight mt-2">
                  {invTitle}
                </h2>
              )}
              {invDesc && (
                <p className="text-lg text-secondary-600 leading-relaxed mt-4">
                  {invDesc}
                </p>
              )}
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {investmentAreas.map((area, i) => (
                <div key={i} className="bg-white rounded-sm shadow-sm overflow-hidden hover:shadow-lg transition-shadow group">
                  {area.image ? (
                    <div className="aspect-video bg-gray-100 overflow-hidden">
                      <img
                        src={area.image}
                        alt={ls(area.title, locale)}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                      />
                    </div>
                  ) : (
                    <div className="aspect-video bg-secondary-900 flex items-center justify-center">
                      <div className="w-16 h-16 rounded-full bg-secondary-800 flex items-center justify-center">
                        <span className="text-2xl font-bold text-primary-400">{i + 1}</span>
                      </div>
                    </div>
                  )}
                  <div className="p-6">
                    <h3 className="text-xl font-bold text-secondary-900 mb-3">
                      {ls(area.title, locale)}
                    </h3>
                    <p className="text-secondary-600 leading-relaxed">
                      {ls(area.description, locale)}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}
    </div>
  )
}