feat: build headless theatre laboratory website

frontend/src/components/LessonsSection.astro

@@ -0,0 +1,30 @@
+---
+import type { LessonContent } from "../lib/api";
+interface Props { lesson: LessonContent | null; contactUrl: string }
+const { lesson, contactUrl } = Astro.props;
+---
+
+<section class="lessons section" id="lezioni" aria-labelledby="lessons-title">
+  <div class="container">
+    <div class="section-heading horizontal-heading">
+      <div><p class="eyebrow">Informazioni pratiche</p><h2 id="lessons-title">Le lezioni</h2></div>
+      <p>Un appuntamento settimanale per allenarsi con continuità, senza fretta.</p>
+    </div>
+    {lesson ? (
+      <div class="lesson-panel">
+        <dl class="lesson-details">
+          <div><dt>Quando</dt><dd>{lesson.schedule}</dd></div>
+          <div><dt>Dove</dt><dd>{lesson.location}</dd></div>
+          <div><dt>Per chi</dt><dd>{lesson.audience}</dd></div>
+          <div><dt>Cosa facciamo</dt><dd><div class="rich-text" set:html={lesson.description} /></dd></div>
+        </dl>
+        <aside class="trial-card" aria-label="Lezione di prova">
+          <p class="eyebrow">Puoi provare</p>
+          <h3>{lesson.trial_lesson}</h3>
+          {lesson.notes && <p>{lesson.notes}</p>}
+          <a class="button" href={contactUrl}>Prenota un incontro</a>
+        </aside>
+      </div>
+    ) : <p class="empty-state">Il calendario delle lezioni sarà pubblicato presto.</p>}
+  </div>
+</section>