/* About — team intro, editorial */

const TEAM = [
{ name: 'Christopher Welz', role: 'Co-Founder · Strategy\nB.Sc. Betriebswirtschaftslehre', img: 'assets/Christopher_Welz.jpg',
  bio: '10 Jahre Startup und Software. Builder-DNA.',
  cropY: 40, zoom: 1 },
{ name: 'Daniel Felser', role: 'Co-Founder · Technology\nM.Sc. Wirtschaftsinformatik', img: 'assets/Daniel_Felser.png',
  bio: 'Creative Technologist. Experte für generative KI-Systeme.',
  cropY: 0, zoom: 1.2 }];


function About() {
  return (
    <section id="about" className="section" data-screen-label="About" style={{ padding: "60px 0px" }}>
      <div className="container">
        <div style={{ maxWidth: 960, marginBottom: 80 }}>
          <div className="reveal" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 28, padding: '6px 14px 6px 6px', borderRadius: 999, border: '1px solid var(--border)', background: 'rgba(255,255,255,0.02)' }}>
            <BrandMark size={22} />
            <span className="mono" style={{ fontSize: 10, color: 'var(--text-3)', letterSpacing: '0.22em' }}>DAS STUDIO</span>
          </div>
          <h2 className="display display-xl reveal" style={{ marginBottom: 32 }}>
            Unser <span className="sheen">AI-Lab</span>.<br />
            <span style={{ color: 'var(--text-3)' }}>Inhouse statt Outsourcing.</span>
          </h2>
          <p className="body-lg reveal" style={{ maxWidth: 560, width: "650px" }}>Archaitechs ist ein KI-Studio für die Immobilienbranche — Beratung und Agentur in einem. Wir bauen die Systeme, die Ihre Wettbewerber erst in zwei Jahren verstehen, und liefern parallel die Outputs, mit denen Sie heute arbeiten.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }} id="team-grid">
          {TEAM.map((m) =>
          <div key={m.name} className="card edge-gradient reveal" style={{ padding: 32, display: 'grid', gridTemplateColumns: '140px 1fr', gap: 28, alignItems: 'center' }}>
              <div style={{
              width: 140, height: 140, borderRadius: '50%', overflow: 'hidden',
              border: '1px solid var(--border-strong)', background: '#0e0e10'
            }}>
                <img src={m.img} alt={m.name} style={{
                width: '100%', height: '100%', objectFit: 'cover',
                objectPosition: `center calc(50% + ${m.cropY}px)`,
                transform: `scale(${m.zoom})`
              }} />
              
              </div>
              <div>
                <div className="display display-md" style={{ fontWeight: 500, marginBottom: 6 }}>{m.name}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.15em', marginBottom: 14, whiteSpace: 'pre-line', lineHeight: 1.5 }}>{m.role.toUpperCase()}</div>
                <div className="body" style={{ fontSize: 14 }}>{m.bio}</div>
              </div>
            </div>
          )}
        </div>
      </div>
      <style>{`@media(max-width:860px){#team-grid{grid-template-columns:1fr!important;}}`}</style>
    </section>);

}

Object.assign(window, { About });