import React, { useState, useEffect, useMemo } from 'react';

// --- Helper Icons (inline SVG to avoid external dependencies) ---
const PlusIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
);
const ZapIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
);
const TrashIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
);
const ChevronRightIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
);
const CheckCircleIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
);


// --- Logo Component ---
const Logo = () => (
    <div className="flex items-center space-x-2">
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="url(#paint0_linear_110_2)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            <path d="M2 17L12 22L22 17" stroke="url(#paint1_linear_110_2)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            <path d="M2 12L12 17L22 12" stroke="url(#paint2_linear_110_2)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            <defs>
                <linearGradient id="paint0_linear_110_2" x1="12" y1="2" x2="12" y2="12" gradientUnits="userSpaceOnUse">
                    <stop stopColor="#EC4899"/>
                    <stop offset="1" stopColor="#22D3EE"/>
                </linearGradient>
                <linearGradient id="paint1_linear_110_2" x1="12" y1="17" x2="12" y2="22" gradientUnits="userSpaceOnUse">
                    <stop stopColor="#A78BFA"/>
                    <stop offset="1" stopColor="#EC4899"/>
                </linearGradient>
                <linearGradient id="paint2_linear_110_2" x1="12" y1="12" x2="12" y2="17" gradientUnits="userSpaceOnUse">
                    <stop stopColor="#22D3EE"/>
                    <stop offset="1" stopColor="#A78BFA"/>
                </linearGradient>
            </defs>
        </svg>
        <h1 className="text-2xl font-extrabold text-white">Goal<span className="text-cyan-400">Breaker</span></h1>
    </div>
);

// --- AI Simulation Function ---
// In a real application, this would be a fetch call to an LLM API.
const getAIPlan = (goalTitle) => {
    return new Promise(resolve => {
        setTimeout(() => {
            let tasks = [];
            const lowerCaseTitle = goalTitle.toLowerCase();

            if (lowerCaseTitle.includes("portfolio website")) {
                tasks = [
                    { id: Date.now() + 1, title: 'Phase 1: Planning & Design', subtasks: [
                        { id: Date.now() + 2, title: 'Define target audience and goals' },
                        { id: Date.now() + 3, title: 'Gather inspiration and create a mood board' },
                        { id: Date.now() + 4, title: 'Sketch wireframes for key pages' },
                        { id: Date.now() + 5, title: 'Choose a color scheme and typography' },
                    ]},
                    { id: Date.now() + 6, title: 'Phase 2: Content Creation', subtasks: [
                        { id: Date.now() + 7, title: 'Write "About Me" section' },
                        { id: Date.now() + 8, title: 'Select and optimize project images/videos' },
                        { id: Date.now() + 9, title: 'Write project descriptions' },
                    ]},
                    { id: Date.now() + 10, title: 'Phase 3: Development', subtasks: [
                        { id: Date.now() + 11, title: 'Set up development environment' },
                        { id: Date.now() + 12, title: 'Build out page structure and navigation' },
                        { id: Date.now() + 13, title: 'Implement responsive design' },
                        { id: Date.now() + 14, title: 'Add animations and interactive elements' },
                    ]},
                    { id: Date.now() + 15, title: 'Phase 4: Deployment & Launch', subtasks: [
                        { id: Date.now() + 16, title: 'Purchase a domain name and hosting' },
                        { id: Date.now() + 17, title: 'Test for bugs and compatibility' },
                        { id: Date.now() + 18, title: 'Deploy the website' },
                        { id: Date.now() + 19, title: 'Announce the launch' },
                    ]},
                ];
            } else if (lowerCaseTitle.includes("run a 5k")) {
                tasks = [
                    { id: Date.now() + 1, title: 'Week 1-2: Build a Base', subtasks: [
                        { id: Date.now() + 2, title: 'Get proper running shoes' },
                        { id: Date.now() + 3, title: '3x weekly: 20-min run/walk intervals' },
                        { id: Date.now() + 4, title: '1x weekly: Cross-train' },
                    ]},
                    { id: Date.now() + 5, title: 'Week 3-4: Increase Endurance', subtasks: [
                        { id: Date.now() + 6, title: '3x weekly: Increase running intervals' },
                        { id: Date.now() + 7, title: 'Introduce one longer run (2 miles)' },
                    ]},
                    { id: Date.now() + 8, title: 'Week 5-6: Build Stamina', subtasks: [
                        { id: Date.now() + 9, title: 'Incorporate one day of hill repeats' },
                        { id: Date.now() + 10, title: 'Long run increases to 3 miles' },
                    ]},
                     { id: Date.now() + 11, title: 'Week 7-8: Taper & Race Prep', subtasks: [
                        { id: Date.now() + 12, title: 'Reduce mileage to recover' },
                        { id: Date.now() + 13, title: 'Practice race day nutrition' },
                        { id: Date.now() + 14, title: 'Plan race day logistics' },
                        { id: Date.now() + 15, title: 'Race Day!' },
                    ]},
                ];
            } else {
                 tasks = [
                    { id: Date.now() + 1, title: 'Discovery & Research', subtasks: [
                        { id: Date.now() + 2, title: 'Clearly define final outcome' },
                        { id: Date.now() + 3, title: 'Research best practices' },
                    ]},
                    { id: Date.now() + 4, title: 'Planning', subtasks: [
                        { id: Date.now() + 5, title: 'Break down into major phases' },
                        { id: Date.now() + 6, title: 'Estimate timelines for each phase' },
                    ]},
                    { id: Date.now() + 7, title: 'Execution', subtasks: [
                        { id: Date.now() + 8, title: 'Work on Phase 1 tasks' },
                        { id: Date.now() + 9, title: 'Regularly review progress' },
                    ]},
                     { id: Date.now() + 10, title: 'Review & Completion', subtasks: [
                        { id: Date.now() + 11, title: 'Final review of completed work' },
                        { id: Date.now() + 12, title: 'Share or launch the project' },
                    ]},
                ];
            }
            
            const plan = tasks.map(task => ({
                ...task,
                completed: false,
                subtasks: task.subtasks.map(subtask => ({ ...subtask, completed: false }))
            }));
            resolve(plan);
        }, 1500);
    });
};


// --- Core App Components ---

function Task({ task, onToggle }) {
    return (
        <div 
            className={`flex items-center space-x-3 p-3 rounded-lg transition-all duration-200 ${task.completed ? 'bg-slate-800/50 text-slate-500 line-through' : 'bg-slate-800 hover:bg-slate-700/80'}`}
            onClick={() => onToggle(task.id)}
            role="button" tabIndex="0" >
            <input 
                type="checkbox"
                checked={task.completed}
                onChange={() => {}}
                className="form-checkbox h-5 w-5 rounded bg-slate-700 border-slate-600 text-cyan-500 focus:ring-cyan-500 cursor-pointer"
            />
            <span>{task.title}</span>
        </div>
    );
}

function TaskGroup({ group, onToggleSubtask }) {
    const [isOpen, setIsOpen] = useState(true);
    const groupProgress = useMemo(() => {
        const totalSubtasks = group.subtasks.length;
        if (totalSubtasks === 0) return 0;
        const completedSubtasks = group.subtasks.filter(st => st.completed).length;
        return (completedSubtasks / totalSubtasks) * 100;
    }, [group.subtasks]);
    
    return (
        <div className="bg-slate-900/60 rounded-xl p-4 border border-slate-800">
            <div className="flex justify-between items-center cursor-pointer" onClick={() => setIsOpen(!isOpen)}>
                <h3 className="font-bold text-lg text-white">{group.title}</h3>
                <div className="flex items-center space-x-3">
                    <div className="w-24 bg-slate-700 rounded-full h-2.5">
                        <div className="bg-gradient-to-r from-cyan-400 to-fuchsia-500 h-2.5 rounded-full transition-all duration-300" style={{ width: `${groupProgress}%` }}></div>
                    </div>
                    <ChevronRightIcon className={`transform transition-transform ${isOpen ? 'rotate-90' : ''}`} />
                </div>
            </div>
            {isOpen && (
                <div className="mt-4 space-y-2">
                    {group.subtasks.map(subtask => (
                        <Task key={subtask.id} task={subtask} onToggle={() => onToggleSubtask(group.id, subtask.id)} />
                    ))}
                </div>
            )}
        </div>
    );
}

function GoalDetail({ goal, onUpdateGoal, onBack, onDeleteGoal }) {
    const [isLoading, setIsLoading] = useState(false);
    const handleDeconstruct = async () => {
        setIsLoading(true);
        const plan = await getAIPlan(goal.title);
        onUpdateGoal({ ...goal, tasks: plan });
        setIsLoading(false);
    };
    
    const handleToggleSubtask = (groupId, subtaskId) => {
        const updatedTasks = goal.tasks.map(group => {
            if (group.id === groupId) {
                return { ...group, subtasks: group.subtasks.map(subtask => 
                    subtask.id === subtaskId ? { ...subtask, completed: !subtask.completed } : subtask
                )};
            }
            return group;
        });
        onUpdateGoal({ ...goal, tasks: updatedTasks });
    };

    const overallProgress = useMemo(() => {
        if (!goal.tasks || goal.tasks.length === 0) return 0;
        const allSubtasks = goal.tasks.flatMap(g => g.subtasks);
        if (allSubtasks.length === 0) return 0;
        const completedSubtasks = allSubtasks.filter(st => st.completed).length;
        return Math.round((completedSubtasks / allSubtasks.length) * 100);
    }, [goal.tasks]);
    
    return (
        <div className="w-full max-w-4xl mx-auto p-4 md:p-6 text-white">
            <div className="flex justify-between items-center mb-6">
                 <button onClick={onBack} className="text-gray-400 hover:text-white">&larr; Back to Dashboard</button>
                 <button onClick={() => onDeleteGoal(goal.id)} className="bg-red-500/20 text-red-400 hover:bg-red-500/40 p-2 rounded-full transition-colors">
                     <TrashIcon />
                 </button>
            </div>
            
            <h1 className="text-4xl font-extrabold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-fuchsia-400 to-cyan-400">{goal.title}</h1>
            <p className="text-gray-400 mb-6">Target Date: {goal.targetDate || 'Not set'}</p>

             <div className="mb-8">
                <div className="flex justify-between items-center mb-1 text-sm font-medium text-cyan-300">
                    <span>Overall Progress</span>
                    <span>{overallProgress}%</span>
                </div>
                <div className="w-full bg-slate-800 rounded-full h-4">
                    <div className="bg-gradient-to-r from-cyan-400 to-fuchsia-500 h-4 rounded-full transition-all duration-500" style={{ width: `${overallProgress}%` }}></div>
                </div>
            </div>

            {goal.tasks && goal.tasks.length > 0 ? (
                <div className="space-y-4">
                    {goal.tasks.map(group => (
                        <TaskGroup key={group.id} group={group} onToggleSubtask={handleToggleSubtask} />
                    ))}
                </div>
            ) : (
                <div className="text-center p-10 border-2 border-dashed border-slate-700 rounded-lg">
                    <h2 className="text-xl font-semibold mb-2">This goal has no tasks yet.</h2>
                    <p className="text-gray-400 mb-4">Let our AI assistant break it down into manageable steps for you.</p>
                    <button onClick={handleDeconstruct} disabled={isLoading} className="inline-flex items-center gap-2 bg-gradient-to-r from-cyan-500 to-violet-500 hover:from-cyan-400 hover:to-violet-400 disabled:from-slate-700 disabled:to-slate-800 disabled:cursor-not-allowed text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg shadow-cyan-900/50">
                        {isLoading ? ( <> <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle> <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg> Deconstructing... </> ) : ( <> <ZapIcon /> AI Deconstruct Goal </> )}
                    </button>
                </div>
            )}
        </div>
    );
}

function AddGoalForm({ onAddGoal }) {
    const [title, setTitle] = useState('');
    const [targetDate, setTargetDate] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        if (!title.trim()) return;
        onAddGoal({ title, targetDate, id: Date.now(), tasks: [] });
        setTitle('');
        setTargetDate('');
    };

    return (
        <form onSubmit={handleSubmit} className="p-4 bg-slate-900/60 backdrop-blur-sm border border-slate-800 rounded-xl mb-8">
            <h2 className="text-xl font-bold text-white mb-4">Create a New Goal</h2>
            <div className="flex flex-col md:flex-row gap-4">
                <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Enter a new goal..." className="flex-grow bg-slate-800 text-white border border-slate-700 rounded-lg p-3 focus:ring-2 focus:ring-cyan-500 focus:outline-none" />
                <input type="date" value={targetDate} onChange={(e) => setTargetDate(e.target.value)} className="bg-slate-800 text-white border border-slate-700 rounded-lg p-3 focus:ring-2 focus:ring-cyan-500 focus:outline-none" />
                <button type="submit" className="flex justify-center items-center bg-gradient-to-r from-cyan-500 to-violet-500 hover:from-cyan-400 hover:to-violet-400 text-white font-bold py-3 px-6 rounded-lg transition-colors"> <PlusIcon /> <span className="md:hidden ml-2">Add Goal</span> </button>
            </div>
        </form>
    );
}

