/* global React, ReactDOM, SERVICES, CATEGORIES, METRICS, PRICING_MODELS, DISCLAIMERS, LEGAL_TERMS, LEGAL_PRIVACY, GLOSSARY, ATTENDANCE, ATTENDANCE_SCOPE, NETWORK_NOTES, ELECTRONICS,
   Icon, LogoMark, OrbitalBackdrop, ServiceCard, QuoteModal, LegalModal, Term, renderWithTerms, PriceBlock,
   TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakColor, TweakSlider */
const { useState, useEffect, useMemo, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroStyle": "orbital",
  "showMetrics": true,
  "showOrbits": true,
  "accentEmphasis": "balanced",
  "density": "comfortable"
} /*EDITMODE-END*/;

// Número oficial da SUN TECH no formato internacional sem "+" (55 + DDD + número)
const WHATSAPP_PHONE = "5534984032210";
window.WHATSAPP_PHONE = WHATSAPP_PHONE;
const WHATSAPP_PREFIX = "Olá, equipe SUN TECH! Vim pelo site e gostaria de uma orientação:\n\n";

function openWhatsApp(message) {
  const text = (WHATSAPP_PREFIX + (message || "")).trim();
  const url = `https://wa.me/${WHATSAPP_PHONE}?text=${encodeURIComponent(text)}`;
  window.open(url, "_blank", "noopener,noreferrer");
}

function NavBar() {
  return (
    <header className="relative z-30">
      <div className="max-w-7xl mx-auto px-6 sm:px-10 py-5 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <LogoMark size={38} />
          <div className="hidden sm:block leading-none border-l border-white/10 pl-4">
            <div className="text-[10px] uppercase tracking-[.24em] text-ice-300 font-mono">ENGENHARIA & INOVAÇÃO</div>
            <div className="text-[10px] uppercase tracking-[.24em] text-ice-400 font-mono mt-1">Uberlândia / MG · BR</div>
          </div>
        </div>

        <nav className="hidden md:flex items-center gap-7 text-[13px] text-ice-200">
          <a href="#modelo" className="hover:text-white transition">Valores</a>
          <a href="#catalogo" className="hover:text-white transition">Soluções</a>
          <a href="#contato" className="hover:text-white transition">Contato</a>
        </nav>

        <div className="flex items-center gap-2">
          <a href="catalogo.html" className="hidden sm:inline-flex items-center gap-2 px-3.5 py-2 rounded-lg border border-white/10 hover:bg-white/5 transition text-[13px] text-ice-200">
            <Icon name="FileText" size={14} />
            Ver em PDF
          </a>
          <a href="#contato" className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg border border-cy-400/40 hover:bg-cy-400/10 transition text-[13px] text-cy-100">
            <Icon name="MessageCircle" size={14} />
            Falar com a equipe
          </a>
        </div>
      </div>
      {/* divider */}
      <div className="h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
    </header>);

}

