// App — composes the page, wires Tweaks. Tweaks expose meaningful options:
//   accent — brass / oxblood / navy-only
//   density — comfortable / tight
//   formality — heritage italic vs modern serif
//   showMap — toggle for the global reach map (some users prefer cleaner layout)
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "brass",
  "density": "comfortable",
  "formality": "heritage",
  "showHeroSeal": true
}/*EDITMODE-END*/;

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

  // Apply accent live
  React.useEffect(() => {
    const root = document.documentElement;
    const map = {
      brass:   { brass:'#a07a3a', brass2:'#8a6628' },
      oxblood: { brass:'#a04a3a', brass2:'#7a2a1f' },
      navy:    { brass:'#3a5a7a', brass2:'#284561' },
    };
    const v = map[t.accent] || map.brass;
    root.style.setProperty('--brass',  v.brass);
    root.style.setProperty('--brass-2', v.brass2);
  }, [t.accent]);

  // Density tweak: toggles vertical rhythm via class on body
  React.useEffect(() => {
    document.body.dataset.density = t.density;
  }, [t.density]);

  // Formality: when "modern", swap display italics for upright on h1/h2
  React.useEffect(() => {
    document.body.dataset.formality = t.formality;
  }, [t.formality]);

  // Hero seal visibility
  React.useEffect(() => {
    document.body.dataset.heroSeal = t.showHeroSeal ? '1' : '0';
  }, [t.showHeroSeal]);

  // Reveal-on-scroll
  React.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 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <style>{`
        body[data-density="tight"] .products,
        body[data-density="tight"] .process,
        body[data-density="tight"] .trust,
        body[data-density="tight"] .reach,
        body[data-density="tight"] .contact{padding-top:80px;padding-bottom:80px}
        body[data-density="tight"] .prod-row{padding:24px 0}
        body[data-density="tight"] .proc-step{padding:32px 0}
        body[data-formality="modern"] .section-head h2,
        body[data-formality="modern"] .hero h1,
        body[data-formality="modern"] .hero h1 em,
        body[data-formality="modern"] .prod-row .name,
        body[data-formality="modern"] .proc-step .title,
        body[data-formality="modern"] .reach-side h3,
        body[data-formality="modern"] .contact-card h3{
          font-style:normal;font-family:var(--sans);font-weight:500;letter-spacing:-0.025em;
        }
        body[data-hero-seal="0"] .hero-seal{display:none}
        body[data-hero-seal="0"] .hero-grid{grid-template-columns:1fr}
      `}</style>

      <Nav />
      <Hero />
      <Products />
      <Reach />
      <Process />
      <Trust />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent">
          <TweakRadio
            label="Color"
            value={t.accent}
            options={['brass','oxblood','navy']}
            onChange={(v)=>setTweak('accent', v)}
          />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakRadio
            label="Density"
            value={t.density}
            options={['comfortable','tight']}
            onChange={(v)=>setTweak('density', v)}
          />
        </TweakSection>
        <TweakSection label="Type">
          <TweakRadio
            label="Voice"
            value={t.formality}
            options={[{value:'heritage', label:'Heritage'}, {value:'modern', label:'Modern'}]}
            onChange={(v)=>setTweak('formality', v)}
          />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakToggle
            label="Show seal"
            value={t.showHeroSeal}
            onChange={(v)=>setTweak('showHeroSeal', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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