'use client';

import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import { revealVariants, staggerContainer, viewportOnce } from '@/lib/animations';
import WizardContainer from '@/components/configurator/WizardContainer';

// ─── Step indicator dot ───────────────────────────────────────────────────────

interface StepDotProps {
  index: number;
  label: string;
}

function StepDot({ index, label }: StepDotProps) {
  return (
    <motion.div variants={revealVariants} className="flex items-center gap-3">
      <div className="w-5 h-5 rounded-full border border-outline-variant/60 bg-surface-high flex items-center justify-center flex-shrink-0">
        <span className="text-[10px] font-semibold text-outline">{index}</span>
      </div>
      <span className="text-sm text-outline">{label}</span>
    </motion.div>
  );
}

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

export default function Configurator() {
  const t = useTranslations('configurator');

  const steps = [
    t('step1.title'),
    t('step2.title'),
    t('step3.title'),
  ];

  return (
    <section id="configure" className="bg-surface-low py-24">
      <div className="container mx-auto px-6">
        <div className="grid grid-cols-1 gap-12 lg:grid-cols-12">

          {/* ── Left: Sticky context panel ─────────────────────────────── */}
          <div className="lg:col-span-5">
            <div className="lg:sticky lg:top-24">
              <motion.div
                variants={staggerContainer}
                initial="hidden"
                whileInView="visible"
                viewport={viewportOnce}
                className="flex flex-col gap-6"
              >
                {/* Eyebrow */}
                <motion.span
                  variants={revealVariants}
                  className="label-md text-primary"
                >
                  {t('eyebrow')}
                </motion.span>

                {/* H2 */}
                <motion.h2
                  variants={revealVariants}
                  className="font-serif text-4xl font-semibold tracking-headline text-on-surface leading-tight md:text-5xl"
                >
                  {t('title')}
                </motion.h2>

                {/* Description */}
                <motion.p
                  variants={revealVariants}
                  className="text-base text-outline leading-relaxed max-w-sm"
                >
                  {t('description')}
                </motion.p>

                {/* Step indicators */}
                <motion.div
                  variants={revealVariants}
                  className="flex flex-col gap-3 pt-2"
                >
                  <p className="text-xs font-semibold uppercase tracking-label text-outline/70">
                    How it works
                  </p>
                  <div className="flex flex-col gap-2.5">
                    {steps.map((step, i) => (
                      <StepDot key={i} index={i + 1} label={step} />
                    ))}
                  </div>
                </motion.div>

                {/* Trust signal */}
                <motion.div
                  variants={revealVariants}
                  className="pt-2 flex items-center gap-2.5"
                >
                  <div className="h-px flex-1 bg-outline-variant/40" />
                  <p className="text-xs text-outline">No commitment required</p>
                  <div className="h-px flex-1 bg-outline-variant/40" />
                </motion.div>
              </motion.div>
            </div>
          </div>

          {/* ── Right: Wizard ───────────────────────────────────────────── */}
          <div className="lg:col-span-7">
            <div className="rounded-2xl bg-surface-high shadow-subtle p-6 sm:p-8">
              <WizardContainer />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}