// app.jsx — Main app: assembles sections + Tweaks panel

// Palettes: [primary, accent, surface, surface-2, ink, ink-muted, line, line-strong]
const PALETTES = {
  "Mélykék + smaragd": {
    primary: "#0B3D5C",
    accent: "#1F8A5B",
    surface: "#FAFAF7",
    surface2: "#F1EFE8",
    ink: "#0A1929",
    inkMuted: "#475569",
  },
  "Navy + arany": {
    primary: "#0F1E3D",
    accent: "#B8924A",
    surface: "#FAF8F2",
    surface2: "#F0EBDF",
    ink: "#0A0E1A",
    inkMuted: "#52525B",
  },
  "Mély teal + korall": {
    primary: "#0E4F4A",
    accent: "#D9694B",
    surface: "#FBF9F5",
    surface2: "#F0EBE2",
    ink: "#0A1F1D",
    inkMuted: "#52605E",
  },
  "Erdő + krém": {
    primary: "#1F3D2A",
    accent: "#7A8A4E",
    surface: "#F6F2EA",
    surface2: "#EBE5D6",
    ink: "#1A2418",
    inkMuted: "#5A5F4E",
  },
};

const FONT_PAIRS = {
  "Instrument Serif + Inter": {
    display: "'Instrument Serif', Georgia, serif",
    sans: "'Inter', system-ui, sans-serif",
  },
  "Fraunces nincs — DM Serif + Inter": {
    display: "'DM Serif Display', Georgia, serif",
    sans: "'Inter', system-ui, sans-serif",
  },
  "Geist Mono + Geist": {
    display: "'Newsreader', Georgia, serif",
    sans: "'Geist', system-ui, sans-serif",
  },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  paletteName: "Mélykék + smaragd",
  fontPairName: "Instrument Serif + Inter",
  showChatbot: true,
  ctaIntensity: "Mérsékelt",
  heroLayout: "Split + infokártya",
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const palette = PALETTES[t.paletteName] || PALETTES["Mélykék + smaragd"];
  const fonts = FONT_PAIRS[t.fontPairName] || FONT_PAIRS["Instrument Serif + Inter"];

  // Compute line color from ink
  const cssVars = {
    "--c-primary": palette.primary,
    "--c-accent": palette.accent,
    "--c-surface": palette.surface,
    "--c-surface-2": palette.surface2,
    "--c-ink": palette.ink,
    "--c-ink-muted": palette.inkMuted,
    "--c-line": `color-mix(in oklch, ${palette.ink} 10%, transparent)`,
    "--c-line-strong": `color-mix(in oklch, ${palette.ink} 18%, transparent)`,
    "--font-display": fonts.display,
    "--font-sans": fonts.sans,
  };

  return (
    <div style={cssVars}>
      <Nav />
      <Hero />
      <Stats />
      <Mission />
      <Programs />
      <Calendar />
      <Faq />
      <PartnerCTA />
      <Footer />
      {t.showChatbot && <ChatbotFab />}

      <TweaksPanel>
        <TweakSection label="Színpaletta" />
        <TweakSelect
          label="Témaszín"
          value={t.paletteName}
          options={Object.keys(PALETTES)}
          onChange={(v) => setTweak("paletteName", v)}
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6, padding: "4px 12px 8px" }}>
          {Object.entries(PALETTES).map(([name, p]) => (
            <button
              key={name}
              onClick={() => setTweak("paletteName", name)}
              title={name}
              aria-label={name}
              style={{
                aspectRatio: "1",
                borderRadius: 8,
                cursor: "pointer",
                border: t.paletteName === name ? "2px solid #fff" : "1px solid rgba(255,255,255,0.15)",
                outline: t.paletteName === name ? "1px solid rgba(255,255,255,0.4)" : "none",
                background: `linear-gradient(135deg, ${p.primary} 0% 50%, ${p.accent} 50% 100%)`,
                padding: 0,
              }}
            />
          ))}
        </div>

        <TweakSection label="Tipográfia" />
        <TweakSelect
          label="Font párosítás"
          value={t.fontPairName}
          options={Object.keys(FONT_PAIRS)}
          onChange={(v) => setTweak("fontPairName", v)}
        />

        <TweakSection label="Felület" />
        <TweakToggle
          label="Chatbot ikon megjelenítése"
          value={t.showChatbot}
          onChange={(v) => setTweak("showChatbot", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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