const { Wordmark } = window.CammusDesignSystem_2ef585;

/* THE DREAM TEAM — final section (per sketch): the two exact sides Cammus
   needs, side by side; then the vision statement with the brand's lime
   period, the centered wordmark, and the diligence contact line.
   Badge slots next to each name are drag-and-drop (<image-slot>) — drop the
   ITA / CIMED logos on them and they persist. */
function TeamSection() {
  const eyebrowStyle = {
    color: 'var(--cam-text-inactive)', fontSize: 'var(--fs-eyebrow)',
    fontWeight: 'var(--fw-semibold)', textTransform: 'uppercase',
    letterSpacing: 'var(--track-eyebrow)', marginBottom: 'var(--space-4)',
  };
  const founders = [
    {
      name: 'Brendo da Luz', role: 'CEO · Marketing & GTM',
      photo: 'assets/team/brendo.jpg', logo: 'assets/team/ita.png', logoAlt: 'ITA',
      bullets: [
        '3rd place in the ITA entrance exam (2022).',
        'Launch of products generating over 1 million in revenue.',
        'Leadership with a team of 40+ people.',
      ],
    },
    {
      name: 'Caetano Vizel', role: 'CTO · AI & Product',
      link: 'https://www.linkedin.com/in/caetano-vizel/',
      photo: 'assets/team/caetano.jpg', logo: 'https://logodownload.org/wp-content/uploads/2020/02/cimed-logo-1-1.png', logoAlt: 'CIMED',
      bullets: [
        'CS dropout @ UFLA. Hackathon ZtO Winner.',
        'GTM from the Urso supplement brand.',
        'Immersion in Silicon Valley + $10k.',
      ],
    },
  ];
  const contacts = [
    { label: '(85) 99186-3621', href: 'https://wa.me/5585991863621', meta: 'WhatsApp' },
    { label: 'brendo@cammusai.com', href: 'mailto:brendo@cammusai.com', meta: 'Email' },
    { label: 'linkedin.com/in/brendo-da-luz', href: 'https://linkedin.com/in/brendo-da-luz', meta: 'LinkedIn' },
  ];
  return (
    <section id="team" data-screen-label="The Dream Team" style={{ background: 'var(--cam-surface-section)', borderTop: '1px solid var(--cam-border-subtle)' }}>
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: 'var(--section-pad) var(--page-gutter)' }}>
        <div className="lp-reveal">
          <div style={eyebrowStyle}>The Dream Team</div>
          <h2 style={{
            margin: 0, fontSize: 'min(var(--fs-h1), calc(min(72rem, 100vw - 2 * var(--page-gutter)) / 19))', fontWeight: 'var(--fw-black)',
            letterSpacing: 'var(--track-display)', lineHeight: 'var(--lh-snug)',
            color: 'var(--cam-text-primary)', whiteSpace: 'nowrap',
          }}>The two exact sides that Cammus needs.</h2>
          <p style={{
            margin: 'var(--space-5) 0 0', fontSize: 'var(--fs-lead)',
            color: 'var(--cam-text-secondary)', letterSpacing: 'var(--track-text)',
            lineHeight: 1.5, maxWidth: '62ch',
          }}>Today, to sell marketing, you need to master marketing and AI. Brendo brings the demand, Caetano, the construction.</p>
        </div>

        {/* Founders */}
        <div className="lp-group" style={{
          marginTop: 'var(--space-8)', display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 'var(--space-8)',
        }}>
          {founders.map((f, i) => (
            <div key={f.name} className="lp-item" style={{ '--d': (i * 0.15) + 's', display: 'flex', gap: 'var(--space-6)', alignItems: 'flex-start', flexWrap: 'wrap' }}>
              <img src={f.photo} alt={f.name} draggable={false} style={{
                width: 150, height: 188, objectFit: 'cover', display: 'block',
                borderRadius: 'var(--radius-card)', border: '1px solid var(--cam-border-subtle)',
                filter: 'grayscale(1) contrast(1.04)', flex: 'none',
              }} />
              <div style={{ flex: '1 1 220px', minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', flexWrap: 'nowrap' }}>
                  <span style={{
                    color: 'var(--cam-text-primary)', fontWeight: 'var(--fw-bold)',
                    fontSize: '1.2rem', letterSpacing: 'var(--track-display)',
                  }}>{f.link ? (
                    <a href={f.link} target="_blank" rel="noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>{f.name}</a>
                  ) : f.name}{f.link && (
                    <a href={f.link} target="_blank" rel="noreferrer" aria-label={f.name + ' on LinkedIn'} style={{
                      color: 'var(--cam-text-inactive)', textDecoration: 'none',
                      fontSize: '0.6em', marginLeft: '0.35em', verticalAlign: '0.25em',
                    }}
                      onMouseEnter={(e) => (e.target.style.color = 'var(--cam-text-primary)')}
                      onMouseLeave={(e) => (e.target.style.color = 'var(--cam-text-inactive)')}>↗</a>
                  )}</span>
                  <img src={f.logo} alt={f.logoAlt} draggable={false} style={{ height: 26, width: 'auto', flex: 'none', display: 'block' }} />
                </div>
                <div style={{
                  marginTop: 'var(--space-2)', color: 'var(--cam-text-auxiliary)',
                  fontSize: 'var(--fs-eyebrow)', fontWeight: 'var(--fw-semibold)',
                  textTransform: 'uppercase', letterSpacing: 'var(--track-eyebrow)',
                }}>{f.role}</div>
                <ul style={{ margin: 'var(--space-4) 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
                  {f.bullets.map((b) => (
                    <li key={b} style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'baseline' }}>
                      <span aria-hidden="true" style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--cam-text-inactive)', flex: 'none', transform: 'translateY(-2px)' }} />
                      <span style={{ color: 'var(--cam-text-auxiliary)', fontSize: 'var(--fs-small)', lineHeight: 1.5, letterSpacing: 'var(--track-text)' }}>{b}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>

        {/* Vision */}
        <div className="lp-reveal" style={{ marginTop: 'var(--beat-gap)' }}>
          <div style={eyebrowStyle}>Our Vision</div>
          <h2 style={{
            margin: 0, fontSize: 'min(var(--fs-h1), calc(min(72rem, 100vw - 2 * var(--page-gutter)) / 26))', fontWeight: 'var(--fw-black)',
            letterSpacing: 'var(--track-display)', lineHeight: 'var(--lh-snug)',
            color: 'var(--cam-text-primary)',
          }}><span style={{ whiteSpace: 'nowrap' }}>First, be the marketing infrastructure for every</span><br /><span style={{ whiteSpace: 'nowrap' }}>B2B company in Brazil. Then, the world<span style={{ color: 'var(--cam-accent-lime)' }}>.</span></span></h2>
        </div>

        <div className="lp-reveal" style={{ marginTop: 'var(--beat-gap)', display: 'flex', justifyContent: 'center' }}>
          <Wordmark height={72} />
        </div>

        {/* Diligence contacts */}
        <div className="lp-group" style={{ marginTop: 'var(--beat-gap)', borderTop: '1px solid var(--cam-border-subtle)', paddingTop: 'var(--space-6)' }}>
          <div className="lp-item" style={{ '--d': '0s', color: 'var(--cam-text-secondary)', fontSize: 'var(--fs-lead)', fontWeight: 'var(--fw-semibold)', letterSpacing: 'var(--track-text)' }}>
            Confirm your check by contacting us through one of the channels below:
          </div>
          <div style={{ marginTop: 'var(--space-5)', display: 'flex', alignItems: 'baseline', gap: 'var(--space-7)', flexWrap: 'wrap' }}>
            {contacts.map((c, i) => (
              <div key={c.label} className="lp-item" style={{ '--d': (0.15 + i * 0.12) + 's', display: 'flex', flexDirection: 'column', gap: 4 }}>
                <span style={{
                  color: 'var(--cam-text-inactive)', fontSize: '10px', fontWeight: 'var(--fw-semibold)',
                  textTransform: 'uppercase', letterSpacing: 'var(--track-eyebrow)',
                }}>{c.meta}</span>
                <a href={c.href} target={c.href.indexOf('mailto:') === 0 ? undefined : '_blank'} rel="noreferrer" style={{
                  color: 'var(--cam-text-primary)', fontWeight: 'var(--fw-semibold)',
                  fontSize: 'var(--fs-small)', letterSpacing: 'var(--track-text)',
                  textDecoration: 'none', borderBottom: '1px solid var(--cam-border-strong)',
                  paddingBottom: 2, width: 'fit-content',
                }}>{c.label}</a>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.TeamSection = TeamSection;