function HeroTransform() {
  const [phase, setPhase] = React.useState(0);
  const running = phase === 1;

  React.useEffect(() => {
    const seq = () => {
      setPhase(0);
      const t1 = setTimeout(() => setPhase(1), 3200);
      const t2 = setTimeout(() => setPhase(2), 6000);
      const t3 = setTimeout(seq, 9800);
      return () => {clearTimeout(t1);clearTimeout(t2);clearTimeout(t3);};
    };
    const cancel = seq();
    return cancel;
  }, []);

  const beforeLines = [
  { label: 'pull material costs', w: '88%' },
  { label: 'cross-check labor & rates', w: '64%' },
  { label: 'apply markups + contingency', w: '78%' },
  { label: 'format pdf, double-check', w: '54%' },
  { label: 'attach + email client', w: '70%' }];

  const afterLines = [
  'project scope & materials',
  'labor + timeline breakdown',
  'total with payment terms',
  'client-ready pdf'];


  const minH = 360;

  return (
    <div style={{ width: '100%', maxWidth: 460, position: 'relative' }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 14,
        padding: '0 4px 14px', borderBottom: '1px solid var(--border)',
        marginBottom: 14
      }}>
        <div style={{
          width: 6, height: 6, borderRadius: 1,
          background: phase === 2 ? 'var(--accent)' : 'rgba(var(--fg-tint),0.25)',
          transition: 'background 240ms ease'
        }} />
        <span className="eyebrow" style={{ color: 'var(--muted)' }}>
          QUOTING&nbsp;/&nbsp;<span style={{ color: phase === 2 ? 'var(--accent)' : 'var(--fg)' }}>
            {phase === 0 ? 'TODAY' : phase === 1 ? 'PROCESSING' : 'AFTER'}
          </span>
        </span>
        <span style={{ flex: 1 }} />
        <span style={{
          fontFamily: "'Space Mono', monospace", fontSize: 10, letterSpacing: '0.16em',
          textTransform: 'uppercase',
          color: phase === 2 ? 'var(--accent)' : 'var(--muted)',
          transition: 'color 240ms ease'
        }}>
          {phase === 0 ? '~ 90 min' : phase === 1 ? '— —' : '~ 4 min'}
        </span>
      </div>

      <div style={{ position: 'relative', minHeight: minH }}>
        <AnimatePresence mode="wait">
          {phase === 0 &&
          <motion.div key="before"
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -8 }}
          transition={{ duration: 0.45 }}
          style={{
            background: 'rgba(var(--fg-tint),0.025)',
            border: '1px solid var(--border)',
            borderRadius: 4, padding: 22
          }}>
              {beforeLines.map((l, i) =>
            <motion.div key={i}
            initial={{ opacity: 0, x: -6 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: i * 0.09, duration: 0.4 }}
            style={{ marginBottom: 14 }}>
                  <div style={{
                fontFamily: "'Space Mono', monospace", fontSize: 10,
                letterSpacing: '0.08em', textTransform: 'uppercase',
                color: 'var(--muted)', marginBottom: 6
              }}>{l.label}</div>
                  <div style={{ height: 4, background: 'rgba(var(--fg-tint),0.06)', borderRadius: 1 }}>
                    <motion.div
                  initial={{ width: 0 }}
                  animate={{ width: l.w }}
                  transition={{ delay: i * 0.09 + 0.1, duration: 0.7, ease: 'easeOut' }}
                  style={{ height: '100%', background: 'rgba(var(--fg-tint),0.18)', borderRadius: 1 }} />
                  </div>
                </motion.div>
            )}
            </motion.div>
          }

          {phase === 1 &&
          <motion.div key="building"
          initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
          transition={{ duration: 0.4 }}
          style={{
            background: 'rgba(var(--fg-tint),0.025)',
            border: '1px solid rgba(var(--accent-rgb),0.35)',
            borderRadius: 4, padding: '40px 22px',
            minHeight: minH,
            display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 22
          }}>
              <div className="eyebrow" style={{ color: 'var(--accent)', textAlign: 'center' }}>
                BUILDING PROPOSAL
              </div>
              <ProgressBar duration={2400} run={running} />
              <div style={{
              fontFamily: "'Space Mono', monospace", fontSize: 10, color: 'var(--muted)',
              letterSpacing: '0.16em', textTransform: 'uppercase', textAlign: 'center'
            }}>your estimator runs the tool · zero training</div>
            </motion.div>
          }

          {phase === 2 &&
          <motion.div key="after"
          initial={{ opacity: 0, scale: 0.98 }} animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
          style={{
            background: 'rgba(var(--accent-rgb),0.06)',
            border: '1px solid rgba(var(--accent-rgb),0.35)',
            borderRadius: 4, padding: 22
          }}>
              <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 18 }}>
                CLIENT PROPOSAL · READY
              </div>
              {afterLines.map((l, i) =>
            <motion.div key={i}
            initial={{ opacity: 0, x: 8 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: i * 0.08, duration: 0.4 }}
            style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '10px 0',
              borderBottom: i < afterLines.length - 1 ? '1px solid rgba(var(--accent-rgb),0.14)' : 'none'
            }}>
                  <span style={{
                width: 6, height: 6, borderRadius: 1, background: 'var(--accent)',
                flexShrink: 0
              }} />
                  <span style={{
                fontFamily: "'Space Mono', monospace", fontSize: 12,
                color: 'var(--fg)'
              }}>{l}</span>
                  <span style={{
                marginLeft: 'auto',
                fontFamily: "'Space Mono', monospace", fontSize: 9,
                letterSpacing: '0.16em', textTransform: 'uppercase',
                color: 'var(--accent)'
              }}>OK</span>
                </motion.div>
            )}
            </motion.div>
          }
        </AnimatePresence>
      </div>

      <div style={{ display: 'flex', gap: 8, marginTop: 18, alignItems: 'center' }}>
        {[0, 1, 2].map((i) =>
        <div key={i} style={{
          width: i === phase ? 22 : 12, height: 2,
          background: i <= phase ? 'var(--accent)' : 'rgba(var(--fg-tint),0.12)',
          transition: 'all 320ms ease'
        }} />
        )}
        <span style={{
          marginLeft: 'auto',
          fontFamily: "'Space Mono', monospace", fontSize: 9,
          letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--muted)'
        }}>
          one tool · one role · day one
        </span>
      </div>
    </div>);

}

