/* eslint-disable */
// Tweaks integration for the CBM website prototype.
//
// Three controls — each touches multiple knobs at once, not single pixels:
//
//   1. MOOD     — Authority / Editorial / Boutique
//                 Reshapes hero treatment, section rhythm, photo presence and
//                 the level of gold in the page. Authority is what the brand
//                 board prescribes; Editorial is closer to a long-form magazine;
//                 Boutique is the minimal, type-only treatment.
//
//   2. ACCENT   — Gold / Coral / Teal / Cream
//                 Swaps the brand accent (gold by default) for an alternative
//                 Caribbean palette. Affects buttons, eyebrows, the third clause
//                 of the triplet, ad-tier headers and many small accents.
//
//   3. VOICE    — Triplet / Statement / Question
//                 Rewrites the hero headline, hero lede and the "How we add
//                 value" section heading in three distinct rhetorical modes.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "authority",
  "accent": "gold",
  "voice": "triplet"
}/*EDITMODE-END*/;

// ─────────────────────────────────────────────────────────────────────────────
// Voice copy — read at render time by Hero and PillarRow.
// ─────────────────────────────────────────────────────────────────────────────

const VOICE_COPY = {
  triplet: {
    heroEyebrow: "Curaçao's Premier Business Magazine",
    heroPre: "Connect. Inspire. ",
    heroAccent: "Grow.",
    heroPost: "",
    heroLede: "Trusted insights, leadership stories and the news that drives Curaçao's business community forward — online and every week in your inbox.",
    primaryCta: "Read today's stories",
    secondaryCta: "Partner with us",
    pillarsEyebrow: "How We Add Value",
    pillarsTitle: "Connecting business. Inspiring growth.",
    pillarsLede: "Curaçao Business Magazine connects, informs and empowers the business community to grow a stronger Curaçao.",
  },
  statement: {
    heroEyebrow: "From Willemstad, for the world",
    heroPre: "Curaçao means ",
    heroAccent: "business.",
    heroPost: "",
    heroLede: "The publication of record for the people building the island's economy — interviews, analysis and the stories that move markets.",
    primaryCta: "Read the latest",
    secondaryCta: "List your brand",
    pillarsEyebrow: "What We Do",
    pillarsTitle: "We tell the story of business in Curaçao.",
    pillarsLede: "Six things we do, every day, in service of a stronger island economy.",
  },
  question: {
    heroEyebrow: "Curaçao · 2026",
    heroPre: "What's next for ",
    heroAccent: "Curaçao?",
    heroPost: "",
    heroLede: "Insights, leaders and the ideas that are shaping the island's economy — written by the people closest to the work.",
    primaryCta: "Find out",
    secondaryCta: "Join the conversation",
    pillarsEyebrow: "Why CBM",
    pillarsTitle: "Six ways we move Curaçao forward.",
    pillarsLede: "We connect, inform, inspire, promote, empower — and we elevate the island as a place to do business.",
  },
};

// ─────────────────────────────────────────────────────────────────────────────
// Accent palettes
// ─────────────────────────────────────────────────────────────────────────────

const ACCENT_PALETTES = {
  gold:  { main: '#FFC20E', hover: '#F5B600', press: '#E0A600', onAccent: '#08345E', label: 'Gold' },
  coral: { main: '#E97451', hover: '#D86340', press: '#B65033', onAccent: '#FFFFFF', label: 'Coral' },
  teal:  { main: '#00A99D', hover: '#008C82', press: '#006F66', onAccent: '#FFFFFF', label: 'Teal' },
  cream: { main: '#D4A574', hover: '#BF9264', press: '#A37E55', onAccent: '#08345E', label: 'Cream' },
};

// ─────────────────────────────────────────────────────────────────────────────
// CSS overrides for Mood — injected once, scoped to [data-mood] on the app root.
// Each mood reshapes multiple things at once (hero, spacing, photo presence,
// gold density) so the toggle feels expressive.
// ─────────────────────────────────────────────────────────────────────────────

const MOOD_CSS = `
/* === EDITORIAL — white-led, long-form magazine feel === */
[data-mood="editorial"] .cbm-hero { background: #fff; color: var(--cbm-charcoal); }
[data-mood="editorial"] .cbm-hero__photo { opacity: 0.18; filter: saturate(0.7); }
[data-mood="editorial"] .cbm-hero__scrim {
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0.96) 55%, rgba(255,255,255,0.7) 100%);
}
[data-mood="editorial"] .cbm-hero__inner { padding-top: 120px; padding-bottom: 140px; }
[data-mood="editorial"] .cbm-hero__eyebrow { color: var(--cbm-blue); }
[data-mood="editorial"] .cbm-hero__triplet { color: var(--cbm-blue); font-size: clamp(40px, 6vw, 80px); max-width: 18ch; }
[data-mood="editorial"] .cbm-hero__lede { color: var(--cbm-charcoal); max-width: 480px; }
[data-mood="editorial"] .cbm-hero__stripe { display: none; }
[data-mood="editorial"] .cbm-hero .cbm-btn--ghost-inv {
  color: var(--cbm-blue); box-shadow: inset 0 0 0 2px var(--cbm-blue);
}
[data-mood="editorial"] .cbm-hero .cbm-btn--ghost-inv:hover { background: var(--cbm-blue); color: #fff; }
[data-mood="editorial"] .cbm-section { padding-top: 112px; padding-bottom: 112px; }
[data-mood="editorial"] .cbm-section--tint { background: #FAF8F4; }
[data-mood="editorial"] .cbm-article__media { aspect-ratio: 4/3; }
[data-mood="editorial"] .cbm-article__title { font-size: 26px; }
[data-mood="editorial"] .cbm-article--lead .cbm-article__title { font-size: 38px; }
[data-mood="editorial"] .cbm-pillar__name { color: var(--cbm-charcoal); letter-spacing: 0.18em; }
[data-mood="editorial"] .cbm-pillar__icon svg { stroke-width: 1.25; }

/* === BOUTIQUE — minimal, type-led, monochrome === */
[data-mood="boutique"] .cbm-hero { background: var(--cbm-silver-2); color: var(--cbm-charcoal); }
[data-mood="boutique"] .cbm-hero__photo { display: none; }
[data-mood="boutique"] .cbm-hero__scrim { display: none; }
[data-mood="boutique"] .cbm-hero__inner { padding-top: 140px; padding-bottom: 160px; max-width: 960px; }
[data-mood="boutique"] .cbm-hero__eyebrow { color: var(--cbm-muted); letter-spacing: 0.24em; }
[data-mood="boutique"] .cbm-hero__triplet { color: var(--cbm-blue); font-size: clamp(56px, 8vw, 112px); letter-spacing: -0.025em; }
[data-mood="boutique"] .cbm-hero__triplet .gold { color: var(--cbm-blue); border-bottom: 4px solid var(--cbm-gold); padding-bottom: 4px; }
[data-mood="boutique"] .cbm-hero__lede { color: var(--cbm-charcoal); max-width: 540px; font-size: 16px; }
[data-mood="boutique"] .cbm-hero__stripe { display: none; }
[data-mood="boutique"] .cbm-hero .cbm-btn--gold { background: var(--cbm-blue); color: #fff; }
[data-mood="boutique"] .cbm-hero .cbm-btn--gold:hover { background: var(--cbm-blue-dark); }
[data-mood="boutique"] .cbm-hero .cbm-btn--ghost-inv {
  color: var(--cbm-blue); box-shadow: inset 0 0 0 2px var(--cbm-blue);
}
[data-mood="boutique"] .cbm-hero .cbm-btn--ghost-inv:hover { background: var(--cbm-blue); color: #fff; }
[data-mood="boutique"] .cbm-section { padding-top: 128px; padding-bottom: 128px; }
[data-mood="boutique"] .cbm-section-rule { display: none; }
[data-mood="boutique"] .cbm-section__title { font-weight: 600; letter-spacing: -0.02em; }
[data-mood="boutique"] .cbm-article { border-radius: 0; box-shadow: none !important; }
[data-mood="boutique"] .cbm-article__media { aspect-ratio: 3/4; opacity: 0.85; }
[data-mood="boutique"] .cbm-pillar__icon { opacity: 0.6; }
[data-mood="boutique"] .cbm-pillar__icon svg { stroke-width: 1; }
[data-mood="boutique"] .cbm-chip { background: transparent; padding-left: 0; padding-right: 0; }
[data-mood="boutique"] .cbm-chip--gold { background: var(--cbm-gold); padding-left: 10px; padding-right: 10px; }
`;

// Inject the mood styles once on first render.
let __moodInjected = false;
function injectMoodStyles() {
  if (__moodInjected) return;
  __moodInjected = true;
  const style = document.createElement('style');
  style.id = 'cbm-tweaks-mood';
  style.textContent = MOOD_CSS;
  document.head.appendChild(style);
}

// ─────────────────────────────────────────────────────────────────────────────
// CBM Tweaks panel
// ─────────────────────────────────────────────────────────────────────────────

