import { RevealWrapper } from '@/components/ui/RevealWrapper'

type Status = 'live' | 'beta' | 'soon'

interface Module {
  num: string
  status: Status
  title: string
  desc: string
  placeholder?: boolean
}

const MODULES: Module[] = [
  {
    num: '01', status: 'live',
    title: 'Classement des masters',
    desc: 'Le premier classement objectif fondé sur les données alumni LinkedIn. 23 masters notés sur 8 critères, avec fiches détaillées et distribution des débouchés.',
  },
  {
    num: '02', status: 'beta',
    title: 'Agent IA Parcours',
    desc: "Renseignez votre école et votre métier cible. L'agent génère un parcours sur mesure : master recommandé, stages à effectuer, compétences à acquérir, calendrier d'action.",
  },
  {
    num: '03', status: 'beta',
    title: 'Calendrier recrutement',
    desc: 'Toutes les deadlines masters, rounds summer internships, périodes de stage en finance quantitative. Vue calendrier + alertes email configurables.',
  },
  {
    num: '04', status: 'soon',
    title: 'Cours de finance quant',
    desc: 'Bibliothèque de formation calibrée ingénieur : calcul stochastique appliqué, ML pour la finance, pricing des dérivés, entretiens quant. Notebooks Python inclus.',
  },
  {
    num: '05', status: 'soon',
    title: 'Appels avec des professionnels',
    desc: "Sessions 1-on-1 de 30 minutes avec des quant researchers, structureurs et risk quants en poste. Coaching de parcours, préparation d'entretien, relecture de CV.",
  },
  { num: '—', status: 'soon', title: 'En préparation', desc: 'Contribution communautaire, alertes personnalisées, fiches firmes (desks, culture, recrutement), et blog éditorial sur la finance quantitative.', placeholder: true },
]

const statusLabel: Record<Status, string> = { live: 'En ligne', beta: 'Bêta', soon: 'Bientôt' }
const statusClass: Record<Status, string> = { live: 'status-live', beta: 'status-beta', soon: 'status-soon' }

export function ModulesGrid() {
  return (
    <section className="section-modules" id="modules">
      <div className="section-wrap">
        <div className="section-head modules-header">
          <div>
            <div className="eyebrow">Fonctionnalités</div>
            <h2 className="section-title">
              Tout ce dont vous avez besoin<br />pour <em>réussir en finance quant</em>
            </h2>
          </div>
        </div>

        <RevealWrapper className="modules-grid">
          {MODULES.map((mod) => (
            <div
              key={mod.num}
              className="module-card"
              style={mod.placeholder ? { background: 'var(--navy-light)', cursor: 'default' } : undefined}
            >
              <div className="module-card-top">
                <span className="module-num" style={mod.placeholder ? { color: 'var(--navy)' } : undefined}>
                  {mod.num}
                </span>
                {!mod.placeholder && (
                  <span className={`module-status ${statusClass[mod.status]}`}>
                    {statusLabel[mod.status]}
                  </span>
                )}
              </div>
              <div className="module-title" style={mod.placeholder ? { color: 'var(--navy-mid)' } : undefined}>
                {mod.title}
              </div>
              <p className="module-desc" style={mod.placeholder ? { color: 'var(--muted)' } : undefined}>
                {mod.desc}
              </p>
            </div>
          ))}
        </RevealWrapper>
      </div>
    </section>
  )
}