/* Header + Hero + Dores sections */

function Header({ scrolled }) {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const links = [
    { label: 'Procedimentos', href: '#procedimentos' },
    { label: 'O Doutor', href: '#sobre' },
    { label: 'Resultados', href: '#resultados' },
    { label: 'Dúvidas', href: '#faq' },
    { label: 'Contato', href: '#contato' },
  ];

  const closeMenu = () => setMobileOpen(false);

  return React.createElement('header', { className: `site-header ${scrolled || mobileOpen ? 'scrolled' : ''}` },
    React.createElement('div', { className: 'container header-inner' },
      React.createElement('a', { href: '#', className: 'logo', onClick: closeMenu },
        'Dr. Fabiano Beal ', React.createElement('span', null, '| Natural Studio')
      ),
      React.createElement('nav', null,
        React.createElement('ul', { className: 'nav-links' },
          links.map(l => React.createElement('li', { key: l.href },
            React.createElement('a', { href: l.href }, l.label)
          ))
        )
      ),
      React.createElement('a', {
        href: WA_AGENDAR,
        className: 'btn btn-gold header-cta',
        target: '_blank', rel: 'noopener'
      }, 'Agendar Avaliação Premium'),
      React.createElement('button', {
        className: 'mobile-toggle',
        'aria-label': mobileOpen ? 'Fechar menu' : 'Abrir menu',
        'aria-expanded': mobileOpen,
        onClick: () => setMobileOpen(!mobileOpen)
      }, mobileOpen ? '✕' : '☰')
    ),
    mobileOpen && React.createElement('div', { className: 'mobile-menu' },
      links.map(l => React.createElement('a', {
        key: l.href, href: l.href, className: 'mobile-link', onClick: closeMenu
      }, l.label)),
      React.createElement('a', {
        href: WA_AGENDAR,
        className: 'btn btn-gold',
        target: '_blank', rel: 'noopener',
        onClick: closeMenu
      }, 'Agendar Avaliação Premium')
    )
  );
}

function Hero() {
  return React.createElement('section', { className: 'hero' },
    React.createElement('div', { className: 'container hero-inner' },
      React.createElement('div', { className: 'hero-text reveal' },
        React.createElement('h1', null,
          'O sorriso natural que você deseja. O planejamento ',
          React.createElement('em', null, 'exclusivo'),
          ' que ele exige.'
        ),
        React.createElement('p', null,
          'Estética dental de alta precisão em Chapecó – SC. Cada sorriso carrega a sua identidade. Por isso, na Natural Studio, cada sorriso é desenvolvido através de um planejamento exclusivo que une tecnologia, experiência e atenção aos detalhes.'
        ),
        React.createElement('div', { style: { display: 'flex', gap: 16, flexWrap: 'wrap' } },
          React.createElement(CTA, { text: 'Quero Transformar Meu Sorriso', href: WA_AGENDAR }),
          React.createElement(CTA, { text: 'Conheça os Tratamentos', type: 'outline', href: '#procedimentos' })
        )
      ),
      React.createElement('div', { className: 'hero-image reveal reveal-delay-2' },
        React.createElement('img', {
          src: 'uploads/foto-4259.jpg',
          alt: 'Dr. Fabiano Beal',
          loading: 'eager'
        }),
        React.createElement('div', { className: 'hero-badge' },
          React.createElement('div', { className: 'hero-badge-icon' }, '✦'),
          React.createElement('div', { className: 'hero-badge-text' },
            React.createElement('strong', null, '18 Anos'),
            'de experiência em estética dental'
          )
        )
      )
    )
  );
}