const CBMTweaksPanel = ({ tweaks, setTweak }) => {
  const moods = [
    { id: 'authority', label: 'Authority' },
    { id: 'editorial', label: 'Editorial' },
    { id: 'boutique',  label: 'Boutique'  },
  ];
  const voices = [
    { id: 'triplet',   label: 'Triplet' },
    { id: 'statement', label: 'Statement' },
    { id: 'question',  label: 'Question' },
  ];
  const accentSwatches = Object.entries(ACCENT_PALETTES).map(([id, p]) => ({
    id, color: p.main, label: p.label,
  }));

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Mood" />
      <div style={{display:'grid', gap: 6}}>
        {moods.map(m => (
          <button
            key={m.id}
            className="twk-field"
            onClick={() => setTweak('mood', m.id)}
            style={{
              textAlign: 'left',
              padding: '8px 10px',
              height: 'auto',
              cursor: 'pointer',
              border: tweaks.mood === m.id ? '1px solid #29261b' : '0.5px solid rgba(0,0,0,0.1)',
              background: tweaks.mood === m.id ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.6)',
            }}
          >
            <div style={{fontSize: 12, fontWeight: 600, marginBottom: 2}}>{m.label}</div>
            <div style={{fontSize: 10.5, color: 'rgba(41,38,27,0.6)', lineHeight: 1.35}}>
              {m.id === 'authority' && 'Navy + gold, photographic hero. Per the brand book.'}
              {m.id === 'editorial' && 'White surfaces, long-form magazine feel. Photos retreat.'}
              {m.id === 'boutique'  && 'Type-only. Minimal gold. Quiet, refined, monochrome.'}
            </div>
          </button>
        ))}
      </div>

      <TweakSection label="Accent" />
      <div style={{display:'flex', gap: 8, flexWrap: 'wrap'}}>
        {accentSwatches.map(s => (
          <button
            key={s.id}
            onClick={() => setTweak('accent', s.id)}
            title={s.label}
            style={{
              width: 36, height: 36, borderRadius: 10,
              background: s.color,
              border: tweaks.accent === s.id ? '2px solid #29261b' : '0.5px solid rgba(0,0,0,0.15)',
              cursor: 'pointer', padding: 0,
              boxShadow: '0 1px 2px rgba(0,0,0,0.1)',
            }}
          />
        ))}
      </div>
      <div style={{fontSize: 10.5, color: 'rgba(41,38,27,0.6)', lineHeight: 1.4, marginTop: -4}}>
        {ACCENT_PALETTES[tweaks.accent]?.label} — applied to buttons, eyebrows, ad-tier headers and the third clause of every triplet.
      </div>

      <TweakSection label="Voice" />
      <TweakRadio
        label="Headline rhetoric"
        value={tweaks.voice}
        options={voices.map(v => v.id)}
        onChange={(v) => setTweak('voice', v)}
      />
      <div style={{fontSize: 10.5, color: 'rgba(41,38,27,0.6)', lineHeight: 1.45}}>
        {tweaks.voice === 'triplet' && (
          <span><strong>Triplet</strong> — the brand book signature. Three short clauses, gold third word.</span>
        )}
        {tweaks.voice === 'statement' && (
          <span><strong>Statement</strong> — assertive, single-clause. Reads like a publication of record.</span>
        )}
        {tweaks.voice === 'question' && (
          <span><strong>Question</strong> — provocative, editorial-led. Invites the reader in.</span>
        )}
      </div>
    </TweaksPanel>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// TweaksProvider — wraps the app, owns the state, exposes useTweaksCtx()
// ─────────────────────────────────────────────────────────────────────────────

const TweaksContext = React.createContext({ tweaks: TWEAK_DEFAULTS, setTweak: () => {} });

function TweaksProvider({ children }) {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply CSS variable overrides + data-mood every time something changes.
  React.useEffect(() => {
    injectMoodStyles();
    const root = document.querySelector('.app') || document.documentElement;
    const accent = ACCENT_PALETTES[t.accent] || ACCENT_PALETTES.gold;
    root.style.setProperty('--cbm-gold',       accent.main);
    root.style.setProperty('--cbm-gold-hover', accent.hover);
    root.style.setProperty('--cbm-gold-press', accent.press);
    root.style.setProperty('--cbm-on-accent',  accent.onAccent);
    root.setAttribute('data-mood', t.mood);
    root.setAttribute('data-voice', t.voice);
  }, [t.accent, t.mood, t.voice]);

  return (
    <TweaksContext.Provider value={{ tweaks: t, setTweak }}>
      {children}
      <CBMTweaksPanel tweaks={t} setTweak={setTweak} />
    </TweaksContext.Provider>
  );
}

const useTweaksCtx = () => React.useContext(TweaksContext);

Object.assign(window, { TweaksProvider, useTweaksCtx, VOICE_COPY });