moving

apps/www/app/_components/ProblemTurn.tsx

@@ -0,0 +1,51 @@
+import { getTranslations } from 'next-intl/server';
+import Reveal from './Reveal';
+import styles from './ProblemTurn.module.css';
+
+const BEATS = ['reintroduce', 'tabs', 'compound'] as const;
+
+/**
+ * The problem statement ("every AI session starts from zero") in three
+ * beats, then the turn — Waggle's opposite bet — as a pull-quote with a
+ * honey rule. Strings under `landing.problem.*`.
+ */
+export default async function ProblemTurn() {
+  const t = await getTranslations('landing.problem');
+
+  return (
+    <section
+      id="problem"
+      className="section"
+      aria-labelledby="problem-heading"
+    >
+      <div className="container">
+        <header className={styles.header}>
+          <p className="eyebrow">{t('eyebrow')}</p>
+          <h2 id="problem-heading" className="section-headline">
+            {t('headline')}
+          </h2>
+        </header>
+
+        <div className={styles.grid}>
+          {BEATS.map((beat, i) => (
+            <Reveal key={beat} delay={(i + 1) as 1 | 2 | 3}>
+              <div className={styles.beat}>
+                <span className={styles.beatIndex} aria-hidden="true">
+                  {String(i + 1).padStart(2, '0')}
+                </span>
+                <h3 className={styles.beatTitle}>{t(`beats.${beat}.title`)}</h3>
+                <p className={styles.beatBody}>{t(`beats.${beat}.body`)}</p>
+              </div>
+            </Reveal>
+          ))}
+        </div>
+
+        <Reveal>
+          <div className={styles.turn}>
+            <p className={styles.turnText}>{t('turn')}</p>
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  );
+}