/* ===== Contact CTA ===== */
function Contact({ onBook }) {
  const details = [
    ['phone', '+63 927 034 9050'],
    ['mail', 'hello@healspacelipa.com'],
    ['globe', 'www.healspacelipa.com'],
    ['map-pin', '2nd Floor, Jiao Medical Clinic, Lobrin Subd., Brgy. Sico, Lipa City, Batangas'],
  ];
  return (
    <Section id="contact" style={{ padding: '74px 0' }}>
      <div style={{ position: 'relative', overflow: 'hidden', background: 'var(--hs-sky-soft)', borderRadius: 'var(--r-xl)', padding: '52px 48px' }}>
        <Confetti items={[
          { type: 'sq', x: '4%', y: 30, c: 'var(--hs-sky)', r: -10 },
          { type: 'dot', x: '10%', y: 120, c: 'var(--hs-gold)', s: 10 },
          { type: 'sq', x: '88%', y: 40, c: 'var(--hs-gold)', r: 14 },
          { type: 'tri', x: '92%', y: 150, c: 'var(--hs-coral)', r: 20 },
          { type: 'dash', x: '84%', y: 110, c: 'var(--hs-sprout)', r: 30 },
        ]} />
        <div className="hs-contact-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center', position: 'relative', zIndex: 1 }}>
          <div>
            <Eyebrow>By appointment only</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(28px,3vw,40px)', color: 'var(--hs-teal)', margin: '12px 0 14px', lineHeight: 1.12 }}>
              Ready when you are.
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: 'var(--hs-ink-2)', margin: '0 0 26px', maxWidth: 380 }}>
              Reach out and we’ll help you find a time that feels right. Everything stays confidential.
            </p>
            <Btn kind="primary" size="lg" icon="calendar-heart" onClick={onBook}>Book a session</Btn>
          </div>
          <div style={{ background: '#fff', borderRadius: 'var(--r-lg)', padding: '28px 28px', boxShadow: 'var(--shadow-md)', display: 'flex', flexDirection: 'column', gap: 16 }}>
            {details.map(([ic, t]) => (
              <div key={ic} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <div style={{ width: 38, height: 38, flex: '0 0 auto', borderRadius: 'var(--r-sm)', background: 'var(--hs-sky-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={ic} size={18} color="var(--hs-sky-deep)" />
                </div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--hs-teal)', lineHeight: 1.5, alignSelf: 'center' }}>{t}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}
Object.assign(window, { Contact });