function GoalCard({ goal, onSelectGoal }) {
    const progress = useMemo(() => {
        if (!goal.tasks || goal.tasks.length === 0) return 0;
        const allSubtasks = goal.tasks.flatMap(g => g.subtasks);
        if (allSubtasks.length === 0) return 0;
        const completedSubtasks = allSubtasks.filter(st => st.completed).length;
        return Math.round((completedSubtasks / allSubtasks.length) * 100);
    }, [goal.tasks]);

    return (
        <div onClick={() => onSelectGoal(goal)} className="bg-slate-900/70 backdrop-blur-sm border border-slate-800 rounded-xl p-5 cursor-pointer hover:border-cyan-400 hover:shadow-2xl hover:shadow-cyan-900/50 transition-all transform hover:-translate-y-1">
            <h3 className="font-bold text-white text-lg truncate mb-2">{goal.title}</h3>
            <p className="text-sm text-gray-500 mb-4">{goal.targetDate || 'No date set'}</p>
            <div className="w-full bg-slate-700 rounded-full h-2.5">
                <div className="bg-gradient-to-r from-cyan-400 to-fuchsia-500 h-2.5 rounded-full" style={{ width: `${progress}%` }}></div>
            </div>
            <div className="text-right text-xs text-gray-400 mt-1">{progress}% complete</div>
        </div>
    );
}

