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

// ============================================================
// Inline icons (Lucide subset, 24px, 1.5 stroke)
// ============================================================
const Icon = ({ name, size = 20, ...rest }) => {
  const paths = {
    "sparkles": <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/>,
    "arrow-right": <path d="M5 12h14M12 5l7 7-7 7"/>,
    "check": <path d="M20 6 9 17l-5-5"/>,
    "shield": <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>,
    "zap": <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>,
    "panel-right": <g><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M15 3v18"/></g>,
    "layout-grid": <g><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18M3 9h18"/></g>,
    "video": <g><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2"/></g>,
    "gantt": <path d="M3 6h12M7 12h14M11 18h10"/>,
    "lock": <g><rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></g>,
    "clock": <g><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></g>,
    "users": <g><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></g>,
    "menu": <path d="M3 12h18M3 6h18M3 18h18"/>,
    "x": <path d="M18 6 6 18M6 6l12 12"/>,
    "twitter": <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>,
    "github": <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4M9 18c-4.51 2-5-2-7-2"/>,
    "linkedin": <g><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></g>,
    "cube": <g><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="m3.3 7 8.7 5 8.7-5M12 22V12"/></g>,
    "settings": <g><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></g>,
    "rocket": <g><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></g>,
    "trending-up": <g><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></g>,
    "globe": <g><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></g>,
    "mail": <g><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></g>,
    "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.72 12.84 12.84 0 0 0 .7 2.81 2 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-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>,
    "message-square": <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>,
    "calendar": <g><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></g>,
    "star": <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>,
    "heart": <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z"/>,
    "trophy": <g><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></g>,
    "target": <g><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></g>,
    "bar-chart": <g><line x1="12" x2="12" y1="20" y2="10"/><line x1="18" x2="18" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="16"/></g>,
    "database": <g><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5"/><path d="M3 12a9 3 0 0 0 18 0"/></g>,
    "play": <polygon points="6 3 20 12 6 21 6 3"/>,
    "briefcase": <g><rect width="20" height="14" x="2" y="7" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></g>,
    "building": <g><rect width="16" height="20" x="4" y="2" rx="2"/><path d="M9 22v-4h6v4M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01"/></g>,
    "external-link": <g><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></g>,
    "award": <g><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/></g>,
  };
  return <svg className="icon" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...rest}>{paths[name]}</svg>;
};

// ============================================================
// BrandIcon — real Microsoft / Power Platform product logos from local
// Images/ folder. Falls back to a generic gradient initials tile for any
// brand we don't have a real PNG/SVG for yet. No external CDNs.
// ============================================================
const BRAND_IMG = {
  "d365":           "Images/d365-crm-icon.png",
  "power-apps":     "Images/powerapp-2020-icon-1024x1024.png",
  "power-automate": "Images/PowerAutomate-2020-icon-1024x1024.png",
  "power-bi":       "Images/powerbi-2020-icon-768x768.png",
  "power-pages":    "Images/PP-Hero_Icon_PowerPages.svg",
  "azure":          "Images/1280px-Microsoft_Azure.svg.png",
  "copilot":        "Images/copilot-icon.png",
  "ai-agents":      "Images/ai-agent-icon.png",
  "pcf":            "Images/pcf-control-icon.png",
  "ms-certified":   "Images/microsoft-certified-professional-certification-microsoft-office-365-microsoft-dynamics-microsoft-3065b9dc32e233e4c2b77ac0b41b3005.png",
};

const BrandIcon = ({ name, size = 40, alt }) => {
  const src = BRAND_IMG[name];
  if (src) {
    return (
      <img
        src={src}
        alt={alt || name}
        loading="lazy"
        width={size}
        height={size}
        style={{ width: size, height: size, objectFit: 'contain', display: 'block' }}
      />
    );
  }
  // Generic gradient-tile fallback for icons without a local PNG (e.g. pcf).
  const initials = (name || '').split('-').map((s) => s[0]).join('').toUpperCase().slice(0, 2);
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: size, height: size, borderRadius: Math.round(size * 0.22),
      background: 'linear-gradient(135deg, var(--accent), var(--accent-hover))',
      color: '#FFF', fontWeight: 700,
      fontSize: Math.max(11, Math.round(size * 0.36)),
      letterSpacing: '0.04em',
      fontFamily: 'var(--font-display)',
    }}>{initials}</span>
  );
};

