const NS = window.CLEANEPELDesignSystem_536069 || {};

const NAV_ITEMS = [
  {key: 'sobre', label: 'Sobre', href: '#sobre'},
  {key: 'servicos', label: 'Serviços', href: '#servicos'},
  {key: 'setores', label: 'Setores', href: '#setores'},
  {key: 'contratos', label: 'Contratos', href: '#contratos'},
  {key: 'casos', label: 'Casos de sucesso', href: '#casos'},
  {key: 'blog', label: 'Blog', href: '#blog'},
  {key: 'contacto', label: 'Contacto', href: '#contacto'},
];

const FOOTER_GROUPS = [
  {
    title: 'Empresa',
    links: [
      ['Sobre', '#sobre'],
      ['Casos de sucesso', '#casos'],
      ['Blog', '#blog'],
      ['Contacto', '#contacto'],
    ],
  },
  {
    title: 'Atividade',
    links: [
      ['Serviços', '#servicos'],
      ['Setores de atuação', '#setores'],
      ['Contratos de manutenção', '#contratos'],
      ['Diagnóstico de instalação', '#diagnostico'],
      ['Pedido de visita técnica', '#visita'],
    ],
  },
];

function Icon({name, size = 22, color = 'var(--cyan-600)'}) {
  const containerRef = React.useRef(null);

  React.useEffect(() => {
    if (!containerRef.current || !window.lucide) return;

    const icon = document.createElement('i');
    icon.setAttribute('data-lucide', name);
    containerRef.current.replaceChildren(icon);
    window.lucide.createIcons({
      attrs: {
        width: size,
        height: size,
        stroke: color,
        'stroke-width': 1.5,
      },
      root: containerRef.current,
    });
  }, [name, size, color]);

  return <span ref={containerRef} className="icon" aria-hidden="true" />;
}

function Nav({active}) {
  const {Button} = NS;

  return (
    <header className="site-header">
      <div className="wrap site-header-inner">
        <a className="brand-link" href="#home">
          <img className="brand-logo" src="assets/logo-horizontal.png" alt="CLEANEPEL" />
        </a>
        <nav className="site-nav" aria-label="Navegação principal">
          {NAV_ITEMS.map(({key, label, href}) => (
            <a
              key={key}
              className={`navlink${active === key ? ' active' : ''}`}
              href={href}
            >
              {label}
            </a>
          ))}
        </nav>
        <a className="button-link" href="#diagnostico">
          <Button variant="primary" size="sm">Diagnóstico de instalação</Button>
        </a>
      </div>
    </header>
  );
}

function SectionHead({num, eyebrow, title, lead, dark = false, style}) {
  const darkHeadingStyle = dark ? {color: '#fff'} : undefined;
  const darkLeadStyle = dark ? {color: 'var(--gray-200)'} : undefined;

  return (
    <div className="section-heading" style={style}>
      <div className="eyebrow" style={dark ? {color: 'var(--cyan-500)'} : undefined}>
        {num && <span className="num">{num}</span>}
        {eyebrow}
      </div>
      <h2 className="h1 section-heading-title" style={darkHeadingStyle}>{title}</h2>
      <div className="gold-rule" />
      {lead && <p className="lead section-heading-lead" style={darkLeadStyle}>{lead}</p>}
    </div>
  );
}

function PageHero({crumb, eyebrow, title, lead, children}) {
  return (
    <section className="page-hero">
      <div className="wrap">
        <div className="crumb page-hero-crumb">
          <a href="#home">CLEANEPEL</a> &nbsp;/&nbsp; {crumb}
        </div>
        <div className="eyebrow">{eyebrow}</div>
        <h1 className="h-display page-hero-title">{title}</h1>
        {lead && <p className="lead page-hero-lead">{lead}</p>}
        {children}
      </div>
    </section>
  );
}

function CTABand({
  title,
  lead,
  primary = 'Fazer diagnóstico de instalação',
  secondary,
}) {
  const {Button} = NS;

  return (
    <section className="section section-dark">
      <div className="wrap cta-band">
        <div>
          <h2 className="h1 cta-band-title">{title}</h2>
          <p className="cta-band-lead">{lead}</p>
        </div>
        <div className="cta-band-actions">
          <a className="button-link" href="#diagnostico">
            <Button variant="primary" size="lg">{primary}</Button>
          </a>
          {secondary && (
            <a className="button-link" href="#contacto">
              <Button
                variant="secondary"
                size="lg"
                style={{borderColor: '#fff', color: '#fff'}}
              >
                {secondary}
              </Button>
            </a>
          )}
        </div>
      </div>
    </section>
  );
}

