/* Matura Vita — Marketing site sections.
   Composes DS primitives (window namespace) + Lucide icons.
   Content restructured to mirror the full brand booklet (livreto).
   Exposes: Site (full page). */

const NS = window.MaturaVitaDesignSystem_29e547;
const { Button, Pill, Card, Avatar, LeafDivider, Badge, Input } = NS;
const A = './assets';

function Icon({ name, size = 22, color = 'currentColor', strokeWidth = 1.6, style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      ref.current.appendChild(el);
      window.lucide.createIcons({ attrs: { width: size, height: size, stroke: color, 'stroke-width': strokeWidth }, nodes: [el] });
    }
  }, [name, size, color, strokeWidth]);
  return <span ref={ref} style={{ display: 'inline-flex', ...style }} />;
}


const scrollToSection = (id) => {
  document.getElementById(id)?.scrollIntoView({
    behavior: 'smooth',
    block: 'start',
  });
};

/* ---------------- Nav ---------------- */
function Nav() {
  const links = [
    { label: 'Quem somos', id: 'quem-somos' },
    { label: 'Valores', id: 'valores' },
    { label: 'Áreas de atuação', id: 'areas-de-atuacao' },
    { label: 'Como funciona', id: 'como-funciona' },
    { label: 'Contato', id: 'contato' },
  ];

  const scrollToSection = (id) => {
    document.getElementById(id)?.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
    });
  };

  return (
    <header
      style={{
        position: 'sticky',
        top: 0,
        zIndex: 20,
        background: 'color-mix(in srgb, var(--creme) 88%, transparent)',
        backdropFilter: 'blur(10px)',
        borderBottom: '1px solid var(--terra-100)',
      }}
    >
      <div
        style={{
          maxWidth: 1200,
          margin: '0 auto',
          padding: '16px 40px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}
      >
        <img
          src={`${A}/logo-horizontal.png`}
          alt="Matura Vita"
          style={{ height: 40 }}
        />

        <nav style={{ display: 'flex', gap: 26, alignItems: 'center' }}>
          {links.map((link) => (
            <button
              key={link.id}
              onClick={() => scrollToSection(link.id)}
              style={{
                background: 'none',
                border: 'none',
                cursor: 'pointer',
                fontFamily: 'var(--font-sans)',
                fontSize: 13.5,
                color: 'var(--ink-soft)',
                fontWeight: 400,
                padding: 0,
              }}
            >
              {link.label}
            </button>
          ))}
        </nav>

        <Button
          variant="accent"
          size="sm"
          iconLeft={<Icon name="message-circle" size={16} color="#fff" />}
        >
          Agendar avaliação
        </Button>
      </div>
    </header>
  );
}

/* ---------------- Hero ---------------- */
function Hero() {
  return (
    <section style={{ background: 'var(--creme)', position: 'relative', overflow: 'hidden' }}>
      <img src={`${A}/symbol-olive.png`} alt="" style={{ position: 'absolute', right: -120, bottom: -120, width: 460, opacity: 0.06 }} />
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '76px 40px 88px', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 56, alignItems: 'center' }}>
        <div>
          <Pill variant="oliveDeep">Fisioterapia domiciliar especializada</Pill>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 60, lineHeight: 1.05, letterSpacing: '-0.01em', color: 'var(--ink)', margin: '22px 0 0' }}>
            Envelhecer com<br /><span style={{ fontStyle: 'italic', color: 'var(--oliva-500)' }}>autonomia</span> e cuidado
          </h1>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 18, lineHeight: 1.7, color: 'var(--text-body)', maxWidth: 480, margin: '22px 0 32px' }}>
            Levar fisioterapia especializada até o domicílio, promovendo cuidado centrado na pessoa idosa para preservar funcionalidade, autonomia e alcançar seu maior potencial.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
           
              <span
                onClick={() => scrollToSection('contato')}
                style={{ cursor: 'pointer', display: 'inline-flex' }}
              >
                <Button
                  variant="primary"
                  size="lg"
                  iconRight={<Icon name="arrow-right" size={18} color="var(--creme)" />}
                >
                  Agendar avaliação
                </Button>
              </span>
            
              <span
                onClick={() => scrollToSection('areas-de-atuacao')}
                style={{ cursor: 'pointer', display: 'inline-flex' }}
              >
                <Button variant="outline" size="lg">
                  Conhecer serviços
                </Button>
              </span>
            </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 38 }}>
            <div style={{ display: 'flex' }}>
              {['Ana M.', 'José P.', 'Rita C.', 'Luiz F.'].map((n, i) => (
                <span key={n} style={{ marginLeft: i ? -12 : 0 }}><Avatar name={n} size={40} ring /></span>
              ))}
            </div>
            <div>
              <div style={{ display: 'flex', gap: 3, color: 'var(--terra-400)' }}>
                {[0, 1, 2, 3, 4].map((i) => <Icon key={i} name="star" size={15} color="var(--terra-400)" />)}
              </div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--text-muted)', marginTop: 4 }}>Famílias que confiam no nosso cuidado</div>
            </div>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <div style={{ position: 'relative', borderRadius: 28, overflow: 'hidden', height: 480, boxShadow: 'var(--shadow-lg)' }}>
            <img src={`${A}/patient-cover.png`} alt="Paciente da Matura Vita" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%' }} />
          </div>
          <div style={{ position: 'absolute', left: -28, bottom: 40 }}>
            <Card variant="surface" pad="md" style={{ width: 230, boxShadow: 'var(--shadow-lg)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--terra-050)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name="house" size={22} color="var(--terra-500)" />
                </span>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, color: 'var(--ink)' }}>100%</div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12.5, color: 'var(--text-muted)' }}>no conforto do lar</div>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Quem somos ---------------- */
