/* ===== Hero ===== */
function Hero({ onBook }) {
  return (
    <div id="top" style={{ position: 'relative', overflow: 'hidden', paddingTop: 24 }}>
      <Confetti items={[
        { type: 'sq', x: '1.5%', y: 40, c: 'var(--hs-sky)', r: -8 },
        { type: 'sq', x: '30%', y: 18, c: 'var(--hs-mint)', r: 12 },
        { type: 'dot', x: '1.5%', y: 300, c: 'var(--hs-gold)', s: 10 },
        { type: 'dash', x: '1%', y: 560, c: 'var(--hs-coral)', r: 30 },
        { type: 'sq', x: '46%', y: 28, c: 'var(--hs-gold)', r: 10 },
        { type: 'tri', x: '42%', y: 90, c: 'var(--hs-sprout)', r: 18 },
        { type: 'dot', x: '52%', y: 70, c: 'var(--hs-sky)', s: 8 },
      ]} />
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
        <div className="hs-hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 56, alignItems: 'center', padding: '64px 0 84px' }}>
          <div>
            <Logo height={120} />
            <div style={{ marginTop: 22 }}><Eyebrow>Lipa City, Batangas</Eyebrow></div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(38px,4.6vw,60px)', lineHeight: 1.05, letterSpacing: '-.01em', color: 'var(--hs-teal)', margin: '18px 0 6px' }}>
              A safe <span style={{ color: 'var(--hs-sky)' }}>healing space</span><br />for everyone.
            </h1>
            <div style={{ fontFamily: 'var(--font-script)', fontSize: 34, color: 'var(--hs-sky)', margin: '4px 0 18px' }}>grow gently, at your own pace</div>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.65, color: 'var(--hs-ink-2)', maxWidth: 480, margin: '0 0 30px' }}>
              Warm, personalized mental-health care where your privacy is a commitment. Online or in person — by appointment only.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <Btn kind="primary" size="lg" icon="calendar-heart" onClick={onBook}>Book a session</Btn>
              <Btn kind="outline" size="lg" icon="phone" onClick={() => { const el = document.querySelector('#contact'); if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: 'smooth' }); }}>Talk to us</Btn>
            </div>
            <div style={{ display: 'flex', gap: 22, marginTop: 30, flexWrap: 'wrap' }}>
              {[['shield-check', 'Confidential'], ['heart-handshake', 'Compassionate'], ['video', 'Online & in-person']].map(([ic, t]) => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--hs-ink-2)', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14 }}>
                  <Icon name={ic} size={18} color="var(--hs-sprout-deep)" />{t}
                </div>
              ))}
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{ position: 'absolute', inset: '-22px -22px auto auto', width: 220, height: 220, background: 'var(--hs-mint)', borderRadius: '46% 54% 60% 40%/52% 44% 56% 48%', zIndex: 0 }} />
            <div style={{ position: 'absolute', left: -26, bottom: -26, width: 150, height: 150, background: 'var(--hs-gold-soft)', borderRadius: '50%', zIndex: 0 }} />
            <img src={window.asset("./assets/clinic-room-1.jpg")} alt="HealSpace therapy room" style={{ position: 'relative', zIndex: 1, width: '100%', height: 420, objectFit: 'cover', borderRadius: 'var(--r-xl)', boxShadow: 'var(--shadow-lg)' }} />
            <div style={{ position: 'absolute', zIndex: 2, right: 20, bottom: 20, background: '#fff', borderRadius: 'var(--r-lg)', boxShadow: 'var(--shadow-md)', padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 12 }}>
              <Logo variant="mark" height={42} />
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--hs-teal)' }}>Now welcoming clients</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--hs-ink-2)' }}>Mon–Sun by appointment</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { Hero });