function Hero({ t }) {
  const showOrbits = t.showOrbits;
  const [request, setRequest] = useState("");
  const onSend = () => {
    if (!request.trim()) return;
    openWhatsApp(request);
  };
  return (
    <section className="relative starfield noise overflow-hidden">
      {showOrbits && <OrbitalBackdrop />}
      <div className="absolute inset-0 grid-fade opacity-50" />

      <div className="relative max-w-6xl mx-auto px-6 sm:px-10 pt-16 sm:pt-24 pb-20 sm:pb-28 text-center">
        {/* eyebrow */}
        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-cy-400/25 bg-cy-400/5 text-[11px] uppercase tracking-[.22em] text-cy-100 font-mono">
          <span className="w-1.5 h-1.5 rounded-full bg-cy-300 pulse-soft"></span>
          SUN TECH &amp; GEEK LTDA
        </div>

        {/* headline */}
        <h1 className="font-display text-[clamp(36px,6.2vw,76px)] leading-[1.02] font-bold mt-8 tracking-tight text-white text-balance">
          Engenharia de software,<br />
          <span className="brand-text">redes e telecom de alta performance.</span>
        </h1>

        <p className="text-ice-200/85 max-w-2xl mx-auto mt-6 text-[17px] sm:text-[18px] leading-relaxed text-pretty">A inteligência do software alinhada à solidez da infraestrutura de Telecomunicações. Desenvolvemos sistemas corporativos personalizados e projetamos as redes de alta performance. Com laboratório de eletrônica próprio e equipe especializada, prontos para atende-lo.

        </p>

        {/* Request → WhatsApp */}
        <div className="mt-10 max-w-2xl mx-auto text-left">
          <div className="relative">
            <div className="absolute -inset-px rounded-2xl opacity-70 blur-sm"
            style={{ background: 'linear-gradient(95deg,#FFFFFF 0%, #7CDAFE 50%, #1AB6F0 100%)' }} />
            <div className="relative rounded-2xl bg-ink-900/95 border border-white/10 px-5 py-4 sm:px-6 sm:py-5">
              <div className="flex items-start gap-3">
                <div className="shrink-0 mt-1 text-cy-300">
                  <Icon name="MessageSquareText" size={20} />
                </div>
                <textarea
                  value={request}
                  onChange={(e) => setRequest(e.target.value)}
                  onKeyDown={(e) => {if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {e.preventDefault();onSend();}}}
                  placeholder="Em poucas palavras, descreva o que sua empresa precisa resolver. Ex: “Preciso revisar a rede do escritório e implantar telefonia VoIP”."
                  rows={3}
                  className="flex-1 bg-transparent outline-none text-[15px] placeholder:text-ice-400/70 text-white resize-none leading-relaxed" />
                
              </div>
              <div className="flex flex-wrap items-center justify-between gap-3 mt-4 pt-3 border-t border-white/10">
                <span className="text-[11px] text-ice-300 font-mono inline-flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-cy-300 pulse-soft inline-block"></span>
                  Resposta via WhatsApp em até 1h útil (dentro do expediente).
                </span>
                <button
                  onClick={onSend}
                  disabled={!request.trim()}
                  className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-cy-400 text-ink-950 hover:bg-cy-300 transition font-medium text-[13px] disabled:opacity-40 disabled:cursor-not-allowed">
                  
                  <Icon name="MessageCircle" size={14} />
                  Enviar pelo WhatsApp
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* metrics ribbon */}
        {t.showMetrics &&
        <div className="mt-16 grid grid-cols-2 sm:grid-cols-4 gap-px rounded-2xl overflow-hidden border border-white/10 bg-white/5">
            {METRICS.map((m, i) =>
          <div key={i} className="bg-ink-900/90 px-5 py-5 sm:py-6">
                <div className="font-display text-xl sm:text-2xl font-bold text-white leading-tight text-balance">{m.value}</div>
                <div className="text-[11px] uppercase tracking-[.18em] text-ice-300 font-mono mt-1.5">{m.label}</div>
              </div>
          )}
          </div>
        }
      </div>
    </section>);

}

