/* Header, Footer, TrustStrip */

const { useEffect, useState } = React;

/* Live HTML logo lockup — Option A "Stencil Stack".
   Sizes via fontSize on the outer element; everything inside uses em. */
const Wordmark = ({ size = 22, onDark = false, withTagline = false }) => (
  <span className={"wm" + (onDark ? " wm--on-dark" : "")} style={{ fontSize: size }}>
    <span className="wm-row"><span className="wm-word">Storage</span></span>
    <span className="wm-bar" />
    <span className="wm-row"><span className="wm-word">Cartel</span><span className="wm-stop" /></span>
    {withTagline && <span className="wm-tag">Secure storage · Modern rules</span>}
  </span>
);

const NAV_ITEMS = [
  { label: "Storage", href: "storage.html" },
  { label: "Pricing", href: "pricing.html" },
  { label: "How It Works", href: "how-it-works.html" },
  { label: "Business", href: "business.html" },
  { label: "FAQ", href: "faq.html" },
  { label: "Contact", href: "contact.html" },
];

const Header = ({ activeHref }) => {
  const [condensed, setCondensed] = useState(false);
  useEffect(() => {
    const onScroll = () => setCondensed(window.scrollY > 80);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  // Auto-detect active page from URL if not provided
  const current = activeHref || (typeof window !== "undefined" ? window.location.pathname.split("/").pop() || "index.html" : "");
  return (
    <header className={"site-header" + (condensed ? " is-condensed" : "")}>
      <div className="container">
        <a className="brand" href="index.html" aria-label="Storage Cartel — home">
          <Wordmark size={26} onDark />
        </a>
        <nav className="nav" aria-label="Primary">
          {NAV_ITEMS.map((n) => (
            <a key={n.href} href={n.href} className={n.href === current ? "active" : ""}>
              {n.label}
            </a>
          ))}
        </nav>
        <div className="header-cta">
          <a className="signin" href="login.html">Sign In</a>
          <a className="btn btn-primary btn-sm" href="book.html">Book Storage <Icon.Arrow size={14} /></a>
          <button className="menu-btn" aria-label="Menu"><Icon.Menu /></button>
        </div>
      </div>
    </header>
  );
};

const TrustStrip = () => (
  <section className="trust-strip" aria-label="Why Storage Cartel">
    <div className="container">
      <div className="row">
        <div className="trust-item"><span className="icon"><Icon.Lock /></span> Secure facility</div>
        <div className="trust-item"><span className="icon"><Icon.Calendar /></span> Friday & Saturday access</div>
        <div className="trust-item"><span className="icon"><Icon.Card /></span> No surprise fees</div>
        <div className="trust-item"><span className="icon"><Icon.Phone /></span> Manager support</div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="site-footer">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-brand">
          <Wordmark size={38} onDark />
          <div className="tag" style={{ marginTop: 18 }}>Secure storage. Modern rules.</div>
          <address>
            45 Hughes Road<br />
            Blairgowrie VIC 3942<br /><br />
            03 5988 0000<br />
            hello@storagecartel.com.au
          </address>
        </div>
        <div className="footer-col">
          <h5>Storage</h5>
          <ul>
            <li><a href="storage.html">Storage Options</a></li>
            <li><a href="business.html">Business Storage</a></li>
            <li><a href="vehicle-storage.html">Vehicle Storage</a></li>
            <li><a href="delivery.html">Delivery & Pickup</a></li>
            <li><a href="pricing.html">Pricing</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Help</h5>
          <ul>
            <li><a href="how-it-works.html">How It Works</a></li>
            <li><a href="faq.html">FAQ</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="login.html">Sign In</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Get started</h5>
          <ul>
            <li><a href="book.html" style={{ color: "#EC3214", fontWeight: 600 }}>Book Storage →</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Talk to us</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 Storage Cartel Pty Ltd. ABN [to be added].</div>
        <div className="links">
          <a href="terms.html">Terms</a>
          <a href="privacy.html">Privacy</a>
          <a href="agreement.html">Storage Agreement</a>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Header, Footer, TrustStrip });