/* Tweaks layer · Anthony & Mellie landing
   Vanilla page is the production deliverable; this only attaches when host
   activates edit mode. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "stacked",
  "manifestoStyle": "centered",
  "portfolioDensity": "4col",
  "priceWeight": "regular",
  "showTicker": true,
  "showStikyMention": true,
  "remainingSlots": 7,
  "heroTitleSize": 100
}/*EDITMODE-END*/;

const { useEffect } = React;

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

  // ── Apply tweaks to DOM ──────────────────────────────────────────
  useEffect(() => {
    // Ticker visibility
    const ticker = document.querySelector('.ticker');
    if (ticker) ticker.style.display = t.showTicker ? '' : 'none';

    // Hero title size
    const ht = document.querySelector('.hero-title');
    if (ht) ht.style.fontSize = `clamp(46px, 9.5vw, ${t.heroTitleSize}px)`;

    // Hero layout: stacked vs split (image right of title)
    const hero = document.querySelector('.hero');
    if (hero) hero.dataset.layout = t.heroLayout;

    // Manifesto style
    const manifeste = document.querySelector('.manifeste');
    if (manifeste) manifeste.dataset.style = t.manifestoStyle;

    // Portfolio density
    const pg = document.querySelector('.portfolio-grid');
    if (pg) {
      pg.style.gridTemplateColumns =
        t.portfolioDensity === '3col' ? 'repeat(3, 1fr)' :
        t.portfolioDensity === '5col' ? 'repeat(5, 1fr)' :
        'repeat(4, 1fr)';
    }

    // Price weight
    const price = document.querySelector('.price');
    if (price) price.style.fontWeight = t.priceWeight === 'bold' ? '600' : '400';

    // Stiky mention
    const stiky = document.querySelector('.duo-stiky');
    if (stiky) stiky.style.display = t.showStikyMention ? '' : 'none';

    // Remaining slots — sync ticker + booking badge
    const slotsTicker = document.getElementById('slots-count');
    if (slotsTicker) slotsTicker.textContent = `${t.remainingSlots} / 10 créneaux disponibles`;
    const badge = document.querySelector('.booking-badge span:last-child');
    if (badge) badge.textContent = `${t.remainingSlots} créneaux restants sur 10`;
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Édition">
        <TweakToggle label="Bandeau ticker" value={t.showTicker} onChange={v => setTweak('showTicker', v)} />
        <TweakSlider label="Créneaux restants" min={0} max={10} step={1} value={t.remainingSlots} onChange={v => setTweak('remainingSlots', v)} />
      </TweakSection>

      <TweakSection title="Hero">
        <TweakSlider label="Taille titre (max px)" min={64} max={140} step={2} value={t.heroTitleSize} onChange={v => setTweak('heroTitleSize', v)} />
      </TweakSection>

      <TweakSection title="Manifeste">
        <TweakRadio
          label="Traitement"
          value={t.manifestoStyle}
          options={[
            { label: 'Centré',    value: 'centered' },
            { label: 'Aligné G.', value: 'left' },
          ]}
          onChange={v => setTweak('manifestoStyle', v)}
        />
      </TweakSection>

      <TweakSection title="Portfolio">
        <TweakRadio
          label="Densité"
          value={t.portfolioDensity}
          options={[
            { label: '3 col', value: '3col' },
            { label: '4 col', value: '4col' },
            { label: '5 col', value: '5col' },
          ]}
          onChange={v => setTweak('portfolioDensity', v)}
        />
      </TweakSection>

      <TweakSection title="L'offre">
        <TweakRadio
          label="Prix"
          value={t.priceWeight}
          options={[
            { label: 'Régulier', value: 'regular' },
            { label: 'Gras',     value: 'bold' },
          ]}
          onChange={v => setTweak('priceWeight', v)}
        />
        <TweakToggle label="Mention Stiky Design" value={t.showStikyMention} onChange={v => setTweak('showStikyMention', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

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