// Philosophy.jsx — The Inside Out method, three phases, numbered
function Philosophy() {
  const [active, setActive] = React.useState(0);
  const phases = [
    {
      n: '01',
      tag: 'Phase one',
      t: 'Deep Integration',
      b: 'We embed within your teams to learn culture and workflows from the ground floor. Not from a conference room. Not from a discovery deck. From inside.',
      detail: 'We shadow. We sit in meetings. We ask obvious questions. Before we propose anything, we understand how the work actually gets done — including the parts that never make it into a process doc.',
    },
    {
      n: '02',
      tag: 'Phase two',
      t: 'Internal Catalyst',
      b: 'We co-build solutions that feel native to your organization — not forced upon it. Tools your people helped design, on workflows they actually run.',
      detail: 'Co-design is the method. Your team owns the problem and the artifact. We bring AI fluency, prompt design, and the discipline of keeping things small until they work.',
    },
    {
      n: '03',
      tag: 'Phase three',
      t: 'Sustainable Autonomy',
      b: 'We stay until the capability is fully yours. Internal champions lead. External consultants leave. The change is permanent — or it wasn\'t change.',
      detail: 'Success is measured by what happens after we\'re gone. Champions keep building. Playbooks keep circulating. The organization gets better at AI without us in the room.',
    },
  ];

  return (
    <section id="philosophy" style={{
      background: 'var(--aq-parchment)', padding: '128px 40px',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 96,
          alignItems: 'start', marginBottom: 80,
        }}>
          <div>
            <div className="aq-eyebrow" style={{ color: 'var(--aq-teal-dark)', marginBottom: 20 }}>
              Core philosophy
            </div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 52,
              lineHeight: 1.08, color: 'var(--aq-deep)',
              letterSpacing: '-0.01em', margin: 0,
            }}>
              The Inside <em style={{ color: 'var(--aq-teal-dark)' }}>Out</em> Method.
            </h2>
          </div>
          <div>
            <p style={{
              fontFamily: 'var(--font-body)', fontWeight: 300, fontSize: 18,
              lineHeight: 1.65, color: 'var(--aq-slate)', margin: 0,
              maxWidth: 52 + 'ch',
            }}>
              Three phases, in order, across a single engagement. The sequence matters — skip a phase and the capability doesn't stick. It's the reason we call it inside out instead of top down.
            </p>
          </div>
        </div>

        <hr style={{ border: 0, borderTop: '1px solid var(--aq-rule)', margin: 0 }} />

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
        }}>
          {phases.map((p, i) => (
            <button key={p.n}
              onMouseEnter={() => setActive(i)}
              onFocus={() => setActive(i)}
              style={{
                all: 'unset', cursor: 'pointer',
                padding: '48px 40px 56px',
                borderRight: i < 2 ? '1px solid var(--aq-rule)' : 'none',
                background: active === i ? 'var(--aq-white)' : 'transparent',
                transition: 'background 320ms var(--ease-out)',
                minHeight: 360,
                display: 'flex', flexDirection: 'column', gap: 20,
              }}>
              <div style={{
                display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
              }}>
                <span style={{
                  fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 400,
                  color: active === i ? 'var(--aq-teal-dark)' : 'var(--aq-deep)',
                  letterSpacing: '-0.02em', lineHeight: 1,
                  transition: 'color 320ms var(--ease-out)',
                }}>{p.n}</span>
                <span className="aq-eyebrow" style={{ color: 'var(--aq-sage)' }}>
                  {p.tag}
                </span>
              </div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 30,
                color: 'var(--aq-deep)', margin: 0, lineHeight: 1.1,
              }}>{p.t}</h3>
              <p style={{
                fontFamily: 'var(--font-body)', fontWeight: 300, fontSize: 15,
                lineHeight: 1.6, color: 'var(--aq-slate)', margin: 0,
              }}>{p.b}</p>
              <div style={{
                marginTop: 'auto', paddingTop: 20,
                borderTop: '1px dashed var(--aq-rule)',
                fontFamily: 'var(--font-body)', fontWeight: 300, fontSize: 13,
                lineHeight: 1.55, color: 'var(--aq-sage)', fontStyle: 'italic',
                maxHeight: active === i ? 120 : 0,
                opacity: active === i ? 1 : 0,
                overflow: 'hidden',
                transition: 'max-height 480ms var(--ease-out), opacity 320ms var(--ease-out), padding 320ms var(--ease-out)',
              }}>{p.detail}</div>
            </button>
          ))}
        </div>

        <hr style={{ border: 0, borderTop: '1px solid var(--aq-rule)', margin: 0 }} />
      </div>
    </section>
  );
}
window.Philosophy = Philosophy;