econom_app/src/lib/components/Step3_Activity.svelte

<script>
    let {
        value = $bindable(),
        next = $bindable(),
        prev = $bindable(),
    } = $props();

    const activities = [
        {
            id: "услуги",
            title: "Услуги",
            examples: "Консультации, ремонт, обучение",
        },
        {
            id: "торговля",
            title: "Торговля",
            examples: "Магазин, маркетплейс, опт",
        },
        {
            id: "производство",
            title: "Производство",
            examples: "Еда, мебель, оборудование",
        },
        { id: "IT", title: "IT / Стартап", examples: "ПО, приложения, SaaS" },
    ];
</script>

<div class="step">
    <h3>3. Чем будете заниматься?</h3>
    <p class="hint">Выберите основной вид деятельности</p>

    <div class="grid">
        {#each activities as act}
            <label class="tile" class:selected={value === act.id}>
                <input type="radio" bind:group={value} value={act.id} />
                <div class="icon">Icon</div>
                <strong>{act.title}</strong>
                <small>{act.examples}</small>
            </label>
        {/each}
    </div>

    <div class="actions">
        <button onclick={prev} class="secondary">Назад</button>
        <button onclick={next} disabled={!value}>Далее</button>
    </div>
</div>

<style>
    .hint {
        color: #666;
        margin-bottom: 1rem;
    }
    .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin: 1.5rem 0;
    }
    @media (max-width: 600px) {
        .grid {
            grid-template-columns: 1fr;
        }
    }
    .tile {
        text-align: center;
        padding: 1.5rem 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 16px;
        cursor: pointer;
        transition: all 0.2s;
        background: white;
    }
    .tile:hover {
        border-color: #2563eb;
        transform: translateY(-2px);
    }
    .tile.selected {
        border-color: #2563eb;
        background: #ebf3ff;
    }
    .icon {
        width: 40px;
        height: 40px;
        background: #cbd5e1;
        border-radius: 50%;
        margin: 0 auto 0.75rem;
    }
    small {
        color: #64748b;
        font-size: 0.85rem;
        display: block;
        margin-top: 0.5rem;
    }
    .actions {
        display: flex;
        justify-content: space-between;
        margin-top: 2rem;
    }
    button {
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
    }
    .secondary {
        background: #f8fafc;
        color: #334155;
    }
</style>