// RespondeJá — landing page
// All sections export to window for use in index.html

const WA_LINK = "https://wa.me/351935333534?text=Ol%C3%A1!%20Quero%20a%20an%C3%A1lise%20gratuita%20do%20meu%20restaurante.";
const STRIPE_LINK = "https://buy.stripe.com/8x228qcLmgi7eLh8UkfUQ01";

// ─────────────────────────────────────────────────────────────
// NAV
// ─────────────────────────────────────────────────────────────
function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="logo">
          <span className="logo-r">Responde</span><span className="logo-j">Já</span>
        </a>
        <div className="nav-links">
          <a href="#como-funciona">Como funciona</a>
          <a href="#exemplos">Exemplos</a>
          <a href="#calculadora">Calculadora</a>
          <a href="#preco">Preço</a>
          <a href="#faq">FAQ</a>
        </div>
        <a className="nav-cta" href={WA_LINK} target="_blank" rel="noopener">
          <WAIcon /> Análise gratuita
        </a>
      </div>
    </nav>);

}

function Hero({ heroVariant }) {
  const headline = heroVariant === "perda" ?
  <>
      <span className="num">24.000€</span>
      <span className="hl-line">É o que perdes por ano</span>
      <span className="hl-line">por ignorar as tuas</span>
      <span className="hl-em">avaliações no Google.</span>
    </> :

  <>
      <span className="hl-line">Restaurantes que respondem</span>
      <span className="hl-line">às críticas faturam</span>
      <span className="hl-em">16,4% mais.</span>
    </>;


  return (
    <header id="top" className="hero">
      <div className="hero-grid" aria-hidden="true"></div>
      <div className="container hero-inner">
        <div className="pill">PARA RESTAURANTES EM PORTUGAL</div>
        <h1 className="headline">{headline}</h1>
        <div className="hero-divider" />
        <div className="hero-stat">
          <p>
            Baseado no estudo SOCi Research: negócios que respondem a todas as avaliações
            faturam <b>16,4% mais</b>. Num restaurante português com faturação média de 150K€
            <span className="arrow"> →</span> <b className="gold">24.600€/ano</b>.
          </p>
        </div>
        <div className="hero-cta-block">
          <p className="hero-kicker">Descobre quanto estás a perder.</p>
          <p className="hero-sub">Análise gratuita do teu perfil em 24h. Sem compromisso.</p>
          <a className="btn-primary" href={WA_LINK} target="_blank" rel="noopener">
            <WAIcon /> Falar no WhatsApp
            <span className="btn-arrow">→</span>
          </a>
          <p className="hero-micro">
            <span className="dot" /> Resposta em minutos · Sem cartão · Análise feita por humano
          </p>
        </div>
      </div>
    </header>);

}