const FOUNDERS = [
  {
    name: 'Deise Ferreira da Silva',
    crefito: 'CREFITO 3 - 174192-F · RQE 1150190019',
    bio: 'Fisioterapeuta Especialista em Gerontologia pela Sociedade Brasileira de Geriatria e Gerontologia e pelo COFFITO. Mestre e Doutoranda em Ciências da Reabilitação pela USP. MBA em Gestão, Inovação e Serviços em Saúde pela PUC. Coordenadora da Câmara Técnica de Fisioterapia em Gerontologia do CREFITO. Gestora e Docente da Especialização em Fisioterapia em Gerontologia e no Ambulatório de Fisioterapia do Hospital das Clínicas - São Paulo.'
  },
  {
    name: 'Tamires Alves Martins',
    crefito: 'CREFITO 3 - 276404-F · RQE 1150260524',
    bio: 'Fisioterapeuta Especialista em Gerontologia pelo COFFITO. MBA em Gestão, Inovação e Serviços em Saúde pela PUC. Supervisora e docente da especialização de Fisioterapia em Gerontologia e apoio técnico à gestão do Ambulatório de Fisioterapia do Hospital das Clínicas - São Paulo.'
  },
];

function QuemSomos() {
  return (
    <section id="quem-somos" style={{ background: 'var(--surface-page-alt)', padding: '90px 40px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 60, alignItems: 'center', marginBottom: 64 }}>
        <div style={{ position: 'relative', borderRadius: 28, overflow: 'hidden', height: 460, boxShadow: 'var(--shadow-md)' }}>
          <img src={`${A}/founders-site.png`} alt="Fundadoras Matura Vita" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 15%' }} />
        </div>
        <div>
          <Pill variant="olive" style={{ fontSize: 16, padding: '14px 30px' }}>Quem somos</Pill>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.75, color: 'var(--text-body)', margin: '22px 0 0', maxWidth: 560 }}>
            A Matura Vita é uma empresa especializada em fisioterapia domiciliar para pessoas idosas. Atuamos diretamente no ambiente onde o paciente vive, oferecendo cuidado técnico, individualizado e centrado em quem está sendo cuidado. Foi idealizada por duas fisioterapeutas especialistas em Gerontologia, com sólida trajetória no cuidado à pessoa idosa em diversas modalidades de assistência, no ensino e na gestão em saúde.
          </p>
        </div>
      </div>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {FOUNDERS.map((f) => (
          <Card key={f.name} variant="surface" pad="lg">
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
              <Avatar name={f.name} size={52} ring />
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 21, color: 'var(--ink)' }}>{f.name}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12.5, color: 'var(--terra-600)', fontWeight: 500 }}>{f.crefito}</div>
              </div>
            </div>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, lineHeight: 1.65, color: 'var(--text-body)', margin: 0 }}>{f.bio}</p>
          </Card>
        ))}
      </div>
    </section>
  );
}

/* ---------------- Missão & Visão ---------------- */
function MissaoVisao() {
  return (
    <section style={{ background: 'var(--creme)', padding: '90px 40px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
        <Card variant="olive" pad="lg">
          <Pill variant="cream">Nossa missão</Pill>
          <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400, fontSize: 26, lineHeight: 1.5, color: 'var(--creme)', margin: '20px 0 0' }}>
            Levar fisioterapia especializada até o domicílio, promovendo cuidado centrado na pessoa idosa para preservar funcionalidade, autonomia e alcançar seu maior potencial.
          </p>
        </Card>
        <Card variant="cream" pad="lg">
          <Pill variant="terra">Nossa visão</Pill>
          <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400, fontSize: 26, lineHeight: 1.5, color: 'var(--ink)', margin: '20px 0 0' }}>
            Ser referência em fisioterapia especializada, reconhecida pelo compromisso com o cuidado humanizado, promoção da funcionalidade e decisões clínicas fundamentadas em evidências científicas e centradas na pessoa idosa.
          </p>
        </Card>
      </div>
    </section>
  );
}

