/* eslint-disable */

function ContactSection() {
  return (
    <section id="contact" className="section">
      <div className="wrap">
        <div className="contact-grid">
          <div className="contact-info">
            <span className="eyebrow">04 — Let's talk</span>
            <h2>Let's create <em>something amazing</em> together.</h2>
            <p className="lede">
              Tell us about the collection you have in mind. Email or call us
              directly and we'll come back within one business day with a
              sampling plan and indicative timeline.
            </p>
            <div className="info-row">
              <span className="k">Email</span>
              <a href="mailto:teng@tintintintdesign.com">teng@tintintintdesign.com</a>
            </div>
            <div className="info-row">
              <span className="k">Phone</span>
              <a href="tel:+12126410635">+1 (212) 641-0635</a>
            </div>
            <div className="info-row">
              <span className="k">Studio</span>
              <span>New York, USA</span>
            </div>
            <div className="info-row">
              <span className="k">Hours</span>
              <span>Mon–Fri · 9–6 ET</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const yr = new Date().getFullYear();
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <div className="footer-brand">TIN&nbsp;TIN&nbsp;TINT</div>
            <p className="footer-brand-tag">
              Custom product development for museum &amp; cultural retail.
              From design to delivery.
            </p>
          </div>
          <div>
            <h5>Explore</h5>
            <a href="#why">Why us</a>
            <a href="#capabilities">Capabilities</a>
            <a href="#process">Process</a>
            <a href="#contact">Contact</a>
          </div>
          <div>
            <h5>Categories</h5>
            <a href="#capabilities">Metal &amp; hard goods</a>
            <a href="#capabilities">Leather &amp; PU</a>
            <a href="#capabilities">Textile &amp; apparel</a>
            <a href="#capabilities">Paper &amp; stationery</a>
          </div>
          <div>
            <h5>Studio</h5>
            <a href="mailto:teng@tintintintdesign.com">teng@tintintintdesign.com</a>
            <a href="tel:+12126410635">+1 (212) 641-0635</a>
            <span style={{ display: "block", padding: "6px 0", color: "rgba(245,241,234,0.78)", fontSize: 14 }}>New York, USA</span>
          </div>
        </div>
        <div className="footer-bot">
          <span>© {yr} Tin Tin Tint Design — Museum store product development partner.</span>
          <span>From design to delivery.</span>
        </div>
      </div>
    </footer>
  );
}

function App() {
  return (
    <>
      <Nav />
      <Hero />
      <WhyUs />
      <Capabilities />
      <Process />
      <ContactSection />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);