/* global React */
const { useEffect, useMemo, useRef, useState } = React;

/* ====== Reveal-on-scroll hook ====== */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('is-in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

/* ====== Icons (lucide-style minimal SVG) ====== */
const Icon = {
  Sparkles: (p) => (
    <svg {...p} width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/><circle cx="12" cy="12" r="2.2"/></svg>
  ),
  Smile: (p) => (
    <svg {...p} width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><circle cx="9" cy="10" r="0.5" fill="currentColor"/><circle cx="15" cy="10" r="0.5" fill="currentColor"/></svg>
  ),
  Heart: (p) => (
    <svg {...p} width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"><path d="M3.5 12.5L8 17l3-3 2 2 7.5-7.5"/><path d="M20.8 8.2a4.5 4.5 0 00-7.8-3 4.5 4.5 0 00-7.8 3c0 4.5 7.8 9.3 7.8 9.3s.4-.2 1-.7"/></svg>
  ),
  Leaf: (p) => (
    <svg {...p} width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 20A7 7 0 014 13V5a1 1 0 011-1h7a7 7 0 017 7v8a1 1 0 01-1 1h-5z"/><path d="M5 19l7-7"/></svg>
  ),
  Arrow: (p) => (
    <svg {...p} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
  ),
  Phone: (p) => (
    <svg {...p} width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></svg>
  ),
  Whatsapp: (p) => (
    <svg {...p} width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 3.5A11 11 0 003.7 17.4L2 22l4.7-1.7A11 11 0 1020.5 3.5zm-8.5 18a9 9 0 01-4.6-1.3l-.3-.2-2.8 1 1-2.7-.2-.3a9 9 0 1112.7 4.4 9 9 0 01-5.8 1.1zm5.1-6.7c-.3-.1-1.7-.8-1.9-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1a7.4 7.4 0 01-3.6-3.2c-.3-.5.3-.4.7-1.4 0-.2 0-.3-.1-.5l-.9-2c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 00-.8.4 3 3 0 00-1 2.3c0 1.4 1 2.7 1.2 2.9.1.2 2 3.1 4.9 4.4 1.8.7 2.5.8 3.4.7.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.2-.3-.2-.6-.4z"/></svg>
  ),
  Pin: (p) => (
    <svg {...p} width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
  ),
  Person: (p) => (
    <svg {...p} width="80" height="80" viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="0.8"><circle cx="40" cy="30" r="14"/><path d="M14 72c0-14 12-22 26-22s26 8 26 22"/></svg>
  ),
};

const WHATSAPP_URL = 'https://wa.me/5554999192051';
const INSTAGRAM_URL = 'https://www.instagram.com/revita.clinic.oficial/';
const MAPS_URL = 'https://www.google.com/maps/search/?api=1&query=Rua+Feijo+Junior+1132+Sala+B+Terreo+Caxias+do+Sul+RS';

/* ====== BlurText (React Bits-compatible static variant) ====== */
function BlurText({
  text = '',
  delay = 90,
  className = '',
  animateBy = 'words',
  direction = 'top',
  threshold = 0.1,
  rootMargin = '0px',
  onAnimationComplete,
  stepDuration = 0.35,
  as = 'p',
}) {
  const elements = useMemo(() => (
    animateBy === 'words' ? text.split(' ') : text.split('')
  ), [animateBy, text]);
  const [inView, setInView] = useState(false);
  const ref = useRef(null);
  const completedRef = useRef(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setInView(true);
          observer.unobserve(el);
        }
      },
      { threshold, rootMargin }
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, [threshold, rootMargin]);

  const Tag = as;
  return (
    <Tag
      ref={ref}
      className={`blur-text blur-text-${direction}${inView ? ' is-in' : ''}${className ? ` ${className}` : ''}`}
      style={{ '--blur-delay': `${delay}ms`, '--blur-duration': `${stepDuration}s` }}
    >
      {elements.map((segment, index) => (
        <span
          className="blur-text-segment"
          key={`${segment}-${index}`}
          style={{ animationDelay: `${(index * delay) / 1000}s` }}
          onAnimationEnd={
            index === elements.length - 1
              ? () => {
                  if (!completedRef.current && onAnimationComplete) {
                    completedRef.current = true;
                    onAnimationComplete();
                  }
                }
              : undefined
          }
        >
          {segment === ' ' ? '\u00A0' : segment}
          {animateBy === 'words' && index < elements.length - 1 && '\u00A0'}
        </span>
      ))}
    </Tag>
  );
}

