// Contact-page tweaks — three expressive, feel-reshaping controls.
const { useEffect } = React;

function ContactTweaks() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "layout": "split",
    "channels": "table",
    "motif": "rings"
  }/*EDITMODE-END*/;

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

  useEffect(() => {
    const grid = document.querySelector('.contact-grid');
    const channels = document.querySelector('.contact-channels');
    const form = document.querySelector('.contact-form');
    const hero = document.querySelector('.content-hero');
    if (!grid || !channels || !form || !hero) return;

    // —— LAYOUT — reshapes how the page presents form vs channels ——
    grid.style.display = '';
    grid.style.gridTemplateColumns = '';
    grid.style.gap = '';
    grid.style.maxWidth = '';
    grid.style.margin = '';
    form.style.padding = '';
    form.style.background = '';
    form.style.border = '';
    form.style.boxShadow = '';
    form.style.borderRadius = '';

    if (t.layout === 'split') {
      // default — two columns side by side
      grid.style.gridTemplateColumns = '1fr 1fr';
      grid.style.gap = '80px';
    } else if (t.layout === 'centered') {
      // single intimate column, channels at top, form below, max 720px
      grid.style.gridTemplateColumns = '1fr';
      grid.style.maxWidth = '720px';
      grid.style.margin = '0 auto';
      grid.style.gap = '60px';
      form.style.padding = '48px';
      form.style.boxShadow = '0 40px 80px -20px rgba(0,0,0,0.4)';
    } else if (t.layout === 'overlay') {
      // form floats over a wider channel canvas — overlapping cards
      grid.style.gridTemplateColumns = '1fr';
      grid.style.gap = '0';
      grid.style.position = 'relative';
      form.style.position = 'relative';
      form.style.marginTop = '-80px';
      form.style.marginLeft = 'auto';
      form.style.maxWidth = '560px';
      form.style.padding = '48px';
      form.style.boxShadow = '0 40px 100px -20px rgba(0,0,0,0.5), 0 0 0 1px rgba(31,184,122,0.15)';
      form.style.background = 'var(--ink)';
      form.style.zIndex = '2';
    }

    // —— CHANNELS — reshapes how contact methods are listed ——
    if (t.channels === 'table') {
      // default — quiet table-like rows
      channels.style.display = 'flex';
      channels.style.flexDirection = 'column';
      channels.style.gap = '4px';
      channels.querySelectorAll('.contact-channel').forEach(el => {
        el.style.display = 'grid';
        el.style.gridTemplateColumns = '100px 1fr auto';
        el.style.gap = '24px';
        el.style.padding = '24px 0';
        el.style.background = '';
        el.style.border = '';
        el.style.borderBottom = '1px solid var(--hairline)';
        el.style.borderRadius = '';
        el.style.alignItems = 'center';
      });
    } else if (t.channels === 'cards') {
      // confident card stack with hover lift
      channels.style.display = 'grid';
      channels.style.gridTemplateColumns = '1fr 1fr';
      channels.style.gap = '12px';
      channels.querySelectorAll('.contact-channel').forEach(el => {
        el.style.display = 'flex';
        el.style.flexDirection = 'column';
        el.style.gridTemplateColumns = '';
        el.style.gap = '12px';
        el.style.padding = '24px';
        el.style.background = 'var(--midnight)';
        el.style.border = '1px solid var(--hairline)';
        el.style.borderRadius = '4px';
        el.style.alignItems = 'flex-start';
      });
    } else if (t.channels === 'editorial') {
      // big, generous, editorial — each channel a hero of its own
      channels.style.display = 'flex';
      channels.style.flexDirection = 'column';
      channels.style.gap = '0';
      channels.querySelectorAll('.contact-channel').forEach((el, i) => {
        el.style.display = 'grid';
        el.style.gridTemplateColumns = '60px 1fr';
        el.style.gap = '32px';
        el.style.padding = '36px 0';
        el.style.borderBottom = '1px solid var(--hairline)';
        el.style.background = '';
        el.style.border = '';
        el.style.alignItems = 'baseline';
        const info = el.querySelector('.contact-channel-info');
        if (info) {
          info.style.fontSize = '32px';
          info.style.lineHeight = '1.15';
        }
        // hide the small response-time badge in editorial mode
        const last = el.children[el.children.length - 1];
        if (last && last !== info && last.classList.contains('mono')) last.style.display = 'none';
      });
    }

    // —— MOTIF — ambient hero treatment ——
    let motifBg = hero.querySelector('.contact-motif');
    if (!motifBg) {
      motifBg = document.createElement('div');
      motifBg.className = 'contact-motif';
      motifBg.style.cssText = 'position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0.6;';
      hero.style.position = 'relative';
      hero.style.overflow = 'hidden';
      hero.insertBefore(motifBg, hero.firstChild);
      // make sure inner content is on top
      const inner = hero.querySelector('.container-wide');
      if (inner) { inner.style.position = 'relative'; inner.style.zIndex = '1'; }
    }
    if (t.motif === 'rings') {
      motifBg.innerHTML = `<svg viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%">
        <g fill="none" stroke="#1FB87A" stroke-width="0.4" opacity="0.5" style="transform-origin:900px 300px;animation:ringSpin 90s linear infinite">
          <circle cx="900" cy="300" r="60"/><circle cx="900" cy="300" r="120"/><circle cx="900" cy="300" r="180"/><circle cx="900" cy="300" r="240"/><circle cx="900" cy="300" r="300"/>
        </g>
      </svg>`;
    } else if (t.motif === 'grid') {
      motifBg.innerHTML = `<svg viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%">
        <defs><pattern id="ctgrid" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(31,184,122,0.15)" stroke-width="0.5"/>
        </pattern></defs>
        <rect width="100%" height="100%" fill="url(#ctgrid)"/>
        <line x1="0" y1="300" x2="1200" y2="300" stroke="rgba(31,184,122,0.4)" stroke-width="0.5" stroke-dasharray="4,8"/>
        <line x1="600" y1="0" x2="600" y2="600" stroke="rgba(31,184,122,0.4)" stroke-width="0.5" stroke-dasharray="4,8"/>
        <text x="20" y="20" font-family="JetBrains Mono" font-size="9" fill="#1FB87A" letter-spacing="2" opacity="0.6">N° 010 · CONTACT</text>
      </svg>`;
    } else if (t.motif === 'wave') {
      motifBg.innerHTML = `<svg viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%">
        <defs><linearGradient id="ctw"><stop offset="0" stop-color="#1FB87A" stop-opacity="0"/><stop offset="0.5" stop-color="#1FB87A" stop-opacity="0.6"/><stop offset="1" stop-color="#1FB87A" stop-opacity="0"/></linearGradient></defs>
        <g fill="none" stroke="url(#ctw)" stroke-width="0.6">
          <path d="M 0 380 Q 300 320 600 380 T 1200 380"/>
          <path d="M 0 410 Q 300 350 600 410 T 1200 410" opacity="0.7"/>
          <path d="M 0 440 Q 300 380 600 440 T 1200 440" opacity="0.5"/>
          <path d="M 0 470 Q 300 410 600 470 T 1200 470" opacity="0.3"/>
        </g>
      </svg>`;
    } else if (t.motif === 'none') {
      motifBg.innerHTML = '';
    }
  }, [t]);

  return (
    <TweaksPanel title="Contact Tweaks">
      <TweakSection label="Page architecture" />
      <TweakRadio
        label="Layout"
        value={t.layout}
        onChange={(v) => setTweak('layout', v)}
        options={[
          { value: 'split',    label: 'Split' },
          { value: 'centered', label: 'Centered' },
          { value: 'overlay',  label: 'Overlay' }
        ]}
      />

      <TweakSection label="Channel presentation" />
      <TweakRadio
        label="Style"
        value={t.channels}
        onChange={(v) => setTweak('channels', v)}
        options={[
          { value: 'table',     label: 'Quiet table' },
          { value: 'cards',     label: 'Card grid' },
          { value: 'editorial', label: 'Editorial' }
        ]}
      />

      <TweakSection label="Hero motif" />
      <TweakRadio
        label="Motif"
        value={t.motif}
        onChange={(v) => setTweak('motif', v)}
        options={[
          { value: 'rings', label: 'Rings' },
          { value: 'grid',  label: 'Survey grid' },
          { value: 'wave',  label: 'Waveform' },
          { value: 'none',  label: 'None' }
        ]}
      />
    </TweaksPanel>
  );
}

const ctTweakRoot = document.createElement('div');
ctTweakRoot.id = 'contact-tweaks-root';
document.body.appendChild(ctTweakRoot);
ReactDOM.createRoot(ctTweakRoot).render(<ContactTweaks />);