// tweaks_panel.jsx — floating design-tweaks panel (recreated).
// Provides the small dev control surface App.jsx wires up: a collapsible
// panel docked bottom-right with palette / font / hero-copy / promo controls,
// plus a read-only "ideas" list. All pieces exposed via window.* at the bottom.

function useTweaks(defaults) {
  const [t, setT] = React.useState(defaults);
  const setTweak = React.useCallback((key, value) => {
    setT(prev => ({ ...prev, [key]: value }));
  }, []);
  return [t, setTweak];
}

function TweaksPanel({ children }) {
  const [open, setOpen] = React.useState(false);

  return (
    <div style={styles.wrap}>
      {open && (
        <div style={styles.panel}>
          <div style={styles.header}>
            <span style={styles.headerTitle}>Design tweaks</span>
            <button style={styles.close} onClick={() => setOpen(false)} aria-label="Close">×</button>
          </div>
          <div style={styles.body}>{children}</div>
        </div>
      )}
      <button style={styles.fab} onClick={() => setOpen(o => !o)}>
        {open ? "Hide tweaks" : "Tweaks"}
      </button>
    </div>
  );
}

function TweakSection({ title, children }) {
  return (
    <div style={styles.section}>
      {title && <div style={styles.sectionTitle}>{title}</div>}
      {children}
    </div>
  );
}

function TweakSelect({ label, value, onChange, options }) {
  return (
    <label style={styles.field}>
      {label && <span style={styles.label}>{label}</span>}
      <select style={styles.select} value={value} onChange={e => onChange(e.target.value)}>
        {options.map(o => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
    </label>
  );
}

function TweakRadio({ value, onChange, options }) {
  return (
    <div style={styles.radioRow}>
      {options.map(o => {
        const active = o.value === value;
        return (
          <button
            key={o.value}
            onClick={() => onChange(o.value)}
            style={{ ...styles.chip, ...(active ? styles.chipActive : null) }}
          >
            {o.label}
          </button>
        );
      })}
    </div>
  );
}

function TweakToggle({ label, value, onChange }) {
  return (
    <label style={styles.toggleRow}>
      <span style={styles.label}>{label}</span>
      <button
        role="switch"
        aria-checked={value}
        onClick={() => onChange(!value)}
        style={{ ...styles.track, ...(value ? styles.trackOn : null) }}
      >
        <span style={{ ...styles.knob, ...(value ? styles.knobOn : null) }} />
      </button>
    </label>
  );
}

function TweakSuggestionBar({ suggestions }) {
  if (!suggestions || !suggestions.length) return null;
  return (
    <div style={styles.section}>
      <div style={styles.sectionTitle}>Ideas to explore next</div>
      <ul style={styles.suggestions}>
        {suggestions.map((s, i) => (
          <li key={i} style={styles.suggestion}>{s}</li>
        ))}
      </ul>
    </div>
  );
}

const styles = {
  wrap: { position: "fixed", right: 20, bottom: 20, zIndex: 9999, fontFamily: "Inter, system-ui, sans-serif" },
  fab: {
    appearance: "none", border: "none", cursor: "pointer",
    background: "var(--brand, #0A5BFF)", color: "#fff",
    fontWeight: 600, fontSize: 14, padding: "12px 18px", borderRadius: 999,
    boxShadow: "0 8px 24px rgba(10,91,255,.35)",
  },
  panel: {
    width: 320, maxHeight: "70vh", overflowY: "auto",
    background: "#fff", borderRadius: 18, marginBottom: 12,
    boxShadow: "0 20px 60px rgba(17,20,24,.22)", border: "1px solid #e6e8eb",
  },
  header: {
    display: "flex", alignItems: "center", justifyContent: "space-between",
    padding: "14px 16px", borderBottom: "1px solid #e6e8eb",
  },
  headerTitle: { fontWeight: 700, fontSize: 15, color: "#111418" },
  close: { appearance: "none", border: "none", background: "none", cursor: "pointer", fontSize: 22, lineHeight: 1, color: "#4a5159" },
  body: { padding: "8px 16px 16px" },
  section: { padding: "12px 0", borderBottom: "1px solid #f0f1f3" },
  sectionTitle: { fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".04em", color: "#4a5159", marginBottom: 8 },
  field: { display: "block", marginBottom: 4 },
  label: { display: "block", fontSize: 13, color: "#4a5159", marginBottom: 6 },
  select: {
    width: "100%", padding: "9px 10px", borderRadius: 10,
    border: "1px solid #e6e8eb", fontSize: 14, background: "#fff", color: "#111418",
  },
  radioRow: { display: "flex", flexWrap: "wrap", gap: 8 },
  chip: {
    appearance: "none", cursor: "pointer", fontSize: 13, fontWeight: 600,
    padding: "7px 12px", borderRadius: 999, border: "1px solid #e6e8eb",
    background: "#f6f1ea", color: "#111418",
  },
  chipActive: { background: "var(--brand, #0A5BFF)", borderColor: "var(--brand, #0A5BFF)", color: "#fff" },
  toggleRow: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 },
  track: {
    width: 44, height: 26, borderRadius: 999, border: "none", cursor: "pointer",
    background: "#d4d8dd", position: "relative", flex: "0 0 auto", transition: "background .15s",
  },
  trackOn: { background: "var(--brand, #0A5BFF)" },
  knob: {
    position: "absolute", top: 3, left: 3, width: 20, height: 20, borderRadius: "50%",
    background: "#fff", transition: "left .15s", boxShadow: "0 1px 3px rgba(0,0,0,.2)",
  },
  knobOn: { left: 21 },
  suggestions: { margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 6 },
  suggestion: { fontSize: 13, color: "#4a5159", lineHeight: 1.4, paddingLeft: 14, position: "relative" },
};

Object.assign(window, {
  useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakRadio, TweakToggle, TweakSuggestionBar,
});