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

const RA = (typeof window !== "undefined" && window.UM_ROOT) || "../../";

function AboutPage() {
  const timeline = [
    { years: "2018 — Present", role: "Web Design",
      org: "Multiple brands",
      blurb: "Landing pages and brand sites across Framer, WordPress, Wix Studio, Shopify, Squarespace." },
    { years: "2021 — Present", role: "Static & Motion Graphics Designer",
      org: "Eko Development FZE & other brands",
      blurb: "Property launches, social campaigns, and motion identity work — 300+ posts, 100+ reels." },
    { years: "2021 — Present", role: "Digital Marketer",
      org: "Eko Development FZE & other brands",
      blurb: "Meta and Google campaigns — most recently a 200% lead-gen lift via Performance Max." },
    { years: "2022 — Present", role: "Drone Photography & Videography",
      org: "Eko Development FZE",
      blurb: "On-site aerial and editorial captures across multiple developments. DJI Air 2S." },
    { years: "2022 — Present", role: "Full-Stack Data Scientist",
      org: "Eko Development FZE · 10Alytics",
      blurb: "Python, SQL, Tableau, Power BI — predictive analytics and dashboards alongside design work." },
    { years: "2024 — Present", role: "UI / UX Designer",
      org: "Eko Development FZE & other brands",
      blurb: "Shipped the Azuri Towers Facility Management app, end-to-end, now in active use by residents." },
  ];

  const tools = [
    ["Figma",       "Fg", "#FF5C8A"],
    ["Framer",      "Fr", "#00DCB4"],
    ["Webflow",     "Wf", "#4FB7FF"],
    ["Wix Studio",  "Wx", "#FFA64F"],
    ["Squarespace", "Sq", "#AAAAAA"],
    ["Shopify",     "Sh", "#95BF47"],
    ["WordPress",   "Wp", "#21759B"],
    ["After Effects","Ae","#D69CFF"],
    ["Photoshop",   "Ps", "#4FB7FF"],
    ["Illustrator", "Ai", "#FFA64F"],
    ["InDesign",    "Id", "#FF5C8A"],
    ["Premiere Pro","Pr", "#B8A2FF"],
    ["Lightroom",   "Lr", "#4FB7FF"],
    ["Canva",       "Cv", "#00DCB4"],
    ["Miro",        "Mi", "#FFC900"],
    ["Python",      "Py", "#FFD43B"],
  ];

  return (
    <React.Fragment>
      <PageNav active="about"/>

      <PageHero
        kicker="About · Uche Madumere"
        title="Every great design begins with an even better"
        accent="story."
        lede="Nigerian-born, Mississauga-based Graphic & Motion Designer. Five years deep in remote freelance and full-time studio work — quietly confident, naturally curious, perpetually working on the craft. One design problem at a time."
      />

      <section className="um-container">
        <div className="ps-about-grid">
          <div className="ps-portrait-wrap">
            <img src={`${RA}assets/photography/uche-portrait.png`} alt="Uche Madumere"/>
            <div className="badge pw-float">
              <div className="v">A+</div>
              <div className="l">Studio<br/>verified</div>
            </div>
          </div>
          <div className="ps-about-bio">
            <PSLabel>The short version</PSLabel>
            <h1>One creative. <span className="accent">Every layer.</span></h1>
            <p>
              I'm Uche Samuel Madumere — a designer who treats motion, brand systems, and digital products
              as one continuous discipline. I lead the creative for <strong>Eko Development Company</strong> (developer
              of Azuri Towers, the tallest residential building in West Africa) and run <strong>PMDS</strong>, my freelance
              studio, on the side.
            </p>
            <p>
              Since beginning my journey nearly five years ago, I've done remote work for companies and
              collaborated with talented people to create digital products for both business and consumer use.
              I'm motion-first, system-driven, and culturally aware — and I'd rather ship one strict identity
              than five loud ones.
            </p>
            <p>
              Beyond design, I'm a full-stack data scientist working with Python, SQL, Tableau and Power BI.
              That feedback loop — design that gets measured — is what keeps both halves of the practice sharp.
            </p>

            <div className="ps-hero-stats" style={{borderTop: "1px solid #232323", marginTop: 8}}>
              <div>
                <div className="num"><CountUp to={5} suffix="+"/></div>
                <div className="lbl">Years experience</div>
              </div>
              <div>
                <div className="num"><CountUp to={300} suffix="+"/></div>
                <div className="lbl">Projects shipped</div>
              </div>
              <div>
                <div className="num"><CountUp to={30} suffix="+"/></div>
                <div className="lbl">Brands worldwide</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Big wins */}
      <section className="um-container ps-work-section" style={{paddingTop: 40}}>
        <PSLabel>Big wins · Azuri Towers</PSLabel>
        <h2 style={{fontWeight:800, fontSize:"clamp(36px, 5vw, 64px)",
                    letterSpacing:"-0.02em", margin:"14px 0 32px", lineHeight: 1.05}}>
          Numbers from the <span className="accent">last five years.</span>
        </h2>
        <div className="ps-services-grid" style={{padding: 0}}>
          <div className="ps-service-card">
            <div className="top">
              <div className="ico"><UmIcon name="ico-marketing" size={28}/></div>
              <div className="num">01</div>
            </div>
            <h3>433% social growth</h3>
            <p>Grew Azuri Towers Instagram from 3,000 to 16,000 followers (2021–2025) through consistent visual content and digital campaigns.</p>
            <div className="bot"><span className="meta">2021 — 2025</span></div>
          </div>
          <div className="ps-service-card">
            <div className="top">
              <div className="ico"><UmIcon name="ico-marketing" size={28}/></div>
              <div className="num">02</div>
            </div>
            <h3>200% lead-gen lift</h3>
            <p>Meta Ads and Google Performance Max campaigns doubled digital enquiries and walk-in leads in the most recent 90-day window.</p>
            <div className="bot"><span className="meta">Meta · Google</span></div>
          </div>
          <div className="ps-service-card">
            <div className="top">
              <div className="ico"><UmIcon name="ico-uiux" size={28}/></div>
              <div className="num">03</div>
            </div>
            <h3>Facility Management App</h3>
            <p>Led full UI/UX design of the Azuri Towers Facility Management resident app — wireframes → Figma → developer handoff. Now in active use.</p>
            <div className="bot"><span className="meta">Figma · Shipped</span></div>
          </div>
        </div>
      </section>

      {/* Resume timeline */}
      <section className="um-container ps-work-section">
        <PSLabel>Resume · Uche's experience</PSLabel>
        <h2 style={{fontWeight:800, fontSize:"clamp(36px, 5vw, 64px)",
                    letterSpacing:"-0.02em", margin:"14px 0 32px", lineHeight: 1.05}}>
          Roles, in <span className="accent">order.</span>
        </h2>
        <div className="ps-timeline">
          {timeline.map((t, i) => (
            <div key={i} className="ps-tl-row">
              <div className="ps-tl-years">{t.years}</div>
              <div className="ps-tl-line"><span></span></div>
              <div className="ps-tl-body">
                <div className="role">{t.role}</div>
                <div className="org">{t.org}</div>
                <p>{t.blurb}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Tools */}
      <section className="ps-tools">
        <div className="um-container">
          <PSLabel>Toolkit · 16 platforms</PSLabel>
          <h2 style={{fontWeight:800, fontSize:"clamp(28px, 4vw, 44px)",
                      letterSpacing:"-0.02em", margin:"14px 0 0", lineHeight: 1.05}}>
            Native across the <span className="accent">stack.</span>
          </h2>
          <div className="ps-tools-grid">
            {tools.map(([nm, ic, col], i) => (
              <div key={i} className="ps-tool">
                <div className="ic" style={{color: col}}>{ic}</div>
                <div>
                  <div className="nm">{nm}</div>
                  <div className="ro">Production-ready</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <PageCTA headline="Got a brand worth" accent="moving?"/>

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

window.AboutPage = AboutPage;