// tweaks-app.jsx — Tweaks panel for the Total Loving Care landing page.

const TLC_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "coral",
  "headline": "Exceptional care. Total peace of mind.",
  "heroPhoto": "hero-resident.jpg",
  "showProof": true
}/*EDITMODE-END*/;

const TLC_HEADLINES = {
  "Exceptional care. Total peace of mind.": ["Exceptional care.<br />Total <span class=\"serif-i\">peace of mind.</span>"],
  "When they need more, we're here.": ["When they need more,<br />we're <span class=\"serif-i\">here.</span>"],
  "A loving home for the people who raised you.": ["A loving home for<br />the people who <span class=\"serif-i\">raised you.</span>"],
  "Safe, cared for, and still family.": ["Safe, cared for,<br />and still <span class=\"serif-i\">family.</span>"]
};

const TLC_PHOTOS = {
  "Resident outdoors (warmth)": "hero-resident.jpg",
  "Family visiting (connection)": "family.jpg",
  "Activity together (community)": "dominoes.png",
  "Friends on the porch (calm)": "porch.jpg"
};

function TLCTweaks() {
  const [t, setTweak] = useTweaks(TLC_TWEAK_DEFAULTS);

  // Apply mood
  React.useEffect(() => {
    document.documentElement.setAttribute('data-mood', t.mood);
  }, [t.mood]);

  // Apply headline
  React.useEffect(() => {
    const el = document.getElementById('heroHeadline');
    if (el && TLC_HEADLINES[t.headline]) el.innerHTML = TLC_HEADLINES[t.headline][0];
  }, [t.headline]);

  // Apply hero photo
  React.useEffect(() => {
    const el = document.getElementById('heroPhoto');
    if (el) el.src = 'assets/' + t.heroPhoto;
  }, [t.heroPhoto]);

  // Toggle proof chip
  React.useEffect(() => {
    const chip = document.querySelector('.proof-chip');
    if (chip) chip.style.display = t.showProof ? '' : 'none';
  }, [t.showProof]);

  const headlineKeys = Object.keys(TLC_HEADLINES);
  const photoLabels = Object.keys(TLC_PHOTOS);
  const currentPhotoLabel = photoLabels.find(k => TLC_PHOTOS[k] === t.heroPhoto) || photoLabels[0];

  return (
    <TweaksPanel>
      <TweakSection label="Color mood" />
      <TweakColor label="Action color" value={t.mood === 'coral' ? '#D9694F' : t.mood === 'teal' ? '#2E6E73' : '#5F7C4D'}
        options={['#D9694F', '#2E6E73', '#5F7C4D']}
        onChange={(v) => setTweak('mood', v === '#2E6E73' ? 'teal' : v === '#5F7C4D' ? 'sage' : 'coral')} />

      <TweakSection label="Hero" />
      <TweakSelect label="Headline" value={t.headline} options={headlineKeys}
        onChange={(v) => setTweak('headline', v)} />
      <TweakSelect label="Hero photo" value={currentPhotoLabel} options={photoLabels}
        onChange={(v) => setTweak('heroPhoto', TLC_PHOTOS[v])} />
      <TweakToggle label="Show review on photo" value={t.showProof}
        onChange={(v) => setTweak('showProof', v)} />
    </TweaksPanel>
  );
}

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