/* global React, Icon, SectionLabel */
const { useState: useStateSections } = React;

/* ---------- Services (horizontal scrollable strip, 9 services) ---------- */
function Services({ selected, onSelect }) {
  const items = window.PMDS_SERVICES || [];
  const scrollRef = React.useRef(null);
  const scroll = (dir) => {
    const el = scrollRef.current;
    if (el) el.scrollBy({ left: dir * 340, behavior: "smooth" });
  };
  return (
    <section id="services" className="pw-section">
      <div className="um-container">
        <div className="pw-section-head">
          <div>
            <SectionLabel>Services</SectionLabel>
            <h2>My <span className="accent">specializations</span></h2>
          </div>
          <p className="pw-section-aside">
            Nine lanes, one studio. Click a card to view that service and its work.
          </p>
        </div>

        <div ref={scrollRef} className="pw-services-scroll">
          {items.map(it => (
            <a key={it.id} className="pw-service" href={`services/${it.id}.html`}>
              <div className="ico">
                <svg width="22" height="22" viewBox="0 0 24 24"><use href={`./assets/icons/um-icons.svg#${it.ico}`}/></svg>
              </div>
              <h3>{it.title}</h3>
              <p>{it.short || it.lede}</p>
              <div className="count-row">
                <span className="count">{it.countLabel}</span>
                <span className="view">View work
                  <svg width="14" height="14" viewBox="0 0 24 24"><use href="./assets/icons/um-icons.svg#ico-arrow-up-right"/></svg>
                </span>
              </div>
            </a>
          ))}
        </div>

        <div className="pw-scroll-hint">
          <span>Drag or use arrows · 9 services</span>
          <div className="arrows">
            <button onClick={() => scroll(-1)} aria-label="Previous">←</button>
            <button onClick={() => scroll(1)} aria-label="Next">→</button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Brand Marquee ---------- */
function BrandMarquee() {
  // Real engagements first, then generic 'partner' chips so the row reads full.
  const brands = [
    "1.png", "2.png", "3.png", "4.png", "5.png", "6.png",
    "7.png", "8.png", "9.png", "10.png", "11.png", "12.png"
  ];
  // Duplicate the list so the loop appears seamless.
  const loop = [...brands, ...brands];
  return (
    <section className="pw-brands" id="brands">
      <div className="lbl">Worked with 30+ brands worldwide</div>
      <div className="pw-marquee">
        {loop.map((logo, i) => (
          <div key={i} className="pw-brand-logo">
            <img src={`./assets/images/clients/${logo}?v=1`} alt="Client logo" />
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- Skills ---------- */
function Skills() {
  const items = [
    { ico: "Fg", color: "#FF5C8A", pct: "100%", nm: "Figma",       featured: true  },
    { ico: "Fr", color: "#00DCB4", pct: "85%",  nm: "Framer"       },
    { ico: "Wf", color: "#4FB7FF", pct: "92%",  nm: "Webflow"      },
    { ico: "Cv", color: "#00DCB4", pct: "100%", nm: "Canva"        },
    { ico: "Ae", color: "#D69CFF", pct: "80%",  nm: "After FX"     },
    { ico: "Ps", color: "#4FB7FF", pct: "100%", nm: "Photoshop"    },
    { ico: "Ai", color: "#FFA64F", pct: "80%",  nm: "Illustrator"  },
    { ico: "Pr", color: "#B8A2FF", pct: "100%", nm: "Premiere"     },
    { ico: "Id", color: "#FF5C8A", pct: "100%", nm: "InDesign"     },
    { ico: "Lr", color: "#4FB7FF", pct: "80%",  nm: "Lightroom"    },
    { ico: "Wp", color: "#21759B", pct: "100%", nm: "WordPress"    },
    { ico: "Sh", color: "#95BF47", pct: "100%", nm: "Shopify"      },
  ];
  return (
    <section id="skills" className="pw-section" style={{paddingTop:"40px"}}>
      <div className="um-container">
        <div className="pw-section-head">
          <div>
            <SectionLabel>Skills · 12 platforms</SectionLabel>
            <h2>My <span className="accent">advantages</span></h2>
          </div>
          <p className="pw-section-aside">
            Featured tool is highlighted in Signal Green — appears on exactly one skill, ever.
          </p>
        </div>
        <div className="pw-skills">
          {items.map((s, i) => (
            <div key={i} className={"pw-skill" + (s.featured ? " featured" : "")}>
              <div className="badge" style={{color: s.color}}>{s.ico}</div>
              <div className="pct">{s.pct}</div>
              <div className="nm">{s.nm}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Work ---------- */
function Work({ onOpen }) {
  const projects = [
    { k: "k1", title: "Azuri Towers Campaign",    tag: "Static · 2026",    img: "static-01-azuri-rental.jpg" },
    { k: "k2", title: "Gadget Hack Products",     tag: "Static · 2026",    img: "static-07-ampra-product.png" },
    { k: "k3", title: "Nexzon Maritime",          tag: "Static · 2026",    img: "static-09-nexzon.jpg" },
    { k: "k4", title: "Yovanni Solutions",        tag: "Static · 2026",    img: "static-10-yovanni-profile.jpg" },
  ];
  return (
    <section id="work" className="pw-section">
      <div className="um-container">
        <div className="pw-section-head">
          <div>
            <SectionLabel>Portfolio</SectionLabel>
            <h2>Featured <span className="accent">project</span></h2>
          </div>
          <a className="um-btn-ghost" href="pages/portfolio.html">
            View all portfolio <Icon name="arrowUpRight" size={14}/>
          </a>
        </div>
        <div className="pw-work-grid">
          {projects.map(p => (
            <div key={p.k} className="pw-work-card" onClick={() => onOpen(p)}>
              <div className="pw-work-cover">
                <img src={p.img ? `./assets/portfolio/${p.img}` : `./assets/mockups/mockup-${p.mockup}.png`} alt=""/>
              </div>
              <div className="pw-work-meta">
                <div>
                  <div className="tag">{p.tag}</div>
                  <div className="title">{p.title}</div>
                </div>
                <div className="arrow"><Icon name="arrowUpRight" size={16}/></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Testimonials (10 reviews, scrollable strip) ---------- */
function Testimonials() {
  const quotes = [
    { body: "Uche — A Designer with the creativity, professional and master of art. Much more than what I expected. High quality product & flexible price. Recommended!.",
      nm: "Adedapo Macaulay", ro: "Head, Business Development · Eko Development FZE" },
    { body: "As a lady, I love beauty. And that's what I got working with Mazon Designs",
      nm: "Ugo Jewe", ro: "Managing Director · Eko Dash Logistics" },
    { body: "Great quality and service. I have always wanted to work with a young and vibrant mind, and that's what I got.",
      nm: "Chika Daniel", ro: "Managing Director · Nexzon Global Maritime Services" },
    { body: "Uche Madumere completely transformed our website. The new design is clean, professional, and much easier for our customers to navigate. We've already seen better engagement since launch.",
      nm: "Uche Ndubuokwu", ro: "Chief Executive Officer · Brobags Limited" },
    { body: "From concept to launch, the process was smooth and well-organized. They understood our brand and delivered a website that looks premium and performs beautifully.",
      nm: "Eze Ndubuokwu", ro: "Managing Director · Starlight Synergy Limited" },
    { body: "Great quality and service. I have always wanted to work with a young and vibrant mind, and that's what I got.",
      nm: "Odili Jeffery", ro: "Sales Executive · Cevon Edge Limited" },
    { body: "We came in with ideas but no clear structure. Uche Madumere turned everything into a visually appealing, user-friendly website that truly represents our business",
      nm: "Tare", ro: "Managing Director · Borat Global Limited" },
    { body: "What stood out most was their communication and attention to detail. Deadlines were met, feedback was handled quickly, and the final website exceeded our expectations.",
      nm: "Justice Ediri", ro: "Managing Director · Tripocean Limited" },
    { body: "Our website is now mobile-friendly, fast, and easy to manage. The team also provided helpful guidance even after the site went live, which we really appreciated.",
      nm: "Robert Keshun Turner", ro: "Founder · Beyou3D" },
    { body: "They captured our brand voice perfectly and translated it into a website that feels modern and trustworthy. Working with them was easy from start to finish.",
      nm: "Sean Okeke", ro: "Partner · Gadget Hack Central LLC" },
  ];
  const scrollRef = React.useRef(null);
  const scroll = (dir) => {
    const el = scrollRef.current;
    if (el) el.scrollBy({ left: dir * 460, behavior: "smooth" });
  };
  return (
    <section id="testimonials" className="pw-section" style={{paddingTop:"40px"}}>
      <div className="um-container">
        <div className="pw-section-head">
          <div>
            <SectionLabel>Testimonials · 10 reviews</SectionLabel>
            <h2>Trusted by many <span className="accent">clients</span></h2>
          </div>
          <a className="um-btn-ghost" href="https://pixelmazondesignstudio.my.canva.site/portfolio" target="_blank" rel="noopener">
            See portfolio <Icon name="arrowUpRight" size={14}/>
          </a>
        </div>

        <div ref={scrollRef} className="pw-test-scroll">
          {quotes.map((q,i) => (
            <div key={i} className="pw-test">
              <div className="stars">★ ★ ★ ★ ★</div>
              <div className="body">"{q.body}"</div>
              <div className="who">
                <div className="av"></div>
                <div><div className="nm">{q.nm}</div><div className="ro">{q.ro}</div></div>
              </div>
            </div>
          ))}
        </div>

        <div className="pw-scroll-hint">
          <span>Drag or use arrows · 10 reviews</span>
          <div className="arrows">
            <button onClick={() => scroll(-1)} aria-label="Previous">←</button>
            <button onClick={() => scroll(1)} aria-label="Next">→</button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Pricing ---------- */
function Pricing({ onPick }) {
  const plans = [
    { id: "starter", lbl: "Starter",  nm: "Single asset",   v: "$120",  s: "/ asset",
      list: ["1 design output", "2 revision rounds", "72-hour TAT", "Web + print formats"], cta: "Start" },
    { id: "studio",  lbl: "Studio",   nm: "Monthly retainer", v: "$1.2k", s: "/ month", featured: true,
      list: ["Unlimited static", "2 motion reels", "Brand pass review", "Async Slack channel"], cta: "Book a call" },
    { id: "brand",   lbl: "Identity", nm: "Brand build",    v: "$4.5k", s: "/ project",
      list: ["Logo system", "Guidelines doc", "Motion sting", "Launch collateral"], cta: "Inquire" },
  ];
  return (
    <section id="pricing" className="pw-section">
      <div className="um-container">
        <div className="pw-section-head">
          <div>
            <SectionLabel>Engagement</SectionLabel>
            <h2>Pricing that <span className="accent">scales</span></h2>
          </div>
          <p className="pw-section-aside">
            Three lanes, transparent rates. Custom scope welcome on the Studio plan.
          </p>
        </div>
        <div className="pw-pricing">
          {plans.map(p => (
            <div key={p.id} className={"pw-plan" + (p.featured ? " featured" : "")}>
              <div>
                <div className="lbl">{p.lbl}</div>
                <div className="nm">{p.nm}</div>
              </div>
              <div className="pr"><span className="v">{p.v}</span><span className="s">{p.s}</span></div>
              <ul>{p.list.map((x,i)=> <li key={i}>{x}</li>)}</ul>
              {p.featured
                ? <a className="um-btn-primary" href="pages/order.html">{p.cta} <Icon name="arrowRight" size={14}/></a>
                : <a className="um-btn-ghost"   href="pages/pricing.html">{p.cta}</a>}
            </div>
          ))}
        </div>
        <div style={{marginTop: 28, textAlign: "center"}}>
          <a className="um-btn-ghost" href="pages/pricing.html">
            View all 10 services & full pricing <Icon name="arrowRight" size={14}/>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- CTA + Footer ---------- */
function CTABand({ onCTA }) {
  return (
    <section id="contact" className="pw-section" style={{paddingTop:"40px"}}>
      <div className="pw-cta">
        <img className="um-monogram-bg" src="./assets/logos/iconmark-white-on-black.png" alt=""/>
        <SectionLabel>Let's work together</SectionLabel>
        <h2>Got a brand worth <span className="accent">moving?</span></h2>
        <div className="row">
          <a className="um-btn-primary" href="pages/order.html">Order now <Icon name="arrowRight" size={14}/></a>
          <a className="um-btn-ghost" href="pages/book-appointment.html"><Icon name="calendar" size={14}/> &nbsp; Book a call</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="pw-footer">
      <div className="um-container">
        <div className="pw-footer-row">
          <div className="pw-footer-mark">
            <div style={{display:"flex", alignItems:"center", gap:14, marginBottom: 14}}>
              <img src="./assets/logos/transparent/iconmark-whiteblue.png" alt="UM" style={{height:42}}/>
              <span style={{fontFamily:"var(--font-display)", fontWeight:700, fontSize:22,
                            color:"#fff", textTransform:"uppercase", letterSpacing:"0.04em"}}>
                UCHE MADUMERE
              </span>
            </div>
            <p>Graphic & Motion Designer. Mississauga, Ontario, Canada. Available worldwide.</p>
          </div>
          <div className="pw-footer-cols">
            <div className="pw-footer-col">
              <h4>Navigate</h4>
              <a href="index.html">Home</a>
              <a href="pages/services.html">Services</a>
              <a href="pages/portfolio.html">Portfolio</a>
              <a href="pages/pricing.html">Pricing</a>
              <a href="pages/about.html">About</a>
            </div>
            <div className="pw-footer-col">
              <h4>Connect</h4>
              <a href="https://www.instagram.com/nativenerd_" target="_blank" rel="noopener"><Icon name="instagram" size={12}/> &nbsp; Instagram</a>
              <a href="https://www.linkedin.com/in/samuell-madumereee-67b04833/" target="_blank" rel="noopener"><Icon name="linkedin" size={12}/> &nbsp; LinkedIn</a>
              <a href="https://pixelmazondesignstudio.my.canva.site/portfolio" target="_blank" rel="noopener"><Icon name="behance" size={12}/> &nbsp; Canva Portfolio</a>
              <a href="https://github.com/Nativenerd1004" target="_blank" rel="noopener"><Icon name="x" size={12}/> &nbsp; GitHub</a>
            </div>
            <div className="pw-footer-col">
              <h4>Contact</h4>
              <a href="mailto:pixelmazondesignstudio@gmail.com"><Icon name="mail" size={12}/> &nbsp; pixelmazondesignstudio@gmail.com</a>
              <a href="tel:+14377723266"><Icon name="phone" size={12}/> &nbsp; +1 (437) 772 3266</a>
            </div>
          </div>
        </div>
        <div className="pw-footer-bot">
          <span>© 2026 PMDS · ALL RIGHTS RESERVED</span>
          <span>DESIGN THAT MOVES · V1.0</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Side Rail (in-page section nav) ---------- */
function SideRail({ sections, active }) {
  return (
    <nav className="pw-rail">
      {sections.map(s => (
        <a key={s.id} href={"#" + s.id}
           className={active === s.id ? "active" : ""}>
          <span className="tip">{s.label}</span>
        </a>
      ))}
    </nav>
  );
}

Object.assign(window, { Services, Skills, Work, Testimonials, Pricing, CTABand, Footer, SideRail, BrandMarquee });