function TitleText({ as = 'h2', text, className = 'h-section', delay = 75, direction = 'top' }) {
  return (
    <BlurText
      as={as}
      text={text}
      className={className}
      delay={delay}
      direction={direction}
      animateBy="words"
      rootMargin="0px 0px -80px 0px"
      stepDuration={0.42}
    />
  );
}

/* ====== Header ====== */
function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
  }, [open]);

  const links = [
    ['Início', '#hero'],
    ['A Revita', '#manifesto'],
    ['Tratamentos', '#servicos'],
    ['Experiência', '#experiencia'],
    ['Sócias', '#socias'],
    ['Localização', '#localizacao'],
  ];

  return (
    <>
      <header className={`site-header${scrolled ? ' is-scrolled' : ''}`}>
        <div className="container header-inner">
          <a href="#hero" className="brand" aria-label="Revita Clinic">
            <span className="brand-mark"><img src="assets/revita-logo.png" alt="Revita Clinic" /></span>
          </a>
          <nav className="nav" aria-label="Navegação principal">
            {links.map(([l, h]) => <a key={l} href={h}>{l}</a>)}
          </nav>
          <a href={WHATSAPP_URL} className="header-cta" target="_blank" rel="noopener">Agendar avaliação</a>
          <button
            className={`menu-toggle${open ? ' is-open' : ''}`}
            aria-label="Abrir menu"
            aria-expanded={open}
            onClick={() => setOpen(!open)}
          ><span /></button>
        </div>
      </header>
      <div className={`mobile-menu${open ? ' is-open' : ''}`}>
        {links.map(([l, h]) => (
          <a key={l} href={h} onClick={() => setOpen(false)}>{l}</a>
        ))}
        <a href={WHATSAPP_URL} className="btn btn-primary" target="_blank" rel="noopener" onClick={() => setOpen(false)}>
          Agendar avaliação <Icon.Arrow className="arrow" />
        </a>
      </div>
    </>
  );
}

/* ====== Hero ====== */
function Hero() {
  return (
    <section className="hero" id="hero">
      <span className="hero-ornament" aria-hidden="true" />
      <span className="hero-ornament two" aria-hidden="true" />
      <div className="container hero-grid">
        <div className="hero-content">
          <span className="pill" style={{ animation: 'floatIn 0.9s 0.1s both' }}>
            <span className="dot" /> Estética Avançada · Pilates · Fisioterapia
          </span>
          <TitleText
            as="h1"
            text="Estética avançada, pilates e fisioterapia em Caxias do Sul."
            className="h-display"
            delay={80}
          />
          <p className="hero-sub" style={{ animation: 'floatIn 1s 1.3s both', opacity: 0 }}>
            Cuidado individualizado para realçar sua beleza, melhorar seu movimento e fortalecer
            sua qualidade de vida em São Pelegrino.
          </p>
          <div className="hero-cta" style={{ animation: 'floatIn 1s 1.5s both', opacity: 0 }}>
            <a href={WHATSAPP_URL} className="btn btn-primary" target="_blank" rel="noopener">Agendar pelo WhatsApp <Icon.Arrow className="arrow" /></a>
            <a href="#servicos" className="btn btn-secondary">Conhecer tratamentos</a>
          </div>
          <div className="hero-microcopy" style={{ animation: 'floatIn 1s 1.7s both', opacity: 0 }}>
            <span>Avaliação individualizada</span>
            <span>Estética, movimento e reabilitação</span>
            <span>São Pelegrino · Caxias do Sul</span>
          </div>
        </div>
        <div className="hero-visual">
          <img src="assets/revita-hero-ambiente.png" alt="Ambiente da Revita Clinic com sala de pilates e estética" />
          <div className="hero-floating-card">
            <span className="icon"><Icon.Sparkles /></span>
            <span className="text">
              <strong>Transformamos beleza em poder</strong>
              Beleza com naturalidade, corpo em movimento e cuidado clínico.
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ====== Manifesto ====== */
function Manifesto() {
  const ref = useReveal();
  return (
    <section className="manifesto" id="manifesto">
      <div className="container">
        <div className="manifesto-inner reveal" ref={ref}>
          <div className="divider-ornament">
            <span className="line" /><span className="diamond" /><span className="line" />
          </div>
          <TitleText
            text="Mais do que estética. Beleza, saúde e movimento no mesmo cuidado."
            className="h-section"
            delay={55}
          />
          <div className="manifesto-text">
            <p>A Revita Clinic nasceu para cuidar de pessoas de forma completa, unindo estética avançada, pilates, fisioterapia e bem-estar em um espaço preparado para acolher diferentes objetivos.</p>
            <p>Aqui, cada atendimento começa com escuta e avaliação individualizada, porque o caminho certo depende do seu corpo, da sua rotina e do resultado que faz sentido para você.</p>
            <p>Não trabalhamos com fórmulas prontas. Trabalhamos com naturalidade, segurança e uma visão clínica que conecta beleza, prevenção, reabilitação e qualidade de vida.</p>
          </div>
          <p className="manifesto-quote">
            “Transformamos beleza em poder: <br />
            com naturalidade, movimento e cuidado de verdade.”
          </p>
        </div>
      </div>
    </section>
  );
}

/* ====== Pillars ====== */
function Pillars() {
  const ref = useReveal();
  const items = [
    { n: '01', icon: <Icon.Sparkles />, t: 'Estética Avançada', d: 'Procedimentos faciais e corporais pensados para realçar beleza com naturalidade, equilíbrio e avaliação profissional antes de cada indicação.' },
    { n: '02', icon: <Icon.Leaf />, t: 'Pilates e Movimento', d: 'Aulas e acompanhamentos para força, mobilidade, postura e consciência corporal, respeitando ritmo, idade e objetivo de cada pessoa.' },
    { n: '03', icon: <Icon.Heart />, t: 'Fisioterapia', d: 'Cuidado voltado à prevenção, reabilitação e qualidade de vida, com olhar técnico para dor, movimento, pós-operatório e funcionalidade.' },
    { n: '04', icon: <Icon.Smile />, t: 'Avaliação Individualizada', d: 'Cada plano nasce de uma escuta cuidadosa: anatomia, histórico, expectativas, rotina e segurança orientam a jornada.' },
  ];
  return (
    <section className="pillars">
      <div className="container">
        <div className="pillars-head reveal" ref={ref}>
          <div>
            <span className="eyebrow">Pilares Revita</span>
            <TitleText
              text="Um ecossistema para cuidar da sua beleza, do seu corpo e da sua qualidade de vida"
              className="h-section"
              delay={55}
            />
          </div>
          <p className="body-lead">
            A Revita une estética, movimento e reabilitação para organizar uma experiência clara,
            humana e orientada ao que cada pessoa realmente precisa.
          </p>
        </div>
        <div className="pillars-grid reveal-stagger" ref={useReveal()}>
          {items.map((it) => (
            <article key={it.n} className="pillar-card">
              <div className="number">{it.n}</div>
              <div className="icon">{it.icon}</div>
              <TitleText as="h3" text={it.t} className="" delay={45} />
              <p>{it.d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ====== Services (Tabs + Accordion) ====== */
const SERVICES = [
  {
    id: 'facial',
    tabTitle: 'Estética Facial',
    headline: 'Estética facial para realçar seus traços com naturalidade',
    text: 'Tratamentos conduzidos a partir de avaliação individualizada, buscando harmonia, suavização de sinais e preservação da expressão natural.',
    items: ['Toxina botulínica', 'Preenchimento labial', 'Preenchimento de olheiras', 'Sulco nasogeniano', 'Rinomodelação', 'Harmonização facial', 'Protocolos personalizados para pele'],
    cta: 'Quero uma avaliação facial',
  },
  {
    id: 'corporal',
    tabTitle: 'Estética Corporal',
    headline: 'Protocolos corporais para autoestima, firmeza e bem-estar',
    text: 'Cuidado corporal com foco em conforto, contorno, melhora da relação com o corpo e indicação segura conforme objetivo e avaliação.',
    items: ['Estética corporal', 'Depilação a laser', 'GluteoLift360', 'Bioestimuladores', 'Ácido hialurônico corporal', 'Remoção de verrugas e acrocórdons'],
    cta: 'Quero conhecer os tratamentos corporais',
  },
  {
    id: 'pilates',
    tabTitle: 'Pilates',
    headline: 'Movimento guiado para postura, força e qualidade de vida',
    text: 'Pilates personalizado para diferentes idades e objetivos, com acompanhamento profissional para melhorar consciência corporal, mobilidade e bem-estar.',
    items: ['Pilates personalizado', 'Mat Pilates', 'Funcional', 'Condicionamento físico', 'Fortalecimento', 'Postura e mobilidade'],
    cta: 'Quero começar pilates',
  },
  {
    id: 'fisio',
    tabTitle: 'Fisioterapia',
    headline: 'Reabilitação, prevenção e cuidado para o corpo em movimento',
    text: 'A fisioterapia na Revita apoia prevenção, recuperação e qualidade de vida, conectando técnica, escuta e plano de cuidado individual.',
    items: ['Fisioterapia especializada', 'Reabilitação', 'Pós-operatório', 'Prevenção de dores', 'Terapias integradas', 'Acompanhamento funcional'],
    cta: 'Quero uma avaliação em fisioterapia',
  },
];

function Services() {
  const [active, setActive] = useState(0);
  const [openAcc, setOpenAcc] = useState(0);
  const headRef = useReveal();
  const bodyRef = useReveal();
  const cur = SERVICES[active];

  return (
    <section className="services" id="servicos">
      <div className="container">
        <div className="services-head reveal" ref={headRef}>
          <span className="eyebrow">Tratamentos</span>
          <TitleText
            text="Tratamentos que conectam estética, movimento e reabilitação"
            className="h-section"
            delay={55}
          />
          <p className="body-lead">
            Na Revita Clinic, cada serviço entra dentro de uma jornada maior: entender seu objetivo,
            avaliar suas necessidades e indicar um caminho responsável, possível e personalizado.
          </p>
        </div>

        {/* Desktop */}
        <div className="services-layout desktop reveal" ref={bodyRef}>
          <div className="tabs-list" role="tablist">
            {SERVICES.map((s, i) => (
              <button
                key={s.id}
                className={`tab-btn${i === active ? ' active' : ''}`}
                onClick={() => setActive(i)}
                role="tab"
                aria-selected={i === active}
              >
                <span className="num">{String(i + 1).padStart(2, '0')}</span>
                {s.tabTitle}
              </button>
            ))}
          </div>
          <div className="tab-panel" role="tabpanel">
            <div className="tab-panel-content" key={cur.id}>
              <div>
                <span className="eyebrow">{cur.tabTitle}</span>
                <TitleText as="h3" text={cur.headline} className="" delay={45} />
                <p className="panel-text">{cur.text}</p>
              </div>
              <ul className="services-list">
                {cur.items.map((it) => <li key={it}>{it}</li>)}
              </ul>
              <a href={WHATSAPP_URL} className="btn btn-primary" target="_blank" rel="noopener" style={{ alignSelf: 'flex-start', justifySelf: 'start', width: 'fit-content' }}>
                {cur.cta} <Icon.Arrow className="arrow" />
              </a>
            </div>
          </div>
        </div>

        {/* Mobile accordion */}
        <div className="services-layout mobile">
          {SERVICES.map((s, i) => (
            <div key={s.id} className={`accordion-item${i === openAcc ? ' is-open' : ''}`}>
              <button className="accordion-header" onClick={() => setOpenAcc(i === openAcc ? -1 : i)}>
                {s.tabTitle}
                <span className="plus" />
              </button>
              <div className="accordion-body">
                <div className="accordion-content">
                  <p style={{ color: 'var(--text-secondary)', fontSize: 14.5, marginBottom: 16 }}>{s.text}</p>
                  <ul className="services-list" style={{ gridTemplateColumns: '1fr', marginBottom: 20 }}>
                    {s.items.map((it) => <li key={it}>{it}</li>)}
                  </ul>
                  <a href={WHATSAPP_URL} className="btn btn-primary" target="_blank" rel="noopener">{s.cta} <Icon.Arrow className="arrow" /></a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ====== Experience ====== */
function Experience() {
  const ref = useReveal();
  const cards = [
    { n: '01', t: 'Ambiente completo', d: 'Estrutura pensada para estética, movimento e reabilitação, com conforto para uma experiência de cuidado mais fluida.' },
    { n: '02', t: 'Avaliação antes da indicação', d: 'O atendimento parte da escuta, do histórico e dos objetivos para evitar protocolos genéricos e aumentar segurança.' },
    { n: '03', t: 'Integração de áreas', d: 'Estética avançada, pilates e fisioterapia se conectam para cuidar da autoestima, da função e da qualidade de vida.' },
    { n: '04', t: 'São Pelegrino', d: 'A Revita Clinic está no bairro São Pelegrino, em Caxias do Sul, com agendamento facilitado pelo WhatsApp.' },
  ];
  return (
    <section className="experience" id="experiencia">
      <div className="container">
        <div className="exp-head reveal" ref={ref}>
          <span className="eyebrow">Experiência Revita</span>
          <TitleText
            text="Uma clínica para quem busca resultado, segurança e cuidado com presença"
            className="h-section"
            delay={55}
          />
        </div>
        <div className="exp-layout">
          <div className="exp-image-wrap reveal" ref={useReveal()}>
            <img src="assets/img-ambiente.png" alt="Ambiente de atendimento da Revita Clinic" />
          </div>
          <div className="exp-cards reveal-stagger" ref={useReveal()}>
            {cards.map((c) => (
              <div key={c.n} className="exp-card">
                <span className="num">{c.n}</span>
                <div>
                  <TitleText as="h4" text={c.t} className="" delay={40} direction="bottom" />
                  <p>{c.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ====== Technology (dark) ====== */
function Technology() {
  const ref = useReveal();
  return (
    <section className="tech">
      <div className="container">
        <div className="tech-grid">
          <div className="reveal" ref={ref}>
            <span className="eyebrow">Naturalidade & Movimento</span>
            <TitleText
              text="Beleza com intenção. Corpo com liberdade."
              className="h-section"
              delay={60}
            />
            <p>A Revita não trata estética como algo separado da saúde. O corpo que se movimenta melhor, respira melhor e se sente melhor também sustenta uma autoestima mais forte.</p>
            <p>Por isso, a clínica combina procedimentos estéticos, pilates e fisioterapia para criar planos mais completos, com naturalidade, equilíbrio e responsabilidade.</p>
            <p className="tech-quote">“O objetivo não é padronizar. É cuidar para que você se reconheça com mais potência.”</p>
          </div>
          <div className="tech-visual reveal" ref={useReveal()}>
            <span className="tech-corner" />
            <span className="tech-corner bl" />
            <img src="assets/img-facial.png" alt="Tratamento estético com foco em naturalidade na Revita Clinic" />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ====== Journey ====== */
function Journey() {
  const ref = useReveal();
  const steps = [
    { n: 'I', t: 'Contato pelo WhatsApp', d: 'Você chama a equipe, informa seu objetivo e recebe orientação para o melhor tipo de avaliação ou atendimento.' },
    { n: 'II', t: 'Avaliação individualizada', d: 'A Revita entende sua rotina, histórico, queixas, expectativas e necessidades antes de qualquer indicação.' },
    { n: 'III', t: 'Plano de cuidado', d: 'Você recebe uma orientação clara, seja para estética, pilates, fisioterapia ou uma combinação entre áreas.' },
    { n: 'IV', t: 'Atendimento e acompanhamento', d: 'A jornada continua com atenção ao resultado, evolução, segurança e bem-estar em cada etapa.' },
  ];
  return (
    <section className="journey">
      <div className="container">
        <div className="journey-head reveal" ref={useReveal()}>
          <span className="eyebrow">Jornada</span>
          <TitleText
            text="Como funciona sua experiência na Revita"
            className="h-section"
            delay={55}
          />
        </div>
        <div className="timeline reveal" ref={ref}>
          <span className="timeline-progress" />
          {steps.map((s) => (
            <div key={s.n} className="timeline-step">
              <div className="marker">{s.n}</div>
              <div className="timeline-step-body">
              <TitleText as="h4" text={s.t} className="" delay={40} direction="bottom" />
              <p>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ====== Founder Vision (Sócias) ====== */
function FounderVision() {
  const ref = useReveal();
  const cards = [
    { t: 'Cuidado conduzido de perto', d: 'Rochele e Mônica acompanham a experiência da clínica com atenção aos detalhes, da primeira conversa ao plano de cuidado.' },
    { t: 'Naturalidade como princípio', d: 'A estética na Revita busca realçar traços, preservar expressões e respeitar a individualidade de cada pessoa.' },
    { t: 'Movimento como saúde', d: 'Pilates e fisioterapia ampliam o cuidado para postura, força, prevenção, recuperação e qualidade de vida.' },
    { t: 'Avaliação responsável', d: 'Cada indicação nasce de escuta, análise e orientação profissional para que o tratamento faça sentido para o seu momento.' },
  ];
  return (
    <section className="founder" id="socias">
      <div className="container">
        <div className="founder-grid">
          <div className="founder-image reveal" ref={ref}>
            <img src="assets/revita-socias.png" alt="Rochele Maria Tisatto Rizzi e Mônica Laís de Abreu, sócias da Revita Clinic" />
            <div className="founder-image-tag">
              <span className="role">Sócias da Revita Clinic</span>
              <span className="name">Rochele & Mônica</span>
            </div>
          </div>
          <div className="founder-content reveal" ref={useReveal()}>
            <span className="eyebrow">Rochele & Mônica</span>
            <TitleText
              text="Uma liderança feminina que une estética, movimento e cuidado clínico"
              className="h-section"
              delay={55}
            />
            <div className="founder-text">
              <p>A Revita Clinic nasce da visão de Rochele e Mônica: uma clínica em que estética, movimento e saúde caminham juntos em uma experiência de cuidado completa.</p>
              <p>À frente da marca, elas constroem uma experiência acolhedora, sofisticada e segura, com escuta real, atenção aos detalhes e planos pensados para cada pessoa.</p>
              <p>Da estética avançada ao pilates e à fisioterapia, a Revita valoriza resultados naturais, orientação clara e um atendimento que respeita corpo, rotina e objetivos individuais.</p>
            </div>
            <p className="founder-quote">“Transformamos beleza em poder.”</p>
            <div className="founder-cards">
              {cards.map((c, i) => (
                <div key={c.t} className="founder-card">
                  <span className="founder-card-num">{String(i + 1).padStart(2, '0')}</span>
                  <TitleText as="h4" text={c.t} className="" delay={40} direction="bottom" />
                  <p>{c.d}</p>
                </div>
              ))}
            </div>
            <a href={WHATSAPP_URL} className="btn btn-gold" target="_blank" rel="noopener" style={{ marginTop: 32 }}>
              Agendar avaliação na Revita <Icon.Arrow className="arrow" />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ====== Professionals ====== */
function Professionals() {
  const ref = useReveal();
  const cards = [
    { role: 'Tratamento', title: 'Estética Facial', img: 'assets/prof-estetica.png' },
    { role: 'Tratamento', title: 'Estética Corporal', img: 'assets/prof-bemestar.png' },
    { role: 'Movimento', title: 'Pilates', img: 'assets/prof-saude.png' },
    { role: 'Cuidado clínico', title: 'Fisioterapia', img: 'assets/img-ambiente.png' },
  ];
  return (
    <section className="professionals" id="profissionais">
      <div className="container">
        <div className="prof-head reveal" ref={ref}>
          <div>
            <span className="eyebrow">Frentes de cuidado</span>
            <TitleText
              text="Da autoestima ao movimento: uma clínica para cuidar por inteiro"
              className="h-section"
              delay={55}
            />
          </div>
          <p className="body-lead">
            Cada frente da Revita responde a uma necessidade real: realçar seus traços, cuidar do corpo,
            melhorar o movimento e apoiar sua recuperação. A avaliação individualizada conecta essas áreas
            para indicar o caminho mais adequado para você.
          </p>
        </div>
        <div className="prof-grid reveal-stagger" ref={useReveal()}>
          {cards.map((c) => (
            <article key={c.title} className="prof-card">
              <img className="prof-card-img" src={c.img} alt={c.title} />
              <div className="prof-card-overlay" />
              <div className="label">
                <div className="role">{c.role}</div>
                <BlurText as="div" text={c.title} className="title" delay={40} direction="bottom" />
              </div>
            </article>
          ))}
        </div>
        <div className="prof-cta">
          <a href="#servicos" className="btn btn-secondary">Ver tratamentos da Revita <Icon.Arrow className="arrow" /></a>
        </div>
      </div>
    </section>
  );
}

/* ====== Location ====== */
function Location() {
  const ref = useReveal();
  return (
    <section className="location" id="localizacao">
      <div className="container">
        <div className="location-grid">
          <div className="location-info reveal" ref={ref}>
            <span className="eyebrow">Localização</span>
            <TitleText
              text="Revita Clinic em São Pelegrino"
              className="h-section"
              delay={55}
            />
            <p>Estética avançada, pilates e fisioterapia em Caxias do Sul, com atendimento mediante agendamento.</p>
            <div className="address-card">
              <div className="label">Endereço</div>
              <div className="addr">Rua Feijó Júnior, 1132, Sala B - Térreo<br />São Pelegrino — Caxias do Sul / RS</div>
              <div className="hours">Segunda a sexta, 07:00 às 19:30 · Sábado, 07:00 às 12:30</div>
            </div>
            <div className="location-buttons">
              <a className="btn btn-primary" href={MAPS_URL} target="_blank" rel="noopener">
                <Icon.Pin /> Como chegar
              </a>
              <a className="btn btn-gold" href={WHATSAPP_URL} target="_blank" rel="noopener">
                <Icon.Whatsapp /> Agendar pelo WhatsApp
              </a>
            </div>
          </div>
          <div className="map-wrap reveal" ref={useReveal()}>
            <iframe
              title="Mapa Revita Clinic"
              src="https://www.google.com/maps?q=Rua+Feijo+Junior+1132+Caxias+do+Sul+RS&output=embed"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ====== Final CTA ====== */
function FinalCTA() {
  const ref = useReveal();
  return (
    <section className="final-cta" id="cta">
      <div className="container final-cta-inner reveal" ref={ref}>
        <div className="divider-ornament">
          <span className="line" /><span className="diamond" /><span className="line" />
        </div>
        <TitleText
          text="Sua jornada começa com uma avaliação individualizada"
          className="h-section"
          delay={55}
        />
        <p>Agende pelo WhatsApp e conheça uma experiência que une estética avançada, pilates e fisioterapia em São Pelegrino.</p>
        <a className="btn btn-primary" href={WHATSAPP_URL} target="_blank" rel="noopener" style={{ padding: '20px 36px' }}>
          Agendar avaliação pelo WhatsApp <Icon.Arrow className="arrow" />
        </a>
        <p className="microcopy">
          Atendimento mediante agendamento. Procedimentos estéticos, pilates e fisioterapia devem ser indicados após avaliação profissional individualizada.
        </p>
      </div>
    </section>
  );
}

/* ====== Footer ====== */
function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <a href="#hero" className="brand" aria-label="Revita Clinic">
              <span className="brand-mark"><img src="assets/revita-logo.png" alt="Revita Clinic" /></span>
            </a>
            <p>Estética Avançada · Pilates · Fisioterapia<br />São Pelegrino — Caxias do Sul / RS</p>
          </div>
          <div className="footer-col">
            <h5>Navegação</h5>
            <ul>
              <li><a href="#hero">Início</a></li>
              <li><a href="#servicos">Tratamentos</a></li>
              <li><a href="#experiencia">Experiência</a></li>
              <li><a href="#socias">Sócias</a></li>
              <li><a href="#localizacao">Localização</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Contato</h5>
            <ul>
              <li><a href={INSTAGRAM_URL} target="_blank" rel="noopener">Instagram</a></li>
              <li><a href={WHATSAPP_URL} target="_blank" rel="noopener">WhatsApp</a></li>
              <li><a href={WHATSAPP_URL} target="_blank" rel="noopener">Agendar avaliação</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Revita Clinic. Todos os direitos reservados.</span>
          <span className="legal">
            As informações deste site têm caráter informativo. Procedimentos estéticos, pilates e fisioterapia devem ser indicados após avaliação profissional individualizada.
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ====== App ====== */
function App() {
  return (
    <>
      <Header />
      <main>
        <Hero />
        <Manifesto />
        <Pillars />
        <Services />
        <Experience />
        <FounderVision />
        <Technology />
        <Journey />
        <Professionals />
        <Location />
        <FinalCTA />
      </main>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);