/* global React, PageNav, PageFooter, PageCTA, PSLabel, UmIcon, PageHero, PMDS_SERVICES, CANVA_PORTFOLIO, CountUp */

function ServicesOverview() {
  return (
    <React.Fragment>
      <PageNav active="services"/>

      <PageHero
        kicker="Services · 09 lanes"
        title="Every layer of the"
        accent="brand."
        lede="One studio. Nine production lanes. From a single Instagram post to a full motion identity system — every brief lives inside the same brand discipline."
        stats={[
          { num: "9",    lbl: "Service lanes" },
          { num: "30+",  lbl: "Brands worldwide" },
          { num: "5+",   lbl: "Years experience" },
        ]}
      />

      <section className="um-container">
        <div className="ps-services-grid">
          {PMDS_SERVICES.map(s => (
            <a key={s.id} className="ps-service-card" href={`../services/${s.id}.html`}>
              <div className="top">
                <div className="ico">
                  <UmIcon name={s.ico} size={28}/>
                </div>
                <div className="num">{s.n}</div>
              </div>
              <h3>{s.title}</h3>
              <p>{s.short || s.lede}</p>
              <div className="bot">
                <span className="meta">{s.countLabel}</span>
                <span className="view">
                  Open <UmIcon name="ico-arrow-up-right" size={12}/>
                </span>
              </div>
            </a>
          ))}
        </div>
      </section>

      <PageCTA headline="Not sure where to" accent="start?"/>

      <PageFooter/>
    </React.Fragment>
  );
}

window.ServicesOverview = ServicesOverview;