/* eslint-disable */
const Team = () => {
  const founders = [
  {
    name: 'Ivan Rizzuto',
    role: 'Co-Founder AI-Cycle',
    sub: 'Co-Founder Cloud Solution AG',
    headline: 'Bringt KI ins Tagesgeschäft Schweizer KMUs — als Handwerk, nicht als Theater.',
    body: [
    'Unternehmer, kein Berater. Mit Cloud Solution GmbH baue ich seit Jahren digitale Infrastruktur für Schweizer KMUs. Mit AI-Cycle gehen wir den nächsten Schritt: KI vom Hype ins Tagesgeschäft.',
    'Was mich antreibt: Die meisten KI-Projekte enden in der PowerPoint. Workshop, Pilot, Strohfeuer. Wir machen es anders — wir bauen die KI-Fähigkeit in das Team unserer Kunden ein. Eigene Champions. Echte Use Cases. ROI in Monaten, nicht in Jahren.'],

    image: '/placeholders/team/ivan-rizzuto.png',
    initials: 'IR',
    email: 'ivan@ai-cycle.ch',
    linkedin: 'https://www.linkedin.com/in/ivanrizzuto/'
  },
  {
    name: 'Alexander Fürer',
    role: 'Co-Founder AI-Cycle',
    sub: 'CEO rdcl AG',
    headline: '20+ Jahre an der Schnittstelle Tech, Kreativität, Business.',
    body: [
    'Seit über 20 Jahren arbeite ich da, wo Technologie auf Kreativität auf Geschäft trifft. Mit rdcl.ai begleite ich Unternehmen bei der strategischen KI-Integration. Mit AI-Cycle haben Ivan und ich daraus ein System gemacht — für Schweizer KMUs, die KI ernst meinen.',
    'Mein Standpunkt: KI ist kein Werkzeug, das man einmal kauft und dann hat. Es ist eine Fähigkeit, die im Team wachsen muss — und ein Vorsprung, den man pflegen muss, weil die Technologie nicht wartet.'],

    image: '/placeholders/team/alexander-fuerer.png',
    initials: 'AF',
    email: 'alex@ai-cycle.ch',
    linkedin: 'https://www.linkedin.com/in/alexanderfuerer/'
  }];


  const advisors = [
  {
    name: 'Markus Schwingel',
    role: 'Unternehmer & Mobility Transformation Leader',
    image: '/placeholders/advisors/markus-schwingel.png',
    initials: 'MS',
    linkedin: 'https://www.linkedin.com/in/markusschwingel/'
  },
  {
    name: 'Daniel Seitz',
    role: 'On-Premise Datacenter & IT-Infrastruktur Experte',
    image: '/placeholders/advisors/dani-seitz.jpeg',
    initials: 'DS',
    linkedin: 'https://www.linkedin.com/in/daniel-seitz-825b8a70/'
  },
  {
    name: 'Reto Grubenmann',
    role: 'Transformation Experte',
    image: '/placeholders/advisors/reto-grubenmann.jpeg',
    initials: 'RG',
    linkedin: 'https://www.linkedin.com/in/reto-grubenmann/'
  }];


  const LinkedInIcon = ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.95v5.66H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z" />
    </svg>;


  return (
    <section id="ueber" style={{
      maxWidth: 'var(--container)', margin: '0 auto',
      padding: 'var(--s-9) var(--gutter)'
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em',
        textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 'var(--s-6)'
      }}>
        <span style={{ width: 24, height: 2, background: 'var(--ink)' }} />
        <span>Wer wir sind</span>
      </div>

      <h2 style={{
        fontSize: 'clamp(32px, 3.6vw, 56px)', lineHeight: 1.05,
        letterSpacing: '-0.02em', fontWeight: 600,
        maxWidth: '24ch', margin: '0 0 var(--s-5) 0', textWrap: 'balance'
      }}>
        Wir sind Unternehmer, die mit euch anpacken. Keine Berater. <span style={{
          fontFamily: 'var(--font-serif)', fontStyle: 'italic',
          fontWeight: 400, color: 'var(--ocher)'
        }}></span>
      </h2>

      <p style={{
        fontSize: 19, lineHeight: 1.5, color: 'var(--fg-2)',
        maxWidth: '52ch', margin: '0 0 var(--s-8) 0'
      }}>
        Wir sind Unternehmer mit der gleichen Realität wie ihr: knappe Ressourcen,
        schnelle Entscheidungen, der Druck, Ergebnisse zu liefern. Wir realisieren die
        KI-Transformation gemeinsam mit eurer Organisation und bleiben an eurer Seite,
        weil Wandel & Technologie nicht stillstehen.
      </p>

      {/* Founders — large photo blocks */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--s-6)'
      }}>
        {founders.map((f) =>
        <article key={f.name} style={{
          display: 'flex', flexDirection: 'column',
          background: 'var(--bone)',
          border: '1px solid var(--rule)'
        }}>
            {/* Large image area */}
            <div style={{
            aspectRatio: '4 / 3',
            background: 'var(--concrete)',
            borderBottom: '1px solid var(--rule)',
            position: 'relative',
            overflow: 'hidden'
          }}>
              <img src={f.image} alt={f.name} style={{
              width: '100%', height: '100%',
              objectFit: 'cover', objectPosition: 'center top',
              display: 'block'
            }} />
              <div style={{
              position: 'absolute', right: 14, top: 14,
              fontFamily: 'var(--font-mono)', fontSize: 10,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              color: 'var(--bone)',
              background: 'rgba(20,20,15,.72)',
              padding: '5px 7px'
            }}>{f.initials}</div>
            </div>

            <div style={{
            padding: 'var(--s-6) var(--s-6)',
            display: 'flex', flexDirection: 'column', gap: 'var(--s-5)', flex: 1
          }}>
              <div>
                <div style={{ fontSize: 28, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.02em', lineHeight: 1.1 }}>
                  {f.name}
                </div>
                <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em',
                textTransform: 'uppercase', color: 'var(--fg-3)', marginTop: 8
              }}>{f.role}</div>
                <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em',
                textTransform: 'uppercase', color: 'var(--ocher)', marginTop: 4
              }}>{f.sub}</div>
              </div>

              <div style={{
              fontFamily: 'var(--font-serif)', fontStyle: 'italic',
              fontSize: 19, lineHeight: 1.4, color: 'var(--ink)',
              paddingLeft: 'var(--s-4)', borderLeft: '2px solid var(--ocher)'
            }}>
                {f.headline}
              </div>

              {f.body.map((p, j) =>
            <p key={j} style={{
              fontSize: 15.5, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0
            }}>{p}</p>
            )}

              <div style={{
              display: 'flex', gap: 'var(--s-5)', alignItems: 'center',
              marginTop: 'auto', paddingTop: 'var(--s-4)',
              borderTop: '1px solid var(--rule)'
            }}>
                <a href={f.linkedin} target="_blank" rel="noopener noreferrer" style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.08em',
                textTransform: 'uppercase', color: 'var(--ink)',
                textDecoration: 'none'
              }}
              onMouseOver={(e) => e.currentTarget.style.color = 'var(--ocher)'}
              onMouseOut={(e) => e.currentTarget.style.color = 'var(--ink)'}>
                  <LinkedInIcon /> LinkedIn
                </a>
                <a href={`mailto:${f.email}`} style={{
                fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.08em',
                textTransform: 'uppercase', color: 'var(--ink)',
                textDecoration: 'underline', textUnderlineOffset: 4,
                textDecorationColor: 'var(--ocher)', textDecorationThickness: '1.5px'
              }}>SCHREIB MIR →</a>
              </div>
            </div>
          </article>
        )}
      </div>

      {/* Advisory Board */}
      <div style={{ marginTop: 'var(--s-9)' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em',
          textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 'var(--s-5)'
        }}>
          <span style={{ width: 24, height: 2, background: 'var(--ink)' }} />
          <span>Advisory Board</span>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 'var(--s-7)',
          alignItems: 'start', marginBottom: 'var(--s-7)'
        }}>
          <h3 style={{
            fontSize: 'clamp(28px, 2.8vw, 40px)', lineHeight: 1.1,
            letterSpacing: '-0.02em', fontWeight: 600,
            maxWidth: '14ch', margin: 0
          }}>
            Wir arbeiten <span style={{
              fontFamily: 'var(--font-serif)', fontStyle: 'italic',
              fontWeight: 400, color: 'var(--ocher)'
            }}>im Team.</span>
          </h3>
          <p style={{
            fontSize: 17, lineHeight: 1.55, color: 'var(--fg-2)',
            maxWidth: '52ch', margin: 0
          }}>Unsere Advisor bringen Perspektiven aus Technologie, Unternehmertum und Transformation — damit wir für jede Herausforderung die richtigen Antworten haben.



          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          border: '1px solid var(--rule)',
          background: 'var(--bone)'
        }}>
          {advisors.map((a, i) =>
          <div key={a.name} style={{
            padding: 'var(--s-5)',
            borderRight: i < advisors.length - 1 ? '1px solid var(--rule)' : 'none',
            display: 'flex', flexDirection: 'column'
          }}>
              <div style={{
              aspectRatio: '4 / 4',
              background: 'var(--bone-2)',
              border: '1px solid var(--rule)',
              marginBottom: 'var(--s-4)',
              position: 'relative',
              overflow: 'hidden'
            }}>
                <img src={a.image} alt={a.name} style={{
                width: '100%', height: '100%',
                objectFit: 'cover', objectPosition: 'center top',
                display: 'block'
              }} />
              </div>
              <div style={{
              fontSize: 19, fontWeight: 600, letterSpacing: '-0.018em',
              color: 'var(--ink)', lineHeight: 1.2
            }}>{a.name}</div>
              <div style={{
              fontSize: 14, lineHeight: 1.45,
              color: 'var(--fg-3)', marginTop: 6, flex: 1
            }}>{a.role}</div>
              <a href={a.linkedin} target="_blank" rel="noopener noreferrer" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em',
              textTransform: 'uppercase', color: 'var(--ink-2)',
              textDecoration: 'none', marginTop: 'var(--s-4)',
              paddingTop: 'var(--s-3)', borderTop: '1px solid var(--rule)'
            }}
            onMouseOver={(e) => e.currentTarget.style.color = 'var(--ocher)'}
            onMouseOut={(e) => e.currentTarget.style.color = 'var(--ink-2)'}>
                <LinkedInIcon size={12} /> LinkedIn
              </a>
            </div>
          )}
        </div>
      </div>
    </section>);

};
window.Team = Team;
