// AJM Logística — app root
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "scheme": "brand",
  "showLiveBanner": true,
  "showStickyMobile": true
}/*EDITMODE-END*/;

// Esquemas de cor — todos na família AZUL CORPORATIVO (vermelho aposentado).
// As variáveis com nome "red" são consumidas em todo o CSS, então recebem
// tons de azul aqui para o rebrand valer em runtime. Vermelho fica só em --error.
const SCHEMES = {
  brand:    { accent: '#60A5FA', primary: '#2563EB', light: '#93c5fd', deep: '#1e3a8a' }, // spec
  cobalt:   { accent: '#6aa8ff', primary: '#1d4ed8', light: '#9ec5ff', deep: '#1e3a8a' },
  azure:    { accent: '#7dd3fc', primary: '#0ea5e9', light: '#bae6fd', deep: '#075985' },
  indigo:   { accent: '#818cf8', primary: '#4f46e5', light: '#c7d2fe', deep: '#3730a3' },
};

function applyScheme(name) {
  const s = SCHEMES[name] || SCHEMES.brand;
  const root = document.documentElement;
  // Tokens azuis (espec.)
  root.style.setProperty('--brand-blue',   s.accent);
  root.style.setProperty('--brand-blue-2', s.primary);
  root.style.setProperty('--brand-blue-3', s.light);
  root.style.setProperty('--brand-blue-deep', s.deep);
  root.style.setProperty('--brand-blue-soft', hexToRgba(s.primary, 0.12));
  // Tokens "red" (legado) → mapeados para azul para o rebrand valer
  root.style.setProperty('--brand-red',    s.primary);
  root.style.setProperty('--brand-red-2',  shade(s.primary, -0.18));
  root.style.setProperty('--brand-red-deep', s.deep);
  root.style.setProperty('--brand-red-soft', hexToRgba(s.primary, 0.14));
  // Vermelho reservado apenas para erros
  root.style.setProperty('--error', '#ef4444');
  root.style.setProperty('--error-soft', 'rgba(239, 68, 68, 0.14)');
}

function shade(hex, amount) {
  const h = hex.replace('#', '');
  const n = h.length === 3 ? h.replace(/./g, (c) => c + c) : h;
  const r = parseInt(n.slice(0,2), 16);
  const g = parseInt(n.slice(2,4), 16);
  const b = parseInt(n.slice(4,6), 16);
  const adjust = (c) => Math.max(0, Math.min(255, Math.round(c + (amount > 0 ? (255 - c) : c) * amount)));
  return `#${[adjust(r), adjust(g), adjust(b)].map((c) => c.toString(16).padStart(2, '0')).join('')}`;
}
function hexToRgba(hex, a) {
  const h = hex.replace('#', '');
  const n = h.length === 3 ? h.replace(/./g, (c) => c + c) : h;
  const r = parseInt(n.slice(0,2), 16);
  const g = parseInt(n.slice(2,4), 16);
  const b = parseInt(n.slice(4,6), 16);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}

// Abre o WhatsApp da A.J.M com mensagem pré-preenchida (sem formulário).
const WA_NUMBER = '5531991841682';
const WA_TEXT = 'Olá! Quero solicitar um orçamento de frete com a A.J.M Transportes.';
function openWhatsApp() {
  const url = `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(WA_TEXT)}`;
  window.open(url, '_blank', 'noopener');
}

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

  useEffectApp(() => { applyScheme(t.scheme); }, [t.scheme]);

  useEffectApp(() => {
    const goQ = () => { openWhatsApp(); };
    window.addEventListener('go-quiz', goQ);
    return () => { window.removeEventListener('go-quiz', goQ); };
  }, []);

  const handleQuote = () => { openWhatsApp(); };

  return (
    <>
      <Landing onQuote={handleQuote} tweaks={t}/>

      <TweaksPanel title="Ajustes AJM">
        <TweakSection label="Tom do azul"/>
        {(() => {
          const safe = SCHEMES[t.scheme] || SCHEMES.brand;
          return (
            <TweakColor label="Esquema de cor" value={[safe.primary, safe.accent]}
              options={[
                [SCHEMES.brand.primary,  SCHEMES.brand.accent],
                [SCHEMES.cobalt.primary, SCHEMES.cobalt.accent],
                [SCHEMES.azure.primary,  SCHEMES.azure.accent],
                [SCHEMES.indigo.primary, SCHEMES.indigo.accent],
              ]}
              onChange={(v) => {
                const arr = Array.isArray(v) ? v : [v];
                const name = Object.keys(SCHEMES).find((k) => SCHEMES[k].primary === arr[0]) || 'brand';
                setTweak('scheme', name);
              }}/>
          );
        })()}

        <TweakSection label="Componentes da página"/>
        <TweakToggle label="Banner de atividade" value={t.showLiveBanner}
          onChange={(v) => setTweak('showLiveBanner', v)}/>
        <TweakToggle label="CTA fixo no mobile" value={t.showStickyMobile}
          onChange={(v) => setTweak('showStickyMobile', v)}/>

        <TweakSection label="Contato"/>
        <TweakButton label="Abrir WhatsApp →"
          onClick={() => openWhatsApp()}/>
      </TweaksPanel>
    </>
  );
}

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