function GoalList({ goals, onSelectGoal }) {
    return (
        <div className="w-full max-w-4xl mx-auto">
            {goals.length === 0 ? (
                <div className="text-center text-gray-400 py-10">
                    <h2 className="text-2xl font-bold text-white mb-2">Welcome to your Dashboard!</h2>
                    <p>You have no goals yet. Add one above to get started.</p>
                </div>
            ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {goals.map(goal => (
                        <GoalCard key={goal.id} goal={goal} onSelectGoal={onSelectGoal} />
                    ))}
                </div>
            )}
        </div>
    );
}

function AboutPage() {
    return (
        <div className="w-full max-w-4xl mx-auto p-4 md:p-6 text-white">
            <h1 className="text-4xl font-extrabold mb-6 text-center bg-clip-text text-transparent bg-gradient-to-r from-fuchsia-400 to-cyan-400">About GoalBreaker</h1>
            <div className="space-y-8 bg-slate-900/60 backdrop-blur-sm border border-slate-800 rounded-xl p-8">
                <div>
                    <h2 className="text-2xl font-bold text-cyan-400 mb-2">Company Overview</h2>
                    <p className="text-gray-300">Founded in 2025, GoalBreaker was created to address the universal challenge of procrastination. We believe that every great achievement starts with a single, manageable step. Our platform is designed to provide the structure and motivation needed to turn ambitious dreams into tangible realities for creators, professionals, and lifelong learners everywhere.</p>
                </div>
                <div>
                    <h2 className="text-2xl font-bold text-cyan-400 mb-2">Our Vision</h2>
                    <p className="text-gray-300">To help individuals transform overwhelming goals into small, achievable tasks, fostering consistent progress and boosting productivity.</p>
                </div>
                <div>
                    <h2 className="text-2xl font-bold text-cyan-400 mb-2">Our Mission</h2>
                    <p className="text-gray-300">GoalBreaker empowers users to break down large goals into manageable steps, providing tools for prioritization, tracking, and motivation to reduce procrastination and ensure sustained productivity.</p>
                </div>
                <div>
                    <h2 className="text-2xl font-bold text-cyan-400 mb-2">Our Goal</h2>
                    <p className="text-gray-300">To provide a simple, intuitive, and powerful tool that empowers anyone to turn their ambitions into real accomplishments through structured planning and consistent, focused action.</p>
                </div>
            </div>
        </div>
    );
}


