// team.jsx - "The Founders". Founder-led trust + authority.

const MEMBERS = [
  {
    name: 'Sebastian G.', photo: 'assets/team-sebastian.png', title: 'Co-Founder & Automation Architect',
    bio: 'Builds end-to-end automation for logistics and fintech, from API integrations to internal tooling. Scopes every engagement and owns it through go-live.',
    linkedin: 'https://www.linkedin.com/in/aiautomationsoftwaredevelopmentforbusiness',
  },
  {
    name: 'Kimberley D.', photo: 'assets/team-kimberley.png', title: 'Co-Founder & Operations Lead',
    bio: 'Lean Six Sigma certified. Turns operational chaos into measurable, repeatable systems held to audit-grade standards from day one.',
    linkedin: 'https://www.linkedin.com/in/kimberley-duran-ai-for-business-process-workflow-automation/',
  },
];

const TEAM_STATS = [['94%', 'Client Retention'], ['0', 'Missed Deadlines'], ['Direct', 'Founder on Every Call']];

function LinkedIn() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
    </svg>
  );
}

function Team() {
  return (
    <section id="team" data-screen-label="Team" className="sec" aria-labelledby="team-h"
      style={{ minHeight: 'calc(100svh - 72px)', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingBlock: 'clamp(32px, 5vh, 72px)' }}>
      <div className="sec-wrap">
        <div className="team-layout">
          {/* left */}
          <div>
            <SectionHead eyebrow="The founders" max={460} style={{ marginBottom: 28 }}>
              <span id="team-h">Founder-led. <span className="accent">Every project, every decision.</span></span>
            </SectionHead>
            <Reveal as="p" delay={180} style={{ fontSize: 'clamp(1rem,1.4vw,1.1rem)', lineHeight: 1.7, color: 'var(--fg-muted)', margin: 0, maxWidth: 440 }}>
              No account managers. No junior handoffs. You work directly with the co-founders who architect, build, and deliver your project.
            </Reveal>
            <Reveal delay={260} style={{ display: 'flex', gap: 28, marginTop: 34, flexWrap: 'wrap' }}>
              {TEAM_STATS.map(([v, l]) => (
                <div key={l}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 650, fontSize: 24, color: 'var(--fg)', lineHeight: 1 }}>{v}</div>
                  <div style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--fg-faint)', marginTop: 6 }}>{l}</div>
                </div>
              ))}
            </Reveal>
          </div>

          {/* right: founder cards with real B&W photos */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            {MEMBERS.map((m, i) => (
              <div key={m.name} className="glass-stage">
                <Reveal delay={i * 140} className="glass glass-pro eglass eglass-soft lift team-card" style={{ borderRadius: 20, overflow: 'hidden' }}>
                  <img src={m.photo} alt={m.name} loading="lazy" className="team-photo" />
                  <div style={{ padding: '22px 24px', display: 'flex', flexDirection: 'column', justifyContent: 'center', minWidth: 0 }}>
                    <p style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '1.2rem', color: 'var(--fg)', margin: 0 }}>{m.name}</p>
                    <p className="mono" style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--accent)', margin: '6px 0 0' }}>{m.title}</p>
                    <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--fg-muted)', margin: '14px 0 0' }}>{m.bio}</p>
                    <a href={m.linkedin} target="_blank" rel="noopener noreferrer" style={{
                      display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 14, fontSize: 13, fontWeight: 500,
                      color: 'var(--accent)', textDecoration: 'none',
                    }}><LinkedIn /> View Profile</a>
                  </div>
                </Reveal>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Team = Team;