/* global React */
// Direction B — Hi-fi components.
// Exports every section component on window for the app to compose.

const { useState, useRef, useEffect } = React;

/* ===========================================================
   assetUrl — resolves a project-relative asset path to its
   inlined blob URL when bundled standalone (window.__resources),
   otherwise returns the original path. Safe on every page.
   =========================================================== */
const __ASSET_IDS = {
  'home/icons/empower.svg': 'svcEmpower',
  'home/icons/design.svg': 'svcDesign',
  'home/icons/grow.svg': 'svcGrow',
  'home/icons/enable.svg': 'svcEnable',
  'home/icons/edge-envision.svg': 'svcEdgeEnvision',
  'home/icons/edge-design.svg': 'svcEdgeDesign',
  'home/icons/edge-grow.svg': 'svcEdgeGrow',
  'home/icons/edge-lab.svg': 'svcEdgeLab',
  'home/icons/why-1.svg': 'why1',
  'home/icons/why-2.svg': 'why2',
  'home/icons/why-3.svg': 'why3',
  'home/icons/why-4.svg': 'why4',
  'home/team/ryan-rex.png': 'ryanPhoto',
  'home/team/blake-hanna.png': 'blakePhoto',
  'home/team/kim-st-georges.png': 'kimPhoto',
  'home/testimonial-alex.mp4': 'testimonialAlex',
  'home/testimonials/alex-fleming.png': 'alexFlemingPhoto',
  'home/testimonials/megan-wickens.png': 'meganWickensPhoto',
};
function assetUrl(path) {
  if (typeof window !== 'undefined' && window.__resources) {
    const id = __ASSET_IDS[path];
    if (id && window.__resources[id]) return window.__resources[id];
  }
  return path;
}

/* ===========================================================
   RoundedHex — SVG rounded hexagon primitive.
   Uses the trick of a thick stroke + line-join round to give
   the hex its signature soft corners.
   =========================================================== */
function RoundedHex({ size = 64, color = "#7118C2", strokeWidth = 22, label, labelColor = "#fff", style }) {
  return (
    <span style={{ display: "inline-block", width: size, height: size * 0.866, position: "relative", flex: '0 0 auto', ...style }}>
      <svg viewBox="-14 -14 128 114" style={{ width: "100%", height: "100%", display: "block" }} preserveAspectRatio="xMidYMid meet">
        <polygon
          points="25,0 75,0 100,43.3 75,86.6 25,86.6 0,43.3"
          fill={color} stroke={color} strokeWidth={strokeWidth} strokeLinejoin="round" />
        
        {label &&
        <text x="50" y="58" textAnchor="middle"
        fontFamily="Poppins, sans-serif" fontWeight={700}
        fontSize={label.length > 1 ? 32 : 44}
        fill={labelColor} letterSpacing="-1">
            {label}
          </text>
        }
      </svg>
    </span>);

}

/* ===========================================================
   HexRings — concentric rounded hex (the brand mark).
   For decorative use only (the real logo is /assets/he-icon.png).
   =========================================================== */
function HexRings({ size = 240, style }) {
  const rings = [
  { c: '#7118C2', s: 32 },
  { c: '#150352', s: 26 },
  { c: '#BC10DE', s: 20 },
  { c: '#7118C2', s: 14 },
  { c: '#00FB90', s: 8 },
  { c: '#150352', s: 4 }];

  return (
    <span style={{ display: "inline-block", width: size, height: size * 0.866, position: "relative", ...style }}>
      <svg viewBox="-20 -20 140 120" style={{ width: "100%", height: "100%" }} preserveAspectRatio="xMidYMid meet">
        {rings.map((r, i) => {
          const inset = i * 5;
          const pts = [
          [25 + inset * 0.5, inset],
          [75 - inset * 0.5, inset],
          [100 - inset, 43.3],
          [75 - inset * 0.5, 86.6 - inset],
          [25 + inset * 0.5, 86.6 - inset],
          [inset, 43.3]].
          map((p) => p.join(',')).join(' ');
          return (
            <polygon
              key={i}
              points={pts}
              fill="none"
              stroke={r.c}
              strokeWidth={r.s}
              strokeLinejoin="round" />);


        })}
      </svg>
    </span>);

}

/* ===========================================================
   Arrow — inline SVG glyph (replaces the → text character).
   fill=currentColor so it inherits each button/link's text color.
   =========================================================== */
function Arrow({ flip = false, className = "btn-arrow" }) {
  return (
    <svg className={className} viewBox="0 0 36 30" fill="none" aria-hidden="true"
      style={flip ? { transform: 'scaleX(-1)' } : undefined}>
      <path d="M35.4142 16.1421C36.1953 15.3611 36.1953 14.0947 35.4142 13.3137L22.6863 0.58577C21.9052 -0.195279 20.6389 -0.195279 19.8579 0.58577C19.0768 1.36682 19.0768 2.63315 19.8579 3.4142L31.1716 14.7279L19.8579 26.0416C19.0768 26.8227 19.0768 28.089 19.8579 28.87C20.6389 29.6511 21.9052 29.6511 22.6863 28.87L35.4142 16.1421ZM0 14.7279V16.7279H34V14.7279V12.7279H0V14.7279Z" fill="currentColor"></path>
    </svg>);

}

/* ===========================================================
   Logo lockup (icon + wordmark)
   =========================================================== */
function HumeLogo({ light = false }) {
  return (
    <a className="nav-logo" href="#" onClick={(e) => e.preventDefault()} aria-label="Hume Edge">
      <img className="nav-logo-mark" src={typeof window !== 'undefined' && window.__resources && window.__resources.humeIcon || "home/hume-icon.png"} alt="" />
      <span className="nav-logo-wordmark" data-light={light ? 'true' : 'false'}>
        <span className="nav-logo-hume">HUME</span>
        <span className="nav-logo-edge">EDGE</span>
      </span>
    </a>);

}

