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

// ---------- Routing ----------
function useHashRoute() {
  const [hash, setHash] = useState(window.location.hash || '#/');
  useEffect(() => {
    const onChange = () => {
      setHash(window.location.hash || '#/');
      window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' });
    };
    window.addEventListener('hashchange', onChange);
    return () => window.removeEventListener('hashchange', onChange);
  }, []);
  const path = hash.replace(/^#/, '') || '/';
  return path;
}

function Link({ to, className, children, ...rest }) {
  return (
    <a href={'#' + to} className={className} {...rest}>{children}</a>
  );
}

// ---------- Logo mark ----------
function LogoSquare({ size = 30 }) {
  return (
    <div
      className="square"
      style={{ width: size, height: size, lineHeight: 1, fontSize: size * 0.3 }}
      aria-hidden="true"
    >
      <svg viewBox="0 0 60 60" width="100%" height="100%" aria-hidden="true">
        <rect width="60" height="60" fill="#F06030" />
        <g fill="#15120F" fontFamily="Archivo, sans-serif" fontWeight="700" fontSize="11" letterSpacing="0.5">
          <text x="6" y="16">THE</text>
          <text x="6" y="28">CAP</text>
          <text x="6" y="40">PROJ</text>
          <text x="6" y="52">ECT</text>
        </g>
      </svg>
    </div>
  );
}

// ---------- Cap state chip ----------
function CapChip({ state }) {
  const label = state === 'capped' ? 'Capped' : state === 'waitlist' ? 'Waitlist' : 'Available';
  return (
    <span className={`cap-chip is-${state}`}>
      <span className="dot" />
      {label}
    </span>
  );
}

// ---------- Nav ----------
function Nav({ path, lang, setLang }) {
  const links = [
    { to: '/concept', label: 'Concept' },
    { to: '/collection', label: 'Collection' },
    { to: '/the-project', label: 'The Project' },
    { to: '/appointments', label: 'Appointments' },
    { to: '/contact', label: 'Contact' },
  ];
  return (
    <header className="nav" data-screen-label="Nav">
      <div className="nav-inner">
        <Link to="/" className="nav-logo" aria-label="The Cap Project — home">
          <LogoSquare size={30} />
          <span className="wordmark">THE CAP PROJECT</span>
        </Link>
        <nav className="nav-links">
          {links.map(l => (
            <Link key={l.to} to={l.to} className={`nav-link${path.startsWith(l.to) ? ' active' : ''}`}>
              {l.label}
            </Link>
          ))}
        </nav>
        <div className="nav-right">
          <div className="lang-switch" role="group" aria-label="Language">
            {['EN', 'AR', 'RU', 'ZH'].map(code => (
              <button
                key={code}
                className={code === lang ? 'on' : ''}
                onClick={() => setLang(code)}
                aria-pressed={code === lang}
              >
                {code}
              </button>
            ))}
          </div>
          <Link to="/appointments" className="cta cta-sm">Request Appointment</Link>
        </div>
      </div>
    </header>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="container">
        <div className="big-mark">CAPPED. RELEASED. NEVER<span className="accent"> REPEATED.</span></div>
      </div>
      <div className="footer-top">
        <div className="container">
          <div className="footer-grid">
            <div className="footer-col">
              <Link to="/" className="nav-logo" style={{ marginBottom: 16 }}>
                <LogoSquare size={28} />
                <span className="wordmark">THE CAP PROJECT</span>
              </Link>
              <p style={{ color: 'var(--muted)', fontSize: 13, lineHeight: 1.6, maxWidth: '34ch', margin: 0 }}>
                The Cap Project Fashion Design L.L.C. Building 4, First Floor, D3 Street, Dubai Design District, Zaabeel, Dubai.
              </p>
              <div style={{ marginTop: 16 }}>
                <span className="flag-note"><span className="icon">●</span> Hours / phone / email confirm with client</span>
              </div>
            </div>
            <div className="footer-col">
              <h4>Explore</h4>
              <ul>
                <li><Link to="/concept">The Capping Concept</Link></li>
                <li><Link to="/collection">Current Collection</Link></li>
                <li><Link to="/the-project">The Project</Link></li>
              </ul>
            </div>
            <div className="footer-col">
              <h4>Visit</h4>
              <ul>
                <li><Link to="/appointments">Private Appointments</Link></li>
                <li><Link to="/contact">d3 Showroom</Link></li>
                <li><a href="#" onClick={e => e.preventDefault()}>Shop on Ounass</a></li>
              </ul>
            </div>
            <div className="footer-col">
              <h4>Channels</h4>
              <ul>
                <li><a href="#" onClick={e => e.preventDefault()}>Instagram</a> <span style={{ color: 'var(--muted-2)', fontSize: 11 }}>(pending)</span></li>
                <li><a href="#" onClick={e => e.preventDefault()}>WhatsApp</a> <span style={{ color: 'var(--muted-2)', fontSize: 11 }}>(pending)</span></li>
                <li><a href="#" onClick={e => e.preventDefault()}>Press</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div className="container">
        <div className="footer-bottom">
          <div>© 2026 The Cap Project Fashion Design L.L.C — Dubai, UAE</div>
          <div>Designed in Dubai Design District · Capped in the atelier</div>
        </div>
      </div>
    </footer>
  );
}

// ---------- Product Card ----------
function ProductCard({ p }) {
  return (
    <Link to={`/product/${p.handle}`} className="product-card" data-comment-anchor={`product-${p.handle}`}>
      <div className="frame">
        <img src={p.hero} alt={p.name + ', ' + p.colour} loading="lazy" />
        <CapChip state={p.state} />
        <span className="run-tag">{p.runSize}</span>
      </div>
      <div className="meta">
        <div>
          <div className="name">{p.name}</div>
          <div className="sub">{p.colour} · {p.fabric}</div>
        </div>
        <div className="price mono">AED {p.price.toLocaleString()}</div>
      </div>
    </Link>
  );
}

Object.assign(window, { useHashRoute, Link, LogoSquare, CapChip, Nav, Footer, ProductCard });