/* eslint-disable */

function HomePage() {
  return (
    <>
      <window.Hero />
      <window.CapabilitiesPreview />
      <window.BrandsPreview />
      <window.WhyUs />
      <window.Process />
      <window.ContactSection />
    </>
  );
}

function CapabilityPage({ id }) {
  const cat = (window.CAPABILITIES || []).find((c) => c.id === id);
  if (!cat) return <NotFoundPage />;
  return (
    <>
      <window.PageHero
        eyebrow="Capability"
        breadcrumb={[
          { label: "Home", to: "/" },
          { label: "Capabilities", to: "/#capabilities" },
          { label: cat.label },
        ]}
        name={cat.label}
        blurb={cat.blurb}
        specs={cat.specs}
        accent={cat.color}
      />
      <window.CapabilityDetail capability={cat} />
      <window.RelatedCapabilities currentId={id} />
      <window.ContactSection compact />
    </>
  );
}

function BrandPage({ id }) {
  const brand = (window.BRANDS || []).find((b) => b.id === id);
  if (!brand) return <NotFoundPage />;
  return (
    <>
      <window.PageHero
        eyebrow="Curated brand"
        breadcrumb={[
          { label: "Home", to: "/" },
          { label: "Brands", to: "/#brands" },
          { label: brand.name },
        ]}
        name={brand.name}
        tagline={brand.tagline}
        blurb={brand.blurb}
        specs={brand.specs}
        accent={brand.accent}
      />
      <window.BrandDetail brand={brand} />
      <window.RelatedBrands currentId={id} />
      <window.ContactSection compact />
    </>
  );
}

function NotFoundPage() {
  return (
    <section className="page-hero">
      <div className="wrap">
        <div className="page-hero-grid">
          <div>
            <span className="brand-eyebrow">404</span>
            <h1 className="page-hero-name">Page not found.</h1>
            <p className="page-hero-blurb">
              The page you're looking for doesn't exist. Head back to the home
              page and explore our capabilities and curated brands.
            </p>
            <div style={{ marginTop: 24 }}>
              <window.Link to="/" className="btn btn-primary">
                Back to home <span className="arrow">→</span>
              </window.Link>
            </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>
            <window.Link to="/#capabilities">Capabilities</window.Link>
            <window.Link to="/#brands">Brands</window.Link>
            <window.Link to="/#why">Why us</window.Link>
            <window.Link to="/#process">Process</window.Link>
            <window.Link to="/#contact">Contact</window.Link>
          </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>
  );
}

Object.assign(window, { HomePage, CapabilityPage, BrandPage, NotFoundPage, Footer });