// Tweaks panel for Sruthi Kannan portfolio.
// Exposed knobs: display serif family, background tone, hero name treatment,
// CD layout (horizontal scroll vs grid), grain on/off, stagger speed.
//
// Persists via the parent host (__edit_mode_set_keys) which rewrites the
// JSON block in index.html between EDITMODE markers.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "displaySerif": "Fraunces",
  "bgTone": "linen",
  "heroName": "single",
  "cdLayout": "horizontal",
  "grain": true,
  "staggerSpeed": 1
}/*EDITMODE-END*/;

const SERIFS = {
  Fraunces: { stack: "'Fraunces', 'Playfair Display', serif", label: "Fraunces", sub: "Variable · characterful" },
  Playfair: { stack: "'Playfair Display', 'Fraunces', serif", label: "Playfair Display", sub: "Classic · safer" },
  Instrument: { stack: "'Instrument Serif', 'Fraunces', serif", label: "Instrument Serif", sub: "Light · editorial" },
};

const TONES = {
  linen:  { bg: "#F5F2EC", deep: "#ECE7DC", label: "Linen",  swatch: "#F5F2EC" },
  bone:   { bg: "#F1ECDF", deep: "#E5DECC", label: "Bone",   swatch: "#F1ECDF" },
  paper:  { bg: "#F8F6F1", deep: "#EFEBE3", label: "Paper",  swatch: "#F8F6F1" },
  ash:    { bg: "#EDEBE5", deep: "#E2DFD6", label: "Ash",    swatch: "#EDEBE5" },
};

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

  // Apply tweaks to the DOM live.
  React.useEffect(() => {
    const root = document.documentElement;
    const tone = TONES[t.bgTone] || TONES.linen;
    root.style.setProperty('--bg', tone.bg);
    root.style.setProperty('--bg-deep', tone.deep);

    const serif = SERIFS[t.displaySerif] || SERIFS.Fraunces;
    root.style.setProperty('--display', serif.stack);

    // grain on/off
    let grainStyle = document.getElementById('__grain-toggle');
    if (!grainStyle) {
      grainStyle = document.createElement('style');
      grainStyle.id = '__grain-toggle';
      document.head.appendChild(grainStyle);
    }
    grainStyle.textContent = t.grain ? '' : 'body::before { display: none !important; }';

    // hero name treatment
    const name = document.querySelector('.hero__name');
    if (name) {
      if (t.heroName === 'stacked') {
        name.innerHTML = '<span class="a" style="display:block; letter-spacing:0.04em; font-size:0.78em">SRUTHI</span><span class="a ital" style="display:block; letter-spacing:0.02em; font-size:0.78em">KANNAN</span>';
      } else if (t.heroName === 'large-ital') {
        name.innerHTML = '<span class="a ital" style="display:block">Sruthi</span><span class="a ital" style="display:block">Kannan</span>';
      }
      // 'single' default: leave the static HTML untouched
    }

    // CD layout — toggle a class on the wrapper that switches scroll → grid
    let cdStyle = document.getElementById('__cd-layout');
    if (!cdStyle) {
      cdStyle = document.createElement('style');
      cdStyle.id = '__cd-layout';
      document.head.appendChild(cdStyle);
    }
    if (t.cdLayout === 'grid') {
      cdStyle.textContent = `
        #cdScroll {
          display: grid !important;
          grid-template-columns: repeat(12, 1fr) !important;
          column-gap: 24px !important;
          row-gap: 48px !important;
          overflow: visible !important;
          padding: 0 var(--gutter) 24px !important;
        }
        #cdScroll::after { display: none !important; }
        .cd-card { width: 100% !important; }
        .cd-card--tall:nth-child(1) { grid-column: 1 / span 7 !important; height: 78vh !important; }
        .cd-card--wide:nth-child(2) { grid-column: 8 / span 5 !important; height: 60vh !important; margin-top: 8vh !important; }
        .cd-card--mid:nth-child(3) { grid-column: 1 / span 5 !important; height: 60vh !important; margin: 0 !important; }
        .cd-card--tall:nth-child(4) { grid-column: 6 / span 7 !important; height: 72vh !important; }
        .hscroll-meta .progress, .hscroll-meta span:first-child { display: none !important; }
      `;
    } else {
      cdStyle.textContent = '';
    }

    // stagger speed
    let stStyle = document.getElementById('__stagger-speed');
    if (!stStyle) {
      stStyle = document.createElement('style');
      stStyle.id = '__stagger-speed';
      document.head.appendChild(stStyle);
    }
    const m = t.staggerSpeed || 1;
    stStyle.textContent = `
      .loaded .stagger > * { animation-duration: ${Math.round(1100 * m)}ms !important; }
      .loaded .stagger > *:nth-child(1) { animation-delay: ${Math.round(80 * m)}ms !important; }
      .loaded .stagger > *:nth-child(2) { animation-delay: ${Math.round(180 * m)}ms !important; }
      .loaded .stagger > *:nth-child(3) { animation-delay: ${Math.round(240 * m)}ms !important; }
      .loaded .stagger > *:nth-child(4) { animation-delay: ${Math.round(380 * m)}ms !important; }
      .loaded .stagger > *:nth-child(5) { animation-delay: ${Math.round(720 * m)}ms !important; }
      .loaded .stagger > *:nth-child(6) { animation-delay: ${Math.round(820 * m)}ms !important; }
      .reveal { transition-duration: ${Math.round(1100 * m)}ms !important; }
    `;
  }, [t]);

  return (
    <TweaksPanel title="Tweaks · Studio">
      <TweakSection label="Type">
        <TweakSelect
          label="Display serif"
          value={t.displaySerif}
          onChange={(v) => setTweak('displaySerif', v)}
          options={Object.entries(SERIFS).map(([k, s]) => ({ value: k, label: s.label, sub: s.sub }))}
        />
      </TweakSection>

      <TweakSection label="Paper">
        <TweakRadio
          label="Background tone"
          value={t.bgTone}
          onChange={(v) => setTweak('bgTone', v)}
          options={Object.entries(TONES).map(([k, tn]) => ({ value: k, label: tn.label }))}
        />
        <TweakToggle
          label="Paper grain"
          value={t.grain}
          onChange={(v) => setTweak('grain', v)}
        />
      </TweakSection>

      <TweakSection label="Hero">
        <TweakRadio
          label="Name treatment"
          value={t.heroName}
          onChange={(v) => setTweak('heroName', v)}
          options={[
            { value: 'single', label: 'Single line' },
            { value: 'stacked', label: 'Stacked caps' },
            { value: 'large-ital', label: 'All italic' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Creative Direction">
        <TweakRadio
          label="Layout"
          value={t.cdLayout}
          onChange={(v) => setTweak('cdLayout', v)}
          options={[
            { value: 'horizontal', label: 'Horizontal' },
            { value: 'grid', label: 'Editorial grid' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Motion">
        <TweakSlider
          label="Stagger speed"
          value={t.staggerSpeed}
          onChange={(v) => setTweak('staggerSpeed', v)}
          min={0.4} max={2.4} step={0.1}
          unit="×"
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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