(null);
+ const { state, dispatch, resetState } = useGlobalState();
+ const { backupState, restoreState } = useStorage();
+
+ const handleBackup = async () => {
+ setIsBackingUp(true);
+ setError(null);
+ try {
+ const result = await backupState(state);
+ if (result?.key) {
+ setBackupKey(result.key);
+ }
+ } catch (error) {
+ console.error(error);
+ setError('Failed to backup data. Please try again.');
+ } finally {
+ setIsBackingUp(false);
+ }
+ };
+
+ const handleRestore = async () => {
+ if (!key) {
+ setError('Please enter a key');
+ return;
+ }
+ setIsRestoring(true);
+ setError(null);
+ try {
+ const restored = await restoreState(key);
+ if (restored) {
+ dispatch({ type: 'SET_STATE', payload: restored });
+ setKey('');
+ } else {
+ setError('No data found for this key');
+ }
+ } catch (error) {
+ console.error(error);
+ setError('Failed to restore data. Please check your key and try again.');
+ } finally {
+ setIsRestoring(false);
+ }
+ };
+
+ const copyKey = async () => {
+ try {
+ await navigator.clipboard.writeText(backupKey);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (error) {
+ console.error(error);
+ setError('Failed to copy key to clipboard');
+ }
+ };
+
+ return (
+
+
+ Backup Controls
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+ {isBackingUp ?
+
+
+ {backupKey && (
+
+
+ Your backup key:
+
+ {backupKey}
+
+
+
+ {copied ? (
+
+
+ )}
+
+
+ {isRestoring ?
+
+
+
+ );
+}
diff --git a/components/Header.tsx b/components/Header.tsx
new file mode 100644
index 0000000..c5ee08f
--- /dev/null
+++ b/components/Header.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { ThemeToggle } from '@components/ThemeToggle';
+import { WavesIcon } from 'lucide-react';
+
+export default function Header() {
+ return (
+
+
+
+
+
+
+
+
+
+ Blue Ocean Strategy
+
+
+
+ Navigate to new market spaces and create uncontested growth
+
+
+
+ );
+}
diff --git a/components/ThemeProvider.tsx b/components/ThemeProvider.tsx
new file mode 100644
index 0000000..b1a7360
--- /dev/null
+++ b/components/ThemeProvider.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+
+export function ThemeProvider({
+ children,
+ ...props
+}: {
+ children: React.ReactNode;
+ [key: string]: unknown;
+}) {
+ return {children} ;
+}
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
new file mode 100644
index 0000000..9a85445
--- /dev/null
+++ b/components/ThemeToggle.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { Button } from '@components/ui/button';
+
+export function ThemeToggle() {
+ const { setTheme, resolvedTheme } = useTheme();
+
+ const [mounted, setMounted] = React.useState(false);
+
+ React.useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ if (!mounted) {
+ return (
+
+
+ );
+ }
+
+ return (
+ setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
+ className="w-9 px-0"
+ >
+ Toggle theme
+
+ );
+}
diff --git a/components/core/FourActions.tsx b/components/core/FourActions.tsx
new file mode 100644
index 0000000..32f7d90
--- /dev/null
+++ b/components/core/FourActions.tsx
@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/card';
+import { Button } from '@components/ui/button';
+import { Input } from '@components/ui/input';
+import { useGlobalState } from '@contexts/state/StateContext';
+import { Trash2, Plus } from 'lucide-react';
+
+const FourActions = () => {
+ const { state, dispatch } = useGlobalState();
+ const [newItems, setNewItems] = useState({
+ eliminate: '',
+ reduce: '',
+ raise: '',
+ create: '',
+ });
+
+ const addItem = (actionType: keyof typeof newItems) => {
+ if (!newItems[actionType]) return;
+
+ dispatch({
+ type: 'ADD_ACTION',
+ payload: {
+ actionType,
+ value: newItems[actionType],
+ },
+ });
+ setNewItems((prev) => ({ ...prev, [actionType]: '' }));
+ };
+
+ const removeItem = (
+ actionType: keyof typeof state.fourActions,
+ index: number
+ ) => {
+ dispatch({
+ type: 'SET_STATE',
+ payload: {
+ ...state,
+ fourActions: {
+ ...state.fourActions,
+ [actionType]: state.fourActions[actionType].filter(
+ (_, i) => i !== index
+ ),
+ },
+ },
+ });
+ };
+
+ const renderActionSection = (
+ title: string,
+ actionType: keyof typeof state.fourActions,
+ description: string,
+ colorClasses: string
+ ) => (
+
+
+ {title}
+
+
+ {description}
+
+
+ setNewItems((prev) => ({ ...prev, [actionType]: e.target.value }))
+ }
+ className="flex-1"
+ />
+
addItem(actionType)} variant="secondary">
+
+
+ {state.fourActions[actionType].map((item, index) => (
+
+ {item}
+ removeItem(actionType, index)}
+ >
+
+
+ ))}
+
+
+ );
+
+ return (
+
+ {renderActionSection(
+ 'Eliminate',
+ 'eliminate',
+ 'Which factors should be eliminated?',
+ 'border-red-500/50 dark:border-red-500/30 bg-red-50/50 dark:bg-red-950/10'
+ )}
+ {renderActionSection(
+ 'Reduce',
+ 'reduce',
+ 'Which factors should be reduced well below the industry standard?',
+ 'border-yellow-500/50 dark:border-yellow-500/30 bg-yellow-50/50 dark:bg-yellow-950/10'
+ )}
+ {renderActionSection(
+ 'Raise',
+ 'raise',
+ 'Which factors should be raised well above the industry standard?',
+ 'border-green-500/50 dark:border-green-500/30 bg-green-50/50 dark:bg-green-950/10'
+ )}
+ {renderActionSection(
+ 'Create',
+ 'create',
+ 'Which factors should be created that the industry has never offered?',
+ 'border-blue-500/50 dark:border-blue-500/30 bg-blue-50/50 dark:bg-blue-950/10'
+ )}
+
+ );
+};
+
+export default FourActions;
diff --git a/components/core/PriceCorridor.tsx b/components/core/PriceCorridor.tsx
new file mode 100644
index 0000000..57a0a37
--- /dev/null
+++ b/components/core/PriceCorridor.tsx
@@ -0,0 +1,301 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/card';
+import { Button } from '@components/ui/button';
+import { Input } from '@components/ui/input';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@components/ui/select';
+import { useGlobalState } from '@contexts/state/StateContext';
+import { Trash2, Plus } from 'lucide-react';
+import {
+ LineChart,
+ Line,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ ReferenceLine,
+ ReferenceArea,
+ ResponsiveContainer,
+} from 'recharts';
+
+const PriceCorridor = () => {
+ const { state, dispatch } = useGlobalState();
+ const [newCompetitor, setNewCompetitor] = useState<{
+ name: string;
+ price: number;
+ category: 'same-form' | 'different-form' | 'different-function';
+ }>({
+ name: '',
+ price: 0,
+ category: 'same-form',
+ });
+
+ const setTargetPrice = (price: number) => {
+ dispatch({
+ type: 'UPDATE_TARGET_PRICE',
+ payload: price,
+ });
+ };
+
+ const addCompetitor = () => {
+ if (!newCompetitor.name || !newCompetitor.price) return;
+ dispatch({
+ type: 'ADD_COMPETITOR',
+ payload: {
+ name: newCompetitor.name,
+ price: newCompetitor.price,
+ category: newCompetitor.category,
+ },
+ });
+ setNewCompetitor({ name: '', price: 0, category: 'same-form' });
+ };
+
+ const removeCompetitor = (index: number) => {
+ dispatch({
+ type: 'SET_STATE',
+ payload: {
+ ...state,
+ priceCorridor: {
+ ...state.priceCorridor,
+ competitors: state.priceCorridor.competitors.filter(
+ (_, i) => i !== index
+ ),
+ },
+ },
+ });
+ };
+
+ const sortedCompetitors = [...state.priceCorridor.competitors].sort(
+ (a, b) => a.price - b.price
+ );
+
+ const prices = sortedCompetitors.map((c) => c.price);
+ const upperBound = Math.max(...prices, 0);
+ const lowerBound = Math.min(...prices, 0);
+ const range = upperBound - lowerBound;
+
+ const corridorLower = lowerBound + range * 0.3;
+ const corridorUpper = lowerBound + range * 0.8;
+
+ const chartData = sortedCompetitors.map((comp) => ({
+ name: comp.name,
+ price: comp.price,
+ category: comp.category,
+ }));
+
+ const categorizedCompetitors = {
+ 'same-form': sortedCompetitors.filter((c) => c.category === 'same-form'),
+ 'different-form': sortedCompetitors.filter(
+ (c) => c.category === 'different-form'
+ ),
+ 'different-function': sortedCompetitors.filter(
+ (c) => c.category === 'different-function'
+ ),
+ };
+
+ return (
+
+
+
+ Price Corridor of the Mass
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Strategic Price
+
+
+
+ {chartData.length > 0 && (
+
+
+ Suggested price corridor: {corridorLower.toFixed(2)} -{' '}
+ {corridorUpper.toFixed(2)}
+
+
This range typically captures 70-80% of target buyers
+
+ )}
+
+
+ Current target: {state.priceCorridor.targetPrice || 'Not set'}
+
+
+
+
+
+
+
+ Add Alternative
+
+
+
+
+
+
+
+
+
+ Price Alternatives Analysis
+
+
+
+ {Object.entries(categorizedCompetitors).map(
+ ([category, competitors]) => (
+
+
+ {category.replace('-', ' ')} Alternatives
+
+ {competitors.length > 0 ? (
+
+ {competitors.map((comp, index) => (
+
+ {comp.name}
+ {comp.price}
+ removeCompetitor(index)}
+ >
+
+
+ ))}
+
+ ) : (
+
+ No alternatives added
+
+ )}
+
+ )
+ )}
+
+
+
+ >({
+ industries: '',
+ groups: '',
+ buyers: '',
+ complementary: '',
+ functional: '',
+ trends: '',
+ });
+
+ const addOpportunity = (pathType: PathType) => {
+ if (!newOpportunities[pathType]) return;
+
+ dispatch({
+ type: 'ADD_OPPORTUNITY',
+ payload: {
+ pathType,
+ value: newOpportunities[pathType],
+ },
+ });
+ setNewOpportunities((prev) => ({ ...prev, [pathType]: '' }));
+ };
+
+ const removeOpportunity = (pathType: PathType, index: number) => {
+ dispatch({
+ type: 'SET_STATE',
+ payload: {
+ ...state,
+ sixPaths: {
+ ...state.sixPaths,
+ [pathType]: {
+ ...state.sixPaths[pathType],
+ opportunities: state.sixPaths[pathType].opportunities.filter(
+ (_, i) => i !== index
+ ),
+ },
+ },
+ },
+ });
+ };
+
+ const updateNotes = (pathType: PathType, notes: string) => {
+ dispatch({
+ type: 'UPDATE_PATH_NOTES',
+ payload: { pathType, notes },
+ });
+ };
+
+ const renderPath = (pathType: PathType) => {
+ const { title, description } = pathDefinitions[pathType];
+
+ return (
+
+
+ {title}
+
+
+ {description}
+
+