function WhyItWorks() {
  const beliefs = [
  {
    not: "Generic AI dressed up for your industry.",
    yes: "A tool built around how a specific person does a specific task."
  },
  {
    not: "A 10-minute conversation about “what would be helpful.”",
    yes: "A deep look at how the work actually gets done before anything is built."
  },
  {
    not: "Something that looks good in a demo and collects dust after.",
    yes: "Something used on day one because it fits exactly."
  }];


  return (
    <section id="why" style={{ background: 'rgba(var(--fg-tint),0.015)' }}>
      <div className="container-narrow">
        <motion.div {...fadeUp(0)} style={{ marginBottom: 16 }}>
          <span className="eyebrow" style={{ color: 'var(--muted)' }}>03 · WHY IT WORKS</span>
        </motion.div>

        <motion.h2 {...fadeUp(0.06)} className="h2" style={{ marginBottom: 32 }}>
          WE DON'T BUILD UNTIL<br />WE UNDERSTAND.
        </motion.h2>

        <motion.div {...fadeUp(0.12)} style={{
          padding: '0 0 24px', borderBottom: '1px solid var(--border)',
          marginBottom: 40
        }}>
          <p className="accent-it" style={{
            fontSize: 'clamp(22px, 2.6vw, 30px)', lineHeight: 1.35, fontWeight: 400, margin: "-20px 0px 0px"
          }}>
            You can't build a tool that gets used if you don't understand the work it's replacing.
          </p>
        </motion.div>

        <motion.p {...fadeUp(0.16)} className="body-muted" style={{ maxWidth: 640, marginBottom: 14 }}>
          Most AI implementations fail not because the technology doesn't work, but because no one
          took the time to understand the real workflow before building. The result looks good
          in a demo and collects dust after.
        </motion.p>
        <motion.p {...fadeUp(0.2)} className="body-muted" style={{ maxWidth: 640, marginBottom: 56 }}>
          Diagnosis-first isn't a sales step. It's how the work actually gets done correctly.
          There's no way to build the right thing without it.
        </motion.p>

        <div style={{ borderTop: '1px solid var(--border)' }}>
          {beliefs.map((b, i) =>
          <motion.div key={i} {...fadeUp(0.24 + i * 0.06)}
          style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 28, padding: '22px 0',
            borderBottom: '1px solid var(--border)'
          }}
          className="hero-grid">
              <div>
                <div className="eyebrow" style={{ color: 'var(--muted)', marginBottom: 8 }}>NOT</div>
                <div className="body-muted" style={{ textDecoration: 'line-through', textDecorationColor: 'rgba(var(--fg-tint),0.2)' }}>
                  {b.not}
                </div>
              </div>
              <div>
                <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 8 }}>YES</div>
                <div className="body" style={{ color: 'var(--fg)' }}>{b.yes}</div>
              </div>
            </motion.div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { WhyItWorks });