const { Button, Badge, Icon } = window.AS || {};

function Hero() {
  return (
    <section style={{ padding: '72px 48px 64px', background: 'var(--surface-page)' }}>
      <div style={{ maxWidth: 'var(--content-max-width)', margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'center' }}>
        <div>
          <Badge variant="primary">Advocate Smart, Stay Grounded</Badge>
          <h1 style={{ font: 'var(--text-display-xl)', color: 'var(--text-primary)', margin: '18px 0 20px', maxWidth: 560 }}>
            You are your child's first and most powerful advocate.
          </h1>
          <p style={{ font: 'var(--text-body-lg)', color: 'var(--text-secondary)', maxWidth: 500, marginBottom: 32 }}>
            Clear, strategic guidance for navigating tough conversations with your child's school — so you walk in prepared, not reactive.
          </p>
          <div style={{ display: 'flex', gap: 16 }}>
            <a href="#intake-form">
              <Button variant="primary" size="lg" icon="arrow-right" iconPosition="right">
                Book a session
              </Button>
            </a>
            <a href="#kit"><Button variant="outline" size="lg">Get the workshop guide</Button></a>
          </div>
        </div>
        <div
          style={{
            aspectRatio: '4/3',
            borderRadius: 'var(--radius-xl)',
            overflow: 'hidden',
            boxShadow: 'var(--shadow-lg)',
          }}
        >
          <img
            src="./images/workshop-parent-kid.jpg"
            alt="Parent and teen working through homework together at a table"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;