// Products (AutoCraft, MarkSmith) — pre-launch teasers, with waitlist row.

function Products({ onWaitlist }) {
  const wrap = { padding: '0 clamp(20px,4vw,48px) 96px', maxWidth: 1280, margin: '0 auto' };

  const row = { display: 'grid', gridTemplateColumns: '120px 1fr 1fr 200px', gap: 32, padding: '40px 0', borderBottom: '1px solid var(--bc-border-subtle)', alignItems: 'start' };
  const num = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-fg-tertiary)', paddingTop: 8, fontWeight: 500 };
  const nameWrap = { display: 'flex', flexDirection: 'column', gap: 8 };
  const name = { fontFamily: 'var(--bc-font-display)', fontSize: 'clamp(32px, 3.5vw, 48px)', fontWeight: 300, letterSpacing: '-0.025em', color: 'var(--bc-fg-primary)', lineHeight: 1.0 };
  const tag = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--bc-fg-secondary)' };
  const desc = { fontFamily: 'var(--bc-font-sans)', fontSize: 15, lineHeight: 1.65, color: 'var(--bc-fg-secondary)', paddingTop: 8 };
  const cta = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, fontWeight: 500, letterSpacing: '0.18em', textTransform: 'uppercase', padding: '12px 18px', background: 'transparent', color: 'var(--bc-fg-primary)', border: '1px solid var(--bc-border-default)', cursor: 'pointer', alignSelf: 'start', whiteSpace: 'nowrap' };
  const dot = { width: 6, height: 6, borderRadius: 9999, background: 'var(--bc-selvedge)', display: 'inline-block', marginRight: 8 };

  const items = [
    { id: 'autocraft', n: '— 01', name: 'AutoCraft', kind: 'Managed n8n services · SaaS', desc: 'Workflow automation operated for you. Hosted n8n, with our team as the operator — handling upgrades, monitoring, and the awkward middle when an integration shifts under your feet.' },
    { id: 'marksmith', n: '— 02', name: 'MarkSmith', kind: 'AI logo generator · SaaS', desc: 'A logo generator that respects craft. Mark + lockup + a small system, generated and refined the way a designer would — not just a single PNG export.' },
    { id: 'next',      n: '— 03', name: <span style={{ color: 'var(--bc-fg-tertiary)' }}>{'Several more · in queue'}</span>, kind: 'Roadmap', desc: 'We build only what should exist. The next few are scoped, prototyped, and waiting their turn.' },
  ];

  return (
    <section style={wrap} data-screen-label="03 Products">
      {items.map(it => (
        <div key={it.id} style={row}>
          <div style={num}>{it.n}</div>
          <div style={nameWrap}>
            <h3 style={name}>{it.name}</h3>
            <span style={tag}><span style={dot}/>Pre-launch · {it.kind}</span>
          </div>
          <p style={desc}>{it.desc}</p>
          <div>
            {it.id !== 'next' ? (
              <button style={cta}
                      onClick={() => onWaitlist(it.id)}
                      onMouseOver={e => { e.currentTarget.style.background = 'var(--bc-ink)'; e.currentTarget.style.color = 'var(--bc-paper)'; e.currentTarget.style.borderColor = 'var(--bc-ink)'; }}
                      onMouseOut={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--bc-fg-primary)'; e.currentTarget.style.borderColor = 'var(--bc-border-default)'; }}>
                Join waitlist →
              </button>
            ) : (
              <span style={{ ...tag, color: 'var(--bc-fg-tertiary)' }}>Quietly in design</span>
            )}
          </div>
        </div>
      ))}
    </section>
  );
}

window.Products = Products;