function FooterLinkGroup({title, links}) {
  return (
    <div className="col">
      <h4>{title}</h4>
      <div className="footer-list">
        {links.map(([label, href]) => <a key={href} href={href}>{label}</a>)}
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="cols">
          <div className="col">
            <img
              className="footer-logo"
              src="assets/logo-horizontal-white.png"
              alt="CLEANEPEL"
            />
            <p className="footer-description">
              Higienização, conservação e manutenção profissional de têxteis em ambientes
              corporativos. Contratos recorrentes, execução planeada, qualidade auditável.
            </p>
          </div>
          {FOOTER_GROUPS.map((group) => <FooterLinkGroup key={group.title} {...group} />)}
          <div className="col">
            <h4>Contacto</h4>
            <div className="footer-list footer-contact">
              <span>Cleanepel@gmail.com</span>
              <span>+351 961 885 961</span>
              <span>Norte de Portugal · atuação nacional</span>
            </div>
          </div>
        </div>
        <div className="base">
          <span>© 2026 CLEANEPEL. Todos os direitos reservados.</span>
          <span>Uma empresa MCI Group</span>
        </div>
      </div>
    </footer>
  );
}

function Stat({n, l}) {
  return (
    <div>
      <div className="stat-num">{n}</div>
      <div className="stat-label">{l}</div>
    </div>
  );
}

// Reviews do Google geradas por scripts/fetch-reviews.mjs. Um único pedido partilhado por todas as páginas.
const REVIEW_COUNT_FALLBACK = 370;
let reviewsRequest;
function useReviews() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    reviewsRequest = reviewsRequest || fetch('site/data/reviews.json', {cache: 'no-cache'})
      .then((r) => (r.ok ? r.json() : null))
      .catch(() => null);
    let active = true;
    reviewsRequest.then((d) => { if (active) setData(d); });
    return () => { active = false; };
  }, []);
  return data;
}

// Ex.: "+405". Usa o último valor conhecido enquanto o JSON carrega ou se falhar.
function useReviewCount() {
  const data = useReviews();
  return '+' + ((data && data.userRatingCount) || REVIEW_COUNT_FALLBACK);
}

function FormTextarea({label, rows = 4, ...props}) {
  return (
    <label className="form-textarea">
      {label}
      <textarea rows={rows} {...props} />
    </label>
  );
}

const WEBHOOK_URL = 'https://hook.eu1.make.com/ok04fljbb8o4fk0ym3hdgmwps2v694yk';

// Envia o pedido para o webhook (Make). Erros de rede/CORS/timeout são ignorados:
// o utilizador vê sempre a confirmação, tal como no fluxo da IMPEC CLEAN.
async function submitLead(source, fields) {
  const payload = {
    ...fields,
    phone: (fields.phone || '').replace(/\s/g, ''),
    source,
    submittedAt: new Date().toISOString(),
    userAgent: navigator.userAgent,
    url: location.href,
  };
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), 4000);
  try {
    await fetch(WEBHOOK_URL, {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(payload),
      keepalive: true,
      signal: controller.signal,
    });
  } catch {
    // Provavelmente CORS ou timeout — seguro ignorar para a UX
  } finally {
    clearTimeout(timer);
  }
}

// Hook para formulários nativos: lê os campos via FormData, envia e controla o estado.
function useLeadForm(source, extra) {
  const [status, setStatus] = React.useState('idle');
  const onSubmit = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    const form = e.currentTarget;
    const fields = Object.fromEntries(new FormData(form));
    Object.keys(fields).forEach((k) => { fields[k] = String(fields[k]).trim(); });
    setStatus('sending');
    await submitLead(source, {...fields, ...(typeof extra === 'function' ? extra() : extra)});
    form.reset();
    setStatus('sent');
  };
  return {status, sending: status === 'sending', sent: status === 'sent', onSubmit, reset: () => setStatus('idle')};
}

function PageLayout({Page, active}) {
  return (
    <div>
      <Nav active={active} />
      <main><Page /></main>
      <Footer />
    </div>
  );
}

function getRoot() {
  const root = document.getElementById('root');
  if (!root) throw new Error('Expected a #root element to mount the site.');
  return root;
}

function mountPage(Page, active) {
  ReactDOM.createRoot(getRoot()).render(<PageLayout Page={Page} active={active} />);
}

function registerPage(slug, Page) {
  window.__PAGES = window.__PAGES || {};
  window.__PAGES[slug] = Page;
  window.dispatchEvent(new Event('pageready'));
}

Object.assign(window, {
  NS,
  Icon,
  Nav,
  SectionHead,
  PageHero,
  CTABand,
  Footer,
  Stat,
  useReviews,
  useReviewCount,
  FormTextarea,
  submitLead,
  useLeadForm,
  PageLayout,
  getRoot,
  mountPage,
  registerPage,
});