// "Currently" strip — what's open, shipping, parked. Sits inside the hero.

const CurrentlyStrip = () => {
  const items = window.CWL_DATA.CURRENTLY;
  return (
    <div style={{ marginTop: 40 }}>
      <div className="eyebrow eyebrow--accent" style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
        <span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--accent)' }} />
        Currently
        <span style={{ flex: 1, height: 1, background: 'var(--rule)', marginLeft: 6 }} />
        <span className="meta" style={{ color: 'var(--ink-3)', letterSpacing: '0.04em', textTransform: 'none' }}>updated 2026-05-12</span>
      </div>

      <ul style={{ display: 'grid', gap: 0, gridTemplateColumns: '1fr 1fr', columnGap: 56, rowGap: 0 }}>
        {items.map((it, i) => (
          <li key={it.label} style={{
            display: 'grid',
            gridTemplateColumns: '100px 1fr',
            gap: 16,
            alignItems: 'baseline',
            padding: '14px 0',
            borderTop: i < 2 ? 'none' : '1px solid var(--rule)',
          }}>
            <span className="meta" style={{ textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-3)' }}>
              {it.label}
            </span>
            <span style={{ fontSize: 15, color: 'var(--ink)', lineHeight: 1.5 }}>
              {it.prefix}
              {it.italic && <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic' }}>{it.italic}</em>}
              {it.text}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
};

window.CurrentlyStrip = CurrentlyStrip;