/* global React, C, FONT_DISP, FONT_SANS, Eyebrow, Button, useScrollY, useWindowWidth, useReveal, useCountUp */

/* --- StatCard with animated bars + counting number -------------- */
function StatCard({ animate = true, scrollFactor = 0 }) {
  const [ref, shown] = useReveal();
  const count = useCountUp(142, { active: animate && shown });
  const bars = [46, 69, 38, 92, 62, 100, 77];
  const labels = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
  return (
    <div ref={ref} style={{
      background: '#fff', border: `1px solid ${C.borderWarm}`, borderRadius: 12,
      padding: 28, display: 'flex', flexDirection: 'column', gap: 18,
      width: '100%', maxWidth: 480, boxSizing: 'border-box',
      transform: `translateY(${scrollFactor * -14}px)`,
      transition: 'transform 80ms linear',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: C.sage }} />
        <span style={{ fontFamily: FONT_SANS, fontWeight: 500, fontSize: 12, color: C.muted }}>
          Operations system · Last 7 days
        </span>
      </div>
      <div style={{
        fontFamily: FONT_DISP, fontWeight: 700, fontSize: 56, lineHeight: 1,
        color: C.navy, letterSpacing: '-0.01em',
      }}>
        {count} <span style={{ fontSize: 28, color: C.muted, fontWeight: 600 }}>hrs</span>
      </div>
      <div style={{ fontFamily: FONT_SANS, fontSize: 14, color: C.muted }}>
        Reporting time saved this month
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14, height: 140, marginTop: 4 }}>
        {bars.map((h, i) => (
          <div key={i} style={{
            flex: 1,
            height: shown ? `${h}%` : '6%',
            background: i === 3 ? C.orange : C.navy,
            borderRadius: 4,
            transition: `height 900ms cubic-bezier(0.2,0.8,0.2,1) ${i * 60}ms`,
          }}/>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 14, fontFamily: FONT_SANS, fontSize: 11, color: C.mutedSoft }}>
        {labels.map((l, i) => <span key={i} style={{ flex: 1, textAlign: 'center' }}>{l}</span>)}
      </div>
    </div>
  );
}

