// app.jsx — Venno (Home humana) tweaks panel.
// The page is static HTML; this only wires the tweaks panel + applies CSS vars.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#1d5fb8", "#1a2d4d", "#d97757", "#f7ede0"],
  "typography": "source-dm",
  "density": "regular",
  "warmth": "cream",
  "heroImage": "carotid",
  "stampVisible": true
}/*EDITMODE-END*/;

const PALETTES = [
  // [brand, brand-deep, accent, accent-soft]
  ["#1d5fb8", "#1a2d4d", "#d97757", "#f7ede0"],   // Venno blue + warm navy + terracotta (default, warm)
  ["#1d5fb8", "#1a2d4d", "#b88a4a", "#f3e9d6"],   // Venno blue + warm navy + honey/sand
  ["#1d5fb8", "#1a2d4d", "#7a9a78", "#e7eee3"],   // Venno blue + warm navy + sage (calmer)
  ["#1d5fb8", "#1a2d4d", "#c54f5b", "#f7e1e3"],   // Venno blue + warm navy + soft rose
];

const TYPO = {
  "source-dm":   { serif: '"Source Serif 4"', sans: '"DM Sans"' },
  "lora-dm":     { serif: '"Lora"',            sans: '"DM Sans"' },
  "fraunces-dm": { serif: '"Fraunces"',        sans: '"DM Sans"' },
};

const WARMTH = {
  cream:   { bg: "oklch(0.985 0.013 82)",  surface: "oklch(0.96 0.018 78)",  surface2: "oklch(0.94 0.022 76)" },
  paper:   { bg: "oklch(0.985 0.005 60)",  surface: "oklch(0.965 0.008 60)", surface2: "oklch(0.945 0.012 65)" },
  bone:    { bg: "oklch(0.985 0.018 78)",  surface: "oklch(0.95 0.025 75)",  surface2: "oklch(0.93 0.030 75)" },
};

function applyTweaks(t) {
  const root = document.documentElement;
  const [brand, brandDeep, accent, accentSoft] = t.palette;

  root.style.setProperty('--brand', brand);
  root.style.setProperty('--brand-deep', brandDeep);
  root.style.setProperty('--accent', accent);
  root.style.setProperty('--accent-soft', accentSoft);

  const typo = TYPO[t.typography] || TYPO["source-dm"];
  root.style.setProperty(
    '--font-serif',
    `${typo.serif}, ui-serif, Georgia, serif`
  );
  root.style.setProperty(
    '--font-sans',
    `${typo.sans}, ui-sans-serif, system-ui, -apple-system, sans-serif`
  );

  const w = WARMTH[t.warmth] || WARMTH.cream;
  root.style.setProperty('--bg', w.bg);
  root.style.setProperty('--surface', w.surface);
  root.style.setProperty('--surface-2', w.surface2);

  root.setAttribute('data-density', t.density);

  // Hero image swap
  const heroImg = document.querySelector('.hero-visual img');
  const heroMap = {
    carotid: { src: 'assets/slider-main2.jpg', alt: 'Ecodoppler de carótidas — atendimento Venno' },
    legs:    { src: 'assets/exam-varizes.jpg', alt: 'Mapeamento de varizes — Venno' },
    exam:    { src: 'assets/exam-carotidas.jpg', alt: 'Exame em curso — Venno' },
  };
  if (heroImg && heroMap[t.heroImage]) {
    heroImg.src = heroMap[t.heroImage].src;
    heroImg.alt = heroMap[t.heroImage].alt;
  }

  // Stamp visibility
  const stamp = document.querySelector('.hero-stamp');
  if (stamp) stamp.style.display = t.stampVisible ? 'grid' : 'none';
}

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

  React.useEffect(() => {
    applyTweaks(t);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks · Humana">
      <TweakSection label="Paleta" />
      <TweakColor
        label="Cores"
        value={t.palette}
        options={PALETTES}
        onChange={(v) => setTweak('palette', v)}
      />
      <TweakSelect
        label="Fundo (calor)"
        value={t.warmth}
        options={[
          { value: 'cream', label: 'Cream — quente' },
          { value: 'paper', label: 'Paper — neutro' },
          { value: 'bone',  label: 'Bone — areia' },
        ]}
        onChange={(v) => setTweak('warmth', v)}
      />

      <TweakSection label="Tipografia" />
      <TweakSelect
        label="Família"
        value={t.typography}
        options={[
          { value: 'source-dm',   label: 'Source Serif + DM Sans' },
          { value: 'lora-dm',     label: 'Lora + DM Sans' },
          { value: 'fraunces-dm', label: 'Fraunces + DM Sans' },
        ]}
        onChange={(v) => setTweak('typography', v)}
      />

      <TweakSection label="Layout" />
      <TweakRadio
        label="Densidade"
        value={t.density}
        options={['compact', 'regular', 'comfy']}
        onChange={(v) => setTweak('density', v)}
      />

      <TweakSection label="Hero" />
      <TweakSelect
        label="Imagem"
        value={t.heroImage}
        options={[
          { value: 'carotid', label: 'Ecodoppler de carótidas' },
          { value: 'legs',    label: 'Mapeamento de varizes' },
          { value: 'exam',    label: 'Exame em curso' },
        ]}
        onChange={(v) => setTweak('heroImage', v)}
      />
      <TweakToggle
        label="Selo 'Laudo na hora'"
        value={t.stampVisible}
        onChange={(v) => setTweak('stampVisible', v)}
      />
    </TweaksPanel>
  );
}

const root = ReactDOM.createRoot(document.getElementById('tweaks-root'));
root.render(<TweaksApp />);