function ExpertiseStrip() {
  const items = [
  { icon: "Code2", label: "Software sob medida" },
  { icon: "Network", label: "Redes corporativas" },
  { icon: "RadioTower", label: "Telefonia VoIP" },
  { icon: "Cpu", label: "Automação industrial" },
  { icon: "Server", label: "Servidores & backup" },
  { icon: "ShieldCheck", label: "Segurança de rede" },
  { icon: "Home", label: "Automação residencial" },
  { icon: "CircuitBoard", label: "Conserto de eletrônica" }];

  return (
    <section id="solucoes" className="relative border-y border-white/10 bg-ink-900/60 overflow-hidden">
      {/* mobile: single-line marquee (right → left loop) */}
      <div className="sm:hidden py-5 overflow-hidden" aria-hidden="true">
        <div className="flex w-max animate-marquee">
          {[...items, ...items].map((it, i) =>
          <div key={i} className="flex items-center gap-2 text-[12px] font-mono uppercase tracking-[.14em] text-ice-200/80 px-5 whitespace-nowrap">
              <Icon name={it.icon} size={13} />
              <span>{it.label}</span>
            </div>
          )}
        </div>
      </div>

      {/* desktop: centered wrapped row */}
      <div className="hidden sm:block max-w-7xl mx-auto px-10 py-6">
        <div className="flex items-center gap-10 flex-wrap justify-center text-ice-200/80">
          {items.map((it, i) =>
          <div key={i} className="flex items-center gap-2 text-[12.5px] font-mono uppercase tracking-[.14em]">
              <Icon name={it.icon} size={14} />
              <span>{renderWithTerms(it.label)}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Catalog({ services, filter, setFilter, onQuote, t }) {
  const filtered = useMemo(() => {
    const list = services.filter((s) => filter === "todos" || s.category === filter);
    // Default sort: fixed-price first, then tiered (table prices), then "sob consulta"
    const rank = (p) => p.kind === "fixed" ? 0 : p.kind === "tiered" ? 1 : 2;
    return list.slice().sort((a, b) => rank(a.pricing) - rank(b.pricing));
  }, [services, filter]);

  const cat = CATEGORIES.find((c) => c.id === filter);
  const totalInScope = filter === "todos" ? services.length : services.filter((s) => s.category === filter).length;

  return (
    <section id="catalogo" className="relative max-w-7xl mx-auto px-6 sm:px-10 py-20 sm:py-28">
      {/* Header */}
      <div className="flex items-end justify-between gap-6 flex-wrap mb-8">
        <div>
          <div className="text-[11px] uppercase tracking-[.22em] text-ice-300 font-mono">/// Portfólio de soluções</div>
          <h2 className="font-display text-3xl sm:text-4xl font-bold text-white mt-2 tracking-tight">
            {filter === "todos" ? "Projetos sob medida." : cat.label + "."}
          </h2>
          <p className="text-ice-200/80 max-w-xl mt-3 text-[15px]">Soluções dimensionadas para empresas, indústria, agro e residências. Filtre por área para focar na sua necessidade.

          </p>
        </div>
        <div className="flex items-center gap-3 text-[12px] text-ice-300 font-mono">
          <Icon name="LayoutGrid" size={13} />
          <span><span className="text-white">{filtered.length}</span> de {totalInScope} serviços</span>
        </div>
      </div>

      {/* Filter chips — anchored above the grid */}
      <div className="mb-8 sm:mb-10 -mx-2 px-2 flex flex-wrap items-center gap-2">
        {CATEGORIES.map((c) => {
          const active = filter === c.id;
          const count = c.id === "todos" ? services.length : services.filter((s) => s.category === c.id).length;
          return (
            <button key={c.id} onClick={() => setFilter(c.id)}
            className={`inline-flex items-center gap-2 px-3.5 py-2 rounded-full border text-[12.5px] transition
                ${active ?
            "bg-cy-400 text-ink-950 border-cy-400 shadow-[0_10px_30px_-12px_rgba(26,182,240,.7)]" :
            "border-white/10 text-ice-200 hover:bg-white/5 hover:border-cy-400/40 bg-ink-900/40"}`}>
              <Icon name={c.icon} size={13} />
              {c.label}
              <span className={`text-[10px] font-mono px-1.5 py-0.5 rounded-full ${active ? 'bg-ink-950/20 text-ink-950' : 'bg-white/5 text-ice-300'}`}>{count}</span>
            </button>);
        })}
        {filter !== "todos" &&
        <button onClick={() => setFilter("todos")}
        className="inline-flex items-center gap-1 ml-1 text-[12px] text-ice-300 hover:text-white transition font-mono">
            <Icon name="X" size={12} /> limpar filtro
          </button>
        }
      </div>

      {filtered.length === 0 ?
      <div className="border border-dashed border-white/10 rounded-2xl p-12 text-center">
          <Icon name="SearchX" size={24} />
          <h3 className="mt-3 text-white font-display text-xl">Nenhum serviço nessa categoria.</h3>
          <p className="text-ice-300 text-sm mt-2">Tente outra área ou volte para <button onClick={() => setFilter("todos")} className="underline hover:text-white">todos os serviços</button>.</p>
        </div> :

      <div className={`grid ${t.density === "compact" ?
      "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" :
      "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5"}`}>
          {filtered.map((svc) =>
        <ServiceCard key={svc.id} svc={svc} onQuote={onQuote} />
        )}
        </div>
      }

      {/* como cobramos projetos */}
      <div className="mt-14 pt-10 border-t border-white/10">
        <div className="text-[11px] uppercase tracking-[.22em] text-cy-300 font-mono">/// Como cobramos projetos</div>
        <h3 className="font-display text-xl sm:text-2xl font-bold text-white mt-2 tracking-tight">Sem surpresa no orçamento.</h3>
        <p className="text-ice-200/80 mt-3 text-[14.5px] max-w-xl">
          Projetos do portfólio são orçados conforme o escopo. Dois modelos, conforme o tipo de trabalho:
        </p>
        <div className="grid md:grid-cols-2 gap-4 mt-6">
          {PRICING_MODELS.map((m) =>
          <article key={m.id} className="relative rounded-2xl border border-white/10 bg-gradient-to-b from-ink-700/60 to-ink-900/80 p-6 flex flex-col gap-3 card-hover"
          style={{ boxShadow: 'inset 0 1px 0 rgba(255,255,255,.05)' }}>
              <div className="absolute top-0 left-0 h-px w-20 bg-gradient-to-r from-cy-300/70 to-transparent" />
              <div className="flex items-center justify-between">
                <div className="w-10 h-10 rounded-lg border border-cy-400/30 flex items-center justify-center bg-cy-400/5">
                  <Icon name={m.icon} size={18} />
                </div>
                <span className="text-[10px] uppercase tracking-[.18em] text-cy-300 font-mono">{m.code}</span>
              </div>
              <div>
                <h4 className="font-display font-semibold text-[17px] text-white leading-snug">{m.title}</h4>
                <div className="mt-2 flex items-baseline gap-2">
                  <span className="font-display text-xl font-bold cy-text whitespace-nowrap">{m.headline}</span>
                  <span className="text-[11px] uppercase tracking-[.14em] text-ice-300 font-mono">{m.sub}</span>
                </div>
              </div>
              <p className="text-[12.5px] leading-relaxed text-ice-200/85 text-pretty">{renderWithTerms(m.body)}</p>
              <div className="mt-auto pt-4 border-t border-white/10">
                <button
                  onClick={() => onQuote({ id: m.id, code: m.code, title: m.title, pricing: { kind: "quote", label: "" } })}
                  className="group inline-flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-lg bg-cy-400 text-ink-950 hover:bg-cy-300 transition font-medium text-[13px] whitespace-nowrap">
                  Solicitar Projeto
                  <Icon name="ArrowUpRight" size={14} />
                </button>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function CtaBlock() {
  return (
    <section id="contato" className="relative">
      <div className="max-w-6xl mx-auto px-6 sm:px-10 pb-24">
        <div className="relative rounded-3xl border border-white/10 overflow-hidden noise"
        style={{ background: 'radial-gradient(120% 100% at 0% 0%, rgba(124,218,254,.16), transparent 55%), radial-gradient(120% 100% at 100% 100%, rgba(26,182,240,.22), transparent 60%), #06070A' }}>
          <div className="absolute inset-0 grid-fade opacity-40" />
          <div className="relative p-8 sm:p-14 grid lg:grid-cols-[1.4fr_1fr] gap-10 items-center">
            <div>
              <div className="text-[11px] uppercase tracking-[.22em] text-cy-200 font-mono">/// pronto para conversar?</div>
              <h3 className="font-display text-3xl sm:text-4xl font-bold text-white mt-3 tracking-tight text-balance">
                Engenharia de verdade, do projeto à sustentação — com responsabilidade técnica documentada.
              </h3>
              <p className="text-ice-200/85 mt-4 max-w-xl">Atendemos empresas, indústria, agro, varejo e escritórios em todo o Triângulo Mineiro. Suporte remoto e desenvolvimento de software para todo o Brasil.

              </p>
              <div className="mt-7 flex flex-wrap gap-3">
                <a href={`https://wa.me/${WHATSAPP_PHONE}?text=${encodeURIComponent('Olá, equipe SUN TECH! Vim pelo site e gostaria de falar com a equipe.')}`} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-cy-400 text-ink-950 font-medium text-[14px] hover:bg-cy-300 transition">
                  <Icon name="MessageCircle" size={16} /> Falar no WhatsApp
                </a>
                <a href="mailto:contato@suntech-br.com" className="inline-flex items-center gap-2 px-5 py-3 rounded-xl border border-white/10 text-ice-100 hover:bg-white/5 transition text-[14px]">
                  <Icon name="Mail" size={16} /> contato@suntech-br.com
                </a>
              </div>
            </div>
            <div className="rounded-2xl border border-white/10 bg-ink-900/70 p-6 sm:p-7 space-y-4">
              {[
              ["MapPin", "Uberlândia/MG", "CEP origem 38.408-204"],
              ["Clock", "Atendimento", "Seg–Sex · 08h–18h"],
              ["ShieldCheck", "Garantia legal", "90 dias na mão de obra técnica"]].
              map(([icon, head, sub], i) =>
              <div key={i} className="flex items-start gap-3">
                  <div className="w-9 h-9 flex items-center justify-center rounded-lg border border-white/10 bg-white/[.02]">
                    <Icon name={icon} size={15} />
                  </div>
                  <div className="leading-snug">
                    <div className="text-white text-[14px] font-medium">{head}</div>
                    <div className="text-ice-300 text-[12px] font-mono">{sub}</div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function NetworkBilling({ onQuote }) {
  return (
    <section id="modelo" className="relative bg-gradient-to-b from-black via-ink-900/40 to-black border-t border-white/10">
      <div className="max-w-7xl mx-auto px-6 sm:px-10 py-20 sm:py-24">

        {/* header */}
        <div className="max-w-2xl mb-12">
          <div className="text-[11px] uppercase tracking-[.22em] text-cy-300 font-mono">/// Modelo de cobrança</div>
          <h2 className="font-display text-3xl sm:text-4xl font-bold text-white mt-2 tracking-tight text-balance">
            Serviços de <span className="cy-text">Rede e Informática</span>.
          </h2>
          <p className="text-ice-200/80 mt-4 text-[15px] leading-relaxed">

          </p>
        </div>

        {/* attendance cards */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {ATTENDANCE.map((card) =>
          <article key={card.id} className="relative rounded-2xl border border-white/10 bg-gradient-to-b from-ink-700/60 to-ink-900/80 p-6 flex flex-col gap-4 card-hover"
          style={{ boxShadow: 'inset 0 1px 0 rgba(255,255,255,.05)' }}>
              <div className="absolute top-0 left-0 h-px w-24 bg-gradient-to-r from-cy-300/70 to-transparent" />
              <div className="flex items-center justify-between gap-2">
                <div className="w-10 h-10 rounded-lg border border-cy-400/30 flex items-center justify-center bg-cy-400/5 shrink-0">
                  <Icon name={card.icon} size={18} />
                </div>
                <span className="text-[9.5px] uppercase tracking-[.16em] text-cy-300 font-mono text-right leading-tight">{card.code}</span>
              </div>
              <div>
                <h3 className="font-display font-semibold text-[17px] text-white leading-snug text-balance">{card.title}</h3>
                {card.heading &&
              <div className="text-[9.5px] uppercase tracking-[.1em] text-cy-300/90 font-mono mt-2 leading-snug">{card.heading}</div>
              }
                <div className="mt-3 space-y-1">
                  {card.tiers.map((tr, i) =>
                <div key={i} className="flex items-baseline justify-between gap-3">
                      <span className="text-[10.5px] uppercase tracking-[.1em] text-ice-300 font-mono">{tr.label}</span>
                      <span className={`font-display font-bold whitespace-nowrap ${i === 0 ? "text-lg cy-text" : "text-sm text-ice-100"}`}>{tr.value}</span>
                    </div>
                )}
                </div>
              </div>
              <p className="text-[12px] leading-relaxed text-ice-200/85 text-pretty mt-auto">{renderWithTerms(card.body)}</p>
            </article>
          )}
        </div>

        {/* serviços contemplados */}
        <div className="mt-5 rounded-2xl border border-cy-400/20 bg-cy-400/[.03] p-6 sm:p-7">
          <div className="flex items-center gap-2 mb-1">
            <Icon name="ListChecks" size={16} />
            <h3 className="font-display font-semibold text-white text-[16px]">Serviços contemplados no atendimento</h3>
          </div>
          <p className="text-[12px] text-ice-300 mb-5">Exemplos de demandas atendidas no suporte remoto e presencial de rede e informática.</p>
          <ul className="columns-1 sm:columns-2 lg:columns-3 gap-x-8">
            {ATTENDANCE_SCOPE.map((s, i) =>
            <li key={i} className="flex items-start gap-2 text-[12.5px] text-ice-200/85 leading-snug mb-2.5 break-inside-avoid">
                <span className="mt-1.5 w-1 h-1 rounded-full bg-cy-300 flex-shrink-0" />
                <span>{renderWithTerms(s)}</span>
              </li>
            )}
          </ul>
        </div>

        {/* notas técnicas + escopo */}
        <div className="grid md:grid-cols-2 gap-4 mt-5">
          {NETWORK_NOTES.map((n, i) =>
          <div key={i} className="rounded-2xl border border-white/10 bg-ink-900/60 p-5 sm:p-6">
              <div className="flex items-center gap-2 mb-2.5">
                <Icon name={i === 0 ? "Info" : "Network"} size={15} />
                <h4 className="text-white font-display font-semibold text-[14px]">{n.title}</h4>
              </div>
              <p className="text-[12px] text-ice-300 leading-relaxed font-mono">{n.body}</p>
            </div>
          )}
        </div>

        {/* eletrônica & informática */}
        <div className="mt-16">
          <div className="text-[11px] uppercase tracking-[.22em] text-cy-300 font-mono">/// Eletrônica &amp; Informática</div>
          <h3 className="font-display text-2xl sm:text-3xl font-bold text-white mt-2 tracking-tight text-balance">
            Bancada, manutenção e upgrades.
          </h3>
          <p className="text-ice-200/80 mt-3 text-[15px] max-w-xl">
            Serviços de hardware que nossos clientes mais utilizam no dia a dia.
          </p>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-8">
            {ELECTRONICS.map((e) =>
            <article key={e.id} className="relative rounded-2xl border border-white/10 bg-gradient-to-b from-ink-700/60 to-ink-900/80 p-6 flex flex-col gap-3 card-hover"
            style={{ boxShadow: 'inset 0 1px 0 rgba(255,255,255,.05)' }}>
                <div className="absolute top-0 left-0 h-px w-20 bg-gradient-to-r from-cy-300/70 to-transparent" />
                <h4 className="font-display font-semibold text-white text-[16px] leading-snug text-balance">{e.title}</h4>
                <p className="text-[12.5px] text-ice-200/85 leading-relaxed text-pretty flex-1">{renderWithTerms(e.desc)}</p>
                {e.note &&
                  <p className="text-[11px] text-ice-300/70 leading-snug italic">{e.note}</p>
                }
                <div className="pt-4 border-t border-white/10 flex flex-col gap-4">
                  <PriceBlock pricing={e.pricing} />
                  <button
                    onClick={() => onQuote({ id: e.id, code: "Eletrônica & Informática", title: e.title, pricing: e.pricing })}
                    className="group inline-flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-lg bg-cy-400 text-ink-950 hover:bg-cy-300 transition font-medium text-[13px] whitespace-nowrap">
                    Solicitar Serviço
                    <Icon name="ArrowUpRight" size={14} />
                  </button>
                </div>
              </article>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function Footer({ onOpenLegal }) {
  return (
    <footer className="border-t border-white/10 bg-ink-950">
      <div className="max-w-7xl mx-auto px-6 sm:px-10 py-12">
        <div className="grid sm:grid-cols-[1fr_auto] gap-8 items-start">
          <div className="flex items-start gap-4">
            <LogoMark size={42} />
            <div>
              <div className="text-[11px] font-mono text-ice-300">SUN TECH & GEEK LTDA</div>
              <div className="text-[11px] font-mono text-ice-400 mt-0.5">CNPJ 23.239.077/0001-14 · Uberlândia/MG · BR</div>
              <div className="text-[11px] font-mono text-ice-400 mt-0.5">contato@suntech-br.com · (34) 98403-2210</div>
            </div>
          </div>
          <div className="flex flex-wrap gap-x-6 gap-y-2 text-[12.5px] text-ice-200">
            <button onClick={() => onOpenLegal('terms')} className="hover:text-white transition cursor-pointer">Termos de Serviço</button>
            <button onClick={() => onOpenLegal('privacy')} className="hover:text-white transition cursor-pointer">Política de Privacidade</button>
            <a href="#catalogo" className="hover:text-white transition">Catálogo Técnico</a>
            <a href="catalogo.html" className="inline-flex items-center gap-1.5 hover:text-white transition">
              <Icon name="FileText" size={13} /> Catálogo em PDF
            </a>
            <a href="#contato" className="hover:text-white transition">Contato</a>
          </div>
        </div>

        <div className="h-px bg-white/10 my-8" />

        <div className="grid md:grid-cols-2 gap-x-8 gap-y-6 text-[11.5px] font-mono leading-relaxed text-ice-300">
          {DISCLAIMERS.map((d, i) =>
          <div key={i} className="flex gap-3">
              <div className="w-7 h-7 flex-shrink-0 rounded-md border border-white/10 bg-white/[.02] flex items-center justify-center mt-0.5">
                <Icon name={d.icon} size={13} />
              </div>
              <div>
                <div className="text-white text-[12px] uppercase tracking-[.16em] mb-1">{d.title}</div>
                <p className="text-ice-300/85 text-[11px] leading-relaxed">{d.body}</p>
              </div>
            </div>
          )}
        </div>
        <div className="mt-10 text-[11px] text-ice-400 font-mono flex flex-wrap justify-between gap-3">
          <span>© {new Date().getFullYear()} SUN TECH &amp; GEEK LTDA</span>
          <span>Tabela de preços vigente até 01/06/2027</span>
        </div>
      </div>
    </footer>);

}

function Tweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Hero">
        <TweakToggle label="Anéis orbitais" value={t.showOrbits} onChange={(v) => setTweak('showOrbits', v)} />
        <TweakToggle label="Ribbon de métricas" value={t.showMetrics} onChange={(v) => setTweak('showMetrics', v)} />
      </TweakSection>
      <TweakSection title="Catálogo">
        <TweakRadio label="Densidade dos cards"
        value={t.density}
        onChange={(v) => setTweak('density', v)}
        options={[
        { value: "comfortable", label: "Conforto" },
        { value: "compact", label: "Compacta" }]
        } />
        
      </TweakSection>
    </TweaksPanel>);

}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [filter, setFilter] = useState("todos");
  const [quoteSvc, setQuoteSvc] = useState(null);
  const [legalDoc, setLegalDoc] = useState(null); // 'terms' | 'privacy' | null

  // re-init lucide icons after every render so dynamically-added <i> tags get replaced
  useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });

  return (
    <div className="min-h-screen bg-ink-950 text-slate-100">
      <NavBar />
      <Hero t={t} />
      <ExpertiseStrip />
      <NetworkBilling onQuote={setQuoteSvc} />
      <Catalog services={SERVICES} filter={filter} setFilter={setFilter} onQuote={setQuoteSvc} t={t} />
      <CtaBlock />
      <Footer onOpenLegal={setLegalDoc} />
      <QuoteModal service={quoteSvc} onClose={() => setQuoteSvc(null)} />
      <LegalModal doc={legalDoc} onClose={() => setLegalDoc(null)} onSwitch={setLegalDoc} />
      <Tweaks t={t} setTweak={setTweak} />
    </div>);

}

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