// Hero.jsx — clean editorial hero on parchment.
// No photographic background (the available mountain PNG has the wordmark and
// tagline baked into it, which causes ghost-text overlaps). Once a clean
// landscape photo is provided, the imageLayer block can be re-enabled.
function Hero({ onBegin }) {
  return (
    <section style={heroStyles.wrap}>
      <div style={heroStyles.content}>
        <div style={heroStyles.eyebrow}>
          <span style={heroStyles.eyebrowRule} />
          <span style={heroStyles.eyebrowLabel}>Field-built systems for small teams</span>
          <span style={heroStyles.eyebrowRule} />
        </div>

        <h1 style={heroStyles.wordmark}>Watershed</h1>
        <div style={heroStyles.flanked}>
          <span style={heroStyles.rule} />
          <span style={heroStyles.flankedLabel}>Automations</span>
          <span style={heroStyles.rule} />
        </div>

        <p style={heroStyles.tagline}>
          Automate the busywork. Ease the real work. Enable the previously impossible.
        </p>

        <div style={heroStyles.actions}>
          <button onClick={onBegin} style={heroStyles.btnPrimary}>Start an audit</button>
          <a style={heroStyles.btnGhost}>Read our approach →</a>
        </div>
      </div>
    </section>
  );
}

const heroStyles = {
  wrap: {
    position: 'relative',
    minHeight: 'min(760px, 88vh)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    background: 'var(--parchment)',
    padding: '120px 32px 96px',
  },
  content: {
    position: 'relative',
    textAlign: 'center',
    maxWidth: 920,
    display: 'flex', flexDirection: 'column', alignItems: 'center',
  },
  eyebrow: { display: 'inline-flex', alignItems: 'center', gap: 14, color: 'var(--ink-soft)', marginBottom: 36 },
  eyebrowRule: { width: 32, height: 1, background: 'currentColor', opacity: 0.5, display: 'inline-block' },
  eyebrowLabel: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase' },

  wordmark: {
    margin: 0,
    fontFamily: 'var(--serif-display)',
    fontWeight: 500,                              // medium
    fontSize: 'clamp(56px, 8vw, 112px)',
    lineHeight: 1,
    letterSpacing: '0.04em',
    fontVariantCaps: 'small-caps',                // W stands proud as the true cap
    color: 'var(--ink)',
  },
  flanked: { display: 'inline-flex', alignItems: 'center', gap: 16, color: 'var(--accent)', marginTop: 18 },
  rule: { width: 48, height: 1, background: 'currentColor', opacity: 0.7, display: 'inline-block' },
  flankedLabel: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 13, letterSpacing: '0.32em', textTransform: 'uppercase' },

  tagline: {
    margin: 0,
    fontFamily: 'var(--serif-display)',
    fontStyle: 'italic',
    fontWeight: 400,
    fontSize: 'clamp(20px, 2.2vw, 26px)',
    lineHeight: 1.4,
    color: 'var(--ink-brown)',
    marginTop: 56,
    maxWidth: 660,
  },

  actions: { display: 'flex', gap: 28, alignItems: 'center', justifyContent: 'center', marginTop: 56 },
  btnPrimary: {
    fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 12,
    letterSpacing: '0.22em', textTransform: 'uppercase',
    color: 'var(--parchment)', background: 'var(--accent)',
    border: 'none', padding: '16px 32px', borderRadius: 999,
    cursor: 'pointer', transition: 'background 180ms var(--ease-out)',
  },
  btnGhost: {
    fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 12,
    letterSpacing: '0.22em', textTransform: 'uppercase',
    color: 'var(--ink)', cursor: 'pointer', textDecoration: 'none',
  },
};

window.Hero = Hero;