// homepage/chrome.jsx — header + footer + USP, ported from togo/desktop.jsx
// Standalone copies so the homepage can ship without depending on the PDP file.

const { useState: uSC, useEffect: uEC, useRef: uRC } = React;

function HomeHeader({ scrolled, current = 'home' }) {
  const items = [
    { id: 'brands',    label: 'Brands' },
    { id: 'designers', label: 'Designers' },
    { id: 'editorial', label: 'Editorial' },
    { id: 'sell',      label: 'Sell' },
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 40,
      background: scrolled ? 'rgba(241,234,230,0.94)' : 'rgba(241,234,230,0.0)',
      backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
      borderBottom: scrolled ? '1px solid var(--ink-20)' : '1px solid transparent',
      transition: 'all 0.25s',
      color: 'var(--ink)',
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr auto 1fr',
        alignItems: 'center', padding: '14px 32px', gap: 24,
      }}>
        <nav style={{ display: 'flex', gap: 22 }}>
          {items.map(({ id, label }) => (
            <a key={id} className="mono" style={{
              fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
              color: 'var(--ink)', cursor: 'pointer',
              fontWeight: id === current ? 600 : 400,
              borderBottom: id === current ? '1px solid var(--ink)' : 'none',
              paddingBottom: 2,
            }}>{label}</a>
          ))}
        </nav>
        <div style={{ textAlign: 'center' }}>
          <img src="togo/assets/rehaus-dark.png" alt="REHAUS" style={{ height: 20, objectFit: 'contain' }} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 14 }}>
          {['Search', 'Account'].map(t => (
            <button key={t} className="mono" style={{
              background: 'transparent', border: 'none', fontSize: 11, letterSpacing: '0.08em',
              textTransform: 'uppercase', color: 'var(--ink)', cursor: 'pointer',
            }}>{t}</button>
          ))}
          <button className="mono" style={{
            background: 'transparent', border: 'none', fontSize: 11, letterSpacing: '0.08em',
            textTransform: 'uppercase', color: 'var(--ink)', cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 4,
          }}>
            Bag <span style={{ background: 'var(--ink)', color: 'var(--paper)', fontSize: 9, padding: '1px 5px', borderRadius: 8 }}>0</span>
          </button>
          <button className="mono" style={{
            background: 'var(--ink)', color: 'var(--paper)', border: 'none',
            padding: '10px 16px', fontSize: 11, letterSpacing: '0.1em',
            textTransform: 'uppercase', cursor: 'pointer', borderRadius: 0,
          }}>Sell yours →</button>
        </div>
      </div>
    </header>
  );
}

function HomeUSP() {
  const usps = [
    { k: 'Forever Trade-In',     d: 'Trade back at any time for what you paid.', icon: '∞' },
    { k: 'Next-Day Delivery',    d: 'UK — order by 12pm.',                       icon: '→' },
    { k: 'Same-Day Free Return', d: 'Don’t love it? Out the same day.',          icon: '↺' },
    { k: '30-Day Home Trial',    d: 'Live with it before committing.',           icon: '30' },
    { k: 'Expert Authenticated', d: 'Cleaned, restored, photographed.',          icon: '✓' },
  ];
  return (
    <section style={{
      background: 'var(--paper-cool)', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)',
      display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
    }}>
      {usps.map((u, i) => (
        <div key={i} style={{
          padding: '18px 22px',
          borderRight: i < 4 ? '1px solid var(--ink-20)' : 'none',
          display: 'flex', flexDirection: 'column', gap: 6,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontSize: 22, fontWeight: 500, color: 'var(--ink)' }}>{u.icon}</span>
            <span className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{u.k}</span>
          </div>
          <div className="serif" style={{ fontSize: 13, lineHeight: 1.35, color: 'var(--ink-80)' }}>{u.d}</div>
        </div>
      ))}
    </section>
  );
}

function HomeFooter() {
  return (
    <footer style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '60px 32px 36px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 36, marginBottom: 48 }}>
        <div>
          <img src="togo/assets/rehaus-white.png" alt="REHAUS" style={{ height: 22, objectFit: 'contain' }} />
          <div className="serif" style={{ marginTop: 18, fontSize: 14, lineHeight: 1.5, opacity: 0.7, maxWidth: 280 }}>
            A resale house for design objects. Authenticated, restored, photographed, and guaranteed forever.
          </div>
        </div>
        {[
          { h: 'Brands',    l: ['Ligne Roset', 'Cassina', 'B&B Italia', 'Vitra', 'Knoll', 'View all'] },
          { h: 'Designers', l: ['Michel Ducaroy', 'Mario Bellini', 'Charlotte Perriand', 'Pierre Paulin', 'View all'] },
          { h: 'Catalogue', l: ['New arrivals', 'Sofas', 'Chairs', 'Lighting', 'Tables'] },
          { h: 'About',     l: ['How it works', 'Forever Trade-In', 'Sell yours', 'Editorial', 'Contact'] },
        ].map((c, i) => (
          <div key={i}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--amber)', marginBottom: 14 }}>{c.h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {c.l.map(item => <a key={item} className="serif" style={{ fontSize: 14, opacity: 0.85, cursor: 'pointer' }}>{item}</a>)}
            </div>
          </div>
        ))}
      </div>
      <div className="mono" style={{
        display: 'flex', justifyContent: 'space-between', paddingTop: 22,
        borderTop: '1px solid rgba(241,234,230,0.2)', fontSize: 10, letterSpacing: '0.08em', color: 'rgba(241,234,230,0.6)',
        textTransform: 'uppercase',
      }}>
        <span>© 2026 REHAUS Ltd</span>
        <span>London · Paris · Milan</span>
        <span>Privacy · Terms · Cookies</span>
      </div>
    </footer>
  );
}

Object.assign(window, { HomeHeader, HomeUSP, HomeFooter });