// var-testimonials.jsx — Testimonials A/B/C. Light grey OR light green only.

const QUOTES = [
  { hero: '“Financial modelling translated directly into operating results.”',
    body: 'Green Integrations delivered a detailed financial model and system design that aligned with our production demands. The project was executed on time and performed as expected.',
    name: 'Robert Engel',  org: 'Cober Solutions',       sector: 'Print manufacturer · ON' },
  { hero: '“Reliable execution and long-term service support.”',
    body: 'Projects were completed efficiently, and ongoing support has remained strong. The team continues to deliver consistent service across multiple engagements.',
    name: 'Keith Lawless', org: 'Air Transat', sector: 'Aviation · ON' },
  { hero: '“Consistent delivery across multiple projects.”',
    body: 'We selected Green Integrations for their depth of analysis. Over several projects, they have consistently delivered strong results and remained a reliable partner.',
    name: 'Luigi De Serio', org: 'Axiom',      sector: 'Manufacturing · ON' },
  { hero: '“Responsive and aligned with operational constraints.”',
    body: 'Green Integrations worked within our site requirements and timelines, delivering a professional and responsive experience from assessment through execution.',
    name: 'John Blanchard',  org: 'Markland',        sector: 'Commercial Real Estate · ON' },
  { hero: '“Delivered on schedule with minimal operational disruption.”',
    body: 'The team worked safely, efficiently, and around our operations. Execution was clean, organized, and aligned with the project timeline.',
    name: 'Mike Book',     org: 'Richmond Steel',  sector: 'Industrial · ON' },
  { hero: '“Clear guidance across multiple system options.”',
    body: 'Green Integrations presented multiple system approaches and worked with us to evaluate each against our operational requirements and budget. The process provided clarity on the right technology and path forward.',
    name: 'David Sliwin',  org: 'Athletic Knit',   sector: 'Sports apparel manufacturer · ON' },
];

const T_HEAD = 'Built on long-term performance.';
const T_SUB  = 'End-to-end delivery, strong financial outcomes, and partnerships that extend beyond commissioning.';

// ============================================================
// A — EDITORIAL (light grey)
// Pull-quote style, large italic-free quote mark, refined attribution block.
// ============================================================
// const TestimonialsVersionA = () => {
//   const [i, setI] = React.useState(0);
//   const q = QUOTES[i];
//   return (
//     <section style={{ background: '#EFEFEC', color: 'var(--gi-deep-ink)', padding: '128px 0' }}>
//       <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
//         <SectionHeader eyebrow="Long-term partnerships" title={T_HEAD} sub={T_SUB} />

//         <div style={{
//           marginTop: 88,
//           display: 'grid', gridTemplateColumns: '160px 1fr', gap: 56,
//           alignItems: 'start',
//         }}>
//           <div style={{
//             font: '500 140px/0.8 "Georgia", serif',
//             color: 'var(--gi-sage-accent)',
//             paddingTop: 12,
//           }}>“</div>
//           <div>
//             <h3 style={{
//               font: '500 44px/52px var(--ff-sans)', letterSpacing: '-0.022em',
//               color: 'var(--gi-deep-ink)', margin: '0 0 28px', textWrap: 'balance',
//               maxWidth: 960,
//             }}>{q.hero}</h3>
//             <p style={{
//               font: '400 18px/30px var(--ff-sans)', color: 'var(--gi-slate)',
//               margin: '0 0 40px', maxWidth: 720, textWrap: 'pretty',
//             }}>{q.body}</p>
//             <div style={{
//               paddingTop: 22, borderTop: '1px solid rgba(15,33,51,0.20)',
//               display: 'flex', alignItems: 'baseline', gap: 20, flexWrap: 'wrap',
//             }}>
//               <span style={{ font: '500 18px/24px var(--ff-sans)', color: 'var(--gi-deep-ink)' }}>{q.name}</span>
//               <span style={{ font: '400 16px/24px var(--ff-sans)', color: 'var(--gi-slate)' }}>· {q.org}</span>
//               <span style={{
//                 fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em',
//                 color: 'var(--gi-sage-accent)', textTransform: 'uppercase', fontWeight: 500,
//               }}>{q.sector}</span>
//             </div>
//           </div>
//         </div>

//         <div style={{
//           marginTop: 56, display: 'grid', gridTemplateColumns: `repeat(${QUOTES.length}, 1fr)`,
//           borderTop: '1px solid rgba(15,33,51,0.18)',
//         }}>
//           {QUOTES.map((qq, idx) => {
//             const on = idx === i;
//             return (
//               <button key={qq.name} onClick={() => setI(idx)} style={{
//                 background: 'transparent', border: 'none', cursor: 'pointer',
//                 padding: '24px 0', textAlign: 'left',
//                 borderTop: on ? '2px solid var(--gi-soft-green)' : '2px solid transparent',
//                 marginTop: -1,
//               }}>
//                 <div style={{
//                   font: '500 17px/22px var(--ff-sans)',
//                   color: on ? 'var(--gi-deep-ink)' : 'var(--gi-graphite)',
//                 }}>{qq.org}</div>
//                 <div style={{
//                   font: '400 12.5px/18px var(--ff-sans)', marginTop: 4,
//                   color: on ? 'var(--gi-slate)' : 'var(--gi-graphite)',
//                 }}>{qq.sector}</div>
//               </button>
//             );
//           })}
//         </div>
//       </div>
//     </section>
//   );
// };

// // ============================================================
// // B — MINIMAL CLEAN BLOCK (light green)
// // All three quotes shown at once in a calm 3-up grid. No nav. Readability first.
// // ============================================================
// const TestimonialsVersionB = () => (
//   <section style={{ background: '#E8EFE9', color: 'var(--gi-deep-ink)', padding: '128px 0' }}>
//     <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
//       <SectionHeader eyebrow="Long-term partnerships" title={T_HEAD} sub={T_SUB} />

