// lembra ai — site institucional · sections

const M = window.Mockups;
const { ConvRemedio, ConvAdiar, ConvConsulta, ConvAlerta, ConvResumo, WA_LINK, WA_LINK_TRIAL } = M;

/* WhatsApp icon (reused) */
const WaIcon = ({ size = 22 }) =>
<svg className="wa-icon-svg" width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M.057 24l1.687-6.163a11.867 11.867 0 01-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 018.413 3.488 11.824 11.824 0 013.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 01-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.711.307 1.265.49 1.697.628.713.227 1.362.195 1.875.118.572-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z"></path>
  </svg>;

/* ============ HERO ============ */
const Hero = () =>
<section className="hero" id="top" data-screen-label="01 Hero">
    <div className="container">
      <div className="hero-grid">
        <div className="hero-text">
          <span className="eyebrow"><span className="dot"></span> Funciona pelo WhatsApp · Sem baixar nada</span>
          <h1>Nunca mais esqueça seus <span className="hl">remédios</span>.</h1>
          <p className="lede">
            O lembra ai ajuda <b>idosos</b> e <b>famílias</b> a organizar medicamentos, consultas e exames direto pelo WhatsApp.
            Sem baixar aplicativo. Sem cadastro complicado.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-primary btn-large" href={WA_LINK_TRIAL} target="_blank" rel="noopener">
              <WaIcon /> Teste grátis por 7 dias
            </a>
            <a className="btn btn-secondary btn-large" href={WA_LINK} target="_blank" rel="noopener">
              Quero saber mais
            </a>
          </div>
          <div className="hero-meta">
            <span><span className="check">✓</span>7 dias grátis</span>
            <span><span className="check">✓</span>Comece agora</span>
            <span><span className="check">✓</span>Sem app pra baixar</span>
          </div>
        </div>
        <div className="hero-phone-wrap">
          <ConvRemedio />
        </div>
      </div>
    </div>
  </section>;


/* ============ COMO FUNCIONA ============ */
const ComoFunciona = () =>
<section id="como-funciona" data-screen-label="02 Como funciona">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow"><span className="dot"></span> Como funciona</span>
        <h2 className="s-title">Três passos. <span className="hl">Pelo WhatsApp.</span></h2>
        <p className="s-lede">Sem cadastro, sem app, sem complicação. Funciona no celular que você já tem.</p>
      </div>
      <div className="how-grid">
        <div className="how-card">
          <div className="num">1</div>
          <h3>Você recebe lembretes no WhatsApp</h3>
          <p>Na hora do remédio, da consulta ou do exame — uma mensagem simples chega no seu WhatsApp.</p>
        </div>
        <div className="how-card">
          <div className="num">2</div>
          <h3>Responde com um toque</h3>
          <p>Aparecem botões verdes: "Já tomei" ou "Vou tomar em breve". Você só toca. Pronto.</p>
        </div>
        <div className="how-card">
          <div className="num">3</div>
          <h3>Sua família pode acompanhar</h3>
          <p>Se quiser, um filho ou neto recebe o resumo semanal. E é avisado se algo realmente sair do esperado.</p>
        </div>
      </div>
    </div>
  </section>;


/* ============ FUNCIONALIDADES ============ */
const FEATURES = [
{ icon: "💊", title: "Lembrete de remédio", desc: "Aviso na hora certa, com o nome do remédio e a dose. Quantas vezes por dia precisar." },
{ icon: "✅", title: "Confirmação por botão", desc: "Você não precisa digitar. Só toca em \"Já tomei\" e está feito." },
{ icon: "📅", title: "Consultas médicas", desc: "Lembramos na véspera e no dia. Com nome do médico, especialidade e endereço." },
{ icon: "🧪", title: "Exames", desc: "Aviso antes do exame, com laboratório, data e endereço. Pra você não esquecer." },
{ icon: "💚", title: "Resumo semanal pra família", desc: "Toda semana, um resumo claro vai pro WhatsApp de quem cuida. Sem encher de mensagem." },
{ icon: "👋", title: "Alerta de inatividade", desc: "Se você sumir por algumas horas, a gente avisa um familiar. Pra ter sempre alguém perto." },
{ icon: "📦", title: "Aviso de fim de remédio", desc: "Quando a caixa está acabando, te avisamos com folga. Tempo de pedir a receita." },
{ icon: "🏥", title: "Apoio à reposição", desc: "Te ajudamos a lembrar de buscar receita, comprar remédio e organizar a próxima caixa." },
{ icon: "🤝", title: "Tudo pelo WhatsApp", desc: "Nada para baixar. Nada para instalar. Funciona no celular que você já usa todo dia." }];


