/* Diferenciais + Sobre + Resultados + Depoimentos */

function Diferenciais() {
  const items = [
    {
      icon: React.createElement(IconMonitor),
      title: 'Planejamento Digital Exclusivo',
      text: 'Simulação do resultado antes de iniciar o tratamento com tecnologia 3D.'
    },
    {
      icon: React.createElement(IconCpu),
      title: 'Tecnologia de Ponta',
      text: 'Equipamentos de última geração para diagnóstico e tratamento preciso.'
    },
    {
      icon: React.createElement(IconUser),
      title: 'Atendimento Personalizado',
      text: 'Cada paciente recebe um plano único, pensado para suas necessidades.'
    },
    {
      icon: React.createElement(IconLock),
      title: 'Sigilo e Conforto Total',
      text: 'Ambiente privativo, acolhedor e com total discrição em cada etapa.'
    }
  ];

  return React.createElement('section', { className: 'diferenciais', id: 'diferenciais' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'reveal', style: { textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' } },
        React.createElement(SectionHeader, {
          label: 'Diferenciais',
          title: 'Por que escolher o Dr. Fabiano Beal?',
          center: true
        })
      ),
      React.createElement('div', { className: 'dif-grid' },
        items.map((item, i) =>
          React.createElement('div', { key: i, className: `dif-card reveal reveal-delay-${i}` },
            React.createElement('div', { className: 'dif-icon' }, item.icon),
            React.createElement('h4', null, item.title),
            React.createElement('p', null, item.text)
          )
        )
      )
    )
  );
}

function Sobre() {
  return React.createElement('section', { className: 'sobre', id: 'sobre' },
    React.createElement('div', { className: 'container sobre-inner' },
      React.createElement('div', { className: 'sobre-photo reveal' },
        React.createElement('img', {
          src: 'uploads/foto-4259.jpg',
          alt: 'Dr. Fabiano Beal',
          loading: 'lazy'
        })
      ),
      React.createElement('div', { className: 'sobre-content reveal reveal-delay-2' },
        React.createElement('h3', null, 'Dr. Fabiano Beal'),
        React.createElement('p', { className: 'sobre-specialty' }, 'Cirurgião-Dentista — Especialista em Estética Dental'),
        React.createElement('p', { className: 'sobre-bio' },
          'Ao longo dos anos, entendi uma verdade: grandes transformações começam com boas decisões. Antes de qualquer procedimento, existe um processo de análise, escuta e compreensão do que realmente importa para cada paciente. É dessa forma que construímos tratamentos mais previsíveis, resultados mais naturais e relações baseadas em confiança.'
        ),
        React.createElement('ul', { className: 'sobre-credentials' },
          React.createElement('li', null, '18 anos de experiência'),
          React.createElement('li', null, 'CRO/SC — 9800'),
          React.createElement('li', null, 'Especialista em Dentística Restauradora'),
          React.createElement('li', null, 'Especialista em Ortodontia'),
          React.createElement('li', null, 'Invisalign Doctor')
        ),
        React.createElement(CTA, { text: 'Agendar com o Dr. Fabiano', href: waLink('Olá, vim do site e gostaria de agendar uma consulta de avaliação com o Dr. Fabiano.') })
      )
    )
  );
}

