// App shell for Skillhub Builders
const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React;

const PALETTES = JSON.parse(document.getElementById("theme-palettes").textContent);

function applyPalette(paletteId, themeId) {
  const p = PALETTES[paletteId]?.[themeId];
  if (!p) return;
  const r = document.documentElement.style;
  r.setProperty("--bg", p.bg);
  r.setProperty("--surface", p.surface);
  r.setProperty("--surface-2", p.surface2);
  r.setProperty("--line", p.line);
  r.setProperty("--line-strong", p.lineStrong);
  r.setProperty("--fg", p.fg);
  r.setProperty("--fg-2", p.fg2);
  r.setProperty("--fg-3", p.fg3);
  r.setProperty("--accent", p.accent);
  r.setProperty("--accent-fg", p.accentFg);
  r.setProperty("--accent-soft", p.accentSoft);
}

function App() {
  const defaults = window.TWEAK_DEFAULTS || {};
  const [palette, setPalette]       = useStateA(defaults.palette || "mono");
  const [theme, setTheme]           = useStateA(defaults.theme || "light");
  const [heroVariant, setHeroVariant] = useStateA(defaults.heroVariant || "terminal");
  const [pricingCopy, setPricingCopy] = useStateA(defaults.pricingCopy || "friendly");
  const [tweaksOpen, setTweaksOpen]   = useStateA(false);
  const [editMode, setEditMode]       = useStateA(false);

  // apply theme + palette
  useEffectA(() => { applyPalette(palette, theme); }, [palette, theme]);

  // host <-> iframe edit mode
  useEffectA(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === "__activate_edit_mode") { setEditMode(true); setTweaksOpen(true); }
      if (d.type === "__deactivate_edit_mode") { setEditMode(false); setTweaksOpen(false); }
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const persist = (edits) => {
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*");
  };

  return (
    <>
      <Nav hasTweaks={editMode} onOpenTweaks={() => setTweaksOpen(v => !v)} />
      <Hero variant={heroVariant} />
      <Ticker items={["websites from $200", "mobile apps from $500", "social media, tailored to you", "you own everything", "local businesses only", "Austin, TX"]} />
      <Services />
      <Process />
      <Pricing copy={pricingCopy} />
      <FAQ />
      <Contact />
      <Footer />
      {editMode && tweaksOpen && (
        <TweaksPanel
          values={{ palette, theme, heroVariant, pricingCopy }}
          onChange={(k, v) => {
            if (k === "palette") setPalette(v);
            if (k === "theme") setTheme(v);
            if (k === "heroVariant") setHeroVariant(v);
            if (k === "pricingCopy") setPricingCopy(v);
            persist({ [k]: v });
          }}
          onClose={() => setTweaksOpen(false)}
        />
      )}
    </>
  );
}

function TweaksPanel({ values, onChange, onClose }) {
  return (
    <div style={{
      position: "fixed", right: 20, bottom: 20, zIndex: 100,
      width: 320, background: "var(--surface)", color: "var(--fg)",
      border: "1px solid var(--line-strong)", borderRadius: 10,
      boxShadow: "0 20px 60px -20px rgba(0,0,0,0.35)", overflow: "hidden",
      fontFamily: "var(--sans)"
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 14px", borderBottom: "1px solid var(--line)", background: "var(--surface-2)" }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          <Dot color="var(--accent)" pulse />
          <span className="mono" style={{ color: "var(--fg)" }}>Tweaks</span>
        </span>
        <button onClick={onClose} style={{ color: "var(--fg-2)", fontSize: 14 }}>×</button>
      </div>
      <div style={{ padding: 14, display: "grid", gap: 16 }}>
        <TweakRow label="Palette">
          <Segment value={values.palette} onChange={v => onChange("palette", v)}
            options={[["mono","Mono"],["signal","Signal"],["cobalt","Cobalt"]]} />
          <div style={{ display: "flex", gap: 6, marginTop: 8 }}>
            {["mono","signal","cobalt"].map(p => (
              <Swatch key={p} p={p} active={values.palette === p} theme={values.theme} onClick={() => onChange("palette", p)} />
            ))}
          </div>
        </TweakRow>
        <TweakRow label="Theme">
          <Segment value={values.theme} onChange={v => onChange("theme", v)}
            options={[["light","Light"],["dark","Dark"]]} />
        </TweakRow>
        <TweakRow label="Hero layout">
          <Segment value={values.heroVariant} onChange={v => onChange("heroVariant", v)}
            options={[["terminal","Terminal"],["statement","Statement"],["grid","Grid"]]} />
        </TweakRow>
        <TweakRow label="Pricing copy">
          <Segment value={values.pricingCopy} onChange={v => onChange("pricingCopy", v)}
            options={[["friendly","Friendly"],["direct","Direct"],["playful","Playful"]]} />
        </TweakRow>
      </div>
    </div>
  );
}

function TweakRow({ label, children }) {
  return (
    <div>
      <Label style={{ color: "var(--fg-2)", display: "block", marginBottom: 6 }}>{label}</Label>
      {children}
    </div>
  );
}

function Segment({ value, onChange, options }) {
  return (
    <div style={{ display: "flex", border: "1px solid var(--line-strong)", borderRadius: 6, padding: 2, gap: 2 }}>
      {options.map(([v, l]) => (
        <button key={v} onClick={() => onChange(v)}
          style={{
            flex: 1, padding: "7px 8px", borderRadius: 4, fontFamily: "var(--mono)",
            fontSize: 10.5, letterSpacing: "0.05em", textTransform: "uppercase",
            background: value === v ? "var(--fg)" : "transparent",
            color: value === v ? "var(--bg)" : "var(--fg-2)",
            transition: "all 160ms"
          }}>{l}</button>
      ))}
    </div>
  );
}

function Swatch({ p, active, theme, onClick }) {
  const c = PALETTES[p][theme];
  return (
    <button onClick={onClick} aria-label={p} style={{
      flex: 1, height: 32, borderRadius: 6, padding: 2,
      border: `1.5px solid ${active ? c.accent : "var(--line-strong)"}`,
      background: c.bg, display: "flex", gap: 2, overflow: "hidden"
    }}>
      <span style={{ flex: 1, background: c.surface, borderRadius: 3 }} />
      <span style={{ flex: 1, background: c.accent, borderRadius: 3 }} />
      <span style={{ flex: 1, background: c.fg, borderRadius: 3 }} />
    </button>
  );
}

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