/* Home page — Tweaks panel
   Exposes: accent color, typography pairing, hero variant.
*/

const { useEffect } = React;

const HOME_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0F4C4A",
  "typography": "inter-tight",
  "heroVariant": "framework"
}/*EDITMODE-END*/;

const ACCENTS = {
  '#0F4C4A': { ink: '#F6F5F1', soft: '#E4EBEA' }, // Petrol
  '#A34A2A': { ink: '#FAF7F3', soft: '#F1E5DD' }, // Terracotta
  '#2F5A3E': { ink: '#F6F5F1', soft: '#E1EAE1' }, // Forest
  '#1E2A5A': { ink: '#F6F5F1', soft: '#DDE0EC' }, // Indigo
};

const TYPOGRAPHY = {
  'inter-tight': {
    sans: "'Inter Tight', 'Inter', sans-serif",
    body: "'Inter', sans-serif",
    mono: "'JetBrains Mono', monospace",
  },
  'plex': {
    sans: "'IBM Plex Sans', sans-serif",
    body: "'IBM Plex Sans', sans-serif",
    mono: "'IBM Plex Mono', monospace",
  },
  'geist': {
    sans: "'Geist', 'Inter', sans-serif",
    body: "'Geist', 'Inter', sans-serif",
    mono: "'Geist Mono', 'JetBrains Mono', monospace",
  },
};

// Ensure the extra fonts are loaded once
function loadExtraFonts() {
  if (document.querySelector('[data-tweak-fonts]')) return;
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.dataset.tweakFonts = 'true';
  link.href = 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap';
  document.head.appendChild(link);
}

function HomeTweaks() {
  const [t, setTweak] = useTweaks(HOME_TWEAK_DEFAULTS);

  useEffect(() => { loadExtraFonts(); }, []);

  // Apply accent
  useEffect(() => {
    const hex = String(t.accent).toLowerCase();
    // Match case-insensitively; TweakColor lower-cases on emit
    const key = Object.keys(ACCENTS).find(k => k.toLowerCase() === hex);
    const meta = ACCENTS[key] || ACCENTS['#0F4C4A'];
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--accent-ink', meta.ink);
    document.documentElement.style.setProperty('--accent-soft', meta.soft);
  }, [t.accent]);

  // Apply typography
  useEffect(() => {
    const f = TYPOGRAPHY[t.typography] || TYPOGRAPHY['inter-tight'];
    document.documentElement.style.setProperty('--font-sans', f.sans);
    document.documentElement.style.setProperty('--font-body', f.body);
    document.documentElement.style.setProperty('--font-mono', f.mono);
  }, [t.typography]);

  // Apply hero variant
  useEffect(() => {
    applyHeroVariant(t.heroVariant);
  }, [t.heroVariant]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent color">
        <TweakColor
          value={t.accent}
          onChange={(v) => setTweak('accent', v)}
          options={['#0F4C4A', '#A34A2A', '#2F5A3E', '#1E2A5A']}
        />
      </TweakSection>

      <TweakSection label="Typography">
        <TweakRadio
          value={t.typography}
          onChange={(v) => setTweak('typography', v)}
          options={[
            { value: 'inter-tight', label: 'Inter Tight' },
            { value: 'plex',        label: 'IBM Plex' },
            { value: 'geist',       label: 'Geist' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Hero variant">
        <TweakRadio
          value={t.heroVariant}
          onChange={(v) => setTweak('heroVariant', v)}
          options={[
            { value: 'framework', label: 'Framework' },
            { value: 'portrait',  label: 'Portrait' },
            { value: 'quiet',     label: 'Quiet' },
          ]}
        />
      </TweakSection>

      <TweakSuggestionBar suggestions={[
        "Try the terracotta accent for a warmer feel",
        "Swap to Geist typography",
        "Show me the quiet hero variant",
      ]} />
    </TweaksPanel>
  );
}

function applyHeroVariant(variant) {
  const inner = document.querySelector('.hero__inner');
  if (!inner) return;
  const framework = inner.querySelector('.framework-card');
  if (!framework) return;

  // Remove any previously injected portrait
  const oldPortrait = inner.querySelector('[data-hero-portrait]');
  if (oldPortrait) oldPortrait.remove();

  if (variant === 'framework') {
    framework.style.display = '';
    inner.style.gridTemplateColumns = '';
  } else if (variant === 'portrait') {
    framework.style.display = 'none';
    const slot = document.createElement('figure');
    slot.dataset.heroPortrait = 'true';
    slot.style.maxWidth = '460px';
    slot.style.width = '100%';
    slot.style.justifySelf = 'end';
    slot.style.margin = '0';
    slot.innerHTML = `
      <img src="assets/agnes-portrait.jpg" alt="Agnes Goh"
           style="width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:4px;display:block;filter:contrast(1.02) saturate(1.02);" />
      <figcaption style="display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:0.9rem;margin-top:0.9rem;border-top:1px solid var(--rule);">
        <span class="mono-code">Founder / Implementation Partner</span>
        <span class="mono" style="font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);">Agnes Goh</span>
      </figcaption>
    `;
    inner.appendChild(slot);
    inner.style.gridTemplateColumns = '1.15fr 1fr';
  } else if (variant === 'quiet') {
    framework.style.display = 'none';
    inner.style.gridTemplateColumns = '1fr';
  }
}

// Mount
const tweaksRoot = document.createElement('div');
tweaksRoot.id = 'tweaks-root';
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<HomeTweaks />);