// section-nav-hero.jsx — v3: balanced. Premium hero with metrics, curated logo strip.

// ============================================================
// NavBar
// ============================================================
const NavBar = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
  { name: 'Approach', href: '#pillars' },
  { name: 'Process', href: '#process' },
  { name: 'Industries', href: '#industries' },
  { name: 'Projects', href: '#projects' },
  { name: 'Incentives', href: '#incentives' },
  { name: 'About', href: '#about' }];


  // Over-hero: transparent + white. Past hero: cream pane + dark text.
  const onHero = !scrolled;

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: onHero ? 'transparent' : 'rgba(243,244,241,0.92)',
      backdropFilter: onHero ? 'none' : 'saturate(1.1) blur(12px)',
      WebkitBackdropFilter: onHero ? 'none' : 'saturate(1.1) blur(12px)',
      borderBottom: onHero ? '1px solid transparent' : '1px solid rgba(15,33,51,0.08)',
      transition: 'all 220ms cubic-bezier(.2,0,0,1)'
    }}>
      <div style={{
        maxWidth: 1440, margin: '0 auto', padding: '18px 48px',
        display: 'grid', gridTemplateColumns: '220px 1fr auto', alignItems: 'center', gap: 40
      }}>
        <a href="/" style={{ display: 'inline-flex', alignItems: 'center' }}>
          <img
            src={onHero ? `${window.GI_BASE}assets/logos/alternate-reversed.svg` : `${window.GI_BASE}assets/logos/alternate-color.svg`}
            alt="Green Integrations"
            style={{ height: 26 }} />
          
        </a>
        <nav style={{ display: 'flex', justifyContent: 'center', gap: 36 }}>
          {links.map((l) =>
          <a key={l.name} href={l.href} style={{
            fontFamily: 'var(--ff-sans)', fontSize: 14, fontWeight: 500,
            color: onHero ? 'rgba(255,255,255,0.82)' : 'var(--gi-wise-blue)',
            textDecoration: 'none', border: 'none',
            letterSpacing: '-0.005em'
          }}>{l.name}</a>
          )}
        </nav>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <a href="tel:6479304336" style={{
            fontFamily: 'var(--ff-sans)', fontSize: 14, fontWeight: 500,
            color: onHero ? 'rgba(255,255,255,0.75)' : 'var(--gi-slate)',
            textDecoration: 'none', border: 'none'
          }}>647-930-4336</a>
          <Button variant={onHero ? 'onDark' : 'primary'} size="sm" href="/about/contact/" gtm={{ location: 'nav' }}>Start your assessment</Button>
        </div>
      </div>
    </header>);

};