function Dores() {
  const dores = [
    {
      icon: React.createElement(IconSparkle),
      title: 'Manchas e Amarelamento',
      text: 'Dentes escurecidos que afetam sua autoestima e confiança ao sorrir.'
    },
    {
      icon: React.createElement(IconTeeth),
      title: 'Desalinhamento',
      text: 'Dentes tortos ou desalinhados que comprometem a harmonia do sorriso.'
    },
    {
      icon: React.createElement(IconShield),
      title: 'Desgaste Dental',
      text: 'Dentes desgastados, lascados ou com formato irregular.'
    },
    {
      icon: React.createElement(IconHeart),
      title: 'Falta de Confiança',
      text: 'Evitar sorrir em fotos e conversas por vergonha dos dentes.'
    }
  ];

  return React.createElement('section', { className: 'dores', id: 'dores' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'reveal', style: { textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' } },
        React.createElement(SectionHeader, {
          title: 'O que está impedindo você de sorrir com mais confiança?',
          subtitle: 'Milhares de pessoas convivem com desafios semelhantes. A diferença não está apenas no tratamento escolhido, mas no planejamento por trás dele. Na Natural Studio, cada caso é analisado de forma exclusiva para encontrar a solução mais adequada para você.',
          center: true
        })
      ),
      React.createElement('div', { className: 'dores-grid' },
        dores.map((d, i) =>
          React.createElement('div', { key: i, className: `dor-card reveal reveal-delay-${i % 4}` },
            React.createElement('div', { className: 'dor-icon' }, d.icon),
            React.createElement('h4', null, d.title),
            React.createElement('p', null, d.text)
          )
        )
      )
    )
  );
}

function Procedimentos() {
  const procs = [
    { name: 'Lentes de Contato Dental', desc: 'Lâminas ultrafinas para um sorriso perfeito e natural.', msg: 'Olá, vim do site e gostaria de saber mais sobre as Lentes de Contato Dental.' },


    { name: 'Clareamento Dental', desc: 'Dentes mais brancos com segurança e tecnologia.', msg: 'Olá, vim do site e gostaria de saber mais sobre o Clareamento Dental.' },
    { name: 'Harmonização Facial', desc: 'Equilíbrio e simetria para realçar sua beleza natural.', msg: 'Olá, vim do site e gostaria de saber mais sobre a Harmonização Facial.' },
    { name: 'Implantes Dentários', desc: 'Reposição de dentes com implantes de última geração.', msg: 'Olá, vim do site e gostaria de saber mais sobre os Implantes Dentários.' },
    { name: 'Invisalign', desc: 'Alinhadores transparentes para corrigir sem aparecer.', msg: 'Olá, vim do site e gostaria de saber mais sobre o Invisalign.' },

    { name: 'Restaurações Estéticas', desc: 'Restaurações imperceptíveis que imitam o dente natural.', msg: 'Olá, vim do site e gostaria de saber mais sobre as Restaurações Estéticas.' },
    { name: 'Profilaxia com AirFlow', desc: 'Limpeza profunda e remoção de biofilme com conforto.', msg: 'Olá, vim do site e gostaria de saber mais sobre a Profilaxia com AirFlow.' },
    { name: 'Placas de Bruxismo', desc: 'Proteção dental para quem range ou aperta os dentes.', msg: 'Olá, vim do site e gostaria de saber mais sobre as Placas de Bruxismo.' },
    { name: 'Tratamento do Ronco', desc: 'Soluções para ronco e apneia do sono com dispositivos orais.', msg: 'Olá, vim do site e gostaria de saber mais sobre o Tratamento do Ronco.' },
  ];

  const icons = ['◇', '☼', '✧', '⬡', '○', '□', '◎', '▽', '◈'];

  return React.createElement('section', { className: 'procedimentos', id: 'procedimentos' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'reveal', style: { textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' } },
        React.createElement(SectionHeader, {
          title: 'Soluções para diferentes objetivos',
          subtitle: 'Mais importante do que escolher um tratamento é identificar qual é o melhor caminho para alcançar o resultado que você deseja. Por isso, cada plano começa com diagnóstico e planejamento exclusivo.',
          center: true
        })
      ),
      React.createElement('div', { className: 'proc-grid' },
        procs.map((p, i) =>
          React.createElement('a', {
            key: i, className: `proc-card reveal`,
            href: waLink(p.msg), target: '_blank', rel: 'noopener'
          },
            React.createElement('div', { className: 'proc-icon' }, icons[i]),
            React.createElement('h4', null, p.name),
            React.createElement('p', null, p.desc)
          )
        )
      ),
      React.createElement('div', { style: { textAlign: 'center' } },
        React.createElement(CTA, {
          text: 'Quero Saber Qual Caminho É Para Mim',
          href: WA_AGENDAR
        })
      )
    )
  );
}

Object.assign(window, { Header, Hero, Dores, Procedimentos });