import type { Metadata } from 'next'
import { AgentForm } from '@/components/agent/AgentForm'
import { RevealWrapper } from '@/components/ui/RevealWrapper'

export const metadata: Metadata = {
  title: 'Agent IA Parcours',
  description:
    "L'agent QuantCareers génère un parcours sur mesure fondé sur les trajectoires réelles d'alumni : master recommandé, stages, compétences, calendrier d'action.",
}

const FEATURES = [
  {
    title: 'Masters recommandés',
    desc: "Avec score de compatibilité spécifique à votre profil école d'origine, et lien direct vers la fiche du master.",
  },
  {
    title: 'Parcours de stages ordonné',
    desc: "2 à 3 stages chronologiques : intitulé, type de firme, exemples d'entreprises, période recommandée.",
  },
  {
    title: "Calendrier d'action",
    desc: 'Ce que vous devez faire maintenant, dans 3 mois, dans 6 mois — avec les deadlines correspondantes.',
  },
]

export default function AgentPage() {
  return (
    <main>
      <section className="section-agent" id="agent">
        <div className="section-wrap">
          <div className="section-head">
            <div className="eyebrow">Module 2 — Agent IA</div>
            <h1 className="section-title">
              Votre parcours, calculé sur<br />des <em>parcours réels</em>
            </h1>
            <p className="section-desc">
              L&rsquo;agent QuantCareers ne génère pas des conseils génériques. Il ancre ses
              recommandations sur les trajectoires observées d&rsquo;alumni ayant le même profil
              que vous.
            </p>
          </div>

          <RevealWrapper className="agent-grid">
            <AgentForm />

            <div>
              <p style={{ fontSize: '0.875rem', color: 'var(--text-body)', lineHeight: 1.8, marginBottom: '1.75rem' }}>
                Contrairement aux conseils génériques des forums, l&rsquo;agent QuantCareers connaît
                les profils qui ont réussi depuis votre école vers votre métier cible. Il reproduit
                leur trajectoire en l&rsquo;adaptant à votre situation.
              </p>

              <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
                {FEATURES.map(({ title, desc }) => (
                  <div key={title} style={{ padding: '1.25rem', background: 'var(--surface)', border: '1px solid var(--border)' }}>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: '1.05rem', fontWeight: 500, color: 'var(--navy)', marginBottom: '0.4rem' }}>
                      {title}
                    </div>
                    <p style={{ fontSize: '0.8rem', color: 'var(--text-body)', lineHeight: 1.7 }}>{desc}</p>
                  </div>
                ))}
              </div>
            </div>
          </RevealWrapper>
        </div>
      </section>
    </main>
  )
}