From 028b48f379dee4e0595fda8edcbf6806d2a427a9 Mon Sep 17 00:00:00 2001
From: Leon Serfaty G <serfowi@gmail.com>
Date: Thu, 17 Jul 2025 10:21:29 +0000
Subject: [PATCH] this is how the next step should look like.

yes = 30 hours

no= 0 hours
---
 .../cost-estimator/cost-estimator-form.tsx    | 12 +++
 .../cost-estimator/step-2-service-type.tsx    |  1 +
 .../cost-estimator/step-3-project-stage.tsx   |  1 +
 .../cost-estimator/step-4-design-process.tsx  |  1 +
 .../cost-estimator/step-5-page-count.tsx      |  1 +
 .../cost-estimator/step-6-animations.tsx      | 89 +++++++++++++++++++
 6 files changed, 105 insertions(+)
 create mode 100644 src/components/cost-estimator/step-6-animations.tsx

diff --git a/src/components/cost-estimator/cost-estimator-form.tsx b/src/components/cost-estimator/cost-estimator-form.tsx
index 77bd521..8576a51 100644
--- a/src/components/cost-estimator/cost-estimator-form.tsx
+++ b/src/components/cost-estimator/cost-estimator-form.tsx
@@ -6,6 +6,7 @@ import { Step2ServiceType } from './step-2-service-type';
 import { Step3ProjectStage } from './step-3-project-stage';
 import { Step4DesignProcess } from './step-4-design-process';
 import { Step5PageCount } from './step-5-page-count';
+import { Step6Animations } from './step-6-animations';
 import { Card, CardContent } from '@/components/ui/card';
 import { AnimatePresence, motion } from 'framer-motion';
 
@@ -15,6 +16,7 @@ export type FormData = {
   projectStage: number;
   designProcess: 'custom' | 'mockups' | 'existing' | null;
   pageCount: number;
+  animatedElements: boolean | null;
 };
 
 export function CostEstimatorForm() {
@@ -25,6 +27,7 @@ export function CostEstimatorForm() {
     projectStage: 0,
     designProcess: null,
     pageCount: 0,
+    animatedElements: null,
   });
   const [isPending, startTransition] = useTransition();
 
@@ -89,6 +92,15 @@ export function CostEstimatorForm() {
             formData={formData}
           />
         );