// --- Landing Page Components ---

const LandingPage = ({ onNavigate }) => (
    <div className="w-full">
        {/* Hero Section */}
        <section className="text-center py-20 px-4">
            <h1 className="text-5xl md:text-7xl font-extrabold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-fuchsia-500 to-cyan-400">Turn Your Big Goals Into Achievable Steps</h1>
            <p className="max-w-2xl mx-auto text-lg text-slate-300 mb-8">GoalBreaker helps you break down overwhelming tasks into manageable actions, making productivity feel easy and achievable.</p>
            <button onClick={() => onNavigate('dashboard')} className="bg-gradient-to-r from-cyan-500 to-violet-500 hover:from-cyan-400 hover:to-violet-400 text-white font-bold py-4 px-8 rounded-lg text-lg transition-all duration-300 transform hover:scale-105 shadow-lg shadow-cyan-900/50">
                Start Breaking Your Big Goals Today
            </button>
        </section>

        {/* Features Section */}
        <section className="py-20 px-4 max-w-6xl mx-auto">
            <h2 className="text-4xl font-extrabold text-center mb-12">How GoalBreaker Helps You Succeed</h2>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <FeatureCard 
                    title="Goal Deconstruction"
                    description="Our smart AI helps you break down your largest goals into smaller, actionable tasks in seconds."
                />
                <FeatureCard 
                    title="Progress Tracker"
                    description="Visually track your progress with dynamic bars and charts. We celebrate every milestone with you!"
                />
                 <FeatureCard 
                    title="Task Prioritization"
                    description="Use time blocking and clear deadlines to visualize task importance and stay on track."
                />
                <FeatureCard 
                    title="Focus Mode"
                    description="A distraction-free interface with Pomodoro timers to help you get into a state of deep work."
                />
                 <FeatureCard 
                    title="Accountability"
                    description="Share your progress with friends or join group challenges to stay motivated together."
                />
                 <FeatureCard 
                    title="Motivational Notifications"
                    description="Receive timely reminders and positive reinforcements to keep your momentum going strong."
                />
            </div>
        </section>

        {/* Testimonials Section */}
        <section className="py-20 px-4 bg-slate-900/40">
             <h2 className="text-4xl font-extrabold text-center mb-12">Why People Love GoalBreaker</h2>
             <div className="max-w-5xl mx-auto grid md:grid-cols-3 gap-8">
                <TestimonialCard
                    quote="I was the king of procrastination. GoalBreaker's deconstruction feature made my huge project feel so manageable. I finally launched my business!"
                    name="Alex J."
                    role="Entrepreneur"
                />
                <TestimonialCard
                    quote="As a student with a million deadlines, this app is a lifesaver. The visual progress tracker keeps me motivated. I've never been more organized."
                    name="Samantha P."
                    role="University Student"
                />
                <TestimonialCard
                    quote="The accountability feature is a game-changer. Sharing my progress with a friend kept me on track for my fitness goals. We crushed it together!"
                    name="Mike R."
                    role="Fitness Enthusiast"
                />
             </div>
        </section>
    </div>
);