/* ---------------- Valores ---------------- */
const VALORES = [
  ['heart', 'Cuidado individualizado e especializado', 'Envelhecer é um processo de amadurecimento singular e multidimensional, que exige um olhar humano e técnico especializados.'],
  ['book-open', 'Respeito à biografia', 'Valorizamos a história de vida, os valores e o protagonismo da pessoa idosa na construção do seu plano de cuidado.'],
  ['flask-conical', 'Ciência na prática', 'Nossa prática é guiada pela atualização constante em gerontologia.'],
  ['handshake', 'Ética e humanização', 'Cuidamos com respeito, empatia e comprometimento profissional.'],
  ['users', 'Parceria com a família', 'Reconhecemos o papel fundamental da família na tomada de decisão compartilhada, respeitando preferências e limites.'],
  ['hourglass', 'Valorização do tempo', 'O tempo da pessoa idosa é precioso e deve ser vivido com dignidade, significado e qualidade.'],
];
function Valores() {
  return (
    <section id="valores" style={{ background: 'var(--surface-page-alt)', padding: '90px 40px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 52px' }}>
          <Pill variant="terra">Nossos valores</Pill>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 42, color: 'var(--ink)', margin: '18px 0 0' }}>O que guia nosso cuidado</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {VALORES.map(([icon, title, desc]) => (
            <Card key={title} variant="surface" pad="lg">
              <span style={{ width: 52, height: 52, borderRadius: 16, background: 'var(--oliva-050)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                <Icon name={icon} size={26} color="var(--oliva-500)" />
              </span>
              <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 18, color: 'var(--ink)', margin: '0 0 8px' }}>{title}</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.6, color: 'var(--text-body)', margin: 0 }}>{desc}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Por que escolher ---------------- */
const PORQUE = [
  ['graduation-cap', 'Profissionais especializados e especialistas em Gerontologia'],
  ['clipboard-check', 'Avaliação funcional nas tarefas do dia a dia'],
  ['target', 'Plano terapêutico centrado na pessoa idosa'],
  ['users-round', 'Reunião e capacitação da equipe para alinhamento de plano terapêutico'],
];
function PorQueEscolher() {
  return (
    <section style={{ background: 'var(--oliva-500)', padding: '84px 40px', position: 'relative', overflow: 'hidden' }}>
      <img src={`${A}/symbol-white.png`} alt="" style={{ position: 'absolute', right: -100, bottom: -90, width: 360, opacity: 0.08 }} />
      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        <div style={{ textAlign: 'center', maxWidth: 700, margin: '0 auto 48px' }}>
          <Pill variant="cream">Por que escolher</Pill>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 38, color: 'var(--creme)', margin: '18px 0 0' }}>Por que escolher a Matura Vita?</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }}>
          {PORQUE.map(([icon, text]) => (
            <div key={text} style={{ background: 'color-mix(in srgb, var(--creme) 12%, transparent)', borderRadius: 20, padding: '28px 22px', textAlign: 'center' }}>
              <span style={{ width: 48, height: 48, borderRadius: 14, background: 'var(--terra-500)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                <Icon name={icon} size={24} color="#fff" />
              </span>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.5, color: 'var(--creme)', margin: 0, fontWeight: 500 }}>{text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Áreas de atuação (Services) ---------------- */
const SERVICES = [
  { icon: 'activity', title: 'Manejo de doenças crônicas', desc: 'Reabilitação funcional em queixas musculoesqueléticas e condições como hipertensão, diabetes e osteoporose.' },
  { icon: 'heart-handshake', title: 'Idosos pré-frágeis e frágeis', desc: 'Reabilitação especializada para perda de massa muscular, alterações cognitivas ou perda funcional pós-internação.' },
  { icon: 'shield-check', title: 'Prevenção e reabilitação de quedas', desc: 'Avaliação de risco, treino sensório-motor e orientações para tornar a moradia mais segura.' },
  { icon: 'stethoscope', title: 'Doenças crônicas em fases avançadas', desc: 'Acompanhamento de condições clínicas avançadas para garantir funcionalidade e qualidade de vida.' },
  { icon: 'clipboard-list', title: 'Pré e pós-operatório ortopédico', desc: 'Reabilitação em cirurgias de prótese de quadril e joelho, coluna e membros superiores.' },
  { icon: 'dumbbell', title: 'Estimulação funcional', desc: 'Programa de exercícios individualizado com foco em força, mobilidade e equilíbrio.' },
  { icon: 'users', title: 'Orientação ao cuidador e família', desc: 'Capacitação prática sobre posicionamento, transferências e exercícios no domicílio.' },
  { icon: 'house', title: 'Cuidado no conforto do lar', desc: 'Atendimento domiciliar personalizado, que respeita a história de vida e o ritmo de cada pessoa.' },
];
const COMPROMISSOS = ['Excelência técnica', 'Acolhimento e empatia', 'Respeito e dignidade', 'Segurança e confiança', 'Resultados que transformam'];
function Services() {
  return (
    <section id="areas-de-atuacao" style={{ background: 'var(--creme)', padding: '90px 40px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 700, margin: '0 auto 52px' }}>
          <Pill variant="terra">Áreas de atuação</Pill>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 42, color: 'var(--ink)', margin: '18px 0 12px' }}>Cuidado especializado em cada fase do envelhecimento</h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16.5, lineHeight: 1.7, color: 'var(--text-body)', margin: 0 }}>
            Atuação especializada e humanizada para promover autonomia, funcionalidade e qualidade de vida em todas as fases do envelhecimento.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {SERVICES.map((s) => (
            <Card key={s.title} variant="surface" pad="md">
              <span style={{ width: 46, height: 46, borderRadius: 14, background: 'var(--oliva-050)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                <Icon name={s.icon} size={22} color="var(--oliva-500)" />
              </span>
              <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 16.5, color: 'var(--ink)', margin: '0 0 8px' }}>{s.title}</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 13, lineHeight: 1.55, color: 'var(--text-body)', margin: 0 }}>{s.desc}</p>
            </Card>
          ))}
        </div>
        <div style={{ marginTop: 24, background: 'var(--surface-page-alt)', borderRadius: 24, padding: '36px 40px', display: 'flex', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, maxWidth: 380 }}>
            <span style={{ width: 52, height: 52, borderRadius: 16, background: 'var(--terra-050)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name="house" size={26} color="var(--terra-500)" />
            </span>
            <div>
              <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 16, color: 'var(--ink)' }}>Cuidado no conforto do lar</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13.5, lineHeight: 1.5, color: 'var(--text-body)' }}>Atendimento domiciliar personalizado, que respeita a história de vida, a individualidade e o ritmo de cada pessoa.</div>
            </div>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 13, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--oliva-600)', marginBottom: 10 }}>Nossos compromissos</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 22px', maxWidth: 520 }}>
              {COMPROMISSOS.map((c) => (
                <span key={c} style={{ display: 'flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-sans)', fontSize: 13.5, color: 'var(--text-body)' }}>
                  <Icon name="check" size={14} color="var(--terra-500)" />{c}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Como funciona ---------------- */
const PASSOS = [
  ['clipboard-list', 'Avaliação inicial', 'Avaliação funcional completa no domicílio do paciente.'],
  ['users-round', 'Alinhamento técnico', 'Alinhamento da avaliação e plano terapêutico com a gestão técnica da empresa.'],
  ['file-text', 'Relatório e plano', 'Envio do relatório de avaliação, plano terapêutico e nº de sessões à família e/ou paciente.'],
  ['package', 'Kit personalizado', 'Entrega da ecobag com o kit de materiais utilizados no atendimento e pasta personalizada.'],
  ['clock', 'Atendimento', 'Sessões com duração de 1 hora, no conforto do lar.'],
  ['laptop', 'Prontuário digital', 'Registro de prontuário em plataforma digital.'],
  ['mail', 'Relatório mensal', 'Envio de relatório mensal da evolução do paciente no tratamento.'],
  ['refresh-cw', 'Reavaliação', 'Reavaliação periódica para ajuste do plano terapêutico, se necessário.'],
];
function ComoFunciona() {
  return (
    <section id="como-funciona" style={{ background: 'var(--surface-page-alt)', padding: '90px 40px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 700, margin: '0 auto 52px' }}>
          <Pill variant="olive">Como funciona</Pill>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 42, color: 'var(--ink)', margin: '18px 0 12px' }}>Como funciona o atendimento?</h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16.5, lineHeight: 1.7, color: 'var(--text-body)', margin: 0 }}>
            Cada etapa foi pensada para oferecer segurança, clareza e resultados reais para o paciente e tranquilidade para a família.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, position: 'relative' }}>
          <div style={{ position: 'absolute', top: 34, left: '12.5%', right: '12.5%', height: 2, background: 'var(--oliva-200)', zIndex: 0 }} />
          {PASSOS.map(([icon, title, desc], i) => (
            <div key={title} style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
              <span style={{ width: 68, height: 68, borderRadius: '50%', background: 'var(--oliva-500)', color: 'var(--creme)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-sm)', marginBottom: 16, flexShrink: 0 }}>
                <Icon name={icon} size={28} color="var(--creme)" />
              </span>
              <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 12, color: 'var(--terra-500)', letterSpacing: '0.06em', marginBottom: 6 }}>PASSO {i + 1}</span>
              <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 16.5, color: 'var(--ink)', margin: '0 0 8px' }}>{title}</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 13.5, lineHeight: 1.55, color: 'var(--text-body)', margin: 0 }}>{desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Contact CTA ---------------- */
function Contact() {
  return (
    <section id="contato" style={{ background: 'var(--creme)', padding: '90px 40px' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <Card variant="surface" pad="lg" style={{ padding: 0, overflow: 'hidden', display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
          <div style={{ background: 'var(--oliva-600)', padding: '48px 44px', color: 'var(--creme)' }}>
            <Pill variant="cream">Vamos conversar</Pill>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 34, lineHeight: 1.15, margin: '18px 0 14px' }}>Agende a avaliação domiciliar</h2>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15.5, lineHeight: 1.7, color: 'color-mix(in srgb, var(--creme) 82%, transparent)', margin: '0 0 28px' }}>
              Conte um pouco sobre a pessoa que precisa de cuidado. Entraremos em contato para agendar a avaliação inicial.
            </p>
            {[['phone', '(11) 91012-6065'], ['mail', 'contato@maturavitafisio.com.br'], ['globe', 'maturavitafisio.com.br'], ['instagram', '@maturavita']].map(([ic, t]) => (
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                <Icon name={ic} size={18} color="var(--terra-300)" />
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5 }}>{t}</span>
              </div>
            ))}
          </div>
          <div style={{ padding: '44px 40px', display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Input label="Nome completo" placeholder="Como podemos te chamar?" />
            <Input label="WhatsApp" placeholder="(11) 99999-9999" />
            <Input label="Como podemos ajudar?" placeholder="Conte um pouco sobre a necessidade" />
            <Button variant="accent" size="lg" full iconRight={<Icon name="arrow-right" size={18} color="#fff" />}>Enviar solicitação</Button>
          </div>
        </Card>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  return (
    <footer style={{ background: 'var(--oliva-900)', padding: '56px 40px 40px', color: 'color-mix(in srgb, var(--creme) 70%, transparent)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 30 }}>
        <div style={{ maxWidth: 320 }}>
          <img src={`${A}/logo-vertical-white.png`} alt="Matura Vita" style={{ height: 110, marginBottom: 16 }} />
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 13.5, lineHeight: 1.7, margin: 0 }}>
            Fisioterapia domiciliar para pessoas idosas. Cuidado que amadurece junto com a vida.
          </p>
        </div>
        <div style={{ display: 'flex', gap: 60 }}>
          {[['Áreas de atuação', ['Doenças crônicas', 'Quedas', 'Pré e pós-operatório', 'Estimulação funcional']], ['Matura Vita', ['Quem somos', 'Missão e visão', 'Valores', 'Contato']]].map(([h, items]) => (
            <div key={h}>
              <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 13, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--creme)', marginBottom: 14 }}>{h}</div>
              {items.map((it) => (
                <a key={it} href="#" style={{ display: 'block', fontFamily: 'var(--font-sans)', fontSize: 14, color: 'inherit', textDecoration: 'none', marginBottom: 9 }}>{it}</a>
              ))}
            </div>
          ))}
        </div>
      </div>
      <div style={{ maxWidth: 1200, margin: '36px auto 0', paddingTop: 22, borderTop: '1px solid color-mix(in srgb, var(--creme) 16%, transparent)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontFamily: 'var(--font-sans)', fontSize: 12.5 }}>
        <span>© 2026 Matura Vita · CREFITO 3 · 174192-F</span>
        <span>Feito com cuidado e raízes profundas.</span>
      </div>
    </footer>
  );
}

function Site() {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, []);
  return (
    <div style={{ background: 'var(--creme)' }}>
      <Nav /><Hero /><QuemSomos /><MissaoVisao /><Valores /><PorQueEscolher /><Services /><ComoFunciona /><Contact /><Footer />
    </div>
  );
}

Object.assign(window, { Site });