/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;

/* ---------------- Data ---------------- */
const FEATURES = [
  {
    num: "01",
    title: "Contabilidade,",
    italic: "Fiscalidade & Salários",
    desc:
      "Toda a vida contábil, fiscal e salarial da sua empresa num único serviço integrado. Entregas a horas, relatórios claros, sem jargão.",
    points: ["Lançamentos e balancetes", "IRS, IRC e IVA", "Recibos de vencimento e SS"],
  },
  {
    num: "02",
    title: "Consultadoria",
    italic: "Económico-Financeira",
    desc:
      "Acompanhamento próximo para decidir com dados. Análise de margens, orçamentos, tesouraria — uma conversa por mês que muda o ano.",
    points: ["Análise de KPIs", "Orçamento e cash-flow", "Apoio à decisão"],
  },
  {
    num: "03",
    title: "Projetos",
    italic: "& Candidaturas",
    desc:
      "Identificamos os apoios e fundos a que a sua empresa pode aceder e tratamos de tudo — do dossier de candidatura ao reporting final.",
    points: ["Portugal 2030 e PRR", "IAPMEI e COMPETE", "Reporting e auditoria"],
  },
];

const MORE_SERVICES = [
  "Constituição de empresas",
  "Recibos verdes",
  "Apoio a startups",
  "Reestruturações",
];

const STATS = [
  { num: "37", suffix: "+", label: "Anos a acompanhar empresas portuguesas" },
  { num: "180", suffix: "+", label: "Clientes ativos na Maia e Grande Porto" },
];

/* ---------------- Hooks ---------------- */
function useScrollSpy(ids, offset = 120) {
  const [active, setActive] = useState(ids[0]);
  useEffect(() => {
    function onScroll() {
      const y = window.scrollY + offset;
      let current = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) current = id;
      }
      setActive(current);
    }
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [ids.join(","), offset]);
  return active;
}

function useNavScrolled() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 12);
    f();
    window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  return scrolled;
}

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -60px 0px" }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ---------------- Components ---------------- */
function Arrow({ size = 14 }) {
  return (
    <svg className="btn-arrow" width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M1 7H13M13 7L7.5 1.5M13 7L7.5 12.5" stroke="currentColor" strokeWidth="1.2" />
    </svg>
  );
}

function Nav() {
  const active = useScrollSpy(["servicos", "sobre", "contacto"], 140);
  const scrolled = useNavScrolled();
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-inner">
        <a href="#top" className="logo">
          <img src="assets/logo.svg" alt="Américo Brás" className="logo-mark-img" />
          <span className="logo-text">
            <span className="name">Américo Brás</span>
            <span className="sub">Gabinete de Contabilidade · est. 1989</span>
          </span>
        </a>
        <div className="nav-links">
          <a href="#servicos" className={"nav-link" + (active === "servicos" ? " active" : "")}>Serviços</a>
          <a href="#sobre" className={"nav-link" + (active === "sobre" ? " active" : "")}>Sobre nós</a>
          <a href="#contacto" className={"nav-link" + (active === "contacto" ? " active" : "")}>Contacto</a>
        </div>
        <a href="#contacto" className="nav-cta">
          Marcar reunião <Arrow size={12} />
        </a>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <header className="hero" id="top">
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <span className="eyebrow reveal">Maia · Desde 1989</span>
            <h1 className="reveal delay-1">
              Contas em <span className="italic">ordem</span>,
              <br />
              decisões com <span className="underline">tranquilidade</span>.
            </h1>
            <ul className="hero-services reveal delay-2">
              <li>Contabilidade Geral</li>
              <li>Consultadoria Fiscal</li>
              <li>IRS</li>
              <li>IRC</li>
              <li>IVA</li>
              <li>Fiscalidade</li>
              <li>Projetos e Candidaturas</li>
            </ul>
          </div>
          <aside className="hero-aside reveal delay-2">
            <p>
              Um gabinete próximo, na Maia — em frente à Câmara Municipal —
              que cuida da contabilidade da sua empresa como se fosse a nossa.
              Sem surpresas, sem prazos perdidos, sem termos que não percebe.
            </p>
            <div className="hero-actions">
              <a href="#contacto" className="btn btn-primary">
                Falar connosco <Arrow />
              </a>
              <a href="#servicos" className="btn btn-ghost">
                Ver serviços
              </a>
            </div>
          </aside>
        </div>

        <div className="hero-stats reveal delay-3">
          {STATS.map((s, i) => (
            <div className="stat" key={i}>
              <span className="stat-num">
                {s.num}
                {s.suffix && <span className="plus">{s.suffix}</span>}
              </span>
              <span className="stat-label">{s.label}</span>
            </div>
          ))}
        </div>
      </div>
    </header>
  );
}

