/* Estrutura, Atividades, Equipe, Galeria, Depoimentos, Localizacao, FAQ, Contato, Footer */

// ─────────────────────────────────────────────
// ESTRUTURA / A CASA
// ─────────────────────────────────────────────
function Estrutura({ isMobile }) {
  const [modal, setModal] = React.useState(null);
  const open = (src, label) => setModal({ src, label });
  return (
    <section id="a-casa" className="section bg-deep">
      {modal && <ImageModal src={modal.src} label={modal.label} onClose={() => setModal(null)} />}
      <div className="container">
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <span className="eyebrow">A casa</span>
          <h2 className="h-section" style={{ marginTop: 20 }}>
            Ambientes que <em>convidam a permanecer</em>: claros, climatizados, sem barreiras.
          </h2>
          <p className="lede" style={{ marginTop: 22, fontSize: 17 }}>
            Cada espaço foi pensado para acolher diferentes momentos do dia — da soneca da tarde à conversa após o jantar, do banho de sol ao silêncio do quarto.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(12, 1fr)',
          gridAutoRows: isMobile ? 'auto' : '180px',
          gap: 12,
        }}>
          <div style={{ gridColumn: isMobile ? 'auto' : 'span 7', gridRow: isMobile ? 'auto' : 'span 2' }}>
            <Photo label="ambientes da casa" tone="warm" height={isMobile ? 240 : '100%'} src="/assets/novo_5.png" onClick={() => open('/assets/novo_5.png', 'ambientes da casa')} />
          </div>
          <div style={{ gridColumn: isMobile ? 'auto' : 'span 5', gridRow: isMobile ? 'auto' : 'span 1' }}>
            <Photo label="quartos · ambientes tranquilos e confortáveis" tone="sky" height={isMobile ? 180 : '100%'} src="/assets/IMG_7700.jpg" onClick={() => open('/assets/IMG_7700.jpg', 'quartos · ambientes tranquilos e confortáveis')} />
          </div>
          <div style={{ gridColumn: isMobile ? 'auto' : 'span 5', gridRow: isMobile ? 'auto' : 'span 1' }}>
            <Photo label="salas de convivência" tone="green" height={isMobile ? 180 : '100%'} src="/assets/IMG_7704.jpg" onClick={() => open('/assets/IMG_7704.jpg', 'salas de convivência')} />
          </div>
          <div style={{ gridColumn: isMobile ? 'auto' : 'span 4', gridRow: isMobile ? 'auto' : 'span 1' }}>
            <Photo label="espaços da casa" tone="rose" height={isMobile ? 180 : '100%'} src="/assets/IMG_7706.jpg" onClick={() => open('/assets/IMG_7706.jpg', 'espaços da casa')} />
          </div>
          <div style={{ gridColumn: isMobile ? 'auto' : 'span 4', gridRow: isMobile ? 'auto' : 'span 1' }}>
            <Photo label="área externa" tone="warm" height={isMobile ? 180 : '100%'} src="/assets/IMG_7708.jpg" onClick={() => open('/assets/IMG_7708.jpg', 'área externa')} />
          </div>
          <div style={{ gridColumn: isMobile ? 'auto' : 'span 4', gridRow: isMobile ? 'auto' : 'span 1' }}>
            <Photo label="convivência e bem-estar" tone="ink" height={isMobile ? 180 : '100%'} src="/assets/PHOTO_nova.jpg" onClick={() => open('/assets/PHOTO_nova.jpg', 'convivência e bem-estar')} />
          </div>
        </div>

        <div style={{
          marginTop: 48,
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)',
          gap: isMobile ? 24 : 40,
        }}>
          {[
            ['7', 'quartos para acolhimento diário'],
            ['4', 'banheiros adaptados'],
            ['100%', 'casa acessível e sem barreiras'],
            ['2', 'ambientes externos para convivência'],
          ].map(([a,b],i) => (
            <div key={i}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 28, color: 'var(--primary)', letterSpacing: '-0.02em' }}>{a}</div>
              <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 6, lineHeight: 1.4 }}>{b}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
