LetsBeBiz-Site/src/components/sections/Configurator.tsx

'use client';

import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import { ShieldCheck } from 'lucide-react';
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-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
        <span className="text-xs font-semibold text-primary-dark leading-none">{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-20">
      <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>
                  {/* Vertical accent line + steps */}
                  <div className="flex gap-4">
                    <div className="flex-shrink-0 w-px bg-primary/20 ml-3 rounded-full" aria-hidden="true" />
                    <div className="flex flex-col gap-2.5 flex-1">
                      {steps.map((step, i) => (
                        <StepDot key={i} index={i + 1} label={step} />
                      ))}
                    </div>
                  </div>
                </motion.div>

                {/* Trust signal */}
                <motion.div
                  variants={revealVariants}
                  className="pt-1 flex items-center gap-2"
                >
                  <ShieldCheck size={14} strokeWidth={1.75} className="text-primary flex-shrink-0" aria-hidden="true" />
                  <p className="text-xs text-outline">No commitment required</p>
                </motion.div>
              </motion.div>
            </div>
          </div>

          {/* ── Right: Wizard ───────────────────────────────────────────── */}
          <div className="lg:col-span-7">
            <div className="relative rounded-2xl bg-surface-high shadow-subtle p-6 sm:p-8 overflow-hidden">
              {/* Radial gradient glow — top-left warmth */}
              <div
                className="pointer-events-none absolute -top-16 -left-16 w-72 h-72 rounded-full"
                style={{
                  background: 'radial-gradient(circle, rgba(91,164,217,0.07) 0%, transparent 70%)',
                }}
                aria-hidden="true"
              />
              <WizardContainer />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}