add some notes in article

src/AppHeijunka.vue

@@ -19,8 +19,6 @@ import OrderItem from '@/modules/heijkunka/assets/OrderItem.vue'
 const days = Array.from({ length: NUMBER_OF_DAYS }, (_, i) => i + 1)
 const hours = Array.from({ length: NUMBER_OF_HOURS_PER_DAY }, (_, i) => i + 1)
 
-const hoursCount = hours.length
-
 const orders = ref(
   Array.from(
     { length: days.length * hours.length },
@@ -59,7 +57,7 @@ const levelingPlanning: ProductType[] = [
 ]
 
 const orderIndex = (dayIndex: number, hourIndex: number) => {
-  return dayIndex * hoursCount + hourIndex
+  return dayIndex * hours.length + hourIndex
 }
 
 const heijunkaStore = useHeijunkaStore()
@@ -77,7 +75,6 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
     <h2 class="created-at numeric">
       {{ createdAt }}
     </h2>
-    <div class="text">
     <p>
       You're selling shirts, jeans and shoes in a little town that is quite
       specific: every hour someone get to your shop and buys 1 item and they
@@ -87,12 +84,20 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
       You know, from your years of experience, that in 3 days, you sell
       approximately
     </p>
+    <div class="columns">
       <ul>
-        <li>5 shirts <ShirtItem v-for="_ in Array(5)" /></li>
+        <li>5 shirts</li>
-        <li>3 jeans <JeanItem v-for="_ in Array(3)" /></li>
+        <li>3 jeans</li>
-        <li>2 pairs of shoes <ShoeItem v-for="_ in Array(2)" /></li>
+        <li>2 pairs of shoes</li>
-        <li>2 hats <HatItem v-for="_ in Array(2)" /></li>
+        <li>2 hats</li>
       </ul>
+      <ul>
+        <li><ShirtItem v-for="_ in Array(5)" /></li>
+        <li><JeanItem v-for="_ in Array(3)" /></li>
+        <li><ShoeItem v-for="_ in Array(2)" /></li>
+        <li><HatItem v-for="_ in Array(2)" /></li>
+      </ul>
+    </div>
     <p>
       As there are 4 hours of production per day, you must produce 4 products
       per day to meet the 12 orders every 3 days. At the end, you produce 1
@@ -238,10 +243,7 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
       <div class="orders">
         <h2>Orders</h2>
         <ol>
-            <li
+          <li class="order" v-for="order in heijunkaStore.orders.toReversed()">
-              class="order"
-              v-for="order in heijunkaStore.orders.toReversed()"
-            >
             <RequestedStatus v-show="order.status === 'requested'" />
             <ReceivedStatus v-show="order.status === 'received'" />
 
@@ -266,21 +268,38 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
       investment. You already paid for the raw material, the workforce, the
       machines but until the client receives the product you won't get paid.
     </p>
+    <h2>Batching is more convenient</h2>
+    <p>
+      As the raw materials are not the same, you must plan . Making big batches
+      makes the production easier: you add stock so you.
+    </p>
+    <p>
+      But here comes the bullwhip effect: if you plan with margin, your
+      suppliers do it too, with margin. These margins add up and even a slight
+      change in priority demands a high change in the supply network.
+    </p>
     <p>
       The more stock there is, the more latent payments there are and the more
       paymeents are still waiting, the more you need to be good at planning
       batches.
     </p>
     <p>
-        Producing a bit of everything with small batches is the way to go and
+      So producing <em>a bit of everything</em> with small batches is the way to
-        that's the core of Heijunka
+      go and that's the core of Heijunka.
     </p>
-      <h2>What heijunka needs: SMED</h2>
+    <h2>
+      But heijunka needs conditions. First:
+      <strong title="Singe Minute Exchange of Dice">SMED</strong>
+    </h2>
     <p>
-        We didn't talk here about how we manage products that need different
+      We didn't talk here about how we manage products that need different time
-        time to be produced.
+      to be produced. There are multiple difficulties when we try to level the
+      production: by doing everything every day you must have much more
+      <strong class="rainbow" aria-label="flexibility">flexibility</strong> in
+      what you can make per day.
     </p>
-    </div>
+    <h2>Heijunka is fun</h2>
+    <p>There's no ///</p>
   </article>
 </template>
 
@@ -294,6 +313,14 @@ main {
   gap: 1rem;
 }
 
+.columns {
+  display: flex;
+
+  li {
+    line-height: 1.5rem;
+  }
+}
+
 li {
   display: flex;
   gap: 1rem;