import Image from 'next/image';
import { ArrowBadge } from '@/components/ui/Button';
import { Container } from '@/components/ui/Container';
import { SectionHeading } from '@/components/ui/SectionHeading';
import { useMessages } from '@/i18n/client';

export type PathId = 'aura' | 'bazi' | 'numerology';

const PATHS: { id: PathId; number: string; image: string }[] = [
  { id: 'aura', number: '01', image: '/images/chakra_card.jpg' },
  { id: 'bazi', number: '02', image: '/images/bazi_card.jpg' },
  { id: 'numerology', number: '03', image: '/images/numerology_card.jpg' },
];

export function ThreePathsSection({ onSelectPath }: { onSelectPath: (path: PathId) => void }) {
  const t = useMessages().home.paths;
  const title = (id: PathId) => (id === 'aura' ? 'Aura + Chakra' : id === 'bazi' ? 'BaZi' : t.numerologyTitle);
  return (
    <section id="features" className="relative isolate scroll-mt-20 overflow-hidden pt-16 pb-24 sm:pt-20 sm:pb-28">
      {/* Soft aura blooms */}
      <div
        aria-hidden
        className="absolute top-40 -left-40 -z-10 size-[560px] rounded-full bg-[radial-gradient(circle,rgba(196,170,255,0.45),rgba(255,190,220,0.25)_40%,transparent_70%)] blur-3xl"
      />
      <div
        aria-hidden
        className="absolute -right-40 bottom-0 -z-10 size-[480px] rounded-full bg-[radial-gradient(circle,rgba(170,200,255,0.35),transparent_70%)] blur-3xl"
      />

      <Container>
        <SectionHeading
          eyebrow={t.eyebrow}
          title={
            <>
              {t.title[0]}
              <br />
              {t.title[1]}
            </>
          }
          description={t.description}
        />

        <div className="mt-14 grid gap-5 sm:mt-16 md:grid-cols-3 lg:gap-6">
          {PATHS.map((p) => (
            <button
              key={p.id}
              type="button"
              onClick={() => onSelectPath(p.id)}
              aria-label={t.start(title(p.id))}
              className="group flex flex-col overflow-hidden rounded-card bg-surface text-left shadow-card ring-1 ring-line/70 transition-[box-shadow,transform] duration-300 ease-out-expo hover:-translate-y-1 hover:shadow-card-hover"
            >
              <div className="relative aspect-[4/3.4] w-full overflow-hidden">
                <Image
                  src={p.image}
                  alt=""
                  fill
                  sizes="(max-width: 768px) 100vw, 400px"
                  className="object-cover transition-transform duration-700 ease-out-expo group-hover:scale-[1.04]"
                />
                <div className="absolute inset-x-0 bottom-0 h-2/5 bg-gradient-to-t from-surface via-surface/60 to-transparent" />
              </div>

              <div className="flex flex-1 flex-col px-6 pt-1 pb-6">
                <span className="text-[13px] font-medium text-subtle tabular-nums">{p.number}</span>
                <h3 className="mt-2 text-lg font-semibold tracking-[-0.01em] text-ink">{title(p.id)}</h3>
                <div className="mt-2 flex items-end justify-between gap-6">
                  <p className="max-w-[220px] text-[13px] leading-relaxed text-muted">{t[p.id]}</p>
                  <ArrowBadge />
                </div>
              </div>
            </button>
          ))}
        </div>
      </Container>
    </section>
  );
}