// app.jsx — root composition for the Warmline landing page

const PRODUCT_NAME = "relatIQ";

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "bone"
}/*EDITMODE-END*/;

const THEME_OPTIONS = [
  { id: "bone", label: "Bone",  swatch: ["#f4ede2", "#1a1612", "#b65f3a"] },
  { id: "sage", label: "Sage",  swatch: ["#ecefe5", "#16201a", "#5a7a4f"] },
  { id: "mist", label: "Mist",  swatch: ["#e8ecf0", "#141a23", "#4d6c8a"] },
  { id: "plum", label: "Plum",  swatch: ["#efe9e6", "#1f1719", "#8a4f63"] },
];

function Swatch({ colors, active, label, onClick }) {
  return (
    <button
      type="button"
      onClick={onClick}
      title={label}
      style={{
        appearance: "none", border: active ? "2px solid var(--ink)" : "1px solid rgba(0,0,0,0.18)",
        background: "transparent", padding: 4, borderRadius: 999,
        display: "inline-flex", alignItems: "center", gap: 4, cursor: "pointer",
      }}
    >
      {colors.map((c, i) => (
        <span key={i} style={{
          display: "block", width: 14, height: 14, borderRadius: "50%", background: c,
          boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.12)"
        }}></span>
      ))}
      <span style={{ fontSize: 11, paddingRight: 6, color: "rgba(41,38,27,0.72)" }}>{label}</span>
    </button>
  );
}

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

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme);
  }, [t.theme]);

  return (
    <React.Fragment>
      <Nav name={PRODUCT_NAME} />
      <Hero name={PRODUCT_NAME} />
      <Differentiator />
      <Triage />
      <UseCases />
      <FounderNote name={PRODUCT_NAME} />
      <Waitlist name={PRODUCT_NAME} />
      <Footer name={PRODUCT_NAME} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          {THEME_OPTIONS.map(opt => (
            <Swatch
              key={opt.id}
              colors={opt.swatch}
              label={opt.label}
              active={t.theme === opt.id}
              onClick={() => setTweak("theme", opt.id)}
            />
          ))}
        </div>
        <TweakSection label="About" />
        <div style={{ fontSize: 11, color: "rgba(41,38,27,0.6)", lineHeight: 1.5 }}>
          Final name <b>relatIQ</b>. Swap palettes to compare warmth ranges.
        </div>
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);