function TransformAnimation({ isMobile }) {
  const [phase, setPhase] = React.useState(0);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const cycle = () => {
      setPhase(0);setProgress(0);
      setTimeout(() => setPhase(1), 2800);
      setTimeout(() => {
        let p = 0;
        const t = setInterval(() => {p += 4;setProgress(p);if (p >= 100) clearInterval(t);}, 28);
      }, 2800);
      setTimeout(() => {setPhase(2);setProgress(0);}, 5600);
      setTimeout(() => cycle(), 9000);
    };
    const t = setTimeout(cycle, 800);
    return () => clearTimeout(t);
  }, []);

  const beforeLines = [
  { w: '90%', label: 'Material costs: lumber, drywall, insulation...' },
  { w: '70%', label: 'Labor hours x rate x crew size...' },
  { w: '85%', label: 'Subcontractor markups + contingency...' },
  { w: '60%', label: 'Formatting, checking, re-checking...' },
  { w: '75%', label: 'Email client PDF attachment...' }];


  return (
    <div style={{ position: 'relative', width: '100%', maxWidth: isMobile ? '100%' : 440 }}>
      <AnimatePresence mode="wait">
        {phase === 0 &&
        <motion.div key="before"
        initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -8 }} transition={{ duration: 0.5 }}
        style={{
          background: 'rgba(237,233,225,0.03)',
          border: '1px solid rgba(237,233,225,0.08)',
          borderRadius: 14, padding: '24px 28px'
        }}>
          
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'rgba(237,233,225,0.2)' }} />
              <span style={{ fontFamily: "'DM Sans'", fontSize: 12, color: 'var(--muted)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Quote: Manual Process</span>
              <span style={{ marginLeft: 'auto', fontFamily: "'DM Sans'", fontSize: 12, color: 'var(--accent)', fontWeight: 500 }}>~3 hrs</span>
            </div>
            {beforeLines.map((l, i) =>
          <motion.div key={i}
          initial={{ opacity: 0, x: -8 }} animate={{ opacity: 1, x: 0 }}
          transition={{ delay: i * 0.12, duration: 0.4 }}
          style={{ marginBottom: 12 }}>
            
                <div style={{ fontSize: 11.5, color: 'var(--muted)', fontFamily: "'DM Sans'", marginBottom: 5 }}>{l.label}</div>
                <div style={{ height: 5, background: 'rgba(237,233,225,0.06)', borderRadius: 3, width: l.w }}>
                  <div style={{ height: '100%', width: '60%', background: 'rgba(237,233,225,0.15)', borderRadius: 3 }} />
                </div>
              </motion.div>
          )}
          </motion.div>
        }

        {phase === 1 &&
        <motion.div key="processing"
        initial={{ opacity: 0 }} animate={{ opacity: 1 }}
        exit={{ opacity: 0 }} transition={{ duration: 0.4 }}
        style={{
          background: 'rgba(237,233,225,0.03)',
          border: '1px solid rgba(var(--accent-rgb),0.25)',
          borderRadius: 14, padding: '24px 28px',
          minHeight: 200, display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center', gap: 20
        }}>
          
            <div style={{ fontFamily: "'DM Sans'", fontSize: 12, color: 'var(--muted)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Building proposal</div>
            <div style={{ width: '100%', height: 3, background: 'rgba(237,233,225,0.06)', borderRadius: 2 }}>
              <div style={{ height: '100%', background: 'var(--accent)', borderRadius: 2, width: `${progress}%`, transition: 'width 0.1s linear' }} />
            </div>
            <div style={{ fontFamily: "'DM Sans'", fontSize: 11, color: 'rgba(var(--accent-rgb),0.6)' }}>{progress}%</div>
          </motion.div>
        }

        {phase === 2 &&
        <motion.div key="after"
        initial={{ opacity: 0, scale: 0.97 }} 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.2)',
          borderRadius: 14, padding: '24px 28px'
        }}>
          
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent)' }} />
              <span style={{ fontFamily: "'DM Sans'", fontSize: 12, color: 'var(--accent)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Client Proposal: Ready</span>
              <span style={{ marginLeft: 'auto', fontFamily: "'DM Sans'", fontSize: 12, color: 'var(--accent)', fontWeight: 600 }}>15 min</span>
            </div>
            {['Project scope and materials', 'Labor and timeline breakdown', 'Total with payment terms', 'Client-ready PDF'].map((l, i) =>
          <motion.div key={i}
          initial={{ opacity: 0, x: 8 }} animate={{ opacity: 1, x: 0 }}
          transition={{ delay: i * 0.1 }}
          style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
            
                <div style={{ width: 14, height: 14, borderRadius: '50%', border: '1.5px solid var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <div style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--accent)' }} />
                </div>
                <span style={{ fontFamily: "'DM Sans'", fontSize: 13, color: 'var(--fg)' }}>{l}</span>
              </motion.div>
          )}
          </motion.div>
        }
      </AnimatePresence>
    </div>);

}

