// Tweaks panel — toggle design variations

const TweaksPanel = ({ tweaks, setTweak, active }) => {
  const [collapsed, setCollapsed] = React.useState(false);
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); }, [collapsed]);

  const groups = [
    {
      key: 'heroVariant',
      label: 'Home hero layout',
      options: [
        { v: 'stacked', l: 'Stacked' },
        { v: 'overlay', l: 'Overlay' },
        { v: 'split', l: 'Split' },
      ],
      pages: ['home'],
    },
    {
      key: 'formStyle',
      label: 'Dedications list density',
      options: [
        { v: 'comfortable', l: 'Comfortable' },
        { v: 'compact', l: 'Compact (3-col)' },
      ],
      pages: ['dedications'],
    },
    {
      key: 'accent',
      label: 'Accent treatment',
      options: [
        { v: 'default', l: 'Default' },
        { v: 'softer', l: 'Softer' },
        { v: 'bolder', l: 'Bolder' },
      ],
    },
  ];

  return (
    <div className={`tweaks-panel ${collapsed ? 'collapsed' : ''}`}>
      <div className="tweaks-head" onClick={() => setCollapsed(!collapsed)}>
        <strong>Tweaks</strong>
        <Icon name="chevron-down" size={16} />
      </div>
      <div className="tweaks-body">
        {groups.map(g => {
          if (g.pages && !g.pages.includes(active)) return null;
          return (
            <div key={g.key} className="tweak-group">
              <div className="tweak-label">{g.label}</div>
              <div className="tweak-options">
                {g.options.map(o => (
                  <button
                    key={o.v}
                    className={`tweak-btn ${tweaks[g.key] === o.v ? 'on' : ''}`}
                    onClick={() => setTweak(g.key, o.v)}
                  >{o.l}</button>
                ))}
              </div>
            </div>
          );
        })}
        <div style={{ fontSize: 11, color: 'var(--ink-500)', marginTop: 8, paddingTop: 12, borderTop: '1px solid var(--ink-100)' }}>
          Tweaks preview design options. Chosen values bake in on export.
        </div>
      </div>
    </div>
  );
};

window.TweaksPanel = TweaksPanel;