// ui.jsx — shared chrome: wordmark, header, footer, marquee, flash toast

function Wordmark({ size = 'md' }) {
  const dim = size === 'lg' ? 56 : 40;
  return (
    <div className="wm">
      <span className="wm-logo" style={{ width:dim, height:dim }}>
        <video
          src="https://aqua-crocodile-403639.hostingersite.com/wp-content/uploads/2026/05/Plush-LOGo-animated.mp4"
          autoPlay muted loop playsInline preload="auto"
          aria-hidden="true"
        />
      </span>
      <div className="wm-name" style={size === 'lg' ? { fontSize:28 } : {}}>
        <span>My Plush Palace</span>
        <small>est. mmxxiv · made-to-order</small>
      </div>
    </div>
  );
}

function Nav({ route, go, cartCount }) {
  const links = [
    { id:'home',     label:'Atelier' },
    { id:'browse',   label:'Collection' },
    { id:'shop',     label:'Shop' },
    { id:'home',     label:'Journal' },
  ];
  return (
    <header className="nav">
      <div className="container nav-inner">
        <div style={{ display:'flex' }}>
          <a onClick={() => go('home')} style={{ cursor:'pointer' }}>
            <Wordmark />
          </a>
        </div>
        <nav className="nav-links">
          {links.map((l, i) => (
            <a key={i}
               onClick={() => go(l.id)}
               className={'nav-link ' + ((route === l.id && i < 3) || (route === 'shop' && l.id === 'shop') ? 'active' : '')}
               style={{ cursor:'pointer' }}>
              {l.label}
            </a>
          ))}
        </nav>
        <div className="nav-actions">
          <button className="icon-btn" title="Search">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>
            </svg>
          </button>
          <button className="icon-btn" title="Account">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/>
            </svg>
          </button>
          <button className="icon-btn" title="Cart" onClick={() => go('cart')}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <path d="M3 6h18l-2 12H5L3 6z"/><path d="M8 6V4a4 4 0 1 1 8 0v2"/>
            </svg>
            {cartCount > 0 && <span className="cart-dot">{cartCount}</span>}
          </button>
        </div>
      </div>
    </header>
  );
}

function Marquee() {
  const words = ['Hand-knotted in Jaipur', 'NZ wool & bamboo silk', 'Made-to-order in 10 weeks',
                 'Lifetime re-pile guarantee', 'Carbon-neutral freight'];
  const line = [...words, ...words];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {line.map((w, i) => <span key={i}>{w}</span>)}
      </div>
    </div>
  );
}

function Footer({ go }) {
  return (
    <footer>
      <div className="container">
        <div className="ft-grid">
          <div>
            <Wordmark size="lg" />
            <p style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:22,
                        opacity:.7, marginTop:24, maxWidth:'34ch', lineHeight:1.4 }}>
              Made-to-order rugs from a quiet roster of master weavers.
              One room, one rug, one decade of living.
            </p>
          </div>
          <div>
            <h4>Shop</h4>
            <a onClick={() => go('browse')} style={{ cursor:'pointer' }}>Collection</a>
            <a onClick={() => go('browse')} style={{ cursor:'pointer' }}>Made-to-order</a>
            <a>Custom design</a>
            <a>Trade program</a>
          </div>
          <div>
            <h4>Atelier</h4>
            <a>Our weavers</a>
            <a>Materials</a>
            <a>Care guide</a>
            <a>Journal</a>
          </div>
          <div>
            <h4>Service</h4>
            <a>Lead times</a>
            <a>Freight & returns</a>
            <a>Concierge</a>
            <a>Contact</a>
          </div>
        </div>
        <div className="ft-bigword italic">my plush palace.</div>
        <div className="ft-bottom">
          <span>© MMXXVI · MY PLUSH PALACE</span>
          <span>made with care · london · jaipur · kashan</span>
        </div>
      </div>
    </footer>
  );
}

function FlashToast({ children, onDone }) {
  React.useEffect(() => {
    const t = setTimeout(onDone, 2200);
    return () => clearTimeout(t);
  }, []);
  return (
    <div className="flash">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M5 12l5 5L20 7"/>
      </svg>
      {children}
    </div>
  );
}

Object.assign(window, { Wordmark, Nav, Marquee, Footer, FlashToast });