const FeatureCard = ({ title, description }) => (
    <div className="bg-slate-900/70 p-6 rounded-xl border border-slate-800 flex items-start space-x-4">
        <div className="flex-shrink-0 bg-cyan-500/20 text-cyan-400 p-3 rounded-full">
            <CheckCircleIcon />
        </div>
        <div>
            <h3 className="text-xl font-bold mb-2">{title}</h3>
            <p className="text-slate-400">{description}</p>
        </div>
    </div>
);

const TestimonialCard = ({ quote, name, role }) => (
    <div className="bg-slate-800/50 p-6 rounded-xl border border-slate-700">
        <p className="text-slate-300 italic mb-4">"{quote}"</p>
        <div>
            <p className="font-bold text-white">{name}</p>
            <p className="text-cyan-400 text-sm">{role}</p>
        </div>
    </div>
);


// --- Main App Component ---
export default function App() {
    const [goals, setGoals] = useState(() => {
        try {
            const savedGoals = localStorage.getItem('goalBreakerGoals');
            return savedGoals ? JSON.parse(savedGoals) : [];
        } catch (error) {
            console.error("Could not parse goals from localStorage", error); return [];
        }
    });
    
    const [currentPage, setCurrentPage] = useState('landing'); // 'landing', 'dashboard', 'goalDetail', 'about'
    const [selectedGoal, setSelectedGoal] = useState(null);

    useEffect(() => {
        try { localStorage.setItem('goalBreakerGoals', JSON.stringify(goals)); } catch (error) { console.error("Could not save goals to localStorage", error); }
    }, [goals]);

    // Effect to load the Zapier chatbot script
    useEffect(() => {
        const script = document.createElement('script');
        script.src = 'https://interfaces.zapier.com/assets/web-components/zapier-interfaces/zapier-interfaces.esm.js';
        script.async = true;
        script.type = 'module';
        document.body.appendChild(script);

        // Cleanup the script when the component unmounts
        return () => {
            // Check if the script is still in the body before trying to remove it
            if (script.parentNode) {
                document.body.removeChild(script);
            }
        };
    }, []); // Empty array ensures this effect runs only once

    const handleAddGoal = (newGoal) => { setGoals([...goals, newGoal]); };
    const handleUpdateGoal = (updatedGoal) => {
        setGoals(goals.map(g => g.id === updatedGoal.id ? updatedGoal : g));
        if (selectedGoal && selectedGoal.id === updatedGoal.id) { setSelectedGoal(updatedGoal); }
    };
    const handleDeleteGoal = (goalId) => {
        setGoals(goals.filter(g => g.id !== goalId));
        setCurrentPage('dashboard');
        setSelectedGoal(null);
    };
    const handleSelectGoal = (goal) => {
        setSelectedGoal(goal);
        setCurrentPage('goalDetail');
    };

    const renderContent = () => {
        switch (currentPage) {
            case 'goalDetail':
                return <GoalDetail goal={selectedGoal} onUpdateGoal={handleUpdateGoal} onBack={() => setCurrentPage('dashboard')} onDeleteGoal={handleDeleteGoal} />;
            case 'about':
                return <AboutPage />;
            case 'dashboard':
                return (
                    <div className="w-full max-w-4xl mx-auto p-4 md:p-6">
                        <AddGoalForm onAddGoal={handleAddGoal} />
                        <GoalList goals={goals} onSelectGoal={handleSelectGoal} />
                    </div>
                );
            case 'landing':
            default:
                return <LandingPage onNavigate={setCurrentPage} />;
        }
    };

    return (
        <div className="main-container min-h-screen bg-slate-900 font-sans text-white">
             {/* Keyframe animation for smooth transitions and new background */}
            <style>{`
                @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
                .fade-in { animation: fadeIn 0.5s ease-in-out; }

                .main-container {
                    position: relative;
                    overflow: hidden;
                }

                .main-container::before, .main-container::after {
                    content: '';
                    position: absolute;
                    filter: blur(100px);
                    z-index: 0;
                }

                .main-container::before {
                    content: '';
                    position: absolute;
                    width: 500px;
                    height: 500px;
                    top: -150px;
                    left: -200px;
                    background: radial-gradient(circle, rgba(236, 72, 153, 0.25) 0%, rgba(236, 72, 153, 0) 70%);
                    animation: pulse-pink 20s infinite ease-in-out;
                }

                .main-container::after {
                    content: '';
                    position: absolute;
                    width: 500px;
                    height: 500px;
                    bottom: -150px;
                    right: -200px;
                    background: radial-gradient(circle, rgba(34, 211, 238, 0.25) 0%, rgba(34, 211, 238, 0) 70%);
                    animation: pulse-cyan 25s infinite ease-in-out;
                }

                @keyframes pulse-pink {
                    0% { transform: scale(0.9) rotate(0deg); }
                    50% { transform: scale(1.1) rotate(20deg); }
                    100% { transform: scale(0.9) rotate(0deg); }
                }

                @keyframes pulse-cyan {
                    0% { transform: scale(1.1) rotate(0deg); }
                    50% { transform: scale(0.9) rotate(-20deg); }
                    100% { transform: scale(1.1) rotate(0deg); }
                }

            `}</style>

            <header className="p-4 border-b border-slate-700/50 sticky top-0 z-10 bg-slate-900/50 backdrop-blur-md">
                <nav className="w-full max-w-6xl mx-auto flex justify-between items-center">
                    <div onClick={() => setCurrentPage('landing')} className="cursor-pointer"><Logo /></div>
                    <div className="space-x-2 md:space-x-4">
                        <button onClick={() => setCurrentPage('landing')} className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${currentPage === 'landing' ? 'bg-cyan-500/80 text-white' : 'hover:bg-slate-800/60 text-slate-300'}`}>Home</button>
                        <button onClick={() => setCurrentPage('dashboard')} className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${currentPage === 'dashboard' ? 'bg-cyan-500/80 text-white' : 'hover:bg-slate-800/60 text-slate-300'}`}>Dashboard</button>
                        <button onClick={() => setCurrentPage('about')} className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${currentPage === 'about' ? 'bg-cyan-500/80 text-white' : 'hover:bg-slate-800/60 text-slate-300'}`}>About</button>
                    </div>
                </nav>
            </header>

            <main className="relative z-[1]">
                <div key={currentPage} className="fade-in">
                    {renderContent()}
                </div>
            </main>
            
             <footer className="relative z-[1] text-center text-slate-500 mt-12 py-8 px-4 border-t border-slate-800 text-sm">
                 <p>Deconstruct your ambitions. Conquer your goals.</p>
                 <div className="mt-4 space-x-4">
                    &copy; {new Date().getFullYear()} GoalBreaker. All Rights Reserved.
                 </div>
             </footer>

            {/* This renders the Zapier chatbot after the script is loaded */}
            <zapier-interfaces-page-embed page-id="clyd39s5a00030129h2s8o5a1" no-redirect></zapier-interfaces-page-embed>
        </div>
    );
}