// ============================================================
// (legacy) inline-SVG BrandIcon kept as _BrandIconSVG for reference.
// Not exported — the active BrandIcon above uses local image files instead.
// ============================================================
const _BrandIconSVG = ({ name, size = 32 }) => {
  const w = size, h = size;
  const marks = {
    "d365": (
      <svg viewBox="0 0 48 48" width={w} height={h} fill="none">
        <rect width="48" height="48" rx="8" fill="#002050"/>
        <path d="M13 12h14c5.523 0 10 4.477 10 10s-4.477 10-10 10H13V12zm5 5v10h9c2.761 0 5-2.239 5-5s-2.239-5-5-5h-9z" fill="#fff"/>
      </svg>
    ),
    "power-apps": (
      <svg viewBox="0 0 48 48" width={w} height={h} fill="none">
        <rect width="48" height="48" rx="8" fill="#742774"/>
        <path d="M24 9L12 33h7l5-11 5 11h7L24 9z" fill="#fff"/>
      </svg>
    ),
    "power-automate": (
      <svg viewBox="0 0 48 48" width={w} height={h} fill="none">
        <rect width="48" height="48" rx="8" fill="#0066FF"/>
        <path d="M17 11l12 7-12 7v4l16-10-16-10v2z" fill="#fff"/>
        <circle cx="14" cy="34" r="4" fill="#fff"/>
      </svg>
    ),
    "power-bi": (
      <svg viewBox="0 0 48 48" width={w} height={h} fill="none">
        <rect width="48" height="48" rx="8" fill="#F2C811"/>
        <rect x="14" y="22" width="4" height="14" rx="1.5" fill="#000"/>
        <rect x="22" y="14" width="4" height="22" rx="1.5" fill="#000"/>
        <rect x="30" y="18" width="4" height="18" rx="1.5" fill="#000"/>
      </svg>
    ),
    "azure": (
      <svg viewBox="0 0 48 48" width={w} height={h} fill="none">
        <rect width="48" height="48" rx="8" fill="#0078D4"/>
        <path d="M19 11L9 36h9l2-5 10 5h9L26 11h-7zm2 7l7 12H17l4-12z" fill="#fff"/>
      </svg>
    ),
    "azure-openai": (
      <svg viewBox="0 0 48 48" width={w} height={h} fill="none">
        <rect width="48" height="48" rx="8" fill="#10A37F"/>
        <path d="M24 11c-4.97 0-9 3.8-9 8.5v.6c-2.5 1-4.5 3.6-4.5 6.7 0 3.9 3.1 7 7 7H35c4 0 7.5-3.3 7.5-7.5 0-3.1-2-5.8-4.7-6.9.2-4.7-3.7-8.4-8.8-8.4h-5zm-1.5 6h3v12h-3V17zm-4.5 7.5h12v3h-12v-3z" fill="#fff"/>
      </svg>
    ),
    "ai-builder": (
      <svg viewBox="0 0 48 48" width={w} height={h} fill="none">
        <rect width="48" height="48" rx="8" fill="#243A5E"/>
        <path d="M24 9l-6 12H8l7.5 6-3 12L24 31l11.5 8-3-12L40 21h-10L24 9z" fill="#fff"/>
      </svg>
    ),
    "copilot": (
      <svg viewBox="0 0 48 48" width={w} height={h} fill="none">
        <rect width="48" height="48" rx="8" fill="url(#copilot-grad)"/>
        <defs>
          <linearGradient id="copilot-grad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#26C6DA"/>
            <stop offset="1" stopColor="#0F6CBD"/>
          </linearGradient>
        </defs>
        <path d="M33 24c0-5-4-9-9-9s-9 4-9 9c0 2 .6 3.8 1.7 5.2C14.7 30 13.5 31.8 13.5 34c0 2.8 2.5 5 5.2 5h10.6c2.7 0 5.2-2.2 5.2-5 0-2.2-1.2-4-3.2-4.8 1-1.4 1.7-3.2 1.7-5.2z" fill="#fff"/>
        <circle cx="20.5" cy="22.5" r="1.7" fill="#0F6CBD"/>
        <circle cx="27.5" cy="22.5" r="1.7" fill="#0F6CBD"/>
      </svg>
    ),
    "dataverse": (
      <svg viewBox="0 0 48 48" width={w} height={h} fill="none">
        <rect width="48" height="48" rx="8" fill="#4F347A"/>
        <ellipse cx="24" cy="14.5" rx="10" ry="3.5" fill="#fff"/>
        <path d="M14 14.5v19c0 1.9 4.5 3.5 10 3.5s10-1.6 10-3.5v-19" stroke="#fff" strokeWidth="2" fill="none"/>
        <path d="M14 24c0 1.9 4.5 3.5 10 3.5s10-1.6 10-3.5" stroke="#fff" strokeWidth="2" fill="none"/>
      </svg>
    ),
    "sharepoint": (
      <svg viewBox="0 0 48 48" width={w} height={h} fill="none">
        <rect width="48" height="48" rx="8" fill="#038387"/>
        <circle cx="19" cy="19" r="8" fill="#fff"/>
        <circle cx="30" cy="30" r="6.5" fill="#038387" stroke="#fff" strokeWidth="2"/>
      </svg>
    ),
    "teams": (
      <svg viewBox="0 0 48 48" width={w} height={h} fill="none">
        <rect width="48" height="48" rx="8" fill="#4B53BC"/>
        <rect x="11" y="17" width="16" height="16" rx="3" fill="#fff"/>
        <text x="19" y="28" fontFamily="sans-serif" fontWeight="bold" fontSize="10" fill="#4B53BC" textAnchor="middle">T</text>
        <circle cx="33" cy="18" r="4" fill="#fff"/>
      </svg>
    ),
    "pcf": (
      <svg viewBox="0 0 48 48" width={w} height={h} fill="none">
        <rect width="48" height="48" rx="8" fill="#1A1A1A"/>
        <path d="M12 12h8c3.7 0 7 2.7 7 6.5s-3.3 6.5-7 6.5h-2.5V36H12V12zm5 5v5h3c1.1 0 2-.9 2-2.5S21.1 17 20 17h-3zM30 12h4v24h-4z" fill="#fff"/>
      </svg>
    ),
    "ai-agents": (
      <svg viewBox="0 0 48 48" width={w} height={h} fill="none">
        <rect width="48" height="48" rx="8" fill="url(#ai-agent-grad)"/>
        <defs>
          <linearGradient id="ai-agent-grad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#4F46E5"/>
            <stop offset="1" stopColor="#EC4899"/>
          </linearGradient>
        </defs>
        <circle cx="24" cy="20" r="6" fill="#fff"/>
        <circle cx="21" cy="19" r="1.2" fill="#4F46E5"/>
        <circle cx="27" cy="19" r="1.2" fill="#4F46E5"/>
        <path d="M19.5 22.5c.8 1.2 2.2 2 4.5 2s3.7-.8 4.5-2" stroke="#4F46E5" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
        <rect x="16" y="30" width="16" height="6" rx="2" fill="#fff"/>
        <circle cx="20" cy="33" r="1.2" fill="#EC4899"/>
        <circle cx="28" cy="33" r="1.2" fill="#EC4899"/>
        <line x1="24" y1="13" x2="24" y2="9" stroke="#fff" strokeWidth="2" strokeLinecap="round"/>
        <circle cx="24" cy="7.5" r="1.5" fill="#fff"/>
      </svg>
    ),
  };
  return marks[name] || null;
};