function Hero() {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);
  React.useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

  return (
    <section style={{
      minHeight: '100vh', display: 'flex', flexDirection: 'column',
      justifyContent: 'center',
      padding: isMobile ? '95px 20px 80px' : '95px 48px 120px',
      position: 'relative', overflow: 'hidden'
    }}>
      {/* Subtle structural grid */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 0,
        backgroundImage: `
          linear-gradient(rgba(237,233,225,0.025) 1px, transparent 1px),
          linear-gradient(90deg, rgba(237,233,225,0.025) 1px, transparent 1px)
        `,
        backgroundSize: '80px 80px',
        maskImage: 'radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent)',
        WebkitMaskImage: 'radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent)'
      }} />

      <div style={{
        maxWidth: 1200, margin: '0 auto', width: '100%',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
        gap: isMobile ? 40 : 48,
        alignItems: 'center', position: 'relative', zIndex: 1
      }} className="hero-grid">
        {/* Left: Copy */}
        <div style={{ borderWidth: "0px", borderStyle: "solid", minWidth: 0, overflow: 'hidden', margin: "0px 0px -120px" }}>
          <motion.div {...fadeUp(0)} style={{ marginBottom: 24 }}>
            <span style={{
              fontFamily: "'DM Sans', sans-serif",
              fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'var(--accent)', fontWeight: 500
            }}>Custom tools for real businesses</span>
          </motion.div>

          <motion.h1 {...fadeUp(0.08)} style={{
            fontFamily: "'Playfair Display', serif",
            fontSize: 'clamp(36px, 8vw, 75px)',
            fontWeight: 700, lineHeight: 1.05,
            letterSpacing: '-0.02em', color: 'var(--fg)', margin: '0px 0px 20px'
          }}>
            The right tools.<br />
            The right people.<br />
            <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)', display: 'block', margin: '5px 0px 0px' }}>Works on day one.</em>
          </motion.h1>

          <motion.p {...fadeUp(0.16)} style={{
            fontFamily: "'DM Sans', sans-serif",
            fontSize: isMobile ? 16 : 18, lineHeight: 1.7, color: 'var(--muted)',
            maxWidth: isMobile ? '100%' : 480, marginBottom: 44
          }}>
            We look at how your business actually runs, find where your team is losing the most time, and build tools that fix it with zero learning curve. You leave with something working, not a plan for what could work.
          </motion.p>

          <motion.div {...fadeUp(0.22)} style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a
              href={CALENDLY_URL}
              target="_blank" rel="noopener noreferrer"
              style={{
                display: 'inline-block',
                fontFamily: "'DM Sans', sans-serif",
                fontSize: 15, fontWeight: 500,
                background: 'var(--fg)', color: 'var(--bg)',
                padding: '14px 32px', borderRadius: 6,
                textDecoration: 'none', letterSpacing: '0.01em',
                transition: 'opacity 0.2s'
              }}
              onMouseEnter={(e) => e.currentTarget.style.opacity = '0.88'}
              onMouseLeave={(e) => e.currentTarget.style.opacity = '1'}>
              
              Book a 15-minute call
            </a>
            <a
              href="#how-it-works"
              style={{
                display: 'inline-block',
                fontFamily: "'DM Sans', sans-serif",
                fontSize: 15, fontWeight: 400,
                color: 'var(--muted)', padding: '14px 20px',
                textDecoration: 'none', transition: 'color 0.2s'
              }}
              onMouseEnter={(e) => e.currentTarget.style.color = 'var(--fg)'}
              onMouseLeave={(e) => e.currentTarget.style.color = 'var(--muted)'}>
              
              See how it works →
            </a>
          </motion.div>

        </div>

        {/* Right: Transform animation — hidden on mobile */}
        {!isMobile &&
        <motion.div {...fadeUp(0.2)} style={{ display: 'flex', justifyContent: 'center' }}>
            <TransformAnimation isMobile={isMobile} />
          </motion.div>
        }
      </div>

    </section>);

}

Object.assign(window, { Hero, TransformAnimation });