/* Shared shell: Img, Nav, Footer, Eyebrow, Btn, Reveal, ContactCTA */
const { useState, useEffect, useRef } = React;

/* ---- Smart image: falls back to a labeled striped placeholder on error ---- */
function Img({ src, alt, label, className, style, tag, eager }) {
  const [err, setErr] = useState(!src);
  const ph =
  <div className={"ph " + (className || "")} style={style} data-label={label || alt || "Image"} />;

  if (err) {
    return tag ? <div className="frame" style={style}>{ph}<span className="tag">{tag}</span></div> : ph;
  }
  const img =
  <img
    src={src}
    alt={alt || ""}
    loading={eager ? "eager" : "lazy"}
    className={className}
    style={style}
    onError={() => setErr(true)} />;


  return tag ? <div className="frame" style={style}>{img}<span className="tag">{tag}</span></div> : img;
}

function Eyebrow({ idx, children, accent, className }) {
  return (
    <span className={"eyebrow " + (accent ? "eyebrow--accent " : "") + (className || "")}>
      {idx && <span className="idx">{idx}</span>}
      {children}
    </span>);

}

function Btn({ href, onClick, variant, children, arrow = true, mag = true }) {
  const cls = "btn" + (variant ? " btn--" + variant : "");
  const inner = (
    <>
      <span>{children}</span>
      {arrow && <span className="arw" aria-hidden="true">→</span>}
    </>
  );
  const el = href
    ? <a className={cls} href={href} onClick={onClick} data-cur="link">{inner}</a>
    : <button className={cls} onClick={onClick} data-cur="link">{inner}</button>;
  if (mag && !COARSE && typeof Magnetic !== "undefined") return <Magnetic strength={0.4}>{el}</Magnetic>;
  return el;
}

function TextLink({ href, onClick, children }) {
  return (
    <a className="textlink" href={href || "#"} onClick={onClick}>
      <span>{children}</span><span className="arw" aria-hidden="true">→</span>
    </a>);

}

/* ---- Reveal on scroll ---- */
function Reveal({ children, as: Tag = "div", className, style, delay = 0 }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => {
        if (e.isIntersecting) {setTimeout(() => el.classList.add("in"), delay);io.unobserve(el);}
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <Tag ref={ref} className={"reveal " + (className || "")} style={style}>{children}</Tag>;
}

/* ---- Navigation ---- */
const NAV = [
{ id: "home", label: "Home" },
{ id: "about", label: "About" },
{ id: "plastics", label: "Plastics" },
{ id: "metals", label: "Metal Profiles" },
{ id: "contact", label: "Contact" }];


function Nav({ route, go }) {
  const [open, setOpen] = useState(false);
  useEffect(() => {setOpen(false);}, [route]);
  return (
    <>
      <header className="nav">
        <div className="wrap-wide nav__row">
          <a className="brand" href="#home" onClick={(e) => {e.preventDefault();go("home");}}>
            <span className="brand__mark">M</span>
            <span className="brand__txt">
              <b>MP&amp;P</b>
              <span>Metal Profiles &amp; Plastics</span>
            </span>
          </a>
          <nav className="nav__links">
            {NAV.map((n) =>
            <a key={n.id} className="nav__link" data-active={route === n.id}
            href={"#" + n.id} onClick={(e) => {e.preventDefault();go(n.id);}}>
                {n.label}
              </a>
            )}
          </nav>
          <div className="nav__cta">
            <Btn variant="accent" onClick={() => go("contact")}>Request a Quote</Btn>
            <button className="nav__burger" aria-label="Menu" onClick={() => setOpen((o) => !o)}>
              <svg width="20" height="14" viewBox="0 0 20 14" fill="none"><path d="M0 1h20M0 7h20M0 13h20" stroke="currentColor" strokeWidth="1.6" /></svg>
            </button>
          </div>
        </div>
      </header>
      {open &&
      <div className="sheet">
          {NAV.map((n, i) =>
        <a key={n.id} href={"#" + n.id} onClick={(e) => {e.preventDefault();go(n.id);}}>
              <span className="n">0{i + 1}</span>{n.label}
            </a>
        )}
          <div style={{ marginTop: 24 }}>
            <Btn variant="accent" onClick={() => go("contact")}>Request a Quote</Btn>
          </div>
        </div>
      }
    </>);

}

/* ---- Contact CTA band (dark) reused across pages ---- */
function ContactCTA({ go }) {
  const C = window.MPP.contact;
  return (
    <section className="foot-cta" style={{ background: "var(--steel)", color: "var(--on-steel)" }}>
      <div className="wrap section" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 48, alignItems: "end" }}>
        <div>
          <Eyebrow accent>Let&apos;s build something</Eyebrow>
          <h2 className="h2" style={{ color: "var(--on-steel)", marginTop: 22, maxWidth: "14ch" }}>
            Have a spec sheet? We&apos;ll quote it.
          </h2>
          <p className="lead" style={{ color: "var(--on-steel-2)", marginTop: 22 }}>
            Tell us the grade, profile, and volume — our team turns most inquiries around within 48 hours.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 34, flexWrap: "wrap" }}>
            <Btn variant="accent" onClick={() => go("contact")}>Request a Quote</Btn>
            <Btn variant="on-steel" href={C.wa}>WhatsApp Us</Btn>
          </div>
        </div>
        <div className="cta-meta">
          <CtaRow k="Phone" v={C.phone} href={C.wa} />
          <CtaRow k="Email" v={C.email} href={"mailto:" + C.email} />
          <CtaRow k="Region" v={C.region} />
        </div>
      </div>
    </section>);

}
function CtaRow({ k, v, href }) {
  const inner = <span style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 21, letterSpacing: "-.02em" }}>{v}</span>;
  return (
    <div style={{ borderTop: "1px solid rgba(237,234,224,.14)", padding: "18px 0", display: "flex", flexDirection: "column", gap: 7 }}>
      <span className="mono" style={{ fontSize: 11.5, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--on-steel-2)" }}>{k}</span>
      {href ? <a href={href} style={{ color: "var(--on-steel)" }} className="cta-link">{inner}</a> : <span style={{ color: "var(--on-steel)" }}>{inner}</span>}
    </div>);

}

/* ---- Footer ---- */
function Footer({ go }) {
  const C = window.MPP.contact;
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot__top">
          <div className="foot__brand">
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
              <span className="brand__mark" style={{ width: 38, height: 38 }}>M</span>
              <b>MP&amp;P</b>
            </div>
            <p style={{ color: "var(--on-steel-2)", maxWidth: "34ch", margin: 0, fontSize: 15.5 }}>
              Metal Profiles &amp; Plastics LLC — precision fabrication and polymer supply, trusted across industry for over 30 years.
            </p>
            <div className="chips" style={{ marginTop: 24 }}>
              <span className="mono" style={{ fontSize: 11.5, letterSpacing: ".1em", color: "var(--on-steel-2)" }}>ISO-MINDED · QUALITY-FIRST · USA</span>
            </div>
          </div>
          <div className="foot__col">
            <h5>Catalog</h5>
            {NAV.slice(1).map((n) =>
            <a key={n.id} href={"#" + n.id} onClick={(e) => {e.preventDefault();go(n.id);}}>{n.label}</a>
            )}
          </div>
          <div className="foot__col">
            <h5>Connect</h5>
            <a href={C.wa}>{C.phone}</a>
            <a href={"mailto:" + C.email}>{C.email}</a>
            <p style={{ color: "var(--on-steel-2)" }}>{C.region}</p>
          </div>
        </div>
        <div className="foot__bottom">
          <span>© 2022–2026 Metal Profiles &amp; Plastics LLC</span>
          <span>Designed for procurement that moves fast.</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Img, Eyebrow, Btn, TextLink, Reveal, Nav, ContactCTA, Footer, NAV });