+      case 6:
+        return (
+          <Step6Animations
+            onNext={handleNextStep}
+            onBack={handlePrevStep}
+            onUpdateData={handleUpdateFormData}
+            formData={formData}
+          />
+        );
       default:
         return (
           <Step1ProjectType
diff --git a/src/components/cost-estimator/step-2-service-type.tsx b/src/components/cost-estimator/step-2-service-type.tsx
index b0deb8e..8114890 100644
--- a/src/components/cost-estimator/step-2-service-type.tsx
+++ b/src/components/cost-estimator/step-2-service-type.tsx
@@ -61,6 +61,7 @@ export function Step2ServiceType({ onNext, onBack, onUpdateData, formData }: Ste
             <div className="w-12 h-2 bg-muted rounded-full" />
             <div className="w-12 h-2 bg-muted rounded-full" />
             <div className="w-12 h-2 bg-muted rounded-full" />
+            <div className="w-12 h-2 bg-muted rounded-full" />
         </div>
         <Button onClick={onNext} disabled={!selectedService}>
           Next
diff --git a/src/components/cost-estimator/step-3-project-stage.tsx b/src/components/cost-estimator/step-3-project-stage.tsx
index 53af1cb..378f7e3 100644
--- a/src/components/cost-estimator/step-3-project-stage.tsx
+++ b/src/components/cost-estimator/step-3-project-stage.tsx
@@ -82,6 +82,7 @@ export function Step3ProjectStage({ onNext, onBack, onUpdateData, formData }: St
               <div className="w-12 h-2 bg-primary rounded-full" />
               <div className="w-12 h-2 bg-muted rounded-full" />
               <div className="w-12 h-2 bg-muted rounded-full" />
+              <div className="w-12 h-2 bg-muted rounded-full" />
           </div>
           <Button onClick={onNext}>
             Next
diff --git a/src/components/cost-estimator/step-4-design-process.tsx b/src/components/cost-estimator/step-4-design-process.tsx
index e8d0ca3..7b8ed93 100644
--- a/src/components/cost-estimator/step-4-design-process.tsx
+++ b/src/components/cost-estimator/step-4-design-process.tsx
@@ -73,6 +73,7 @@ export function Step4DesignProcess({ onNext, onBack, onUpdateData, formData }: S
               <div className="w-12 h-2 bg-primary rounded-full" />
               <div className="w-12 h-2 bg-primary rounded-full" />
               <div className="w-12 h-2 bg-muted rounded-full" />
+              <div className="w-12 h-2 bg-muted rounded-full" />
             </div>
             <Button onClick={onNext} disabled={!selectedOption}>
               Next
diff --git a/src/components/cost-estimator/step-5-page-count.tsx b/src/components/cost-estimator/step-5-page-count.tsx
index 2eee077..ae3c547 100644
--- a/src/components/cost-estimator/step-5-page-count.tsx
+++ b/src/components/cost-estimator/step-5-page-count.tsx
@@ -91,6 +91,7 @@ export function Step5PageCount({ onNext, onBack, onUpdateData, formData }: Step5
               <div className="w-12 h-2 bg-primary rounded-full" />
               <div className="w-12 h-2 bg-primary rounded-full" />
               <div className="w-12 h-2 bg-primary rounded-full" />
+              <div className="w-12 h-2 bg-muted rounded-full" />
           </div>
           <Button onClick={onNext}>
             Next
diff --git a/src/components/cost-estimator/step-6-animations.tsx b/src/components/cost-estimator/step-6-animations.tsx
new file mode 100644
index 0000000..b7bb37e
--- /dev/null
+++ b/src/components/cost-estimator/step-6-animations.tsx
@@ -0,0 +1,89 @@
+
+"use client";
+
+import type { FormData } from './cost-estimator-form';
+import { Button } from '@/components/ui/button';
+import { Gauge } from 'lucide-react';
+import React, { useState, useMemo } from 'react';
+
+type Step6Props = {
+  onNext: () => void;
+  onBack: () => void;
+  onUpdateData: (data: Partial<FormData>) => void;
+  formData: FormData;
+};
+
+const designHoursMap = {
+  custom: 60,
+  mockups: 30,
+  existing: 0,
+};
+
+const calculateHours = (
+    pageCount: number, 
+    projectStage: number, 
+    designProcess: 'custom' | 'mockups' | 'existing' | null,
+    animatedElements: boolean | null
+): number => {
+    const pageVal = pageCount === 10 ? 50 : (pageCount + 1) * 5 - 1;
+    const pageHours = pageVal * 6;
+    const stageHours = Math.round((projectStage / 100) * 50);
+    const designHours = designProcess ? designHoursMap[designProcess] : 0;
+    const animationHours = animatedElements ? 30 : 0;
+    return pageHours + stageHours + designHours + animationHours;
+};
+
+export function Step6Animations({ onNext, onBack, onUpdateData, formData }: Step6Props) {
+  const [selectedOption, setSelectedOption] = useState<boolean | null>(formData.animatedElements);
+
+  const handleSelect = (option: boolean) => {
+    setSelectedOption(option);
+    onUpdateData({ animatedElements: option });
+  };
+
+  const estimatedHours = useMemo(() => {
+    return calculateHours(formData.pageCount, formData.projectStage, formData.designProcess, selectedOption);
+  }, [selectedOption, formData.pageCount, formData.projectStage, formData.designProcess]);
+
+  return (
+    <div className="flex flex-col items-start">
+      <h2 className="font-headline text-3xl font-bold tracking-tight text-center w-full">Would you like us to implement animated elements and/or transitions?</h2>
+      <div className="mt-8 grid w-full grid-cols-1 gap-4 md:grid-cols-2">
+        <Button
+            variant={selectedOption === true ? 'default' : 'outline'}
+            className="w-full justify-start p-6 text-lg"
+            onClick={() => handleSelect(true)}
+        >
+            Yes
+        </Button>
+        <Button
+            variant={selectedOption === false ? 'default' : 'outline'}
+            className="w-full justify-start p-6 text-lg"
+            onClick={() => handleSelect(false)}
+        >
+            No
+        </Button>
+      </div>
+      <div className="mt-16 flex w-full items-center justify-between">
+        <div className="flex items-center gap-2">
+            <Gauge className="h-6 w-6 text-primary" />
+            <span className="font-headline text-lg font-bold">{estimatedHours}+ hours</span>
+        </div>
+        <div className="flex items-center gap-4">
+            <Button variant="ghost" onClick={onBack}>Go Back</Button>
+            <div className="flex items-center gap-2">
+              <div className="w-12 h-2 bg-primary rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
+            </div>
+            <Button onClick={onNext} disabled={selectedOption === null}>
+              Next
+            </Button>
+        </div>
+      </div>
+    </div>
+  );
+}