// page-contact.jsx — clean editorial contact layout.
const { useTweaks, loadTweaks, SITE_TWEAK_DEFAULTS, useSiteSetup, useReveal, useClock,
  Nav, SiteTweaks, MagneticCursor } = window;
function ContactSection() {
  const C = window.CONTACT;
  return (
    <section className="contact-clean">
      <div className="cc-head">
        <h1 className="cc-title impact" style={{ fontSize: "55px", fontWeight: "600" }}>Contact</h1>
        <p className="cc-intro">Let's create something meaningful together.<br />Tell me about your project.</p>
      </div>

      <div className="cc-info">
        <div className="cc-group">
          <span className="mono dim cc-label">Email &amp; Phone</span>
          <a href={`mailto:${C.email}`} className="cc-line" data-cursor="link">{C.email}</a>
          <a href={`tel:${C.phone.replace(/\s/g, '')}`} className="cc-line" data-cursor="link">{C.phone}</a>
        </div>
        <div className="cc-group">
          <span className="mono dim cc-label">Socials</span>
          <a href={C.linkedin} target="_blank" rel="noopener" data-no-transition className="cc-line mono" data-cursor="link">LinkedIn</a>
          <a href={C.site} target="_blank" rel="noopener" data-no-transition className="cc-line mono" data-cursor="link">Behance</a>
        </div>
      </div>

      <div className="cc-portrait">
        <img src="assets/sajjad-portrait.jpg" alt="Muhammed Sajjad" loading="lazy" />
      </div>
    </section>);

}

function ContactApp() {
  const [t, setTweak] = useTweaks(loadTweaks(SITE_TWEAK_DEFAULTS));
  useSiteSetup(t);
  useReveal();
  useClock();
  return (
    <div className="site contact-page">
      {t.grain && <div className="grain" aria-hidden="true" />}
      <MagneticCursor enabled={t.cursor} />
      <Nav current="contact" />
      <ContactSection />
      <SiteTweaks page="contact" t={t} setTweak={setTweak} />
    </div>);

}
ReactDOM.createRoot(document.getElementById('root')).render(<ContactApp />);
window.initCurtain();