// ============================================================
// AnimatedCounter — counts up from 0 to a target when scrolled into view.
// `value` accepts a number OR a string with a numeric prefix and a suffix
// (e.g. "60s", "3 hrs", "14+", "99.9%"). Non-numeric values render as-is.
// ============================================================
const AnimatedCounter = ({ value, duration = 1400 }) => {
  const ref = React.useRef(null);
  const [display, setDisplay] = React.useState(value);
  const ran = React.useRef(false);

  React.useEffect(() => {
    const m = String(value).match(/^(\D*)(-?[\d,.]+)(.*)$/);
    if (!m) { setDisplay(value); return; }
    const prefix = m[1];
    const target = parseFloat(m[2].replace(/,/g, ''));
    const suffix = m[3];
    if (Number.isNaN(target)) { setDisplay(value); return; }

    const decimals = (m[2].split('.')[1] || '').length;
    const fmt = (n) => {
      const fixed = decimals ? n.toFixed(decimals) : Math.round(n).toString();
      // re-add thousand separators if original had them
      const withCommas = m[2].includes(',')
        ? Number(fixed).toLocaleString('en-US', { minimumFractionDigits: decimals, maximumFractionDigits: decimals })
        : fixed;
      return prefix + withCommas + suffix;
    };

    setDisplay(fmt(0));

    const start = () => {
      if (ran.current) return;
      ran.current = true;
      const t0 = performance.now();
      const tick = (now) => {
        const p = Math.min(1, (now - t0) / duration);
        // ease-out cubic
        const eased = 1 - Math.pow(1 - p, 3);
        setDisplay(fmt(target * eased));
        if (p < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    };

    const el = ref.current;
    if (!el || typeof IntersectionObserver === 'undefined') { start(); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { start(); io.disconnect(); } });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [value, duration]);

  return <span ref={ref}>{display}</span>;
};

// ============================================================
// ScrollProgress — thin gradient bar at the top tracking page scroll.
// Mounts once, uses requestAnimationFrame to avoid layout thrash.
// ============================================================
const ScrollProgress = () => {
  const [pct, setPct] = React.useState(0);
  React.useEffect(() => {
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        const h = document.documentElement;
        const scrolled = h.scrollTop || document.body.scrollTop;
        const max = (h.scrollHeight - h.clientHeight) || 1;
        setPct(Math.min(100, Math.max(0, (scrolled / max) * 100)));
        raf = null;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className="scroll-progress" aria-hidden="true">
      <div className="scroll-progress-bar" style={{ width: pct + '%' }}/>
    </div>
  );
};

// ============================================================
// Site Header
// ============================================================
const SiteHeader = ({ route, go }) => {
  const [scrolled, setScrolled] = useState(false);
  const [productsOpen, setProductsOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const closeTimer = React.useRef(null);
  useEffect(() => {
    const root = document.querySelector('.site-scroll') || window;
    const onScroll = () => {
      const y = root === window ? window.scrollY : root.scrollTop;
      setScrolled(y > 80);
    };
    root.addEventListener('scroll', onScroll);
    return () => root.removeEventListener('scroll', onScroll);
  }, []);
  // Track viewport so the toggle only renders below the mobile breakpoint
  const [isMobile, setIsMobile] = useState(
    typeof window !== 'undefined' ? window.innerWidth <= 768 : false
  );
  useEffect(() => {
    const onResize = () => {
      const m = window.innerWidth <= 768;
      setIsMobile(m);
      if (!m) setMobileOpen(false);
    };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  // Lock body scroll while drawer is open
  useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);
  const linkCls = (r) => "nav-link" + (route === r ? " active" : "");
  const openMenu = () => { clearTimeout(closeTimer.current); setProductsOpen(true); };
  const closeMenu = () => { closeTimer.current = setTimeout(() => setProductsOpen(false), 120); };
  // Close drawer + dropdown on navigation
  const navGo = (r) => { setMobileOpen(false); setProductsOpen(false); go(r); };
  return (
    <header className={"site-header" + (scrolled ? " scrolled" : "")}>
      <div className="container row">
        <a className="logo" href="#" onClick={(e) => { e.preventDefault(); navGo('home'); }}>
          <svg className="logo-mark" viewBox="0 0 64 64">
            <rect width="64" height="64" rx="14" fill="var(--accent)"/>
            <path d="M18 18 L18 46 Q18 46 32 46 Q46 46 46 32 Q46 18 32 18 Z" fill="#FFFFFF"/>
            <circle cx="36" cy="32" r="5" fill="var(--accent)"/>
          </svg>
          <span className="logo-text">Dynawins</span>
        </a>
        {isMobile && (
          <button
            type="button"
            className="nav-toggle"
            aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={mobileOpen}
            onClick={(e) => { e.preventDefault(); e.stopPropagation(); setMobileOpen((v) => !v); }}
          >
            {mobileOpen ? (
              <svg width="20" height="20" viewBox="0 0 24 24">
                <path d="M18 6 6 18M6 6l12 12"/>
              </svg>
            ) : (
              <svg width="20" height="20" viewBox="0 0 24 24">
                <path d="M3 6h18M3 12h18M3 18h18"/>
              </svg>
            )}
          </button>
        )}
        {isMobile && mobileOpen && (
          <div
            className="nav-backdrop open"
            onClick={() => { setMobileOpen(false); setProductsOpen(false); }}
            aria-hidden="true"
          />
        )}
        <nav className={isMobile && mobileOpen ? 'open' : ''}>
          <a className={linkCls('home')} href="#" onClick={(e) => { e.preventDefault(); navGo('home'); }}>Home</a>
          <div
            className="nav-products"
            onMouseEnter={openMenu}
            onMouseLeave={closeMenu}
            style={{ position: 'relative', display: 'inline-block' }}
          >
            <button
              type="button"
              className={"nav-link" + (productsOpen || route === 'product' ? " active" : "")}
              onClick={() => setProductsOpen((v) => !v)}
              style={{ background: 'none', border: 0, padding: 0, font: 'inherit', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4 }}
              aria-haspopup="true"
              aria-expanded={productsOpen}
            >
              Products
              <svg width="10" height="10" viewBox="0 0 10 10" style={{ transition: 'transform .2s', transform: productsOpen ? 'rotate(180deg)' : 'none' }}>
                <path d="M2 3.5 L5 6.5 L8 3.5" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
            {productsOpen && (
              <div
                onMouseEnter={openMenu}
                onMouseLeave={closeMenu}
                style={{
                  position: 'absolute', top: 'calc(100% + 12px)', left: '50%', transform: 'translateX(-50%)',
                  background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 14,
                  boxShadow: '0 12px 32px rgba(15,23,42,.12)', padding: 12, width: 360, zIndex: 100,
                }}
              >
                <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: '#4F46E5', padding: '4px 10px 8px' }}>AI category</div>
                <a href="#" onClick={(e) => { e.preventDefault(); navGo('product'); }} style={menuItem}>
                  <div style={{ width: 36, height: 36, borderRadius: 9, background: '#4F46E5', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#FFF', flexShrink: 0 }}>
                    <Icon name="sparkles" size={18}/>
                  </div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--ink-1)' }}>Smart Panel AI</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-4)', marginTop: 2 }}>AI side panel for D365 records</div>
                  </div>
                </a>
                <div style={{ height: 1, background: 'var(--border)', margin: '8px 10px' }}></div>
                <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--ink-4)', padding: '4px 10px 8px' }}>Productivity controls</div>
                <a href="#" onClick={(e) => { e.preventDefault(); navGo('kanban'); }} style={menuItem}>
                  <div style={{ width: 36, height: 36, borderRadius: 9, background: '#0F6CBD', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#FFF', flexShrink: 0 }}>
                    <Icon name="layout-grid" size={18}/>
                  </div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--ink-1)' }}>Kanban Board</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-4)', marginTop: 2 }}>Drag-and-drop Kanban for any view</div>
                  </div>
                </a>
                <a href="#" onClick={(e) => { e.preventDefault(); navGo('video'); }} style={menuItem}>
                  <div style={{ width: 36, height: 36, borderRadius: 9, background: '#0A0A0A', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#FFF', flexShrink: 0 }}>
                    <Icon name="video" size={18}/>
                  </div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--ink-1)' }}>Video Playlist</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-4)', marginTop: 2 }}>Embed sequenced video in forms</div>
                  </div>
                </a>
                <a href="#" onClick={(e) => { e.preventDefault(); navGo('gantt'); }} style={menuItem}>
                  <div style={{ width: 36, height: 36, borderRadius: 9, background: '#15803D', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#FFF', flexShrink: 0 }}>
                    <Icon name="gantt" size={18}/>
                  </div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--ink-1)' }}>Gantt Chart <span style={{ fontSize: 10, fontWeight: 700, background: '#FEF3C7', color: '#A16207', padding: '1px 6px', borderRadius: 999, marginLeft: 4, verticalAlign: 'middle' }}>BETA</span></div>
                    <div style={{ fontSize: 12, color: 'var(--ink-4)', marginTop: 2 }}>Project timelines with dependencies</div>
                  </div>
                </a>
              </div>
            )}
          </div>
          <a className={linkCls('pricing')} href="#" onClick={(e) => { e.preventDefault(); navGo('pricing'); }}>Pricing</a>
          <a className={linkCls('blog')} href="#" onClick={(e) => { e.preventDefault(); navGo('blog'); }}>Blog</a>
          <a className={linkCls('contact')} href="#" onClick={(e) => { e.preventDefault(); navGo('contact'); }}>Contact</a>
          <a className="btn btn-primary btn-sm" href="#" onClick={(e) => { e.preventDefault(); navGo('contact'); }}>Book a demo</a>
        </nav>
      </div>
    </header>
  );
};

