const storyStyles = {
  wrap: { padding: 'var(--section-y-lg) 32px', background: 'var(--paper-deep)', borderTop: '1px solid var(--line-soft)', borderBottom: '1px solid var(--line-soft)' },
  inner: { maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'center' },
  imgWrap: { position: 'relative' },
  eyebrow: { fontSize: 12, color: 'var(--ink-muted)', letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 24 },
  h2: { fontSize: 52, lineHeight: 1.05, letterSpacing: '-0.03em', fontWeight: 600, fontFamily: "'Outfit', system-ui, sans-serif", marginBottom: 24 },
  italic: { color: 'var(--blue)' },
  p: { fontSize: 16, lineHeight: 1.65, color: 'var(--ink-soft)', marginBottom: 18 },
  nameCard: {
    marginTop: 36,
    background: '#fff',
    border: '1px solid var(--line-soft)',
    borderRadius: 16,
    padding: '24px 28px',
    boxShadow: 'var(--shadow-md)',
  },
  nameCardHead: {
    display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14,
  },
  nameCardEyebrow: {
    fontSize: 11, color: 'var(--ink-muted)',
    letterSpacing: '0.08em', textTransform: 'uppercase',
  },
  nameCardBody: {
    fontSize: 15, lineHeight: 1.6, color: 'var(--ink-soft)',
  },
};

function Story() {
  return (
    <section id="story" style={storyStyles.wrap} className="reveal bm-section">
      <div style={storyStyles.inner} className="bm-story-grid">
        <div style={storyStyles.imgWrap}>
          <div style={{ position: 'relative', borderRadius: 20, overflow: 'hidden', background: 'var(--blue-soft)', aspectRatio: '1 / 1' }}>
            <img
              src="brand/team-hero.png"
              alt="BlueMoso VA team"
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
            />
          </div>
        </div>
        <div>
          <div className="mono" style={storyStyles.eyebrow}>Our story</div>
          <h2 style={storyStyles.h2}>The right people change <span style={storyStyles.italic}>everything.</span></h2>
          <p style={storyStyles.p}>
            BlueMoso started with a lesson we kept relearning while scaling our own businesses: it always comes down to the right people, set up to succeed. We'd hired and rehired our way to that conclusion. When we finally found the VA who actually fit, everything changed.
          </p>
          <p style={storyStyles.p}>
            We also watched other founders struggle with VAs for a different reason. The work got handed off, but neither side was set up to win. No clear scope, no real management, no coaching. When it broke, the VA got blamed. The system was broken on both ends.
          </p>
          <p style={storyStyles.p}>
            So we built it. Today we've matched 100+ business owners and leaders globally with the right virtual assistant, not the next available one. We vet obsessively, match thoughtfully, and stay on the hook long after the intro email.
          </p>
          <div style={storyStyles.nameCard}>
            <div style={storyStyles.nameCardHead}>
              <img
                src="brand/bluemoso-icon.svg"
                alt=""
                aria-hidden="true"
                style={{ width: 24, height: 24, display: 'block', flexShrink: 0 }}
              />
              <div className="mono" style={storyStyles.nameCardEyebrow}>The name</div>
            </div>
            <div style={storyStyles.nameCardBody}>
              <strong style={{ color: 'var(--ink)' }}>Moso</strong> bamboo is the fastest-growing plant on Earth. <strong style={{ color: 'var(--ink)' }}>Blue</strong> represents calm, trust, and stability. We bring all of this to your business.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Story });