function SobrePaula() {
  return React.createElement('section', { className: 'sobre sobre-alt', id: 'paula' },
    React.createElement('div', { className: 'container sobre-inner sobre-inner-reverse' },
      React.createElement('div', { className: 'sobre-content reveal reveal-delay-2' },
        React.createElement('h3', null, 'Dra. Paula Ghiggi'),
        React.createElement('p', { className: 'sobre-specialty' }, 'Cirurgiã-Dentista — Excelência técnica a serviço da naturalidade'),
        React.createElement('p', { className: 'sobre-bio' },
          'A Dra. Paula Ghiggi atua na área de Dentística Restauradora, dedicando-se à criação de tratamentos que unem estética, função e longevidade. Além da prática clínica, integra o corpo docente de cursos de especialização em Dentística Restauradora do CEOM — Passo Fundo/RS, contribuindo para a formação de novos profissionais e mantendo uma constante busca por atualização e aperfeiçoamento. Seu compromisso é transformar conhecimento em resultados naturais, personalizados e alinhados à identidade de cada paciente.'
        ),
        React.createElement('ul', { className: 'sobre-credentials' },
          React.createElement('li', null, 'Especialização em Dentística Restauradora'),
          React.createElement('li', null, 'Doutorado em Dentística Restauradora'),
          React.createElement('li', null, 'Docente — CEOM, Passo Fundo/RS')
        ),
        React.createElement(CTA, { text: 'Agendar com a Dra. Paula', href: waLink('Olá, vim do site e gostaria de agendar uma consulta de avaliação com a Dra. Paula.') })
      ),
      React.createElement('div', { className: 'sobre-photo reveal' },
        React.createElement('img', {
          src: 'uploads/foto-4108.jpg',
          alt: 'Dra. Paula Ghiggi',
          loading: 'lazy'
        })
      )
    )
  );
}

function Resultados() {
  const cases = [
    { img: 'uploads/caso-01.jpeg' },
    { img: 'uploads/caso-02.jpeg' },
    { img: 'uploads/caso-03.jpeg' },
    { img: 'uploads/caso-04.jpeg' },
    { img: 'uploads/caso-05.jpeg' },
    { img: 'uploads/caso-06.jpeg' },
    { img: 'uploads/caso-07.jpeg' },
  ];

  const [current, setCurrent] = React.useState(0);
  const total = cases.length;
  const autoRef = React.useRef(null);
  const wrapRef = React.useRef(null);
  const touchRef = React.useRef(0);

  const goTo = (idx) => setCurrent(((idx % total) + total) % total);
  const next = () => goTo(current + 1);
  const prev = () => goTo(current - 1);

  React.useEffect(() => {
    autoRef.current = setInterval(next, 4000);
    return () => clearInterval(autoRef.current);
  }, [current]);

  // Largura do card calculada a partir do espaço disponível (1 card no mobile, 2 no desktop)
  const [layout, setLayout] = React.useState({ cardW: 520, gap: 28, pad: 56, mobile: false });
  React.useEffect(() => {
    const update = () => {
      const w = wrapRef.current ? wrapRef.current.clientWidth : window.innerWidth;
      if (w < 640) {
        setLayout({ cardW: w - 40, gap: 16, pad: 20, mobile: true });
      } else {
        setLayout({ cardW: Math.min(520, Math.floor((w - 112 - 28) / 2)), gap: 28, pad: 56, mobile: false });
      }
    };
    update();
    window.addEventListener('resize', update);
    return () => window.removeEventListener('resize', update);
  }, []);

  const { cardW, gap, mobile } = layout;
  const perView = mobile ? 1 : 2;

  return React.createElement('section', { className: 'resultados', id: 'resultados' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'reveal', style: { textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' } },
        React.createElement(SectionHeader, {
          label: 'Casos Reais',
          title: 'O resultado aparece no sorriso. O diferencial está no planejamento.',
          subtitle: 'Antes de qualquer transformação, existe um processo de diagnóstico, análise e planejamento que permite criar resultados naturais, personalizados e duradouros. Resultados reais de pacientes que confiaram na expertise do Dr. Fabiano Beal.',
          center: true
        })
      ),
      React.createElement('div', {
        className: 'carousel-wrapper reveal', ref: wrapRef,
        style: { position: 'relative', marginTop: 48, marginBottom: 48, overflow: 'hidden' },
        onTouchStart: (e) => { touchRef.current = e.touches[0].clientX; },
        onTouchEnd: (e) => {
          const dx = e.changedTouches[0].clientX - touchRef.current;
          if (dx > 40) prev(); else if (dx < -40) next();
        }
      },
        !mobile && React.createElement('button', {
          onClick: prev,
          'aria-label': 'Caso anterior',
          style: {
            position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%)',
            zIndex: 10, width: 48, height: 48, borderRadius: '50%',
            background: 'rgba(11,18,32,0.85)', border: '1px solid var(--gold-border)',
            color: 'var(--gold)', fontSize: 20, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            backdropFilter: 'blur(8px)', transition: 'all 0.3s'
          }
        }, '‹'),
        !mobile && React.createElement('button', {
          onClick: next,
          'aria-label': 'Próximo caso',
          style: {
            position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)',
            zIndex: 10, width: 48, height: 48, borderRadius: '50%',
            background: 'rgba(11,18,32,0.85)', border: '1px solid var(--gold-border)',
            color: 'var(--gold)', fontSize: 20, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            backdropFilter: 'blur(8px)', transition: 'all 0.3s'
          }
        }, '›'),
        React.createElement('div', {
          style: {
            display: 'flex', gap: gap, padding: '0 ' + layout.pad + 'px',
            transition: 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
            transform: `translateX(-${current * (cardW + gap)}px)`
          }
        },
          cases.map((c, i) =>
            React.createElement('div', {
              key: i,
              style: {
                flex: '0 0 ' + cardW + 'px',
                transition: 'opacity 0.4s, transform 0.4s',
                opacity: (i >= current && i < current + perView) ? 1 : 0.4,
                transform: (i >= current && i < current + perView) ? 'scale(1)' : 'scale(0.95)'
              }
            },
              React.createElement('div', {
                className: 'resultado-card',
                style: { overflow: 'hidden' }
              },
                React.createElement('div', { style: { position: 'relative' } },
                  React.createElement('img', {
                    src: c.img,
                    alt: 'Antes e Depois',
                    loading: 'eager',
                    style: {
                      width: '100%', height: mobile ? 300 : 360, objectFit: 'cover',
                      objectPosition: 'center top', display: 'block',
                      borderRadius: 12
                    }
                  })
                )
              )
            )
          )
        )
      ),
      React.createElement('div', { style: { display: 'flex', justifyContent: 'center', gap: 10, marginBottom: 40 } },
        cases.map((_, i) =>
          React.createElement('button', {
            key: i, onClick: () => goTo(i),
            style: {
              width: current === i ? 28 : 10, height: 10, borderRadius: 5,
              background: current === i ? 'var(--gold)' : 'var(--gold-dim)',
              border: 'none', cursor: 'pointer', transition: 'all 0.3s',
              padding: 0
            }
          })
        )
      ),
      React.createElement('div', { style: { textAlign: 'center' } },
        React.createElement(CTA, { text: 'Quero Meu Novo Sorriso', href: WA_AGENDAR })
      )
    )
  );
}

function Depoimentos() {
  const deps = [
    {
      initials: 'AC',
      name: 'Ana Claudia M.',
      text: 'O Dr. Fabiano transformou meu sorriso e minha autoestima. Profissional incrível, atencioso e com um resultado que superou todas as expectativas.'
    },
    {
      initials: 'RS',
      name: 'Roberto S.',
      text: 'Depois de anos evitando sorrir, hoje não consigo parar. O atendimento é impecável do início ao fim, e o resultado ficou absolutamente natural.'
    },
    {
      initials: 'ML',
      name: 'Mariana L.',
      text: 'Escolhi o Invisalign com o Dr. Fabiano e foi a melhor decisão. O acompanhamento é próximo, o tratamento é confortável e o resultado é perfeito.'
    },
    {
      initials: 'JP',
      name: 'João Pedro F.',
      text: 'Estrutura impecável e equipe extremamente cuidadosa. Me senti seguro em cada etapa. Recomendo de olhos fechados.'
    },
    {
      initials: 'CB',
      name: 'Carla B.',
      text: 'Atendimento humanizado de verdade. Explicaram cada detalhe do planejamento e o resultado das lentes ficou lindo e natural.'
    },
    {
      initials: 'FT',
      name: 'Fernanda T.',
      text: 'Melhor clínica de Chapecó. Profissionalismo, pontualidade e um sorriso que mudou a minha vida. Gratidão!'
    },
    {
      initials: 'LG',
      name: 'Lucas G.',
      text: 'Fiz meus implantes aqui e o cuidado foi excepcional. Nenhum desconforto e um resultado perfeito. Vale cada centavo.'
    },
    {
      initials: 'PA',
      name: 'Patrícia A.',
      text: 'Ambiente acolhedor e equipe nota mil. Saí de cada consulta confiante. O Dr. Fabiano é um verdadeiro artista.'
    }
  ];

  const track = deps.concat(deps);
  const scrollerRef = React.useRef(null);
  const pausedRef = React.useRef(false);
  const dragRef = React.useRef({ down: false, startX: 0, startScroll: 0, moved: false });
  const posRef = React.useRef(0);

  React.useEffect(function () {
    const el = scrollerRef.current;
    if (!el) return;
    let raf;
    const SPEED = 0.4; // px por frame — rolagem suave
    function half() { return el.scrollWidth / 2; }
    function tick() {
      if (!pausedRef.current && !dragRef.current.down) {
        posRef.current += SPEED;
        if (posRef.current >= half()) posRef.current -= half();
        el.scrollLeft = posRef.current;
      }
      raf = requestAnimationFrame(tick);
    }
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (!reduce) raf = requestAnimationFrame(tick);

    function onDown(e) {
      dragRef.current.down = true;
      dragRef.current.moved = false;
      dragRef.current.startX = (e.touches ? e.touches[0].clientX : e.clientX);
      dragRef.current.startScroll = el.scrollLeft;
      el.classList.add('dragging');
    }
    function onMove(e) {
      if (!dragRef.current.down) return;
      const x = (e.touches ? e.touches[0].clientX : e.clientX);
      const dx = x - dragRef.current.startX;
      if (Math.abs(dx) > 3) dragRef.current.moved = true;
      el.scrollLeft = dragRef.current.startScroll - dx;
      const h = half();
      if (el.scrollLeft >= h) el.scrollLeft -= h;
      if (el.scrollLeft < 0) el.scrollLeft += h;
      posRef.current = el.scrollLeft;
    }
    function onUp() {
      dragRef.current.down = false;
      el.classList.remove('dragging');
    }
    function onEnter() { pausedRef.current = true; }
    function onLeave() { pausedRef.current = false; onUp(); }

    el.addEventListener('mouseenter', onEnter);
    el.addEventListener('mouseleave', onLeave);
    el.addEventListener('mousedown', onDown);
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    el.addEventListener('touchstart', onDown, { passive: true });
    el.addEventListener('touchmove', onMove, { passive: true });
    el.addEventListener('touchend', onUp);
    el.addEventListener('click', function (e) { if (dragRef.current.moved) { e.preventDefault(); e.stopPropagation(); } }, true);

    return function () {
      cancelAnimationFrame(raf);
      el.removeEventListener('mouseenter', onEnter);
      el.removeEventListener('mouseleave', onLeave);
      el.removeEventListener('mousedown', onDown);
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
      el.removeEventListener('touchstart', onDown);
      el.removeEventListener('touchmove', onMove);
      el.removeEventListener('touchend', onUp);
    };
  }, []);

  return React.createElement('section', { className: 'depoimentos', id: 'depoimentos' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'reveal', style: { textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' } },
        React.createElement(SectionHeader, {
          title: 'Mais do que depoimentos. Histórias reais de transformação.',
          center: true,
          line: false
        })
      )
    ),
    React.createElement('div', { className: 'dep-marquee reveal', ref: scrollerRef },
      React.createElement('div', { className: 'dep-track' },
        track.map((d, i) =>
          React.createElement('div', { key: i, className: 'dep-card', 'aria-hidden': i >= deps.length ? 'true' : undefined },
            React.createElement('div', { className: 'dep-card-head' },
              React.createElement('div', { className: 'dep-avatar' }, d.initials),
              React.createElement('div', null,
                React.createElement('div', { className: 'dep-name' }, d.name),
                React.createElement(Stars)
              ),
              React.createElement('div', { className: 'dep-google', title: 'Avaliação do Google' }, 'G')
            ),
            React.createElement('p', { className: 'dep-text' }, d.text)
          )
        )
      )
    )
  );
}

Object.assign(window, { Diferenciais, Sobre, SobrePaula, Resultados, Depoimentos });