/* ===========================================================
   Nav
   =========================================================== */
function Nav({ current = 'Home' }) {
  const items = [
    { label: 'Home', href: 'index-light.html' },
    { label: 'About Us', href: 'about-light.html' },
  ];
  const [open, setOpen] = useState(false);

  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a className="nav-logo" href="index-light.html" aria-label="Hume Edge">
          <img className="nav-logo-lockup" src={typeof window !== 'undefined' && window.__resources && window.__resources.humeEdgeLogo || "home/hume-edge-logo.png"} alt="Hume Edge" />
        </a>
        <div className="nav-links">
          {items.map((it) =>
          <a key={it.label} className={`nav-link ${current === it.label ? 'is-current' : ''}`} href={it.href}>{it.label}</a>
          )}
        </div>
        <div className="nav-cta">
          <a className="btn btn-mint" href="contact-light.html">Contact Us</a>
        </div>
        <button
          type="button"
          className={`nav-burger ${open ? 'is-open' : ''}`}
          aria-label={open ? 'Close menu' : 'Open menu'}
          aria-expanded={open}
          onClick={() => setOpen((v) => !v)}>
          <span></span><span></span><span></span>
        </button>
      </div>

      <div className={`nav-drawer ${open ? 'is-open' : ''}`} role="dialog" aria-modal="true" aria-hidden={!open}>
        <div className="nav-drawer-links">
          {items.map((it) =>
          <a key={it.label} className={`nav-drawer-link ${current === it.label ? 'is-current' : ''}`} href={it.href}
          onClick={() => setOpen(false)}>{it.label}</a>
          )}
        </div>
        <a className="btn btn-mint nav-drawer-cta" href="contact-light.html" onClick={() => setOpen(false)}>Contact Us</a>
      </div>
      <div className={`nav-scrim ${open ? 'is-open' : ''}`} onClick={() => setOpen(false)} aria-hidden="true"></div>
    </nav>);

}

/* ===========================================================
   Hero — stat-led
   =========================================================== */
function Hero({ bgVariant = 'indigo-purple' }) {
  return (
    <section className={`hero hero--${bgVariant}`}>
      <div className="hero-blob b1"><HexRings size={320} /></div>
      <div className="hero-blob b2"><RoundedHex size={90} color="#BC10DE" /></div>
      <div className="container hero-grid">
        <div>
          <div className="hero-eyebrow">AI enablement consulting</div>
          <h1 className="hero-title">
            We're the <em>human side</em> of AI adoption.
          </h1>
          <p className="hero-sub">
            The AI edge doesn't come from the model; it comes from the humans on your team. Whether they trust it, understand it, and actually use it. That's where AI programs live or die. That's where we work. <em>That's the Hume Edge.</em>
          </p>
          <div className="hero-ctas">
            <button className="btn btn-lg btn-mint" style={{ fontSize: "14px" }}>Get Your People AI Ready <Arrow /></button>
            <button className="btn btn-lg btn-ghost-dark">See the framework</button>
          </div>
        </div>

        <div className="hero-portrait">
          <img className="hero-portrait-art" src={typeof window !== 'undefined' && window.__resources && window.__resources.heroPortrait || "home/hero-portrait.png"} alt="Hume Edge consultant" />
        </div>
      </div>
    </section>);

}

/* ===========================================================
   Logo carousel section — title, support copy, then marquee.
   Logos are the firms named in source copy (founders' prior firms);
   PDF doesn't specify which logos appear in the carousel.
   =========================================================== */
const FIRMS = ['Accenture', 'IBM', 'KPMG', 'EY', 'Microsoft'];

