/* global React */
const { useState: uSL, useEffect: uEL, useRef: uRL } = React;

// ============================================================
// Shared atoms & layout
// ============================================================

function WordMark({ size = 32, className = "" }) {
  return (
    <div className={`wordmark ${className}`} style={{ fontSize: size }}>
      Everlit<sup>ART™</sup>
    </div>
  );
}

function SealIcon({ size = 24, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1">
      <circle cx="12" cy="12" r="10" />
      <circle cx="12" cy="12" r="7.5" strokeDasharray="2 1.5" />
      <path d="M8 12c1.5-2 2.5-4 4-4s2.5 2 4 4c-1.5 2-2.5 4-4 4s-2.5-2-4-4z" />
    </svg>
  );
}

function Stars({ n = 5, filled = 5, size = 12 }) {
  return (
    <span style={{ display: "inline-flex", gap: 2, color: "var(--bronze)" }}>
      {Array.from({ length: n }).map((_, i) => (
        <svg key={i} width={size} height={size} viewBox="0 0 16 16" fill={i < filled ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1">
          <path d="M8 1l2 4.5 5 .5-3.7 3.4.9 5-4.2-2.4-4.2 2.4.9-5L1 6l5-.5z" />
        </svg>
      ))}
    </span>
  );
}

function Header({ route, setRoute, cartCount, setCartOpen }) {
  const nav = [
    { id: "shop", label: "Shop" },
    { id: "collections", label: "Collections" },
    { id: "custom", label: "Custom Design" },
    { id: "wedding", label: "Weddings" },
    { id: "atelier", label: "Atelier" },
    { id: "journal", label: "Journal" },
  ];
  return (
    <header className="site-header">
      <div className="container">
        <div className="header-top">
          <span>Free international courier · Est. MMXXIV</span>
          <span>Seal N°. {String(Math.floor(Date.now()/1000)%10000).padStart(4,"0")} · Ship from the Atelier</span>
          <span>Contact · Atelier@everlitart.com</span>
        </div>
        <div className="header-main">
          <nav className="header-nav">
            {nav.slice(0,3).map(n => (
              <button key={n.id} className={route===n.id?"active":""} onClick={() => setRoute(n.id)}>{n.label}</button>
            ))}
          </nav>
          <button onClick={() => setRoute("home")} style={{ cursor: "pointer" }}>
            <WordMark />
          </button>
          <div className="header-tools">
            {nav.slice(3).map(n => (
              <button key={n.id} className={route===n.id?"active":""} onClick={() => setRoute(n.id)}>{n.label}</button>
            ))}
            <button onClick={() => setCartOpen(true)}>
              Bag {cartCount > 0 && <span className="cart-count">{cartCount}</span>}
            </button>
          </div>
        </div>
      </div>
    </header>
  );
}

function Footer({ setRoute }) {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <WordMark size={28} />
            <p>A luxury atelier of three-dimensional wax seals, made by hand at the intersection of modern precision and classical draughtsmanship.</p>
          </div>
          <div className="footer-col">
            <h4>Shop</h4>
            <ul>
              <li><a onClick={() => setRoute("shop")}>All Seals</a></li>
              <li><a onClick={() => setRoute("collections")}>Collections</a></li>
              <li><a onClick={() => setRoute("wedding")}>Wedding Atelier</a></li>
              <li><a onClick={() => setRoute("custom")}>Bespoke Commissions</a></li>
              <li><a>Wax & Supplies</a></li>
              <li><a>Gift Cards</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Atelier</h4>
            <ul>
              <li><a onClick={() => setRoute("atelier")}>Our Craft</a></li>
              <li><a onClick={() => setRoute("journal")}>The Journal</a></li>
              <li><a onClick={() => setRoute("reviews")}>Letters of Praise</a></li>
              <li><a>Trade Program</a></li>
              <li><a>Press</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Care</h4>
            <ul>
              <li><a>Shipping & Returns</a></li>
              <li><a>Seal Care Guide</a></li>
              <li><a>Wax Temperature Chart</a></li>
              <li><a>FAQ</a></li>
              <li><a>Contact</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Correspond</h4>
            <p style={{ fontFamily: "var(--serif-text)", fontStyle: "italic", fontSize: 14, color: "rgba(255,255,255,0.7)", margin: "0 0 16px" }}>
              A letter from the atelier, occasionally. New seals, press, and sealing rituals.
            </p>
            <div style={{ borderBottom: "1px solid rgba(255,255,255,0.2)", display: "flex", alignItems: "center" }}>
              <input type="email" placeholder="your@correspondence.com" style={{ color: "rgba(255,255,255,0.9)", border: "none", fontSize: 13, padding: "8px 0" }} />
              <button style={{ color: "var(--bronze)", fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", padding: "8px 0" }}>Seal it</button>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© EVERLIT ART™ LLC · 2026 · Wilmington, DE</span>
          <span>Atelier in Hangzhou · Service worldwide</span>
          <span>
            <a style={{ marginRight: 18 }}>Terms</a>
            <a style={{ marginRight: 18 }}>Privacy</a>
            <a>Trademark</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

window.WordMark = WordMark;
window.SealIcon = SealIcon;
window.Stars = Stars;
window.Header = Header;
window.Footer = Footer;