// AboutPage.jsx - TBS Digital Labs Website
function teamPhotoSlug(name) {
  return name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
}

function TeamAvatar({ member, accent, initials }) {
  const slug = member.photoSlug || teamPhotoSlug(member.name);
  const [showImg, setShowImg] = React.useState(true);
  return (
    <div style={{
      width: 44,
      height: 44,
      borderRadius: '50%',
      overflow: 'hidden',
      flexShrink: 0,
      background: accent + '20',
      border: '1px solid ' + accent + '40',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }}
    >
      {showImg ? (
        <img
          src={'/assets/team/' + slug + '.jpg'}
          alt={member.name}
          width={44}
          height={44}
          loading="lazy"
          decoding="async"
          style={{
            width: '100%',
            height: '100%',
            objectFit: 'cover',
          }}
          onError={function () { setShowImg(false); }}
        />
      ) : (
        <span style={{ fontFamily: "'Funnel Display', sans-serif", fontSize: 16, fontWeight: 400, color: accent }}>{initials(member.name)}</span>
      )}
    </div>
  );
}

Object.assign(window, {
  AboutPage: function({ onNavigate }) {
    const t = darkTheme;

    const team = [
      { name: 'Alexandra Senter', title: 'Founder & CEO' },
      { name: 'Renee Gorrie', title: 'Chief Operating Officer' },
      { name: 'David Dahdah', title: 'Head of Client Success & AI Innovation' },
      { name: 'Rebecca Hyde', title: 'Director of Media & Strategy' },
      { name: 'Daria Khokhlenkova', title: 'Creative Director' },
      { name: 'Lea Waldron', title: 'Account Director' },
      { name: 'David Clarke', title: 'Lead Communications Manager' },
      { name: 'Sha Dollosa', title: 'Senior Project Manager' },
      { name: 'Frances Adcock', title: 'Media Advisor' },
      { name: 'Candice Clarke', title: 'Account Manager' },
      { name: 'Justine Mallillin', title: 'Account & Project Manager' },
      { name: 'Hannah Chester', title: 'Social Media Strategist' },
      { name: 'Stella Gray', title: 'Content Strategist & Copywriter' },
      { name: 'Adam Moore', title: 'Content Creator' },
      { name: 'Joseph Malapitan', title: 'Media & Content Assistant' },
      { name: 'Kellie McDonnell', title: 'Admin & Media Assistant' },
      { name: 'Ruby Laura Willoughby', title: 'PR & Content Intern' },
      { name: 'Sergey Trenev', title: 'Web Designer', photoSlug: 'sergey' },
      { name: 'Marlo Constantino', title: 'Graphic Designer', photoSlug: 'marlo' },
    ];

    const accents = [t.a2, t.a1, t.fg, t.a2, t.a1];
    const initials = function (name) { return name.split(' ').map(function (n) { return n[0]; }).join('').slice(0, 2); };

    return (
      <div style={{ background: t.bg, minHeight: '100svh' }}>
        <DsBackdropSection slug="cubist-building" variant="hero" className="ds-page-hero-pad ds-page-hero-fill">
          <div className="ds-content-wrap">
            <div data-ds-enter style={{ ['--ds-enter-delay']: '40ms', display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
              <div data-ds-rule style={{ width: 24, height: 1, background: t.a2 }} />
              <span style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, fontWeight: 500, color: t.a2 }}>About</span>
            </div>
            <h1 data-ds-enter className="ds-hero-h1" style={{ ['--ds-enter-delay']: '120ms', fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(28px, 5.25vw + 8px, 80px)', color: t.fg, lineHeight: 1.08, letterSpacing: '-0.02em' }}>
              {dsHighlight('From media to growth consultancy', 'growth', t.hl)}
            </h1>
            <p data-ds-enter className="ds-prose-wide" style={{ ['--ds-enter-delay']: '260ms', fontFamily: "'Rethink Sans', sans-serif", color: t.fg2, lineHeight: 1.65, marginTop: 24 }}>
              Twelve years inside the media taught us what most consultancies guess at. We put that to work for ambitious founders and brands.
            </p>
          </div>
        </DsBackdropSection>

        <section id="about-story" className="ds-section-follow-hero" style={{ paddingLeft: 'var(--ds-page-gutter)', paddingRight: 'var(--ds-page-gutter)', paddingBottom: 'var(--ds-section-pad-y-loose)' }}>
          <div className="ds-content-wrap" data-ds-enter style={{ ['--ds-enter-delay']: '520ms' }}>
            <DsProseSplit heading="Where we come from" image="red-wall" reveal={false}>
              <p className="ds-prose-wide" style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, color: t.fg2, lineHeight: 1.7, marginBottom: 20 }}>
                In 2013, our founders launched an independent news and opinion platform and ran it for more than a decade. Operating media at scale taught us the important lessons early: what earns genuine audience trust, and how the economy of attention translates into revenue.
              </p>
              <p className="ds-prose-wide" style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, color: t.fg2, lineHeight: 1.7, marginBottom: 20 }}>
                TBS Digital Labs grew from that experience. We are a growth consultancy focused on helping brands apply the same strategic mindset and editorial intelligence to their own positioning, content and campaigns.
              </p>
              <p className="ds-prose-wide" style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, color: t.fg2, lineHeight: 1.7, margin: 0 }}>
                That editorial background still shapes how we work: what we learned running a publisher is what we apply for clients here.
              </p>
            </DsProseSplit>
          </div>
        </section>

        <section style={{ background: t.bgMid, padding: 'var(--ds-section-pad-y) var(--ds-page-gutter)' }}>
          <div className="ds-content-wrap">
            <div data-ds-reveal style={{ marginBottom: 32 }}>
              <h2 style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(24px, 4vw, 40px)', color: t.fg, lineHeight: 1.15, marginBottom: 0 }}>
                Who we&apos;ve worked with
              </h2>
            </div>
            <DsSocialProof inline microLabel="Trusted by" />
          </div>
        </section>

        <section style={{ padding: 'var(--ds-section-pad-y-loose) var(--ds-page-gutter)' }}>
          <div className="ds-content-wrap">
            <h2 data-ds-reveal style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(28px, 4.5vw, 52px)', color: t.fg, lineHeight: 1.12, marginBottom: 40 }}>
              Meet the team
            </h2>
            <div className="ds-team-grid" data-ds-stagger>
              {team.map(function (member, i) {
                var accent = accents[i % accents.length];
                return (
                  <div key={member.name + i} data-ds-reveal className="ds-card-lift"
                    style={{ background: t.bgCard, border: '1px solid ' + t.border2, padding: '24px', borderRadius: 2 }}>
                    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
                      <TeamAvatar member={member} accent={accent} initials={initials} />
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 400, fontSize: 17, color: t.fg, lineHeight: 1.25 }}>{member.name}</div>
                        <div className="ds-team-title" style={{ color: t.fg2 }}>{member.title}</div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        <div style={{ background: t.bgMid, borderTop: '1px solid ' + t.border2, padding: 'var(--ds-section-pad-y) var(--ds-page-gutter) max(40px, env(safe-area-inset-bottom))', textAlign: 'center' }}>
          <div className="ds-content-wrap" style={{ maxWidth: 'min(720px, 100%)', margin: '0 auto' }} data-ds-stagger>
            <h2 data-ds-reveal style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(28px, 4vw, 36px)', color: t.fg, marginBottom: 16 }}>{dsHighlight('Tell us what you\u2019re building', 'building', t.hl)}</h2>
            <p data-ds-reveal className="ds-prose-wide" style={{ fontFamily: "'Rethink Sans', sans-serif", color: t.fg2, marginBottom: 28, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.65 }}>
              We&apos;re not the right fit for everyone. We&apos;ll tell you that upfront if we think that&apos;s the case. But if you&apos;re building something serious and want a growth partner who&apos;ll give you a straight answer, we&apos;d like to talk.
            </p>
            <div data-ds-reveal>
              <button type="button" onClick={function () { onNavigate('contact'); }} className="ds-btn-primary" style={{ background: t.a1, color: t.onAccent, border: 'none', cursor: 'pointer', fontFamily: "'Rethink Sans', sans-serif", fontWeight: 600, fontSize: 16, padding: '12px 28px', borderRadius: 2, minHeight: 44 }}><span>Get in touch</span></button>
            </div>
          </div>
        </div>
      </div>
    );
  },
});