const menuItem = {
  display: 'flex', alignItems: 'center', gap: 12, padding: '10px',
  borderRadius: 10, textDecoration: 'none', transition: 'background .15s',
};

// ============================================================
// Footer
// ============================================================
const SiteFooter = ({ go }) => (
  <footer className="site-footer">
    <div className="container">
      <div className="site-footer-grid">
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
            <svg width="28" height="28" viewBox="0 0 64 64">
              <rect width="64" height="64" rx="14" fill="var(--accent)"/>
              <path d="M18 18 L18 46 Q18 46 32 46 Q46 46 46 32 Q46 18 32 18 Z" fill="#FFFFFF"/>
              <circle cx="36" cy="32" r="5" fill="var(--accent)"/>
            </svg>
            <span style={{ color: '#FFF', fontWeight: 700, fontSize: 17, letterSpacing: '-0.01em' }}>Dynawins</span>
          </div>
          <p style={{ fontSize: 14, color: '#9e9595ef', lineHeight: 1.6, maxWidth: 320 }}>End-to-end Microsoft Power Platform partner — Dynamics 365, Power Apps, AI &amp; Copilot, automation, code apps, and our own line of productivity products.</p>
        </div>
        <div>
          <h4>Products</h4>
          <ul>
            <li><a href="#" onClick={(e) => { e.preventDefault(); go('product'); }}>Smart Panel AI</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); go('kanban'); }}>Kanban Board</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); go('video'); }}>Video Playlist</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); go('gantt'); }}>Gantt Chart</a></li>
          </ul>
        </div>
        <div>
          <h4>Company</h4>
          <ul>
            <li><a href="#" onClick={(e) => { e.preventDefault(); go('blog'); }}>Blog</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); go('pricing'); }}>Pricing</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); go('contact'); }}>Contact</a></li>
          </ul>
        </div>
        <div>
          <h4>Legal</h4>
          <ul>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">DPA</a></li>
          </ul>
        </div>
      </div>
      <div className="site-footer-bottom">
        <span>© 2026 Dynawins. All rights reserved.</span>
        <span style={{ display: 'flex', gap: 16 }}>
          <a href="#"><Icon name="twitter" size={16}/></a>
          <a href="#"><Icon name="github" size={16}/></a>
          <a href="#"><Icon name="linkedin" size={16}/></a>
        </span>
      </div>
    </div>
  </footer>
);

