LetsBeBiz-Site/src/components/configurator/StepComplete.tsx

'use client';

import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import { Calendar, Mail } from 'lucide-react';
import AnimatedCheckmark from '@/components/icons/AnimatedCheckmark';
import Button from '@/components/ui/Button';
import type { WizardFormData } from './WizardContainer';

// ─── Brief Renderer ───────────────────────────────────────────────────────────

function renderBrief(brief: string) {
  // Split on double newlines for paragraph blocks
  const blocks = brief.split('\n\n').filter(Boolean);

  return blocks.map((block, blockIdx) => {
    const lines = block.split('\n').filter(Boolean);

    // Detect a heading block (starts with **)
    const isSectionHeading =
      lines.length === 1 && lines[0].startsWith('**') && lines[0].endsWith('**');

    if (isSectionHeading) {
      const text = lines[0].replace(/\*\*/g, '');
      // Top heading is larger
      if (blockIdx === 0) {
        return (
          <p key={blockIdx} className="font-semibold text-sm text-on-surface mb-0.5">
            {text}
          </p>
        );
      }
      return (
        <p key={blockIdx} className="font-semibold text-xs text-primary-dark uppercase tracking-label mt-4 mb-1">
          {text}
        </p>
      );
    }

    // Separator line
    if (lines.length === 1 && lines[0] === '---') {
      return <hr key={blockIdx} className="border-outline-variant/30 my-3" />;
    }

    // Body paragraph — inline bold rendering
    return (
      <div key={blockIdx} className="text-xs text-outline leading-relaxed">
        {lines.map((line, lineIdx) => {
          // Render **bold** inline
          const parts = line.split(/(\*\*[^*]+\*\*)/g);
          return (
            <p key={lineIdx} className={lineIdx > 0 ? 'mt-1' : ''}>
              {parts.map((part, pIdx) =>
                part.startsWith('**') && part.endsWith('**') ? (
                  <strong key={pIdx} className="font-semibold text-on-surface">
                    {part.slice(2, -2)}
                  </strong>
                ) : (
                  <span key={pIdx}>{part}</span>
                ),
              )}
            </p>
          );
        })}
      </div>
    );
  });
}

// ─── Cal.com Embed / Booking ──────────────────────────────────────────────────

function BookingSection() {
  const calcomUrl = process.env.NEXT_PUBLIC_CALCOM_URL;

  if (calcomUrl) {
    return (
      <div className="rounded-xl overflow-hidden border border-outline-variant/40 bg-surface-high">
        <iframe
          src={calcomUrl}
          width="100%"
          height="480"
          frameBorder="0"
          title="Book a consultation"
          className="block"
          loading="lazy"
        />
      </div>
    );
  }

  return (
    <div className="rounded-xl border border-outline-variant/40 bg-surface-low px-5 py-5 text-center">
      <div className="flex justify-center mb-3">
        <span className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
          <Calendar size={18} strokeWidth={1.5} className="text-primary-dark" />
        </span>
      </div>
      <p className="text-sm font-semibold text-on-surface mb-1">Book a Consultation</p>
      <p className="text-xs text-outline mb-4">30 minutes to discuss your brief with our team</p>
      <Button
        variant="primary"
        href="https://cal.com"
        target="_blank"
        rel="noopener noreferrer"
        size="sm"
        arrow
      >
        Book a Call
      </Button>
    </div>
  );
}

// ─── Main Component ───────────────────────────────────────────────────────────

interface StepCompleteProps {
  formData: WizardFormData;
  brief: string;
}

export default function StepComplete({ formData, brief }: StepCompleteProps) {
  const t = useTranslations('configurator');

  const displayEmail = formData.email || 'your inbox';

  const containerVariants = {
    hidden: {},
    visible: {
      transition: {
        staggerChildren: 0.12,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] as const },
    },
  };

  return (
    <motion.div
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      className="flex flex-col gap-6"
    >
      {/* Checkmark + heading */}
      <motion.div variants={itemVariants} className="flex flex-col items-center text-center pt-2 pb-1">
        <AnimatedCheckmark size={64} color="#006494" />

        <h3 className="font-serif text-2xl font-semibold tracking-headline text-on-surface mt-4">
          {t('complete.title')}
        </h3>

        <div className="flex items-center gap-2 mt-2">
          <Mail size={14} strokeWidth={1.5} className="text-primary flex-shrink-0" />
          <p className="text-sm text-outline">
            {t('complete.subtitle', { email: displayEmail })}
          </p>
        </div>
      </motion.div>

      {/* Brief preview */}
      {brief && (
        <motion.div
          variants={itemVariants}
          className="rounded-xl bg-surface-high border border-outline-variant/40 px-5 py-5 shadow-card"
        >
          <p className="text-xs font-semibold uppercase tracking-label text-outline mb-3">
            Your project brief
          </p>
          <div className="space-y-1 max-h-72 overflow-y-auto pr-1 scrollbar-thin">
            {renderBrief(brief)}
          </div>
        </motion.div>
      )}

      {/* Booking */}
      <motion.div variants={itemVariants}>
        <p className="text-xs font-semibold uppercase tracking-label text-outline mb-3">
          {t('complete.bookTitle')}
        </p>
        <BookingSection />
      </motion.div>

      {/* Fallback contact */}
      <motion.div variants={itemVariants}>
        <p className="text-center text-xs text-outline">
          Or reach us directly at{' '}
          <a
            href="mailto:hello@letsbe.biz"
            className="text-primary-dark underline underline-offset-2 hover:text-primary transition-colors"
          >
            hello@letsbe.biz
          </a>
        </p>
      </motion.div>
    </motion.div>
  );
}