// Hero.jsx — opening salvo. Heavy display headline, mono eyebrow, dual CTA.

const heroStyles = {
  section: { paddingTop: 88, paddingBottom: 72, position: 'relative', overflow: 'hidden' },
  watermark: {
    position: 'absolute',
    right: '-180px',
    top: '-80px',
    opacity: 0.06,
    pointerEvents: 'none',
    zIndex: 0,
  },
  container: { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--container-pad)', position: 'relative', zIndex: 1 },
  eyebrow: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-muted)', fontWeight: 500, marginBottom: 28, display: 'inline-flex', alignItems: 'center', gap: 12 },
  rule: { width: 28, height: 1, background: 'var(--border-strong)', display: 'inline-block' },
  h1: {
    fontFamily: 'var(--font-display)', fontWeight: 400,
    fontSize: 'clamp(56px, 9vw, 132px)',
    lineHeight: 0.9, letterSpacing: '-0.02em',
    textTransform: 'uppercase',
    color: 'var(--ink-1000)', textWrap: 'balance',
    maxWidth: '12ch', margin: 0,
  },
  emph: { color: 'var(--powder-500)' },
  sub: { fontFamily: 'var(--font-sans)', fontSize: 19, lineHeight: 1.5, color: 'var(--fg-muted)', maxWidth: '52ch', marginTop: 32 },
  ctaRow: { marginTop: 36, display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' },
  primary: { fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 15, padding: '15px 22px', background: 'var(--powder-500)', color: 'var(--ink-0)', border: 'none', borderRadius: 'var(--r-md)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8 },
  secondary: { fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 15, padding: '15px 22px', background: 'transparent', color: 'var(--ink-1000)', border: '1px solid var(--border-strong)', borderRadius: 'var(--r-md)', cursor: 'pointer' },
  meta: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-muted)', marginTop: 26, display: 'flex', gap: 24, flexWrap: 'wrap' },
};

function Hero({ onBook }) {
  return (
    <section id="top" style={heroStyles.section}>
      <div style={heroStyles.watermark} aria-hidden="true">
        <Mark size={680}/>
      </div>
      <div style={heroStyles.container}>
        <div style={heroStyles.eyebrow}>
          <span style={heroStyles.rule}/> Performance marketing · Indian SMBs · est. 2024
        </div>
        <h1 style={heroStyles.h1}>
          One job.<br/><span style={heroStyles.emph}>More leads.</span>
        </h1>
        <p style={heroStyles.sub}>
          We turn ad rupees into qualified leads. Nothing else. Built for Indian SMBs
          spending ₹50,000 to ₹5 lakh per month on Meta and Google.
        </p>
        <div style={heroStyles.ctaRow}>
          <button style={heroStyles.primary} onClick={onBook}><Mark size={14} color="var(--ink-0)"/> Book a 30-min call</button>
          <a href="#work" style={{...heroStyles.secondary, textDecoration:'none', display:'inline-flex', alignItems:'center', gap:8}}><Mark size={13} color="var(--powder-500)"/> See the math</a>
        </div>
        <div style={heroStyles.meta}>
          <span>₹50k – ₹5L monthly spend</span><span>·</span>
          <span>Meta + Google only</span><span>·</span>
          <span>Lead-gen only</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });