'use client';

import React from 'react';
import {useTranslations} from 'next-intl';
import Link from 'next/link';
import {motion, useInView} from 'framer-motion';

import './CategoriesSection.css';

interface CategoriesSectionProps {
  locale: string;
}

/* Formes abstraites colorées des maquettes : carré orange (fest-noz),
   rond bleu (concerts), losange olive (stages), goutte pierre (bagadoù). */
const categories = [
  {key: 'festnoz', shape: 'square', tone: 'orange'},
  {key: 'concerts', shape: 'circle', tone: 'blue'},
  {key: 'stages', shape: 'diamond', tone: 'olive'},
  {key: 'bagadou', shape: 'drop', tone: 'stone'},
] as const;

export default function CategoriesSection({locale}: CategoriesSectionProps) {
  const t = useTranslations('HomePage');
  const ref = React.useRef(null);
  const isInView = useInView(ref, {once: true, margin: '-100px'});

  return (
    <section className="tk-categories py-5" ref={ref}>
      <div className="container">
        <div className="row g-3 g-md-4">
          {categories.map((cat, index) => (
            <div className="col-6 col-lg-3" key={cat.key}>
              <motion.div
                className="h-100"
                initial={{opacity: 0, y: 20}}
                animate={isInView ? {opacity: 1, y: 0} : {}}
                transition={{duration: 0.4, delay: index * 0.1}}
              >
                <Link href={`/${locale}/evenements`} className="tk-categories__card">
                  <span className={`tk-categories__chip tk-categories__chip--${cat.tone}`}>
                    <span className={`tk-categories__shape tk-categories__shape--${cat.shape} tk-categories__shape--${cat.tone}`} />
                  </span>
                  <span className="tk-categories__title">
                    {t(`category_${cat.key}` as 'category_festnoz')}
                  </span>
                  <span className="tk-categories__desc">
                    {t(`category_${cat.key}_desc` as 'category_festnoz_desc')}
                  </span>
                  <span className="tk-categories__cta">{t('category_cta')} →</span>
                </Link>
              </motion.div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}