// LC4lab — Pages
const { useState: uS2, useEffect: uE2, useMemo: uM2 } = React;

function Hero({ onExplore, onScroll }) {
  return (
    <section className="hero" style={{ paddingTop: 24 }}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <span className="eyebrow" style={{ display: "block", textAlign: "left", marginBottom: 32 }}>Laboratório · Inovação · Code</span>
          <h1 style={{ marginTop: 0 }}>O laboratório onde <span className="gradient-text">ideias se tornam o mapa</span> para a sua próxima grande conquista.</h1>
          <p className="lede" style={{ maxWidth: 720, margin: "20px auto 0" }}>LC4lab: o seu ponto de encontro para crescer com clareza. Reunimos tudo o que você precisa para simplificar sua jornada pessoal e profissional, de e-books e planilhas a mentorias personalizadas. Aqui, o conhecimento se torna um caminho fácil e guiado para você alcançar seu próximo grande objetivo.</p>
        </div>
        <div className="hero-grid">
          <div>
            <div className="hero-cta">
              <button className="btn btn-primary btn-lg" onClick={onExplore}>Explorar marcas {Icons.arrow(14)}</button>
              <button className="btn btn-outline btn-lg" onClick={onScroll}>Ver combos com desconto</button>
            </div>
            <div className="hero-meta">
              <div className="hero-meta-item"><b>9</b><span>Marcas</span></div>
              <div className="hero-meta-item"><b>1+</b><span>Produtos</span></div>
              <div className="hero-meta-item"><b>2</b><span>Alunos ativos</span></div>
              <div className="hero-meta-item"><b>4.9★</b><span>Avaliação média</span></div>
            </div>
          </div>
          <div className="hero-showcase">
            <div className="disc center"><img src="assets/logo-lc4lab.png" alt="LC4lab"/></div>
            <div className="disc d1"><img src="assets/logo-controle-simplificado.png" alt=""/></div>
            <div className="disc d2"><img src="assets/logo-varejo-sem-caos.jpg" alt=""/></div>
            <div className="disc d3"><img src="assets/logo-projetos-sem-caos.png" alt=""/></div>
            <div className="disc d4"><img src="assets/logo-descomplicado.png" alt=""/></div>
            <div className="disc d5"><img src="assets/logo-controle-simplificado.png" alt=""/></div>
            <div className="disc d6"><img src="assets/logo-varejo-sem-caos.jpg" alt=""/></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Categories({ onPick }) {
  const cats = [
    { id: "ebook", name: "E-books", desc: "Profundidade e método", icon: Icons.ebook(20) },
    { id: "sheet", name: "Planilhas", desc: "Templates prontos", icon: Icons.sheet(20) },
    { id: "play",  name: "Vídeo-aulas e Mentorias", desc: "Acesso vitalício", icon: Icons.play(20) },
    { id: "combo", name: "Combos & Bundles", desc: "Até 60% off", icon: Icons.combo(20) },
  ];
  return (
    <section style={{paddingTop: 32, paddingBottom: 32}}>
      <div className="container">
        <div className="cat-grid">
          {cats.map(c => (
            <div className="cat-card reveal" key={c.id} onClick={() => onPick(c.id)}>
              <div className="cat-card-icon">{c.icon}</div>
              <h4>{c.name}</h4>
              <span>{c.desc}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BrandsSection({ onOpenBrand, sectionRef }) {
  const [filter, setFilter] = uS2("Todas");
  const visible = LC4_BRANDS.filter(b => !b.hidden);
  const tags = ["Todas", ...new Set(visible.map(b => b.tag))];
  const list = filter === "Todas" ? visible : visible.filter(b => b.tag === filter);
  return (
    <section ref={sectionRef} id="marcas">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Catálogo de marcas</span>
            <h2 style={{marginTop: 14}}>Cada marca, um universo. <span className="gradient-text">Todas, um só padrão.</span></h2>
          </div>
          <p>Curadoria de produtos digitais por verticais especializadas. Clique em uma marca para ver e-books, planilhas e aulas.</p>
        </div>
        <div className="brand-grid">
          {LC4_BRANDS.filter(b => !b.hidden).map(b => <BrandCard key={b.id} brand={b} onClick={() => onOpenBrand(b.id)}/>)}
        </div>
      </div>
    </section>
  );
}

function FeaturedProducts({ onOpenProduct, onAdd }) {
  const featured = uM2(() => {
    const items = [];
    LC4_BRANDS.forEach(b => b.products.forEach(p => items.push({ brand: b, product: p })));
    return items.filter(i => i.product.bestseller).slice(0, 6);
  }, []);
  return (
    <section style={{paddingTop: 0}}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Mais vendidos</span>
            <h2 style={{marginTop: 14}}>Os produtos que <span className="gradient-text">mais transformam</span> rotinas.</h2>
          </div>
        </div>
        <div className="product-grid">
          {featured.map(({brand, product}) => (
            <ProductCard key={product.id} brand={brand} product={product}
              onOpen={() => onOpenProduct(brand, product)}
              onAdd={onAdd}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="about">
      <div className="container">
        <div className="about-grid" style={{gridTemplateColumns: "1fr"}}>
          <div>
            <span className="eyebrow">Sobre a LC4lab</span>
            <h2 style={{margin: "16px 0 18px"}}>Um <span className="gradient-text">laboratório</span> de produtos digitais.</h2>
            <p className="lede">Nascemos para resolver um problema simples: bons produtos digitais existem, mas vivem espalhados, com qualidade desigual, sem padrão de entrega. A LC4lab centraliza marcas verticais, cada uma especialista no seu tema sob uma identidade comum: didática, design e resultado.</p>
            <div className="values">
              <div className="value reveal">
                <span className="value-num">01 / Curadoria</span>
                <h4>Especialistas, não generalistas</h4>
                <p>Cada marca é dedicada a uma vertical com profundidade real.</p>
              </div>
              <div className="value reveal">
                <span className="value-num">02 / Padrão</span>
                <h4>Mesma régua de qualidade</h4>
                <p>Design, didática, suporte e atualização seguem o mesmo padrão LC4.</p>
              </div>
              <div className="value reveal">
                <span className="value-num">03 / Acesso</span>
                <h4>Vitalício e sem fricção</h4>
                <p>Comprou, é seu.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Bundles({ onAddBundle }) {
  const bundles = [
    { id: "b1", tag: "Combo Essencial", title: "Liberdade Financeira", desc: "Comece a controlar suas finanças com tudo que precisa.", items: ["Planilha Mestre de Finanças", "Da Dívida à Liberdade (e-book)", "Tracker de Cashback IA"], price: 97, original: 151, save: "36%" },
    { id: "b2", tag: "Combo Profissional", title: "Carreira & Produtividade", desc: "Carreira em alta com IA e estratégia de projetos.", items: ["Currículo Profissional 2026", "Pack 500 Prompts Pro", "Kit PM Essencial", "Tracker de Vagas"], price: 247, original: 521, save: "53%", featured: true },
    { id: "b3", tag: "Combo Negócio", title: "Empreendedor Digital", desc: "Para quem vai criar e vender produtos digitais.", items: ["Método Low Ticket Pro", "Playbook do Varejo", "Funil 7-Dias", "Calculadora de CAC & LTV"], price: 397, original: 858, save: "54%" },
  ];
  return (
    <section id="combos">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Combos com desconto</span>
            <h2 style={{marginTop: 14}}>Bundles que <span className="gradient-text">cruzam marcas</span> e aceleram resultados.</h2>
          </div>
          <p>Seleções curadas pela LC4lab combinando produtos complementares de várias marcas — economia real e jornada coerente.</p>
        </div>
        <div className="bundle-grid">
          {bundles.map(b => (
            <div key={b.id} className={"bundle reveal" + (b.featured ? " featured" : "")}>
              <span className="bundle-tag">{b.tag}</span>
              <h3>{b.title}</h3>
              <p className="bundle-desc">{b.desc}</p>
              <ul>{b.items.map(i => <li key={i}>{i}</li>)}</ul>
              <div className="bundle-price">
                <b>{formatPrice(b.price)}</b>
                <s>{formatPrice(b.original)}</s>
                <em>−{b.save}</em>
              </div>
              <button className="btn btn-primary" style={{width:"100%"}} onClick={() => onAddBundle(b)}>
                Adicionar combo {Icons.arrow(14)}
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Depoimentos</span>
            <h2 style={{marginTop: 14}}>Pessoas reais. <span className="gradient-text">Resultados reais.</span></h2>
          </div>
        </div>
        <div className="testi-grid">
          {LC4_TESTIMONIALS.map((t, i) => (
            <div className="testi reveal" key={i}>
              <div className="testi-stars">★★★★★</div>
              <p className="testi-text">"{t.text}"</p>
              <div className="testi-foot">
                <div className="avatar">{t.name.split(" ").map(w => w[0]).slice(0,2).join("")}</div>
                <div>
                  <div className="testi-name">{t.name}</div>
                  <div className="testi-role">{t.role} · {t.brand}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Blog() {
  const posts = [
    { tag: "Finanças", read: "7 min", title: "Como montar sua reserva de emergência em 90 dias", desc: "Aprenda um método simples e estratégico para construir sua reserva de emergência em apenas 90 dias, mesmo começando do zero. Organize suas finanças, elimine excessos e crie mais segurança financeira para imprevistos do dia a dia.", link: "produtos/blog1-reserva-emergencia.html" },
    { tag: "IA", read: "7 min", title: "10 prompts que você precisa conhecer", desc: "Descubra 10 prompts práticos que ajudam a automatizar tarefas, acelerar processos usando inteligência artificial. Ideal para quem busca mais produtividade, organização e eficiência no dia a dia.", link: "produtos/blog2-10-prompts.html" },
    { tag: "Gestão de Negócios", read: "6 min", title: "Varejo sem Caos, Loja Física x On-Line", desc: "Entenda as principais diferenças entre loja física e on-line e aprenda como organizar seu varejo de forma mais estratégica e eficiente. Descubra como integrar vendas, estoque e atendimento sem transformar sua operação em um caos.", link: "produtos/blog3-varejo-loja-fisica-online.html" },
  ];
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Blog & conteúdo gratuito</span>
            <h2 style={{marginTop: 14}}>Conteúdo de valor, <span className="gradient-text">sem cartão de crédito.</span></h2>
          </div>
          <a href="#" className="btn btn-ghost">Ver todos os artigos {Icons.arrow(14)}</a>
        </div>
        <div className="blog-grid">
          {posts.map((p, i) => (
            <a className="blog-card reveal" key={i} href={p.link || "#"} style={{textDecoration: "none", color: "inherit", cursor: p.link ? "pointer" : "default"}}>
              <div className="blog-cover" style={{ "--blog-grad": `linear-gradient(135deg, ${["#0a1628","#0d0a1f","#08161a"][i%3]}, var(--panel-2))` }}>
                <div style={{position: "absolute", inset: 0, display: "grid", placeItems: "center", fontFamily: "Space Grotesk", fontSize: 80, fontWeight: 700, color: "rgba(34,211,238,0.2)"}}>{String(i+1).padStart(2,"0")}</div>
              </div>
              <div className="blog-body">
                <div className="blog-meta"><span>{p.tag}</span><span>{p.read} de leitura</span></div>
                <h4>{p.title}</h4>
                <p>{p.desc}</p>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Newsletter({ onSubmit }) {
  const [email, setEmail] = uS2("");
  const [done, setDone] = uS2(false);
  return (
    <section>
      <div className="container">
        <div className="newsletter reveal">
          <span className="eyebrow" style={{justifyContent: "center", margin: "0 auto"}}>Newsletter</span>
          <h2 style={{maxWidth: 820, margin: "0 auto", fontSize: "clamp(24px, 2.4vw, 32px)", lineHeight: 1.35}}>Ao adquirir nossos produtos, você passa a fazer parte de um <span className="gradient-text">ecossistema</span> criado para impulsionar seu crescimento por meio de conteúdos digitais, como e-books, planilhas, treinamentos e mentorias. Encontre o que mais combina com você e faça parte de nossas comunidades exclusivas.</h2>
          {!done ? (
            <div style={{display: "flex", justifyContent: "center", marginTop: 28}}>
              <a href="#marcas" className="btn btn-primary btn-lg" onClick={(e) => { e.preventDefault(); document.getElementById('marcas')?.scrollIntoView({behavior:'smooth'}); }}>
                🌐 Acessar Ecossistema
              </a>
            </div>
          ) : (
            <div style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "14px 24px", borderRadius: 12, background: "rgba(16,185,129,0.1)", border: "1px solid rgba(16,185,129,0.3)", color: "var(--emerald)" }}>
              {Icons.check()} Bem-vindo(a) à comunidade LC4lab!
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = uS2(0);
  return (
    <section id="faq">
      <div className="container">
        <div className="section-head" style={{justifyContent: "center", textAlign: "center"}}>
          <div style={{margin: "0 auto"}}>
            <span className="eyebrow" style={{justifyContent: "center"}}>Perguntas frequentes</span>
            <h2 style={{marginTop: 14}}>Tirando suas <span className="gradient-text">dúvidas</span> antes da compra.</h2>
          </div>
        </div>
        <div className="faq-list">
          {LC4_FAQ.map((f, i) => (
            <div key={i} className={"faq-item" + (open === i ? " open" : "")}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-toggle">{Icons.plus(14)}</span>
              </button>
              <div className="faq-a">{f.a.split("\n\n").map((p, j) => <p key={j} style={{margin: j === 0 ? 0 : "12px 0 0"}}>{p}</p>)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <a className="brand" onClick={() => go({page: "home"})}>
              <img src="assets/logo-lc4lab.png" alt="LC4lab"/>
              <span className="brand-name">LC<b>4</b>lab</span>
            </a>
            <p>O laboratório de produtos digitais que centraliza marcas verticais com curadoria, padrão e didática.</p>
            <div style={{display: "flex", gap: 14, marginTop: 18}}>
              <a href="https://www.instagram.com/lc4lab?igsh=em8yMDM2bzk4aTY4&utm_source=qr" target="_blank" rel="noopener" aria-label="Instagram" style={{display: "inline-flex", alignItems: "center", justifyContent: "center", width: 38, height: 38, borderRadius: 10, background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.1)", color: "var(--text-dim)"}}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
              </a>
              <a href="https://www.facebook.com/share/1ENxutz6HP/?mibextid=wwXIfr" target="_blank" rel="noopener" aria-label="Facebook" style={{display: "inline-flex", alignItems: "center", justifyContent: "center", width: 38, height: 38, borderRadius: 10, background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.1)", color: "var(--text-dim)"}}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M13 22v-8h3l1-4h-4V7.5c0-1.1.4-2 2-2h2V2h-3c-3 0-5 1.8-5 5v3H6v4h3v8h4z"/></svg>
              </a>
              <a href="https://chat.whatsapp.com/ISgFvgzZWM8BF2P0Le56cq?mode=gi_t" target="_blank" rel="noopener" aria-label="WhatsApp" style={{display: "inline-flex", alignItems: "center", justifyContent: "center", width: 38, height: 38, borderRadius: 10, background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.1)", color: "var(--text-dim)"}}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M19.05 4.91A9.82 9.82 0 0 0 12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01zM12.04 20.15c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.26 8.26 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c.02 4.54-3.68 8.24-8.22 8.24zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.17.25-.64.81-.78.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43s.17-.25.25-.41c.08-.17.04-.31-.02-.43s-.56-1.34-.76-1.84c-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.22.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18s-.22-.16-.47-.28z"/></svg>
              </a>
            </div>
          </div>
          <div>
            <h5>Empresa</h5>
            <ul>
              <li><a onClick={() => go({page: "produto", id: "sobre"})}>Sobre a LC4lab</a></li>
              <li><a onClick={() => go({page: "produto", id: "blog"})}>Blog</a></li>
            </ul>
          </div>
          <div>
            <h5>Suporte</h5>
            <ul>
              <li><a onClick={() => go({page: "login"})}>Área do aluno</a></li>
              <li><a onClick={() => go({page:"contato"})}>Contato</a></li>
              <li><a onClick={() => go({page: "produto", id: "privacidade"})}>Aviso de Privacidade</a></li>
              <li><a onClick={() => go({page: "produto", id: "termos"})}>Termos de uso</a></li>
              <li><a onClick={() => go({page: "produto", id: "aviso-legal"})}>Aviso legal</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 LC4lab · Laboratório · Inovação · Code</span>
        </div>
      </div>
    </footer>
  );
}

// Brand page
function BrandPage({ brandId, go, onOpenProduct, onAdd }) {
  const brand = LC4_BRANDS.find(b => b.id === brandId);
  const [filter, setFilter] = uS2("Todos");
  if (!brand) return <div className="container" style={{padding: "80px 0"}}>Marca não encontrada</div>;
  const types = ["Todos", ...new Set(brand.products.map(p => p.type))];
  const list = filter === "Todos" ? brand.products : brand.products.filter(p => p.type === filter);
  return (
    <>
      <section className="brand-hero" style={{ "--brand-grad": `linear-gradient(135deg, ${brand.accent}30, ${brand.accent2}20 60%, transparent)` }}>
        <div className="container">
          <div className="breadcrumbs">
            <a onClick={() => go({page: "home"})}>LC4lab</a> / <a onClick={() => go({page: "home"})}>Marcas</a> / {brand.name}
          </div>
          <div className="brand-hero-grid">
            <img className="brand-hero-logo" src={brand.logo} alt={brand.name}/>
            <div>
              <span className="eyebrow" style={{color: brand.accent}}>{brand.tag}</span>
              <h1 style={{margin: "14px 0 16px"}}>{brand.name}</h1>
              <p className="lede">{brand.long}</p>
              <div className="brand-stats">
                <div className="brand-stat"><b>{brand.students}</b><span>Alunos</span></div>
                <div className="brand-stat"><b>{brand.rating}★</b><span>Avaliação</span></div>
                <div className="brand-stat"><b>{brand.products.length}</b><span>Produtos</span></div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section style={{paddingTop: 24}}>
        <div className="container">
          <div className="chips" style={{marginBottom: 32}}>
            {types.map(t => (
              <button key={t} className={"chip" + (filter === t ? " active" : "")} onClick={() => setFilter(t)}>{t}</button>
            ))}
          </div>
          <div className="product-grid">
            {list.map(p => (
              <ProductCard key={p.id} brand={brand} product={p}
                onOpen={() => onOpenProduct(brand, p)} onAdd={onAdd}/>
            ))}
          </div>
          {brand.products.length === 0 && (
            <div className="empty" style={{textAlign:"center", padding:"60px 20px", border:"1px dashed var(--border)", borderRadius:20, marginTop:8}}>
              <h3 style={{fontSize:24, marginBottom:10}}>Em breve</h3>
              <p style={{color:"var(--text-mute)", maxWidth:480, margin:"0 auto"}}>Estamos preparando os primeiros lançamentos desta marca. Inscreva-se na newsletter para ser avisado.</p>
            </div>
          )}
        </div>
      </section>
    </>
  );
}

// Search page
function SearchPage({ query, go, onOpenProduct, onAdd }) {
  const q = query.toLowerCase();
  const results = uM2(() => {
    const items = [];
    LC4_BRANDS.forEach(b => b.products.forEach(p => {
      if (!q || p.title.toLowerCase().includes(q) || p.desc.toLowerCase().includes(q) || b.name.toLowerCase().includes(q) || p.type.toLowerCase().includes(q)) {
        items.push({ brand: b, product: p });
      }
    }));
    return items;
  }, [q]);
  return (
    <section style={{paddingTop: 64}}>
      <div className="container">
        <div className="breadcrumbs"><a onClick={() => go({page: "home"})}>LC4lab</a> / Busca</div>
        <h1 style={{fontSize: 40, marginTop: 14, marginBottom: 32}}>
          {results.length} resultado{results.length !== 1 ? "s" : ""} para <span className="gradient-text">"{query}"</span>
        </h1>
        <div className="product-grid">
          {results.map(({brand, product}) => (
            <ProductCard key={product.id} brand={brand} product={product}
              onOpen={() => onOpenProduct(brand, product)} onAdd={onAdd}/>
          ))}
        </div>
        {results.length === 0 && (
          <div className="empty">Nada encontrado. Tente outro termo.</div>
        )}
      </div>
    </section>
  );
}

// Checkout page
function CheckoutPage({ items, go, onClear }) {
  const [step, setStep] = uS2(1);
  const total = items.reduce((a, i) => a + i.product.price, 0);
  const original = items.reduce((a, i) => a + (i.product.original || i.product.price), 0);
  const pix = total * 0.95;

  if (step === 2) {
    return (
      <section className="login-wrap">
        <div className="login-card" style={{textAlign: "center"}}>
          <div style={{ width: 64, height: 64, borderRadius: 32, background: "rgba(16,185,129,0.15)", border: "1px solid rgba(16,185,129,0.4)", color: "var(--emerald)", display: "grid", placeItems: "center", margin: "0 auto 24px" }}>{Icons.check(28)}</div>
          <h2>Pedido confirmado!</h2>
          <p>Você seria redirecionado(a) para o checkout seguro da Hotmart/Kiwify para finalizar o pagamento. Aqui é só um placeholder de demonstração.</p>
          <button className="btn btn-primary btn-lg" style={{width: "100%"}} onClick={() => { onClear(); go({page: "home"}); }}>Voltar para home</button>
        </div>
      </section>
    );
  }

  return (
    <section style={{paddingTop: 64}}>
      <div className="container">
        <div className="breadcrumbs"><a onClick={() => go({page: "home"})}>LC4lab</a> / Checkout</div>
        <h1 style={{fontSize: 40, marginTop: 14, marginBottom: 32}}>Finalizar compra</h1>
        <div className="checkout-grid">
          <div>
            <div style={{ background: "var(--panel)", border: "1px solid var(--line)", borderRadius: "var(--r-lg)", padding: 28, marginBottom: 16 }}>
              <h3 style={{marginBottom: 18, fontSize: 18}}>Seus dados</h3>
              <div className="form-group"><label>Nome completo</label><input type="text" placeholder="Como aparece no documento"/></div>
              <div className="form-group"><label>E-mail</label><input type="email" placeholder="seu@email.com"/></div>
              <div className="row-2">
                <div className="form-group"><label>CPF</label><input type="text" placeholder="000.000.000-00"/></div>
                <div className="form-group"><label>Celular</label><input type="text" placeholder="(11) 99999-9999"/></div>
              </div>
            </div>
            <div style={{ background: "var(--panel)", border: "1px solid var(--line)", borderRadius: "var(--r-lg)", padding: 28 }}>
              <h3 style={{marginBottom: 18, fontSize: 18}}>Pagamento</h3>
              <div className="row-2">
                <div className="form-group"><label>Forma</label><select><option>Cartão de crédito</option><option>Pix (5% off)</option><option>Boleto</option></select></div>
                <div className="form-group"><label>Parcelas</label><select><option>12x sem juros</option><option>6x sem juros</option><option>1x à vista</option></select></div>
              </div>
              <p style={{fontSize: 12, color: "var(--text-mute)", marginTop: 8}}>Você é redirecionado para o ambiente seguro da Hotmart/Kiwify para finalizar.</p>
            </div>
          </div>
          <div className="summary-card">
            <h3 style={{marginBottom: 16}}>Resumo</h3>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, marginBottom: 18, paddingBottom: 18, borderBottom: "1px solid var(--line)" }}>
              {items.map((it, i) => (
                <div key={i} style={{display: "flex", justifyContent: "space-between", gap: 12, fontSize: 13}}>
                  <span style={{color: "var(--text-dim)"}}>{it.product.title}</span>
                  <b>{formatPrice(it.product.price)}</b>
                </div>
              ))}
            </div>
            <div className="cart-total-row"><span>Subtotal</span><span>{formatPrice(original)}</span></div>
            {original > total && <div className="cart-total-row" style={{ color: "var(--emerald)" }}><span>Desconto</span><span>−{formatPrice(original - total)}</span></div>}
            <div className="cart-total-row" style={{ color: "var(--emerald)" }}><span>Pix (5% off)</span><span>{formatPrice(pix)}</span></div>
            <div className="cart-total-row big"><span>Total</span><span>{formatPrice(total)}</span></div>
            <button className="btn btn-primary btn-lg" style={{width: "100%", marginTop: 16}} onClick={() => setStep(2)}>
              Pagar com segurança {Icons.arrow(14)}
            </button>
            <p style={{fontSize: 11, color: "var(--text-mute)", textAlign: "center", marginTop: 12}}>🔒 Hotmart · Kiwify · 7 dias de garantia</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactPage({ go }) {
  return (
    <>
      <section style={{
        padding: "80px 0 90px",
        background: "linear-gradient(120deg, #0a1628 0%, #1e3a5f 55%, #4a6f96 100%)",
        position: "relative",
        overflow: "hidden"
      }}>
        <div className="container">
          <div className="breadcrumbs" style={{marginBottom: 22, color: "rgba(255,255,255,.6)"}}>
            <a onClick={() => go({page:"home"})} style={{color:"rgba(255,255,255,.85)"}}>LC4lab</a> / Fale Conosco
          </div>
          <h1 style={{fontSize: "clamp(48px, 7vw, 84px)", color: "#fff", margin: 0, letterSpacing: "-0.02em"}}>Fale Conosco</h1>
        </div>
      </section>
      <section style={{padding: "70px 0 90px"}}>
        <div className="container" style={{maxWidth: 880, textAlign: "center"}}>
          <h2 style={{fontSize: "clamp(28px, 3.6vw, 44px)", margin: "0 0 22px", lineHeight: 1.2}}>
            Quer entrar em contato com a <span className="gradient-text">equipe da LC4lab?</span>
          </h2>
          <p className="lede" style={{maxWidth: 680, margin: "0 auto 14px"}}>
            Estamos 100% focados e dispostos a te ajudar e solucionar todos os seus problemas o mais rápido possível, das 9h às 18h (segunda a sexta-feira).
          </p>
          <p style={{color: "var(--text-mute)", margin: "0 auto 36px", maxWidth: 600}}>
            Aperte o botão do canal pelo qual deseja receber atendimento:
          </p>
          <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 22, marginTop: 30}}>
            <div style={{display: "flex", flexDirection: "column", alignItems: "center", gap: 14}}>
              <a href="mailto:lc4lab@outlook.com" className="btn btn-primary btn-lg" style={{width: "100%", justifyContent: "center", letterSpacing: "0.04em", textTransform: "uppercase", fontWeight: 700}}>
                Suporte pelo e-mail
              </a>
              <a href="mailto:lc4lab@outlook.com" style={{color: "var(--text-mute)", fontSize: 14, display: "inline-flex", alignItems: "center", gap: 8, textDecoration: "none"}}>
                {Icons.mail ? Icons.mail(14) : "✉"} lc4lab@outlook.com
              </a>
            </div>
            <div style={{display: "flex", flexDirection: "column", alignItems: "center", gap: 14}}>
              <a href="https://wa.me/5500000000000" target="_blank" rel="noopener" className="btn btn-primary btn-lg" style={{width: "100%", justifyContent: "center", letterSpacing: "0.04em", textTransform: "uppercase", fontWeight: 700}}>
                Suporte pelo WhatsApp
              </a>
              <span style={{color: "var(--text-mute)", fontSize: 14, display: "inline-flex", alignItems: "center", gap: 8}}>
                💬 Em breve
              </span>
            </div>
          </div>
          <div style={{marginTop: 60, padding: 28, border: "1px solid var(--border)", borderRadius: 18, background: "var(--card)"}}>
            <h3 style={{margin: "0 0 8px", fontSize: 20}}>Prefere escrever?</h3>
            <p style={{margin: 0, color: "var(--text-mute)"}}>
              Envie sua mensagem para <a href="mailto:lc4lab@outlook.com" style={{color: "var(--cyan)"}}>lc4lab@outlook.com</a> que retornamos em até 24h úteis.
            </p>
          </div>
        </div>
      </section>
    </>
  );
}

function ProductPage({ slug, go }) {
  // Map slug -> sales page path
  const pages = {
    "cs-codigo-prosperidade": "produtos/codigo-da-prosperidade.html",
    "vc-cresce-mais": "produtos/cresce-mais.html",
    "dc-cresce-mais-pais": "produtos/cresce-mais-pais.html",
    "vc-cresce-mais-pais": "produtos/cresce-mais-pais.html",
    "sobre": "produtos/sobre-nos-lc4lab.html",
    "blog": "produtos/blog-lc4lab.html",
    "privacidade": "produtos/politica-privacidade-lc4lab.html",
    "termos": "produtos/termos-condicoes-lc4lab.html",
    "aviso-legal": "produtos/aviso-legal-lc4lab.html",
    "diagnostico": "produtos/diagnostico-financeiro.html"
  };
  const src = pages[slug];
  if (!src) {
    return (
      <section className="login-wrap">
        <div className="container" style={{textAlign:"center", padding:"80px 0"}}>
          <h2>Página não encontrada</h2>
          <button className="btn btn-primary btn-lg" style={{marginTop:20}} onClick={() => go({page:"home"})}>Voltar à home</button>
        </div>
      </section>
    );
  }
  return (
    <section style={{padding:0, background:"var(--bg)"}}>
      <iframe src={src} style={{width:"100%", height:"calc(100vh - 72px)", border:"none", display:"block", background:"#fff"}} title="Página" />
    </section>
  );
}

function LoginPage({ go }) {
  return (
    <section className="login-wrap">
      <div className="container">
        <div className="login-card" style={{margin: "0 auto"}}>
          <div className="breadcrumbs" style={{marginBottom: 18}}><a onClick={() => go({page: "home"})}>LC4lab</a> / Área do aluno</div>
          <h2>Entrar na sua conta</h2>
          <p>Acesse seus produtos, aulas e downloads.</p>
          <div className="form-group"><label>E-mail</label><input type="email" placeholder="seu@email.com"/></div>
          <div className="form-group"><label>Senha</label><input type="password" placeholder="••••••••"/></div>
          <button className="btn btn-primary btn-lg" style={{width: "100%"}}>Entrar</button>
          <div className="login-divider">ou</div>
          <button className="btn btn-ghost btn-lg" style={{width: "100%"}}>Entrar com Google</button>
          <p style={{textAlign: "center", marginTop: 24, fontSize: 13, color: "var(--text-mute)"}}>
            Não tem conta? <a style={{color: "var(--cyan)", cursor: "pointer"}} onClick={() => { go({page: "home"}); setTimeout(() => document.getElementById("marcas")?.scrollIntoView({behavior: "smooth", block: "start"}), 50); }}>Comprar um produto</a>
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Hero, Categories, BrandsSection, FeaturedProducts, About, Bundles, Testimonials,
  Blog, Newsletter, FAQ, Footer, BrandPage, SearchPage, CheckoutPage, LoginPage, ProductPage, ContactPage,
});