/* Contact (with billing-statement reassurance) + Footer */

function Contact() {
  const ctaRef = useMagnetic(0.4);
  return (
    <section className="section contact" id="contact">
      <div className="wrap">
        <div className="contact-card reveal">
          <div className="contact-left">
            <span className="section-num">05 — CONTACT &amp; BILLING</span>
            <h2 className="h-big" style={{ marginTop: '18px' }}>Recognize<br />a charge?</h2>
            <p className="contact-actions lead" style={{ marginTop: '20px', maxWidth: '40ch' }}>
              If you see <strong style={{ color: 'var(--paper)' }}>SWIFT LABS</strong> on your bank
              or card statement, it's from a product you signed up for. Match it below, or reach out
              and we'll help you sort it out fast.
            </p>
            <div className="contact-actions" style={{ marginTop: '26px' }}>
              <a className="btn" href="mailto:support@swiftlabs.ltd" ref={ctaRef}>
                <span className="dot"></span>support@swiftlabs.ltd
              </a>
              <a className="btn-ghost" href="#products">Find my product</a>
            </div>
          </div>

          <div className="contact-right">
            <div className="contact-statement">
              <div className="head">As it appears on your statement</div>
              <div className="row hl"><span>SWIFTLABS.LTD*REELI</span><span>—</span></div>
              <div className="row"><span>Descriptor</span><span>SWIFT LABS VENTURES LLC</span></div>
              <div className="row"><span>Location</span><span>USA</span></div>
              <div className="row"><span>Support</span><span>swiftlabs.ltd</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" id="footer">
      <div className="wrap">
        <div className="footer-top">
          <a className="brand" href="#top" style={{ fontSize: '24px' }}>
            <BrandMark />
          </a>
          <div className="footer-cols">
            <div className="footer-col">
              <h4>Products</h4>
              <a href="https://reeli.shop" target="_blank" rel="noreferrer">reeli.shop</a>
              <p>ADHD To-Do</p>
              <p>StarPractice.io</p>
            </div>
            <div className="footer-col">
              <h4>Company</h4>
              <a href="#about">About</a>
              <a href="#approach">Approach</a>
              <a href="#products">Portfolio</a>
            </div>
            <div className="footer-col">
              <h4>Support</h4>
              <a href="mailto:support@swiftlabs.ltd">support@swiftlabs.ltd</a>
              <a href="#contact">Billing &amp; charges</a>
            </div>
            <div className="footer-col">
              <h4>Legal Entity</h4>
              <p>Swift Labs Ventures LLC</p>
              <p>[ Registered Agent Address ]</p>
              <p>[ State ], USA</p>
            </div>
          </div>
        </div>

        <div className="footer-bigmark" aria-hidden="true">SWIFT LABS</div>

        <div className="footer-legal">
          <span>© 2026 Swift Labs Ventures LLC. All rights reserved.</span>
          <span>swiftlabs.ltd — An independent innovation hub</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Contact, Footer });