'use client';

import { motion } from 'framer-motion';
import { staggerContainer, revealVariants, viewportOnce } from '@/lib/animations';

// ─── Animation variants ────────────────────────────────────────────────────────

const ease = [0.16, 1, 0.3, 1] as const;

const eyebrowVariants = {
  hidden: { opacity: 0, y: 16 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.5, ease },
  },
};

const headlineVariants = {
  hidden: { opacity: 0, y: 24 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.65, ease, delay: 0.1 },
  },
};

const subtitleVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.6, ease, delay: 0.2 },
  },
};

const ruleVariants = {
  hidden: { scaleX: 0 },
  visible: {
    scaleX: 1,
    transition: { duration: 0.7, ease, delay: 0.35 },
  },
};

// ─── Component ─────────────────────────────────────────────────────────────────

export default function ServicesHero() {
  return (
    <section
      className="bg-surface pt-32 pb-20"
      aria-label="Services hero"
    >
      <div className="container mx-auto px-6">
        <motion.div
          variants={staggerContainer}
          initial="hidden"
          animate="visible"
          className="flex flex-col items-center text-center"
        >
          {/* Eyebrow */}
          <motion.span
            variants={eyebrowVariants}
            className="label-md text-primary mb-5"
          >
            Our Capabilities
          </motion.span>

          {/* Headline */}
          <motion.h1
            variants={headlineVariants}
            className="font-serif font-semibold tracking-headline text-on-surface text-5xl md:text-6xl lg:text-7xl max-w-4xl leading-[1.05]"
          >
            Three Pillars of{' '}
            <span className="text-gradient">Digital Excellence</span>
          </motion.h1>

          {/* Subtitle */}
          <motion.p
            variants={subtitleVariants}
            className="mt-6 text-lg text-outline leading-relaxed max-w-2xl"
          >
            We design, build, and operate complete digital ecosystems — from the
            first pixel to the server rack. Every discipline under one roof,
            every deliverable built to a standard most agencies never attempt.
          </motion.p>

          {/* Decorative rule */}
          <motion.div
            variants={ruleVariants}
            className="mt-10 origin-left w-16 h-px bg-gradient-cta"
            aria-hidden="true"
          />
        </motion.div>
      </div>
    </section>
  );
}