// 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',    href: 'ligne-roset.html' },
    { id: 'designers', label: 'Designers', href: '#' },
    { id: 'editorial', label: 'Editorial', href: '#' },
    { id: 'sell',      label: 'Sell',      href: '#' },
  ];
  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, href }) => (
            <a key={id} href={href} 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,
              textDecoration: 'none',
            }}>{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="cta-font" 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: 'Fast UK Delivery', d: 'Delivered in 1–3 days. Excl. Highlands & Islands.', icon: '→' },
    { k: '30-Day Home Trial', d: 'Live with it before committing.',           icon: '30' },
    { k: 'Forever Trade-In',  d: 'Trade back at any time for what you paid.', icon: '∞' },
  ];
  return (
    <section style={{
      background: 'var(--paper-cool)', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)',
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
    }}>
      {usps.map((u, i) => (
        <div key={i} style={{
          padding: '18px 22px',
          borderRight: i < 2 ? '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 }}>
            Authenticated design objects, restored, photographed, and guaranteed forever.
          </div>
        </div>
        {[
          { h: 'Brands',    l: [['Ligne Roset','ligne-roset.html'], ['Roche Bobois','roche-bobois.html'], ['B&B Italia','bb-italia.html'], ['Cassina','#'], ['Vitra','#'], ['View all','#']] },
          { h: 'Designers', l: [['Michel Ducaroy','#'], ['Hans Hopfer','#'], ['Mario Bellini','#'], ['Antonio Citterio','#'], ['View all','#']] },
          { h: 'Models',    l: [['Togo','togo.html'], ['Mah Jong','mahjong.html'], ['Camaleonda','#'], ['Up Series','#'], ['Charles','#']] },
          { 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(([label, href]) => <a key={label} href={href} className="serif" style={{ fontSize: 14, opacity: 0.85, cursor: 'pointer' }}>{label}</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 · Miami</span>
        <span>Privacy · Terms · Cookies</span>
      </div>
    </footer>
  );
}

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