/* global React, ReactDOM */
/* Imediata Service — shared website components (multi-page) */
const { useState, useEffect, useRef } = React;

/* ============ Lucide icon (imperative, React-safe) ============ */
function Icon({ name, size, stroke, className, style }) {
  const ref = useRef(null);
  useEffect(() => {
    const host = ref.current;
    if (!host || !window.lucide) return;
    host.innerHTML = "";
    const i = document.createElement("i");
    i.setAttribute("data-lucide", name);
    if (stroke) i.setAttribute("stroke-width", stroke);
    host.appendChild(i);
    window.lucide.createIcons();
    const svg = host.querySelector("svg");
    if (svg && size) { svg.style.width = size + "px"; svg.style.height = size + "px"; }
  }, [name, size, stroke]);
  return <span ref={ref} className={className} style={{ display: "inline-flex", ...(style || {}) }}></span>;
}

/* ============ Button — renders <a> when href given ============ */
function Button({ variant = "primary", size, icon, iconRight, children, href, onClick, target }) {
  const cls = ["btn", "btn-" + variant, size ? "btn-" + size : ""].join(" ");
  const inner = (<>{icon && <Icon name={icon} />}{children}{iconRight && <Icon name={iconRight} />}</>);
  if (href) return <a className={cls} href={href} target={target} rel={target ? "noopener" : undefined}>{inner}</a>;
  return <button className={cls} onClick={onClick}>{inner}</button>;
}

/* ============ Badge ============ */
function Badge({ kind = "soft", dot, children }) {
  return (<span className={"badge badge-" + kind}>{dot && <span className="dot" style={{ background: dot }}></span>}{children}</span>);
}

/* ============ Dot rule (logo connector motif) ============ */
function DotRule({ color }) {
  return (<div className="dot-rule" style={color ? { color } : null}><span className="d"></span><span className="line"></span><span className="d"></span></div>);
}

const LOGO_LIGHT = "assets/logo-horizontal-light.png";
const LOGO_DARK = "assets/logo-horizontal-dark.png";
const SYMBOL = "assets/symbol.png";
const SYMBOL_LINES = "assets/symbol-lines.png";

const NAV = [
  { route: "home", label: "Início", href: "index.html" },
  { route: "services", label: "Serviços", href: "servicos.html" },
  { route: "about", label: "Quem somos", href: "quem-somos.html" },
  { route: "work", label: "Trabalhe conosco", href: "trabalhe-conosco.html" },
  { route: "contact", label: "Contato", href: "contato.html" },
];

/* ============ Header (real links + mobile drawer) ============ */
function Header({ route }) {
  const [open, setOpen] = useState(false);
  return (
    <header className="site-header">
      <div className="container inner">
        <a href="index.html" style={{ display: "inline-flex" }}><img className="logo" src={LOGO_LIGHT} alt="Imediata Service" /></a>
        <nav className="nav">
          {NAV.map((n) => <a key={n.route} className={route === n.route ? "active" : ""} href={n.href}>{n.label}</a>)}
        </nav>
        <div className="header-cta">
          <span className="header-phone"><Icon name="phone" />(51) 99219-6846</span>
          <Button variant="primary" size="sm" icon="message-circle" href="contato.html">Solicitar orçamento</Button>
        </div>
        <button className="menu-btn" aria-label="Menu" onClick={() => setOpen(!open)}><Icon name={open ? "x" : "menu"} /></button>
      </div>
      <div className="container">
        <div className={"mnav" + (open ? " open" : "")}>
          {NAV.map((n) => <a key={n.route} href={n.href}>{n.label}</a>)}
        </div>
      </div>
    </header>
  );
}

/* ============ Service card ============ */
function ServiceCard({ icon, title, children, href }) {
  return (
    <div className="scard">
      <div className="ic"><Icon name={icon} /></div>
      <h3>{title}</h3>
      <p>{children}</p>
      {href && <a className="scard-link" href={href}><Icon name="arrow-right" size={15} />Saiba mais</a>}
    </div>
  );
}

/* ============ Feature / differentiator row ============ */
function Feature({ icon, title, children }) {
  return (
    <div className="feature">
      <div className="feature-ic"><Icon name={icon} /></div>
      <div><h4>{title}</h4><p>{children}</p></div>
    </div>
  );
}

/* ============ Trust pillar (qualitative — no fake numbers) ============ */
function Pillar({ icon, title, children }) {
  return (
    <div className="pillar">
      <div className="pt"><Icon name={icon} />{title}</div>
      <p>{children}</p>
    </div>
  );
}

/* ============ Brand-symbol visual placeholder ============ */
function SymbolFrame({ dark, tag, style, height }) {
  return (
    <div className={"symbol-frame" + (dark ? " dark" : "")} style={{ height, ...(style || {}) }}>
      <img src={dark ? SYMBOL_LINES : SYMBOL} alt="" />
      {tag && <span className="tag">{tag}</span>}
    </div>
  );
}

