// homepage/sections.jsx — recently authenticated rail, editorial rail, email capture
const { useState: uSS } = React;

function HomeRecent() {
  const items = window.HOME_DATA.recent;
  return (
    <section style={{ background: 'var(--paper-cool)', padding: '88px 32px 96px', borderTop: '1px solid var(--ink)' }}>
      <header style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 28,
      }}>
        <div>
          <div className="kicker" style={{ marginBottom: 10 }}>§03 — Inventory</div>
          <h2 className="serif-display" style={{
            margin: 0, fontSize: 56, lineHeight: 0.95, letterSpacing: '-0.03em', fontWeight: 500,
          }}>Recently authenticated.</h2>
        </div>
        <a href="#" className="mono" style={{
          fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
          color: 'var(--ink)', borderBottom: '1px solid var(--ink)', paddingBottom: 4,
        }}>All 412 pieces →</a>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16 }}>
        {items.map(p => (
          <a key={p.id} href="#" style={{ textDecoration: 'none', color: 'var(--ink)' }}>
            <div style={{
              position: 'relative', aspectRatio: '4 / 5', overflow: 'hidden',
              background: 'var(--paper-deep)',
            }}>
              <img src={p.img} alt={p.model}
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 55%' }} />
              <div className="mono" style={{
                position: 'absolute', left: 8, top: 8, padding: '3px 6px',
                background: 'rgba(241,234,230,0.94)', fontSize: 9, letterSpacing: '0.1em',
                textTransform: 'uppercase',
              }}>{p.year}</div>
            </div>
            <div className="serif" style={{
              marginTop: 12, fontSize: 16, lineHeight: 1.2, letterSpacing: '-0.005em',
            }}>{p.model}</div>
            <div className="mono" style={{
              marginTop: 4, fontSize: 9, letterSpacing: '0.1em', color: 'var(--ink-60)',
              textTransform: 'uppercase',
            }}>{p.designer} · {p.fabric}</div>
            <div className="serif" style={{
              marginTop: 6, fontSize: 14, fontWeight: 500,
            }}>£{p.price.toLocaleString()}</div>
          </a>
        ))}
      </div>
    </section>
  );
}

function HomeEditorialRail() {
  const items = window.HOME_DATA.editorial;
  return (
    <section style={{ background: 'var(--paper)', padding: '88px 32px 96px', borderTop: '1px solid var(--ink-20)' }}>
      <header style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 28,
      }}>
        <div>
          <div className="kicker" style={{ marginBottom: 10 }}>§04 — Journal</div>
          <h2 className="serif-display" style={{
            margin: 0, fontSize: 56, lineHeight: 0.95, letterSpacing: '-0.03em', fontWeight: 500,
          }}>From the journal.</h2>
        </div>
        <a href="#" className="mono" style={{
          fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
          color: 'var(--ink)', borderBottom: '1px solid var(--ink)', paddingBottom: 4,
        }}>All 168 pieces →</a>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
        {items.map((a, i) => (
          <a key={i} href="#" style={{ textDecoration: 'none', color: 'var(--ink)' }}>
            <div style={{
              position: 'relative', aspectRatio: '4 / 5', overflow: 'hidden',
              background: 'var(--paper-deep)',
            }}>
              <img src={a.cover} alt=""
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
              <div style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.5) 100%)',
              }} />
              <div className="mono" style={{
                position: 'absolute', left: 12, top: 12, padding: '4px 8px',
                background: 'rgba(241,234,230,0.94)', fontSize: 9, letterSpacing: '0.12em',
                color: 'var(--ink)', textTransform: 'uppercase',
              }}>{a.kicker}</div>
            </div>
            <div className="serif" style={{
              marginTop: 14, fontSize: 19, lineHeight: 1.2, letterSpacing: '-0.01em',
            }}>{a.title}</div>
            <div className="mono" style={{
              marginTop: 8, fontSize: 10, letterSpacing: '0.08em',
              color: 'var(--ink-60)', textTransform: 'uppercase',
            }}>{a.meta} →</div>
          </a>
        ))}
      </div>
    </section>
  );
}

function HomeEmail() {
  return (
    <section style={{ background: 'var(--paper-cool)', borderTop: '1px solid var(--ink-20)', padding: '64px 32px' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 56, alignItems: 'center',
      }}>
        <div>
          <div className="kicker" style={{ marginBottom: 10 }}>§05 — Newsletter</div>
          <h3 className="serif-display" style={{
            margin: 0, fontSize: 36, lineHeight: 1, letterSpacing: '-0.025em', fontWeight: 500,
          }}>The list.</h3>
        </div>
        <div>
          <div className="serif" style={{
            fontSize: 16, lineHeight: 1.5, color: 'var(--ink-80)', maxWidth: 540, marginBottom: 20,
          }}>
            One email a week. New arrivals before they're listed, journal pieces, the occasional invitation.
            No marketing. Unsubscribe in one click.
          </div>
          <form onSubmit={e => e.preventDefault()} style={{ display: 'flex', gap: 8, maxWidth: 540 }}>
            <input type="email" placeholder="email@domain.com"
              style={{
                flex: 1, padding: '14px 16px', border: '1px solid var(--ink)',
                background: 'var(--paper)', color: 'var(--ink)',
                fontSize: 14, fontFamily: 'inherit',
              }} />
            <button type="submit" className="mono" style={{
              background: 'var(--ink)', color: 'var(--paper)', border: 'none',
              padding: '14px 20px', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
              cursor: 'pointer',
            }}>Subscribe →</button>
          </form>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomeRecent, HomeEditorialRail, HomeEmail });