// ATIVIDADES / ROTINA
// ─────────────────────────────────────────────
const ROTINA = [
  { h: '06h00', t: 'Despertar e cuidados', d: 'Horário para banho, higiene e início da rotina com tranquilidade.' },
  { h: '07h00 às 08h00', t: 'Café da manhã', d: 'Refeição servida com acompanhamento da equipe.' },
  { h: '09h30', t: 'Lanche da manhã', d: 'Momento para alimentação leve e tempo livre aos residentes.' },
  { h: '11h00', t: 'Almoço', d: 'Refeição preparada diariamente, respeitando as necessidades de cada idoso.' },
  { h: '12h00', t: 'Descanso e tempo livre', d: 'Período voltado ao repouso, conforto e atividades livres.' },
  { h: '14h00', t: 'Fisioterapia', d: 'Atividades acompanhadas e adaptadas às capacidades dos residentes.' },
  { h: '15h00', t: 'Café da tarde', d: 'Momento de convivência e alimentação leve.' },
  { h: '16h00', t: 'Atividades complementares', d: 'Dinâmicas e estímulos voltados ao bem-estar e à qualidade de vida.' },
  { h: '17h00', t: 'Janta', d: 'Refeição noturna servida com acompanhamento da equipe.' },
  { h: '18h00', t: 'Repouso', d: 'Horário destinado ao descanso dos residentes que desejarem.' },
  { h: '20h00', t: 'Ceia', d: 'Lanche leve noturno servido antes do período de descanso.' },
];

