export default {

async fetch(request, env, ctx) {

const GA_MEASUREMENT_ID = 'AW-17351297903';

const GA4_ID = 'G-NNWTTPZNPY';

const PIXEL_ID = '2002016743735097';

const logoUrl = "https://lh3.googleusercontent.com/u/0/d/12Olxk_ruA_sus_FajS25mUbbqTwQs7d9=w1000";

const faviconUrl = "https://lh3.googleusercontent.com/u/0/d/1yKATEW3bH994_bBdKuUtYzGA2qost31a=w32";

const medicoImgUrl = "https://lh3.googleusercontent.com/u/0/d/1gEJHFr7l1s8nOjaoEXgrnofiJV0dtGvA=w1000-h1000";

// Links dos Planos

const linkHospiIndividual = "https://www.mercadopago.com.br/subscriptions/checkout?preapproval_plan_id=1be335e75f414213b93cd9ef41601a4c";

const linkHospiFamilia = "https://www.mercadopago.com.br/subscriptions/checkout?preapproval_plan_id=1f9e34e17fef488e82264f34de5f834c";

const linkHospiPlusIndividual = "https://www.mercadopago.com.br/subscriptions/checkout?preapproval_plan_id=71bec5645e734df390c856b8a294c18f";

const linkHospiPlusFamilia = "https://www.mercadopago.com.br/subscriptions/checkout?preapproval_plan_id=15286fd8078e45dfb92fa88f8d744f41";

// Links Avulsos

const linkAvulsaClinico = "https://mpago.la/1abWkjD";

const linkAvulsaEspecialista = "https://mpago.la/1NHR4Pi";

const linkComercial = "https://api.whatsapp.com/send?phone=5511940403965&text=Olá!%20Gostaria%20de%20saber%20mais%20sobre%20os%20planos%20Hospitaclin.";

const iconShield = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>`;

const iconPhone = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>`;

const iconClock = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>`;

const iconZap = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>`;

const iconCheck = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;

const sectionNavbar = `

<a href="${linkComercial}" target="_blank" onclick="fbq('track', 'Contact');" class="btn btn-hover-effect" style="background: #25D366; color: white; padding: 10px 20px; font-size: 0.9rem; border-radius: 10px; text-decoration: none; font-weight: 800;">WhatsApp</a>

</nav>

const sectionHero = `

<h1>Saúde na palma da sua mão.</h1>

<p>Atendimento médico imediato com a qualidade Hospitaclin. Escolha o plano ideal para você ou sua família e tenha suporte 24 horas por dia.</p>

<button class="btn btn-hero-outline btn-hover-effect" onclick="document.getElementById('planos').scrollIntoView({behavior: 'smooth'})">VER PLANOS</button>

</section>

const sectionPain = `

<h2 class="section-title">Saúde ágil para quem não pode esperar</h2>

<div class="pain-item">Acesso direto à rede credenciada de telemedicina.</div>

<div class="pain-item">Prontuário digital seguro para histórico de consultas.</div>

<div class="pain-item">Atendimento sem filas: Fale com um médico agora mesmo.</div>

<div class="pain-item">Economia real: Consultas ilimitadas para cuidar de você.</div>

</div>

<p>Na <strong>Hospitaclin</strong>, você não é apenas mais um na fila. Oferecemos um modelo de atendimento focado em resolutividade e conexão imediata quando você mais precisa.</p>

</div>

</section>

const sectionOfferDetail = `

<h3 style="margin-bottom: 10px; font-weight: 800;">Como funciona o atendimento?</h3>

<p style="font-size: 0.9rem; margin-bottom: 15px;">Transparência total no acesso à sua saúde.</p>

<button class="btn btn-modern-dark" style="padding: 10px 20px; width: 100%; background: #1DB2C4; color: white; border: none; border-radius: 10px; font-weight: 800; cursor: pointer;" onclick="changeStep(2)">VER FLUXO</button>

</div>

<h3 style="margin-bottom: 15px; font-weight: 800; color: #1DB2C4;">1. Conexão Imediata</h3>

<p style="font-size: 1rem; margin-bottom: 20px;">Você acessa a plataforma e solicita atendimento com o clínico geral na hora.</p>

<p style="font-size: 1rem; margin-bottom: 30px;">**Sem agendamento:** Nossa rede credenciada opera 24h para que você seja atendido no menor tempo possível, direto pelo celular ou computador.</p>

<button class="btn btn-modern-dark" style="padding: 10px 20px; width: 100%; margin-bottom: 10px; background: #1DB2C4; color: white; border: none; border-radius: 10px; font-weight: 800; cursor: pointer;" onclick="changeStep(3)">RECEITAS E ATESTADOS</button>

<button class="btn btn-modern-white" style="padding: 10px 20px; width: 100%; border: 1px solid #ccc; border-radius: 10px; cursor: pointer;" onclick="changeStep(1)">VOLTAR AO INÍCIO</button>

</div>

<h3 style="margin-bottom: 15px; font-weight: 800; color: #1DB2C4;">2. Validade Nacional</h3>

<p style="font-size: 1rem; margin-bottom: 20px;">Ao final da consulta, se houver necessidade, você recebe receitas, atestados ou pedidos de exame diretamente no seu e-mail ou WhatsApp.</p>

<p style="font-size: 1rem; margin-bottom: 30px;">Documentos digitais com assinatura eletrônica aceitos em farmácias e empresas de todo o Brasil.</p>

<button class="btn btn-modern-white" style="padding: 10px 20px; width: 100%; border: 1px solid #ccc; border-radius: 10px; cursor: pointer;" onclick="changeStep(2)">ANTERIOR</button>

</div>

function changeStep(step) {

document.querySelectorAll('.joan-step').forEach(div => div.style.display = 'none');

document.getElementById('joan-step-' + step).style.display = 'block';

}

</script>

</section>

const sectionAuthority = `

<h2 class="section-title" style="color: #2c5364;">Instituição de Saúde Integral.</h2>

<p style="font-size: 1.1rem; margin-bottom: 20px;">A <strong>Hospitaclin</strong> foca na resolutividade. Nosso objetivo é que você resolva sua dor ou dúvida médica de forma técnica e rápida.</p>

<p style="font-size: 1.1rem;">Conectamos você a médicos preparados para emitir receitas, atestados e pedidos de exame com validade nacional, sem burocracia.</p>

</div>

<h4 style="margin-bottom: 20px; color: #1DB2C4;">O que sua assinatura garante:</h4>

<li style="margin-bottom: 10px; display: flex; align-items: center; gap: 10px;">${iconCheck} Telemedicina 24h Sem Agendamento</li>

<li style="margin-bottom: 10px; display: flex; align-items: center; gap: 10px;">${iconCheck} Especialidades Médicas (Planos Plus)</li>

<li style="margin-bottom: 10px; display: flex; align-items: center; gap: 10px;">${iconCheck} Receitas e Atestados (PDF)</li>

<li style="display: flex; align-items: center; gap: 10px;">${iconCheck} Suporte Online Especializado</li>

</ul>

</div>

</section>

const sectionFAQ = `

<h2 class="section-title">Tire suas dúvidas</h2>

<summary>Quanto tempo demora a liberação do meu acesso?</summary>

<p>Em dias úteis, a autorização ocorre em até 3 horas após a confirmação. Nosso horário de atendimento é de <strong>Segunda a Sexta, das 09h às 21h</strong> e aos <strong>Sábados, das 09h às 14h</strong>. Assinaturas realizadas fora destes horários ou em fins de semana/feriados serão autorizadas no próximo dia útil.</p>

</div>

</details>

<summary>Como funciona o atendimento médico?</summary>

<p>Basta acessar a plataforma da nossa rede credenciada e solicitar o atendimento. Você entrará em uma fila virtual e será atendido por um médico clínico geral em poucos minutos, 24 horas por dia.</p>

</details>

<summary>O que são os planos Plus?</summary>

<p>Os planos Plus incluem, além do Clínico Geral 24h, o acesso a 12 especialidades médicas por agendamento, como Cardiologia, Pediatria, Dermatologia e mais.</p>

</details>

<summary>Como funciona o plano Familiar?</summary>

<p>O plano Familiar permite o cadastro do titular e de até 3 dependentes, totalizando 4 pessoas com acesso ilimitado aos serviços contratados.</p>

</details>

</div>

</section>

const sectionTestimonials = `

<h2 class="section-title">Quem cuida da saúde conosco</h2>

<div class="testimonial-card"><p>"Muito prático. Consegui falar com o médico de madrugada e recebi a receita no meu WhatsApp em minutos."</p><span>— Carlos M.</span></div>

<div class="testimonial-card"><p>"Ótimo para quem precisa de orientação médica rápida sem sair de casa. Atendimento muito atencioso."</p><span>— Adriana F.</span></div>

</div>

</section>

const sectionPlans = `

<h2 class="section-title">Planos de Assinatura</h2>

As assinaturas são liberadas de Seg a Sex (09h às 21h) e Sáb (09h às 14h). Assinou? Em breve seu acesso estará pronto para uso!

</div>

Pagamento processado com segurança pelo Mercado Pago.

</div>

<div class="plan-name">Hospi Individual</div>

<li>${iconCheck} Clínico Geral 24h</li>

<li>${iconCheck} Consultas Ilimitadas</li>

<li>${iconCheck} Receitas e Atestados</li>

</ul>

<a href="${linkHospiIndividual}" target="_blank" onclick="fbq('track', 'InitiateCheckout');" class="btn btn-whatsapp" style="background: #1DB2C4;">ASSINAR</a>

</div>

<div class="plan-name">Hospi Familiar</div>

<li>${iconCheck} Clínico Geral 24h</li>

<li>${iconCheck} Titular + 3 Dep.</li>

<li>${iconCheck} Consultas Ilimitadas</li>

</ul>

<a href="${linkHospiFamilia}" target="_blank" onclick="fbq('track', 'InitiateCheckout');" class="btn btn-whatsapp" style="background: #1DB2C4;">ASSINAR</a>

</div>

<div class="plan-tag" style="background: #1DB2C4;">MAIS VENDIDO</div>

<div class="plan-name">Hospi Plus Individual</div>

<li>${iconCheck} Clínico + Espec.</li>

<li>${iconCheck} 12 Especialidades</li>

<li>${iconCheck} Consultas Ilimitadas</li>

</ul>

<a href="${linkHospiPlusIndividual}" target="_blank" onclick="fbq('track', 'InitiateCheckout');" class="btn btn-whatsapp" style="background: #1DB2C4;">ASSINAR</a>

</div>

<div class="plan-name">Hospi Plus Familiar</div>

<li>${iconCheck} Clínico + Espec.</li>

<li>${iconCheck} Titular + 3 Dep.</li>

<li>${iconCheck} Consultas Ilimitadas</li>

</ul>

<a href="${linkHospiPlusFamilia}" target="_blank" onclick="fbq('track', 'InitiateCheckout');" class="btn btn-whatsapp" style="background: #1DB2C4;">ASSINAR</a>

</div>

<h2 class="section-title" style="margin-top: 60px;">Consultas Avulsas</h2>

<div class="plan-tag" style="background: #666;">PAGAMENTO ÚNICO</div>

<div class="plan-name">Avulsa Clínico Geral</div>

<li>${iconCheck} Atendimento 24h</li>

<li>${iconCheck} Receitas e Atestados</li>

<li>${iconCheck} Sem Mensalidade</li>

</ul>

<a href="${linkAvulsaClinico}" target="_blank" onclick="fbq('track', 'InitiateCheckout');" class="btn btn-whatsapp" style="background: #333;">SOLICITAR</a>

</div>

<div class="plan-tag" style="background: #666;">PAGAMENTO ÚNICO</div>

<div class="plan-name">Avulsa Especialidade</div>

<li>${iconCheck} Consulta Especialista</li>

<li>${iconCheck} Via Agendamento</li>

<li>${iconCheck} Receitas e Atestados</li>

</ul>

<a href="${linkAvulsaEspecialista}" target="_blank" onclick="fbq('track', 'InitiateCheckout');" class="btn btn-whatsapp" style="background: #333;">AGENDAR</a>

</div>

</section>

const sectionQuickBenefits = `

<div class="benefit-item"><span>${iconShield}</span> Atendimento Seguro</div>

<div class="benefit-item"><span>${iconPhone}</span> Via Smartphone</div>

<div class="benefit-item"><span>${iconClock}</span> Disponível 24h</div>

<div class="benefit-item"><span>${iconZap}</span> Sem Carência</div>

</div>

const sectionFooter = `

<p style="margin-top: 10px; font-size: 0.85rem; opacity: 0.8;">Os serviços de telemedicina são operados por nossa parceira credenciada: Racca Saúde, CNPJ: 50.633.829/0001-08.</p>

</footer>

const html = `

<!DOCTYPE html>

<head>

!function(f,b,e,v,n,t,s)

{if(f.fbq)return;n=f.fbq=function(){n.callMethod?

n.callMethod.apply(n,arguments):n.queue.push(arguments)};

if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';

n.queue=[];t=b.createElement(e);t.async=!0;

t.src=v;s=b.getElementsByTagName(e)[0];

s.parentNode.insertBefore(t,s)}(window, document,'script',

'https://connect.facebook.net/en_US/fbevents.js');

fbq('init', '${PIXEL_ID}');

fbq('track', 'PageView');

</script>

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', '${GA4_ID}');

gtag('config', '${GA_MEASUREMENT_ID}');

</script>

<title>Hospitaclin | Sua Saúde 24h</title>

<style>

:root { --primary: #1DB2C4; --dark: #2c5364; --text: #333; --light: #f4fbfb; }

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

body { background: white; color: var(--text); line-height: 1.6; }

.header { background: var(--dark); padding: 80px 10%; color: white; border-radius: 0 0 60px 60px; text-align: center; }

.header h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 20px; }

.header p { font-size: 1.2rem; max-width: 700px; margin: 0 auto 35px; opacity: 0.9; }

.wrapper { max-width: 1100px; margin: 0 auto; padding: 60px 25px; }

.section-title { font-size: 2.2rem; color: var(--dark); font-weight: 800; margin-bottom: 25px; text-align: center; }

.bg-light { background: var(--light); padding: 60px 25px; }

.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; text-align: center; }

.benefit-item { background: white; padding: 15px; border-radius: 15px; border: 1px solid #eee; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; }

.pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 15px; }

.pain-item { background: #fff; padding: 20px; border-left: 5px solid var(--primary); border-radius: 12px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

.testimonial-card { background: var(--light); padding: 30px; border-radius: 20px; }

.plan-grid { display: grid; gap: 20px; justify-content: center; }

@media (min-width: 992px) {

.plans-layout {

grid-template-columns: repeat(4, 1fr) !important;

max-width: 1200px;

margin: 0 auto;

}

.plan-card { padding: 30px 20px !important; }

.price { font-size: 2.2rem !important; }

}

@media (max-width: 991px) {

.plans-layout { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

}

.plan-card { background: white; padding: 40px; border-radius: 35px; border: 1px solid #eee; position: relative; width: 100%; transition: 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; }

.plan-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

.plan-tag { position: absolute; top: -12px; left: 30px; color: white; padding: 6px 18px; border-radius: 50px; font-weight: 800; font-size: 0.8rem; }

.price { font-size: 3rem; font-weight: 800; margin: 15px 0; }

.price span { font-size: 1rem; font-weight: 400; opacity: 0.7; }

.features { list-style: none; margin-bottom: 30px; font-size: 0.9rem; text-align: left; }

.features li { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }

.faq-item { background: #fff; border: 1px solid #eee; border-radius: 15px; margin-bottom: 10px; overflow: hidden; }

.faq-item summary { padding: 20px; font-weight: 800; cursor: pointer; list-style: none; }

.btn { display: inline-block; padding: 18px 35px; border-radius: 15px; font-weight: 800; cursor: pointer; transition: 0.3s ease; border: 2px solid transparent; text-align: center; }

.btn-hero-outline { background: transparent; color: white; border: 2px solid white; }

.btn-whatsapp { color: white; width: 100%; text-decoration: none; }

.footer { padding: 40px 25px; text-align: center; color: #999; font-size: 0.9rem; }

</style>

</head>

<body>

${sectionNavbar}

${sectionHero}

${sectionPain}

${sectionOfferDetail}

${sectionTestimonials}

${sectionAuthority}

${sectionPlans}

${sectionQuickBenefits}

${sectionFAQ}

${sectionFooter}

// Rastreio de Visualização de Conteúdo (ViewContent) quando chega nos planos

const planosSection = document.getElementById('planos');

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

fbq('track', 'ViewContent');

observer.unobserve(planosSection); // Dispara apenas uma vez

}

});

}, { threshold: 0.3 });

observer.observe(planosSection);

</script>

</body>

</html>

return new Response(html, { headers: { "content-type": "text/html;charset=UTF-8" } });

}

};