/* global React, ReactDOM */
const { useState, useEffect } = React;

// ============ Logo Lockup ============
function Logo({ size = "md" }) {
  const scale = size === "lg" ? 1.8 : size === "sm" ? 0.8 : 1;
  return (
    <div className="logo" style={{ transform: `scale(${scale})`, transformOrigin: "left center" }}>
      <span className="logo-mark">
        <span className="j">J</span>
        <span className="r">R</span>
      </span>
      <span className="logo-words">
        <span className="logo-johnson">JOHNSON</span>
        <span className="logo-resources">Resources</span>
      </span>
    </div>
  );
}

// ============ Header ============
function Header({ active = "home" }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { key: "home", label: "Home", href: "Johnson Resources Homepage.html" },
    { key: "products", label: "Products", href: "Johnson Resources Products.html" },
    { key: "applications", label: "Applications", href: "#applications" },
    { key: "contact", label: "Contact", href: "#contact" },
  ];

  return (
    <header className={`site-header ${scrolled ? "" : "transparent"}`}>
      <div className="container-wide nav">
        <a href="Johnson Resources Homepage.html"><Logo size="sm" /></a>
        <nav className="nav-links">
          {links.map(l => (
            <a key={l.key} href={l.href} className={`nav-link ${active === l.key ? "active" : ""}`}>
              {l.label}
            </a>
          ))}
          <a href="#contact" className="nav-cta">Request a Quote</a>
        </nav>
      </div>
    </header>
  );
}

// ============ Footer ============
function Footer() {
  return (
    <footer className="site-footer">
      <div className="container-wide">
        <div className="footer-grid">
          <div className="footer-brand">
            <Logo size="sm" />
            <p>
              Trusted supplier of severe service valves, actuators, air regulators, flares, and combustors for flow control, pressure management, OOOOC compliance, and automation across the oil and gas industry.
            </p>
          </div>
          <div className="footer-col">
            <h4>Site</h4>
            <ul>
              <li><a href="Johnson Resources Homepage.html">Home</a></li>
              <li><a href="Johnson Resources Products.html">Products</a></li>
              <li><a href="#applications">Applications</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Capabilities</h4>
            <ul>
              <li><a href="Johnson Resources Products.html">Severe service valves</a></li>
              <li><a href="Johnson Resources Products.html">Actuators</a></li>
              <li><a href="Johnson Resources Products.html">Air regulators</a></li>
              <li><a href="Johnson Resources Products.html">Flares & combustors</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <ul>
              <li><a href="tel:13376540381">(337) 654-0381</a></li>
              <li><a href="mailto:jrj@johnsonres.com">jrj@johnsonres.com</a></li>
              <li><a href="#">208 Row One<br/>Lafayette, LA 70508</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Johnson Resources LLC. All rights reserved.</span>
          <span>Built by <a href="#">Digital DP</a> · <a href="#">Privacy Policy</a></span>
        </div>
      </div>
    </footer>
  );
}

// Expose to window for cross-file use
Object.assign(window, { Logo, Header, Footer });