/* Rocket Closet — Shared components (JSX)
   Brand Book 2026. Orange is punctuation. */
const { useState, useEffect, useMemo, useRef, useCallback } = React;

// ------- constants -------
const RC = {
  phone: '19703767556',          // WhatsApp (970) 376-7556
  phoneDisplay: '(970) 376-7556', // WhatsApp display
  tel: '19707439996',             // Text / call (970) 743-9996
  telDisplay: '(970) 743-9996',   // Text / call display
  email: 'concierge@rocketcloset.com',
  navy: '#0A1930',
  orange: '#E0672E',
};

const fmt = (n) => '$' + Number(n).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

const texIdx = (id) => {
  let h = 0; for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) >>> 0;
  return ['tex-a','tex-b','tex-c','tex-d','tex-e'][h % 5];
};

// ------- Real Rocket Closet logo PNG — full-bleed asset ------
// The horizontal file IS the full lockup (mark + ROCKET CLOSET). Use it directly.
// `stacked` prop uses the vertical lockup for hero placements.

const RcMark = ({ size = 32, onDark = false }) => (
  <img
    src="assets/logo-icon.jpg"
    alt="Rocket Closet"
    width={size}
    height={size}
    style={{ display:'block', objectFit:'cover', borderRadius: 2 }}
  />
);

const Wordmark = ({ size = 14, onDark = false, className = '', stacked = false }) => (
  <img
    src={stacked ? 'assets/logo-stacked.png' : 'assets/logo-horizontal.png'}
    alt="Rocket Closet"
    className={`wm-img ${className}`}
    style={{
      display:'block',
      height: stacked ? size * 4 : size * 1.9,
      width:'auto',
      filter: onDark ? 'brightness(0) invert(1)' : 'none',
    }}
  />
);

// ------- Icons (transportation-inspired, navy, 24-grid) -------
const Icon = {
  cart: () => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square"><path d="M4 6h2l2 11h11l2-9H7"/><circle cx="9" cy="20" r="1.4"/><circle cx="17" cy="20" r="1.4"/></svg>,
  menu: () => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="square"><path d="M4 7h16M4 12h16M4 17h16"/></svg>,
  heart: (f) => <svg width="15" height="15" viewBox="0 0 24 24" fill={f?'currentColor':'none'} stroke="currentColor" strokeWidth="1.8"><path d="M12 20s-7-4.5-9.5-9A5 5 0 0 1 12 6a5 5 0 0 1 9.5 5C19 15.5 12 20 12 20z"/></svg>,
  arrow: () => <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="square"><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  wa: () => <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 3.5A10.7 10.7 0 0 0 3.4 16.2L2 22l5.9-1.4a10.7 10.7 0 0 0 15.7-9A10.6 10.6 0 0 0 20.5 3.5zM12 20.1a8.3 8.3 0 0 1-4.2-1.2l-.3-.2-3.5.8.8-3.4-.2-.3A8.4 8.4 0 1 1 12 20.1zm4.7-6c-.3-.1-1.5-.8-1.8-.8-.2-.1-.4-.1-.6.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6 0-.3-.1-1.2-.4-2.3-1.4-.8-.8-1.4-1.7-1.5-2-.2-.3 0-.4.1-.5l.4-.4.2-.4c.1-.2 0-.3 0-.5s-.6-1.4-.8-1.9c-.2-.5-.4-.4-.5-.4h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.4s1 2.8 1.2 3c.2.2 2 3 4.7 4.2 1.7.7 2.3.7 3.1.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2-.1-.1-.3-.2-.6-.3z"/></svg>,
  mail: () => <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="square"><rect x="3" y="5" width="18" height="14"/><path d="M3 6l9 7 9-7"/></svg>,
  close: () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="square"><path d="M5 5l14 14M19 5L5 19"/></svg>,
  phone: () => <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="square"><path d="M5 4h4l2 5-3 2a12 12 0 006 6l2-3 5 2v4a2 2 0 01-2 2A17 17 0 013 6a2 2 0 012-2z"/></svg>,
  share: () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square"><path d="M4 12v7a1 1 0 001 1h14a1 1 0 001-1v-7M16 6l-4-4-4 4M12 2v14"/></svg>,
  pin: () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 21s7-6.5 7-12a7 7 0 10-14 0c0 5.5 7 12 7 12z"/><circle cx="12" cy="9" r="2.4"/></svg>,
};

