/* eslint-disable */
const { useState, useEffect, useRef, useMemo } = React;

/* ───── Reveal-on-scroll ───── */
function Reveal({ children, as: Tag = "div", delay = 0, className = "", ...rest }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setTimeout(() => setSeen(true), delay);
            io.disconnect();
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return (
    <Tag ref={ref} className={`reveal ${seen ? "in" : ""} ${className}`} {...rest}>
      {children}
    </Tag>
  );
}

/* ───── Nav ───── */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [active, setActive] = useState("top");
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    const ids = ["why", "capabilities", "process", "contact"];
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) setActive(e.target.id);
        });
      },
      { rootMargin: "-40% 0px -50% 0px" }
    );
    ids.forEach((id) => {
      const el = document.getElementById(id);
      if (el) io.observe(el);
    });
    return () => io.disconnect();
  }, []);
  return (
    <nav className={`nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="wrap nav-inner">
        <a href="#top" className="brand">
          <span className="dot"></span>
          TIN&nbsp;TIN&nbsp;TINT
        </a>
        <div className="nav-links">
          <a href="#why" className={active === "why" ? "is-active" : ""}>Why us</a>
          <a href="#capabilities" className={active === "capabilities" ? "is-active" : ""}>Capabilities</a>
          <a href="#process" className={active === "process" ? "is-active" : ""}>Process</a>
          <a href="#contact" className={active === "contact" ? "is-active" : ""}>Contact</a>
        </div>
        <a href="#contact" className="nav-cta">Start a project →</a>
      </div>
    </nav>
  );
}

/* ───── Hero ───── */
function Hero() {
  return (
    <header id="top" className="hero">
      <div className="wrap">
        <span className="hero-tag">Custom Product Development · Museum &amp; Cultural Retail</span>
        <h1 className="hero-h1">
          <span className="tin-line">Tin Tin Tint</span>
          <span className="hero-sub">— turning artwork into retail.</span>
        </h1>
        <div className="hero-grid">
          <p className="hero-lede">
            We partner with museums and cultural retailers to develop custom,
            short-run products that bring artworks to life — from sampling
            through to packaged delivery.
          </p>
          <div className="hero-right">
            <div className="hero-actions">
              <a href="#contact" className="btn btn-primary">
                Start a collection <span className="arrow">→</span>
              </a>
              <a href="#capabilities" className="btn btn-ghost">
                See what we make
              </a>
            </div>
            <div className="hero-trust">
              <span className="hero-trust-label">Selected partner of</span>
              <div className="hero-trust-logos">
                <a
                  href="https://www.metmuseum.org/"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hero-trust-tile met"
                  aria-label="The Metropolitan Museum of Art"
                >
                  <window.PartnerLogos.MetLogo className="hero-trust-logo" />
                </a>
                <a
                  href="https://www.britishmuseum.org/"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hero-trust-tile bm"
                  aria-label="The British Museum"
                >
                  <window.PartnerLogos.BritishMuseumLogo className="hero-trust-logo" />
                </a>
              </div>
            </div>
          </div>
        </div>

        <div className="hero-stats">
          <div><div className="num">11</div><div className="lab">Material families</div></div>
          <div><div className="num">200+</div><div className="lab">Product formats</div></div>
          <div><div className="num">5–7</div><div className="lab">Days to first sample</div></div>
          <div><div className="num">150</div><div className="lab">Minimum order qty</div></div>
        </div>
      </div>
    </header>
  );
}

/* ───── Marquee ───── */
function Marquee() {
  const items = [
    "Concept to retail",
    "Low-MOQ short runs",
    "OEM · ODM",
    "Museum-grade quality",
    "5–7 day sampling",
    "Custom packaging",
    "Worldwide delivery",
    "11 material families",
  ];
  const seq = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {seq.map((t, i) => (
          <span key={i} className="marquee-item">{t}</span>
        ))}
      </div>
    </div>
  );
}

/* ───── Why Us ───── */
function WhyUs() {
  const items = [
    { t: "Low MOQ", d: "Flexible production for museum-scale projects. We work in short runs without sacrificing finishing or quality.", icon: window.WhyIcons.moq },
    { t: "Fast Sampling", d: "First samples in five to seven days. Iterate quickly and bring buyer-ready prototypes to your reviews.", icon: window.WhyIcons.sample },
    { t: "OEM / ODM", d: "From your concept or ours — full development support, from artwork translation through final tooling.", icon: window.WhyIcons.oem },
    { t: "Museum-Level Quality", d: "Crafted with the precision and finishing that cultural retail demands. Documented at every step.", icon: window.WhyIcons.quality },
    { t: "Wide Techniques", d: "Metal, paper, textile, leather, ceramic, acrylic and more — coordinated across a single collection.", icon: window.WhyIcons.techniques },
    { t: "Custom Packaging", d: "Carriers, sleeves, gift boxes and POS-ready displays designed for retail floor and exhibition shop.", icon: window.WhyIcons.packaging },
    { t: "Proven Network", d: "Trusted by leading museum stores in the United States and Europe. References available on request.", icon: window.WhyIcons.network },
    { t: "Concept → Delivery", d: "Single point of accountability from creative brief to packaged delivery at your warehouse door.", icon: window.WhyIcons.delivery },
  ];
  return (
    <section id="why" className="section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">01 — Why work with us</span>
            <h2>A development partner, <em>not just a factory.</em></h2>
          </div>
          <p className="desc">
            We sit between the curatorial team and the production line, translating
            artwork and brand intent into commercially viable retail product —
            with the documentation, sampling discipline and packaging your stores expect.
          </p>
        </div>
        <div className="why">
          {items.map((it, i) => (
            <Reveal key={i} className="why-card" delay={i * 40}>
              <span className="num">0{i + 1}</span>
              <div className="icon">{it.icon}</div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Reveal, Nav, Hero, Marquee, WhyUs });