// ─────────────────────────────────────────────────────────────
// PROBLEMA
// ─────────────────────────────────────────────────────────────
function Problem() {
  return (
    <section className="section problem">
      <div className="container">
        <p className="eyebrow">O problema</p>
        <h2 className="h2">
          Cada crítica sem resposta é um cliente que <em>não vai</em> aparecer.
        </h2>
        <div className="problem-grid">
          <div className="prob-card">
            <div className="prob-num">88%</div>
            <p>dos consumidores lê reviews online antes de escolher um restaurante.</p>
            <span className="prob-src">BrightLocal, 2024</span>
          </div>
          <div className="prob-card">
            <div className="prob-num">1,7×</div>
            <p>mais reservas em restaurantes que respondem a todas as avaliações.</p>
            <span className="prob-src">SOCi Research</span>
          </div>
          <div className="prob-card">
            <div className="prob-num">8 dias</div>
            <p>é o tempo médio que uma crítica negativa fica sem resposta — e a circular.</p>
            <span className="prob-src">Observação interna</span>
          </div>
        </div>
        <div className="prob-pull">
          <p>
            Não é só sobre <em>responder</em>. É sobre o algoritmo do Google ver atividade,
            o cliente sentir-se ouvido, e a tua estrela média subir.
            <span className="and">E tu não tens tempo para isso entre serviços.</span>
          </p>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────
// COMO FUNCIONA
// ─────────────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
  {
    n: "01",
    t: "Ligamos ao teu perfil Google",
    d: "5 minutos. Damos-te um link, autorizas, e está. Não tocamos em mais nada da tua conta."
  },
  {
    n: "02",
    t: "Aprendemos o teu tom",
    d: "Treinamos a IA para falar com teus clientes de forma personalizada. A IA fica afinada à tua casa."
  },
  {
    n: "03",
    t: "A IA responde — com regras claras",
    d: "Avaliações de 3 a 5 estrelas: respondidas automaticamente em minutos. De 1 ou 2 estrelas: recebes um email com a sugestão de resposta (configurável de acordo com a tua preferência)."
  },
  {
    n: "04",
    t: "Acompanhas se quiseres",
    d: "Podes receber notificações para cada avaliação com a respectiva resposta, se quiseres. "
  }];


  return (
    <section id="como-funciona" className="section how">
      <div className="container">
        <p className="eyebrow">Como funciona</p>
        <h2 className="h2">Configuras em 5 minutos. Depois é só ver acontecer.</h2>
        <ol className="how-list">
          {steps.map((s) =>
          <li key={s.n} className="how-item">
              <div className="how-n">{s.n}</div>
              <div className="how-content">
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            </li>
          )}
        </ol>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────
// CONTROLO — IA com supervisão
// ─────────────────────────────────────────────────────────────
function Control() {
  return (
    <section className="section control">
      <div className="container control-inner">
        <div className="control-text">
          <p className="eyebrow gold">A questão de toda a gente</p>
          <h2 className="h2">
            <em>"E se a IA escrever uma parvoíce em meu nome?"</em>
          </h2>
          <p className="lead">
            Justo. Por isso a regra é simples: <b>quanto mais sensível for a avaliação,
            mais perto a tens.</b>
          </p>
          <div className="control-rules">
            <div className="rule rule-auto">
              <div className="rule-stars">★★★★★ · ★★★★ · ★★★</div>
              <div className="rule-action">3-5 estrelas: Auto-publica em minutos</div>
              <p>Avaliações positivas e neutras. Tom afinado à tua casa, sem repetições.</p>
            </div>
            <div className="rule rule-manual">
              <div className="rule-stars">★★ · ★</div>
              <div className="rule-action">1-2 estrelas: Email com sugestão para aprovares</div>
              <p>Críticas negativas exigem cuidado. Nossa IA já é treinada para lidar com elas de forma sensível, mas se preferires, recebes uma proposta de resposta no teu email e acompanhamento personalizado via WhatsApp.</p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────
// EXEMPLOS — antes/depois
// ─────────────────────────────────────────────────────────────
function Examples() {
  const items = [
  {
    stars: 5,
    author: "Mariana C.",
    review: "Fomos jantar no sábado e o bacalhau à Brás estava espetacular. A Joana atendeu-nos com um sorriso que faz toda a diferença. Voltamos de certeza!",
    reply: "Olá Mariana! 🙏 Fico tão contente em saber que gostaram do bacalhau à Brás — é uma das receitas que mais nos enche de orgulho. Vou já dar os parabéns à Joana, que vai adorar o seu carinho. Esperamos por vocês em breve! — Equipa Tasca da Avó",
    mode: "auto"
  },
  {
    stars: 2,
    author: "Pedro M.",
    review: "Comida boa mas esperámos quase 1h pelo prato principal num sábado às 13h. Reservámos antecipadamente e ninguém nos avisou que ia demorar.",
    reply: "Pedro, lamentamos sinceramente. Tem toda a razão — uma reserva existe precisamente para isso não acontecer, e esta semana tivemos um problema de coordenação na cozinha que já corrigimos. Gostaríamos de o convidar para voltar e oferecer-lhe a entrada. Mande-nos uma mensagem para o número que está na nossa página? Obrigado por nos avisar. — Tiago, Tasca da Avó",
    mode: "approved"
  },
  {
    stars: 4,
    author: "Sofia R.",
    review: "Ambiente acolhedor, vinho da casa surpreendente. Só achei a sobremesa um bocadinho doce demais para o meu gosto, mas é detalhe.",
    reply: "Sofia, obrigado pelas palavras! Fica anotada a nota sobre a sobremesa — vamos pensar numa versão menos doce para quem prefere algo mais equilibrado. O nosso vinho da casa é mesmo a nossa alegria. Volte sempre! — Tasca da Avó",
    mode: "auto"
  }];


  return (
    <section id="exemplos" className="section examples">
      <div className="container">
        <p className="eyebrow">Exemplos reais</p>
        <h2 className="h2">Não é IA genérica. <em>É o teu tom.</em></h2>
        <p className="lead">Três exemplos de respostas geradas para um restaurante familiar em Lisboa. Repara no nome do prato, no nome da empregada, no convite específico para voltar, e na pausa para resposta humana quando o assunto pede.


        </p>
        <div className="examples-stack">
          {items.map((it, i) =>
          <ExampleCard key={i} {...it} />
          )}
        </div>
        <p className="examples-foot">
          Estes exemplos mostram o output real do RespondeJá num cenário de teste. Os nomes do estabelecimento são fictícios.
        </p>
      </div>
    </section>);

}

function ExampleCard({ stars, author, review, reply, mode }) {
  return (
    <div className="ex-card">
      <div className="ex-review">
        <div className="ex-head">
          <div className="ex-avatar">{author.charAt(0)}</div>
          <div>
            <div className="ex-author">{author}</div>
            <div className="ex-stars">
              {"★".repeat(stars)}<span className="ex-stars-off">{"★".repeat(5 - stars)}</span>
            </div>
          </div>
          <div className="ex-google">Google</div>
        </div>
        <p className="ex-text">{review}</p>
      </div>
      <div className="ex-arrow">↓</div>
      <div className={`ex-reply ${mode === "approved" ? "is-approved" : "is-auto"}`}>
        <div className="ex-reply-head">
          <div className="ex-reply-tag">
            {mode === "approved" ?
            <><span className="badge-dot manual" /> Aprovado por ti · email ou WhatsApp</> :

            <><span className="badge-dot auto" /> Publicado automaticamente</>
            }
          </div>
          <div className="ex-reply-time">
            {mode === "approved" ? "respondido em 2h13" : "respondido em 4 min"}
          </div>
        </div>
        <p className="ex-text">{reply}</p>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────
// CALCULADORA — quanto perdes
// ─────────────────────────────────────────────────────────────
function Calc() {
  const [revenue, setRevenue] = React.useState(150);
  const lost = Math.round(revenue * 1000 * 0.164);
  const fmt = (n) => new Intl.NumberFormat("pt-PT").format(n);

  return (
    <section id="calculadora" className="section calc">
      <div className="container">
        <p className="eyebrow gold">Faz as contas</p>
        <h2 className="h2">Quanto está o teu restaurante a deixar na mesa?</h2>
        <div className="calc-card">
          <label className="calc-label">
            Faturação anual aproximada do teu restaurante
            <div className="calc-input-wrap">
              <input
                type="range"
                min={50}
                max={800}
                step={10}
                value={revenue}
                onChange={(e) => setRevenue(Number(e.target.value))}
                className="calc-slider" />
              
              <div className="calc-value">{fmt(revenue)}K€<span>/ano</span></div>
            </div>
          </label>
          <div className="calc-result">
            <div className="calc-label-r">Potencial de receita perdida ao não responder</div>
            <div className="calc-out">{fmt(lost)}€<span>/ano</span></div>
            <p className="calc-note">
              Cálculo baseado no diferencial de 16,4% identificado pelo SOCi Research entre negócios que respondem
              a todas as avaliações e os que não respondem.
            </p>
          </div>
          <a className="btn-primary calc-cta" href={WA_LINK} target="_blank" rel="noopener">
            <WAIcon /> Quero recuperar este valor
          </a>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────
// PROVA / GARANTIAS
// ─────────────────────────────────────────────────────────────
function Trust() {
  return (
    <section className="section trust">
      <div className="container">
        <p className="eyebrow">A nossa promessa</p>
        <h2 className="h2">Estamos a começar, e por isso somos rigorosos.</h2>
        <div className="trust-honest">
          <p>Lançámos o RespondeJá em 2026. Em vez de inventar testemunhos, fazemos algo melhor:


          </p>
        </div>
        <div className="trust-grid">
          <div className="trust-card">
            <div className="trust-icon">①</div>
            <h3>Análise gratuita por humano</h3>
            <p>Eu próprio analiso o teu perfil Google, identifico oportunidades e envio-te um plano em 24h sem custos e sem compromisso. Mesmo que não venhas a contratar.</p>
          </div>
          <div className="trust-card">
            <div className="trust-icon">②</div>
            <h3>Primeiro mês a meio preço</h3>
            <p>Para os primeiros 20 restaurantes parceiros: 9€ no primeiro mês. Em troca, peço-te feedback honesto sobre o sistema.</p>
          </div>
          <div className="trust-card">
            <div className="trust-icon">③</div>
            <h3>Cancelas com uma mensagem</h3>
            <p>Sem fidelização, sem letra pequena, sem ligar para ninguém. Mandas um WhatsApp ou email, paramos no próprio dia.</p>
          </div>
          <div className="trust-card">
            <div className="trust-icon">④</div>
            <h3>Os teus dados são teus</h3>
            <p>Conformidade RGPD. Cancelas e apagamos tudo. Nunca usamos as tuas avaliações para treinar modelos públicos.</p>
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────
// PRICING
// ─────────────────────────────────────────────────────────────
function Pricing() {
  return (
    <section id="preco" className="section pricing">
      <div className="container">
        <p className="eyebrow">Preço</p>
        <h2 className="h2">Um plano. Sem surpresas.</h2>
        <div className="price-card">
          <div className="price-tag">
            <div className="price-currency">€</div>
            <div className="price-num">19</div>
            <div className="price-per">/mês<br /><span>+IVA</span></div>
          </div>
          <ul className="price-list">
            <li>Respostas automáticas a avaliações de 3 a 5 estrelas</li>
            <li>Sugestões por email para 1 e 2 estrelas (aprovas tu)</li>
            <li>Tom da casa afinado por ti, não "IA genérica"</li>
            <li>Relatório mensal por email</li>
            <li>Integração Google Business Profile</li>
            <li>Suporte por WhatsApp (resposta no próprio dia)</li>
          </ul>
          <div className="price-ctas">
            <a className="btn-primary" href={WA_LINK} target="_blank" rel="noopener">
              <WAIcon /> Pedir análise gratuita
            </a>
            <a className="btn-ghost" href={STRIPE_LINK} target="_blank" rel="noopener">
              Já me decidi → assinar
            </a>
          </div>
          <div className="price-mini">
            <span>✓ Sem fidelização</span>
            <span>✓ Cancelas em 1 clique</span>
            <span>✓ 7 dias para experimentar e desistir</span>
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────
// FAQ
// ─────────────────────────────────────────────────────────────
function FAQ() {
  const items = [
  {
    q: "A IA vai escrever em meu nome sem eu ver?",
    a: "Para avaliações de 3 a 5 estrelas, sim — depois de tu validares o tom inicial. Para 1 ou 2 estrelas, nunca: enviamos sempre um email com a sugestão e tu decides. Podes pausar tudo a qualquer momento."
  },
  {
    q: "E se a resposta da IA não soar a mim?",
    a: "Na configuração inicial respondes a 5 perguntas curtas (estilo, tratamento por 'tu' ou 'você', expressões que costumas usar). Podes editar exemplos quando quiseres e a IA aprende. Se mesmo assim não soar bem, devolvemos o dinheiro do mês."
  },
  {
    q: "Funciona com TripAdvisor, TheFork ou Zomato?",
    a: "Por agora respondemos apenas a avaliações do Google — é onde está 80% do tráfego de descoberta de restaurantes em Portugal. Outras plataformas estão no roadmap."
  },
  {
    q: "Preciso de dar acesso à minha conta Google?",
    a: "Sim, mas é uma autorização limitada com acessos restritos ao perfil de negócios. Não tocamos em emails, calendário, ficheiros ou anúncios."
  },
  {
    q: "Posso cancelar quando quiser?",
    a: "Sim. Sem fidelização, sem taxas. Mandas-nos um WhatsApp ou email e paramos no próprio dia. Os teus dados são eliminados em até 30 dias — ou imediatamente, se pedires."
  },
  {
    q: "Quem está por trás disto?",
    a: "Sou o Renato, fundador. Trago comigo 20 anos de experiência em projetos e operações para empresas de todos os tamanhos, desde negócios individuais a organizações globais. Trabalho diretamente com cada restaurante nos primeiros meses. Falas comigo no WhatsApp, sem chatbots."
  }];

  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="section faq">
      <div className="container faq-inner">
        <div>
          <p className="eyebrow">FAQ</p>
          <h2 className="h2">Perguntas honestas, respostas honestas.</h2>
          <p className="lead">
            Tudo o que ainda não te disse. Se ficar alguma de fora, manda mensagem.
          </p>
          <a className="btn-primary faq-cta" href={WA_LINK} target="_blank" rel="noopener">
            <WAIcon /> Tirar uma dúvida
          </a>
        </div>
        <ul className="faq-list">
          {items.map((it, i) =>
          <li key={i} className={open === i ? "is-open" : ""}>
              <button onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-toggle">{open === i ? "−" : "+"}</span>
              </button>
              {open === i && <p>{it.a}</p>}
            </li>
          )}
        </ul>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────
// FINAL CTA
// ─────────────────────────────────────────────────────────────
function FinalCta() {
  return (
    <section className="section final">
      <div className="container final-inner">
        <h2 className="final-h">
          O teu restaurante <em>já</em> tem avaliações.
          <span className="final-em">A pergunta é: estão a trabalhar para ti?</span>
        </h2>
        <a className="btn-primary btn-xl" href={WA_LINK} target="_blank" rel="noopener">
          <WAIcon /> Pedir análise gratuita
          <span className="btn-arrow">→</span>
        </a>
        <p className="final-micro">Resposta em minutos · Análise em 24h · Sem compromisso</p>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────
// FOOTER
// ─────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <div className="footer-brand">
          <div className="logo"><span className="logo-r">Responde</span><span className="logo-j">Já</span></div>
          <p>Respostas a avaliações Google para restaurantes portugueses.</p>
          <p className="footer-company">
            Ridgen Unipessoal LDA<br />
            Rua José Maria de Carvalho 6<br />
            3080-397 Figueira da Foz
          </p>
        </div>
        <div className="footer-cols">
          <div>
            <h4>Produto</h4>
            <a href="#como-funciona">Como funciona</a>
            <a href="#exemplos">Exemplos</a>
            <a href="#preco">Preço</a>
            <a href="#faq">FAQ</a>
          </div>
          <div>
            <h4>Contacto</h4>
            <a href="mailto:info@respondeja.pt">info@respondeja.pt</a>
            <a href={WA_LINK} target="_blank" rel="noopener">WhatsApp</a>
            <a href="tel:+351935333534">+351 935 333 534</a>
          </div>
          <div>
            <h4>Legal</h4>
            <a href="termos.html">Termos e Condições</a>
            <a href="privacidade.html">Política de Privacidade</a>
          </div>
        </div>
      </div>
      <div className="container footer-bottom">
        <span>© 2026 Ridgen Unipessoal LDA · Figueira da Foz, Portugal</span>
        <span>respondeja.pt</span>
      </div>
    </footer>);

}

// ─────────────────────────────────────────────────────────────
// FLOATING WHATSAPP
// ─────────────────────────────────────────────────────────────
function FloatingWA() {
  return (
    <a className="float-wa" href={WA_LINK} target="_blank" rel="noopener" aria-label="WhatsApp">
      <WAIcon size={26} />
      <span className="float-wa-pulse" />
    </a>);

}

// ─────────────────────────────────────────────────────────────
// ICONS
// ─────────────────────────────────────────────────────────────
function WAIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.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.077 4.487.71.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347zM12.05 21.785h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884zm8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892a11.86 11.86 0 001.587 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
    </svg>);

}

// ─────────────────────────────────────────────────────────────
// APP
// ─────────────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "perda",
  "showCalc": true,
  "primaryGreen": "#0e3a26",
  "accentGold": "#d4a55a"
} /*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--green", t.primaryGreen);
    r.style.setProperty("--gold", t.accentGold);
  }, [t.primaryGreen, t.accentGold]);

  return (
    <>
      <Nav />
      <Hero heroVariant={t.heroVariant} />
      <Problem />
      <HowItWorks />
      <Control />
      <Examples />
      {t.showCalc && <Calc />}
      <Trust />
      <Pricing />
      <FAQ />
      <FinalCta />
      <Footer />
      <FloatingWA />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio
          label="Headline"
          value={t.heroVariant}
          options={[{ value: "perda", label: "24K€ perdidos" }, { value: "ganho", label: "16,4% mais" }]}
          onChange={(v) => setTweak("heroVariant", v)} />
        
        <TweakSection label="Secções" />
        <TweakToggle
          label="Calculadora"
          value={t.showCalc}
          onChange={(v) => setTweak("showCalc", v)} />
        
        <TweakSection label="Cores" />
        <TweakColor label="Verde principal" value={t.primaryGreen}
        onChange={(v) => setTweak("primaryGreen", v)} />
        <TweakColor label="Dourado" value={t.accentGold}
        onChange={(v) => setTweak("accentGold", v)} />
      </TweaksPanel>
    </>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);