// app.jsx — main mount + tweaks

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c7452a",
  "density": "regular",
  "headline": "painting",
  "dark": false
} /*EDITMODE-END*/;

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -80px 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

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

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.body.classList.remove("dense", "loose");
    if (t.density === "compact") document.body.classList.add("dense");
    if (t.density === "comfy") document.body.classList.add("loose");
    if (t.dark) {
      document.documentElement.style.setProperty("--bg", "#0e0d0b");
      document.documentElement.style.setProperty("--bg-alt", "#1a1814");
      document.documentElement.style.setProperty("--ink", "#f4f1ea");
      document.documentElement.style.setProperty("--ink-2", "#d6cfbe");
      document.documentElement.style.setProperty("--ink-3", "#8a8270");
      document.documentElement.style.setProperty("--rule", "#2a2620");
      document.documentElement.style.setProperty("--paper", "#1a1814");
    } else {
      document.documentElement.style.setProperty("--bg", "#f4f1ea");
      document.documentElement.style.setProperty("--bg-alt", "#ebe6db");
      document.documentElement.style.setProperty("--ink", "#0e0d0b");
      document.documentElement.style.setProperty("--ink-2", "#26231c");
      document.documentElement.style.setProperty("--ink-3", "#6b6557");
      document.documentElement.style.setProperty("--rule", "#d6cfbe");
      document.documentElement.style.setProperty("--paper", "#ffffff");
    }
  }, [t.accent, t.density, t.dark]);

  // Rewrite hero headline based on tweak
  useEffect(() => {
    const el = document.querySelector(".hero-title");
    if (!el) return;
    const variants = {
      painting: ["Actively managing", <>risk for the <em>next century</em>.</>],
      underwrite: ["Actively managing", <>risk for the <em>next century</em>.</>],
      rebuild: ["Rebuilding", <>from <em>first principles</em>.</>],
      ai: ["AI native", <>by <em>design</em>.</>]
    };
  }, [t.headline]);

  const headlines = {
    painting: { a: "Actively managing", b: <>risk for the <em>next century</em>.</> },
    underwrite: { a: "Actively managing", b: <>risk for the <em>next century</em>.</> },
    rebuild: { a: "Rebuilding", b: <>from <em>first principles</em>.</> },
    ai: { a: "AI native", b: <>by <em>design</em>.</> }
  };
  const hl = headlines[t.headline] || headlines.painting;

  return (
    <>
      <Nav />
      <HeroWithHeadline accent={t.accent} a={hl.a} b={hl.b} />
      <Ticker />
      <Mission />
      <Portfolio accent={t.accent} />
      <Leadership accent={t.accent} />
      <Investors />
      <Strip />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={t.accent} onChange={(v) => setTweak("accent", v)} />
        <TweakRadio
          label="Headline"
          value={t.headline}
          options={["painting", "underwrite", "rebuild", "ai"]}
          onChange={(v) => setTweak("headline", v)} />
        
        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak("density", v)} />
        
        <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak("dark", v)} />
      </TweaksPanel>
    </>);

}

function HeroWithHeadline({ accent, a, b }) {
  return (
    <section className="hero" id="top">
      <HeroBrush accent={accent} />
      <div className="hero-head">
        <div className="hero-meta">
          <span><b>RIA</b></span>
          <span><b>INDIA | USA</b></span>
        </div>
        <div className="hero-meta" style={{ textAlign: "right" }}>
          <span>AI Native Holding Co.</span>
          <span><b>Insurance × Healthcare</b></span>
        </div>
      </div>

      <div className="hero-title-wrap">
        <h1 className="hero-title" key={a}>
          <span className="l1 reveal in">{a}</span>
          <span className="l2 reveal in d1">{b}</span>
        </h1>
      </div>

      <div className="hero-foot">
        <p className="hero-lede reveal in d2">
          RIA is an <b>AI‑native holding company</b> building and operating companies in insurance and healthcare.
          <br />
          Multiple companies. One thesis. Zero legacy.
        </p>
        <div className="hero-scroll reveal in d3">
          <span>Scroll</span>
          <div className="line" />
        </div>
        <div className="hero-caps reveal in d3">
          <div>VOL. 04 / 2026</div>
          <div>Index 001–004</div>
        </div>
      </div>
    </section>);

}

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