/* Nav, Hero, Sobre, Servicos */

function Photo({ label, tone, height, style, src, onClick }) {
  const [hov, setHov] = React.useState(false);
  const cls = "photo" + (tone ? " tone-" + tone : "");
  return (
    <div
      className={cls}
      style={{ height, ...style, ...(src && { isolation: 'isolate' }), overflow: 'hidden', cursor: (onClick && src) ? 'zoom-in' : 'default' }}
      onClick={onClick}
      onMouseEnter={() => src && setHov(true)}
      onMouseLeave={() => setHov(false)}
    >
      {src
        ? <img src={src} alt={label} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 1, transform: hov ? 'scale(1.08)' : 'scale(1)', filter: hov ? 'brightness(1.12)' : 'brightness(1)', transition: 'transform 0.4s ease, filter 0.4s ease' }} />
        : <span className="cap">{label}</span>
      }
    </div>
  );
}

function ImageModal({ src, label, onClose }) {
  React.useEffect(() => {
    const fn = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', fn);
    return () => document.removeEventListener('keydown', fn);
  }, []);
  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 9999,
        background: 'rgba(10,16,20,0.92)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 24,
        backdropFilter: 'blur(4px)',
      }}
    >
      <img
        src={src} alt={label}
        onClick={(e) => e.stopPropagation()}
        style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain', borderRadius: 4, boxShadow: '0 32px 80px rgba(0,0,0,0.6)' }}
      />
      <button
        onClick={onClose}
        style={{
          position: 'absolute', top: 20, right: 20,
          width: 40, height: 40, borderRadius: 999,
          background: 'rgba(255,255,255,0.12)', border: '1px solid rgba(255,255,255,0.25)',
          color: '#fff', fontSize: 24, lineHeight: 1, cursor: 'pointer',
          display: 'grid', placeItems: 'center',
        }}
      >×</button>
    </div>
  );
}

function Logo({ size = 28 }) {
  const h = size * 5;
  return (
    <img
      src="/assets/logo.png"
      alt="Amparus Care"
      style={{ height: h, width: 'auto', display: 'block' }}
    />
  );
}

function Nav({ isMobile }) {
  if (isMobile) {
    return (
      <header style={{
        position: 'sticky', top: 0, zIndex: 10,
        background: 'rgba(247,243,238,0.92)',
        backdropFilter: 'blur(10px)',
        borderBottom: '1px solid var(--line-soft)',
      }}>
        <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 64 }}>
          <Logo size={22} />
          <button style={{ width: 38, height: 38, border: '1px solid var(--line)', borderRadius: 999, display: 'grid', placeItems: 'center' }}>
            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M1 3.5h12M1 7h12M1 10.5h12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
          </button>
        </div>
      </header>
    );
  }
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 10,
      background: 'rgba(247,243,238,0.88)',
      backdropFilter: 'blur(10px)',
      borderBottom: '1px solid var(--line-soft)',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 80 }}>
        <Logo />
        <nav style={{ display: 'flex', gap: 36, fontSize: 14, color: 'var(--ink-soft)' }}>
          <a href="#sobre">Sobre nós</a>
          <a href="#cuidado">Cuidado</a>
          <a href="#a-casa">A casa</a>
          <a href="#rotina">Rotina</a>
          <a href="#equipe">Equipe</a>
          <a href="#visita">Visita</a>
        </nav>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <span style={{ fontSize: 14, color: 'var(--muted)' }}>(47) 9732-1834</span>
          <button className="btn btn-whats" onClick={() => { window.ampTrack && window.ampTrack('whatsapp-click'); window.openWhatsForm && window.openWhatsForm(); }}>
            <WhatsIcon /> Falar no WhatsApp
          </button>
        </div>
      </div>
    </header>
  );
}

function WhatsIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.2-.2.3-.8.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.8-.7-1.4-1.7-1.5-1.9-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1 2.9 1.2 3.1c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.7.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.7 1.5 5.3L2 22l4.8-1.3c1.5.9 3.3 1.3 5.2 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
    </svg>
  );
}

// ─────────────────────────────────────────────
// HERO
// ─────────────────────────────────────────────
function Hero({ isMobile, layout }) {
  if (layout === 'centered') return <HeroCentered isMobile={isMobile} />;
  if (layout === 'fullbleed') return <HeroFullBleed isMobile={isMobile} />;
  return <HeroSplit isMobile={isMobile} />;
}

