/* global React, ReactDOM, ClientForm, useClientForm, useServicePrices */
const { useMemo } = React;

// Retorna a data atual no fuso de Brasília (America/Sao_Paulo) no formato dd/mm/aaaa
function getDataBrasilia() {
  try {
    return new Intl.DateTimeFormat('pt-BR', {
      timeZone: 'America/Sao_Paulo',
      day: '2-digit',
      month: '2-digit',
      year: 'numeric'
    }).format(new Date());
  } catch (e) {
    const d = new Date();
    const pad = n => String(n).padStart(2, '0');
    return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()}`;
  }
}
window.getDataBrasilia = getDataBrasilia;

const DEFAULTS = {
  docNumber: "79/2026",
  clientName: "André Costa",
  clientBusiness: "Controle Adestramento, Educação Canina, Hospedagem & Recreação",
  clientCity: "Pelotas / RS e região",
  clientPhone: "(53) 9 9999-0000",
  validityDays: 15,
  paymentTerms: "Setup pago no início do projeto · mensalidade do dia 1º · PIX ou cartão"
};

const DEFAULT_SERVICES = [
{
  id: 1,
  title: "Implementação do Projeto · Setup Inicial",
  tag: "Pagamento único · Matrícula",
  bullets: [
  "Sistemas e construção / configuração das plataformas de execução do trabalho",
  "Padronização da presença digital do seu negócio (Instagram, WhatsApp, Google)",
  "Treinamento inicial dos vendedores para receber e converter os leads",
  "Configuração das plataformas para recebimento dos novos clientes"],

  price: 2500,
  priceMeta: "Pago apenas uma vez, no início",
  priceLabel: ""
},
{
  id: 2,
  title: "Manutenção, Assessoria & Acompanhamento Mensal",
  tag: "Honorários mensais",
  bullets: [
  "Execução da metodologia de captação de clientes para o seu negócio pet",
  "Foco em aumento de lucro e na criação de uma lista de clientes ativa",
  "Acompanhamento mensal com relatórios de performance e ajustes",
  "Suporte direto da equipe Agência 4 Patas via WhatsApp"],

  price: 1500,
  priceMeta: "Recorrente / mês",
  priceLabel: ""
},
{
  id: 3,
  title: "Recarga na Plataforma de Anúncios Online",
  tag: "Tráfego pago · R$ 50/dia",
  bullets: [
  "Captação de contatos solicitando orçamento direto no WhatsApp",
  "Agendamento de visitas para reunião presencial (canil ou residência do tutor)",
  "Crescimento orgânico e pago do perfil no Instagram",
  "Orçamento de mídia separado da nossa assessoria (vai 100% pra plataforma)"],

  price: 1500,
  priceMeta: "Recorrente / mês · R$ 50/dia",
  priceLabel: ""
}];


function brl(n) {
  if (n === 0) return "R$ 0";
  return n.toLocaleString("pt-BR", { style: "currency", currency: "BRL", minimumFractionDigits: n % 1 === 0 ? 0 : 2 });
}

function BrandGlyph() {
  return (
    <div className="brand-glyph">
      <img src="assets/logo-4patas.png" alt="Agência 4 Patas" />
    </div>);

}

function Page1({ t, services, totals }) {
  const firstName = (t.clientName || '').split(' ')[0] || 'cliente';
  return (
    <div className="page" data-screen-label="01 Capa">
      <div className="cover">
        <div className="cover-top">
          <div className="brand-mark">
            <BrandGlyph />
            <div className="brand-text">
              <div className="sub">Marketing & Vendas · Pet</div>
            </div>
          </div>
          <div className="doc-meta">
            <b>Orçamento Nº {t.docNumber}</b><br />
            {getDataBrasilia()}
          </div>
        </div>

        <div className="hero">
          <div className="eyebrow">Proposta Comercial · Marketing & Vendas</div>
          <h1>
            <span className="for">Para:</span>{' '}
            <span className="name-line">{firstName}.</span>
          </h1>
          <div className="breed">{t.clientBusiness}</div>

          <div className="hero-meta">
            <div className="item">
              <span className="lbl">Responsável</span>
              <span className="val">{t.clientName}</span>
            </div>
            <div className="item">
              <span className="lbl">Município de atuação</span>
              <span className="val">{t.clientCity}</span>
            </div>
            <div className="item">
              <span className="lbl">Contato</span>
              <span className="val">{t.clientPhone}</span>
            </div>
            <div className="item">
              <span className="lbl">Validade</span>
              <span className="val">{t.validityDays} dias</span>
            </div>
          </div>
        </div>

        <div className="welcome">
          <p><b>Olá, {firstName}.</b> Apresento abaixo o plano comercial da <b>Agência 4 Patas</b> para captar clientes qualificados, em momento de orçamento, para os seus serviços na região de Pelotas/RS. O projeto é dividido em <b>setup inicial</b> (pago uma única vez) e <b>recorrência mensal</b> (assessoria + verba de mídia).</p>
          <div className="guarantee">Metodologia 4 Patas · Especialista no Segmento Pet</div>
        </div>

      <div className="services">
        <div className="services-head">
          <div></div>
          <div>Serviço</div>
          <div>Solução</div>
          <div className="price-head">Investimento</div>
        </div>
        {services.map((s, i) =>
        <div className="services-row" key={s.id}>
            <div className="num">{String(i + 1).padStart(2, '0')}</div>
            <div className="service-title">
              {s.title}
              {s.tag && <div><span className="tag">{s.tag}</span></div>}
            </div>
            <div className="solution">
              <ul>
                {s.bullets.map((b, j) => <li key={j}>{b}</li>)}
              </ul>
            </div>
            <div className="price-cell">
              <div className="price">{s.priceLabel || brl(s.price)}</div>
              {s.priceMeta && <div className="price-meta">{s.priceMeta}</div>}
            </div>
          </div>
        )}
      </div>

      <div className="closer">
        <div className="obs">
          <div className="obs-label">Observações</div>
          <p>· O setup (item 01) é pago apenas uma vez. Nos meses seguintes, apenas itens 02 e 03.</p>
          <p>· Fidelidade mínima de <b>90 dias</b> para a maturação das campanhas de tráfego pago.</p>
          <p>· A verba do item 03 (R$ 1.500/mês) vai 100% para a plataforma de anúncios.</p>
          <p>· Pagamento: {t.paymentTerms}.</p>
        </div>
        <div className="totals">
          <div className="row featured">
            <div className="lbl">Investimento inicial</div>
            <div className="amt">{brl(totals.setup)}</div>
          </div>
          <div className="row">
            <div className="lbl">Investimento mensal</div>
            <div className="amt">{brl(totals.monthly)}</div>
          </div>
          <div className="note">Inicial = setup + 1º mês ({brl(totals.setupOnly)} + {brl(totals.monthly)}). A partir do 2º mês: {brl(totals.monthly)}/mês.</div>
        </div>
      </div>

      <div className="footer">
        <div className="tagline">"Assessoria de marketing e vendas especializada no segmento pet."</div>
        <div className="sign">
            <b>Thiago Carvalho</b>
            CEO · Agência 4 Patas<br />
            agencia4patas.com.br · (61) 99991-2170
        </div>
      </div>
      </div>
    </div>);

}

function Page2({ t }) {
  return (
    <div className="page page-2" data-screen-label="02 Metodologia">
      <div className="cover">
        <div className="cover-top">
          <div className="brand-mark">
            <BrandGlyph />
            <div className="brand-text">
              <div className="sub">Metodologia · Pelotas/RS</div>
            </div>
          </div>
          <div className="doc-meta">
            <b>Orçamento Nº {t.docNumber}</b><br />
            Página 02 · Metodologia & Termos
          </div>
        </div>

        <div style={{ marginTop: 22 }}>
          <div className="section-eyebrow">Como o trabalho acontece</div>
          <div className="section-title">As 3 fases do <em>método 4 Patas</em></div>

          <div className="phase-grid">
            <div className="phase">
              <div className="ph-num">01</div>
              <div className="ph-name">Implementação</div>
              <div className="ph-desc">Setup das plataformas de anúncio e atendimento, padronização da presença digital, treinamento da equipe de vendas e configuração para receber novos clientes.</div>
            </div>
            <div className="phase">
              <div className="ph-num">02</div>
              <div className="ph-name">Execução</div>
              <div className="ph-desc">Aplicação da metodologia de captação: campanhas de tráfego pago focadas em pedido de orçamento no WhatsApp, agendamento de visitas e construção da lista de clientes.</div>
            </div>
            <div className="phase">
              <div className="ph-num">03</div>
              <div className="ph-name">Maturação & Escala</div>
              <div className="ph-desc">Otimização contínua dos anúncios, escala do orçamento de mídia, análise mensal de performance e ajustes finos no funil de conversão.</div>
            </div>
          </div>
        </div>

        <div className="deliverables">
          <div>
            <h4>O que está incluído</h4>
            <ul className="checklist">
              <li>Configuração completa das plataformas de anúncio (Meta Ads, Google)</li>
              <li>Criação de site institucional para apresentação do negócio</li>
              <li>Padronização da identidade digital: Instagram, WhatsApp Business, Google Perfil</li>
              <li>Criação e gestão de campanhas focadas em pedido de orçamento</li>
              <li>Relatório mensal de performance com indicadores de captação</li>
              <li>Treinamento da equipe de vendas para conversão dos leads recebidos</li>
              <li>Suporte WhatsApp direto com o time da Agência 4 Patas</li>
            </ul>
          </div>
          <div>
            <h4>O que <em>não</em> está incluído</h4>
            <ul className="checklist warn">
              <li>E-commerce ou catálogo virtual de produtos</li>
              <li>Produção de vídeos profissionais: filmagens e edição em estúdio</li>
              <li>Gestão de redes fora do pacote (TikTok, YouTube, LinkedIn)</li>
              <li>Atendimento e fechamento direto com o cliente final (fica com sua equipe)</li>
              <li>Alimentação semanal ou diária do Instagram/Facebook (pacote de gestão de redes sociais a ser fechado à parte — não faz parte desta proposta)</li>
            </ul>
          </div>
        </div>

        <div className="terms">
          <div>
            <h5>Condições comerciais</h5>
            <ul>
              <li>Validade desta proposta: {t.validityDays} dias.</li>
              <li>Fidelidade mínima de 90 dias para a fase de maturação das campanhas.</li>
              <li>{t.paymentTerms}.</li>
              <li>Reajuste anual de mensalidade pelo IPCA acumulado.</li>
              <li>Cancelamento com 30 dias de aviso prévio após o período de fidelidade.</li>
            </ul>
          </div>
          <div>
            <h5>Compromisso 4 Patas</h5>
            <p>Trabalhamos focados em performance: captação de contatos qualificados, em momento de orçamento, prontos para agendar uma visita. Os 90 dias de fidelidade são o tempo mínimo para a maturação saudável das campanhas. Abaixo disso, os números ainda não refletem o potencial real do projeto. Você terá acesso direto ao time da agência durante todo o programa.</p>
          </div>
        </div>

        <div className="signature">
          <div>
            <div className="sig-line">
              <b>{t.clientName}</b>
              Contratante
            </div>
          </div>
          <div>
            <div className="sig-line">
              <b>Thiago Carvalho</b>
              CEO · Agência 4 Patas LTDA · CNPJ 29.416.621/0001-32
            </div>
          </div>
        </div>

        <div className="footer" style={{ marginTop: 'auto' }}>
          <div className="tagline">"Assessoria de marketing e vendas especializada no segmento pet."</div>
          <div className="sign">
            <b>agencia4patas.com.br</b>
            (61) 99991-2170 · Thiago Carvalho · CEO<br />
            Atendimento de seg. a sex.
          </div>
        </div>
      </div>
    </div>);

}

function App() {
  const [t, setTweak, resetData] = useClientForm(DEFAULTS);
  const [services, updateService, resetServices] = useServicePrices(DEFAULT_SERVICES);

  const totals = useMemo(() => {
    const setupOnly = services[0]?.price || 0;
    const monthly = (services[1]?.price || 0) + (services[2]?.price || 0);
    return { setup: setupOnly + monthly, monthly, setupOnly };
  }, [services]);

  return (
    <>
      <div className="stage">
        <div>
          <Page1 t={t} services={services} totals={totals} />
          <Page2 t={t} />
        </div>
      </div>

      <ClientForm
        data={t}
        updateField={setTweak}
        resetData={resetData}
        services={services}
        updateService={updateService}
        resetServices={resetServices} />
      
    </>);

}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);