// ============================================================
// Hero — full-bleed rooftop drone photo. Strong headline + 4 metrics.
// ============================================================
const Hero = () =>
<section data-gi-resp="hero" style={{
  position: 'relative', background: 'var(--gi-wise-blue)',
  color: '#fff', overflow: 'hidden',
  minHeight: 820,
  marginTop: -82
}}>
    <img
    src={`${window.GI_BASE}assets/projects/food-manufacturer-966kw-photo.png`}
    alt="Aerial drone view of 966 kW commercial rooftop solar installation on food manufacturing facility in Southern Ontario"
    style={{
      position: 'absolute', inset: 0, width: '100%', height: '100%',
      objectFit: 'cover', filter: 'saturate(0.96) contrast(1.04) brightness(0.78)'
    }} />
  
    {/* Editorial gradient — darker at bottom so metrics are readable */}
    <div style={{
    position: 'absolute', inset: 0,
    background: 'linear-gradient(180deg, rgba(15,37,69,0.45) 0%, rgba(15,37,69,0.55) 50%, rgba(10,24,45,0.88) 100%)'
  }} />

    <div style={{
    position: 'relative', maxWidth: 1440, margin: '0 auto',
    padding: '180px 48px 0', minHeight: 820,
    display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
  }}>
      {/* Upper block: eyebrow + headline + subtitle + CTAs */}
      <div style={{ maxWidth: 1080, paddingBottom: 64 }}>
        <div style={{ marginBottom: 28 }}>
          <Eyebrow onDark>Conserve · Power · Transform</Eyebrow>
        </div>
        <h1 style={{
        font: '500 88px/92px var(--ff-sans)', letterSpacing: '-0.035em',
        color: '#fff', margin: 0, textWrap: 'balance'
      }}>
          Commercial solar and energy strategy for <span style={{ color: '#D4A24C' }}>Canadian manufacturing and industrial facilities</span>.
        </h1>
        <p style={{
        font: '400 20px/32px var(--ff-sans)', color: 'rgba(255,255,255,0.82)',
        margin: '32px 0 44px', maxWidth: 720, textWrap: 'pretty'
      }}>
          Industrial energy audits, rooftop solar, battery storage, and EV
          charging — engineered to reduce electricity costs across Ontario,
          Alberta, and BC. One accountable team, from first site visit through
          year twenty-five.
        </p>
        <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
          <Button variant="onDark" size="lg" href="/about/contact/" gtm={{ location: 'homepage-hero' }}>Start your assessment</Button>
          <Button variant="outlineOnDark" size="lg" href="/projects/" gtm={{ location: 'homepage-hero' }}>See our projects</Button>
        </div>
      </div>

      {/* Lower block: 4 key metrics bar — sits on the bottom dark gradient */}
      <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
      borderTop: '1px solid rgba(255,255,255,0.22)',
      paddingBottom: 48
    }}>
        {[
      { big: '15–21%', small: 'Typical post-install IRR on commercial projects' },
      { big: '4.6 yr', small: 'Median payback across completed installations' },
      { big: '$7M+', small: 'Verified lifetime savings, single-client program' },
      { big: '200+', small: 'Commercial and industrial projects since 2012' }].
      map((m, i) =>
      <div key={i} style={{
        padding: '36px 32px 0 0',
        borderRight: i < 3 ? '1px solid rgba(255,255,255,0.22)' : 'none',
        paddingLeft: i > 0 ? 36 : 0
      }}>
            <div style={{
          font: '500 52px/1 var(--ff-sans)', letterSpacing: '-0.03em',
          color: '#fff', marginBottom: 12
        }}>{m.big}</div>
            <div style={{
          font: '400 13px/20px var(--ff-sans)', color: 'rgba(255,255,255,0.68)',
          maxWidth: 230, textWrap: 'pretty'
        }}>{m.small}</div>
          </div>
      )}
      </div>
    </div>
  </section>;


// ============================================================
// LogoStrip — curated horizontal strip
// ============================================================
const ClientMark = ({ name, variant = 'sans' }) => {
  const label = {
    sans: { fontFamily: 'var(--ff-sans)', fontWeight: 600, fontSize: 22, letterSpacing: '-0.02em' },
    light: { fontFamily: 'var(--ff-sans)', fontWeight: 300, fontSize: 24, letterSpacing: '0.08em', textTransform: 'uppercase' },
    serif: { fontFamily: 'Georgia, serif', fontWeight: 400, fontSize: 24, letterSpacing: '-0.01em', fontStyle: 'italic' },
    mono: { fontFamily: 'var(--ff-mono)', fontWeight: 500, fontSize: 18, letterSpacing: '0.14em', textTransform: 'uppercase' },
    condensed: { fontFamily: 'var(--ff-sans)', fontWeight: 700, fontSize: 20, letterSpacing: '-0.02em', textTransform: 'uppercase' },
    tight: { fontFamily: 'var(--ff-sans)', fontWeight: 500, fontSize: 22, letterSpacing: '-0.04em' }
  }[variant];
  return (
    <span style={{
      ...label,
      color: 'var(--gi-graphite)',
      whiteSpace: 'nowrap',
      padding: '0 6px'
    }}>{name}</span>);

};