const Funcionalidades = () =>
<section id="funcionalidades" data-screen-label="03 Funcionalidades">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow"><span className="dot"></span> O que o lembra ai faz</span>
        <h2 className="s-title">Cuidado do dia a dia, <span className="hl">simples assim</span>.</h2>
        <p className="s-lede">Tudo que importa pra tomar remédio na hora certa, ir nas consultas, e a família ficar tranquila.</p>
      </div>
      <div className="features-grid">
        {FEATURES.map((f) =>
      <div className="feat" key={f.title}>
            <div className="feat-icon" aria-hidden="true">{f.icon}</div>
            <h4>{f.title}</h4>
            <p>{f.desc}</p>
          </div>
      )}
      </div>
    </div>
  </section>;


/* ============ DEMOS (tabbed) ============ */
const DEMOS = [
{
  key: "remedio",
  tab: "Remédio",
  title: "Lembrete de remédio",
  desc: "A mensagem que mais aparece no dia a dia. Você toca em \"Já tomei\" e está feito.",
  bullets: ["Aviso no horário exato", "Interações por botões", "Confirmação em segundos"],
  render: () => <ConvRemedio />
},
{
  key: "adiar",
  tab: "Adiar",
  title: "Esqueceu? Sem problema",
  desc: "Se você não puder tomar agora, toca em \"Vou tomar em breve\". A gente te lembra de novo daqui a 15 minutos.",
  bullets: ["Sem cobrança, sem alarme", "Lembrete gentil de novo", "Você no controle do tempo"],
  render: () => <ConvAdiar />
},
{
  key: "consulta",
  tab: "Consulta",
  title: "Consultas e exames",
  desc: "Avisamos antes da consulta, com o nome do médico e o endereço. Depois, conferimos como foi.",
  bullets: ["Lembrete na véspera e no dia", "Endereço completo do consultório", "Confirmação simples depois"],
  render: () => <ConvConsulta />
},
{
  key: "alerta",
  tab: "Alerta família",
  title: "Alerta pra família",
  desc: "Se a pessoa sumir do WhatsApp por mais de 24h (configurável), avisamos um familiar de confiança.",
  bullets: ["Tempo configurável de espera", "Avisa por WhatsApp", "Pode ser mais de um familiar"],
  render: () => <ConvAlerta />
},
{
  key: "resumo",
  tab: "Resumo semanal",
  title: "Resumo semanal pra família",
  desc: "Domingo à noite, um resumo do que foi tomado, das consultas e dos remédios. Tudo num lugar só.",
  bullets: ["Números grandes, leitura fácil", "Sem encher de mensagem todo dia", "Cabe num print pra mostrar ao médico"],
  render: () => <ConvResumo />
}];


const Demos = () => {
  // DEMOS[3] = "Alerta família" (default ao abrir a seção)
  const [idx, setIdx] = React.useState(3);
  const d = DEMOS[idx];
  return (
    <section className="demo-section" id="demos" data-screen-label="04 Demos">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span> Veja funcionando</span>
          <h2 className="s-title">É assim que <span className="hl">aparece no WhatsApp</span>.</h2>
          <p className="s-lede">Conversas reais que o lembra ai manda. Tudo com botão — quase não precisa digitar.</p>
        </div>

        <div className="demo-tabs" role="tablist">
          {DEMOS.map((dm, i) =>
          <button
            key={dm.key}
            role="tab"
            aria-selected={i === idx}
            className={"demo-tab " + (i === idx ? "active" : "")}
            onClick={() => setIdx(i)}>
            
              {dm.tab}
            </button>
          )}
        </div>

        <div className="demo-grid">
          <div className="demo-info">
            <h3>{d.title}</h3>
            <p>{d.desc}</p>
            <ul className="demo-bullets">
              {d.bullets.map((b) => <li key={b}>{b}</li>)}
            </ul>
          </div>
          <div className="hero-phone-wrap">
            {d.render()}
          </div>
        </div>
      </div>
    </section>);
};


