// About / Contact / Newsletter sections

function About({ t }) {
  return (
    <section id="about" data-screen-label="06 About" className="sec sec-about">
      <SectionHead num="06" title="About" sub="biography / dossier" />
      <div className="abt-grid">
        <div className="abt-portrait">
          <div className="abt-portrait-frame">
            <img src="assets/about.jpg" alt="HTXEdifice performing live on modular synthesizer" loading="lazy" />
            <div className="abt-portrait-label">
              <div>SUBJECT</div>
              <div>HTXEDIFICE</div>
              <div className="dim">/ live, modular set</div>
            </div>
          </div>
        </div>
        <div className="abt-body">
          <p className="abt-lede">
            HTXEDIFICE is the recording and DJ alias of Justin A. Levine — a
            Houston-based artist working at the intersection of leftfield
            electronic, modular techno, and IDM.
          </p>
          <p>
            Active since 2006, the project spans live one-take modular recordings,
            era-spanning DJ mixes, and the weekly transmission <em>Rhythmic
            Oscillations</em> on KTRU 96.1 FM (Saturdays 11 AM – 12 PM CST).
          </p>
          <dl className="abt-dl">
            <div><dt>Based</dt><dd>Houston, Texas</dd></div>
            <div><dt>Active</dt><dd>2006 — present</dd></div>
            <div><dt>Show</dt><dd>Rhythmic Oscillations · KTRU 96.1 FM</dd></div>
          </dl>
        </div>
      </div>
    </section>
  );
}

function Contact({ t }) {
  return (
    <section id="contact" data-screen-label="07 Contact" className="sec sec-contact">
      <SectionHead num="07" title="Contact" sub="signal in / signal out" />
      <div className="ctc-grid ctc-grid-single">
        <div className="ctc-col">
          <div className="ctc-label">BOOKING · PRESS · DEMOS</div>
          <a className="ctc-mail" href="mailto:info@htxedifice.com">info@htxedifice.com</a>
          <div className="ctc-sub dim">all inquiries · no AI-generated outreach, please</div>
        </div>
      </div>

      <div className="ctc-social">
        {[
          ['SOUNDCLOUD', 'soundcloud.com/htxedifice'],
          ['BANDCAMP', 'htxedifice.bandcamp.com'],
          ['INSTAGRAM', '@htxedifice'],
        ].map(([k, v]) => (
          <a key={k} href="#" className="ctc-soc">
            <span className="dim">{k}</span>
            <span>{v} →</span>
          </a>
        ))}
      </div>
    </section>
  );
}

function Footer() {
  const [now, setNow] = React.useState(new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const t = now.toISOString().slice(0, 19).replace('T', ' ');
  return (
    <footer className="ftr">
      <div className="ftr-row">
        <div>HTXEDIFICE © 2026</div>
        <div className="dim">SYS_TIME {t} UTC</div>
        <div>SITE V.0.4 / NO COOKIES</div>
      </div>
      <div className="ftr-mark">HTXEDIFICE</div>
    </footer>
  );
}

window.About = About;
window.Contact = Contact;
window.Footer = Footer;