// Masthead · the cover of the codex
function Masthead() {
  const [hour, setHour] = React.useState(new Date());
  React.useEffect(() => {
    const t = setInterval(() => setHour(new Date()), 1000);
    return () => clearInterval(t);
  }, []);

  const hh = String(hour.getHours()).padStart(2, '0');
  const mm = String(hour.getMinutes()).padStart(2, '0');
  const ss = String(hour.getSeconds()).padStart(2, '0');

  return (
    <section className="page" style={{ paddingTop: 28, paddingBottom: 40, position: 'relative' }}>
      {/* top strip: colophon */}
      <div className="mast-meta" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 10 }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '.2em', textTransform: 'uppercase' }}>
          No. <span className="ink-red">MMXXVI</span> / Vol. VII · <span className="ink-red arabic" style={{fontSize: 14}}>بسم الله</span> · Published from Poznań, POL
        </div>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '.2em' }}>
          {hh}:{mm}<span style={{opacity:.4}}>:{ss}</span> CET
        </div>
      </div>
      <hr className="rule-thick" />
      <div className="mono mast-sub" style={{ display:'flex', justifyContent:'space-between', fontSize: 10, letterSpacing: '.25em', textTransform: 'uppercase', padding: '4px 0' }}>
        <span>THE CODEX</span>
        <span>· A FIELD JOURNAL IN ONE VOLUME ·</span>
        <span>EST. 2002</span>
      </div>
      <hr className="rule" />

      {/* masthead row */}
      <div className="mast-row" style={{ display: 'grid', gridTemplateColumns: '1.1fr 2fr 1fr', gap: 40, alignItems: 'end', padding: '30px 0 10px' }}>
        <div>
          <div className="kicker" style={{ marginBottom: 12 }}>SUBJECT · DOSSIER 001</div>
          <div className="didone" style={{ fontSize: 'clamp(42px, 5vw, 72px)', lineHeight: .9 }}>
            Youcef
          </div>
          <div className="didone" style={{ fontSize: 'clamp(42px, 5vw, 72px)', lineHeight: .9, fontStyle: 'italic', color: 'var(--stamp)' }}>
            Badaoui
          </div>
          <div className="mono" style={{ marginTop: 16, fontSize: 12, letterSpacing: '.15em', display:'flex', alignItems:'baseline', gap: 10 }}>
            <span className="arabic" style={{ fontSize: 22, letterSpacing: 0, color:'var(--stamp)' }}>يوسف</span>
            <span>· DZ · DE · PL</span>
          </div>
        </div>

        <div className="mast-title-wrap" style={{ textAlign: 'center' }}>
          <div className="masthead-title misregister" data-text="YOUCEF.IO">
            YOUCEF.IO
          </div>
        </div>

        <div className="mast-right" style={{ textAlign: 'right' }}>
          <div className="stamp" style={{ transform: 'rotate(8deg)', display: 'inline-block' }}>
            ACTIVE / FIELD
          </div>
          <div style={{ marginTop: 18 }}>
            <div className="kicker">FOLIO</div>
            <div className="didone" style={{ fontSize: 48 }}>№ 01</div>
          </div>
        </div>
      </div>

      <hr className="rule" />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16, padding: '10px 0', fontSize: 11 }} className="mono mast-info">
        <div><span style={{opacity:.5}}>ROLE ·</span><br/>SOFTWARE ENGINEER @ AUROLOGIC</div>
        <div><span style={{opacity:.5}}>STACK ·</span><br/>VUE.JS · GOLANG · MICROSERVICES</div>
        <div><span style={{opacity:.5}}>STUDY ·</span><br/>M.SC · ICT · ELECTRONICS &amp; TEL.</div>
        <div><span style={{opacity:.5}}>SCHOOL ·</span><br/>POZNAŃ UNIV. OF TECHNOLOGY</div>
        <div><span style={{opacity:.5}}>DISPATCH ·</span><br/>ME@YOUCEF.IO</div>
      </div>
      <hr className="rule-thick" />

      {/* marquee edge */}
      <div className="edge-bar" style={{ marginTop: 0, borderTop: 0 }}>
        <div className="ticker-track">
          {Array.from({length: 2}).map((_, k) => (
            <span key={k} style={{paddingRight: 40}}>
              ★ AUROLOGIC GMBH · FRANKFURT · VUE.JS · GOLANG · MICROSERVICES · CLOUD INFRASTRUCTURE · CYBERFILTERS · VIRFECT · TRIOSPARE · POZNAŃ · AÏN BESSEM · ★ QUIETLY CREATING MY OWN STORY ·&nbsp;
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Masthead });