function HeroSplit({ isMobile }) {
  return (
    <section style={{ paddingTop: isMobile ? 48 : 88, paddingBottom: isMobile ? 64 : 120 }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.05fr 1fr',
          gap: isMobile ? 36 : 72,
          alignItems: 'center',
        }}>
          <div>
            <span className="eyebrow">Casa de repouso · Joinville/SC</span>
            <h1 className="h-display" style={{ marginTop: 22 }}>
              Um Lar Acolhedor para <em>Seus Entes Queridos</em>
            </h1>
            <p className="lede" style={{ marginTop: 24, maxWidth: 520 }}>
              Na Casa de Repouso Amparus, oferecemos cuidados personalizados, carinho e segurança em um ambiente familiar. Seu familiar merece viver com dignidade, conforto e felicidade.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 36 }}>
              <button className="btn btn-whats" onClick={() => { window.ampTrack && window.ampTrack('whatsapp-click'); window.openWhatsForm && window.openWhatsForm(); }}>
                <WhatsIcon /> Falar no WhatsApp
              </button>
              <button className="btn btn-ghost" onClick={() => { window.ampTrack && window.ampTrack('visit-btn'); document.getElementById('visita').scrollIntoView({ behavior: 'smooth' }); }}>
                Agendar uma visita
                <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 7h10m-4-4 4 4-4 4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </button>
            </div>
            <div style={{
              marginTop: isMobile ? 44 : 56,
              display: 'grid',
              gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 24,
              paddingTop: 32,
              borderTop: '1px solid var(--line)',
            }}>
              <Stat n="24h" l="enfermagem ativa" />
              <Stat n="3:1" l="cuidadores por residente — atenção próxima e contínua" />
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <Photo label="hero · residente no jardim, luz da manhã" tone="warm" height={isMobile ? 360 : 580} src="/assets/novo_3.png" />
            <div style={{
              position: 'absolute',
              bottom: -28, left: isMobile ? 16 : -32,
              width: isMobile ? 160 : 200,
              background: 'var(--bg-elev)',
              border: '1px solid var(--line)',
              borderRadius: 6,
              padding: '18px 20px',
              boxShadow: '0 12px 32px -16px rgba(31,43,51,0.18)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <span style={{ width: 8, height: 8, borderRadius: 999, background: '#3a8a44' }}></span>
                <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)' }}>Recebendo visitas</span>
              </div>
              <p style={{ fontSize: 12, color: 'var(--muted)', lineHeight: 1.5 }}>
                Todos os dias a partir das 6h. Familiares sem necessidade de agendamento.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroCentered({ isMobile }) {
  return (
    <section style={{ paddingTop: isMobile ? 56 : 96, paddingBottom: isMobile ? 56 : 80 }}>
      <div className="container" style={{ textAlign: 'center', maxWidth: 880 }}>
        <span className="eyebrow" style={{ justifyContent: 'center', display: 'inline-flex' }}>Casa de repouso · Joinville/SC</span>
        <h1 className="h-display" style={{ marginTop: 24 }}>
          Um Lar Acolhedor para <em>Seus Entes Queridos</em>
        </h1>
        <p className="lede" style={{ marginTop: 24, maxWidth: 620, margin: '24px auto 0' }}>
          Na Casa de Repouso Amparus, oferecemos cuidados personalizados, carinho e segurança em um ambiente familiar. Seu familiar merece viver com dignidade, conforto e felicidade.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 12, marginTop: 32 }}>
          <button className="btn btn-whats" onClick={() => window.openWhatsForm && window.openWhatsForm()}><WhatsIcon /> Falar no WhatsApp</button>
          <button className="btn btn-ghost">Agendar uma visita</button>
        </div>
        <div style={{ marginTop: 56, borderRadius: 6, overflow: 'hidden' }}>
          <Photo label="hero · vista panorâmica da casa, fim de tarde" tone="warm" height={isMobile ? 280 : 480} src="/assets/Reunidos.jpeg" />
        </div>
      </div>
    </section>
  );
}

function HeroFullBleed({ isMobile }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <Photo label="hero fullbleed · jardim com residentes" tone="ink" height={isMobile ? 540 : 720} style={{ borderRadius: 0 }} src="/assets/Banho%20de%20sol.jpeg" />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(31,55,68,0.1) 0%, rgba(31,55,68,0.75) 100%)',
      }}/>
      <div className="container" style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
        paddingBottom: isMobile ? 48 : 96, color: '#f4ede1',
      }}>
        <span className="eyebrow" style={{ color: 'var(--accent-soft)' }}>Casa de repouso · Joinville/SC</span>
        <h1 className="h-display" style={{ marginTop: 22, color: '#f4ede1', maxWidth: 760 }}>
          Um Lar Acolhedor para <em style={{ color: 'var(--accent-soft)' }}>Seus Entes Queridos</em>
        </h1>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 32 }}>
          <button className="btn btn-whats" onClick={() => window.openWhatsForm && window.openWhatsForm()}><WhatsIcon /> Falar no WhatsApp</button>
        </div>
      </div>
    </section>
  );
}

function Stat({ n, l }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 500, color: 'var(--primary)', letterSpacing: '-0.02em', lineHeight: 1 }}>{n}</div>
      <div style={{ marginTop: 8, fontSize: 13, color: 'var(--muted)', lineHeight: 1.4 }}>{l}</div>
    </div>
  );
}

