/* ============================================
   PRODUZ SITE — Page Sections (part 3)
   Pricing, How it works, FAQ, Final CTA, Footer
   ============================================ */

/* ===== Social Circle (footer) with hover effect ===== */
const SocialCircle = ({ name, url, label }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={url}
      target="_blank"
      rel="noopener noreferrer"
      aria-label={label}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        width: 40,
        height: 40,
        borderRadius: "50%",
        background: hover ? "#fff" : "rgba(255,255,255,0.04)",
        border: hover ? "1px solid #fff" : "1px solid var(--line)",
        color: hover ? "#2e6fef" : "var(--text-2)",
        transition: "all .25s ease",
        transform: hover ? "translateY(-3px)" : "translateY(0)",
        boxShadow: hover ? "0 8px 20px rgba(46,111,239,0.3)" : "none",
        padding: 0,
      }}
    >
      <Icon name={name} size={18} />
    </a>
  );
};

/* ===== PRICING ===== */
const Pricing = ({ tweaks }) => {
  const [billing, setBilling] = React.useState("monthly");
  const features = [
    "Site sob medida (com base em templates)",
    "Domínio .com.br próprio",
    "E-mail personalizado (contato@suaempresa.com.br)",
    "Hospedagem rápida e segura",
    "Google Meu Negócio configurado",
    "10 atualizações de conteúdo/mês",
    "SEO configurado",
    "Suporte WhatsApp e e-mail",
    "Manutenção e segurança contínuas",
    "Site 100% responsivo",
    "No ar em até 7 dias",
    "Sem fidelidade*",
  ];

  const customFeatures = [
    "Layout 100% original, do zero",
    "Funcionalidades sob medida",
    "E-commerce, área logada, integrações",
    "Domínio .com.br próprio",
    "E-mail personalizado (contato@suaempresa.com.br)",
    "Hospedagem rápida e segura",
    "Google Meu Negócio configurado",
    "Acompanhamento dedicado",
    "Suporte WhatsApp e e-mail",
    "Manutenção contínua inclusa",
    "Prazo conforme o escopo",
  ];

  const isAnnual = billing === "annual";

  return (
    <section id="pricing">
      <style dangerouslySetInnerHTML={{ __html: `
        .billing-toggle {
          display: grid;
          grid-template-columns: 1fr 1fr;
          align-items: center;
          gap: 4px;
          padding: 4px;
          border-radius: 999px;
          background: rgba(255,255,255,0.04);
          border: 1px solid var(--line-strong);
          backdrop-filter: blur(10px);
          margin-bottom: 8px;
          position: relative;
        }
        .billing-toggle button {
          position: relative;
          z-index: 2;
          padding: 10px 22px;
          border-radius: 999px;
          font-size: 14px;
          font-weight: 500;
          color: var(--text-2);
          transition: color .25s ease;
          background: transparent;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          white-space: nowrap;
        }
        .billing-toggle button.active {
          color: var(--text-1);
        }
        .billing-toggle .toggle-thumb {
          position: absolute;
          top: 4px;
          bottom: 4px;
          left: 4px;
          width: calc((100% - 12px) / 2);
          border-radius: 999px;
          background: linear-gradient(135deg, rgba(123,92,255,0.3), rgba(46,111,239,0.2));
          border: 1px solid rgba(160,123,255,0.4);
          transition: transform .3s cubic-bezier(.3,.7,.4,1);
          z-index: 1;
        }
        .billing-toggle .toggle-thumb.right {
          transform: translateX(calc(100% + 4px));
        }
        @media (max-width: 480px) {
          .billing-toggle button {
            padding: 10px 12px;
            font-size: 13px;
          }
          .billing-save-tag {
            font-size: 9px;
            padding: 2px 6px;
          }
        }
        .billing-save-tag {
          font-size: 10px;
          font-weight: 700;
          letter-spacing: 0.04em;
          padding: 3px 8px;
          border-radius: 999px;
          background: linear-gradient(90deg, #ff7a3d, #ff4d8a);
          color: #fff;
          text-transform: uppercase;
        }
        .annual-savings {
          margin-top: 10px;
          font-size: 13px;
          color: var(--brand-violet-2);
          font-weight: 500;
        }
        .annual-savings strong {
          color: #ffb38c;
          font-weight: 700;
        }
        .price-equiv {
          margin-top: 4px;
          font-size: 13px;
          color: var(--text-3);
        }

        /* Two-card grid */
        .pricing-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 24px;
          max-width: 980px;
          margin: 0 auto;
          align-items: stretch;
        }
        @media (max-width: 880px) {
          .pricing-grid { grid-template-columns: 1fr; }
        }

        /* Popular badge on featured card */
        .pricing-grid .pricing-card .inner {
          padding-top: 56px;
          position: relative;
        }
        .popular-badge {
          position: absolute;
          top: 16px;
          left: 50%;
          transform: translateX(-50%);
          padding: 6px 16px;
          border-radius: 999px;
          background: linear-gradient(90deg, #7b5cff, #4d8bff);
          color: #fff;
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          box-shadow: 0 8px 20px rgba(123,92,255,0.4);
          z-index: 5;
          white-space: nowrap;
        }

        /* Custom (sober) card variant */
        .pricing-card.custom .inner {
          background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(15,15,28,0.6) 100%);
          border: 1px solid var(--line-strong);
          box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.04) inset;
        }
        .pricing-card.custom .inner::after {
          background: radial-gradient(ellipse at center, rgba(123,92,255,0.12) 0%, transparent 70%);
        }
        .pricing-card.custom .plan-name {
          color: var(--text-2);
        }
        .pricing-card.custom .price .amount {
          font-size: 36px;
          background: linear-gradient(180deg, #ffffff, #b8bad0);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
        .pricing-card.custom .btn-cta {
          background: rgba(255,255,255,0.06);
          border: 1px solid var(--line-strong);
          color: var(--text-1);
          box-shadow: none;
        }
        .pricing-card.custom .btn-cta:hover {
          background: rgba(255,255,255,0.1);
        }

        /* Make both cards same internal height */
        .pricing-grid .pricing-card {
          height: 100%;
          max-width: none;
        }
        .pricing-grid .pricing-card .inner {
          height: 100%;
          display: flex;
          flex-direction: column;
        }
        .pricing-grid .pricing-features {
          flex: 1;
        }

        /* Footnote */
        .pricing-footnote {
          max-width: 980px;
          margin: 24px auto 0;
          text-align: center;
          font-size: 12px;
          color: var(--text-3);
          line-height: 1.6;
        }
      `}} />
      <div className="container">
        <div className="section-head">
          <Reveal>
            <span className="tag-pill" style={{ borderColor: "rgba(255,122,61,0.4)", color: "#ffb38c" }}>
              <Icon name="fire" size={12} /> Oferta por tempo limitado
            </span>
          </Reveal>
          <Reveal delay={80}><h2 className="gradient-text">Escolha o plano ideal<br/>para o seu negócio</h2></Reveal>
          <Reveal delay={160}>
            <p className="lead">
              Dois caminhos: praticidade com mensalidade ou um projeto exclusivo
              sob medida. Em qualquer um, a gente cuida de tudo.
            </p>
          </Reveal>
          <Reveal delay={220}>
            <div className="billing-toggle" role="tablist">
              <div className={isAnnual ? "toggle-thumb right" : "toggle-thumb"} />
              <button
                role="tab"
                aria-selected={!isAnnual}
                className={!isAnnual ? "active" : ""}
                onClick={() => setBilling("monthly")}
              >
                Mensal
              </button>
              <button
                role="tab"
                aria-selected={isAnnual}
                className={isAnnual ? "active" : ""}
                onClick={() => setBilling("annual")}
              >
                Anual
                <span className="billing-save-tag">2 meses grátis</span>
              </button>
            </div>
          </Reveal>
        </div>

        <Reveal delay={260}>
          <div className="pricing-grid">
            {/* CARD 1 — Site Profissional */}
            <div className="pricing-card">
              <div className="inner">
                <div className="popular-badge">Mais popular</div>
                <div style={{ display: "flex", justifyContent: "center" }}>
                  <span className="pricing-tag"><Icon name="fire" size={12} /> Oferta por tempo limitado</span>
                </div>
                <div className="plan-name" style={{ textAlign: "center" }}>🚀 Site Profissional</div>
                <div className="setup" style={{ textAlign: "center", fontSize: 15 }}>
                  Setup <s>R$ 299,90</s> <span className="free">GRÁTIS</span>
                  <br/>
                  <span style={{ fontSize: 15, color: "var(--text-3)" }}>aproveite enquanto está disponível</span>
                </div>

                {!isAnnual ? (
                  <div className="price-block">
                    <div className="price" style={{ justifyContent: "center" }}>
                      <span className="currency">R$</span>
                      <span className="amount">99,90</span>
                      <span className="period">/mês</span>
                    </div>
                  </div>
                ) : (
                  <div className="price-block" style={{ textAlign: "center" }}>
                    <div className="price" style={{ justifyContent: "center" }}>
                      <span className="currency">R$</span>
                      <span className="amount">999</span>
                      <span className="period">/ano</span>
                    </div>
                    <div className="annual-savings">
                      <strong>Economize R$ 199,80</strong> · Pague 10 meses, ganhe 12
                    </div>
                    <div className="price-equiv">
                      Equivalente a R$ 83,25/mês
                    </div>
                  </div>
                )}

                <ul className="pricing-features">
                  {features.map((f, i) => (
                    <li key={i}>
                      <span className="check"><Icon name="check" size={12} stroke={2.6} /></span>
                      {f}
                    </li>
                  ))}
                </ul>
                <a
                  href={`https://wa.me/5582999083808?text=${encodeURIComponent(
                    isAnnual
                      ? "Olá! Quero contratar o Site Profissional no plano anual (R$ 999/ano)."
                      : "Olá! Quero contratar o Site Profissional no plano mensal (R$ 99,90/mês)."
                  )}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn btn-cta"
                >
                  Quero começar agora
                  <Icon name="arrow-right" size={18} />
                </a>
                <div className="pricing-disclaimer">
                  {isAnnual
                    ? "Pagamento à vista anual. Cancele a renovação quando quiser."
                    : "Sem fidelidade. Cancele quando quiser."}
                </div>
              </div>
            </div>

            {/* CARD 2 — Site Personalizado */}
            <div className="pricing-card custom">
              <div className="inner">
                <div style={{ display: "flex", justifyContent: "center" }}>
                  <span className="pricing-tag" style={{
                    background: "rgba(255,255,255,0.06)",
                    color: "var(--text-2)",
                  }}>
                    <Icon name="sparkle" size={12} /> Sob medida
                  </span>
                </div>
                <div className="plan-name" style={{ textAlign: "center" }}>✨ Site Personalizado</div>
                <div className="setup" style={{ textAlign: "center" }}>
                  Projeto exclusivo, do zero<br/>
                  <span style={{ fontSize: 12, color: "var(--text-3)" }}>conforme o escopo do seu negócio</span>
                </div>
                <div className="price-block" style={{ textAlign: "center" }}>
                  <div className="price" style={{ justifyContent: "center" }}>
                    <span className="amount">Sob orçamento</span>
                  </div>
                  <div className="price-equiv">
                    Pagamento único + manutenção
                  </div>
                </div>
                <ul className="pricing-features">
                  {customFeatures.map((f, i) => (
                    <li key={i}>
                      <span className="check"><Icon name="check" size={12} stroke={2.6} /></span>
                      {f}
                    </li>
                  ))}
                </ul>
                <a
                  href={`https://wa.me/5582999083808?text=${encodeURIComponent("Olá! Gostaria de solicitar um orçamento para um Site Personalizado.")}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn btn-cta"
                >
                  Solicitar orçamento
                  <Icon name="arrow-right" size={18} />
                </a>
                <div className="pricing-disclaimer">
                  Conversa sem compromisso pelo WhatsApp.
                </div>
              </div>
            </div>
          </div>
        </Reveal>

        <Reveal delay={300}>
          <div className="pricing-footnote">
            * Sem fidelidade no Site Profissional. Em caso de cancelamento antes de 12 meses,
            é cobrado apenas o valor do domínio (R$ 40), já que ele é registrado em seu nome
            por 1 ano completo.
          </div>
        </Reveal>

        {tweaks.showScarcity && (
          <Reveal delay={340}>
            <div className="scarcity-wrap">
              <div className="scarcity">
                <span style={{
                  display: "inline-block", width: 8, height: 8, borderRadius: "50%",
                  background: "#ff7a3d", animation: "pulse 2s infinite"
                }}></span>
                Setup grátis disponível por <strong style={{ color: "#ffb38c" }}>tempo limitado</strong>
              </div>
            </div>
          </Reveal>
        )}
      </div>
    </section>
  );
};

/* ===== HOW IT WORKS ===== */
const HowItWorks = () => {
  const steps = [
    { n: "1", t: "Você assina o plano", b: "Pagamento da primeira mensalidade. Pronto, já começamos." },
    { n: "2", t: "Briefing rápido (Dia 1)", b: "Conversa por WhatsApp ou vídeo para entender seu negócio, suas cores e sua mensagem." },
    { n: "3", t: "Criação e aprovação (Dias 2 a 6)", b: "A gente desenvolve, te apresenta, ajusta o que precisar. Você no controle." },
    { n: "4", t: "Site no ar (Dia 7)", b: "Publicamos, configuramos o domínio e seu negócio passa a existir digitalmente. 🎉" },
  ];
  return (
    <section id="how">
      <div className="container">
        <div className="section-head">
          <Reveal><span className="tag-pill"><Icon name="sparkle" size={12} /> Como funciona</span></Reveal>
          <Reveal delay={80}><h2 className="gradient-text">Do "quero" ao "no ar"<br/>em 7 dias.</h2></Reveal>
          <Reveal delay={160}>
            <p className="lead">
              Nosso processo é direto ao ponto. Você fala, a gente entrega. Sem reunião que
              não termina, sem briefing de 30 páginas.
            </p>
          </Reveal>
        </div>
        <Reveal delay={200}>
          <div className="timeline">
            {steps.map((s, i) => (
              <div key={i} className="tl-step">
                <div className="num">{s.n}</div>
                <h3>{s.t}</h3>
                <p>{s.b}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

/* ===== FAQ ===== */
const FAQ = () => {
  const items = [
    { q: "E se eu cancelar? Perco tudo?", a: "Não tem fidelidade — você cancela quando quiser, sem multa. Se quiser levar o conteúdo, a gente conversa. Sem drama, sem retenção forçada." },
    { q: "Esse preço é real mesmo? Tem pegadinha?", a: "Real e sem pegadinha. R$ 99,90/mês com tudo dentro: hospedagem, domínio, manutenção, suporte. Não cobramos extra por nada que está na lista. E enquanto a oferta estiver disponível, o setup também é por nossa conta." },
    { q: "Posso pedir mudanças no site depois de pronto?", a: "Pode sim. Você tem 10 atualizações de conteúdo por mês inclusas (textos, fotos, informações, telefones, horários, etc). Mudanças estruturais de layout são à parte, mas a gente sempre te avisa o valor antes — nada de cobrança surpresa." },
    { q: "E se eu não souber o que quero no site?", a: "Tranquilo, é o que mais acontece. No briefing a gente te guia com as perguntas certas. Com mais de 15 anos de experiência no mercado digital, nosso time sabe extrair o melhor do seu negócio mesmo quando você acha que \"não tem nada de especial pra mostrar\"." },
    { q: "Funciona para qualquer ramo?", a: "Funciona para a grande maioria dos negócios e profissionais — do empreendedor que está começando à empresa estabelecida. Se você tem uma operação muito específica (e-commerce com mil produtos, sistema sob medida, área logada), me chama no WhatsApp e a gente avalia juntos." },
    { q: "O domínio fica no meu nome?", a: "Sim. O .com.br é registrado com você como titular. Sua marca, seu domínio, sua propriedade." },
    { q: "E se meu site sair do ar?", a: "Não vai. Mas se sair, a gente resolve antes de você perceber. Monitoramento e suporte fazem parte do pacote." },
    { q: "Quanto tempo leva para meu site sair no Google?", a: "A indexação inicial costuma acontecer em alguns dias. Posicionar bem leva semanas a meses, dependendo do nicho — e a gente trabalha para isso desde o primeiro dia, com SEO configurado de fábrica." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq">
      <div className="container">
        <div className="section-head">
          <Reveal><span className="tag-pill"><Icon name="sparkle" size={12} /> FAQ</span></Reveal>
          <Reveal delay={80}><h2 className="gradient-text">Perguntas que todo mundo<br/>faz antes de começar</h2></Reveal>
        </div>
        <div className="faq-list">
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <Reveal key={i} delay={i * 40}>
                <div className={`faq-item ${isOpen ? "open" : ""}`}>
                  <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                    <span>{it.q}</span>
                    <span className="toggle"><Icon name="plus" size={16} /></span>
                  </button>
                  <div className="faq-a" style={{ maxHeight: isOpen ? 400 : 0 }}>
                    <div className="faq-a-inner">{it.a}</div>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
};

/* ===== FINAL CTA ===== */
const FinalCTA = () => {
  return (
    <section className="final-cta" id="final-cta">
      <div className="container">
        <Reveal>
          <h2 className="gradient-text">
            Em 7 dias, seu negócio<br/>pode estar no Google.
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <p className="lede">
            Ou em 7 dias você ainda vai estar pesquisando "como fazer site barato" pela
            centésima vez. A diferença entre um cenário e outro é uma decisão. E ela cabe no
            seu orçamento.
          </p>
        </Reveal>
        <Reveal delay={200}>
          <a
            href={`https://wa.me/5582999083808?text=${encodeURIComponent("Olá! Vim do site da Produz Site e quero colocar meu negócio no ar.")}`}
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn-cta lg"
          >
            <Icon name="rocket" size={20} />
            Quero meu site no ar
            <Icon name="arrow-up-right" size={20} />
          </a>
        </Reveal>
        <Reveal delay={280}>
          <div className="hero-trust" style={{ marginTop: 32, justifyContent: "center" }}>
            <span><Icon name="check" size={14} /> Setup grátis por tempo limitado</span>
            <span><Icon name="check" size={14} /> Sem fidelidade</span>
            <span><Icon name="check" size={14} /> Garantia de satisfação</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

/* ===== FOOTER ===== */
const Footer = () => {
  return (
    <footer className="footer" id="contact">
      <div className="container">
        <div className="footer-cta">
          <Reveal>
            <h3 className="gradient-text">Tem dúvida antes de assinar?</h3>
          </Reveal>
          <Reveal delay={100}>
            <p>Chama no WhatsApp que a gente conversa sem compromisso. Resposta rápida, sem robô, sem script.</p>
          </Reveal>
          <Reveal delay={200}>
            <a
              href={`https://wa.me/5582999083808?text=${encodeURIComponent("Olá! Tenho algumas dúvidas antes de contratar.")}`}
              target="_blank"
              rel="noopener noreferrer"
              className="btn btn-whatsapp"
              style={{ padding: "16px 28px", fontSize: 16 }}
            >
              <Icon name="whatsapp" size={18} />
              Falar no WhatsApp
            </a>
          </Reveal>
        </div>
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="nav-brand">
              <img src="produzsite/assets/logo.png" alt="Produz Site" />
              <span>Produz Site</span>
            </div>
            <p>Presença digital descomplicada para negócios de qualquer tamanho. Do empreendedor que está começando à empresa estabelecida — site profissional no ar em 7 dias, com mensalidade que cabe no bolso.</p>
            <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 8, fontSize: 14, color: "var(--text-2)" }}>
              <a
                href="mailto:contato@produzsite.com.br"
                style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--text-2)" }}
              >
                <Icon name="mail" size={14} /> contato@produzsite.com.br
              </a>
              <a
                href={`https://wa.me/5582999083808?text=${encodeURIComponent("Olá! Vim do site da Produz Site.")}`}
                target="_blank"
                rel="noopener noreferrer"
                style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--text-2)" }}
              >
                <Icon name="whatsapp" size={14} /> (82) 99908-3808
              </a>
            </div>
            <div style={{
              display: "flex",
              flexDirection: "row",
              gap: 10,
              marginTop: 16,
            }}>
              {[
                { name: "facebook", url: "https://facebook.com/produzsite", label: "Facebook" },
                { name: "instagram", url: "https://instagram.com/produzsite", label: "Instagram" },
                { name: "linkedin", url: "https://linkedin.com/company/produzsite", label: "LinkedIn" },
              ].map((s) => (
                <SocialCircle key={s.name} {...s} />
              ))}
            </div>
          </div>
          <div className="footer-col">
            <h5>Produto</h5>
            <ul>
              <li><a href="#included">O que inclui</a></li>
              <li><a href="#pricing">Preços</a></li>
              <li><a href="#how">Como funciona</a></li>
              <li><a href="#cases">Cases</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Atende</h5>
            <ul>
              <li><a href="#audience">Profissionais liberais</a></li>
              <li><a href="#audience">Pequenos negócios</a></li>
              <li><a href="#audience">Prestadores</a></li>
              <li><a href="#audience">Quem está começando</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Empresa</h5>
            <ul>
              <li><a href="#authority">Sobre nós</a></li>
              <li><a href="#faq">FAQ</a></li>
              <li><a href={`https://wa.me/5582999083808?text=${encodeURIComponent("Olá! Vim do site da Produz Site e gostaria de mais informações.")}`} target="_blank" rel="noopener noreferrer">Contato</a></li>
              <li><a href="#">Termos</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Produz Site. Todos os direitos reservados.</span>
          <span>+15 anos de experiência colocando negócio na internet.</span>
        </div>
      </div>
    </footer>
  );
};

window.Pricing = Pricing;
window.HowItWorks = HowItWorks;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;