function ProgressBar({ duration, run }) {
  const [w, setW] = React.useState(0);
  React.useEffect(() => {
    if (!run) {setW(0);return;}
    let raf, start;
    const tick = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / duration);
      setW(p * 100);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [run, duration]);
  return (
    <div>
      <div style={{ height: 2, background: 'rgba(var(--fg-tint),0.08)' }}>
        <div style={{ height: '100%', width: w + '%', background: 'var(--accent)' }} />
      </div>
      <div style={{
        marginTop: 8,
        fontFamily: "'Space Mono', monospace", fontSize: 10, color: 'var(--accent)',
        letterSpacing: '0.16em', textTransform: 'uppercase', textAlign: 'center'
      }}>
        {Math.round(w)}%
      </div>
    </div>);

}

function HeroTicker() {
  const tasks = [
  'QUOTING', 'SCHEDULING', 'INTAKE', 'ESTIMATING', 'REPORTING',
  'ONBOARDING', 'FOLLOW-UPS', 'DISPATCH', 'PROPOSALS', 'BRIEFINGS'];

  return (
    <div style={{
      width: '100%', maxWidth: 460,
      border: '1px solid var(--border)', borderRadius: 4,
      background: 'rgba(var(--fg-tint),0.025)',
      padding: 22, position: 'relative', overflow: 'hidden'
    }}>
      <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 16 }}>
        ONE TASK · ONE PERSON · DAY ONE
      </div>
      <div style={{
        fontFamily: "'Space Mono', monospace", fontWeight: 700,
        fontSize: 22, letterSpacing: '0.04em', textTransform: 'uppercase',
        color: 'var(--fg)', lineHeight: 1.4, marginBottom: 18
      }}>
        WE FIND WHERE YOUR<br />
        <span style={{ color: 'var(--muted)' }}>[</span>
        <span style={{ color: 'var(--accent)' }}>ESTIMATOR</span>
        <span style={{ color: 'var(--muted)' }}>]</span><br />
        IS BLEEDING TIME.
      </div>
      <div style={{
        borderTop: '1px solid var(--border)',
        paddingTop: 14, marginTop: 14,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10
      }}>
        {tasks.slice(0, 6).map((t, i) =>
        <div key={t} style={{
          fontFamily: "'Space Mono', monospace", fontSize: 10,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          color: i === 0 ? 'var(--accent)' : 'var(--muted)'
        }}>{'·'} {t}</div>
        )}
      </div>
    </div>);

}