// ─────────────────────────────────────────────
// SOBRE
// ─────────────────────────────────────────────
function Sobre({ isMobile }) {
  return (
    <section id="sobre" className="section bg-elev">
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '0.9fr 1.1fr',
          gap: isMobile ? 36 : 80,
          alignItems: 'start',
        }}>
          <div>
            <span className="eyebrow">Sobre a Amparus</span>
            <h2 className="h-section" style={{ marginTop: 20 }}>
              Uma casa, antes de tudo. <em>Um lar.</em>
            </h2>
          </div>
          <div>
            <p className="body" style={{ fontSize: 17 }}>
              A Casa de Repouso Amparus nasceu do desejo de fazer diferente. Depois de anos trabalhando em instituições geriátricas em Joinville, percebemos que o cuidado poderia ser mais humano, mais próximo e mais presente.
            </p>
            <p className="body" style={{ marginTop: 18, fontSize: 17 }}>
              Foi assim que surgiu a ideia de construir um lugar com rotina de casa, presença verdadeira e atenção aos detalhes. Um espaço onde cada idoso fosse tratado com dignidade, carinho e respeito ao seu tempo.
            </p>
            <p className="body" style={{ marginTop: 18, fontSize: 17 }}>
              Hoje, seguimos presentes todos os dias. Acompanhamos de perto a rotina, ouvimos as famílias, cuidamos dos ambientes e buscamos melhorar continuamente cada espaço da casa.
            </p>
            <p className="body" style={{ marginTop: 18, fontSize: 17 }}>
              Porque acreditamos que cuidado também mora nas pequenas coisas.
            </p>
            <div style={{
              marginTop: 36,
              display: 'grid',
              gridTemplateColumns: 'repeat(2, 1fr)',
              gap: 1,
              background: 'var(--line)',
              border: '1px solid var(--line)',
              borderRadius: 6,
              overflow: 'hidden',
            }}>
              {[
                ['Alvará Sanitário 31182', 'regulamentação ativa'],
                ['COREN/SC 810642', 'Guilherme · Resp. Técnico de Enfermagem'],
              ].map(([a,b],i) => (
                <div key={i} style={{ padding: '24px 22px', background: 'var(--bg-elev)' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 20, color: 'var(--primary)', letterSpacing: '-0.01em' }}>{a}</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 6, letterSpacing: '0.02em' }}>{b}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
// SERVIÇOS
// ─────────────────────────────────────────────
const SERVICES = [
  {
    n: '01',
    title: 'Médico e ambulância 24h',
    body: 'Atendimento e suporte disponíveis sempre que necessário.',
  },
  {
    n: '02',
    title: 'Enfermagem 24 horas',
    body: 'Equipe técnica em escala contínua, controle de sinais vitais, curativos, administração de medicação e suporte a comorbidades.',
  },
  {
    n: '03',
    title: 'Fisioterapia',
    body: 'Sessões individuais e em grupo focadas em mobilidade, equilíbrio e prevenção de quedas. Avaliação postural periódica.',
  },
  {
    n: '04',
    title: 'Nutrição clínica',
    body: 'Cardápio elaborado por nutricionista, adaptado a dietas específicas e preferências pessoais. Comida feita aqui mesmo.',
  },
  {
    n: '05',
    title: 'Terapia ocupacional',
    body: 'Atividades para preservar autonomia, memória e vínculo social. Oficinas, jogos cognitivos, jardinagem terapêutica.',
  },
  {
    n: '06',
    title: 'Equipe ampla e atenção próxima',
    body: 'Trabalhamos com um número reduzido de residentes e uma equipe ampla de cuidados, garantindo mais atenção, acompanhamento contínuo e suporte diário aos idosos.',
  },
];

function Servicos({ isMobile }) {
  return (
    <section id="cuidado" className="section">
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1.3fr',
          gap: isMobile ? 28 : 80,
          alignItems: 'end',
          marginBottom: 56,
        }}>
          <div>
            <span className="eyebrow">Cuidado integral</span>
            <h2 className="h-section" style={{ marginTop: 20 }}>
              Seis frentes de atenção,<br/>um único <em>plano de cuidado</em>.
            </h2>
          </div>
          <p className="lede" style={{ maxWidth: 520 }}>
            Na Amparus, cada residente passa por uma avaliação individual realizada pela enfermagem, nutrição e fisioterapia, garantindo cuidados adequados às suas necessidades, capacidades e bem-estar, sempre com acompanhamento próximo da equipe.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 1,
          background: 'var(--line)',
          border: '1px solid var(--line)',
          borderRadius: 6,
          overflow: 'hidden',
        }}>
          {SERVICES.map((s) => (
            <div key={s.n} style={{
              background: 'var(--bg)',
              padding: '32px 28px 36px',
              minHeight: 220,
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{
                fontFamily: 'var(--font-display)',
                fontSize: 13,
                color: 'var(--accent)',
                letterSpacing: '0.06em',
                fontWeight: 600,
              }}>{s.n}</div>
              <h3 style={{
                fontFamily: 'var(--font-display)',
                fontSize: 22,
                fontWeight: 500,
                color: 'var(--ink)',
                marginTop: 14,
                letterSpacing: '-0.01em',
              }}>{s.title}</h3>
              <p className="body" style={{ marginTop: 12, fontSize: 15 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Photo, Logo, Nav, WhatsIcon, Hero, Stat, Sobre, Servicos, ImageModal });