---
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>