// ------- Mountain silhouette for cover (quiet, navy tonal) -------
const CoverMountains = () => (
  <svg viewBox="0 0 440 520" preserveAspectRatio="xMidYMax slice">
    <defs>
      <linearGradient id="sky" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#0A1930"/>
        <stop offset=".6" stopColor="#13264D"/>
        <stop offset="1" stopColor="#1F3464"/>
      </linearGradient>
      <linearGradient id="m1" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#243658"/>
        <stop offset="1" stopColor="#0F1F3D"/>
      </linearGradient>
      <linearGradient id="m2" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#2E4370"/>
        <stop offset="1" stopColor="#162949"/>
      </linearGradient>
      <linearGradient id="m3" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#3A517E"/>
        <stop offset="1" stopColor="#1F3464"/>
      </linearGradient>
    </defs>
    <rect width="440" height="520" fill="url(#sky)"/>
    {/* stars */}
    {Array.from({length: 24}).map((_,i)=>{
      const x = (i*47+13)%440, y = (i*73+11)%200;
      return <circle key={i} cx={x} cy={y} r={i%4===0?1.2:.8} fill="#fff" opacity={.45 + (i%3)*.15}/>;
    })}
    {/* far ridge */}
    <path d="M0 300 L60 250 L120 280 L180 230 L230 270 L290 220 L340 260 L400 230 L440 260 L440 520 L0 520 Z" fill="url(#m3)" opacity=".9"/>
    {/* mid ridge */}
    <path d="M-20 360 L40 290 L90 330 L150 270 L210 330 L270 260 L330 320 L380 280 L440 310 L440 520 L-20 520 Z" fill="url(#m2)"/>
    {/* near ridge with snow highlights */}
    <path d="M-20 440 L40 380 L80 420 L150 340 L210 420 L260 360 L330 410 L390 370 L460 420 L460 520 L-20 520 Z" fill="url(#m1)"/>
    {/* snow gullies (white, restrained) */}
    <path d="M150 340 L162 420 L172 360 Z M260 360 L276 440 L286 380 Z M390 370 L402 440 L412 385 Z" fill="#F5F8FA" opacity=".5"/>
  </svg>
);

// ------- TopBar -------
const TopBar = ({ onMenu, onCart, cartCount, section }) => (
  <div className="rc-topbar">
    <button className="logo" onClick={onMenu} aria-label="Menu">
      <Wordmark size={14}/>
    </button>
    <div className="actions">
      {section && <span className="section-tag">{section}</span>}
      <button onClick={onCart} aria-label="Order list">
        <Icon.cart/>
        {cartCount > 0 && <span className="badge">{cartCount}</span>}
      </button>
    </div>
  </div>
);

// ------- Footer -------
const RcFooter = () => (
  <div className="rc-footer">
    <span className="tag">MY GEAR MEETS ME THERE.</span>
    rocketcloset.com <span className="dot">·</span> Spring Clearance 2026
  </div>
);

// ------- Cover -------
const Cover = ({ onEnter }) => (
  <div className="view cover hide-on-cover">
    <div className="cover-hero">
      <div className="cover-mountains"><CoverMountains/></div>
      <div className="cover-topnav">
        <div className="menu">
          <span>THE CATALOGUE</span>
          <div className="resorts">
            <span>VAIL</span>
            <span>BEAVER CREEK</span>
            <span>ASPEN</span>
            <span>SNOWMASS</span>
            <span>PARK CITY</span>
            <span>DEER VALLEY</span>
          </div>
        </div>
        <div className="rcmark">
          <img src="assets/logo-light.png" alt="Rocket Closet" style={{display:'block', height:44, width:'auto'}}/>
        </div>
      </div>

      <div className="cover-title">
        <div className="season">Spring Clearance · 2026</div>
        <div className="brand">ROCKET<br/><span className="c">CLOSET</span></div>
        <div className="hairline"/>
        <div className="sub">Member-exclusive concierge buying service. 150+ curated pieces from the finest ski boutiques in the Rockies, 40–70% off.</div>
      </div>
    </div>

    <div className="cover-intro">
      <div className="kicker">Member Exclusive · Concierge Buying</div>
      <h2>The gear you already wear, at the prices you don't usually see.</h2>
      <p>Note the RC serials, send your list to the concierge — we confirm availability in under 24 hours and ship directly to your Rocket Closet locker.</p>
      <div className="rule"/>
      <div className="slogan-sm">MY GEAR MEETS ME THERE.</div>
      <button className="enter-btn" onClick={onEnter}>
        Enter the catalogue <span className="arr">→</span>
      </button>
    </div>
  </div>
);

window.RcShared = { RC, fmt, texIdx, RcMark, Wordmark, Icon, TopBar, RcFooter, Cover };