(function(){
const { CtaBand, Button } = window.DS;
const Icon = window.MunaIcon;

const TEAM = [
  { id: 'p1', name: 'Tshepo', role: 'Co-Founder & Chief Executive Officer' },
  { id: 'p2', name: 'Esethu', role: 'Co-founder & Chief Product Officer' },
  { id: 'p3', name: 'Sithandiwe', role: 'Marketing Coordiantor' },
  { id: 'p6', name: 'Kgothatso', role: 'Technical Advisor' }
];

function Portrait({ id, name, role }) {
  return (
    <div className="pcell">
      <image-slot id={'about-' + id} shape="rect" fit="cover" placeholder={'Drop ' + name + '’s portrait'}></image-slot>
      <div className="pcap">
        <p className="nm t-display-md">{name}</p>
        <p className="rl t-body-sm">{role}</p>
      </div>
    </div>
  );
}

function AboutScreen({ onNavigate, onDemo }) {
  const ref = window.useReveal(true);
  return (
    <main data-screen-label="About Us">
      <section ref={ref} className="about-head">
        <span className="t-caption-upper about-eyebrow">TEAM MUNA</span>
        <h1 className="t-display-xl about-stmt">Innovators, operators and retail people. Built in Africa, for the way African retail actually works. We build the infrastructure that keeps value in motion.</h1>
      </section>

      <div className="rail">
        {TEAM.map((p) => <Portrait key={p.id} {...p} />)}
      </div>

      <Band reveal>
        <div className="aboutbox">
          <p className="t-display-md abx-lead">Designing for the Future of Commerce.</p>
          <p className="t-body-md">We are the team behind Rewoven, where we diverted more than 1.3 million kilograms of textiles from landfill and learned how retail really works on the ground.</p>
          <p className="t-body-md">Building in South Africa taught us something the rest of the world is only starting to see. People here have always recirculated, resold and repurposed value, creating opportunity from what already exists. That instinct is powerful. What it lacked was infrastructure.</p>
          <p className="t-body-md">So we are building it. Muna turns that everyday ingenuity into trusted, measurable and scalable systems, making circular commerce easier for brands and more rewarding for the communities that power it.</p>
          <p className="t-display-md abx-lead">Our Core Belief</p>
          <p className="t-body-md">We believe retail should be more resource-efficient, more connected, and more valuable to everyone it touches.</p>
          <p className="t-body-md"><strong>Keep Value Moving.</strong></p>
        </div>
      </Band>

      <CtaBand className="ctaband" orb="apricot" title="Work with us" subhead="Tell us what you are trying to move, and we will show you how."
        actions={<Button size="lg" onClick={onDemo} iconAfter={<Icon name="arrow-right" size={16} />}>talk to our team</Button>} />
    </main>
  );
}

window.AboutScreen = AboutScreen;
})();