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

const { useState: usePO } = React;
const RP = (typeof window !== "undefined" && window.UM_ROOT) || "../../";

/* Featured projects per service — informed by the framer site + portfolio doc.
   Each project has a service tag so the filter chips work. */
const PROJECTS = [
  // Static Graphics (20 real projects)
  { id: "p1", service: "static-graphics", title: "Azuri Towers Rental Yield Campaign", tool: "Adobe Photoshop", img: "static-01-azuri-rental.jpg", blurb: "Investment social media post showcasing 6% rental yield with mortgage facility details for luxury real estate in Lagos." },
  { id: "p2", service: "static-graphics", title: "Azuri Towers Social Media Post", tool: "Adobe Photoshop", img: "static-02-azuri.jpg", blurb: "High-end property marketing graphic for Azuri Towers development at Eko Atlantic City." },
  { id: "p3", service: "static-graphics", title: "Azuri Towers Brand Post", tool: "Adobe Photoshop", img: "static-03-azuri.jpg", blurb: "Premium real estate branding visual for social media and digital marketing campaigns." },
  { id: "p4", service: "static-graphics", title: "Azuri Towers Property Feature", tool: "Adobe Photoshop", img: "static-04-azuri.jpg", blurb: "Property showcase graphic highlighting luxury amenities and architectural design." },
  { id: "p5", service: "static-graphics", title: "Fruvia Product Logo", tool: "Adobe Illustrator", img: "static-05-fruvia-logo.png", blurb: "Modern product logo design for Gadget Hack Central's Fruvia brand." },
  { id: "p6", service: "static-graphics", title: "SnapShade Brand Logo", tool: "Adobe Illustrator", img: "static-06-snapshade-logo.png", blurb: "Clean and professional logo design for SnapShade product line." },
  { id: "p7", service: "static-graphics", title: "Ampra Product Visual", tool: "Adobe Photoshop", img: "static-07-ampra-product.png", blurb: "Product photography and graphic design for Gadget Hack Central's Ampra device." },
  { id: "p8", service: "static-graphics", title: "Beyou3D Hat Clips Poster", tool: "Canva", img: "static-08-beyou3d.png", blurb: "Product marketing poster for Beyou3D's hat clip accessories." },
  { id: "p9", service: "static-graphics", title: "Nexzon Maritime Services Post", tool: "Adobe Photoshop", img: "static-09-nexzon.jpg", blurb: "Corporate social media graphic for Nexzon Global Maritime Services." },
  { id: "p10", service: "static-graphics", title: "Yovanni Solutions Company Profile", tool: "Adobe Photoshop", img: "static-10-yovanni-profile.jpg", blurb: "Professional company profile print mockup for Yovanni Solutions corporate branding." },
  { id: "p11", service: "static-graphics", title: "Aquox Nigeria Corporate Material", tool: "Adobe Photoshop", img: "static-11-aquox.jpg", blurb: "Mission statement graphic for Aquox Nigeria Ltd company profile documentation." },
  { id: "p12", service: "static-graphics", title: "Jita Edge Social Media Campaign", tool: "Canva", img: "static-12-jitaedge.jpg", blurb: "Brand social media visual for Jita Edge digital marketing campaigns." },
  { id: "p13", service: "static-graphics", title: "Jita Edge Brand Post", tool: "Canva", img: "static-13-jitaedge-2.jpg", blurb: "Secondary social media post design for Jita Edge brand communications." },
  { id: "p14", service: "static-graphics", title: "LandCulture Property Post", tool: "Adobe Photoshop", img: "static-14-landculture.jpg", blurb: "Real estate social media graphic for LandCulture property marketing." },
  { id: "p15", service: "static-graphics", title: "LandCulture Brand Visual", tool: "Adobe Photoshop", img: "static-15-landculture-2.jpg", blurb: "Professional property development branding for LandCulture social channels." },
  { id: "p16", service: "static-graphics", title: "Noble Space ARC Services", tool: "Canva", img: "static-16-noble.jpg", blurb: "Corporate social media poster for Noble Space ARC Services architecture firm." },
  { id: "p17", service: "static-graphics", title: "Heritage Autos Lamppost Banner", tool: "Adobe Photoshop", img: "static-17-heritage.jpg", blurb: "Outdoor print banner design for Heritage Autos street marketing campaign." },
  { id: "p18", service: "static-graphics", title: "Gaps Financial Rollup Banner", tool: "Adobe Photoshop", img: "static-18-gaps.jpg", blurb: "Professional rollup banner design for Gaps Financial corporate events." },
  { id: "p19", service: "static-graphics", title: "Igwe Homes Social Post", tool: "Canva", img: "static-19-igwe.jpg", blurb: "Property development social media post for Igwe Homes real estate marketing." },
  { id: "p20", service: "static-graphics", title: "AILE Power Trifold Flyer", tool: "Adobe Photoshop", img: "static-20-aile.jpg", blurb: "Print-ready trifold brochure design for AILE Power corporate communications." },
  // Motion
  { id: "p4", service: "motion-graphics", title: "Event Promo Motion", tool: "After Effects", mockup: 4, blurb: "Event promo motion graphic with logo sting, lower thirds, and a horizontal speed-line transition system." },
  { id: "p5", service: "motion-graphics", title: "Logo Sting · 3s",    tool: "After Effects", mockup: 5, blurb: "A 3-second logo sting following the brand's frame-by-frame motion spec — blue line wipe → build → pulse → hold." },
  // Presentations
  { id: "p6", service: "presentation-design", title: "Investor Briefing Deck", tool: "Keynote", mockup: 6, blurb: "A 24-slide investor briefing for a property launch — system-driven layouts, single-CTA close." },
  // Logo
  { id: "p7", service: "logo-creation", title: "UM Brand System",      tool: "Illustrator", mockup: 7, blurb: "Full identity build: monogram, wordmark, brand pattern, color, type, motion sting, and 40-page brand guide." },
  // Web
  { id: "p8", service: "web-design",    title: "PMDS Portfolio Site",  tool: "Framer",     mockup: 8, blurb: "A dark-mode Framer portfolio site for PMDS — Wix + Framer source available." },
  // UI/UX
  { id: "p9", service: "ui-ux",         title: "Facility Management Resident App", tool: "Figma", mockup: 9, blurb: "Full UI/UX design of the Azuri Towers Facility Management app — wireframes → Figma → developer handoff. Now in active use." },
  // Video
  { id: "p10", service: "video-production", title: "Drone Video Shoot & Edit", tool: "Premiere Pro", mockup: 1, blurb: "Full-property drone shoot and edit — DJI Air 2S, multi-pass, music-led cut." },
  { id: "p11", service: "video-production", title: "Professional Video Shoot", tool: "Premiere Pro", mockup: 2, blurb: "On-site brand film for a development launch — interview + B-roll, color-graded master." },
  // Marketing
  { id: "p12", service: "digital-marketing", title: "Azuri Towers Lead-Gen", tool: "Meta + Google", mockup: 3, blurb: "200% lift in qualified leads in 90 days. Meta Ads + Google Performance Max." },
  // Photography / videography
  { id: "p13", service: "photography-videography", title: "Drone Aerials — Lagos", tool: "DJI Air 2S", mockup: 4, blurb: "Drone aerial coverage of a coastal development — used across the brand's social and pitch surfaces." },
  { id: "p14", service: "photography-videography", title: "Editorial Portraits", tool: "Sony A7", mockup: 5, blurb: "Single-source B&W editorial portraits for the brand's personal mark — meets the photography treatment spec." },
  // Motion Graphics continued
  { id: "p36", service: "motion-graphics", title: "Reel End Card",      tool: "After Effects", mockup: 7, blurb: "End-card motion frame for short-form reels with logo, CTA, and a single speed-line." },
];