function LogoCarousel() {
  const items = [...FIRMS, ...FIRMS, ...FIRMS];
  return (
    <section className="logos">
      <div className="container logos-head">
        <div className="logos-copy">
          <div className="eyebrow">Built on global experience</div>
          <p className="logos-body">
            We've designed some of the world's largest transformations. We've seen what works. We've seen what doesn't. <em>The discipline came with us. The bureaucracy didn't.</em>
          </p>
        </div>
      </div>
      <div className="marquee-band">
        <div className="marquee-track">
          <div className="marquee-row">
            {items.map((f, i) =>
            <React.Fragment key={i}>
                <span className="brand-mark">{f}</span>
                <span className="brand-mark"><span className="dot">◆</span></span>
              </React.Fragment>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ===========================================================
   Intro band — "A different kind of AI consultancy"
   =========================================================== */
function Intro() {
  return (
    <section className="intro">
      <div className="container intro-grid">
        <div className="intro-art">
          <div className="photo-frame" style={{ aspectRatio: '4 / 5' }}>
            <img
              className="photo-frame-img"
              style={{ objectFit: 'contain' }}
              src={typeof window !== 'undefined' && window.__resources && window.__resources.introPhoto || "home/intro-photo.png"}
              alt="Hume Edge team working session." />
            
          </div>
          <div className="intro-art-sticker">
            <RoundedHex size={84} color="#00FB90" labelColor="#150352" />
          </div>
        </div>
        <div className="intro-body">
          <div className="eyebrow">Built on global experience</div>
          <p className="lead" style={{ marginTop: 24 }}>
            Too many AI programs stall at the same point: <em>the technology is ready, the people aren't.</em>
          </p>
          <p className="body">
            Most of the industry treats that gap as a footnote. We treat it as the headline. Our founding team has led transformation programs at the firms that defined the category. We left to build something the category was missing.
          </p>
          <p className="body">
            We've designed some of the world's largest transformations. We've seen what works. We've seen what doesn't. The discipline came with us. The bureaucracy didn't.
          </p>
          <p className="intro-tagline">
            An advisory firm that begins where others stop.<br />
            <em>The people side of AI.</em>
          </p>
          <button className="btn btn-ghost-dark">Learn More About Us</button>
        </div>
      </div>
    </section>);

}

/* ===========================================================
   Problem — snap-scroll carousel
   =========================================================== */
const PROBLEMS = [
['01', '#7118C2',
'We rolled out AI. Our people still aren\'t using it effectively.',
'Access to a tool and knowing how to use it are two different things. When employees aren\'t enabled to leverage AI in the flow of work for their specific roles, they default to what they know, and the AI investment you made quietly stops returning anything.'],
['02', '#BC10DE',
'We\'re spending on AI and can\'t prove it\'s working.',
'Platform costs show up on the balance sheet long before business outcomes do. When your board asks what the AI investment is returning and the honest answer is "we\'re not sure yet," that\'s a difficult position to hold for long.'],
['03', '#0599FF',
'Our leaders are expected to drive AI adoption. Nobody has shown them how.',
'Most leadership teams were never trained to lead AI transformation. They\'re making decisions about tools and budgets while their people wait for clarity about what it all means for their roles. That uncertainty travels fast through an organization.'],
['04', '#7118C2',
'Our AI efforts are scattered and unaligned.',
'When every department is running its own AI initiative without a shared strategy, the efforts don\'t compound. They compete. Resources get spread thin, priorities stay unclear, and the organization ends up busy with AI without actually advancing because of it.'],
['05', '#00FB90',
'Our pilots work. Scaling them is where we run out of hands.',
'A pilot can succeed with three motivated people in a room. Scale requires hundreds across functions doing something they have never done before. Most organizations underestimate that gap and end up with a portfolio of proven concepts that never make it past the team that built them.'],
['06', '#BC10DE',
'We have the strategy. We don\'t have the ability to build it.',
'The roadmap is approved, and the funding is committed. What\'s missing is the capacity inside the organization to actually deliver any of it. AI is moving quickly, and without the capability, organizations are feeling the pressure to catch up. Ambition ceases to move forward at scale.']];


function ProblemCarousel() {
  const trackRef = useRef(null);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const el = trackRef.current;if (!el) return;
    const onScroll = () => {
      const max = el.scrollWidth - el.clientWidth;
      setProgress(max > 0 ? el.scrollLeft / max * 100 : 0);
    };
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  const nudge = (dir) => {
    const el = trackRef.current;if (!el) return;
    el.scrollBy({ left: dir * 402, behavior: 'smooth' });
  };

  return (
    <section className="problem">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">What our clients are saying</div>
          <h2>Your AI program is live.<br />Your <em>people aren't there yet</em>.</h2>
          <p>Budgets are approved, tools are selected, and the pressure to show results is real. Most organizations have invested more in AI tools than in AI adoption. These are the challenges we hear most.</p>
        </div>
      </div>

      <div className="problem-track-wrap">
        <button className="problem-arrow problem-arrow--prev" aria-label="Previous" onClick={() => nudge(-1)}>‹</button>
        <div className="problem-track" ref={trackRef}>
          {PROBLEMS.map(([num, color, quote, body], i) =>
          <article key={i} className="problem-card" style={{ '--card-accent': color }}>
              <div className="head">
                <img className="problem-icon" src={`home/icons/card-${i + 1}.svg`} alt="" />
              </div>
              <h3 className="quote">{quote}</h3>
              <p className="body">{body}</p>
            </article>
          )}
          <div style={{ flex: '0 0 56px' }} aria-hidden />
        </div>
        <button className="problem-arrow problem-arrow--next" aria-label="Next" onClick={() => nudge(1)}>›</button>
      </div>

      <div className="container problem-controls" style={{ padding: 0 }}>
        <div className="progress">
          <div className="bar" style={{ width: `${Math.max(20, progress)}%` }} />
        </div>
      </div>
    </section>);

}

/* ===========================================================
   Image break — full-bleed human imagery, per brand guide
   ("prioritize humans at work in our imagery").
   =========================================================== */
function ImageBreak() {
  return (
    <section className="imgbreak">
      <div className="container imgbreak-grid">
        <div className="imgbreak-photo">
          <video
            className="imgbreak-photo-img"
            src={typeof window !== 'undefined' && window.__resources && window.__resources.imgbreakVideo || "home/imgbreak-video.mp4"}
            autoPlay
            muted
            loop
            playsInline
            aria-label="A Hume Edge consultant at work." />
        </div>
        <div className="imgbreak-content">
          <h2 className="imgbreak-lead">
            These are people problems. <em>We built Hume Edge for exactly this.</em>
          </h2>
          <div className="imgbreak-cta">
            <button className="btn btn-lg btn-mint">Let's Get Your People AI Ready <Arrow /></button>
          </div>
          <div className="stat-pair">
            <div className="stat-row">
              <div className="big">80<span className="pct">%</span></div>
              <div className="lead">
                of CEOs expect AI to force medium-to-high change in their operational capabilities.
                <span className="src">Gartner · April 2026</span>
              </div>
            </div>
            <div className="stat-row">
              <div className="big">12<span className="pct">%</span></div>
              <div className="lead">
                of companies have embedded AI into their core processes.
                <span className="src">Bain · May 2026</span>
              </div>
            </div>
            <div className="stat-row">
              <div className="big">4<span className="pct">%</span></div>
              <div className="lead">
                say AI is delivering transformational strategic value.
                <span className="src">MNP / Ipsos · March 2026</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ===========================================================
   Services — E·D·G·E hex tiles + Studio
   =========================================================== */
// EDGE colour sequence — each card is keyed to the colour of its supplied icon:
// E Envision → purple · D Design → blue · G Grow → magenta · E Edge Lab → green
const SERVICES = [
{ letter: 'E', title: 'Envision the AI Journey', accent: '#7118C2', ink: '#7118C2', icon: 'home/icons/edge-envision.svg',
  tagline: 'AI Strategic Narrative, Executive Alignment & Governance',
  blurb: 'A clear AI strategy, roadmap, and governance foundation (your blueprint) — to envision, prepare for, and realize AI potential, by shaping the mindsets, directive, and narratives, needed to champion AI transformation.',
  intro: 'AI works when your leaders are aligned on why it matters and where it pays off. This is where we set that foundation — a clear strategy, a prioritized roadmap, and the governance to move with confidence. You leave with a plan your executives own and your board believes in.',
  bullets: ['AI Strategy & Value Blueprint', 'AI Use Case & Roadmap Prioritization', 'AI Governance Framework & Policy'] },
{ letter: 'D', title: 'Design the Systems to Drive AI Value', accent: '#0599FF', ink: '#0578CC', icon: 'home/icons/edge-design.svg',
  tagline: 'Human-Centric AI Through Organizational Systems Design',
  blurb: 'Accelerators aimed at preparing your AI transformation through the evaluation and (re)design of your organizational systems (i.e., processes) as well as co-designed, tailored AI enablement programs to help your teams navigate the evolving AI landscape.',
  intro: 'Most AI value is lost in the gap between a capable tool and the way work really gets done. We close that gap by redesigning your operational systems — processes, roles, and decision points — with people at the centre. The result is an organization built to absorb AI and keep improving.',
  bullets: ['Future of Work Architecture & Redesign (Operational Systems, People, and Roles)', 'AI Adoption Strategy & Design'] },
{ letter: 'G', title: 'Grow Human & Organizational AI Capabilities', accent: '#BC10DE', ink: '#BC10DE', icon: 'home/icons/edge-grow.svg',
  tagline: 'AI Capability, Fluency, Development & Enablement',
  blurb: 'Developing foundational AI capability and fluency through critical skills, knowledge, and abilities to amplify your organization as you adapt to AI-driven change, ensuring your AI initiatives deliver tangible results.',
  intro: 'Technology rarely takes hold on its own, it requires planned adoption. We develop the capability and confidence your people need to work alongside AI every day — supported by change management, ambassador networks, and executive learning. And we measure adoption so you can show the return.',
  bullets: ['AI Learning Strategy & Design, Development & Delivery', 'Executive AI Accelerator Program', 'Applied AI Leadership Program', 'AI Enablement Delivery, Cultural Readiness & Change Management', 'AI Ambassador Program', 'Microsoft Copilot Training', 'Claude Training', 'Adoption Index & Measurement'] },
{ letter: 'E', title: 'Edge Lab', accent: '#00FB90', ink: '#0B7A4B', icon: 'home/icons/edge-lab.svg',
  tagline: 'Agents & Agentic Development & Configuration',
  blurb: 'Builds AI agents and agentic systems that take on real tasks, make decisions within clear boundaries, and grow more capable as they work. Creating capability that earns its place serving the organization.',
  intro: 'Edge Lab is our build studio. We design, prototype, and configure AI agents and agentic systems that handle real work — connected to your existing tools, with governance and policy scoped in from day one. Each one earns its place by serving the organization, and we can run them for you once they do.',
  bullets: ['AI Agentics', 'AI Technical Training & Co-Delivery Solutions', 'AI Managed Services'] }];


function ServiceModal({ s, onClose }) {
  // Lock body scroll + close on Escape while the modal is open.
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
  }, [onClose]);

  return (
    <div className="svc-modal-overlay" onClick={onClose}>
      <div
        className="svc-modal"
        role="dialog"
        aria-modal="true"
        aria-label={s.title}
        style={{ '--card-accent': s.accent, '--card-ink': s.ink }}
        onClick={(e) => e.stopPropagation()}>
        <button type="button" className="svc-modal-close" onClick={onClose} aria-label="Close">
          <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M5 5l14 14M19 5L5 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /></svg>
        </button>
        <div className="svc-modal-head">
          <img className="svc-modal-icon" src={assetUrl(s.icon)} alt="" width="56" height="56" />
          <h3 className="svc-modal-title">{s.title}</h3>
        </div>
        <div className="svc-modal-tagline">{s.tagline}</div>
        <p className="svc-modal-intro">{s.intro}</p>
        <div className="svc-modal-deliverables-label">What we deliver</div>
        <ul className="svc-modal-deliverables">
          {s.bullets.map((b, i) => <li key={i}>{b}</li>)}
        </ul>
      </div>
    </div>);

}

function ServiceCard({ s, onExplore }) {
  return (
    <article className="service-card" style={{ '--card-accent': s.accent, '--card-ink': s.ink }}>
      <div className="card-face">
        <div className="top">
          <img className="service-icon" src={assetUrl(s.icon)} alt="" width="64" height="64" />
        </div>
        <h3 className="title">{s.title}</h3>
        <p className="body">{s.blurb}</p>
        <button type="button" className="cta" onClick={onExplore}>Explore <Arrow className="ar" /></button>
      </div>
    </article>);

}

const LAB_BULLETS = [
'Configure agentic AI inside your own environment — Microsoft, Salesforce, Workday',
'Everything runs behind your existing security walls',
'Blueprint, prototype, and deploy production-ready agents',
'Governance guardrails and policy alignment scoped from day one'];


function LabCard({ studioHighlight = true }) {
  const [open, setOpen] = useState(false);
  return (
    <article className={`studio-card ${studioHighlight ? '' : 'is-quiet'} ${open ? 'is-open' : ''}`}>
      <img className="studio-icon" src={typeof window !== 'undefined' && window.__resources && window.__resources.humeLabIcon || "home/hume-lab-icon.png"} alt="Hume Edge Lab" />
      <div className="studio-body">
        <div className="label">Hume edge lab</div>
        {open ?
        <React.Fragment>
            <h3 className="title">Inside the Lab.</h3>
            <ul className="deliverables">
              {LAB_BULLETS.map((b, i) => <li key={i}>{b}</li>)}
            </ul>
          </React.Fragment> :

        <React.Fragment>
            <h3 className="title">Agentics to power the future of work.</h3>
            <p className="body">
              The Lab blueprints, prototypes, and configures AI agents and automated workflows connected to your existing systems, with governance guardrails and policy alignment scoped in from day one.
            </p>
          </React.Fragment>
        }
      </div>
      <button type="button" className="btn btn-lg btn-mint" onClick={() => setOpen(!open)}>
        {open ? <React.Fragment><Arrow flip /> Back</React.Fragment> : <React.Fragment>Explore <Arrow /></React.Fragment>}
      </button>
    </article>);

}

function ServicesSection({ studioHighlight = true }) {
  const [active, setActive] = useState(null); // index of card whose modal is open
  return (
    <section className="services">
      <div className="container">
        <div className="services-head">
          <div className="section-head" style={{ marginBottom: 0 }}>
            <div className="eyebrow">Our services</div>
            <h2>Your AI journey needs <em>a human
edge</em>.</h2>
          </div>
          <div className="right">
            <p style={{ marginBottom: 16 }}>The organizations seeing true AI returns don't leave any part of the journey to chance. Hume Edge makes sure you don't either.</p>
            <p>The Hume Edge Framework supports organizations in preparing for, adapting to, and thriving from AI-transformative change, where future-focused organizations amplify human capabilities with AI technology, helping elevate human potential, accelerate decision-making, and unlock unprecedented value.</p>
          </div>
        </div>

        <div className="services-grid">
          {SERVICES.map((s, i) => <ServiceCard key={i} s={s} onExplore={() => setActive(i)} />)}
        </div>

        <LabCard studioHighlight={studioHighlight} />
      </div>
      {active !== null && <ServiceModal s={SERVICES[active]} onClose={() => setActive(null)} />}
    </section>);
}

/* ===========================================================
   Resource — gated executive guide download
   =========================================================== */
function ResourceDownload() {
  const [data, setData] = useState({ name: '', title: '', email: '', org: '' });
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState('');
  const update = (k) => (e) => setData((d) => ({ ...d, [k]: e.target.value }));

  const onSubmit = (e) => {
    e.preventDefault();
    const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email.trim());
    if (!data.name.trim() || !data.title.trim() || !data.org.trim() || !emailOk) {
      setError('Please complete every field with a valid work email.');
      return;
    }
    setError('');
    // Stand-in for backend: persist the lead to a local contact list.
    try {
      const list = JSON.parse(localStorage.getItem('he_guide_leads') || '[]');
      list.push({ ...data, submittedAt: new Date().toISOString() });
      localStorage.setItem('he_guide_leads', JSON.stringify(list));
    } catch (_) {/* ignore storage errors */}
    setSubmitted(true);
  };

  return (
    <section className="resource">
      <div className="container resource-grid">
        <div className="resource-copy">
          <div className="eyebrow">Executive resource</div>
          <h2>The AI Guide<br /><em>for Executives.</em></h2>
          <p>A practical playbook for leaders steering AI adoption — what to prioritise, where programs stall, and how to keep your people ahead of the technology.</p>
          <ul className="resource-points">
            <li>Where AI programs lose momentum — and how to avoid it</li>
            <li>A readiness checklist for executive teams</li>
            <li>How to measure adoption, not just deployment</li>
          </ul>
        </div>

        <div className="resource-form-wrap">
          {submitted ?
          <div className="form-card resource-success">
              <div className="resource-success-mark"><RoundedHex size={56} color="#00FB90" labelColor="#150352" label="✓" /></div>
              <h3>Your copy is on the way.</h3>
              <p>We've sent the AI Guide for Executives to <strong>{data.email}</strong>. It should land in your inbox shortly.</p>
              <a className="btn btn-lg btn-mint resource-submit" href="resources/hume-edge-ai-guide.pdf" download>Download now <Arrow /></a>
            </div> :

          <form className="form-card" onSubmit={onSubmit} noValidate>
              <div className="resource-form-head">Get your copy</div>
              <div className="form-row split">
                <div>
                  <label>Full name</label>
                  <input type="text" placeholder="Alex Morgan" value={data.name} onChange={update('name')} />
                </div>
                <div>
                  <label>Job title</label>
                  <input type="text" placeholder="Chief Operating Officer" value={data.title} onChange={update('title')} />
                </div>
              </div>
              <div className="form-row split">
                <div>
                  <label>Work email</label>
                  <input type="email" placeholder="you@company.com" value={data.email} onChange={update('email')} />
                </div>
                <div>
                  <label>Organization</label>
                  <input type="text" placeholder="Company name" value={data.org} onChange={update('org')} />
                </div>
              </div>
              {error ? <div className="form-error">{error}</div> : null}
              <button type="submit" className="btn btn-lg btn-mint resource-submit">Download Our AI Guide for Executives</button>
              <div className="fineprint resource-fineprint">We'll email your copy and may follow up about AI enablement. We won't share your details.</div>
            </form>
          }
        </div>
      </div>
    </section>);

}

/* ===========================================================
   Process — versus split
   =========================================================== */
const VERSUS_ROWS = [
['Who delivers', 'Senior teams', 'Junior teams'],
['Methodology', 'Co-creation for your organizational needs', 'Standardized, cookie-cutter approach across all clients'],
['Primary focus', 'AI enablement, readiness, and adoption', 'A bit of everything for everyone'],
['Delivery model', 'Adaptive, agile service delivery focused on your needs', 'Rigid with change orders'],
['Success looks like', 'Quantifiable AI adoption across your organization', 'Deliverables completed'],
['Pricing', 'Big‑firm quality, boutique‑firm efficiency', 'Global overhead and bureaucracy included']];


function VersusSplit() {
  return (
    <section className="process">
      <div className="container process-head">
        <div className="eyebrow" style={{ justifyContent: 'center' }}>About us</div>
        <h2>How we work <em>differently</em>.</h2>
        <p>
          Large consulting firms bring frameworks, reach, and a price tag to match, but the senior partners who sell the engagement rarely lead the delivery. Hume Edge is a firm where your engagement is led by the people who actually do the work, the methodology adapts to your organization's specific context, and we measure success by whether your people are actually working differently.
        </p>
      </div>

      <div className="versus">
        <div className="versus-col us">
          <div className="brandrow">
            <img src={typeof window !== 'undefined' && window.__resources && window.__resources.humeLabIcon || "home/hume-lab-icon.png"} alt="Hume Edge" style={{ width: 42, height: 42, objectFit: 'contain', flex: '0 0 auto' }} />
            <span className="title">Hume Edge</span>
          </div>
          {VERSUS_ROWS.map(([k, us], i) =>
          <div key={i} className="versus-row">
              <div className="k">{k}</div>
              <div className="v">{us}</div>
            </div>
          )}
        </div>
        <div className="versus-col them">
          <div className="brandrow">
            <span className="title">Other firms</span>
          </div>
          {VERSUS_ROWS.map(([k,, them], i) =>
          <div key={i} className="versus-row">
              <div className="k">{k}</div>
              <div className="v">{them}</div>
            </div>
          )}
        </div>
      </div>

      <div className="versus-cta">
        <button className="btn btn-lg btn-mint">Start a conversation <Arrow /></button>
      </div>
    </section>);

}

/* ===========================================================
   Industries — animated marquee
   =========================================================== */
const INDUSTRIES = [
'Oil and Gas', 'Mining', 'Utilities and Power', 'Renewable Energy',
'Construction', 'Manufacturing', 'Aerospace and Defence', 'Transportation and Logistics',
'Technology and Communications', 'Media and Entertainment', 'Consumer Goods and Retail',
'Hospitality and Tourism', 'Food and Beverage', 'Healthcare and Life Sciences',
'Pharmaceuticals and Biotech', 'Professional Services', 'Financial Services', 'Real Estate',
'Agriculture', 'Education', 'Government', 'Public Services', 'Non-profit and NGOs'];


function IndustriesMarquee() {
  const a = [...INDUSTRIES, ...INDUSTRIES];
  const rev = [...INDUSTRIES].reverse();
  const b = [...rev, ...rev];
  return (
    <section className="industries">
      <div className="container">
        <div className="industries-head">
          <div>
            <div className="eyebrow">Industry experience or specialization</div>
            <h2>Who we work with.</h2>
          </div>
          <p>
            These are the industries we know best, but the challenges we tackle aren't sector-specific. If you're looking for help getting your people AI-ready, let's talk.
          </p>
        </div>
      </div>

      <div className="ind-marquee">
        <div className="ind-row">
          {a.map((n, i) =>
          <span key={i} className={`ind-item ${i % 2 === 1 ? 'alt' : ''}`}>
              {n} <span className="sep">◆</span>
            </span>
          )}
        </div>
      </div>
      <div className="ind-marquee">
        <div className="ind-row rev">
          {b.map((n, i) =>
          <span key={i} className={`ind-item ${i % 2 === 1 ? 'alt' : ''}`}>
              {n} <span className="sep">◆</span>
            </span>
          )}
        </div>
      </div>
    </section>);

}

/* ===========================================================
   Why We're Different
   =========================================================== */
const WHY_ROWS = [
['home/icons/why-1.svg', 'We start with your people',
'Your edge in AI is not the model you choose or the platform you buy. It\'s whether your people trust it, understand it, and use it. We start there. Everything else follows.'],
['home/icons/why-2.svg', 'We measure AI value differently',
'The hardest part of an AI program is proving it\'s working. Platform usage tells you nothing about adoption. License counts tell you nothing about confidence. We bring a deliberate way of measuring whether your people are actually working differently, and whether the value promised is real.'],
['home/icons/why-3.svg', 'We enable what others miss',
'Tools are easy to deliver. Behavior is harder. Training that ends on Friday and changes nothing by Monday is the most common failure mode in AI programs, and it is the one nobody wants to talk about. We work with your people until the way they work has actually changed. If your people don\'t change, neither will the value of your investments.'],
['home/icons/why-4.svg', 'We adapt to your organization',
'A methodology that works in every organization is a methodology that works in none of them. We bring a structured approach and bend it to your culture, your pace, and what your people can actually absorb. Rigor that fits, not rigor that imposes.']];


function WhyDifferent() {
  return (
    <section className="why">
      <div className="container">
        <div className="section-head">
          <h2>Why Hume Edge.</h2>
        </div>
        <div className="why-grid">
          {WHY_ROWS.map(([icon, t, b], i) =>
          <div key={i} className="why-row">
              <div className="head">
                <img className="why-icon" src={assetUrl(icon)} alt="" />
                <div className="ttl">{t}</div>
              </div>
              <div className="body">{b}</div>
            </div>
          )}
        </div>

        <div className="why-closer">
          <div className="why-closer-img">
            <div className="photo-frame" style={{ height: '100%', minHeight: 380, borderRadius: 0 }}>
              <video
                className="photo-frame-img"
                src={typeof window !== 'undefined' && window.__resources && window.__resources.teamVideo || "home/team-video.mp4"}
                autoPlay
                loop
                muted
                playsInline
                style={{ objectFit: 'cover', width: '100%', height: '100%' }} />
              
            </div>
          </div>
          <div>
            <h3>The depth of a global firm. <em>Built for how you actually work.</em></h3>
            <p>
              Our teams have spent decades at large consulting and technology firms, as well as sector-leading organizations — designing and delivering the kind of transformation work the largest organizations in the world rely on. We left because that depth was being delivered in a model that no longer fit how organizations need to move. Hume Edge keeps the discipline. We left the rest behind.
            </p>
            <div className="firms">
              <div className="lab">Executive team previously at</div>
              <div className="firms-row">
                <span>Accenture</span><span>·</span>
                <span>IBM</span><span>·</span>
                <span>KPMG</span><span>·</span>
                <span>EY</span><span>·</span>
                <span>Microsoft</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ===========================================================
   Leadership team
   =========================================================== */
const LEADERS = [
{ name: 'Dr. Ryan Rex, MBA', title: 'Chief Executive Officer', slot: 'leader-ceo', photo: 'home/team/ryan-rex.png', linkedin: 'https://www.linkedin.com/in/rexryan/',
  bio: 'Ryan holds a Doctorate of Business Administration focused on leadership and organizational performance, and has spent 20 years leading transformation across oil and gas, technology, law, and manufacturing, including senior roles at Suncor and Borden Ladner Gervais.' },
{ name: 'Blake Hanna', title: 'Chief Consulting Officer', slot: 'leader-cco', photo: 'home/team/blake-hanna.png', linkedin: 'https://www.linkedin.com/in/blakedhannayyc/',
  bio: 'Blake spent nearly two decades at Accenture, EY, and IBM, delivering more than 70 digital and organizational change engagements across North America, Europe, and Asia.' },
{ name: 'Kim St-Georges', title: 'Chief Innovation Officer', slot: 'leader-cio', photo: 'home/team/kim-st-georges.png', linkedin: 'https://www.linkedin.com/in/kimstgeorges/',
  bio: 'Kim brings 20 years of experience in digital transformation and AI strategy, including 14 years as a Senior Principal at Accenture and nearly four years as a Senior Advisor for Azure Cloud, Data, and AI at Microsoft.' }];


function LeaderCard({ p }) {
  const [flipped, setFlipped] = useState(false);
  const toggle = () => setFlipped((f) => !f);
  const onKey = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } };
  return (
    <article
      className={`leader-card ${flipped ? 'is-flipped' : ''}`}
      role="button"
      tabIndex={0}
      aria-pressed={flipped}
      onClick={toggle}
      onKeyDown={onKey}>
      <div className="leader-flip">
        <div className="leader-face leader-front">
          <img className="leader-photo" src={assetUrl(p.photo)} alt={p.name} />
          <h3 className="leader-name">{p.name}</h3>
          <div className="leader-title">{p.title}</div>
          <a className="leader-link" href={p.linkedin} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
            Connect on LinkedIn <span className="ar">↗</span>
          </a>
        </div>
        <div className="leader-face leader-back">
          <h3 className="leader-name">{p.name}</h3>
          <div className="leader-title">{p.title}</div>
          <p className="leader-bio">{p.bio}</p>
          <a className="leader-link" href={p.linkedin} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
            Connect on LinkedIn <span className="ar">↗</span>
          </a>
        </div>
      </div>
    </article>);

}

function LeadershipTeam() {
  return (
    <section className="leadership">
      <div className="container">
        <div className="section-head leadership-head">
          <div className="eyebrow" style={{ justifyContent: 'center' }}>Our leadership team</div>
          <h2>The people leading the work.</h2>
        </div>
        <div className="leaders-grid">
          {LEADERS.map((p) => <LeaderCard key={p.slot} p={p} />)}
        </div>
      </div>
    </section>);

}

/* ===========================================================
   Client testimonials — video + placeholder cards
   =========================================================== */
const TESTIMONIALS = [
{ type: 'video', src: 'home/testimonial-alex.mp4', poster: 'home/testimonials/alex-fleming.png',
  quote: 'Hume Edge changed how our people actually use AI — not just whether we had the tools.',
  name: 'Alex Fleming', role: 'Group SVP Talent, Leadership & Culture', accent: '#00FB90' },
{ type: 'flip', photo: 'home/testimonials/megan-wickens.png',
  quote: 'Hume Edge set the benchmark for scaling AI impact by integrating strategy, design, and execution.',
  back: "Following the build of a global AI skilling program for all colleagues and the successful launch of a global AI Ambassador network driving adoption, activation, and change management, we most recently engaged the Hume Edge team to design and deliver a truly distinctive experience for executive audiences. The program created space for meaningful executive dialogue, challenged existing assumptions, and deepened leaders' understanding of how AI shows up in our organization — particularly the gap between AI investment and AI value realization, and the critical role leadership plays in closing it. Their ability to integrate strategy, design, and execution continues to set the benchmark for how we scale AI impact across the business.",
  name: 'Megan Wickens', role: 'Global Head of AI Operations', accent: '#7118C2' }];

function TFoot({ c, label = 'Read the case study' }) {
  return (
    <div className="tcard-foot">
      <div className="tcard-person">
        <div className="tcard-name">{c.name}</div>
        <div className="tcard-role">{c.role}</div>
      </div>
      <a className="tcard-cs" href="#" onClick={(e) => e.preventDefault()}>{label} <span className="ar">→</span></a>
    </div>);

}

function VideoTestimonial({ c }) {
  const [playing, setPlaying] = useState(false);
  const play = () => setPlaying(true);
  const onKey = (e) => { if (!playing && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); play(); } };
  return (
    <article
      className="tcard tcard-video"
      role={playing ? undefined : 'button'}
      tabIndex={playing ? undefined : 0}
      aria-label={playing ? undefined : `Play video testimonial from ${c.name}`}
      onClick={playing ? undefined : play}
      onKeyDown={playing ? undefined : onKey}>
      <div className="tcard-media">
        {playing ?
        <video className="tcard-video-el" src={assetUrl(c.src)} controls autoPlay preload="metadata" playsInline onClick={(e) => e.stopPropagation()} /> :
        <div className="tcard-poster">
            <img className="tcard-photo" src={assetUrl(c.poster)} alt={c.name} />
            <span className="tcard-play" aria-hidden="true">
              <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
            </span>
          </div>
        }
      </div>
      <p className="tcard-quote">{c.quote}</p>
      <div className="tcard-foot">
        <div className="tcard-person">
          <div className="tcard-name">{c.name}</div>
          <div className="tcard-role">{c.role}</div>
        </div>
        <span className="tcard-cs">Watch the story <span className="ar">→</span></span>
      </div>
    </article>);

}

function QuoteTestimonial({ c }) {
  return (
    <article className="tcard">
      <div className="tcard-media">
        <div className="tcard-quotemark" style={{ color: c.accent }} aria-hidden="true">&ldquo;</div>
      </div>
      <p className="tcard-quote">{c.quote}</p>
      <TFoot c={c} />
    </article>);

}

function FlipTestimonial({ c }) {
  const [flipped, setFlipped] = useState(false);
  const toggle = () => setFlipped((f) => !f);
  const onKey = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } };
  return (
    <article
      className={`tcard tcard-flip ${flipped ? 'is-flipped' : ''}`}
      style={{ '--tcard-accent': c.accent }}
      role="button"
      tabIndex={0}
      aria-pressed={flipped}
      onClick={toggle}
      onKeyDown={onKey}>
      <div className="tflip-inner">
        <div className="tflip-face tflip-front">
          <div className="tcard-media">
            <img className="tcard-photo" src={assetUrl(c.photo)} alt={c.name} />
          </div>
          <p className="tcard-quote">{c.quote}</p>
          <div className="tcard-foot">
            <div className="tcard-person">
              <div className="tcard-name">{c.name}</div>
              <div className="tcard-role">{c.role}</div>
            </div>
            <span className="tcard-cs">Read the full story <span className="ar">→</span></span>
          </div>
        </div>
        <div className="tflip-face tflip-back">
          <div className="tback-eyebrow">In their words</div>
          <p className="tcard-backquote">&ldquo;{c.back}&rdquo;</p>
          <div className="tcard-foot">
            <div className="tcard-person">
              <div className="tcard-name">{c.name}</div>
              <div className="tcard-role">{c.role}</div>
            </div>
            <span className="tcard-cs"><span className="ar ar-back">←</span> Back</span>
          </div>
        </div>
      </div>
    </article>);

}

