// homepage/explore.jsx — tabbed mosaic explore module
const { useState: uSE2 } = React;

function HomeExplore() {
  const axes = window.HOME_DATA.exploreAxes;
  const [active, setActive] = uSE2(axes[0].id);
  const axis = axes.find(a => a.id === active);

  return (
    <section id="explore" style={{ background: 'var(--paper)', padding: '96px 32px 96px' }}>
      {/* masthead */}
      <header style={{
        display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 56, alignItems: 'baseline',
        paddingBottom: 36, borderBottom: '1px solid var(--ink)',
      }}>
        <div>
          <div className="kicker" style={{ marginBottom: 14 }}>§02 — Explore</div>
          <h2 className="serif-display" style={{
            margin: 0, fontSize: 72, lineHeight: 0.94,
            letterSpacing: '-0.03em', fontWeight: 500,
          }}>Pick a thread.<br/>Pull on it.</h2>
        </div>
        <div className="serif" style={{
          fontSize: 18, lineHeight: 1.5, color: 'var(--ink-80)',
          maxWidth: 560, paddingTop: 14,
        }}>
          The archive holds 412 pieces. There are four useful ways to enter it — by the person who designed the object,
          the decade that produced it, the material it\'s made of, or the room it would belong to. Choose one. We\'ll
          rebuild the view around your thread.
        </div>
      </header>

      {/* tab bar */}
      <div style={{
        display: 'flex', gap: 0, marginTop: 4,
        borderBottom: '1px solid var(--ink-20)',
      }}>
        {axes.map(a => {
          const isActive = a.id === active;
          return (
            <button key={a.id} onClick={() => setActive(a.id)} style={{
              background: 'transparent', border: 'none', cursor: 'pointer',
              padding: '22px 28px',
              borderBottom: isActive ? '2px solid var(--ink)' : '2px solid transparent',
              marginBottom: -1,
            }}>
              <div className="mono" style={{
                fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
                color: isActive ? 'var(--ink)' : 'var(--ink-60)',
              }}>{a.label}</div>
              <div className="serif-display" style={{
                fontSize: 26, marginTop: 6, fontWeight: 500,
                color: isActive ? 'var(--ink)' : 'var(--ink-60)',
                letterSpacing: '-0.02em',
              }}>{a.label.replace('By ', '')}</div>
            </button>
          );
        })}
        <div style={{ flex: 1 }} />
        <a href="#" className="mono" style={{
          alignSelf: 'center', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
          color: 'var(--ink)', borderBottom: '1px solid var(--ink)', paddingBottom: 4,
        }}>The full archive · 412 pieces →</a>
      </div>

      {/* hint */}
      <div className="serif" style={{
        marginTop: 28, fontSize: 16, lineHeight: 1.5, color: 'var(--ink-80)',
        maxWidth: 720,
      }}>{axis.hint}</div>

      {/* mosaic — lead card + 4 small cards */}
      <ExploreMosaic axis={axis} />
    </section>
  );
}

function ExploreMosaic({ axis }) {
  const [lead, ...rest] = axis.cells;
  return (
    <div style={{
      marginTop: 28, display: 'grid', gridTemplateColumns: '7fr 5fr', gap: 20,
    }}>
      {/* LEAD */}
      <a href="#" style={{
        position: 'relative', aspectRatio: '5 / 4', overflow: 'hidden',
        background: 'var(--paper-deep)', textDecoration: 'none', color: 'var(--paper)',
        display: 'block',
      }}>
        <img src={lead.img} alt=""
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 55%' }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.7) 100%)',
        }} />
        <div className="mono" style={{
          position: 'absolute', left: 22, top: 22, padding: '6px 10px',
          background: 'rgba(241,234,230,0.94)', color: 'var(--ink)',
          fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
        }}>{axis.label} · Lead</div>
        <div style={{
          position: 'absolute', left: 28, right: 28, bottom: 24,
          display: 'flex', flexDirection: 'column', gap: 8,
        }}>
          <div className="mono" style={{
            fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'var(--amber)',
          }}>{lead.years || lead.range} · {lead.count} pieces</div>
          <h3 className="serif-display" style={{
            margin: 0, fontSize: 64, lineHeight: 0.95,
            letterSpacing: '-0.03em', fontWeight: 600,
          }}>{lead.name}</h3>
          <div className="serif" style={{
            fontSize: 16, lineHeight: 1.4, opacity: 0.9, maxWidth: 480, marginTop: 4,
          }}>{lead.blurb}</div>
          <div className="mono" style={{
            marginTop: 10, fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
            display: 'inline-flex', alignItems: 'center', gap: 8,
            paddingBottom: 4, borderBottom: '1px solid currentColor', alignSelf: 'flex-start',
          }}>Open this thread →</div>
        </div>
      </a>

      {/* 2x2 grid of remaining cells */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        {rest.map((c, idx) => (
          <a key={idx} href="#" style={{
            position: 'relative', overflow: 'hidden', textDecoration: 'none',
            color: 'var(--ink)', background: 'var(--paper-cool)',
            border: '1px solid var(--ink-20)',
            display: 'flex', flexDirection: 'column',
          }}>
            <div style={{
              position: 'relative', aspectRatio: '4 / 3',
              background: 'var(--paper-deep)', overflow: 'hidden',
            }}>
              <img src={c.img} alt=""
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
              <div className="mono" style={{
                position: 'absolute', right: 10, top: 10, padding: '3px 7px',
                background: 'rgba(241,234,230,0.92)', fontSize: 9, letterSpacing: '0.1em',
                textTransform: 'uppercase',
              }}>{c.count} pcs</div>
            </div>
            <div style={{ padding: '14px 16px 16px', display: 'flex', flexDirection: 'column', gap: 6 }}>
              <div className="serif-display" style={{
                fontSize: 24, letterSpacing: '-0.02em', fontWeight: 500, lineHeight: 1,
              }}>{c.name}</div>
              <div className="mono" style={{
                fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-60)',
              }}>{c.years || c.range}</div>
              <div className="serif" style={{
                fontSize: 13, lineHeight: 1.4, color: 'var(--ink-80)', marginTop: 4,
              }}>{c.blurb}</div>
            </div>
          </a>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { HomeExplore });