function Portfolio() {
  const services = [{ id: "all", title: "All work", n: "·" }, ...PMDS_SERVICES];
  const [filter, setFilter] = usePO("all");
  const [openId, setOpenId] = usePO(null);

  const visible = filter === "all"
    ? PROJECTS
    : PROJECTS.filter(p => p.service === filter);

  const openProj = openId ? PROJECTS.find(p => p.id === openId) : null;
  const serviceFor = (id) => PMDS_SERVICES.find(s => s.id === id);

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

      <PageHero
        kicker="Portfolio · Featured project"
        title="Featured"
        accent="project."
        lede="Hand-picked recent work across all nine services. Click a card to preview — open the full case study on the live Canva portfolio."
        stats={[
          { num: PROJECTS.length, lbl: "Projects shown" },
          { num: "30+", lbl: "Brands worldwide" },
          { num: "5",   lbl: "Years freelance" },
        ]}
      />

      {/* Filter chips */}
      <section className="um-container">
        <div className="ps-filters">
          {services.map(s => (
            <button key={s.id}
                    className={"ps-filter " + (filter === s.id ? "active" : "")}
                    onClick={() => setFilter(s.id)}>
              {s.title === "All work" ? s.title : s.title.replace(" Design","").replace(" Designs","")}
              {s.id !== "all" && <span style={{opacity:0.5, marginLeft:6}}>·{" "}
                {PROJECTS.filter(p => p.service === s.id).length}
              </span>}
            </button>
          ))}
        </div>

        <div className="ps-work-grid">
          {visible.map(p => (
            <article key={p.id} className="po-card"
                     onClick={() => setOpenId(p.id)}>
              <div className="po-cover">
                <img src={p.img ? `${RP}assets/portfolio/${p.img}` : `${RP}assets/mockups/mockup-${p.mockup}.png`} alt=""/>
                <span className="po-tool">{p.tool}</span>
                <button className="po-expand" aria-label="Expand"
                        onClick={(e)=>{ e.stopPropagation(); setOpenId(p.id); }}>
                  <UmIcon name="ico-arrow-up-right" size={18}/>
                </button>
              </div>
              <div className="po-meta">
                <div className="po-kicker">{(serviceFor(p.service) || {}).title}</div>
                <div className="po-title">{p.title}</div>
              </div>
            </article>
          ))}
        </div>
      </section>

      <PageCTA headline="Want yours in this" accent="archive?"/>

      <PageFooter/>

      {/* Expanded project drawer */}
      {openProj && (
        <div className="po-drawer-backdrop" onClick={() => setOpenId(null)}>
          <div className="po-drawer" onClick={e => e.stopPropagation()}>
            <button className="po-close" onClick={() => setOpenId(null)} aria-label="Close">
              <UmIcon name="ico-close" size={20}/>
            </button>
            <div className="po-drawer-cover">
              <img src={`${RP}assets/mockups/mockup-${openProj.mockup}.png`} alt=""/>
            </div>
            <div className="po-drawer-body">
              <PSLabel>{(serviceFor(openProj.service) || {}).kicker || "Project"}</PSLabel>
              <h3 className="po-drawer-title">
                {openProj.title} <span className="accent">case study</span>
              </h3>
              <p className="po-drawer-lede">{openProj.blurb}</p>

              <div className="po-meta-row">
                <div>
                  <div className="po-meta-lbl">Tool</div>
                  <div className="po-meta-val">{openProj.tool}</div>
                </div>
                <div>
                  <div className="po-meta-lbl">Service</div>
                  <div className="po-meta-val">{(serviceFor(openProj.service) || {}).title}</div>
                </div>
                <div>
                  <div className="po-meta-lbl">Year</div>
                  <div className="po-meta-val">2025</div>
                </div>
              </div>

              <div className="po-drawer-ctas">
                <a className="um-btn-primary" href={CANVA_PORTFOLIO} target="_blank" rel="noopener">
                  View full study <UmIcon name="ico-arrow-up-right" size={14}/>
                </a>
                <a className="um-btn-ghost" href={`../services/${openProj.service}.html`}>
                  Service page
                </a>
              </div>
            </div>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

window.Portfolio = Portfolio;