/* --- Who-for / Who-not-for -------------------------------------- */
function WhoFor() {
  const [ref, shown] = useReveal();
  const w = useWindowWidth();
  const isMobile = w <= 768;
  const forList = [
    'Operations leaders with sites, regions, or portfolios to monitor',
    'Finance controllers running monthly close on spreadsheets',
    'Marketing managers reconciling data across five source systems',
    'Enterprises with 250+ headcount and a recurring reporting workflow',
  ];
  const notForList = [
    'Teams looking for an off-the-shelf BI seat license',
    'Early-stage startups without a defined reporting workflow',
    'Projects that want a strategy deck without execution',
    'Buyers shopping primarily on lowest price',
  ];
  return (
    <section style={{ background: C.white, padding: isMobile ? '72px 0' : '120px 0' }} ref={ref}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: isMobile ? '0 24px' : '0 80px',
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 48 : 80,
      }}>
        <div>
          <Eyebrow>Who this is for</Eyebrow>
          <h3 style={{
            fontFamily: FONT_DISP, fontWeight: 700, fontSize: 32, lineHeight: '40px',
            color: C.navy, margin: '14px 0 28px', letterSpacing: '-0.01em',
          }}>Operators running real workflows at scale.</h3>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {forList.map((t, i) => (
              <li key={i} style={{
                display: 'flex', alignItems: 'flex-start', gap: 14,
                opacity: shown ? 1 : 0,
                transform: shown ? 'translateY(0)' : 'translateY(12px)',
                transition: `opacity 500ms ease ${i * 70}ms, transform 500ms cubic-bezier(0.2,0.8,0.2,1) ${i * 70}ms`,
              }}>
                <span style={{
                  width: 22, height: 22, borderRadius: '50%', background: C.sageTint,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0, marginTop: 2,
                }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: C.sage }} />
                </span>
                <span style={{
                  fontFamily: FONT_SANS, fontSize: 16, lineHeight: '26px', color: C.ink,
                }}>{t}</span>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <Eyebrow color={C.orange}>Who this isn't for</Eyebrow>
          <h3 style={{
            fontFamily: FONT_DISP, fontWeight: 700, fontSize: 32, lineHeight: '40px',
            color: C.navy, margin: '14px 0 28px', letterSpacing: '-0.01em',
          }}>We'd rather say no than fit badly.</h3>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {notForList.map((t, i) => (
              <li key={i} style={{
                display: 'flex', alignItems: 'flex-start', gap: 14,
                opacity: shown ? 1 : 0,
                transform: shown ? 'translateY(0)' : 'translateY(12px)',
                transition: `opacity 500ms ease ${i * 70 + 120}ms, transform 500ms cubic-bezier(0.2,0.8,0.2,1) ${i * 70 + 120}ms`,
              }}>
                <span style={{
                  width: 22, height: 22, borderRadius: '50%', background: C.orangeTint,
                  color: C.orange, fontFamily: FONT_SANS, fontWeight: 700, fontSize: 12,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0, marginTop: 2,
                }}>✕</span>
                <span style={{
                  fontFamily: FONT_SANS, fontSize: 16, lineHeight: '26px', color: C.ink,
                }}>{t}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

/* --- Two extremes / Where we sit -------------------------------- */
function WhereWeSit() {
  const [ref, shown] = useReveal();
  const w = useWindowWidth();
  const isMobile = w <= 768;
  return (
    <section id="approach" style={{ background: C.warm, padding: isMobile ? '72px 0' : '120px 0' }} ref={ref}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '0 24px' : '0 80px' }}>
        <div style={{ maxWidth: 900, marginBottom: isMobile ? 40 : 64 }}>
          <Eyebrow>Where we sit</Eyebrow>
          <h2 style={{
            fontFamily: FONT_DISP, fontWeight: 700,
            fontSize: isMobile ? 32 : 48, lineHeight: isMobile ? '40px' : '56px',
            color: C.navy, margin: '14px 0 16px', letterSpacing: '-0.01em',
          }}>Between two unhelpful extremes.</h2>
          <p style={{
            fontFamily: FONT_SANS, fontSize: isMobile ? 16 : 19, lineHeight: '30px', color: C.muted,
            margin: 0, maxWidth: 760,
          }}>
            Off-the-shelf BI tools are too generic. A full in-house data team is too heavy. Key Metrics is the option that fits how your team actually works.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 20 }}>
          {[
            { tone: 'neg', eyebrow: 'Too generic', title: 'Off-the-shelf BI',
              body: 'Generic tools that force your team to bend the workflow to fit. Per-seat pricing that scales the wrong way.' },
            { tone: 'neg', eyebrow: 'Too heavy', title: 'In-house data team',
              body: 'Quarters of hiring and ramp before the first system ships. Roadmap competes with every other team in the company.' },
            { tone: 'pos', eyebrow: 'Operational fit', title: 'Key Metrics',
              body: 'A system built around the workflow you already have. Engineered to enterprise standards. One accountable partner.' },
          ].map((c, i) => (
            <div key={i} style={{
              background: c.tone === 'pos' ? C.navy : C.orangeTint,
              borderRadius: 12, padding: 32,
              display: 'flex', flexDirection: 'column', gap: 12, minHeight: 260,
              opacity: shown ? 1 : 0,
              transform: shown ? 'translateY(0)' : 'translateY(24px)',
              transition: `opacity 600ms ease ${i * 100}ms, transform 700ms cubic-bezier(0.2,0.8,0.2,1) ${i * 100}ms`,
            }}>
              <div style={{
                fontFamily: FONT_SANS, fontWeight: 700, fontSize: 12,
                letterSpacing: '0.12em', textTransform: 'uppercase',
                color: c.tone === 'pos' ? C.orange : C.orange,
              }}>{c.eyebrow}</div>
              <h3 style={{
                fontFamily: FONT_DISP, fontWeight: 700, fontSize: 26, lineHeight: '32px',
                color: c.tone === 'pos' ? '#fff' : C.ink, margin: 0,
              }}>{c.title}</h3>
              <p style={{
                fontFamily: FONT_SANS, fontSize: 15, lineHeight: '24px',
                color: c.tone === 'pos' ? C.navyMuted : 'rgba(20,27,42,0.8)',
                margin: 0,
              }}>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { StatCard, WhoFor, WhereWeSit });