econom_app/src/lib/components/Wizard.svelte

<!-- Wizard.svelte -->
<script>
    import { slide } from "svelte/transition";
    import ProgressBar from "./ProgressBar.svelte";
    import Step1_Founders from "./Step1_Founders.svelte";
    import Step2_Scale from "./Step2_Scale.svelte";
    import Step3_Activity from "./Step3_Activity.svelte";
    import Step4_Finance from "./Step4_Finance.svelte";
    import ResultCard from "./ResultCard.svelte";
    import { findRecommendation } from "../utils/matcher";
    import rules from "../data/rules.json";

    let step = $state(1);
    let form = $state({
        founders: 1,
        scale: "малый",
        activity: "услуги",
        investments: false,
        risk: true,
    });
    let result = $state(null);
    $inspect(result);

    $effect(() => {
        if (step === 5) {
            result = findRecommendation(form, rules);
        }
    });

    function next() {
        if (step < 5) step++;
    }

    function prev() {
        if (step > 1) step--;
    }

    function reset() {
        step = 1;
        result = null;
        form = {
            founders: 1,
            scale: "малый",
            activity: "услуги",
            investments: false,
            risk: true,
        };
    }

    const steps = [
        { num: 1, title: "Кто запускает?" },
        { num: 2, title: "Масштаб" },
        { num: 3, title: "Деятельность" },
        { num: 4, title: "Финансы и риски" },
        { num: 5, title: "Результат" },
    ];
</script>

<div class="wizard container">
    <h1 class="title">Выбор ОПФ для бизнеса</h1>
    <ProgressBar {step} total={5} />

    {#if step === 1}
        <div transition:slide>
            <Step1_Founders bind:value={form.founders} {next} />
        </div>
    {:else if step === 2}
        <div transition:slide>
            <Step2_Scale bind:value={form.scale} {next} {prev} />
        </div>
    {:else if step === 3}
        <div transition:slide>
            <Step3_Activity bind:value={form.activity} {next} {prev} />
        </div>
    {:else if step === 4}
        <div transition:slide>
            <Step4_Finance bind:form {next} {prev} />
        </div>
    {:else if step === 5}
        <div transition:slide>
            <ResultCard {result} {reset} />
        </div>
    {/if}
</div>

<style>
    .wizard {
        max-width: 600px;
        margin: 2rem auto;
        padding: 2rem;
        background-color: #ffffff;
        color: #1e293b;
        border-radius: 16px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        height: min-content;
    }

    .title {
        text-align: center;
        margin-bottom: 1rem;
        color: #0f172a;
    }

    /* Тёмная тема */
    @media (prefers-color-scheme: dark) {
        .wizard {
            background-color: #1e293b;
            color: #e2e8f0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }

        .title {
            color: #f1f5f9;
        }
    }
</style>