// TagWave landing — root app

function App() {
  const [lang, setLang] = React.useState("pt");
  const tr = TRANSLATIONS[lang];
  const [showTour, setShowTour] = React.useState(() => shouldShowTour());
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent-h", tweaks.accentHue);
    r.style.setProperty("--accent-c", tweaks.accentChroma);
    r.style.setProperty("--grain", tweaks.grain ? 1 : 0);
    const map = {
      model: "assets/hero-model.png",
      crowd: "assets/crowd.jpg",
      visor: "assets/visor.jpg",
      curtain: "assets/curtain.jpg",
    };
    const img = document.querySelector(".hero-img");
    if (img) img.src = map[tweaks.heroVariant] || map.model;
  }, [tweaks]);

  return (
    <LangContext.Provider value={{ lang, setLang, tr }}>
      {showTour && <OnboardingTour onDone={() => setShowTour(false)} />}
      <TopNav />
      <main>
        <Hero />
        <LogoStrip />
        <Problem />
        <SoftwareUI />
        <Features />
        <HowItWorks />
        <StatBreak />
        <Integrations />
        <Pricing />
        <Testimonials />
        <FAQ />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent">
          <HueSwatches
            label="Hue"
            value={tweaks.accentHue}
            onChange={(v) => setTweak("accentHue", v)}
          />
          <TweakSlider label="Chroma" min={0.04} max={0.24} step={0.01} value={tweaks.accentChroma} onChange={(v) => setTweak("accentChroma", v)} />
        </TweakSection>
        <TweakSection label="Mood">
          <TweakRadio
            label="Hero subject"
            value={tweaks.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={[
              { value: "model", label: "Model" },
              { value: "crowd", label: "Crowd" },
              { value: "visor", label: "Visor" },
              { value: "curtain", label: "Curtain" },
            ]}
          />
          <TweakToggle label="Film grain" value={tweaks.grain} onChange={(v) => setTweak("grain", v)} />
        </TweakSection>
      </TweaksPanel>
    </LangContext.Provider>
  );
}

function HueSwatches({ label, value, onChange }) {
  const opts = [
    { v: 32,  c: "oklch(0.72 0.18 32)"  },
    { v: 60,  c: "oklch(0.78 0.16 60)"  },
    { v: 24,  c: "oklch(0.62 0.14 24)"  },
    { v: 8,   c: "oklch(0.58 0.20 8)"   },
    { v: 350, c: "oklch(0.62 0.14 350)" },
  ];
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0" }}>
      <span style={{ fontSize: 12, color: "rgba(255,255,255,0.7)" }}>{label}</span>
      <div style={{ display: "flex", gap: 8 }}>
        {opts.map((o) => {
          const active = o.v === value;
          return (
            <button
              key={o.v}
              onClick={() => onChange(o.v)}
              style={{
                width: 24, height: 24, borderRadius: 6,
                background: o.c,
                border: active ? "2px solid white" : "1px solid rgba(255,255,255,0.18)",
                boxShadow: active ? `0 0 14px ${o.c}` : "none",
                cursor: "pointer",
                padding: 0,
              }}
              aria-label={`hue ${o.v}`}
            />
          );
        })}
      </div>
    </div>
  );
}

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