function Testimonials() {
  return (
    <section className="testimonials">
      <div className="container">
        <div className="section-head testimonials-head">
          <div className="eyebrow" style={{ justifyContent: 'center' }}>Client stories</div>
          <h2>Hear from one of our clients.</h2>
        </div>
        <div className="tcards">
          {TESTIMONIALS.map((c, i) =>
          c.type === 'video' ? <VideoTestimonial key={i} c={c} /> :
          c.type === 'flip' ? <FlipTestimonial key={i} c={c} /> :
          <QuoteTestimonial key={i} c={c} />
          )}
        </div>
      </div>
    </section>);

}

/* ===========================================================
   CTA / Form
   =========================================================== */
function CTAForm({ eyebrow = 'Start here', heading, subtitle = "Tell us where your organization is in the AI adoption process. We'll take it from there.", id } = {}) {
  const [stage, setStage] = useState('Pilots underway');
  const stages = ['Just exploring', 'Pilots underway', 'Scaling', 'Stuck'];
  return (
    <section className="cta-section" id={id}>
      <div className="container cta-grid">
        <div>
          <div className="eyebrow">{eyebrow}</div>
          {heading || <h2>Ready to gain<br /><em>an edge?</em></h2>}
          <p>{subtitle}</p>
        </div>

        <form className="form-card" onSubmit={(e) => e.preventDefault()}>
          <div className="form-row split">
            <div>
              <label>First name</label>
              <input type="text" placeholder="Alex" />
            </div>
            <div>
              <label>Last name</label>
              <input type="text" placeholder="Morgan" />
            </div>
          </div>
          <div className="form-row split">
            <div>
              <label>Work email</label>
              <input type="email" placeholder="you@company.com" />
            </div>
            <div>
              <label>Company</label>
              <input type="text" placeholder="Organization" />
            </div>
          </div>
          <div className="form-row">
            <label>Where are you in your AI journey?</label>
            <div className="form-options">
              {stages.map((s) =>
              <button type="button"
              key={s}
              className={`opt ${stage === s ? 'active' : ''}`}
              onClick={() => setStage(s)}>
                  {s}
                </button>
              )}
            </div>
          </div>
          <div className="form-row">
            <label>Anything we should know?</label>
            <textarea placeholder="A challenge you're facing, a goal, a deadline…" />
          </div>
          <div className="form-actions">
            <div className="fineprint">By submitting, you agree to our privacy policy. We won't share your details.</div>
            <button type="submit" className="btn btn-lg btn-mint">Send <Arrow /></button>
          </div>
        </form>
      </div>
    </section>);

}

/* ===========================================================
   Footer
   =========================================================== */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="footer-logo">
              <img className="footer-logo-lockup" src={typeof window !== 'undefined' && window.__resources && window.__resources.humeEdgeLogoWhite || "home/hume-edge-logo-white.png"} alt="Hume Edge" />
            </div>
            <p>AI enablement consulting. The human side of AI adoption.</p>
          </div>
          <div className="footer-nav">
            <a className="footer-nav-link" href="index-light.html">Home</a>
            <a className="footer-nav-link" href="about-light.html">About Us</a>
            <a className="btn btn-mint" href="contact-light.html">Contact Us</a>
          </div>
        </div>
        <div className="footer-legal">
          <span>© 2026 Hume Edge · humeedge.ai · humeedge.com · humeedge.ca</span>
          <div className="right">
            <a>Privacy</a>
            <a>Terms</a>
            <a>Cookies</a>
          </div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  Nav, Hero, LogoCarousel, Intro, ImageBreak,
  ProblemCarousel, ServicesSection, ResourceDownload, VersusSplit,
  IndustriesMarquee, WhyDifferent, LeadershipTeam, Testimonials, CTAForm, Footer,
  RoundedHex, HexRings, Arrow
});