// ============================================================
// WhatsApp FAB
// ============================================================
const WhatsAppFAB = () => (
  <a className="whatsapp-fab" href="https://wa.me/9511804590" target="_blank" rel="noopener" title="Chat on WhatsApp">
    <svg viewBox="0 0 24 24"><path d="M17.6 6.32A7.85 7.85 0 0 0 12.04 4 7.94 7.94 0 0 0 4 12c0 1.4.37 2.78 1.07 3.99L4 20l4.13-1.05A7.94 7.94 0 0 0 12.04 20 7.94 7.94 0 0 0 20 12c0-2.12-.83-4.12-2.4-5.68Zm-5.56 12.2a6.6 6.6 0 0 1-3.36-.92l-.24-.14-2.45.62.65-2.39-.16-.25a6.6 6.6 0 0 1-1-3.44A6.6 6.6 0 0 1 12.04 5.4 6.6 6.6 0 0 1 18.6 12a6.6 6.6 0 0 1-6.56 6.52Zm3.6-4.93c-.2-.1-1.17-.58-1.35-.64-.18-.07-.31-.1-.45.1-.13.2-.5.64-.62.77-.11.13-.23.15-.43.05a5.4 5.4 0 0 1-1.6-.99 6 6 0 0 1-1.1-1.37c-.12-.2 0-.31.09-.41.1-.1.2-.23.3-.34.1-.12.13-.2.2-.34.06-.13.03-.25-.02-.35-.05-.1-.45-1.08-.62-1.48-.16-.39-.33-.34-.45-.34l-.39-.01a.75.75 0 0 0-.54.25 2.27 2.27 0 0 0-.71 1.69c0 1 .73 1.96.83 2.1.1.13 1.43 2.18 3.46 3.06a11.7 11.7 0 0 0 1.16.43c.49.16.93.13 1.28.08.39-.06 1.17-.48 1.34-.94.16-.46.16-.86.11-.94-.05-.08-.18-.13-.39-.23Z"/></svg>
  </a>
);

