import React, { Component } from 'react';
import Section from 'shared/components/section/section';
import TeamCard from 'shared/components/teamCard/teamCard';
import StaffCard from 'shared/components/staffCard/staffCard';
import armySeal from 'images/serviceSeals/Army.png';
import navySeal from 'images/serviceSeals/Navy.png';
import marineSeal from 'images/serviceSeals/USMC.png';
import marineReserveSeal from 'images/serviceSeals/USMCReserve.png';
import coastGuardSeal from 'images/serviceSeals/USCG.png';
import airForceSeal from 'images/serviceSeals/AirForce.png';
import airForceReserveSeal from 'images/serviceSeals/AirForceReserve.png';
import armyReserveSeal from 'images/serviceSeals/ArmyReserve.png';
import navyReserveSeal from 'images/serviceSeals/NavyReserve.png';
import styles from './team.css';
import Data from './team.json';

class Team extends Component {
  render() {
    const founder = {
      name: 'David Molina',
      role: 'Founder / Executive Director',
      src: 'https://pbs.twimg.com/profile_images/875514479202639873/vFr09yW4_400x400.jpg',
      alt: 'David Molina',
      twitter: '@davidcmolina',
      email: 'david@operationcode.org'
    };
    const coo = {
      name: 'Conrad Holloman',
      role: 'Chief of Staff / COO',
      src: 'https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAP6AAAAJDk2MTJkMDc3LTdiZDYtNGNkZi1hOTgxLWE3YmI0OWFjYzQ4Nw.jpg',
      alt: 'Conrad Holloman',
      twitter: '@hollomancer',
      email: 'conrad@operationcode.org'
    };
    const team = Data
      .map(person =>
        (
          <TeamCard
            name={person.name}
            role={person.role}
            key={person.name}
          />
        )
      );
    return (
      <div className={styles.wrapper}>
        <div className={styles.titleQuote}>
          <div className={styles.line} />
          <span className={styles.quote}>
            &quot;TO CARE FOR HIM WHO SHALL HAVE BORNE THE BATTLE, AND FOR HIS WIDOW, AND HIS ORPHAN&quot;
          </span>
          <div className={styles.line} />
        </div>
        <Section title="Mission" theme="white">
          <p className={styles.paragraph}>Operation code is leading the way to expand opportunities for military veterans and their families to learn new skills and build a career in the fast-growing technology sector. Our team’s mission, led by veterans and other dedicated volunteers who are passionate about technology, is to hep open doors for our diverse membership through unique program offerings, such as our Software Mentor Program, Conference Scholarships, and Employment Services - all made possible by individual donations and corporate partnerships.
          </p>

          <h2>Who We Serve</h2>
          <p className={styles.paragraph}>
         Past and present Army, Navy, Marines, Air Force, and Coast Guard service members, veterans, military spouses, and family members are welcome to apply to any of our programs. Through our online community, we work with 2000+ members around the world.</p>
          <div className={styles.serviceSealWrapper}>
            <img className={styles.serviceSeal} src={armySeal} alt="Army Seal" />
            <img className={styles.serviceSeal} src={navySeal} alt="Army Seal" />
            <img className={styles.serviceSeal} src={marineSeal} alt="Army Seal" />
            <img className={styles.serviceSeal} src={marineReserveSeal} alt="Army Seal" />
            <img className={styles.serviceSeal} src={coastGuardSeal} alt="Army Seal" />
            <img className={styles.serviceSeal} src={airForceSeal} alt="Army Seal" />
            <img className={styles.serviceSeal} src={airForceReserveSeal} alt="Army Seal" />
            <img className={styles.serviceSeal} src={armyReserveSeal} alt="Army Seal" />
            <img className={styles.serviceSeal} src={navyReserveSeal} alt="Army Seal" />
          </div>
        </Section>
        <Section title="Our Board" theme="gray">
          <p className={styles.paragraph}>
            Our fearless volunteer leaders. No salaries here.
          </p>
          <div className={styles.team}>
            <StaffCard name={founder.name} role={founder.role} src={founder.src} twitter={founder.twitter} email={founder.email} alt={founder.alt} />
            <StaffCard name={coo.name} role={coo.role} src={coo.src} twitter={coo.twitter} email={coo.email} alt={coo.alt} />
          </div>
        </Section>
        <Section title="Our Team" theme="gray" id="long">
          <p className={styles.paragraph}>
            Our all volunteer staff are dedicated individuals who come from a wide variety of backgrounds, including U.S Military Veterans, civilians, those with tech backgrounds, and those who have skills outside of web development.
          </p>
          <div className={styles.team}>
            {team}
          </div>
        </Section>
      </div>
    );
  }
}

export default Team;

@@ -807,16 +807,19 @@
 m.css';%0A
+// 
 import D
@@ -880,18 +880,540 @@
 %7B%0A  
-render() %7B
+constructor(props) %7B%0A    super(props);%0A%0A    this.state = %7B%0A      members: %5B%5D%0A    %7D;%0A  %7D%0A%0A  componentWillMount() %7B%0A    return fetch('https://api.operationcode.org/api/v1/team_members.json').then(response =%3E%0A      response.json().then((data) =%3E %7B%0A        this.setState(%7B members: data %7D);%0A      %7D)%0A    );%0A  %7D%0A%0A  render() %7B%0A    const team = this.state.members.map(member =%3E%0A      (%0A        %3CTeamCard%0A          key=%7B%60$%7BMath.random()%7D + $%7Bmember.name%7D%60%7D%0A          name=%7Bmember.name%7D%0A          role=%7Bmember.role%7D%0A        /%3E%0A      )%0A    );
 %0A   
@@ -2034,204 +2034,8 @@
  %7D;%0A
-    const team = Data%0A      .map(person =%3E%0A        (%0A          %3CTeamCard%0A            name=%7Bperson.name%7D%0A            role=%7Bperson.role%7D%0A            key=%7Bperson.name%7D%0A          /%3E%0A        )%0A      );
 %0A   
@@ -5155,20 +5155,22 @@
        %7B
+ 
 team
+ 
 %7D%0A      

Add backend API integration to source team members