//       <div style={{
//         marginTop: 88,
//         display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
//       }}>
//         {QUOTES.map(q => (
//           <article key={q.name} style={{
//             background: 'rgba(255,255,255,0.55)',
//             border: '1px solid rgba(15,33,51,0.10)',
//             padding: '36px 36px 32px',
//             display: 'flex', flexDirection: 'column',
//             minHeight: 360,
//           }}>
//             <div style={{
//               fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em',
//               color: 'var(--gi-sage-accent)', fontWeight: 500,
//               textTransform: 'uppercase', marginBottom: 22,
//             }}>{q.sector}</div>
//             <h3 style={{
//               font: '500 22px/30px var(--ff-sans)', letterSpacing: '-0.01em',
//               color: 'var(--gi-deep-ink)', margin: '0 0 16px', textWrap: 'balance',
//             }}>{q.hero}</h3>
//             <p style={{
//               font: '400 14.5px/24px var(--ff-sans)', color: 'var(--gi-slate)',
//               margin: 0, flex: 1, textWrap: 'pretty',
//             }}>{q.body}</p>
//             <div style={{
//               marginTop: 24, paddingTop: 18,
//               borderTop: '1px solid rgba(15,33,51,0.14)',
//             }}>
//               <div style={{ font: '500 15px/20px var(--ff-sans)', color: 'var(--gi-deep-ink)' }}>{q.name}</div>
//               <div style={{ font: '400 13px/20px var(--ff-sans)', color: 'var(--gi-slate)' }}>{q.org}</div>
//             </div>
//           </article>
//         ))}
//       </div>
//     </div>
//   </section>
// );

// ============================================================
// C — SLIGHTLY MORE PREMIUM (light grey, refined)
// Featured quote on a white elevated card + three compact attribution tiles below.
// ============================================================
const TestimonialsVersionC = () => {
  const [i, setI] = React.useState(0);
  const [displayed, setDisplayed] = React.useState(0);
  const [visible, setVisible] = React.useState(true);
  const timer = React.useRef(null);
  const goTo = (next) => {
    if (next === i) return;
    setI(next);
    setVisible(false);
    if (timer.current) clearTimeout(timer.current);
    timer.current = setTimeout(() => {
      setDisplayed(next);
      setVisible(true);
    }, 260);
  };
  React.useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
  const q = QUOTES[displayed];
  return (
    <section data-gi-resp="testimonials-v3" style={{ background: '#EEF0ED', color: 'var(--gi-deep-ink)', padding: '90px 0' }}>
      <div data-gi-resp="container" style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <SectionHeader eyebrowClassName="gi-eyebrow--green" eyebrow="Long-term partnerships" title={T_HEAD} sub={T_SUB} />

        <div data-gi-reveal data-gi-resp="testimonial-card" style={{
          marginTop: 88,
          background: '#fff',
          border: '1px solid rgba(15,33,51,0.10)',
          boxShadow: '0 2px 4px rgba(15,33,51,0.04), 0 12px 40px -16px rgba(15,33,51,0.12)',
          padding: '64px 72px',
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 72,
          alignItems: 'center',
        }}>
          <div className="gi-quote-fade" data-state={visible ? 'in' : 'out'}>
            <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em',
              color: 'var(--gi-sage-accent)', fontWeight: 500,
              textTransform: 'uppercase', marginBottom: 20,
            }}>Client testimonial</div>
            <h3 style={{
              font: '500 34px/42px var(--ff-sans)', letterSpacing: '-0.02em',
              color: 'var(--gi-deep-ink)', margin: '0 0 24px', textWrap: 'balance',
            }}>{q.hero}</h3>
            <p style={{
              font: '400 17px/28px var(--ff-sans)', color: 'var(--gi-slate)',
              margin: 0, maxWidth: 620, textWrap: 'pretty',
            }}>{q.body}</p>
          </div>
          <div className="gi-quote-fade" data-state={visible ? 'in' : 'out'} style={{
            borderLeft: '1px solid rgba(15,33,51,0.14)', paddingLeft: 48,
          }}>
            <div style={{
              font: '500 22px/28px var(--ff-sans)', letterSpacing: '-0.01em',
              color: 'var(--gi-deep-ink)', marginBottom: 8,
            }}>{q.name}</div>
            <div style={{
              font: '400 15px/22px var(--ff-sans)', color: 'var(--gi-slate)', marginBottom: 12,
            }}>{q.org}</div>
            <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em',
              color: 'var(--gi-sage-accent)', fontWeight: 500, textTransform: 'uppercase',
            }}>{q.sector}</div>
          </div>
        </div>

        {/* Compact selector */}
        <div data-gi-resp="testimonial-selector" style={{
          marginTop: 16,
          display: 'grid', gridTemplateColumns: `repeat(${QUOTES.length}, 1fr)`,
          gap: 12,
        }}>
          {QUOTES.map((qq, idx) => {
            const on = idx === i;
            return (
              <button key={qq.name + idx} onClick={() => goTo(idx)} style={{
                background: on ? '#fff' : 'transparent',
                border: `1px solid ${on ? 'var(--gi-soft-green)' : 'rgba(15,33,51,0.14)'}`,
                padding: '18px 22px', textAlign: 'left', cursor: 'pointer',
              }}>
                <div style={{ font: '500 15px/20px var(--ff-sans)', color: 'var(--gi-deep-ink)' }}>{qq.org}</div>
                <div style={{ font: '400 12.5px/18px var(--ff-sans)', color: 'var(--gi-slate)', marginTop: 3 }}>{qq.name}</div>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { TestimonialsVersionC });