/* global React */
const { useState, useEffect } = React;

/* ---------- Inline icon helper (Lucide-style monoline SVGs) ---------- */
function Icon({ name, size = 18, stroke = 2, color = "currentColor" }) {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
                   stroke: color, strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    arrowRight:  <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    arrowUpRight:<><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></>,
    play:        <polygon points="6 4 20 12 6 20 6 4" fill={color}/>,
    sparkles:    <><path d="M12 3 L13.5 8.5 L19 10 L13.5 11.5 L12 17 L10.5 11.5 L5 10 L10.5 8.5 Z"/><path d="M18 17l.7 1.7L20.4 19.4l-1.7.7L18 21.8l-.7-1.7L15.6 19.4l1.7-.7z"/></>,
    layers:      <><polygon points="12 2 22 8.5 12 15 2 8.5 12 2"/><polyline points="2 15.5 12 22 22 15.5"/></>,
    grid:        <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></>,
    pen:         <><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><line x1="2" y1="2" x2="9.586" y2="9.586"/><circle cx="11" cy="11" r="2"/></>,
    star:        <polygon points="12 2 15 8.5 22 9.3 17 14 18.5 21 12 17.5 5.5 21 7 14 2 9.3 9 8.5"/>,
    instagram:   <><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.5" fill={color}/></>,
    linkedin:    <><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="8" y1="11" x2="8" y2="17"/><circle cx="8" cy="7.5" r="0.6" fill={color}/><path d="M12 17v-3a2 2 0 1 1 4 0v3"/><line x1="12" y1="11" x2="12" y2="17"/></>,
    behance:     <><path d="M2 6h6a3 3 0 0 1 0 6H2zM2 12h7a3 3 0 0 1 0 6H2zM14 12h8a4 4 0 0 0-8 0v2a4 4 0 0 0 8 0"/><line x1="15" y1="6" x2="21" y2="6"/></>,
    x:           <><line x1="4" y1="4" x2="20" y2="20"/><line x1="20" y1="4" x2="4" y2="20"/></>,
    mail:        <><rect x="3" y="5" width="18" height="14" rx="2"/><polyline points="3 7 12 13 21 7"/></>,
    phone:       <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z"/>,
  };
  return <svg {...common}>{paths[name] || null}</svg>;
}

/* ---------- Section Label ---------- */
function SectionLabel({ children }) {
  return (
    <span className="pw-label">
      <span className="dot"></span>
      {children}
    </span>
  );
}

/* ---------- Top Nav ---------- */
function Nav({ active = "home", onNav, onCTA }) {
  const links = [
    { id: "home",      label: "Home",      href: "index.html"           },
    { id: "services",  label: "Services",  href: "pages/services.html"  },
    { id: "portfolio", label: "Portfolio", href: "pages/portfolio.html" },
    { id: "about",     label: "About",     href: "pages/about.html"     },
    { id: "pricing",   label: "Pricing",   href: "pages/pricing.html"   },
    { id: "contact",   label: "Contact",   href: "pages/contact.html"   },
  ];
  return (
    <header className="pw-nav">
      <div className="pw-nav-inner">
        <a className="pw-nav-mark" href="index.html">
          <img className="mark" src="./assets/logos/transparent/iconmark-whiteblue.png" alt="UM"/>
          <span className="brand-name">UCHE MADUMERE</span>
        </a>
        <nav className="pw-nav-links">
          {links.map(l => (
            <a key={l.id} href={l.href} className={active===l.id ? "active" : ""}>
              {l.label}
            </a>
          ))}
        </nav>
        <a className="um-btn-primary" href="pages/order.html">
          Order now <Icon name="arrowRight" size={14}/>
        </a>
      </div>
    </header>
  );
}

/* ---------- CountUp ---------- */
function CountUp({ to, suffix = "", durationMs = 1600 }) {
  const [val, setVal] = useState(0);
  const [armed, setArmed] = useState(false);
  const ref = React.useRef(null);

  // Trigger when scrolled into view
  useEffect(() => {
    if (!ref.current || armed) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setArmed(true);
          io.disconnect();
        }
      });
    }, { threshold: 0.4 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [armed]);

  useEffect(() => {
    if (!armed) return;
    let raf = 0;
    const start = performance.now();
    const target = Number(to) || 0;
    const tick = (now) => {
      const t = Math.min(1, (now - start) / durationMs);
      const eased = 1 - Math.pow(1 - t, 3);
      setVal(Math.round(target * eased));
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [armed, to, durationMs]);

  return (
    <span ref={ref} className="pw-count">
      {val.toLocaleString()}{suffix && <span className="accent">{suffix}</span>}
    </span>
  );
}

/* ---------- Hero ---------- */
function Hero({ onCTA, onWork }) {
  return (
    <section id="home" className="pw-hero">
      <div className="um-container">
        <div className="pw-hero-grid">
          <div>
            <SectionLabel>Static & Motion Designer · PMDS</SectionLabel>
            <h1 className="pw-hero-title">
              Design that<br/>
              <span className="accent">moves.</span>
            </h1>
            <p className="pw-hero-sub">
              At <strong>PMDS</strong>, my freelance studio, I design beautifully digital experiences that help businesses shine online — supporting SMEs and real-estate teams with high-converting landing pages, professional video, and Meta ads.
            </p>
            <div className="pw-hero-ctas">
              <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">Book a call</a>
              <a className="um-btn-ghost" href="pages/portfolio.html">View portfolio</a>
            </div>
            <div className="pw-hero-meta">
              <div>
                <div className="stat-num"><CountUp to={5} suffix="+"/></div>
                <div className="stat-lbl">Years experience</div>
              </div>
              <div>
                <div className="stat-num"><CountUp to={300} suffix="+"/></div>
                <div className="stat-lbl">Projects shipped</div>
              </div>
              <div>
                <div className="stat-num"><CountUp to={30} suffix="+"/></div>
                <div className="stat-lbl">Brands worldwide</div>
              </div>
            </div>
          </div>
          <div className="pw-hero-portrait">
            <img className="frame" src="./assets/photography/uche-portrait.png" alt="Uche Madumere"/>
            <div className="badge pw-float">
              <div className="num">A+</div>
              <div className="lbl">Studio<br/>verified</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Icon, SectionLabel, Nav, Hero, CountUp });