// confirmation.jsx — Screen 3: After submission

const ConfirmationScreen = ({ name, callDateLabel }) => {
  return (
    <main className="screen-enter conf-shell">
      {/* Status badge */}
      <div className="conf-badge-wrap">
        <span className="conf-badge">
          <I.Check className="conf-badge-check"/>
          Briefing eingegangen · vor &lt;1 Minute
        </span>
      </div>

      <h1 className="conf-h1">Wir sind im Bilde.</h1>

      <p className="conf-lead">
        Danke, {name}. Wir lesen uns ein und bereiten Vorschläge zu deinen Use Cases vor. Am <strong>{callDateLabel}</strong> besprechen wir die.
      </p>

      {/* Timeline */}
      <div className="conf-section-title">Was jetzt passiert</div>
      <div className="conf-timeline">
        <div className="tl-row tl-current">
          <div className="tl-rail"><span className="tl-dot"/></div>
          <div className="tl-content">
            <div className="tl-when">Heute · vor &lt;1 Minute</div>
            <div className="tl-title">Briefing eingegangen</div>
            <div className="tl-sub">Wir lesen uns rein und ziehen die wichtigsten Hebel raus.</div>
          </div>
        </div>
        <div className="tl-row">
          <div className="tl-rail"><span className="tl-dot"/></div>
          <div className="tl-content">
            <div className="tl-when">Vor dem Call</div>
            <div className="tl-title">Wir bereiten vor</div>
            <div className="tl-sub">Konkrete Vorschläge zu deinen Use Cases.</div>
          </div>
        </div>
        <div className="tl-row tl-highlight">
          <div className="tl-rail"><span className="tl-dot"/></div>
          <div className="tl-content">
            <div className="tl-when">{callDateLabel}</div>
            <div className="tl-title">Unser Call</div>
            <div className="tl-sub">Wir gehen unsere Vorschläge durch, Q&amp;A, nächste Schritte.</div>
          </div>
        </div>
      </div>

      {/* Contact card */}
      <div className="conf-contact">
        <div className="conf-contact-faces">
          <div className="face-stack">
            <div className="face face-1">
              <img src="assets/jens.jpg" alt="Jens Bohse"/>
            </div>
            <div className="face face-2">
              <img src="assets/max.jpg" alt="Max"/>
            </div>
            <div className="face face-3">
              <img src="assets/sina.jpg" alt="Sina"/>
            </div>
          </div>
          <div className="conf-contact-text">
            <div className="conf-contact-name">Jens, Max & Sina</div>
            <div className="conf-contact-meta">bakedwith · Antwortet meist innerhalb einer Stunde</div>
          </div>
        </div>
        <div className="conf-contact-actions">
          <a href="mailto:jens.bohse@bakedwith.com" className="btn btn-secondary conf-contact-btn">
            <I.Mail style={{ width: 16, height: 16 }}/> E-Mail
          </a>
        </div>
      </div>
    </main>
  );
};

window.ConfirmationScreen = ConfirmationScreen;