function Atividades({ isMobile }) {
  return (
    <section id="rotina" className="section">
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '0.85fr 1.15fr',
          gap: isMobile ? 36 : 80,
        }}>
          <div>
            <span className="eyebrow">A rotina</span>
            <h2 className="h-section" style={{ marginTop: 20 }}>
              Um dia na Amparus tem o <em>ritmo da casa</em>.
            </h2>
            <p className="body" style={{ marginTop: 22, fontSize: 16 }}>
              Não impomos horário rígido para nada além das refeições e da medicação. As atividades são convites — e cada residente é livre para escolher.
            </p>
            <div style={{ marginTop: 28, padding: '20px 22px', border: '1px solid var(--line)', borderRadius: 6, background: 'var(--bg-elev)' }}>
              <div style={{ fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 600 }}>Final de semana</div>
              <p className="body" style={{ marginTop: 8, fontSize: 14 }}>
                Almoço em família é incentivado — disponibilizamos a sala principal e o jardim para receber filhos, netos e bisnetos.
              </p>
            </div>
          </div>

          <ol>
            {ROTINA.map((r, i) => (
              <li key={i} style={{
                display: 'grid',
                gridTemplateColumns: isMobile ? '64px 1fr' : '90px 1fr',
                gap: 20,
                padding: '20px 0',
                borderTop: '1px solid var(--line)',
                borderBottom: i === ROTINA.length - 1 ? '1px solid var(--line)' : 0,
              }}>
                <div style={{
                  fontFamily: 'var(--font-display)',
                  fontSize: 14,
                  fontWeight: 600,
                  color: 'var(--accent)',
                  letterSpacing: '0.02em',
                  paddingTop: 2,
                }}>{r.h}</div>
                <div>
                  <div style={{ fontSize: 17, fontWeight: 500, color: 'var(--ink)' }}>{r.t}</div>
                  <div style={{ fontSize: 14, color: 'var(--muted)', marginTop: 4, lineHeight: 1.5 }}>{r.d}</div>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
// EQUIPE
// ─────────────────────────────────────────────
const EQUIPE = [
  { r: 'Técnicos de enfermagem', e: 'Equipe presente em escala contínua, oferecendo acompanhamento diário e suporte aos residentes.', tone: 'rose', icon: 'nurse' },
  { r: 'Enfermagem', e: 'Organização de medicações, acompanhamento da rotina e atenção contínua aos cuidados.', tone: 'sky', icon: 'medic' },
  { r: 'Fisioterapia', e: 'Mobilidade, equilíbrio e prevenção de quedas.', tone: 'green', icon: 'physio' },
  { r: 'Nutricionista', e: 'Cardápio individualizado e dietas adaptadas às necessidades de cada residente.', tone: 'warm', icon: 'nutri' },
  { r: 'Terapia ocupacional', e: 'Atividades para preservar autonomia, memória e vínculo social. Oficinas, jogos cognitivos, jardinagem terapêutica.', tone: 'warm', icon: 'ot' },
  { r: 'Cuidadores', e: 'Equipe de apoio nos períodos diurno e noturno.', tone: 'rose', icon: 'care' },
  { r: 'Cozinha e limpeza', e: 'Alimentação preparada diariamente na casa e ambientes higienizados continuamente.', tone: 'green', icon: 'kitchen' },
  { r: 'Médico e ambulância 24h', e: 'Atendimento e suporte médico disponíveis sempre que necessário.', tone: 'sky', icon: 'ambulance' },
];

function ProfIcon({ kind, size = 22 }) {
  const s = { width: size, height: size, stroke: 'currentColor', fill: 'none', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'medic':   return (<svg viewBox="0 0 24 24" {...s}><path d="M12 3v6m-3-3h6"/><circle cx="12" cy="15" r="4"/><path d="M12 19v2"/></svg>);
    case 'nurse':   return (<svg viewBox="0 0 24 24" {...s}><path d="M5 21v-2a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v2"/><circle cx="12" cy="8" r="4"/><path d="M10 7h4M12 5v4"/></svg>);
    case 'physio':  return (<svg viewBox="0 0 24 24" {...s}><circle cx="9" cy="5" r="2"/><path d="M9 7v4l-3 5m3-5 4 2 2 5m-2-7 4-1"/></svg>);
    case 'nutri':   return (<svg viewBox="0 0 24 24" {...s}><path d="M12 21c-4 0-7-3-7-7s3-7 7-7 7 3 7 7-3 7-7 7Z"/><path d="M12 7c0-2 1-4 3-4M9 12h6M9 16h4"/></svg>);
    case 'ot':      return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="3"/><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"/></svg>);
    case 'psy':     return (<svg viewBox="0 0 24 24" {...s}><path d="M12 3a6 6 0 0 0-6 6c0 2 1 3 1 5 0 1-1 2-1 3h4v2a2 2 0 0 0 4 0v-2c2 0 4-2 4-4 0-2 0-3 1-5a5 5 0 0 0-5-5"/><path d="M11 9h2"/></svg>);
    case 'care':    return (<svg viewBox="0 0 24 24" {...s}><path d="M12 20s-7-4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 6-7 10-7 10Z"/></svg>);
    case 'kitchen':   return (<svg viewBox="0 0 24 24" {...s}><path d="M7 21V9h10v12M5 9c0-3 3-5 7-5s7 2 7 5M10 13h4M10 17h4"/></svg>);
    case 'ambulance': return (<svg viewBox="0 0 24 24" {...s}><rect x="1" y="8" width="15" height="11" rx="1"/><path d="M16 11h4l3 4v4h-7"/><circle cx="5.5" cy="19.5" r="1.5"/><circle cx="18.5" cy="19.5" r="1.5"/><path d="M6 12h4M8 10v4"/></svg>);
    default: return null;
  }
}

function Equipe({ isMobile }) {
  return (
    <section id="equipe" className="section bg-elev">
      <div className="container">
        <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', gap: 20, alignItems: isMobile ? 'flex-start' : 'flex-end', marginBottom: 48 }}>
          <div style={{ maxWidth: 620 }}>
            <span className="eyebrow">Quem cuida</span>
            <h2 className="h-section" style={{ marginTop: 20 }}>
              Uma equipe <em>interdisciplinar</em>, sempre presente.
            </h2>
            <p className="lede" style={{ marginTop: 18, fontSize: 17, maxWidth: 540 }}>
              Profissionais formados, registrados em seus respectivos conselhos, e — sobretudo — que conhecem cada residente pelo nome.
            </p>
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)',
          gap: 1,
          background: 'var(--line)',
          border: '1px solid var(--line)',
          borderRadius: 6,
          overflow: 'hidden',
        }}>
          {EQUIPE.map((p, i) => (
            <div key={i} style={{
              background: 'var(--bg-elev)',
              padding: isMobile ? '24px 20px' : '32px 26px',
              display: 'flex', flexDirection: 'column', minHeight: isMobile ? 160 : 200,
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 999,
                background: 'var(--bg-deep)',
                color: 'var(--primary)',
                display: 'grid', placeItems: 'center',
                marginBottom: 18,
              }}>
                <ProfIcon kind={p.icon} />
              </div>
              <div style={{ fontSize: isMobile ? 15 : 17, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.005em' }}>{p.r}</div>
              <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 6, lineHeight: 1.5 }}>{p.e}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
// GALERIA
// ─────────────────────────────────────────────
function Galeria({ isMobile }) {
  const [modal, setModal] = React.useState(null);
  const items = [
    { l: 'momentos da Amparus', tone: 'warm', span: 6, src: '/assets/novo_hero.png' },
    { l: 'vida na casa', tone: 'sky', span: 6, src: '/assets/novo_2.png' },
    { l: 'convivência e bem-estar', tone: 'rose', span: 4, src: '/assets/novo_4.png' },
    { l: 'rotina diária dos residentes', tone: 'green', span: 4, src: '/assets/IMG_1219.png' },
    { l: 'espaços e pessoas', tone: 'warm', span: 4, src: '/assets/IMG_9030.jpeg' },
  ];
  return (
    <section className="section">
      {modal && <ImageModal src={modal.src} label={modal.label} onClose={() => setModal(null)} />}
      <div className="container">
        <div style={{ marginBottom: 40 }}>
          <span className="eyebrow">Galeria</span>
          <h2 className="h-section" style={{ marginTop: 20 }}>
            Pequenos momentos, <em>guardados.</em>
          </h2>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(12, 1fr)',
          gap: 10,
        }}>
          {items.map((it, i) => (
            <div key={i} style={{ gridColumn: isMobile ? 'auto' : 'span ' + it.span }}>
              <Photo label={it.l} tone={it.tone} height={isMobile ? 160 : 220} src={it.src} onClick={() => setModal({ src: it.src, label: it.l })} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
// DEPOIMENTOS
// ─────────────────────────────────────────────
const DEPOS = [
  {
    q: 'Minha mãe chegou na Amparus aos 84 anos, bastante resistente no começo, como muitas mães seriam. Hoje, depois de quase um ano no lar, ela criou vínculos, tem sua rotina e participa mais das atividades do dia a dia. O que mais me marcou foi perceber que a equipe realmente conhece cada residente pelo nome e pelas suas particularidades. Isso faz toda a diferença.',
    a: 'Helena Bauer',
    s: 'filha da dona Ivete · residente desde 2025',
  },
  {
    q: 'O que mais nos passou segurança foi a forma como tudo é conduzido no dia a dia. O enfermeiro sempre mantém a família informada e, quando necessário, entra em contato para atualizar sobre qualquer mudança. As visitas também são livres, sem restrições de horário ou dia, o que nos deixou muito mais tranquilos com a decisão.',
    a: 'Mariana Oliveira',
    s: 'filha do sr. Olavo',
  },
  {
    q: 'Visitei algumas casas em Joinville antes de escolher a Amparus. Foi a única onde senti os residentes realmente à vontade no ambiente, conversando, circulando e participando da rotina naturalmente. Isso me passou muita confiança desde a primeira visita.',
    a: 'Cristina Hoffmann',
    s: 'sobrinha da dona Lúcia',
  },
];

function Depoimentos({ isMobile }) {
  return (
    <section className="section bg-ink">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <span className="eyebrow" style={{ color: 'var(--accent-soft)' }}>Famílias</span>
          <h2 className="h-section" style={{ marginTop: 20 }}>
            O que dizem quem <em>já confiou um pai, uma mãe</em>, à nossa casa.
          </h2>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 32 : 40,
        }}>
          {DEPOS.map((d, i) => (
            <figure key={i} style={{ margin: 0, paddingTop: 24, borderTop: '1px solid rgba(244,237,225,0.25)' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 40, lineHeight: 1, color: 'var(--accent-soft)', marginBottom: 4 }}>“</div>
              <blockquote style={{ margin: 0, fontSize: 16, lineHeight: 1.6, color: '#e8dfcf', textWrap: 'pretty' }}>
                {d.q}
              </blockquote>
              <figcaption style={{ marginTop: 24, fontSize: 14, color: '#f4ede1', fontWeight: 500 }}>
                {d.a}
                <div style={{ fontSize: 13, color: '#b3a48a', fontWeight: 400, marginTop: 2 }}>{d.s}</div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
// LOCALIZAÇÃO
// ─────────────────────────────────────────────
function Localizacao({ isMobile }) {
  return (
    <section className="section">
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 28 : 64,
          alignItems: 'center',
        }}>
          <div>
            <span className="eyebrow">Onde estamos</span>
            <h2 className="h-section" style={{ marginTop: 20 }}>
              No coração de Joinville,<br/>em <em>uma rua tranquila.</em>
            </h2>
            <p className="body" style={{ marginTop: 16, fontSize: 15, color: 'var(--muted)' }}>
              Próxima ao PA Norte de Joinville.
            </p>
            <div style={{ marginTop: 28 }}>
              <div style={{ fontSize: 16, color: 'var(--ink)', lineHeight: 1.65, fontWeight: 500 }}>
                Rua João Pessoa, 2005<br/>
                Bairro Costa e Silva · Joinville/SC<br/>
                CEP 89204-440
              </div>
              <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, maxWidth: 380 }}>
                <div>
                  <div style={{ fontSize: 12, color: 'var(--muted)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>Telefone</div>
                  <div style={{ fontSize: 16, marginTop: 4 }}>(47) 9732-1834</div>
                </div>
                <div>
                  <div style={{ fontSize: 12, color: 'var(--muted)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>WhatsApp</div>
                  <div style={{ fontSize: 16, marginTop: 4 }}>(47) 9732-1834</div>
                </div>
                <div>
                  <div style={{ fontSize: 12, color: 'var(--muted)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>Visitação</div>
                  <div style={{ fontSize: 16, marginTop: 4 }}>Todos os dias. Familiares com acesso livre.</div>
                </div>
                <div>
                  <div style={{ fontSize: 12, color: 'var(--muted)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>E-mail</div>
                  <div style={{ fontSize: 16, marginTop: 4 }}>contato@amparuscare.com.br</div>
                </div>
              </div>
            </div>
          </div>
          <div style={{ position: 'relative', borderRadius: 6, overflow: 'hidden', border: '1px solid var(--line)' }}>
            <iframe
              src="https://maps.google.com/maps?q=Rua+Jo%C3%A3o+Pessoa%2C+2005%2C+Costa+e+Silva%2C+Joinville%2C+SC%2C+Brasil&output=embed&hl=pt-BR&z=16"
              width="100%"
              height={isMobile ? 280 : 440}
              style={{ border: 0, display: 'block' }}
              allowFullScreen
              loading="lazy"
              title="Localização Amparus"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
// FAQ
// ─────────────────────────────────────────────
const FAQ_ITEMS = [
  {
    q: 'Como funciona o processo de acolhimento?',
    a: 'O processo começa com uma conversa presencial com os proprietários e o enfermeiro responsável, junto da família, para apresentar a rotina da casa e entender as necessidades do futuro residente. Após a entrada na Amparus, o enfermeiro realiza a avaliação inicial, organiza as medicações, agenda consultas médicas e, junto da nutricionista, realiza a anamnese para acompanhar as necessidades de saúde e alimentação do idoso.',
  },
  {
    q: 'Posso visitar antes de decidir?',
    a: 'Sim, e incentivamos. Recebemos visitas de segunda a domingo, das 8h às 17h, com agendamento prévio para que a coordenação possa conversar com calma e mostrar todos os ambientes.',
  },
  {
    q: 'Quais são os horários para familiares visitarem?',
    a: 'As visitas para familiares são livres todos os dias, sem restrição de horários. Apenas em casos de reuniões ou atendimentos específicos, pedimos agendamento prévio para melhor organização da equipe.',
  },
  {
    q: 'A Amparus aceita convênios ou planos de saúde?',
    a: 'A mensalidade é particular. Procedimentos cobertos por planos (home care, fisioterapia específica) podem ser articulados em conjunto com a família e a operadora.',
  },
  {
    q: 'Como funciona a alimentação?',
    a: 'Toda a alimentação é preparada na cozinha da casa, com cardápio acompanhado pela nutricionista. São oferecidas 6 refeições ao dia, incluindo dietas adaptadas para diabetes, hipertensão, disfagia e outras necessidades alimentares específicas.',
  },
  {
    q: 'Qual o perfil dos residentes acolhidos?',
    a: 'Idosos a partir de 60 anos, em diferentes graus de dependência, do residente independente que busca convivência ao residente acamado com cuidados complexos. Realizamos avaliação caso a caso.',
  },
];

function FAQ({ isMobile }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="section bg-elev">
      <div className="container" style={{ maxWidth: 920 }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '0.6fr 1fr', gap: isMobile ? 28 : 64 }}>
          <div>
            <span className="eyebrow">Dúvidas frequentes</span>
            <h2 className="h-section" style={{ marginTop: 20 }}>
              O que famílias <em>perguntam</em> com mais frequência.
            </h2>
          </div>
          <div>
            {FAQ_ITEMS.map((it, i) => (
              <div key={i} style={{ borderTop: '1px solid var(--line)', borderBottom: i === FAQ_ITEMS.length - 1 ? '1px solid var(--line)' : 0 }}>
                <button
                  onClick={() => { setOpen(open === i ? -1 : i); window.ampTrack && window.ampTrack('faq-expand'); }}
                  style={{
                    width: '100%',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    padding: '22px 0',
                    fontSize: isMobile ? 16 : 17,
                    fontWeight: 500,
                    color: 'var(--ink)',
                    textAlign: 'left',
                    letterSpacing: '-0.005em',
                  }}
                >
                  {it.q}
                  <span style={{
                    width: 28, height: 28, borderRadius: 999,
                    border: '1px solid var(--line)',
                    display: 'grid', placeItems: 'center',
                    transition: 'transform 0.25s ease, background 0.2s',
                    transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                    background: open === i ? 'var(--primary)' : 'transparent',
                    color: open === i ? '#fbf8f3' : 'var(--ink)',
                    flexShrink: 0,
                    marginLeft: 16,
                  }}>
                    <svg width="11" height="11" viewBox="0 0 12 12"><path d="M6 1v10M1 6h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
                  </span>
                </button>
                {open === i && (
                  <div style={{ paddingBottom: 24, paddingRight: isMobile ? 0 : 48 }}>
                    <p className="body" style={{ fontSize: 15 }}>{it.a}</p>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
// CONTATO / VISITA
// ─────────────────────────────────────────────
function Contato({ isMobile }) {
  return (
    <section id="visita" className="section">
      <div className="container">
        <div style={{
          background: 'var(--primary-deep)',
          color: '#f4ede1',
          borderRadius: 8,
          padding: isMobile ? '48px 28px' : '80px 80px',
          textAlign: isMobile ? 'center' : 'left',
        }}>
          <span className="eyebrow" style={{ color: 'var(--accent-soft)', ...(isMobile && { justifyContent: 'center', display: 'inline-flex' }) }}>Agende uma visita</span>
          <h2 className="h-section" style={{ marginTop: 20, color: '#f4ede1', maxWidth: 560 }}>
            Venha conhecer <em style={{ color: 'var(--accent-soft)' }}>a casa</em>.
          </h2>
          <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.6, color: '#d9cfbf', maxWidth: 480 }}>
            Receba a coordenação para uma conversa, conheça os ambientes e tire suas dúvidas com a equipe. Sem compromisso.
          </p>
          <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap', ...(isMobile && { justifyContent: 'center' }) }}>
            <button className="btn btn-whats" style={{ background: '#2f7039' }} onClick={() => { window.ampTrack && window.ampTrack('whatsapp-click'); window.openWhatsForm && window.openWhatsForm(); }}>
              <WhatsIcon /> Falar no WhatsApp
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
// FOOTER
// ─────────────────────────────────────────────
function Footer({ isMobile }) {
  return (
    <footer style={{ background: 'var(--bg-deep)', paddingTop: 64, paddingBottom: 32 }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr 1fr 1fr',
          gap: isMobile ? 32 : 48,
        }}>
          <div>
            <Logo />
            <p style={{ marginTop: 20, fontSize: 14, lineHeight: 1.6, color: 'var(--muted)', maxWidth: 320 }}>
              Casa de repouso em Joinville desde 2025. Cuidado contínuo, ambiente residencial, equipe que conhece cada um pelo nome.
            </p>
          </div>
          <FootCol t="Visite" items={['Sobre nós', 'Cuidado integral', 'A casa', 'A rotina', 'Equipe']}/>
          <FootCol t="Contato" items={['Agendar visita', 'WhatsApp', '(47) 9732-1834', 'contato@amparuscare.com.br']}/>
          <FootCol t="Endereço" items={['Rua João Pessoa, 2005', 'Costa e Silva · Joinville/SC', 'CEP 89204-440', 'Todos os dias · acesso livre']}/>
        </div>
        <div style={{
          marginTop: 56, paddingTop: 24,
          borderTop: '1px solid var(--line)',
          display: 'flex', flexDirection: isMobile ? 'column' : 'row',
          justifyContent: 'space-between',
          gap: 12,
          fontSize: 12, color: 'var(--muted)',
        }}>
          <span>© 2026 Casa de Repouso Amparus · CNPJ 00.000.000/0001-00</span>
          <span>Regulamentado pela Vigilância Sanitária · Alvará Sanitário 31182 · COREN/SC 810642</span>
        </div>
      </div>
    </footer>
  );
}

function FootCol({ t, items }) {
  return (
    <div>
      <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink)' }}>{t}</div>
      <ul style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, i) => (
          <li key={i} style={{ fontSize: 14, color: 'var(--ink-soft)' }}>{it}</li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { Estrutura, Atividades, Equipe, Galeria, Depoimentos, Localizacao, FAQ, Contato, Footer });