// Hero block — large editorial type with route meta
function Hero({ owner }) {
  return (
    <section className="hero">
      <div>
        <div className="mono" style={{ marginBottom: 24 }}>Um catálogo de despedida · {owner.from}</div>
        <h1>
          Desapegos<br/>
          <span className="ita">da mudança.</span>
        </h1>
      </div>
      <div className="hero-meta">
        <span className="mono kicker">Rota</span>
        <div className="route">
          <b>{owner.from.split(",")[0]}</b><br/>
          para <b>{owner.to.split(",")[0]}</b>
        </div>
      </div>
    </section>
  );
}

// Countdown as a sentence
function CountdownLine({ iso }) {
  const { d, h, m, s } = useCountdown(iso);
  return (
    <div className="shell">
      <div className="countdown">
        <div className="mono" style={{ marginBottom: 18 }}>Embarque · {formatDisplayDate(iso.slice(0, 10))}</div>
        <div className="line">
          faltam <b>{d}</b> dias, <b>{String(h).padStart(2,"0")}</b> horas<br/>
          e <b>{String(m).padStart(2,"0")}</b> minutos para a despedida.
        </div>
      </div>
    </div>
  );
}

// Letter section
function Letter({ letter }) {
  return (
    <section className="shell">
      <div className="letter-section">
        <div className="label">
          <span className="mono">Carta</span>
        </div>
        <div className="body">
          {letter.map((p, i) => <p key={i}>{p}</p>)}
          <div className="sign">— Bruno</div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, CountdownLine, Letter });