// ============================================================
// D365 mock UI (used in hero + product page)
// ============================================================
const D365Mock = () => (
  <div className="browser">
    <div className="browser-bar">
      <span className="browser-dot r"></span><span className="browser-dot y"></span><span className="browser-dot g"></span>
      <div className="browser-url">org.crm.dynamics.com / accounts / Contoso Ltd</div>
    </div>
    <div className="browser-body">
      <div className="d365">
        <div className="d365-nav">
          <div className="item"><Icon name="layout-grid" size={14}/> Sales Hub</div>
          <div className="item active"><Icon name="users" size={14}/> Accounts</div>
          <div className="item">Contacts</div>
          <div className="item">Opportunities</div>
          <div className="item">Quotes</div>
          <div className="item" style={{ marginTop: 8, color: 'var(--ink-5)', fontSize: 11 }}>Activities</div>
          <div className="item">Tasks</div>
          <div className="item">Emails</div>
        </div>
        <div className="d365-form">
          <h4>Contoso Ltd</h4>
          <div className="meta">account · Active · owner: Jane Cooper</div>
          <div className="d365-fields">
            <div className="d365-field"><label>Account name</label><div className="v">Contoso Ltd</div></div>
            <div className="d365-field"><label>Industry</label><div className="v">Manufacturing</div></div>
            <div className="d365-field"><label>Annual revenue</label><div className="v">$48,200,000</div></div>
            <div className="d365-field"><label>Employees</label><div className="v">312</div></div>
            <div className="d365-field"><label>Primary contact</label><div className="v">Marcus Tan</div></div>
            <div className="d365-field"><label>Created on</label><div className="v">12 Mar 2024</div></div>
          </div>
          <div style={{ marginTop: 20, fontSize: 11, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 600 }}>Recent activity</div>
          <div style={{ marginTop: 8, fontSize: 13, color: 'var(--ink-2)' }}>
            <div style={{ padding: '6px 0', borderBottom: '1px solid var(--border)' }}>📧 Quote Q-2841 sent · 2d ago</div>
            <div style={{ padding: '6px 0', borderBottom: '1px solid var(--border)' }}>📞 Discovery call w/ Marcus · 5d ago</div>
            <div style={{ padding: '6px 0' }}>📝 Renewal note added · 1w ago</div>
          </div>
        </div>
        <div className="d365-panel">
          <div className="d365-panel-header">
            <div className="mark"><Icon name="sparkles" size={12} stroke="#FFF"/></div>
            <div className="name">Smart Panel AI</div>
            <span className="chip-mono" style={{ marginLeft: 'auto' }}>v2.1</span>
          </div>
          <div className="d365-panel-body">
            <div className="d365-msg">
              <div className="role">You</div>
              Summarize this account and tell me what's at risk.
            </div>
            <div className="d365-msg" style={{ borderLeft: '2px solid var(--accent)' }}>
              <div className="role">Smart Panel</div>
              Contoso is a $48M manufacturer, 312 staff. They're 14 days into the renewal cycle, and the last touchpoint was a quote sent on Apr&nbsp;26 with no reply. Owner Jane Cooper closed two similar accounts last quarter. <strong>Risk: medium.</strong> Suggest a follow-up email — draft ready.
            </div>
            <div className="d365-input">
              <span>Ask about this record…</span>
              <Icon name="arrow-right" size={14}/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

// ============================================================
// BrowserShot — responsive screenshot in a browser frame.
// `src` is the image URL. `url` is the fake address bar text.
// `alt` describes the image. Falls back to `fallback` if the image fails.
// ============================================================
const BrowserShot = ({ src, url = 'org.crm.dynamics.com', alt = '', fallback = null, dark = false }) => {
  const [errored, setErrored] = React.useState(false);
  if (errored && fallback) return fallback;
  return (
    <div className="browser">
      <div className="browser-bar">
        <span className="browser-dot r"></span>
        <span className="browser-dot y"></span>
        <span className="browser-dot g"></span>
        <div className="browser-url">{url}</div>
      </div>
      <div className="browser-body" style={{ background: dark ? '#0A0A0A' : '#FFF' }}>
        <img
          src={src}
          alt={alt}
          loading="lazy"
          onError={() => setErrored(true)}
          style={{ display: 'block', width: '100%', height: 'auto' }}
        />
      </div>
    </div>
  );
};

// ============================================================
// Photo — responsive image card with optional caption.
// Uses Unsplash CDN URLs (free for commercial use, Unsplash License).
// ============================================================
const Photo = ({ src, alt = '', radius = 12, ratio = '16 / 10', style = {} }) => (
  <div style={{
    width: '100%', borderRadius: radius, overflow: 'hidden',
    background: 'var(--surface-2)', boxShadow: 'var(--shadow-md)',
    ...style,
  }}>
    <img
      src={src}
      alt={alt}
      loading="lazy"
      style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover', aspectRatio: ratio }}
    />
  </div>
);

// Stable Unsplash CDN URLs — Unsplash License (free for commercial use, no
// attribution required). Replace any of these with your own assets later.
const STOCK = {
  office:        'https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1600&q=80',
  team:          'https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=1600&q=80',
  laptopCharts:  'https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1600&q=80',
  dashboard:     'https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1600&q=80',
  twoScreens:    'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1600&q=80',
  workingSolo:   'https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?auto=format&fit=crop&w=1600&q=80',
  meeting:       'https://images.unsplash.com/photo-1552581234-26160f608093?auto=format&fit=crop&w=1600&q=80',
  codeScreen:    'https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1600&q=80',
  reportPaper:   'https://images.unsplash.com/photo-1543286386-713bdd548da4?auto=format&fit=crop&w=1600&q=80',
};

// Local Smart Panel screenshots — drop the user's PNGs at these paths:
//   assets/screens/smartpanel-ai-assistant.png  (AI Assistant chat panel)
//   assets/screens/smartpanel-followup.png      (Follow-up Advisor)
//   assets/screens/smartpanel-email.png         (Email Drafting)
const SHOTS = {
  aiAssistant: 'assets/screens/smartpanel-ai-assistant.png',
  followUp:    'assets/screens/smartpanel-followup.png',
  email:       'assets/screens/smartpanel-email.png',
};

// ============================================================
// Export to global scope for other Babel scripts
// ============================================================
Object.assign(window, { Icon, BrandIcon, SiteHeader, SiteFooter, WhatsAppFAB, D365Mock, BrowserShot, Photo, STOCK, SHOTS, AnimatedCounter, ScrollProgress });
