import { motion } from 'motion/react';

export const SectionHeading = ({ eyebrow, title, subtitle }: { eyebrow: string; title: string; subtitle?: string }) => (
  <motion.div
    className="text-center mb-14"
    initial={false}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true, margin: '-80px' }}
    transition={{ duration: 0.5 }}
  >
    <div className="font-mono text-[11px] uppercase tracking-[3px] text-wm-green mb-3">{eyebrow}</div>
    <h2 className="text-3xl md:text-5xl font-display font-bold tracking-tight">{title}</h2>
    {subtitle && <p className="text-wm-muted mt-4 max-w-2xl mx-auto">{subtitle}</p>}
  </motion.div>
);