<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('user', {
            name: 'John Doe',
            age: 30,
            updateName(newName) {
                this.name = newName;
            },
            updateAge(newAge) {
                this.age = newAge;
            }
        });
    });
</script>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('tasks', {
            items: [],
            addTask(task) {
                this.items.push(task);
            }
        });
    });
</script>

<div x-data>
    <input x-ref="taskInput" type="text" placeholder="Add a task">
    <button @click="$store.tasks.addTask($refs.taskInput.value)">Add Task</button>
    <ul>
        <template x-for="task in $store.tasks.items" :key="task">
            <li x-text="task"></li>
        </template>
    </ul>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('tasks', {
            items: ['Task 1', 'Task 2', 'Task 3'],
            removeTask(index) {
                this.items.splice(index, 1);
            }
        });
    });
</script>

<div x-data>
    <ul>
        <template x-for="(task, index) in $store.tasks.items" :key="task">
            <li>
                <span x-text="task"></span>
                <button @click="$store.tasks.removeTask(index)">Remove</button>
            </li>
        </template>
    </ul>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('profile', {
            user: { name: 'John Doe', age: 30 },
            updateProfile(newName, newAge) {
                this.user.name = newName;
                this.user.age = newAge;
            }
        });
    });
</script>

<div x-data>
    <p>Name: <span x-text="$store.profile.user.name"></span></p>
    <p>Age: <span x-text="$store.profile.user.age"></span></p>
    <input x-ref="nameInput" type="text" placeholder="New name">
    <input x-ref="ageInput" type="number" placeholder="New age">
    <button @click="$store.profile.updateProfile($refs.nameInput.value, $refs.ageInput.value)">
        Update Profile
    </button>
</div>

<div x-data>
    <p>Current Theme: <span x-text="$store.theme.mode"></span></p>
    <button @click="$store.theme.mode = 'dark'">Set Dark Mode</button>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('counter', {
            value: 0,
            increment() {
                this.value++;
            },
            decrement() {
                this.value--;
            }
        });
    });
</script>

<!-- Component 1 -->
<div x-data>
    <p>Counter: <span x-text="$store.counter.value"></span></p>
</div>

<!-- Component 2 -->
<div x-data>
    <button @click="$store.counter.increment()">Increment</button>
    <button @click="$store.counter.decrement()">Decrement</button>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('settings', {
            preferences: {
                theme: 'light',
                notifications: true
            },
            updateTheme(newTheme) {
                this.preferences.theme = newTheme;
            },
            toggleNotifications() {
                this.preferences.notifications = !this.preferences.notifications;
            }
        });
    });
</script>

<div x-data>
    <p>Theme: <span x-text="$store.settings.preferences.theme"></span></p>
    <p>Notifications: <span x-text="$store.settings.preferences.notifications ? 'On' : 'Off'"></span></p>
    <button @click="$store.settings.updateTheme('dark')">Set Dark Theme</button>
    <button @click="$store.settings.toggleNotifications()">Toggle Notifications</button>
</div>