/* global React, Eyebrow, useIsMobile, useInView, Reveal, trackEvent, DoctoraliaWidget */

function SchedulingSection() {
  const isMobile = useIsMobile();
  const [sectionRef, inView] = useInView({ threshold: 0.2 });

  return (
    <section id="agendamento" ref={sectionRef} style={{ padding: isMobile ? '64px 20px' : '96px 32px', background: 'var(--white)' }}>
      <div style={{ maxWidth: 640, margin: '0 auto', textAlign: 'center' }}>
        <Eyebrow>Agendamento</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 32 : 42,
          color: 'var(--brand-navy)', margin: '4px 0 16px', letterSpacing: '-.01em',
        }}>Agende sua consulta em poucos cliques</h2>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', margin: '0 0 40px' }}>
          Escolha o melhor dia e horário direto na nossa agenda online
        </p>
        <Reveal show={inView} variant="pop">
          <div
            onClick={() => trackEvent('agendamento_click', { agendamento_source: 'widget' })}
            style={{
              background: 'var(--cream-100)', border: '1px solid var(--line-1)',
              borderRadius: 24, padding: isMobile ? 28 : 40,
              boxShadow: 'var(--shadow-glow)', width: '100%', boxSizing: 'border-box',
            }}
          >
            <DoctoraliaWidget type="big_with_calendar" opinion={false} />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { SchedulingSection });