/* ============ Process step ============ */
function Step({ n, title, children }) {
  return (<div className="step"><div className="num">{n}</div><h4>{title}</h4><p>{children}</p></div>);
}

/* ============ FAQ accordion ============ */
function FAQ({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div className="faq">
      {items.map((it, i) => (
        <div key={i} className={"faq-item" + (open === i ? " open" : "")}>
          <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            {it.q}
            <span className="chev"><Icon name="chevron-down" /></span>
          </button>
          <div className="faq-a" style={{ maxHeight: open === i ? 320 : 0 }}>
            <div className="inner">{it.a}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ============ Footer ============ */
function Footer() {
  return (
    <footer className="site-footer">
      <img className="watermark" src={SYMBOL_LINES} alt="" />
      <div className="container">
        <div className="cols">
          <div>
            <img className="logo" src={LOGO_DARK} alt="Imediata Service" />
            <p>Serviços terceirizados com cuidado humano e compromisso com a entrega. Servir é estar presente.</p>
            <div className="socials">
              <a href="#" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1" fill="currentColor" stroke="none"/></svg></a>
              <a href="#" aria-label="LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM3 9h4v12H3zM10 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95 4.03 0 4.78 2.5 4.78 5.75V21h-4v-5.3c0-1.27-.02-2.9-1.95-2.9-1.95 0-2.25 1.4-2.25 2.8V21h-4z"/></svg></a>
              <a href="#" aria-label="WhatsApp"><Icon name="message-circle" /></a>
            </div>
          </div>
          <div>
            <h4>Serviços</h4>
            <ul>
              <li><a href="servicos.html">Limpeza e conservação</a></li>
              <li><a href="servicos.html">Jardinagem e paisagismo</a></li>
              <li><a href="servicos.html">Portaria e recepção</a></li>
              <li><a href="servicos.html">Zeladoria e copa</a></li>
            </ul>
          </div>
          <div>
            <h4>Empresa</h4>
            <ul>
              <li><a href="quem-somos.html">Quem somos</a></li>
              <li><a href="quem-somos.html">Diferenciais</a></li>
              <li><a href="trabalhe-conosco.html">Trabalhe conosco</a></li>
              <li><a href="contato.html">Contato</a></li>
            </ul>
          </div>
          <div>
            <h4>Contato</h4>
            <ul>
              <li><a href="tel:+5551992196846">(51) 99219-6846</a></li>
              <li><a href="mailto:contato@imediataservice.com.br">contato@imediataservice.com.br</a></li>
              <li><a href="#">São Paulo, SP</a></li>
              <li><a href="#">Seg a sex, 8h às 18h</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-rule"></div>
        <div className="footer-bottom">
          <span>© 2026 Imediata Service. Todos os direitos reservados.</span>
          <span>Privacidade · Termos de uso</span>
        </div>
      </div>
    </footer>
  );
}

/* ============ WhatsApp floating button ============ */
function WhatsAppFab() {
  const msg = encodeURIComponent("Olá! Gostaria de solicitar um orçamento de serviços terceirizados.");
  return (
    <a className="wa-fab" href={"https://wa.me/5551992196846?text=" + msg} target="_blank" rel="noopener" aria-label="Falar no WhatsApp">
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.5 14.4c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.95 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.22 3.08.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.29.17-1.42-.07-.13-.27-.2-.57-.35z"/><path d="M12 2a10 10 0 0 0-8.5 15.3L2 22l4.8-1.5A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.18-2.85.9.9-2.78-.2-.32A8.2 8.2 0 1 1 12 20.2z"/></svg>
      <span className="lbl">Fale conosco</span>
    </a>
  );
}

/* ============ Scroll reveal hook ============ */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window) || !els.length) { els.forEach((e) => e.classList.add("in")); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => { if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  });
}

/* ============ Tweaks — gold tone, heading font, card corners ============ */
const TWEAK_DEFAULTS = { goldTone: "classico", headingFont: "montserrat", corners: "suave" };
const GOLD_TONES = {
  classico: { gold: "#c9922a", bright: "#e8b040", light: "#f5d878" },
  ambar:    { gold: "#d8a02f", bright: "#f2bd52", light: "#f9e6a0" },
  bronze:   { gold: "#a9781f", bright: "#cf9b34", light: "#ecca7e" },
};
const CORNERS = { suave: { lg: "14px", md: "8px", xl: "22px" }, reto: { lg: "3px", md: "2px", xl: "4px" } };
function applyTweaks(t) {
  const r = document.documentElement.style;
  const g = GOLD_TONES[t.goldTone] || GOLD_TONES.classico;
  r.setProperty("--gold", g.gold);
  r.setProperty("--gold-bright", g.bright);
  r.setProperty("--gold-light", g.light);
  r.setProperty("--accent", g.gold);
  r.setProperty("--grad-gold", `linear-gradient(160deg, ${g.bright} 0%, ${g.gold} 55%, #5a3a08 130%)`);
  r.setProperty("--grad-gold-soft", `linear-gradient(135deg, ${g.light} 0%, ${g.bright} 100%)`);
  r.setProperty("--font-display", t.headingFont === "trebuchet"
    ? '"Trebuchet MS","Segoe UI",sans-serif'
    : '"Montserrat","Trebuchet MS","Segoe UI",sans-serif');
  const c = CORNERS[t.corners] || CORNERS.suave;
  r.setProperty("--r-lg", c.lg); r.setProperty("--r-md", c.md); r.setProperty("--r-xl", c.xl);
}
function SiteTweaks() {
  const [t, setT] = useState(() => {
    try { return { ...TWEAK_DEFAULTS, ...(JSON.parse(localStorage.getItem("imd-tweaks")) || {}) }; }
    catch (e) { return TWEAK_DEFAULTS; }
  });
  const set = (k, v) => {
    const nt = { ...t, [k]: v }; setT(nt);
    try { localStorage.setItem("imd-tweaks", JSON.stringify(nt)); } catch (e) {}
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
  };
  useEffect(() => { applyTweaks(t); }, [t]);
  return (
    <TweaksPanel title="Ajustes">
      <TweakSection label="Marca" />
      <TweakRadio label="Tom do dourado" value={t.goldTone}
        options={[{ value: "classico", label: "Clássico" }, { value: "ambar", label: "Âmbar" }, { value: "bronze", label: "Bronze" }]}
        onChange={(v) => set("goldTone", v)} />
      <TweakSection label="Tipografia" />
      <TweakRadio label="Títulos" value={t.headingFont}
        options={[{ value: "montserrat", label: "Montserrat" }, { value: "trebuchet", label: "Trebuchet" }]}
        onChange={(v) => set("headingFont", v)} />
      <TweakSection label="Forma" />
      <TweakRadio label="Cantos" value={t.corners}
        options={[{ value: "suave", label: "Suaves" }, { value: "reto", label: "Retos" }]}
        onChange={(v) => set("corners", v)} />
    </TweaksPanel>
  );
}

/* ============ Page shell ============ */
function Page({ route, children }) {
  useReveal();
  return (
    <div className="app">
      <Header route={route} />
      {children}
      <Footer />
      <WhatsAppFab />
      <SiteTweaks />
    </div>
  );
}

/* ============ Shared data ============ */
const SERVICES = [
  { icon: "sparkles", title: "Limpeza e conservação", desc: "Manutenção impecável dos seus ambientes — limpeza predial, corporativa e de áreas comuns com equipes treinadas e rotinas planejadas." },
  { icon: "sprout", title: "Jardinagem e paisagismo", desc: "Cuidado especializado com áreas verdes: poda, plantio e manutenção contínua de jardins e espaços externos." },
  { icon: "trash-2", title: "Limpeza urbana", desc: "Soluções de higienização para espaços públicos ou grandes complexos: varrição, coleta e conservação de vias e áreas de circulação." },
  { icon: "bell-ring", title: "Portaria e recepção", desc: "Controle de acesso com cordialidade e segurança, recepção e atendimento com postura profissional." },
  { icon: "hard-hat", title: "Zeladoria", desc: "Manutenção preventiva e acompanhamento diário do seu condomínio ou empresa, com organização das rotinas do local." },
  { icon: "coffee", title: "Serviços de copa", desc: "Profissionais preparados para o atendimento interno, organização do ambiente e apoio ao bem-estar das equipes." },
  { icon: "shield-check", title: "Vigilância e apoio operacional", desc: "Estrutura de apoio à segurança e à operação do espaço, conforme a necessidade específica de cada contrato." },
];

const DIFFERENTIALS = [
  { icon: "handshake", title: "Atendimento próximo", desc: "Mais do que fornecer mão de obra, construímos uma relação de confiança e acompanhamos cada entrega de perto." },
  { icon: "users", title: "Equipes orientadas", desc: "Comunicação clara e responsabilidade na execução, com profissionais treinados e alinhados à rotina de cada cliente." },
  { icon: "shield-check", title: "Segurança e cumprimento", desc: "Atenção à segurança e cumprimento rigoroso das rotinas combinadas em cada contrato." },
  { icon: "git-pull-request-arrow", title: "Flexibilidade", desc: "Disposição para ajustar o atendimento conforme a necessidade de cada cliente — e não o contrário." },
];

Object.assign(window, {
  Icon, Button, Badge, DotRule, Header, Footer, ServiceCard, Feature, Pillar,
  SymbolFrame, Step, FAQ, WhatsAppFab, useReveal, SiteTweaks, Page,
  LOGO_LIGHT, LOGO_DARK, SYMBOL, SYMBOL_LINES, NAV, SERVICES, DIFFERENTIALS,
});