// section-pillars-process.jsx — v3: visual + structured.
// Pillars: cream. Process: deep-ink with connector line + icons.

// ============================================================
// Three Pillars — Conserve, Power, Transform
// ============================================================
const ThreePillars = () => {
  const pillars = [
    {
      num: '01',
      title: 'Conserve',
      summary: 'Audit and measure first. Eliminate waste in lighting, HVAC, and controls before adding new systems.',
      bullets: ['Industrial-grade energy audits and metering', 'LED retrofits and HVAC recommissioning', 'Utility bill forensics and tariff optimisation'],
      icon: 'gauge',
      href: '/solutions/energy-audits/',
    },
    {
      num: '02',
      title: 'Power',
      summary: 'Generate and store the electricity you already use — rooftop solar, ground-mount, and batteries sized to your load profile.',
      bullets: ['Commercial rooftop and ground-mount solar', 'Battery energy storage systems', 'Interconnection and PPA structuring'],
      icon: 'sun',
      href: '/solutions/commercial-solar/',
    },
    {
      num: '03',
      title: 'Transform',
      summary: 'Electrify fleets, heat, and processes to lock in decades of operating savings and reduce carbon exposure.',
      bullets: ['EV charging infrastructure for fleets', 'Heat-pump and process electrification', 'Load management and demand response'],
      icon: 'zap',
      href: '/solutions/ev-charging/',
    },
  ];

  return (
    <section id="pillars" data-gi-resp="pillars" className="gi-section gi-section--light" style={{
      background: 'var(--gi-paper-cream)',
      padding: '128px 0 160px',
    }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <SectionHeader
          eyebrowClassName="gi-eyebrow--green"
          eyebrow="Our approach"
          title="Three pillars. One accountable team."
          sub="We plan, install, and operate integrated energy systems for commercial and industrial facilities across Canada — strategy, delivery, and operations from a single partner."
        />

        <div style={{
          marginTop: 104,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }}>
          {pillars.map(p => (
            <article key={p.num} style={{
              background: '#fff',
              border: '1px solid rgba(15,33,51,0.08)',
              padding: '44px 40px 48px',
              display: 'flex', flexDirection: 'column',
              minHeight: 460,
              position: 'relative',
            }}>
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                marginBottom: 36,
              }}>
                <span style={{
                  fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.14em',
                  color: 'var(--gi-sage-accent)', fontWeight: 500,
                }}>{p.num}</span>
                <div style={{
                  width: 56, height: 56, borderRadius: 4,
                  background: 'rgba(58,93,73,0.08)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name={p.icon} size={26} color="var(--gi-soft-green)" />
                </div>
              </div>

              <h3 style={{
                font: '500 40px/44px var(--ff-sans)', letterSpacing: '-0.022em',
                color: 'var(--gi-deep-ink)', margin: '0 0 16px',
              }}>{p.title}</h3>

              <p style={{
                font: '400 16px/26px var(--ff-sans)', color: 'var(--gi-slate)',
                margin: '0 0 32px', textWrap: 'pretty',
              }}>{p.summary}</p>

              <ul style={{
                listStyle: 'none', padding: 0, margin: '0 0 36px',
                borderTop: '1px solid rgba(15,33,51,0.08)',
              }}>
                {p.bullets.map(b => (
                  <li key={b} style={{
                    padding: '14px 0',
                    borderBottom: '1px solid rgba(15,33,51,0.08)',
                    font: '400 14.5px/22px var(--ff-sans)', color: 'var(--gi-deep-ink)',
                  }}>{b}</li>
                ))}
              </ul>

              <div style={{ marginTop: 'auto' }}>
                <Button
                  variant="ghost" size="sm"
                  href={p.href}
                  gtm={{ location: 'homepage-pillars', stage: 'awareness' }}>Explore {p.title.toLowerCase()} →</Button>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============================================================
// HowItWorks — deep-ink surface, horizontal flow with connector line
// ============================================================
const HowItWorks = () => {
  const steps = [
    {
      num: '01',
      icon: 'search',
      title: 'Assess',
      copy: 'A site visit and utility-bill forensics define the baseline — loads, tariffs, roof structure, and interconnection capacity.',
      artifact: 'Assessment report + baseline model',
    },
    {
      num: '02',
      icon: 'drafting-compass',
      title: 'Design',
      copy: 'Engineers model generation, storage, and load management together — sized for your operation, not a catalog part number.',
      artifact: 'System design + IRR and payback model',
    },
    {
      num: '03',
      icon: 'hammer',
      title: 'Install',
      copy: 'Our crews — not a subcontractor chain — build, commission, and connect every project on schedule.',
      artifact: 'Commissioned system + utility sign-off',
    },
    {
      num: '04',
      icon: 'activity',
      title: 'Operate',
      copy: 'Monitoring, service contracts, and performance reviews protect your economics for the full twenty-five year life.',
      artifact: 'Monitoring + annual performance reviews',
    },
  ];

  return (
    <section id="process" data-gi-resp="process" className="gi-section gi-section--dark" style={{
      background: 'var(--gi-deep-ink)', color: '#fff',
      padding: '176px 0 176px',
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <SectionHeader
          onDark
          eyebrowClassName="gi-eyebrow--gold"
          eyebrow="The process"
          title="A single four-step process."
          sub="From first utility bill to year-twenty-five monitoring, one team signs off on every deliverable. No subcontractor handoffs, no outsourced engineering."
        />

        {/* Horizontal step flow */}
        <div style={{ marginTop: 120, position: 'relative' }}>
          {/* Connector line */}
          <div aria-hidden="true" style={{
            position: 'absolute',
            top: 40, left: '12.5%', right: '12.5%',
            height: 1, background: 'rgba(255,255,255,0.18)',
            zIndex: 0,
          }} />
          {/* Dot markers on the line */}
          {[0,1,2,3].map(i => (
            <div key={i} aria-hidden="true" style={{
              position: 'absolute', top: 35,
              left: `calc(${12.5 + (i * 25)}% )`,
              width: 11, height: 11, borderRadius: '50%',
              background: 'var(--gi-sage-accent)',
              border: '2px solid var(--gi-deep-ink)',
              transform: 'translateX(-50%)',
              zIndex: 1,
            }} />
          ))}

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
            position: 'relative', zIndex: 2,
          }}>
            {steps.map((s) => (
              <div key={s.num} style={{
                padding: '0 28px',
                display: 'flex', flexDirection: 'column',
                alignItems: 'flex-start',
              }}>
                {/* Icon badge aligned with the connector dot */}
                <div style={{
                  width: 80, height: 80,
                  background: 'rgba(159,189,174,0.08)',
                  border: '1px solid rgba(159,189,174,0.28)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginTop: 0,
                  marginBottom: 36,
                }}>
                  <Icon name={s.icon} size={30} color="rgba(159,189,174,1)" />
                </div>

                <span style={{
                  fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.14em',
                  color: 'var(--gi-sage-accent)', fontWeight: 500, marginBottom: 14,
                }}>STEP {s.num}</span>

                <h3 style={{
                  font: '500 36px/40px var(--ff-sans)', letterSpacing: '-0.02em',
                  color: '#fff', margin: '0 0 18px',
                }}>{s.title}</h3>

                <p style={{
                  font: '400 15.5px/24px var(--ff-sans)',
                  color: 'rgba(255,255,255,0.72)',
                  margin: '0 0 28px', textWrap: 'pretty',
                }}>{s.copy}</p>

                <div style={{
                  marginTop: 'auto',
                  paddingTop: 18,
                  borderTop: '1px solid rgba(255,255,255,0.14)',
                  font: '400 12.5px/18px var(--ff-sans)',
                  color: 'rgba(255,255,255,0.52)',
                  width: '100%',
                }}>
                  <span style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.14em',
                    color: 'rgba(159,189,174,0.9)',
                  }}>DELIVERABLE</span>
                  <div style={{ color: '#fff', fontWeight: 500, marginTop: 6, fontSize: 14, lineHeight: '20px' }}>
                    {s.artifact}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ThreePillars, HowItWorks });