const LogoStrip = () => {
  // Real client logos (green on transparent). Heights balanced by optical weight, not raw size.
  const clients = [
    { name: 'Amazon', src: `${window.GI_BASE}assets/clients/amazon.webp`, height: 38 },
    { name: 'Belt Conveyor Guarding', src: `${window.GI_BASE}assets/clients/belt-conveyor-guarding-logo.webp`, height: 38 },
    { name: 'Nestlé', src: `${window.GI_BASE}assets/clients/nestle.webp`, height: 46 },
    { name: 'Magna', src: `${window.GI_BASE}assets/clients/magna.webp`, height: 36 },
    { name: 'WestRock', src: `${window.GI_BASE}assets/clients/westrock.webp`, height: 38 },
    { name: 'Pinacle', src: `${window.GI_BASE}assets/clients/pinacle.webp`, height: 32 },
    { name: 'Buds Collision', src: `${window.GI_BASE}assets/clients/buds-collision.webp`, height: 36 },
    { name: 'CBB', src: `${window.GI_BASE}assets/clients/cbb-logo.webp`, height: 38 },
    { name: 'Elton Manufacturing', src: `${window.GI_BASE}assets/clients/elton-manufacturing.webp`, height: 36 },
    { name: 'Farm', src: `${window.GI_BASE}assets/clients/farm-logo.webp`, height: 38 },
    { name: 'Haul-All', src: `${window.GI_BASE}assets/clients/haul-all.webp`, height: 34 },
    { name: 'Mutual Development', src: `${window.GI_BASE}assets/clients/mutual-development-logo.webp`, height: 38 },
    { name: 'Northland', src: `${window.GI_BASE}assets/clients/northland-logo.webp`, height: 38 },
    { name: 'Rabba', src: `${window.GI_BASE}assets/clients/rabba-logo.webp`, height: 40 },
    { name: 'Syfilco', src: `${window.GI_BASE}assets/clients/syfilco-leaf-logo.webp`, height: 42 },
    { name: 'Vermeer', src: `${window.GI_BASE}assets/clients/vermeers-logo-horizontal.webp`, height: 32 },
  ];

  const loop = [...clients, ...clients, ...clients];

  return (
    <section style={{ background: 'var(--gi-paper-cream)', padding: 'var(--section-y-md) 0 0', overflow: 'hidden' }}>

      <div style={{ position: 'relative' }}>
        <div aria-hidden="true" style={{
          position: 'absolute', top: 0, bottom: 0, left: 0, width: 200,
          background: 'linear-gradient(90deg, var(--gi-paper-cream) 0%, rgba(243,244,241,0) 100%)',
          zIndex: 2, pointerEvents: 'none'
        }} />
        <div aria-hidden="true" style={{
          position: 'absolute', top: 0, bottom: 0, right: 0, width: 200,
          background: 'linear-gradient(270deg, var(--gi-paper-cream) 0%, rgba(243,244,241,0) 100%)',
          zIndex: 2, pointerEvents: 'none'
        }} />

        <div className="gi-marquee-track" style={{
          display: 'flex', alignItems: 'center', gap: 0,
          width: 'max-content',
          animation: 'gi-marquee 38s linear infinite'
        }}>
          {loop.map((c, i) =>
          <React.Fragment key={i}>
              <img
              src={c.src}
              alt={c.name}
              style={{
                height: c.height,
                width: 'auto',
                display: 'block',
                flexShrink: 0,
                opacity: 0.88
              }} />
            
              <span aria-hidden="true" style={{
              width: 4, height: 4, borderRadius: '50%',
              background: 'rgba(15,33,51,0.22)',
              margin: '0 56px',
              flexShrink: 0
            }} />
            </React.Fragment>
          )}
        </div>
      </div>

      <style>{`
        @keyframes gi-marquee {
          from { transform: translateX(0); }
          to   { transform: translateX(calc(-100% / 3)); }
        }
        .gi-marquee-track:hover { animation-play-state: paused; }
      `}</style>
    </section>);

};

Object.assign(window, { NavBar, Hero, LogoStrip });