/* ============ PARA QUEM ============ */
const ParaQuem = () =>
<section id="para-quem" data-screen-label="05 Para quem">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow"><span className="dot"></span> Para quem é</span>
        <h2 className="s-title">Os <span className="hl">dois</span> usam.</h2>
        <p className="s-lede">A pessoa idosa é quem usa todo dia. A família acompanha de longe. Cada um do seu jeito.</p>
      </div>

      <div className="who-grid">
        <div className="who-card idoso">
          <div className="who-illu" aria-hidden="true">👵</div>
          <div className="who-tag">Idosos independentes</div>
          <h3>Pra você que cuida da própria saúde</h3>
          <p>Sem cadastro, sem senha, sem baixar nada. Só conversa no WhatsApp que você já conhece.</p>
          <ul>
            <li>Tudo no WhatsApp, sem aplicativos</li>
            <li>Você confirma com um toque</li>
            <li>Mantém sua autonomia</li>
            <li>Sem alarme, sem pressa</li>
          </ul>
        </div>
        <div className="who-card familia">
          <div className="who-illu" aria-hidden="true">👨‍👩‍👧</div>
          <div className="who-tag">Famílias que acompanham à distância</div>
          <h3>Pra você que se preocupa com seus pais</h3>
          <p>Tranquilidade sem virar enfermeiro à distância. Só te chamamos quando algo realmente precisa.</p>
          <ul>
            <li>Resumo semanal automático</li>
            <li>Alerta em casos criticos</li>
            <li>Pode incluir mais de um familiar</li>
            <li>Você fica perto, mesmo longe</li>
          </ul>
        </div>
      </div>
    </div>
  </section>;


/* ============ PLANOS ============ */
const Planos = () =>
<section className="plans-section" id="planos" data-screen-label="06 Planos">
    <div className="container">
      <div className="section-head" style={{ margin: "0 auto 38px", textAlign: "center", justifyItems: "center" }}>
        <span className="eyebrow"><span className="dot"></span> Planos simples</span>
        <h2 className="s-title">Escolha como <span className="hl">quer cuidar</span>.</h2>
        <p className="s-lede" style={{ margin: "0 auto" }}>Dois planos. Um para você cuidar dos seus remédios. Outro para a família acompanhar junto.</p>
      </div>

      <div className="plans-grid">
        <div className="plan">
          <h4>Base</h4>
          <p className="sub">Pra quem quer só os lembretes — pra si ou pra um familiar próximo.</p>
          <ul>
            <li>Lembretes de medicamentos</li>
            <li>Confirmação por botão</li>
            <li>Lembretes de consultas e exames</li>
            <li>Tudo pelo WhatsApp</li>
            <li>Aviso quando medicamentos estão acabando</li>
            <li>Apoio para reposição de medicamentos</li>
          </ul>
          <a className="btn btn-secondary" href={WA_LINK} target="_blank" rel="noopener">
            Quero saber mais
          </a>
        </div>

        <div className="plan featured">
          <span className="plan-tag">Mais escolhido ★</span>
          <h4>Família</h4>
          <p className="sub">Tudo do Base + a família acompanhando junto, sem complicar.</p>
          <ul>
            <li><b>Tudo do plano Base</b></li>
            <li>Resumo semanal pra familiar</li>
            <li>Alerta de inatividade</li>
            <li>Tempo configurável de inatividade</li>
            <li>Acompanhamento da aderência</li>
            <li>Organização preventiva da rotina</li>
          </ul>
          <a className="btn btn-primary" href={WA_LINK_TRIAL} target="_blank" rel="noopener">
            <WaIcon /> Teste grátis por 7 dias
          </a>
        </div>
      </div>
    </div>
  </section>;