function Hero({ variant = 'transform' }) {
  const isMobile = useIsMobile();

  return (
    <section id="top" style={{
      minHeight: 'auto', borderTop: 'none',
      padding: isMobile ? '120px 24px 60px' : '140px 48px 60px',
      display: 'flex', alignItems: 'flex-start', position: 'relative', overflow: 'hidden'
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0, zIndex: 0,
        backgroundImage:
        'linear-gradient(rgba(var(--fg-tint),0.025) 1px, transparent 1px),' +
        'linear-gradient(90deg, rgba(var(--fg-tint),0.025) 1px, transparent 1px)',
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(ellipse 70% 60% at 50% 45%, #000, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse 70% 60% at 50% 45%, #000, transparent 75%)'
      }} />

      <div className="container hero-grid" style={{
        width: '100%', display: 'grid',
        gridTemplateColumns: '1.1fr 1fr', gap: 56,
        alignItems: 'center', position: 'relative', zIndex: 1, margin: 0
      }}>
        <div style={{ minWidth: 0 }}>
          <motion.div {...fadeUp(0)} style={{ marginBottom: 20 }}>
            <span className="eyebrow">DIAGNOSIS FIRST · TOOLS SECOND</span>
          </motion.div>

          <motion.h1 {...fadeUp(0.08)} className="h1" style={{ marginBottom: 24 }}>
            YOUR TEAM IS LOSING HOURS<br />
            EVERY DAY<br />ON WORK<br />
            THAT SHOULD<br />
            TAKE MINUTES.
          </motion.h1>

          <motion.div {...fadeUp(0.26)}
          style={{
            padding: 0,
            marginTop: 8, marginBottom: 32, maxWidth: 480
          }}>
            <div className="accent-it" style={{
              fontSize: 'clamp(22px, 3vw, 30px)', lineHeight: 1.2, fontWeight: 400, padding: "0px", margin: "-25px 0px 0px"
            }}>
              We find it, and we fix it.
            </div>
          </motion.div>

          <motion.div {...fadeUp(0.34)} style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
            <a href={CALENDLY_URL} target="_blank" rel="noopener noreferrer" className="btn">
              See if you're a good fit <span style={{ fontWeight: 400 }}>{'→'}</span>
            </a>
            <a href="#examples" className="btn-ghost">
              What gets fixed
            </a>
          </motion.div>

          <motion.div {...fadeUp(0.44)} style={{
            marginTop: 56, paddingTop: 24,
            borderTop: '1px solid var(--border)',
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
            gap: isMobile ? 14 : 18
          }}>
            {[
            { k: 'ROLE-SPECIFIC', v: 'one person, not the company' },
            { k: 'ZERO TRAINING', v: 'works the first time it opens' },
            { k: 'NON-DISRUPTIVE', v: "won't touch what's working" }].
            map((s) =>
            <div key={s.k}>
                <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 6 }}>{s.k}</div>
                <div className="body-muted" style={{ fontSize: 11 }}>{s.v}</div>
              </div>
            )}
          </motion.div>
        </div>

        {!isMobile &&
        <motion.div {...fadeUp(0.2)} style={{ display: 'flex', justifyContent: 'center', alignSelf: 'start', marginTop: 40 }}>
            {variant === 'ticker' ? <HeroTicker /> : <HeroTransform />}
          </motion.div>
        }
      </div>
    </section>);

}

Object.assign(window, { Hero, HeroTransform, HeroTicker });