// Contact + Footer
function Contact() {
  const data = window.PORTFOLIO_DATA.contact;
  return (
    <section className="contact" id="contact">
      <div className="contact__aurora" aria-hidden="true" />
      <div className="container">
        <div className="contact__inner">
          <div className="contact__inline" data-reveal data-reveal-delay="1" style={{ marginTop: 64 }}>
            <span className="contact__inline-row"><span className="contact__inline-key">EMAIL</span>{data.email}</span>
            <span className="contact__inline-row"><span className="contact__inline-key">LINKEDIN</span>{data.linkedin}</span>
          </div>
        </div>
      </div>
      <div className="contact__bg-text" aria-hidden>YUI YU</div>
    </section>
  );
}

function Footer() {
  return (
    // id="contact" lives here, not on <Contact> above: App renders Footer only,
    // so the nav's "Contact Me →" had no target. The footer block is the actual
    // contact section (DESIGN_SPEC §3.6). If <Contact> is ever mounted, move the
    // id back — two elements must not share it.
    <footer className="footer" id="contact">
      <div className="container">
        {/* 3.6 — contact block: staggered rise-in title + contact groups */}
        <div className="ft" data-reveal>
          <h2 className="ft__title" style={{ marginRight: "5vw" }} aria-label="Let's create something together">
            <span className="ft__word" style={{ '--i': 0 }}>Let's</span>{' '}
            <span className="ft__word" style={{ '--i': 1 }}>create</span>{' '}
            <span className="ft__word ft__word--serif" style={{ '--i': 2 }}>something</span>{' '}
            <span className="ft__word" style={{ '--i': 3 }}>together</span>
          </h2>
          <div className="ft__blocks">
            <div className="ft__block" style={{ '--i': 5 }}>
              <span className="ft__key">EMAIL</span>
              <a className="ft__val" href="mailto:yuiyu.contact@gmail.com">yuiyu.contact@gmail.com</a>
            </div>
            <div className="ft__block" style={{ '--i': 7 }}>
              <span className="ft__key">LINKEDIN</span>
              <a
                className="ft__val"
                href="https://www.linkedin.com/in/chingsinyu/"
                target="_blank"
                rel="noopener noreferrer"
              >
                linkedin.com/in/chingsinyu ↗
              </a>
            </div>
            <div className="ft__block" style={{ '--i': 9 }}>
              <span className="ft__key">BASED IN</span>
              <span className="ft__val">Taipei, Taiwan</span>
            </div>
          </div>
        </div>

        <div className="footer__inner">
          <div className="footer__brand" data-reveal>
            <span className="logo-mark" style={{ width: 24, height: 24, fontSize: 13 }}><span>Y</span></span>
            <span>游清心 · Yui Yu</span>
          </div>
          <span className="footer__meta" data-reveal data-reveal-delay="1">PORTFOLIO · 2025 EDITION · TAIPEI</span>
          <div className="footer__links" data-reveal data-reveal-delay="2">
            {/* #about never existed; the nav pill's "About Me" points at #top */}
            <a href="#top">About Me</a>
            <a href="#projects">Works</a>
            <a href="#solutions">Solutions</a>
            <a href="#contact">Contact Me</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

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