// Team — currently a single founder card. Will grow as the company hires.

function Team() {
  const wrap = { padding: '96px clamp(20px,4vw,48px)', maxWidth: 1280, margin: '0 auto' };
  const eb = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-fg-secondary)', fontWeight: 500, marginBottom: 32 };
  const h = { fontFamily: 'var(--bc-font-display)', fontWeight: 300, fontSize: 'clamp(40px,5.5vw,80px)', lineHeight: 1.0, letterSpacing: '-0.03em', color: 'var(--bc-fg-primary)', textWrap: 'balance', marginBottom: 24 };
  const sub = { fontFamily: 'var(--bc-font-display)', fontStyle: 'italic', fontWeight: 300, fontSize: 22, lineHeight: 1.4, color: 'var(--bc-fg-secondary)', maxWidth: 720, marginBottom: 56 };

  const founderRow = { display: 'grid', gridTemplateColumns: '320px 1fr', gap: 64, paddingTop: 56, paddingBottom: 80, borderTop: '1px solid var(--bc-border-subtle)', borderBottom: '1px solid var(--bc-border-subtle)' };
  const photoCard = { aspectRatio: '4/5', background: 'var(--bc-bg-surface)', border: '1px solid var(--bc-border-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' };
  const photoCap = { position: 'absolute', bottom: 12, left: 12, fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--bc-paper)', background: 'rgba(20,20,22,0.55)', padding: '4px 8px', backdropFilter: 'blur(2px)' };
  const role = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-selvedge)', fontWeight: 500, marginBottom: 14 };
  const name = { fontFamily: 'var(--bc-font-display)', fontSize: 'clamp(36px,4.5vw,60px)', fontWeight: 300, letterSpacing: '-0.03em', lineHeight: 1.0, marginBottom: 24 };
  const lede = { fontFamily: 'var(--bc-font-display)', fontStyle: 'italic', fontWeight: 300, fontSize: 22, lineHeight: 1.4, color: 'var(--bc-fg-secondary)', maxWidth: 620, marginBottom: 24 };
  const body = { fontFamily: 'var(--bc-font-sans)', fontSize: 16, lineHeight: 1.65, color: 'var(--bc-fg-primary)', maxWidth: 620, marginBottom: 16 };
  const linkRow = { display: 'flex', gap: 24, marginTop: 24, flexWrap: 'wrap' };
  const linkItem = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--bc-fg-primary)', borderBottom: '1px solid var(--bc-fg-primary)', paddingBottom: 4, textDecoration: 'none', cursor: 'pointer', fontWeight: 500 };

  // Empty seats — visual placeholders for upcoming hires
  const seatsWrap = { paddingTop: 80 };
  const seatsHead = { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24, flexWrap: 'wrap', gap: 16 };
  const seatGrid = { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 };
  const seat = { padding: '28px 24px', border: '1px dashed var(--bc-border-default)', background: 'transparent', minHeight: 200, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' };
  const seatRole = { fontFamily: 'var(--bc-font-display)', fontSize: 22, fontWeight: 400, letterSpacing: '-0.015em', color: 'var(--bc-fg-primary)', marginBottom: 8 };
  const seatTag = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-selvedge)', marginBottom: 12, fontWeight: 500 };
  const seatDesc = { fontFamily: 'var(--bc-font-sans)', fontSize: 14, lineHeight: 1.55, color: 'var(--bc-fg-secondary)' };

  const initials = (
    <img
      src="assets/atharva.jpg"
      alt="Atharva Kulkarni"
      style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 25%', display: 'block', filter: 'saturate(0.85) contrast(1.02)' }}
    />
  );

  return (
    <section style={wrap} data-screen-label="04 Team">
      <div style={eb}>§ 04 — The team</div>
      <h2 style={h}>Small on purpose.</h2>
      <p style={sub}>
        BuildCraft Labs is one founder, today — and a small bench of collaborators. We're hiring.
      </p>

      <div style={founderRow}>
        <div style={photoCard}>
          {initials}
          <div style={photoCap}>Bhopal · IN</div>
        </div>
        <div>
          <div style={role}>Founder · Product Manager</div>
          <h3 style={name}>Atharva Kulkarni</h3>
          <p style={lede}>
            "I don't want to build for the sake of building. I want to build the things that should exist —
            and ship them well enough that nobody has to fix them later."
          </p>
          <p style={body}>
            Atharva founded BuildCraft Labs in 2026. He runs the company and acts as Product Manager
            for every SaaS we ship — currently AutoCraft and MarkSmith. His background spans
            infrastructure, product, and design; he writes about all three.
          </p>
          <p style={body}>
            He's based in India and works across timezones with the small bench of collaborators
            who help build, ship, and operate what BuildCraft puts into the world.
          </p>
          <div style={linkRow}>
            <a style={linkItem} href="https://atharvakulkarni.link" target="_blank" rel="noreferrer">atharvakulkarni.link →</a>
            <a style={linkItem} href="https://linkedin.com/in/atharvakulkarni" target="_blank" rel="noreferrer">LinkedIn →</a>
          </div>
        </div>
      </div>

      <div style={seatsWrap}>
        <div style={seatsHead}>
          <div style={eb}>§ 04.1 — Open seats</div>
          <span style={{ fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--bc-fg-tertiary)' }}>3 roles · see careers</span>
        </div>
        <div style={seatGrid}>
          <div style={seat}>
            <div>
              <div style={seatTag}>— hiring</div>
              <h4 style={seatRole}>Software Development Engineer</h4>
              <p style={seatDesc}>Ships across stack. Has seen production. Writes before they build.</p>
            </div>
          </div>
          <div style={seat}>
            <div>
              <div style={seatTag}>— hiring</div>
              <h4 style={seatRole}>Quality Assurance Engineer</h4>
              <p style={seatDesc}>Breaks things on purpose, and writes down what broke. Manual rigor first; automation where it earns its keep.</p>
            </div>
          </div>
          <div style={seat}>
            <div>
              <div style={seatTag}>— hiring</div>
              <h4 style={seatRole}>Product Manager</h4>
              <p style={seatDesc}>Partners with the founder on AutoCraft, MarkSmith, and what's next. Holds the brief, the spec, and the why.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Team = Team;