// Tweakable controls — rewire the whole feel of the landing
// 3 expressive dimensions: VIBE (palette+personality), DENSITY (rhythm), HERO (the "what they land on")

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "vibe": "trust",
  "density": "balanced",
  "heroStyle": "chat"
}/*EDITMODE-END*/;

// ── Palettes ────────────────────────────────────────────────────────────────
// Each vibe ships a full token set — not just "primary color". The landing
// re-reads these from CSS custom properties, so the entire surface (cards,
// gradients, dark sections, WhatsApp button recalibration) shifts in concert.
const VIBES = {
  trust: {
    label: 'Trust',
    tagline: 'Sóbrio, confiável, institucional',
    tokens: {
      '--navy-900': '#0F1E3C',
      '--navy-800': '#14264A',
      '--navy-700': '#1E3A6F',
      '--navy-600': '#2A4D8F',
      '--navy-500': '#3D63A8',
      '--silver-700': '#5B6778',
      '--silver-500': '#8A95A3',
      '--silver-300': '#C3CAD4',
      '--silver-100': '#E6EAF0',
      '--bg': '#F4F6F9',
      '--bg-2': '#ECEFF4',
      '--text': '#1A2338',
      '--text-muted': '#5B6778',
      '--whatsapp': '#25D366',
      '--whatsapp-dark': '#1FB157',
      '--success': '#1FA971',
      '--hero-grad': 'linear-gradient(180deg, #F8FAFD 0%, #EEF2F8 100%)',
      '--dark-grad': 'linear-gradient(160deg, #0F1E3C 0%, #1E3A6F 100%)',
      '--form-grad': 'linear-gradient(160deg, #0F1E3C 0%, #14264A 60%, #1E3A6F 100%)',
      '--accent-soft-bg': 'rgba(30,58,111,.08)',
    },
  },
  warmth: {
    label: 'Warmth',
    tagline: 'Humano, caloroso, bairro',
    tokens: {
      '--navy-900': '#1F1812',
      '--navy-800': '#2D2218',
      '--navy-700': '#4A3527',
      '--navy-600': '#6B4C36',
      '--navy-500': '#8F6A4E',
      '--silver-700': '#6E5D52',
      '--silver-500': '#9A8778',
      '--silver-300': '#D4C5B5',
      '--silver-100': '#EFE6DB',
      '--bg': '#FAF5EE',
      '--bg-2': '#F2E9DB',
      '--text': '#2B1F15',
      '--text-muted': '#6E5D52',
      '--whatsapp': '#25D366',
      '--whatsapp-dark': '#1FB157',
      '--success': '#3E8E57',
      '--hero-grad': 'linear-gradient(180deg, #FBF6EE 0%, #F2E9DB 100%)',
      '--dark-grad': 'linear-gradient(160deg, #2D2218 0%, #4A3527 100%)',
      '--form-grad': 'linear-gradient(160deg, #2D2218 0%, #3D2E20 60%, #4A3527 100%)',
      '--accent-soft-bg': 'rgba(74,53,39,.08)',
    },
  },
  bold: {
    label: 'Bold',
    tagline: 'Saturado, moderno, alto-contraste',
    tokens: {
      '--navy-900': '#07102B',
      '--navy-800': '#0B1D4F',
      '--navy-700': '#1447E6',
      '--navy-600': '#2E62FF',
      '--navy-500': '#5585FF',
      '--silver-700': '#495575',
      '--silver-500': '#7C879E',
      '--silver-300': '#B6BED0',
      '--silver-100': '#E2E7F0',
      '--bg': '#F1F3F8',
      '--bg-2': '#E5E9F2',
      '--text': '#0B1D4F',
      '--text-muted': '#495575',
      '--whatsapp': '#25D366',
      '--whatsapp-dark': '#1FB157',
      '--success': '#00B86B',
      '--hero-grad': 'linear-gradient(180deg, #F5F7FC 0%, #E7EDFB 60%, #DEE7FA 100%)',
      '--dark-grad': 'linear-gradient(160deg, #07102B 0%, #1447E6 100%)',
      '--form-grad': 'linear-gradient(160deg, #07102B 0%, #0B1D4F 50%, #1447E6 100%)',
      '--accent-soft-bg': 'rgba(20,71,230,.1)',
    },
  },
};

// ── Density ─────────────────────────────────────────────────────────────────
// Changes vertical rhythm + card padding + grid gap simultaneously via vars.
const DENSITIES = {
  breezy:    { '--sec-py': '120px', '--sec-py-mobile': '80px', '--card-pad': '36px', '--grid-gap': '28px', '--hero-py': '100px' },
  balanced:  { '--sec-py': '96px',  '--sec-py-mobile': '64px', '--card-pad': '28px', '--grid-gap': '22px', '--hero-py': '80px'  },
  packed:    { '--sec-py': '64px',  '--sec-py-mobile': '48px', '--card-pad': '22px', '--grid-gap': '16px', '--hero-py': '56px'  },
};

// Apply tokens to :root so every styled component auto-updates
function applyVibe(vibe) {
  const set = VIBES[vibe] || VIBES.trust;
  const root = document.documentElement;
  Object.entries(set.tokens).forEach(([k, v]) => root.style.setProperty(k, v));
  root.setAttribute('data-vibe', vibe);
}
function applyDensity(d) {
  const set = DENSITIES[d] || DENSITIES.balanced;
  const root = document.documentElement;
  Object.entries(set).forEach(([k, v]) => root.style.setProperty(k, v));
  root.setAttribute('data-density', d);
}
function applyHeroStyle(h) {
  document.documentElement.setAttribute('data-hero', h);
}

function TweaksRoot({ t, setTweak }) {
  // re-apply whenever a tweak changes
  React.useEffect(() => { applyVibe(t.vibe); }, [t.vibe]);
  React.useEffect(() => { applyDensity(t.density); }, [t.density]);
  React.useEffect(() => { applyHeroStyle(t.heroStyle); }, [t.heroStyle]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Vibe" />
      <TweakRadio
        label="Personalidade"
        value={t.vibe}
        options={['trust', 'warmth', 'bold']}
        onChange={(v) => setTweak('vibe', v)}
      />
      <div className="twk-val" style={{ fontSize: 10.5, lineHeight: 1.4, opacity: .7 }}>
        {VIBES[t.vibe]?.tagline}
      </div>

      <TweakSection label="Densidade" />
      <TweakRadio
        label="Ritmo da página"
        value={t.density}
        options={['breezy', 'balanced', 'packed']}
        onChange={(v) => setTweak('density', v)}
      />

      <TweakSection label="Hero" />
      <TweakRadio
        label="Estilo de entrada"
        value={t.heroStyle}
        options={['chat', 'stats', 'question']}
        onChange={(v) => setTweak('heroStyle', v)}
      />
      <div className="twk-val" style={{ fontSize: 10.5, lineHeight: 1.4, opacity: .7 }}>
        {t.heroStyle === 'chat' && 'Mock de conversa WhatsApp'}
        {t.heroStyle === 'stats' && 'Números que geram confiança'}
        {t.heroStyle === 'question' && 'Pergunta direta dominando'}
      </div>
    </TweaksPanel>
  );
}

// Apply defaults IMMEDIATELY (before React mounts) to avoid flash of wrong palette
applyVibe(TWEAK_DEFAULTS.vibe);
applyDensity(TWEAK_DEFAULTS.density);
applyHeroStyle(TWEAK_DEFAULTS.heroStyle);

Object.assign(window, { TWEAK_DEFAULTS, TweaksRoot, VIBES, DENSITIES });