function Features() {
  return (
    <section className="section" id="servicos" data-screen-label="Servicos">
      <div className="wrap">
        <div className="section-head">
          <span className="section-num reveal">— 01 / Serviços</span>
          <h2 className="reveal delay-1">
            Três pilares,
            <br />
            <span className="italic">um único gabinete.</span>
          </h2>
          <p className="reveal delay-2">
            Tratamos de toda a vida fiscal e contabilística da sua empresa,
            com atenção ao detalhe e proximidade no acompanhamento.
          </p>
        </div>

        <div className="features">
          {FEATURES.map((f, i) => (
            <article
              className={"feature reveal delay-" + Math.min(i + 1, 4)}
              key={f.num}
            >
              <span className="feature-num">{f.num}</span>
              <h3>
                {f.title} <span className="italic">{f.italic}</span>
              </h3>
              <p>{f.desc}</p>
              <ul className="feature-points">
                {f.points.map((p) => (
                  <li key={p}>{p}</li>
                ))}
              </ul>
            </article>
          ))}
        </div>

        <div className="more-services reveal">
          <span className="label">Também tratamos de</span>
          {MORE_SERVICES.map((s) => (
            <span className="chip" key={s}>
              {s}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="section about-bg" id="sobre" data-screen-label="Sobre">
      <div className="wrap">
        <div className="section-head">
          <span className="section-num reveal">— 02 / Sobre nós</span>
          <h2 className="reveal delay-1">
            37 anos a
            <br />
            <span className="italic">contar consigo.</span>
          </h2>
          <p className="reveal delay-2">
            Fundado em 1989 por Américo Brás, o gabinete cresceu sem perder
            aquilo que o trouxe até aqui — proximidade, rigor e uma boa conversa.
          </p>
        </div>

        <div className="about-grid">
          <div className="about-photo reveal">
            <image-slot
              id="founder-photo"
              shape="rect"
              placeholder="Foto do fundador · Américo Brás"
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
            ></image-slot>
            <div className="placeholder" style={{ pointerEvents: "none" }}>
              <div className="placeholder-inner" style={{ display: "none" }}>
                Foto do fundador
                <br />
                Américo Brás
              </div>
            </div>
            <div className="about-caption" style={{ pointerEvents: "none" }}>
              <span>Américo Brás</span>
              <span>Fundador · TOC nº 24.387</span>
            </div>
          </div>

          <div className="about-content">
            <h3 className="reveal">
              Começámos com uma promessa simples:
              <br />
              <span className="italic">tratar dos números, para que possa tratar do negócio.</span>
            </h3>
            <p className="reveal delay-1">
              Abrimos portas em 1989, num pequeno escritório no centro da Maia.
              Hoje, mesmo em frente à Câmara Municipal, acompanhamos mais de
              180 empresas — desde pastelarias de bairro até startups que
              exportam software — com a mesma atenção ao detalhe e a mesma
              porta sempre aberta.
            </p>
            <p className="reveal delay-2">
              Não somos um call center de contabilidade. Quando liga, fala com
              quem conhece os seus livros. Quando recebe um e-mail nosso, foi
              escrito por alguém que sabe o seu nome.
            </p>

            <dl className="about-meta reveal delay-3">
              <div>
                <dt>Sede</dt>
                <dd>Maia</dd>
              </div>
              <div>
                <dt>Desde</dt>
                <dd>1989</dd>
              </div>
            </dl>

            <span className="signature reveal delay-4">Américo Brás</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactForm() {
  const [form, setForm] = useState({ name: "", email: "", phone: "", message: "" });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  function update(k, v) {
    setForm((f) => ({ ...f, [k]: v }));
    if (errors[k]) setErrors((e) => ({ ...e, [k]: null }));
  }

  function validate() {
    const e = {};
    if (!form.name.trim()) e.name = "Indique o seu nome";
    if (!form.email.trim()) e.email = "Indique o e-mail";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "E-mail inválido";
    if (form.phone && !/^[+\d\s()-]{6,}$/.test(form.phone)) e.phone = "Telefone inválido";
    if (!form.message.trim()) e.message = "Conte-nos o que precisa";
    else if (form.message.trim().length < 10) e.message = "Mensagem demasiado curta";
    return e;
  }

  function submit(ev) {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length) return;
    setSubmitting(true);
    setTimeout(() => {
      setSubmitting(false);
      setSent(true);
    }, 700);
  }

  if (sent) {
    return (
      <div className="form-card form-success reveal">
        <h4>
          Recebido. <span className="italic">Obrigado, {form.name.split(" ")[0]}.</span>
        </h4>
        <p>
          Vamos responder ao seu pedido em menos de 48 horas úteis, normalmente
          no próprio dia. Para assuntos urgentes, ligue <strong>229 482 831</strong>.
        </p>
        <button
          className="reset-link"
          onClick={() => {
            setSent(false);
            setForm({ name: "", email: "", phone: "", message: "" });
          }}
        >
          Enviar outra mensagem <Arrow size={11} />
        </button>
      </div>
    );
  }

  return (
    <form className="form-card reveal" onSubmit={submit} noValidate>
      <h4>Envie-nos uma mensagem</h4>
      <p className="form-sub">Resposta em menos de 48 horas úteis.</p>

      <div className="form-grid">
        <div className="field">
          <label htmlFor="name">Nome <span className="req">*</span></label>
          <input
            id="name"
            type="text"
            value={form.name}
            onChange={(e) => update("name", e.target.value)}
            placeholder="O seu nome"
            autoComplete="name"
          />
          <span className="err">{errors.name || ""}</span>
        </div>
        <div className="field">
          <label htmlFor="email">E-mail <span className="req">*</span></label>
          <input
            id="email"
            type="email"
            value={form.email}
            onChange={(e) => update("email", e.target.value)}
            placeholder="nome@empresa.pt"
            autoComplete="email"
          />
          <span className="err">{errors.email || ""}</span>
        </div>
        <div className="field full">
          <label htmlFor="phone">Telefone <span style={{color:"var(--ink-mute)"}}>(opcional)</span></label>
          <input
            id="phone"
            type="tel"
            value={form.phone}
            onChange={(e) => update("phone", e.target.value)}
            placeholder="+351 9XX XXX XXX"
            autoComplete="tel"
          />
          <span className="err">{errors.phone || ""}</span>
        </div>
        <div className="field full">
          <label htmlFor="message">Mensagem <span className="req">*</span></label>
          <textarea
            id="message"
            value={form.message}
            onChange={(e) => update("message", e.target.value)}
            placeholder="Conte-nos brevemente o que precisa — abrir empresa, mudar de contabilista, dúvida fiscal…"
            rows="4"
          />
          <span className="err">{errors.message || ""}</span>
        </div>
      </div>

      <div className="form-actions">
        <span className="form-note">
          Ao enviar, concorda com a nossa política de privacidade. Não partilhamos os seus dados.
        </span>
        <button type="submit" className="btn btn-primary" disabled={submitting}>
          {submitting ? "A enviar…" : "Enviar mensagem"} <Arrow />
        </button>
      </div>
    </form>
  );
}

function Contact() {
  return (
    <section className="section" id="contacto" data-screen-label="Contacto">
      <div className="wrap">
        <div className="section-head">
          <span className="section-num reveal">— 03 / Contacto</span>
          <h2 className="reveal delay-1">
            Vamos
            <br />
            <span className="italic">conhecer-nos.</span>
          </h2>
          <p className="reveal delay-2">
            Café no escritório, chamada de 20 minutos ou apenas uma mensagem
            rápida — escolha como prefere começar.
          </p>
        </div>

        <div className="contact-grid">
          <div className="contact-info">
            <h3 className="reveal">
              Estamos a um
              <br />
              <span className="italic">telefonema de distância.</span>
            </h3>
            <p className="lead reveal delay-1">
              A primeira reunião é sem compromisso. Levamos o tempo que for
              preciso para perceber o seu negócio e propor um plano claro.
            </p>

            <dl className="contact-list reveal delay-2">
              <div className="contact-item">
                <dt>Telefone</dt>
                <dd>
                  <div className="phone-line">
                    <span className="phone-num">229 482 831</span>
                    <span className="phone-note">Chamada para a rede fixa nacional</span>
                  </div>
                  <div className="phone-line">
                    <span className="phone-num">912 181 453</span>
                    <span className="phone-note">Chamada para a rede móvel nacional</span>
                  </div>
                  <span className="small">Seg–Sex · 09h00–18h00</span>
                </dd>
              </div>
              <div className="contact-item">
                <dt>E-mail</dt>
                <dd>
                  contabilidade@americobras.pt
                  <span className="small">Resposta em menos de 48h úteis</span>
                </dd>
              </div>
              <div className="contact-item">
                <dt>Escritório</dt>
                <dd>
                  Praça Dr. José Vieira de Carvalho, 85 — 1º Esq.
                  <span className="small">4470-220 Maia · em frente à Câmara Municipal</span>
                </dd>
              </div>
            </dl>
          </div>

          <ContactForm />
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <a href="#top" className="logo">
              <img src="assets/logo.svg" alt="Américo Brás" className="logo-mark-img" />
              <span className="logo-text">
                <span className="name">Américo Brás</span>
                <span className="sub">Gabinete de Contabilidade</span>
              </span>
            </a>
            <p className="footer-tag">
              Contas em ordem,
              <br />
              <span className="italic">decisões com tranquilidade.</span>
            </p>
          </div>
          <div className="footer-col">
            <h5>Serviços</h5>
            <ul>
              <li><a href="#servicos">Contabilidade e Fiscalidade</a></li>
              <li><a href="#servicos">Salários e RH</a></li>
              <li><a href="#servicos">Consultadoria</a></li>
              <li><a href="#servicos">Projetos e Candidaturas</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Gabinete</h5>
            <ul>
              <li><a href="#sobre">Sobre nós</a></li>
              <li><a href="#sobre">Equipa</a></li>
              <li><a href="#contacto">Contacto</a></li>
              <li><a href="#contacto">Marcar reunião</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Contacto</h5>
            <ul>
              <li>
                <a href="tel:+351229482831">229 482 831</a>
                <span className="footer-note">Rede fixa nacional</span>
              </li>
              <li>
                <a href="tel:+351912181453">912 181 453</a>
                <span className="footer-note">Rede móvel nacional</span>
              </li>
              <li><a href="mailto:contabilidade@americobras.pt">contabilidade@americobras.pt</a></li>
              <li>Praça Dr. José Vieira de Carvalho, 85 — 1º Esq.</li>
              <li>4470-220 Maia</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 1989–2026 Américo Brás · NIF 503 XXX XXX</span>
          <a
            href="https://www.livroreclamacoes.pt/Inicio/"
            target="_blank"
            rel="noopener noreferrer"
            className="livro-badge"
            aria-label="Livro de Reclamações Eletrónico"
          >
            <img src="assets/livro-reclamacoes.png" alt="Livro de Reclamações" />
          </a>
          <span>
            Desenvolvido por{" "}
            <a href="https://miguelwehdorn.com" target="_blank" rel="noopener noreferrer" className="credit-link">
              Miguel Wehdorn
            </a>
          </span>
        </div>
      </div>
    </footer>
  );
}

function App() {
  useReveal();
  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Features />
        <About />
        <Contact />
      </main>
      <Footer />
    </>
  );
}

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