/* ============ FAQ ============ */
const FAQS = [
{
  q: "Precisa instalar aplicativo?",
  a: "Não. Tudo acontece dentro do WhatsApp que você já tem no celular. Nada pra baixar, nada pra cadastrar."
},
{
  q: "Funciona em qualquer celular?",
  a: "Sim. Se o celular abre WhatsApp, funciona. Android antigo, iPhone, celular simples — todos servem."
},
{
  q: "Minha família pode acompanhar?",
  a: "Pode. No plano Família, um ou mais familiares recebem o resumo semanal e o alerta se algo sair do horário. Eles também usam só o WhatsApp."
},
{
  q: "Preciso saber mexer em tecnologia?",
  a: "Não. Se você sabe ler mensagem no WhatsApp e apertar um botão, está pronto. A gente fala com você do mesmo jeito que um amigo fala."
},
{
  q: "Funciona só pelo WhatsApp?",
  a: "Sim. O lembra ai é uma conversa de WhatsApp, do começo ao fim. Sem site pra entrar, sem painel pra acessar, sem senha pra lembrar."
},
{
  q: "Como funciona o teste grátis?",
  a: "São 7 dias grátis, sem cartão de crédito. Você fala com a gente no WhatsApp, conta os horários dos remédios, e começa a receber os lembretes. Se não quiser continuar, é só avisar."
}];


const Faq = () =>
<section id="faq" data-screen-label="07 FAQ">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow"><span className="dot"></span> Dúvidas frequentes</span>
        <h2 className="s-title">Perguntas <span className="hl">que a gente sempre ouve</span>.</h2>
        <p className="s-lede">Se sobrar dúvida, é só nos chamar no WhatsApp. A gente responde.</p>
      </div>
      <div className="faq">
        {FAQS.map((f, i) =>
      <details key={f.q} {...i === 0 ? { open: true } : {}}>
            <summary>
              <span>{f.q}</span>
              <span className="chev" aria-hidden="true">+</span>
            </summary>
            <div className="faq-body"><p>{f.a}</p></div>
          </details>
      )}
      </div>
    </div>
  </section>;


/* ============ FINAL CTA ============ */
const FinalCta = () =>
<section data-screen-label="08 CTA final">
    <div className="container">
      <div className="final-cta">
        <h2>Comece gratuitamente <span style={{ color: "var(--green-bubble)" }}>pelo WhatsApp</span>.</h2>
        <p>Sete dias pra testar sem pagar nada. Sem cartão de crédito. Sem instalar app. Só conversa.</p>
        <div className="btn-row">
          <a className="btn btn-primary btn-large" href={WA_LINK_TRIAL} target="_blank" rel="noopener">
            <WaIcon /> Teste grátis por 7 dias
          </a>
          <a className="btn btn-ghost btn-large" href={WA_LINK} target="_blank" rel="noopener" style={{ color: "#fff" }}>
            Quero saber mais →
          </a>
        </div>
        <div className="meta">
          <span>✓ 7 dias grátis</span>
          <span>✓ Comece agora</span>
          <span>✓ +55 35 99142-0021</span>
        </div>
      </div>
    </div>
  </section>;


/* ============ FOOTER ============ */
const Footer = () =>
<footer data-screen-label="09 Footer">
    <div className="container">
      <div className="foot-grid">
        <div className="foot-brand">
          <img className="logo-img foot-logo" src="brand-assets/lembre-ai-logo-transparent.png" alt="lembra ai" />
          <p>Lembretes de remédios, consultas e exames pelo WhatsApp. Pra quem cuida da própria saúde — e pra família que cuida junto.</p>
          <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noopener" style={{ width: "fit-content" }}>
            Quero saber mais
          </a>
        </div>
        <div className="foot-col">
          <h5>Suporte</h5>
          <ul>
            <li><a href={WA_LINK} target="_blank" rel="noopener">Falar com a gente</a></li>
            <li><a href="mailto:contato@lembraai.com.br">contato@lembraai.com.br</a></li>
            <li><a href="#faq">Dúvidas frequentes</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h5>O produto</h5>
          <ul>
            <li><a href="#como-funciona">Como funciona</a></li>
            <li><a href="#funcionalidades">Funcionalidades</a></li>
            <li><a href="#planos">Planos</a></li>
            <li><a href="/termos">Termos de uso</a></li>
            <li><a href="/privacidade">Privacidade</a></li>
          </ul>
        </div>
      </div>
      <div className="foot-bottom">
        <span>© 2026 lembra ai · Todos os direitos reservados</span>
        <span>Feito com 💚 no Brasil</span>
      </div>
    </div>
  </footer>;


window.Sections = {
  Hero, ComoFunciona, Funcionalidades, Demos, ParaQuem, Planos, Faq, FinalCta, Footer
};